@brightspot/ui 3.0.1-cms-ui-migration.2 → 3.0.1-cms-ui-migration.4

package/dist/custom-elements.json

@@ -4,225 +4,105 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/components/avatar/Avatar.ts",
+      "path": "src/components/action-bar/ActionBar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "An avatar component for displaying user profile images with fallback support.\n\nAvatars display user profile images with automatic fallback to initials when\nthe image fails to load or is not provided.",
-          "name": "Avatar",
+          "description": "A persistent container for primary, secondary, tertiary, and destructive actions\nwithin an interface, typically anchored to the bottom of a view.\n\nUses a two-zone layout: destructive actions on the left (start zone),\nmain actions on the right (end zone). Both zones maintain their position\neven when the other zone is empty (BSP-18087).\n\n**Positioning:** Uses `margin-top: auto` to push to bottom of flex/grid parents.\nIn block layout parents, the bar sits after content (a console warning is emitted).\n\n**Overflow:** When items don't fit, the least important overflow into a \"More\" dropdown.\nItems are auto-sorted by variant priority (tertiary → secondary → primary).\nWith `compact`, compactable items progressively hide labels one-by-one before overflowing.",
+          "name": "ActionBar",
           "cssProperties": [
             {
-              "description": "Custom size (overrides size prop)",
-              "name": "--avatar-size"
+              "description": "Gap between items (default: 0.75rem)",
+              "name": "--action-bar-gap"
             },
             {
-              "description": "Fallback background color (default: purple-600)",
-              "name": "--avatar-bg-color"
+              "description": "Bar padding (default: 1.5rem)",
+              "name": "--action-bar-padding"
             },
             {
-              "description": "How rounded is the avatar (default: circle)",
-              "name": "--avatar-corner-rounding"
+              "description": "Background color (default: white)",
+              "name": "--action-bar-background"
             },
             {
-              "description": "Optional ring border color",
-              "name": "--avatar-ring-color"
+              "description": "Border color (default: gray-200)",
+              "name": "--action-bar-border-color"
             },
             {
-              "description": "Ring border width (default: 2px)",
-              "name": "--avatar-ring-width"
+              "description": "Z-index (default: 100)",
+              "name": "--action-bar-z-index"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more `btu-action-item` elements",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "src",
+              "name": "position",
               "type": {
-                "text": "string"
+                "text": "Position"
               },
-              "default": "''",
-              "description": "Image source URL",
-              "attribute": "src"
+              "default": "'bottom'",
+              "description": "Bar position: 'top' or 'bottom' (default).",
+              "attribute": "position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "alt",
+              "name": "sticky",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Alt text for the image",
-              "attribute": "alt"
+              "default": "false",
+              "description": "Enables CSS sticky positioning. When combined with position='top',\nthe bar sticks to the top of the scroll container. With position='bottom'\n(default), it sticks to the bottom.",
+              "attribute": "sticky",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "fallback",
+              "name": "alignment",
               "type": {
-                "text": "string"
+                "text": "Alignment"
               },
-              "default": "''",
-              "description": "Fallback text (typically user initials)",
-              "attribute": "fallback"
+              "default": "'default'",
+              "description": "Content alignment: 'default' (two-zone), 'start', 'center', 'end'.\nNon-default alignments disable two-zone layout.",
+              "attribute": "item-alignment",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "shadow",
               "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
+                "text": "boolean"
               },
-              "default": "'md'",
-              "description": "Size variant.\n- 'xs': Extra small (1.5rem)\n- 'sm': Small (2.25rem)\n- 'md': Medium (2.5rem) - default\n- 'lg': Large (3rem)\n- 'xl': Extra large (3.5rem)\n- 'xxl': Extra extra large (4rem)",
-              "attribute": "size"
+              "default": "false",
+              "description": "Adds a box-shadow to the bar.",
+              "attribute": "shadow",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Tooltip text content. Set to empty string to remove the tooltip.",
-              "attribute": "tooltip",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipPosition",
-              "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
-              },
-              "default": "'top'",
-              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
-              "attribute": "tooltip-position",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipDelay",
-              "type": {
-                "text": "number"
-              },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "attribute": "tooltip-delay",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipOffset",
-              "type": {
-                "text": "TooltipOffset | null"
-              },
-              "default": "null",
-              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
-              "attribute": "tooltip-offset",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Accessible label for the toolbar region.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "tooltipNoArrow",
+              "name": "compact",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "tooltip-no-arrow",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipTrigger",
-              "type": {
-                "text": "string"
-              },
-              "default": "'hover focus'",
-              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
-              "attribute": "tooltip-trigger",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_onMouseLeave",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_onFocusIn",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_onFocusOut",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_onClick",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_onNativeToggle",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_onKeyDown",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_onDocumentClick",
-              "type": {
-                "text": "((e: MouseEvent) => void) | null"
-              },
-              "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Enables progressive label compacting. When space shrinks, items marked\n`compactable` (with icons) have their labels hidden one-by-one\nfrom least to most important before items overflow into \"More\".",
+              "attribute": "compact",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -262,218 +142,82 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after first render and initialization",
-              "name": "btu-avatar-ready"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{src: string}>"
-              },
-              "description": "Fired when image successfully loads",
-              "name": "btu-avatar-image-loaded"
+              "name": "btu-action-bar-ready"
             },
             {
               "type": {
-                "text": "CustomEvent<{src: string, error: Event}>"
+                "text": "CustomEvent<{label: string}>"
               },
-              "description": "Fired when image fails to load",
-              "name": "btu-avatar-image-error"
+              "description": "Fired when an action item is clicked (bubbles from btu-action-item)",
+              "name": "btu-action-item-click"
             }
           ],
           "attributes": [
             {
-              "name": "src",
+              "name": "position",
               "type": {
-                "text": "string"
+                "text": "Position"
               },
-              "default": "''",
-              "description": "Image source URL",
-              "fieldName": "src",
-              "attribute": "src"
+              "default": "'bottom'",
+              "description": "Bar position: 'top' or 'bottom' (default).",
+              "fieldName": "position",
+              "attribute": "position"
             },
             {
-              "name": "alt",
+              "name": "sticky",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Alt text for the image",
-              "fieldName": "alt",
-              "attribute": "alt"
-            },
-            {
-              "name": "fallback",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Fallback text (typically user initials)",
-              "fieldName": "fallback",
-              "attribute": "fallback"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
-              },
-              "default": "'md'",
-              "description": "Size variant.\n- 'xs': Extra small (1.5rem)\n- 'sm': Small (2.25rem)\n- 'md': Medium (2.5rem) - default\n- 'lg': Large (3rem)\n- 'xl': Extra large (3.5rem)\n- 'xxl': Extra extra large (4rem)",
-              "fieldName": "size",
-              "attribute": "size"
-            },
-            {
-              "name": "tooltip",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Tooltip text content. Set to empty string to remove the tooltip.",
-              "fieldName": "tooltip",
-              "attribute": "tooltip",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltipPosition",
-              "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
-              },
-              "default": "'top'",
-              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
-              "fieldName": "tooltipPosition",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltipDelay",
-              "type": {
-                "text": "number"
-              },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "fieldName": "tooltipDelay",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "default": "false",
+              "description": "Enables CSS sticky positioning. When combined with position='top',\nthe bar sticks to the top of the scroll container. With position='bottom'\n(default), it sticks to the bottom.",
+              "fieldName": "sticky",
+              "attribute": "sticky"
             },
             {
-              "name": "tooltipOffset",
+              "name": "item-alignment",
               "type": {
-                "text": "TooltipOffset | null"
+                "text": "Alignment"
               },
-              "default": "null",
-              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
-              "fieldName": "tooltipOffset",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "default": "'default'",
+              "description": "Content alignment: 'default' (two-zone), 'start', 'center', 'end'.\nNon-default alignments disable two-zone layout.",
+              "fieldName": "alignment",
+              "attribute": "item-alignment"
             },
             {
-              "name": "tooltipNoArrow",
+              "name": "shadow",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "fieldName": "tooltipNoArrow",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Adds a box-shadow to the bar.",
+              "fieldName": "shadow",
+              "attribute": "shadow"
             },
             {
-              "name": "tooltipTrigger",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "'hover focus'",
-              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
-              "fieldName": "tooltipTrigger",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-position",
-              "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
-              },
-              "default": "'top'",
-              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
-              "attribute": "tooltipPosition",
-              "fieldName": "tooltipPosition",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "attribute": "tooltipDelay",
-              "fieldName": "tooltipDelay",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-offset",
-              "type": {
-                "text": "TooltipOffset | null"
-              },
-              "default": "null",
-              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
-              "attribute": "tooltipOffset",
-              "fieldName": "tooltipOffset",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "default": "''",
+              "description": "Accessible label for the toolbar region.",
+              "fieldName": "label",
+              "attribute": "label"
             },
             {
-              "name": "tooltip-no-arrow",
+              "name": "compact",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "tooltipNoArrow",
-              "fieldName": "tooltipNoArrow",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-trigger",
-              "type": {
-                "text": "string"
-              },
-              "default": "'hover focus'",
-              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
-              "attribute": "tooltipTrigger",
-              "fieldName": "tooltipTrigger",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Enables progressive label compacting. When space shrinks, items marked\n`compactable` (with icons) have their labels hidden one-by-one\nfrom least to most important before items overflow into \"More\".",
+              "fieldName": "compact",
+              "attribute": "compact"
             }
           ],
           "mixins": [
             {
-              "name": "TooltipMixin",
-              "module": "/src/util/TooltipMixin.js"
+              "name": "RovingTabindexMixin",
+              "module": "/src/util/RovingTabindexMixin.js"
             },
             {
               "name": "EventEmitterMixin",
@@ -488,7 +232,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-avatar",
+          "tagName": "btu-action-bar",
           "customElement": true
         }
       ],
@@ -497,265 +241,327 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Avatar",
-            "module": "src/components/avatar/Avatar.ts"
+            "name": "ActionBar",
+            "module": "src/components/action-bar/ActionBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-avatar",
+          "name": "btu-action-bar",
           "declaration": {
-            "name": "Avatar",
-            "module": "src/components/avatar/Avatar.ts"
+            "name": "ActionBar",
+            "module": "src/components/action-bar/ActionBar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/avatar/AvatarGroup.ts",
+      "path": "src/components/action-bar/ActionItem.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A container component for grouping multiple avatars with consistent styling.\n\nAvatarGroup wraps multiple avatar elements and provides:\n- Overflow handling (shows \"+N\" for excess avatars)\n- Consistent spacing and ring borders\n- Size inheritance for all child avatars",
-          "name": "AvatarGroup",
+          "description": "An action item button for use within `btu-action-bar`.\n\nRenders a styled button using existing `btu-button-*` classes. Supports\nprimary, secondary, tertiary, and destructive variants. When `iconOnly`\nis set, the label is hidden and a tooltip is shown instead.\n\n**Button styling:** Set `--button-*` CSS custom properties on `<btu-action-item>`\nor a parent element to customize via CSS inheritance. See\n`tailwind-plugin-button.ts` for available props.",
+          "name": "ActionItem",
+          "cssProperties": [
+            {
+              "description": "Override button background color",
+              "name": "--button-color"
+            },
+            {
+              "description": "Override button text color",
+              "name": "--button-text-color"
+            },
+            {
+              "description": "Override button border radius",
+              "name": "--button-border-radius"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "max",
+              "name": "label",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
-              "attribute": "max"
+              "default": "''",
+              "description": "Button label text.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "'xs' | 'sm' | 'md'"
+                "text": "ActionItemVariant"
               },
-              "default": "'md'",
-              "description": "Size variant for all child avatars (unless individually overridden)",
-              "attribute": "size"
+              "default": "'secondary'",
+              "description": "Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.",
+              "attribute": "variant"
             },
             {
-              "kind": "method",
-              "name": "processAvatars",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "symbol",
+              "type": {
+                "text": "string"
               },
-              "description": "Process all avatar children: apply size, handle overflow\nCall this method when avatars are dynamically added or removed"
+              "default": "''",
+              "description": "Lucide icon symbol for the leading icon.",
+              "attribute": "symbol"
             },
             {
-              "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"
-                }
+              "kind": "field",
+              "name": "iconOnly",
+              "type": {
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "EventEmitterMixin",
-                "module": "src/util/EventEmitterMixin.ts"
-              }
-            }
-          ],
-          "events": [
+              "default": "false",
+              "description": "Show icon only, hiding the label. Tooltip activates automatically with the label text.",
+              "attribute": "icon-only"
+            },
             {
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "CustomEvent"
+                "text": "boolean"
               },
-              "description": "Fired after first render and initialization",
-              "name": "btu-avatar-group-ready"
+              "default": "false",
+              "description": "Disables the action item. The button remains focusable for accessibility\nbut click events are suppressed.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
+              "name": "loading",
               "type": {
-                "text": "CustomEvent<{hidden: number}>"
+                "text": "boolean"
               },
-              "description": "Fired when avatars are hidden due to max limit",
-              "name": "btu-avatar-group-overflow"
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Shows a loading spinner and prevents interaction.",
+              "attribute": "loading",
+              "reflects": true
+            },
             {
-              "name": "max",
+              "kind": "field",
+              "name": "zone",
               "type": {
-                "text": "number | undefined"
+                "text": "'start' | 'end' | ''"
               },
-              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
-              "fieldName": "max",
-              "attribute": "max"
+              "default": "''",
+              "description": "Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.\nIf unset, auto-detected from variant (destructive → start, others → end).",
+              "attribute": "zone",
+              "reflects": true
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "compactable",
               "type": {
-                "text": "'xs' | 'sm' | 'md'"
+                "text": "boolean"
               },
-              "default": "'md'",
-              "description": "Size variant for all child avatars (unless individually overridden)",
-              "fieldName": "size",
-              "attribute": "size"
-            }
-          ],
-          "mixins": [
+              "default": "false",
+              "description": "Opt-in for progressive label compacting. When the parent bar has `compact`\nenabled and space shrinks, compactable items with icons have their labels\nhidden one-by-one (least important first) before overflowing.\nItems without an icon ignore this attribute and go directly to overflow.",
+              "attribute": "compactable",
+              "reflects": true
+            },
             {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
+              "kind": "method",
+              "name": "_relayTooltipAttrs",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-avatar-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AvatarGroup",
-            "module": "src/components/avatar/AvatarGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-avatar-group",
-          "declaration": {
-            "name": "AvatarGroup",
-            "module": "src/components/avatar/AvatarGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/action-bar/ActionBar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A persistent container for primary, secondary, tertiary, and destructive actions\nwithin an interface, typically anchored to the bottom of a view.\n\nUses a two-zone layout: destructive actions on the left (start zone),\nmain actions on the right (end zone). Both zones maintain their position\neven when the other zone is empty (BSP-18087).\n\n**Positioning:** Uses `margin-top: auto` to push to bottom of flex/grid parents.\nIn block layout parents, the bar sits after content (a console warning is emitted).\n\n**Overflow:** When items don't fit, the least important overflow into a \"More\" dropdown.\nItems are auto-sorted by variant priority (tertiary → secondary → primary).\nWith `compact`, compactable items progressively hide labels one-by-one before overflowing.",
-          "name": "ActionBar",
-          "cssProperties": [
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
-              "description": "Gap between items (default: 0.75rem)",
-              "name": "--action-bar-gap"
+              "kind": "method",
+              "name": "_getSpinnerColor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
             },
             {
-              "description": "Bar padding (default: 1.5rem)",
-              "name": "--action-bar-padding"
+              "kind": "method",
+              "name": "_buildButtonClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
             },
             {
-              "description": "Background color (default: white)",
-              "name": "--action-bar-background"
+              "kind": "method",
+              "name": "_getButtonStyles",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Record<string, string>"
+                }
+              }
             },
             {
-              "description": "Border color (default: gray-200)",
-              "name": "--action-bar-border-color"
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Tooltip text content. Set to empty string to remove the tooltip.",
+              "attribute": "tooltip",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "description": "Z-index (default: 100)",
-              "name": "--action-bar-z-index"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "tooltipPosition",
+              "type": {
+                "text": "'top' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "'top'",
+              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
+              "attribute": "tooltip-position",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
             {
-              "description": "One or more `btu-action-item` elements",
-              "name": ""
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "tooltipDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "attribute": "tooltip-delay",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
             {
               "kind": "field",
-              "name": "position",
+              "name": "tooltipOffset",
               "type": {
-                "text": "Position"
+                "text": "TooltipOffset | null"
               },
-              "default": "'bottom'",
-              "description": "Bar position: 'top' or 'bottom' (default).",
-              "attribute": "position",
-              "reflects": true
+              "default": "null",
+              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
+              "attribute": "tooltip-offset",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "sticky",
+              "name": "tooltipNoArrow",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables CSS sticky positioning. When combined with position='top',\nthe bar sticks to the top of the scroll container. With position='bottom'\n(default), it sticks to the bottom.",
-              "attribute": "sticky",
-              "reflects": true
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "tooltip-no-arrow",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "alignment",
+              "name": "tooltipTrigger",
               "type": {
-                "text": "Alignment"
+                "text": "string"
               },
-              "default": "'default'",
-              "description": "Content alignment: 'default' (two-zone), 'start', 'center', 'end'.\nNon-default alignments disable two-zone layout.",
-              "attribute": "item-alignment",
-              "reflects": true
+              "default": "'hover focus'",
+              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
+              "attribute": "tooltip-trigger",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onMouseLeave",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onFocusIn",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onFocusOut",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onClick",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "shadow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds a box-shadow to the bar.",
-              "attribute": "shadow",
-              "reflects": true
+              "name": "_onNativeToggle",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Accessible label for the toolbar region.",
-              "attribute": "label"
+              "name": "_onKeyDown",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "compact",
+              "name": "_onDocumentClick",
               "type": {
-                "text": "boolean"
+                "text": "((e: MouseEvent) => void) | null"
               },
-              "default": "false",
-              "description": "Enables progressive label compacting. When space shrinks, items marked\n`compactable` (with icons) have their labels hidden one-by-one\nfrom least to most important before items overflow into \"More\".",
-              "attribute": "compact",
-              "reflects": true
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "method",
@@ -790,87 +596,249 @@
             }
           ],
           "events": [
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired after first render and initialization",
-              "name": "btu-action-bar-ready"
-            },
             {
               "type": {
                 "text": "CustomEvent<{label: string}>"
               },
-              "description": "Fired when an action item is clicked (bubbles from btu-action-item)",
+              "description": "Fired when the action item is clicked (not fired when disabled or loading)",
               "name": "btu-action-item-click"
             }
           ],
           "attributes": [
             {
-              "name": "position",
+              "name": "label",
               "type": {
-                "text": "Position"
+                "text": "string"
               },
-              "default": "'bottom'",
-              "description": "Bar position: 'top' or 'bottom' (default).",
-              "fieldName": "position",
-              "attribute": "position"
+              "default": "''",
+              "description": "Button label text.",
+              "fieldName": "label",
+              "attribute": "label"
             },
             {
-              "name": "sticky",
+              "name": "variant",
+              "type": {
+                "text": "ActionItemVariant"
+              },
+              "default": "'secondary'",
+              "description": "Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.",
+              "fieldName": "variant",
+              "attribute": "variant"
+            },
+            {
+              "name": "symbol",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Lucide icon symbol for the leading icon.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
+            },
+            {
+              "name": "icon-only",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables CSS sticky positioning. When combined with position='top',\nthe bar sticks to the top of the scroll container. With position='bottom'\n(default), it sticks to the bottom.",
-              "fieldName": "sticky",
-              "attribute": "sticky"
+              "description": "Show icon only, hiding the label. Tooltip activates automatically with the label text.",
+              "fieldName": "iconOnly",
+              "attribute": "icon-only"
             },
             {
-              "name": "item-alignment",
+              "name": "disabled",
               "type": {
-                "text": "Alignment"
+                "text": "boolean"
               },
-              "default": "'default'",
-              "description": "Content alignment: 'default' (two-zone), 'start', 'center', 'end'.\nNon-default alignments disable two-zone layout.",
-              "fieldName": "alignment",
-              "attribute": "item-alignment"
+              "default": "false",
+              "description": "Disables the action item. The button remains focusable for accessibility\nbut click events are suppressed.",
+              "fieldName": "disabled",
+              "attribute": "disabled"
             },
             {
-              "name": "shadow",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Adds a box-shadow to the bar.",
-              "fieldName": "shadow",
-              "attribute": "shadow"
+              "description": "Shows a loading spinner and prevents interaction.",
+              "fieldName": "loading",
+              "attribute": "loading"
+            },
+            {
+              "name": "zone",
+              "type": {
+                "text": "'start' | 'end' | ''"
+              },
+              "default": "''",
+              "description": "Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.\nIf unset, auto-detected from variant (destructive → start, others → end).",
+              "fieldName": "zone",
+              "attribute": "zone"
+            },
+            {
+              "name": "compactable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Opt-in for progressive label compacting. When the parent bar has `compact`\nenabled and space shrinks, compactable items with icons have their labels\nhidden one-by-one (least important first) before overflowing.\nItems without an icon ignore this attribute and go directly to overflow.",
+              "fieldName": "compactable",
+              "attribute": "compactable"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Tooltip text content. Set to empty string to remove the tooltip.",
+              "fieldName": "tooltip",
+              "attribute": "tooltip",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipPosition",
+              "type": {
+                "text": "'top' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "'top'",
+              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
+              "fieldName": "tooltipPosition",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "fieldName": "tooltipDelay",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipOffset",
+              "type": {
+                "text": "TooltipOffset | null"
+              },
+              "default": "null",
+              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
+              "fieldName": "tooltipOffset",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipNoArrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "fieldName": "tooltipNoArrow",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipTrigger",
+              "type": {
+                "text": "string"
+              },
+              "default": "'hover focus'",
+              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
+              "fieldName": "tooltipTrigger",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltip-position",
+              "type": {
+                "text": "'top' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "'top'",
+              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
+              "attribute": "tooltipPosition",
+              "fieldName": "tooltipPosition",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltip-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "attribute": "tooltipDelay",
+              "fieldName": "tooltipDelay",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltip-offset",
+              "type": {
+                "text": "TooltipOffset | null"
+              },
+              "default": "null",
+              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
+              "attribute": "tooltipOffset",
+              "fieldName": "tooltipOffset",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "label",
+              "name": "tooltip-no-arrow",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Accessible label for the toolbar region.",
-              "fieldName": "label",
-              "attribute": "label"
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "tooltipNoArrow",
+              "fieldName": "tooltipNoArrow",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "compact",
+              "name": "tooltip-trigger",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Enables progressive label compacting. When space shrinks, items marked\n`compactable` (with icons) have their labels hidden one-by-one\nfrom least to most important before items overflow into \"More\".",
-              "fieldName": "compact",
-              "attribute": "compact"
+              "default": "'hover focus'",
+              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
+              "attribute": "tooltipTrigger",
+              "fieldName": "tooltipTrigger",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             }
           ],
           "mixins": [
             {
-              "name": "RovingTabindexMixin",
-              "module": "/src/util/RovingTabindexMixin.js"
+              "name": "TooltipMixin",
+              "module": "/src/util/TooltipMixin.js"
             },
             {
               "name": "EventEmitterMixin",
@@ -885,7 +853,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-action-bar",
+          "tagName": "btu-action-item",
           "customElement": true
         }
       ],
@@ -894,176 +862,90 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ActionBar",
-            "module": "src/components/action-bar/ActionBar.ts"
+            "name": "ActionItem",
+            "module": "src/components/action-bar/ActionItem.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-action-bar",
+          "name": "btu-action-item",
           "declaration": {
-            "name": "ActionBar",
-            "module": "src/components/action-bar/ActionBar.ts"
+            "name": "ActionItem",
+            "module": "src/components/action-bar/ActionItem.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/action-bar/ActionItem.ts",
+      "path": "src/components/avatar/Avatar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "An action item button for use within `btu-action-bar`.\n\nRenders a styled button using existing `btu-button-*` classes. Supports\nprimary, secondary, tertiary, and destructive variants. When `iconOnly`\nis set, the label is hidden and a tooltip is shown instead.\n\n**Button styling:** Set `--button-*` CSS custom properties on `<btu-action-item>`\nor a parent element to customize via CSS inheritance. See\n`tailwind-plugin-button.ts` for available props.",
-          "name": "ActionItem",
+          "description": "An avatar component for displaying user profile images with fallback support.\n\nAvatars display user profile images with automatic fallback to initials when\nthe image fails to load or is not provided.",
+          "name": "Avatar",
           "cssProperties": [
             {
-              "description": "Override button background color",
-              "name": "--button-color"
+              "description": "Custom size (overrides size prop)",
+              "name": "--avatar-size"
             },
             {
-              "description": "Override button text color",
-              "name": "--button-text-color"
+              "description": "Fallback background color (default: purple-600)",
+              "name": "--avatar-bg-color"
             },
             {
-              "description": "Override button border radius",
-              "name": "--button-border-radius"
+              "description": "How rounded is the avatar (default: circle)",
+              "name": "--avatar-corner-rounding"
+            },
+            {
+              "description": "Optional ring border color",
+              "name": "--avatar-ring-color"
+            },
+            {
+              "description": "Ring border width (default: 2px)",
+              "name": "--avatar-ring-width"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "label",
+              "name": "src",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Button label text.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "ActionItemVariant"
-              },
-              "default": "'secondary'",
-              "description": "Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.",
-              "attribute": "variant"
+              "description": "Image source URL",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "symbol",
+              "name": "alt",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Lucide icon symbol for the leading icon.",
-              "attribute": "symbol"
-            },
-            {
-              "kind": "field",
-              "name": "iconOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show icon only, hiding the label. Tooltip activates automatically with the label text.",
-              "attribute": "icon-only"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the action item. The button remains focusable for accessibility\nbut click events are suppressed.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows a loading spinner and prevents interaction.",
-              "attribute": "loading",
-              "reflects": true
+              "description": "Alt text for the image",
+              "attribute": "alt"
             },
             {
               "kind": "field",
-              "name": "zone",
+              "name": "fallback",
               "type": {
-                "text": "'start' | 'end' | ''"
+                "text": "string"
               },
               "default": "''",
-              "description": "Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.\nIf unset, auto-detected from variant (destructive → start, others → end).",
-              "attribute": "zone",
-              "reflects": true
+              "description": "Fallback text (typically user initials)",
+              "attribute": "fallback"
             },
             {
               "kind": "field",
-              "name": "compactable",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
               },
-              "default": "false",
-              "description": "Opt-in for progressive label compacting. When the parent bar has `compact`\nenabled and space shrinks, compactable items with icons have their labels\nhidden one-by-one (least important first) before overflowing.\nItems without an icon ignore this attribute and go directly to overflow.",
-              "attribute": "compactable",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "_relayTooltipAttrs",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_handleClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getSpinnerColor",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_buildButtonClasses",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getButtonStyles",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Record<string, string>"
-                }
-              }
+              "default": "'md'",
+              "description": "Size variant.\n- 'xs': Extra small (1.5rem)\n- 'sm': Small (2.25rem)\n- 'md': Medium (2.5rem) - default\n- 'lg': Large (3rem)\n- 'xl': Extra large (3.5rem)\n- 'xxl': Extra extra large (4rem)",
+              "attribute": "size"
             },
             {
               "kind": "field",
@@ -1251,92 +1133,66 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<{label: string}>"
-              },
-              "description": "Fired when the action item is clicked (not fired when disabled or loading)",
-              "name": "btu-action-item-click"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Button label text.",
-              "fieldName": "label",
-              "attribute": "label"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "ActionItemVariant"
+                "text": "CustomEvent"
               },
-              "default": "'secondary'",
-              "description": "Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.",
-              "fieldName": "variant",
-              "attribute": "variant"
+              "description": "Fired after first render and initialization",
+              "name": "btu-avatar-ready"
             },
             {
-              "name": "symbol",
               "type": {
-                "text": "string"
+                "text": "CustomEvent<{src: string}>"
               },
-              "default": "''",
-              "description": "Lucide icon symbol for the leading icon.",
-              "fieldName": "symbol",
-              "attribute": "symbol"
+              "description": "Fired when image successfully loads",
+              "name": "btu-avatar-image-loaded"
             },
             {
-              "name": "icon-only",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent<{src: string, error: Event}>"
               },
-              "default": "false",
-              "description": "Show icon only, hiding the label. Tooltip activates automatically with the label text.",
-              "fieldName": "iconOnly",
-              "attribute": "icon-only"
-            },
+              "description": "Fired when image fails to load",
+              "name": "btu-avatar-image-error"
+            }
+          ],
+          "attributes": [
             {
-              "name": "disabled",
+              "name": "src",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the action item. The button remains focusable for accessibility\nbut click events are suppressed.",
-              "fieldName": "disabled",
-              "attribute": "disabled"
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image source URL",
+              "fieldName": "src",
+              "attribute": "src"
             },
             {
-              "name": "loading",
+              "name": "alt",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Shows a loading spinner and prevents interaction.",
-              "fieldName": "loading",
-              "attribute": "loading"
+              "default": "''",
+              "description": "Alt text for the image",
+              "fieldName": "alt",
+              "attribute": "alt"
             },
             {
-              "name": "zone",
+              "name": "fallback",
               "type": {
-                "text": "'start' | 'end' | ''"
+                "text": "string"
               },
               "default": "''",
-              "description": "Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.\nIf unset, auto-detected from variant (destructive → start, others → end).",
-              "fieldName": "zone",
-              "attribute": "zone"
+              "description": "Fallback text (typically user initials)",
+              "fieldName": "fallback",
+              "attribute": "fallback"
             },
             {
-              "name": "compactable",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
               },
-              "default": "false",
-              "description": "Opt-in for progressive label compacting. When the parent bar has `compact`\nenabled and space shrinks, compactable items with icons have their labels\nhidden one-by-one (least important first) before overflowing.\nItems without an icon ignore this attribute and go directly to overflow.",
-              "fieldName": "compactable",
-              "attribute": "compactable"
+              "default": "'md'",
+              "description": "Size variant.\n- 'xs': Extra small (1.5rem)\n- 'sm': Small (2.25rem)\n- 'md': Medium (2.5rem) - default\n- 'lg': Large (3rem)\n- 'xl': Extra large (3.5rem)\n- 'xxl': Extra extra large (4rem)",
+              "fieldName": "size",
+              "attribute": "size"
             },
             {
               "name": "tooltip",
@@ -1506,7 +1362,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-action-item",
+          "tagName": "btu-avatar",
           "customElement": true
         }
       ],
@@ -1515,90 +1371,57 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ActionItem",
-            "module": "src/components/action-bar/ActionItem.ts"
+            "name": "Avatar",
+            "module": "src/components/avatar/Avatar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-action-item",
+          "name": "btu-avatar",
           "declaration": {
-            "name": "ActionItem",
-            "module": "src/components/action-bar/ActionItem.ts"
+            "name": "Avatar",
+            "module": "src/components/avatar/Avatar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/badge/Badge.ts",
+      "path": "src/components/avatar/AvatarGroup.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": ""
-            }
-          ],
+          "description": "A container component for grouping multiple avatars with consistent styling.\n\nAvatarGroup wraps multiple avatar elements and provides:\n- Overflow handling (shows \"+N\" for excess avatars)\n- Consistent spacing and ring borders\n- Size inheritance for all child avatars",
+          "name": "AvatarGroup",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "max",
               "type": {
-                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+                "text": "number | 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": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "dot",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'xs' | 'sm' | 'md'"
               },
-              "default": "false",
-              "description": "Should a dot be displayed before the label?",
-              "attribute": "dot"
+              "default": "'md'",
+              "description": "Size variant for all child avatars (unless individually overridden)",
+              "attribute": "size"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
+              "kind": "method",
+              "name": "processAvatars",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "'sm'",
-              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
-              "attribute": "size"
+              "description": "Process all avatar children: apply size, handle overflow\nCall this method when avatars are dynamically added or removed"
             },
             {
               "kind": "method",
@@ -1638,37 +1461,33 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after first render and initialization",
-              "name": "btu-badge-ready"
-            }
-          ],
-          "attributes": [
+              "name": "btu-avatar-group-ready"
+            },
             {
-              "name": "variant",
               "type": {
-                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+                "text": "CustomEvent<{hidden: number}>"
               },
-              "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"
-            },
+              "description": "Fired when avatars are hidden due to max limit",
+              "name": "btu-avatar-group-overflow"
+            }
+          ],
+          "attributes": [
             {
-              "name": "dot",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Should a dot be displayed before the label?",
-              "fieldName": "dot",
-              "attribute": "dot"
+              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
+              "fieldName": "max",
+              "attribute": "max"
             },
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "'xs' | 'sm' | 'md'"
               },
-              "default": "'sm'",
-              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "default": "'md'",
+              "description": "Size variant for all child avatars (unless individually overridden)",
               "fieldName": "size",
               "attribute": "size"
             }
@@ -1687,7 +1506,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-badge",
+          "tagName": "btu-avatar-group",
           "customElement": true
         }
       ],
@@ -1696,16 +1515,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "src/components/badge/Badge.ts"
+            "name": "AvatarGroup",
+            "module": "src/components/avatar/AvatarGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-badge",
+          "name": "btu-avatar-group",
           "declaration": {
-            "name": "Badge",
-            "module": "src/components/badge/Badge.ts"
+            "name": "AvatarGroup",
+            "module": "src/components/avatar/AvatarGroup.ts"
           }
         }
       ]
@@ -2592,71 +2411,74 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/copy-to-clipboard/CopyToClipboard.ts",
+      "path": "src/components/badge/Badge.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A button component that copies text to the system clipboard.\n\nProvides visual feedback when text is successfully copied by applying\na temporary state that can be styled with CSS.\n\nButton styling is inherited from `btu-button-*` classes. Override appearance\nby passing custom classes via the `buttonClasses` attribute.",
-          "name": "CopyToClipboard",
+          "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": "copydata",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
               },
-              "description": "The text to be copied to the system clipboard.",
-              "attribute": "copydata"
+              "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": "buttonClasses",
+              "name": "dot",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom CSS classes for the button. If provided, replaces the default classes.",
-              "attribute": "buttonClasses"
-            },
-            {
-              "kind": "method",
-              "name": "copy",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "text",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The text to copy to clipboard"
-                },
-                {
-                  "name": "timeout",
-                  "default": "3000",
-                  "description": "Duration in milliseconds to show success state (default: 3000)"
-                }
-              ],
-              "description": "Copies the copydata to the system clipboard.\nDisplays a success state for 3 seconds after copying.",
-              "inheritedFrom": {
-                "name": "ClipboardMixin",
-                "module": "src/util/ClipboardMixin.ts"
-              }
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "attribute": "dot"
             },
             {
               "kind": "field",
-              "name": "copiedStateKey",
+              "name": "size",
               "type": {
-                "text": "'btu-copy-to-clipboard-copied'"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "description": "Custom state applied briefly after a successful copy; also emitted as an event.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "ClipboardMixin",
-                "module": "src/util/ClipboardMixin.ts"
-              }
+              "default": "'sm'",
+              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "attribute": "size"
             },
             {
               "kind": "method",
@@ -2696,51 +2518,42 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after first render and initialization",
-              "name": "btu-copy-to-clipboard-ready"
-            },
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired when text is successfully copied to clipboard",
-              "name": "btu-copy-to-clipboard-copied"
+              "name": "btu-badge-ready"
             }
           ],
           "attributes": [
             {
-              "name": "copydata",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
               },
-              "description": "The text to be copied to the system clipboard.",
-              "fieldName": "copydata",
-              "attribute": "copydata"
+              "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": "buttonClasses",
+              "name": "dot",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Custom CSS classes for the button. If provided, replaces the default classes.",
-              "fieldName": "buttonClasses",
-              "attribute": "buttonClasses"
-            }
-          ],
-          "cssStates": [
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "fieldName": "dot",
+              "attribute": "dot"
+            },
             {
-              "description": "Applied briefly after a successful copy, targetable via :state(btu-copy-to-clipboard-copied)",
-              "name": "btu-copy-to-clipboard-copied"
+              "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": "ClipboardMixin",
-              "module": "/src/util/ClipboardMixin.js"
-            },
-            {
-              "name": "ComponentStatesMixin",
-              "module": "/src/util/ComponentStatesMixin.js"
-            },
             {
               "name": "EventEmitterMixin",
               "module": "/src/util/EventEmitterMixin.js"
@@ -2754,7 +2567,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-copy-to-clipboard",
+          "tagName": "btu-badge",
           "customElement": true
         }
       ],
@@ -2763,89 +2576,71 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CopyToClipboard",
-            "module": "src/components/copy-to-clipboard/CopyToClipboard.ts"
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-copy-to-clipboard",
+          "name": "btu-badge",
           "declaration": {
-            "name": "CopyToClipboard",
-            "module": "src/components/copy-to-clipboard/CopyToClipboard.ts"
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dropdown/Dropdown.ts",
+      "path": "src/components/button-group/ButtonGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A dropdown component that renders a trigger button and manages a floating panel\ncontaining a `btu-dropdown-menu`.\n\nUses the native Popover API and CSS anchor positioning for panel management.\nThe trigger button is built with existing `btu-button-*` classes.\n\n**Trigger button styling:** Set `--button-*` CSS custom properties on `<btu-dropdown>`\nor a parent element to customize the trigger via CSS inheritance (e.g.,\n`--button-border-radius`, `--button-color-background`). See\n`tailwind-plugin-button.ts` for available props.",
-          "name": "Dropdown",
+          "description": "A semantic container for grouping related buttons together.\n\nSupports connected (joined) and spaced layouts, horizontal and vertical\norientation, group-level size and disabled propagation, and optional\ntoggle/selection modes (single-select or multi-select).",
+          "name": "ButtonGroup",
           "cssProperties": [
             {
-              "description": "Panel background color (default: white)",
-              "name": "--dropdown-panel-background"
-            },
-            {
-              "description": "Panel border color (default: gray-200)",
-              "name": "--dropdown-panel-border-color"
-            },
-            {
-              "description": "Panel border radius (default: borderRadius.lg)",
-              "name": "--dropdown-panel-border-radius"
-            },
-            {
-              "description": "Panel minimum width (default: max(12rem, anchor-size(width)))",
-              "name": "--dropdown-panel-min-width"
-            },
-            {
-              "description": "Item background color (default: transparent)",
-              "name": "--dropdown-item-background"
-            },
-            {
-              "description": "Item text color (default: gray-700)",
-              "name": "--dropdown-item-color"
-            },
-            {
-              "description": "Item hover background (default: gray-100)",
-              "name": "--dropdown-item-hover-background"
-            },
-            {
-              "description": "Item hover text color (default: gray-900)",
-              "name": "--dropdown-item-hover-color"
+              "description": "Space between buttons when variant=\"spaced\" (default: spacing.sm)",
+              "name": "--button-group-gap"
             },
             {
-              "description": "Selected item background (default: primary-50)",
-              "name": "--dropdown-item-selected-background"
+              "description": "Corner radius of outer edges when variant=\"connected\" (default: 0.5rem)",
+              "name": "--button-group-border-radius"
             },
             {
-              "description": "Selected item text color (default: primary-700)",
-              "name": "--dropdown-item-selected-color"
+              "description": "Internal divider color between connected buttons (default: gray-300)",
+              "name": "--button-group-border-color"
             },
             {
-              "description": "Item font size (default: fontSize.sm)",
-              "name": "--dropdown-item-font-size"
+              "description": "Background of a toggled/selected child (default: primary-50)",
+              "name": "--button-group-selection-bg"
             },
             {
-              "description": "Divider line color (default: gray-200)",
-              "name": "--dropdown-divider-color"
+              "description": "Text/icon color of a toggled/selected child (default: primary-700)",
+              "name": "--button-group-selection-color"
             },
             {
-              "description": "Empty state text color (default: gray-400)",
-              "name": "--dropdown-empty-color"
+              "description": "Highlight color of the selection shimmer effect (default: primary-200)",
+              "name": "--button-group-shimmer-highlight"
             }
           ],
           "slots": [
             {
-              "description": "A `btu-dropdown-menu` element containing `btu-dropdown-item` children",
+              "description": "One or more btu-button or btu-icon-button elements to display in the group",
               "name": ""
+            },
+            {
+              "description": "Pushes the child to the end of the group via auto-margin (vertical: bottom, horizontal: right)",
+              "name": "end"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "tagName",
+              "static": true,
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "label",
@@ -2853,294 +2648,354 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Trigger button text.",
+              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
               "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "false",
-              "description": "Panel visibility state. Can be set programmatically (e.g., for tour UIs)\n— syncs to `showPopover()`/`hidePopover()` in `updated()`.",
-              "attribute": "open",
+              "default": "'horizontal'",
+              "description": "Layout direction of the buttons.",
+              "attribute": "orientation",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "variant",
               "type": {
-                "text": "Placement"
+                "text": "'connected' | 'spaced'"
               },
-              "default": "'bottom-start'",
-              "description": "Panel placement: 'bottom-start', 'bottom-end', 'top-start', 'top-end'.",
-              "attribute": "placement"
+              "default": "'connected'",
+              "description": "`connected` collapses shared borders for a joined appearance.\n`spaced` renders buttons with a gap.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "Size"
+                "text": "'sm' | 'md' | 'lg'"
               },
               "default": "'md'",
-              "description": "Button size: 'sm', 'md', 'lg'.",
-              "attribute": "size"
+              "description": "Propagates a uniform size to all child buttons.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, disables all child buttons as a group.",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "selection",
+              "type": {
+                "text": "'none' | 'single' | 'multiple'"
+              },
+              "default": "'none'",
+              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
+              "attribute": "selection",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Reflects the currently selected button value(s).\nFor `single`, the value of the active button.\nFor `multiple`, a comma-delimited list of active values.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "When set, creates hidden input(s) for native form participation.",
+              "attribute": "name"
+            },
+            {
+              "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-button-group-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{value: string}>"
               },
-              "default": "false",
-              "description": "Prevents opening.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "Fired when selection changes (single/multiple modes only)",
+              "name": "btu-button-group-change"
             },
             {
-              "kind": "field",
-              "name": "variant",
               "type": {
-                "text": "Variant"
+                "text": "CustomEvent<{name: string | undefined}>"
               },
-              "default": "'secondary'",
-              "description": "Button variant: 'primary', 'secondary', 'tertiary', 'primary-clear', 'secondary-clear', 'tertiary-clear'.",
-              "attribute": "variant"
-            },
+              "description": "Bubbles from child btu-icon-button elements when clicked",
+              "name": "btu-icon-button-click"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "symbol",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Lucide icon symbol for the trigger.",
-              "attribute": "symbol"
+              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
+              "fieldName": "label",
+              "attribute": "label"
             },
             {
-              "kind": "field",
-              "name": "iconPosition",
+              "name": "orientation",
               "type": {
-                "text": "'leading' | 'trailing'"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "'leading'",
-              "description": "Icon position: 'leading' or 'trailing'.",
-              "attribute": "icon-position"
+              "default": "'horizontal'",
+              "description": "Layout direction of the buttons.",
+              "fieldName": "orientation",
+              "attribute": "orientation"
             },
             {
-              "kind": "field",
-              "name": "iconOnly",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "'connected' | 'spaced'"
               },
-              "default": "false",
-              "description": "Hides label, shows icon only.",
-              "attribute": "icon-only"
+              "default": "'connected'",
+              "description": "`connected` collapses shared borders for a joined appearance.\n`spaced` renders buttons with a gap.",
+              "fieldName": "variant",
+              "attribute": "variant"
             },
             {
-              "kind": "field",
-              "name": "stayOpenOnSelect",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "default": "false",
-              "description": "Keeps panel open on item click.",
-              "attribute": "stay-open-on-select"
+              "default": "'md'",
+              "description": "Propagates a uniform size to all child buttons.",
+              "fieldName": "size",
+              "attribute": "size"
             },
             {
-              "kind": "field",
-              "name": "noChevron",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hides the chevron icon on the trigger button.",
-              "attribute": "no-chevron",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "_getButtonClasses",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "description": "Build the button class string based on variant and size"
-            },
-            {
-              "kind": "method",
-              "name": "_showPanel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Show the dropdown panel"
+              "description": "When true, disables all child buttons as a group.",
+              "fieldName": "disabled",
+              "attribute": "disabled"
             },
             {
-              "kind": "method",
-              "name": "_hidePanel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "selection",
+              "type": {
+                "text": "'none' | 'single' | 'multiple'"
               },
-              "description": "Hide the dropdown panel"
+              "default": "'none'",
+              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
+              "fieldName": "selection",
+              "attribute": "selection"
             },
             {
-              "kind": "field",
-              "name": "tooltip",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Tooltip text content. Set to empty string to remove the tooltip.",
-              "attribute": "tooltip",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Reflects the currently selected button value(s).\nFor `single`, the value of the active button.\nFor `multiple`, a comma-delimited list of active values.",
+              "fieldName": "value",
+              "attribute": "value"
             },
             {
-              "kind": "field",
-              "name": "tooltipPosition",
+              "name": "name",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
+                "text": "string"
               },
-              "default": "'top'",
-              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
-              "attribute": "tooltip-position",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
+              "default": "''",
+              "description": "When set, creates hidden input(s) for native form participation.",
+              "fieldName": "name",
+              "attribute": "name"
+            }
+          ],
+          "cssStates": [
             {
-              "kind": "field",
-              "name": "tooltipDelay",
-              "type": {
-                "text": "number"
-              },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "attribute": "tooltip-delay",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Applied when variant=\"connected\", targetable via :state(btu-connected)",
+              "name": "btu-connected"
             },
             {
-              "kind": "field",
-              "name": "tooltipOffset",
-              "type": {
-                "text": "TooltipOffset | null"
-              },
-              "default": "null",
-              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
-              "attribute": "tooltip-offset",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Applied when variant=\"spaced\", targetable via :state(btu-spaced)",
+              "name": "btu-spaced"
             },
             {
-              "kind": "field",
-              "name": "tooltipNoArrow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "tooltip-no-arrow",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Applied when orientation=\"horizontal\", targetable via :state(btu-horizontal)",
+              "name": "btu-horizontal"
             },
             {
-              "kind": "field",
-              "name": "tooltipTrigger",
-              "type": {
-                "text": "string"
-              },
-              "default": "'hover focus'",
-              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
-              "attribute": "tooltip-trigger",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Applied when orientation=\"vertical\", targetable via :state(btu-vertical)",
+              "name": "btu-vertical"
             },
             {
-              "kind": "field",
-              "name": "_onMouseLeave",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Applied when the group is disabled, targetable via :state(btu-disabled)",
+              "name": "btu-disabled"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "RovingTabindexMixin",
+              "module": "/src/util/RovingTabindexMixin.js"
             },
             {
-              "kind": "field",
-              "name": "_onFocusIn",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "name": "ComponentStatesMixin",
+              "module": "/src/util/ComponentStatesMixin.js"
             },
             {
-              "kind": "field",
-              "name": "_onFocusOut",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
             },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/util/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/components/button-group/ButtonGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-button-group",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "src/components/button-group/ButtonGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/copy-to-clipboard/CopyToClipboard.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A button component that copies text to the system clipboard.\n\nProvides visual feedback when text is successfully copied by applying\na temporary state that can be styled with CSS.\n\nButton styling is inherited from `btu-button-*` classes. Override appearance\nby passing custom classes via the `buttonClasses` attribute.",
+          "name": "CopyToClipboard",
+          "members": [
             {
               "kind": "field",
-              "name": "_onClick",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "name": "copydata",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The text to be copied to the system clipboard.",
+              "attribute": "copydata"
             },
             {
               "kind": "field",
-              "name": "_onNativeToggle",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "name": "buttonClasses",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom CSS classes for the button. If provided, replaces the default classes.",
+              "attribute": "buttonClasses"
             },
             {
-              "kind": "field",
-              "name": "_onKeyDown",
-              "privacy": "private",
+              "kind": "method",
+              "name": "copy",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text to copy to clipboard"
+                },
+                {
+                  "name": "timeout",
+                  "default": "3000",
+                  "description": "Duration in milliseconds to show success state (default: 3000)"
+                }
+              ],
+              "description": "Copies the copydata to the system clipboard.\nDisplays a success state for 3 seconds after copying.",
               "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
+                "name": "ClipboardMixin",
+                "module": "src/util/ClipboardMixin.ts"
               }
             },
             {
               "kind": "field",
-              "name": "_onDocumentClick",
+              "name": "copiedStateKey",
               "type": {
-                "text": "((e: MouseEvent) => void) | null"
+                "text": "'btu-copy-to-clipboard-copied'"
               },
-              "privacy": "private",
-              "default": "null",
+              "description": "Custom state applied briefly after a successful copy; also emitted as an event.",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
+                "name": "ClipboardMixin",
+                "module": "src/util/ClipboardMixin.ts"
               }
             },
             {
@@ -3181,156 +3036,310 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after first render and initialization",
-              "name": "btu-dropdown-ready"
+              "name": "btu-copy-to-clipboard-ready"
             },
             {
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the dropdown panel opens",
-              "name": "btu-dropdown-show"
-            },
+              "description": "Fired when text is successfully copied to clipboard",
+              "name": "btu-copy-to-clipboard-copied"
+            }
+          ],
+          "attributes": [
             {
+              "name": "copydata",
               "type": {
-                "text": "CustomEvent"
+                "text": "string | undefined"
               },
-              "description": "Fired when the dropdown panel closes",
-              "name": "btu-dropdown-hide"
+              "description": "The text to be copied to the system clipboard.",
+              "fieldName": "copydata",
+              "attribute": "copydata"
             },
             {
+              "name": "buttonClasses",
               "type": {
-                "text": "CustomEvent<{label: string, value: string, selected: boolean}>"
+                "text": "string | undefined"
               },
-              "description": "Fired when a menu item is activated (bubbles from btu-dropdown-item)",
-              "name": "btu-dropdown-item-select"
+              "description": "Custom CSS classes for the button. If provided, replaces the default classes.",
+              "fieldName": "buttonClasses",
+              "attribute": "buttonClasses"
+            }
+          ],
+          "cssStates": [
+            {
+              "description": "Applied briefly after a successful copy, targetable via :state(btu-copy-to-clipboard-copied)",
+              "name": "btu-copy-to-clipboard-copied"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ClipboardMixin",
+              "module": "/src/util/ClipboardMixin.js"
             },
             {
-              "type": {
-                "text": "CustomEvent<{label: string, favorited: boolean}>"
-              },
-              "description": "Fired when a menu item's favorite is toggled (bubbles from btu-dropdown-item)",
-              "name": "btu-dropdown-item-favorite"
+              "name": "ComponentStatesMixin",
+              "module": "/src/util/ComponentStatesMixin.js"
+            },
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/util/ReadyMixin.js"
             }
           ],
-          "attributes": [
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-copy-to-clipboard",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CopyToClipboard",
+            "module": "src/components/copy-to-clipboard/CopyToClipboard.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-copy-to-clipboard",
+          "declaration": {
+            "name": "CopyToClipboard",
+            "module": "src/components/copy-to-clipboard/CopyToClipboard.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/dropdown/Dropdown.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A dropdown component that renders a trigger button and manages a floating panel\ncontaining a `btu-dropdown-menu`.\n\nUses the native Popover API and CSS anchor positioning for panel management.\nThe trigger button is built with existing `btu-button-*` classes.\n\n**Trigger button styling:** Set `--button-*` CSS custom properties on `<btu-dropdown>`\nor a parent element to customize the trigger via CSS inheritance (e.g.,\n`--button-border-radius`, `--button-color-background`). See\n`tailwind-plugin-button.ts` for available props.",
+          "name": "Dropdown",
+          "cssProperties": [
+            {
+              "description": "Panel background color (default: white)",
+              "name": "--dropdown-panel-background"
+            },
+            {
+              "description": "Panel border color (default: gray-200)",
+              "name": "--dropdown-panel-border-color"
+            },
+            {
+              "description": "Panel border radius (default: borderRadius.lg)",
+              "name": "--dropdown-panel-border-radius"
+            },
+            {
+              "description": "Panel minimum width (default: max(12rem, anchor-size(width)))",
+              "name": "--dropdown-panel-min-width"
+            },
+            {
+              "description": "Item background color (default: transparent)",
+              "name": "--dropdown-item-background"
+            },
+            {
+              "description": "Item text color (default: gray-700)",
+              "name": "--dropdown-item-color"
+            },
+            {
+              "description": "Item hover background (default: gray-100)",
+              "name": "--dropdown-item-hover-background"
+            },
+            {
+              "description": "Item hover text color (default: gray-900)",
+              "name": "--dropdown-item-hover-color"
+            },
+            {
+              "description": "Selected item background (default: primary-50)",
+              "name": "--dropdown-item-selected-background"
+            },
+            {
+              "description": "Selected item text color (default: primary-700)",
+              "name": "--dropdown-item-selected-color"
+            },
+            {
+              "description": "Item font size (default: fontSize.sm)",
+              "name": "--dropdown-item-font-size"
+            },
+            {
+              "description": "Divider line color (default: gray-200)",
+              "name": "--dropdown-divider-color"
+            },
+            {
+              "description": "Empty state text color (default: gray-400)",
+              "name": "--dropdown-empty-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "A `btu-dropdown-menu` element containing `btu-dropdown-item` children",
+              "name": ""
+            }
+          ],
+          "members": [
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Trigger button text.",
-              "fieldName": "label",
               "attribute": "label"
             },
             {
+              "kind": "field",
               "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Panel visibility state. Can be set programmatically (e.g., for tour UIs)\n— syncs to `showPopover()`/`hidePopover()` in `updated()`.",
-              "fieldName": "open",
-              "attribute": "open"
+              "attribute": "open",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "placement",
               "type": {
                 "text": "Placement"
               },
               "default": "'bottom-start'",
               "description": "Panel placement: 'bottom-start', 'bottom-end', 'top-start', 'top-end'.",
-              "fieldName": "placement",
               "attribute": "placement"
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "Size"
               },
               "default": "'md'",
               "description": "Button size: 'sm', 'md', 'lg'.",
-              "fieldName": "size",
               "attribute": "size"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Prevents opening.",
-              "fieldName": "disabled",
-              "attribute": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "Variant"
               },
               "default": "'secondary'",
               "description": "Button variant: 'primary', 'secondary', 'tertiary', 'primary-clear', 'secondary-clear', 'tertiary-clear'.",
-              "fieldName": "variant",
               "attribute": "variant"
             },
             {
+              "kind": "field",
               "name": "symbol",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Lucide icon symbol for the trigger.",
-              "fieldName": "symbol",
               "attribute": "symbol"
             },
             {
-              "name": "icon-position",
+              "kind": "field",
+              "name": "iconPosition",
               "type": {
                 "text": "'leading' | 'trailing'"
               },
               "default": "'leading'",
               "description": "Icon position: 'leading' or 'trailing'.",
-              "fieldName": "iconPosition",
               "attribute": "icon-position"
             },
             {
-              "name": "icon-only",
+              "kind": "field",
+              "name": "iconOnly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Hides label, shows icon only.",
-              "fieldName": "iconOnly",
               "attribute": "icon-only"
             },
             {
-              "name": "stay-open-on-select",
+              "kind": "field",
+              "name": "stayOpenOnSelect",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Keeps panel open on item click.",
-              "fieldName": "stayOpenOnSelect",
               "attribute": "stay-open-on-select"
             },
             {
-              "name": "no-chevron",
+              "kind": "field",
+              "name": "noChevron",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Hides the chevron icon on the trigger button.",
-              "fieldName": "noChevron",
-              "attribute": "no-chevron"
+              "attribute": "no-chevron",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_getButtonClasses",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "description": "Build the button class string based on variant and size"
+            },
+            {
+              "kind": "method",
+              "name": "_showPanel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Show the dropdown panel"
+            },
+            {
+              "kind": "method",
+              "name": "_hidePanel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Hide the dropdown panel"
             },
             {
+              "kind": "field",
               "name": "tooltip",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Tooltip text content. Set to empty string to remove the tooltip.",
-              "fieldName": "tooltip",
               "attribute": "tooltip",
               "inheritedFrom": {
                 "name": "TooltipMixin",
@@ -3338,339 +3347,140 @@
               }
             },
             {
+              "kind": "field",
               "name": "tooltipPosition",
               "type": {
                 "text": "'top' | 'bottom' | 'left' | 'right'"
               },
               "default": "'top'",
               "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
-              "fieldName": "tooltipPosition",
+              "attribute": "tooltip-position",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "tooltipDelay",
               "type": {
                 "text": "number"
               },
               "default": "300",
               "description": "Show delay in milliseconds (hover trigger only).",
-              "fieldName": "tooltipDelay",
+              "attribute": "tooltip-delay",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "tooltipOffset",
               "type": {
                 "text": "TooltipOffset | null"
               },
               "default": "null",
               "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
-              "fieldName": "tooltipOffset",
+              "attribute": "tooltip-offset",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "tooltipNoArrow",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Hide the arrow pseudo-element.",
-              "fieldName": "tooltipNoArrow",
+              "attribute": "tooltip-no-arrow",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
+              "kind": "field",
               "name": "tooltipTrigger",
               "type": {
                 "text": "string"
               },
               "default": "'hover focus'",
               "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
-              "fieldName": "tooltipTrigger",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-position",
-              "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
-              },
-              "default": "'top'",
-              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
-              "attribute": "tooltipPosition",
-              "fieldName": "tooltipPosition",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "attribute": "tooltipDelay",
-              "fieldName": "tooltipDelay",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-offset",
-              "type": {
-                "text": "TooltipOffset | null"
-              },
-              "default": "null",
-              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
-              "attribute": "tooltipOffset",
-              "fieldName": "tooltipOffset",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            },
-            {
-              "name": "tooltip-no-arrow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "tooltipNoArrow",
-              "fieldName": "tooltipNoArrow",
+              "attribute": "tooltip-trigger",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
-              "name": "tooltip-trigger",
-              "type": {
-                "text": "string"
-              },
-              "default": "'hover focus'",
-              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
-              "attribute": "tooltipTrigger",
-              "fieldName": "tooltipTrigger",
+              "kind": "field",
+              "name": "_onMouseLeave",
+              "privacy": "private",
               "inheritedFrom": {
                 "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "TooltipMixin",
-              "module": "/src/util/TooltipMixin.js"
-            },
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
-            },
-            {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-dropdown",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Dropdown",
-            "module": "src/components/dropdown/Dropdown.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-dropdown",
-          "declaration": {
-            "name": "Dropdown",
-            "module": "src/components/dropdown/Dropdown.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/dropdown/DropdownItem.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A menu item component for use inside `btu-dropdown-menu`.\n\nRenders as a menu item, divider, or subhead depending on the `type` property.\nSupports checkbox mode (inherited from parent menu), icons, keyboard shortcuts,\nand favorite toggles.",
-          "name": "DropdownItem",
-          "cssProperties": [
-            {
-              "description": "Item font size (default: theme fontSize.sm)",
-              "name": "--dropdown-item-font-size"
-            },
-            {
-              "description": "Item text color (default: gray-700)",
-              "name": "--dropdown-item-color"
-            },
-            {
-              "description": "Item background color (default: transparent)",
-              "name": "--dropdown-item-background"
-            },
-            {
-              "description": "Background on hover (default: gray-100)",
-              "name": "--dropdown-item-hover-background"
-            },
-            {
-              "description": "Text color on hover (default: gray-900)",
-              "name": "--dropdown-item-hover-color"
-            },
-            {
-              "description": "Background when selected (default: primary-50)",
-              "name": "--dropdown-item-selected-background"
-            },
-            {
-              "description": "Text color when selected (default: primary-700)",
-              "name": "--dropdown-item-selected-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Display text for the item.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "'default' | 'divider' | 'subhead'"
-              },
-              "default": "'default'",
-              "description": "Item type: 'default', 'divider', or 'subhead'.",
-              "attribute": "type"
-            },
-            {
-              "kind": "field",
-              "name": "symbol",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Lucide icon symbol.",
-              "attribute": "symbol"
-            },
-            {
-              "kind": "field",
-              "name": "shortcut",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Keyboard shortcut display text.",
-              "attribute": "shortcut"
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Optional data value associated with the item.",
-              "attribute": "value"
+              "name": "_onFocusIn",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the item is disabled.",
-              "attribute": "disabled"
+              "name": "_onFocusOut",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the item is selected/checked.",
-              "attribute": "selected",
-              "reflects": true
+              "name": "_onClick",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "favorited",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the item is favorited.",
-              "attribute": "favorited"
+              "name": "_onNativeToggle",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the item has an error.",
-              "attribute": "error"
-            },
-            {
-              "kind": "method",
-              "name": "_toggleFavorite",
+              "name": "_onKeyDown",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Toggle favorite state"
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "_handleClick",
+              "kind": "field",
+              "name": "_onDocumentClick",
+              "type": {
+                "text": "((e: MouseEvent) => void) | null"
+              },
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "default": "null",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
               }
             },
             {
@@ -3710,21 +3520,35 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after first render",
-              "name": "btu-dropdown-item-ready"
+              "description": "Fired after first render and initialization",
+              "name": "btu-dropdown-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the dropdown panel opens",
+              "name": "btu-dropdown-show"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the dropdown panel closes",
+              "name": "btu-dropdown-hide"
             },
             {
               "type": {
                 "text": "CustomEvent<{label: string, value: string, selected: boolean}>"
               },
-              "description": "Fired when item is activated",
+              "description": "Fired when a menu item is activated (bubbles from btu-dropdown-item)",
               "name": "btu-dropdown-item-select"
             },
             {
               "type": {
                 "text": "CustomEvent<{label: string, favorited: boolean}>"
               },
-              "description": "Fired when favorite is toggled",
+              "description": "Fired when a menu item's favorite is toggled (bubbles from btu-dropdown-item)",
               "name": "btu-dropdown-item-favorite"
             }
           ],
@@ -3735,92 +3559,265 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Display text for the item.",
+              "description": "Trigger button text.",
               "fieldName": "label",
               "attribute": "label"
             },
             {
-              "name": "type",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Panel visibility state. Can be set programmatically (e.g., for tour UIs)\n— syncs to `showPopover()`/`hidePopover()` in `updated()`.",
+              "fieldName": "open",
+              "attribute": "open"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "default": "'bottom-start'",
+              "description": "Panel placement: 'bottom-start', 'bottom-end', 'top-start', 'top-end'.",
+              "fieldName": "placement",
+              "attribute": "placement"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "default": "'md'",
+              "description": "Button size: 'sm', 'md', 'lg'.",
+              "fieldName": "size",
+              "attribute": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents opening.",
+              "fieldName": "disabled",
+              "attribute": "disabled"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "default": "'secondary'",
+              "description": "Button variant: 'primary', 'secondary', 'tertiary', 'primary-clear', 'secondary-clear', 'tertiary-clear'.",
+              "fieldName": "variant",
+              "attribute": "variant"
+            },
+            {
+              "name": "symbol",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Lucide icon symbol for the trigger.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
+            },
+            {
+              "name": "icon-position",
+              "type": {
+                "text": "'leading' | 'trailing'"
+              },
+              "default": "'leading'",
+              "description": "Icon position: 'leading' or 'trailing'.",
+              "fieldName": "iconPosition",
+              "attribute": "icon-position"
+            },
+            {
+              "name": "icon-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides label, shows icon only.",
+              "fieldName": "iconOnly",
+              "attribute": "icon-only"
+            },
+            {
+              "name": "stay-open-on-select",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Keeps panel open on item click.",
+              "fieldName": "stayOpenOnSelect",
+              "attribute": "stay-open-on-select"
+            },
+            {
+              "name": "no-chevron",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the chevron icon on the trigger button.",
+              "fieldName": "noChevron",
+              "attribute": "no-chevron"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Tooltip text content. Set to empty string to remove the tooltip.",
+              "fieldName": "tooltip",
+              "attribute": "tooltip",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipPosition",
+              "type": {
+                "text": "'top' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "'top'",
+              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
+              "fieldName": "tooltipPosition",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "fieldName": "tooltipDelay",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
+            },
+            {
+              "name": "tooltipOffset",
               "type": {
-                "text": "'default' | 'divider' | 'subhead'"
+                "text": "TooltipOffset | null"
               },
-              "default": "'default'",
-              "description": "Item type: 'default', 'divider', or 'subhead'.",
-              "fieldName": "type",
-              "attribute": "type"
+              "default": "null",
+              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
+              "fieldName": "tooltipOffset",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "symbol",
+              "name": "tooltipNoArrow",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Lucide icon symbol.",
-              "fieldName": "symbol",
-              "attribute": "symbol"
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "fieldName": "tooltipNoArrow",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "shortcut",
+              "name": "tooltipTrigger",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Keyboard shortcut display text.",
-              "fieldName": "shortcut",
-              "attribute": "shortcut"
+              "default": "'hover focus'",
+              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
+              "fieldName": "tooltipTrigger",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "value",
+              "name": "tooltip-position",
               "type": {
-                "text": "string"
+                "text": "'top' | 'bottom' | 'left' | 'right'"
               },
-              "default": "''",
-              "description": "Optional data value associated with the item.",
-              "fieldName": "value",
-              "attribute": "value"
+              "default": "'top'",
+              "description": "Position relative to the host element. Auto-flips when constrained by the viewport.",
+              "attribute": "tooltipPosition",
+              "fieldName": "tooltipPosition",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "disabled",
+              "name": "tooltip-delay",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the item is disabled.",
-              "fieldName": "disabled",
-              "attribute": "disabled"
+              "default": "300",
+              "description": "Show delay in milliseconds (hover trigger only).",
+              "attribute": "tooltipDelay",
+              "fieldName": "tooltipDelay",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "selected",
+              "name": "tooltip-offset",
               "type": {
-                "text": "boolean"
+                "text": "TooltipOffset | null"
               },
-              "default": "false",
-              "description": "Whether the item is selected/checked.",
-              "fieldName": "selected",
-              "attribute": "selected"
+              "default": "null",
+              "description": "Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).",
+              "attribute": "tooltipOffset",
+              "fieldName": "tooltipOffset",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "favorited",
+              "name": "tooltip-no-arrow",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the item is favorited.",
-              "fieldName": "favorited",
-              "attribute": "favorited"
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "tooltipNoArrow",
+              "fieldName": "tooltipNoArrow",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             },
             {
-              "name": "error",
+              "name": "tooltip-trigger",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether the item has an error.",
-              "fieldName": "error",
-              "attribute": "error"
+              "default": "'hover focus'",
+              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
+              "attribute": "tooltipTrigger",
+              "fieldName": "tooltipTrigger",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/util/TooltipMixin.ts"
+              }
             }
           ],
           "mixins": [
+            {
+              "name": "TooltipMixin",
+              "module": "/src/util/TooltipMixin.js"
+            },
             {
               "name": "EventEmitterMixin",
               "module": "/src/util/EventEmitterMixin.js"
@@ -3834,7 +3831,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-dropdown-item",
+          "tagName": "btu-dropdown",
           "customElement": true
         }
       ],
@@ -3843,157 +3840,153 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "DropdownItem",
-            "module": "src/components/dropdown/DropdownItem.ts"
+            "name": "Dropdown",
+            "module": "src/components/dropdown/Dropdown.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-dropdown-item",
+          "name": "btu-dropdown",
           "declaration": {
-            "name": "DropdownItem",
-            "module": "src/components/dropdown/DropdownItem.ts"
+            "name": "Dropdown",
+            "module": "src/components/dropdown/Dropdown.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dropdown/DropdownMenu.ts",
+      "path": "src/components/dropdown/DropdownItem.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A menu container component that provides keyboard navigation and ARIA menu semantics.\n\nContains `btu-dropdown-item` children and manages roving tabindex, typeahead search,\nand keyboard navigation following the WAI-ARIA Menu Button Pattern.",
-          "name": "DropdownMenu",
+          "description": "A menu item component for use inside `btu-dropdown-menu`.\n\nRenders as a menu item, divider, or subhead depending on the `type` property.\nSupports checkbox mode (inherited from parent menu), icons, keyboard shortcuts,\nand favorite toggles.",
+          "name": "DropdownItem",
           "cssProperties": [
             {
-              "description": "Empty state text color (default: gray-400)",
-              "name": "--dropdown-empty-color"
-            }
-          ],
-          "slots": [
+              "description": "Item font size (default: theme fontSize.sm)",
+              "name": "--dropdown-item-font-size"
+            },
             {
-              "description": "Menu items (`btu-dropdown-item` elements)",
-              "name": ""
+              "description": "Item text color (default: gray-700)",
+              "name": "--dropdown-item-color"
+            },
+            {
+              "description": "Item background color (default: transparent)",
+              "name": "--dropdown-item-background"
+            },
+            {
+              "description": "Background on hover (default: gray-100)",
+              "name": "--dropdown-item-hover-background"
+            },
+            {
+              "description": "Text color on hover (default: gray-900)",
+              "name": "--dropdown-item-hover-color"
+            },
+            {
+              "description": "Background when selected (default: primary-50)",
+              "name": "--dropdown-item-selected-background"
+            },
+            {
+              "description": "Text color when selected (default: primary-700)",
+              "name": "--dropdown-item-selected-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible name for the menu, displayed in header when header is true.",
-              "attribute": "name"
+              "description": "Display text for the item.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "header",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "'default' | 'divider' | 'subhead'"
               },
-              "default": "false",
-              "description": "Show header bar with menu name.",
-              "attribute": "header"
+              "default": "'default'",
+              "description": "Item type: 'default', 'divider', or 'subhead'.",
+              "attribute": "type"
             },
             {
               "kind": "field",
-              "name": "checkbox",
+              "name": "symbol",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Enable checkbox mode for items (menuitemcheckbox role).",
-              "attribute": "checkbox"
+              "default": "''",
+              "description": "Lucide icon symbol.",
+              "attribute": "symbol"
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "shortcut",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Show icons before each item.",
-              "attribute": "icon"
+              "default": "''",
+              "description": "Keyboard shortcut display text.",
+              "attribute": "shortcut"
             },
             {
               "kind": "field",
-              "name": "symbol",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Fallback Lucide icon symbol for items without their own.",
-              "attribute": "symbol"
+              "description": "Optional data value associated with the item.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "favorites",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show favorite toggle on each item.",
-              "attribute": "favorites"
+              "description": "Whether the item is disabled.",
+              "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "shortcuts",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show keyboard shortcut text on each item.",
-              "attribute": "shortcuts"
-            },
-            {
-              "kind": "field",
-              "name": "emptyMessage",
-              "type": {
-                "text": "string"
-              },
-              "default": "'No items available'",
-              "description": "Message displayed when the menu has no focusable items.",
-              "attribute": "empty-message"
-            },
-            {
-              "kind": "method",
-              "name": "_configureItems",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Configure all child items with menu-level settings"
+              "description": "Whether the item is selected/checked.",
+              "attribute": "selected",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_getAllItems",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "DropdownItem[]"
-                }
+              "kind": "field",
+              "name": "favorited",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Get all btu-dropdown-item children"
+              "default": "false",
+              "description": "Whether the item is favorited.",
+              "attribute": "favorited"
             },
             {
-              "kind": "method",
-              "name": "_getFocusableItems",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "DropdownItem[]"
-                }
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Get only focusable items (default type, skip dividers/subheads)"
+              "default": "false",
+              "description": "Whether the item has an error.",
+              "attribute": "error"
             },
             {
               "kind": "method",
-              "name": "_handleTypeahead",
+              "name": "_toggleFavorite",
               "privacy": "private",
               "return": {
                 "type": {
@@ -4002,29 +3995,23 @@
               },
               "parameters": [
                 {
-                  "name": "char",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "focusable",
+                  "name": "e",
                   "type": {
-                    "text": "DropdownItem[]"
+                    "text": "Event"
                   }
                 }
               ],
-              "description": "Typeahead character matching with 500ms accumulation"
+              "description": "Toggle favorite state"
             },
             {
-              "kind": "field",
-              "name": "_isEmpty",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "_handleClick",
               "privacy": "private",
-              "description": "Check whether the menu has zero focusable items",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
@@ -4064,96 +4051,116 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after first render",
-              "name": "btu-dropdown-menu-ready"
+              "name": "btu-dropdown-item-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{label: string, value: string, selected: boolean}>"
+              },
+              "description": "Fired when item is activated",
+              "name": "btu-dropdown-item-select"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{label: string, favorited: boolean}>"
+              },
+              "description": "Fired when favorite is toggled",
+              "name": "btu-dropdown-item-favorite"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible name for the menu, displayed in header when header is true.",
-              "fieldName": "name",
-              "attribute": "name"
+              "description": "Display text for the item.",
+              "fieldName": "label",
+              "attribute": "label"
             },
             {
-              "name": "header",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "'default' | 'divider' | 'subhead'"
               },
-              "default": "false",
-              "description": "Show header bar with menu name.",
-              "fieldName": "header",
-              "attribute": "header"
+              "default": "'default'",
+              "description": "Item type: 'default', 'divider', or 'subhead'.",
+              "fieldName": "type",
+              "attribute": "type"
             },
             {
-              "name": "checkbox",
+              "name": "symbol",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Enable checkbox mode for items (menuitemcheckbox role).",
-              "fieldName": "checkbox",
-              "attribute": "checkbox"
+              "default": "''",
+              "description": "Lucide icon symbol.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
             },
             {
-              "name": "icon",
+              "name": "shortcut",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Show icons before each item.",
-              "fieldName": "icon",
-              "attribute": "icon"
+              "default": "''",
+              "description": "Keyboard shortcut display text.",
+              "fieldName": "shortcut",
+              "attribute": "shortcut"
             },
             {
-              "name": "symbol",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Fallback Lucide icon symbol for items without their own.",
-              "fieldName": "symbol",
-              "attribute": "symbol"
+              "description": "Optional data value associated with the item.",
+              "fieldName": "value",
+              "attribute": "value"
             },
             {
-              "name": "favorites",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show favorite toggle on each item.",
-              "fieldName": "favorites",
-              "attribute": "favorites"
+              "description": "Whether the item is disabled.",
+              "fieldName": "disabled",
+              "attribute": "disabled"
             },
             {
-              "name": "shortcuts",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show keyboard shortcut text on each item.",
-              "fieldName": "shortcuts",
-              "attribute": "shortcuts"
+              "description": "Whether the item is selected/checked.",
+              "fieldName": "selected",
+              "attribute": "selected"
             },
             {
-              "name": "empty-message",
+              "name": "favorited",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'No items available'",
-              "description": "Message displayed when the menu has no focusable items.",
-              "fieldName": "emptyMessage",
-              "attribute": "empty-message"
+              "default": "false",
+              "description": "Whether the item is favorited.",
+              "fieldName": "favorited",
+              "attribute": "favorited"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the item has an error.",
+              "fieldName": "error",
+              "attribute": "error"
             }
           ],
           "mixins": [
-            {
-              "name": "RovingTabindexMixin",
-              "module": "/src/util/RovingTabindexMixin.js"
-            },
             {
               "name": "EventEmitterMixin",
               "module": "/src/util/EventEmitterMixin.js"
@@ -4167,7 +4174,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-dropdown-menu",
+          "tagName": "btu-dropdown-item",
           "customElement": true
         }
       ],
@@ -4176,155 +4183,188 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "DropdownMenu",
-            "module": "src/components/dropdown/DropdownMenu.ts"
+            "name": "DropdownItem",
+            "module": "src/components/dropdown/DropdownItem.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-dropdown-menu",
+          "name": "btu-dropdown-item",
           "declaration": {
-            "name": "DropdownMenu",
-            "module": "src/components/dropdown/DropdownMenu.ts"
+            "name": "DropdownItem",
+            "module": "src/components/dropdown/DropdownItem.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/button-group/ButtonGroup.ts",
+      "path": "src/components/dropdown/DropdownMenu.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A semantic container for grouping related buttons together.\n\nSupports connected (joined) and spaced layouts, horizontal and vertical\norientation, group-level size and disabled propagation, and optional\ntoggle/selection modes (single-select or multi-select).",
-          "name": "ButtonGroup",
+          "description": "A menu container component that provides keyboard navigation and ARIA menu semantics.\n\nContains `btu-dropdown-item` children and manages roving tabindex, typeahead search,\nand keyboard navigation following the WAI-ARIA Menu Button Pattern.",
+          "name": "DropdownMenu",
           "cssProperties": [
             {
-              "description": "Space between buttons when variant=\"spaced\" (default: spacing.sm)",
-              "name": "--button-group-gap"
-            },
-            {
-              "description": "Corner radius of outer edges when variant=\"connected\" (default: 0.5rem)",
-              "name": "--button-group-border-radius"
-            },
-            {
-              "description": "Internal divider color between connected buttons (default: gray-300)",
-              "name": "--button-group-border-color"
-            },
-            {
-              "description": "Background of a toggled/selected child (default: primary-50)",
-              "name": "--button-group-selection-bg"
-            },
-            {
-              "description": "Text/icon color of a toggled/selected child (default: primary-700)",
-              "name": "--button-group-selection-color"
-            },
-            {
-              "description": "Highlight color of the selection shimmer effect (default: primary-200)",
-              "name": "--button-group-shimmer-highlight"
+              "description": "Empty state text color (default: gray-400)",
+              "name": "--dropdown-empty-color"
             }
           ],
           "slots": [
             {
-              "description": "One or more btu-button or btu-icon-button elements to display in the group",
+              "description": "Menu items (`btu-dropdown-item` elements)",
               "name": ""
-            },
-            {
-              "description": "Pushes the child to the end of the group via auto-margin (vertical: bottom, horizontal: right)",
-              "name": "end"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "tagName",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
-              "attribute": "label"
+              "description": "Accessible name for the menu, displayed in header when header is true.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "header",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "boolean"
               },
-              "default": "'horizontal'",
-              "description": "Layout direction of the buttons.",
-              "attribute": "orientation",
-              "reflects": true
+              "default": "false",
+              "description": "Show header bar with menu name.",
+              "attribute": "header"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "checkbox",
               "type": {
-                "text": "'connected' | 'spaced'"
+                "text": "boolean"
               },
-              "default": "'connected'",
-              "description": "`connected` collapses shared borders for a joined appearance.\n`spaced` renders buttons with a gap.",
-              "attribute": "variant",
-              "reflects": true
+              "default": "false",
+              "description": "Enable checkbox mode for items (menuitemcheckbox role).",
+              "attribute": "checkbox"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show icons before each item.",
+              "attribute": "icon"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "symbol",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "string"
               },
-              "default": "'md'",
-              "description": "Propagates a uniform size to all child buttons.",
-              "attribute": "size",
-              "reflects": true
+              "default": "''",
+              "description": "Fallback Lucide icon symbol for items without their own.",
+              "attribute": "symbol"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "favorites",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, disables all child buttons as a group.",
-              "attribute": "disabled"
+              "description": "Show favorite toggle on each item.",
+              "attribute": "favorites"
             },
             {
               "kind": "field",
-              "name": "selection",
+              "name": "shortcuts",
               "type": {
-                "text": "'none' | 'single' | 'multiple'"
+                "text": "boolean"
               },
-              "default": "'none'",
-              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
-              "attribute": "selection",
-              "reflects": true
+              "default": "false",
+              "description": "Show keyboard shortcut text on each item.",
+              "attribute": "shortcuts"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "emptyMessage",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Reflects the currently selected button value(s).\nFor `single`, the value of the active button.\nFor `multiple`, a comma-delimited list of active values.",
-              "attribute": "value",
-              "reflects": true
+              "default": "'No items available'",
+              "description": "Message displayed when the menu has no focusable items.",
+              "attribute": "empty-message"
+            },
+            {
+              "kind": "method",
+              "name": "_configureItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Configure all child items with menu-level settings"
+            },
+            {
+              "kind": "method",
+              "name": "_getAllItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "DropdownItem[]"
+                }
+              },
+              "description": "Get all btu-dropdown-item children"
+            },
+            {
+              "kind": "method",
+              "name": "_getFocusableItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "DropdownItem[]"
+                }
+              },
+              "description": "Get only focusable items (default type, skip dividers/subheads)"
+            },
+            {
+              "kind": "method",
+              "name": "_handleTypeahead",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "char",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "focusable",
+                  "type": {
+                    "text": "DropdownItem[]"
+                  }
+                }
+              ],
+              "description": "Typeahead character matching with 500ms accumulation"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "_isEmpty",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "When set, creates hidden input(s) for native form participation.",
-              "attribute": "name"
+              "privacy": "private",
+              "description": "Check whether the menu has zero focusable items",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -4363,126 +4403,90 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after first render and initialization",
-              "name": "btu-button-group-ready"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{value: string}>"
-              },
-              "description": "Fired when selection changes (single/multiple modes only)",
-              "name": "btu-button-group-change"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{name: string | undefined}>"
-              },
-              "description": "Bubbles from child btu-icon-button elements when clicked",
-              "name": "btu-icon-button-click"
+              "description": "Fired after first render",
+              "name": "btu-dropdown-menu-ready"
             }
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
-              "fieldName": "label",
-              "attribute": "label"
+              "description": "Accessible name for the menu, displayed in header when header is true.",
+              "fieldName": "name",
+              "attribute": "name"
             },
             {
-              "name": "orientation",
+              "name": "header",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "boolean"
               },
-              "default": "'horizontal'",
-              "description": "Layout direction of the buttons.",
-              "fieldName": "orientation",
-              "attribute": "orientation"
+              "default": "false",
+              "description": "Show header bar with menu name.",
+              "fieldName": "header",
+              "attribute": "header"
             },
             {
-              "name": "variant",
+              "name": "checkbox",
               "type": {
-                "text": "'connected' | 'spaced'"
+                "text": "boolean"
               },
-              "default": "'connected'",
-              "description": "`connected` collapses shared borders for a joined appearance.\n`spaced` renders buttons with a gap.",
-              "fieldName": "variant",
-              "attribute": "variant"
+              "default": "false",
+              "description": "Enable checkbox mode for items (menuitemcheckbox role).",
+              "fieldName": "checkbox",
+              "attribute": "checkbox"
             },
             {
-              "name": "size",
+              "name": "icon",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "boolean"
               },
-              "default": "'md'",
-              "description": "Propagates a uniform size to all child buttons.",
-              "fieldName": "size",
-              "attribute": "size"
+              "default": "false",
+              "description": "Show icons before each item.",
+              "fieldName": "icon",
+              "attribute": "icon"
             },
             {
-              "name": "disabled",
+              "name": "symbol",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When true, disables all child buttons as a group.",
-              "fieldName": "disabled",
-              "attribute": "disabled"
+              "default": "''",
+              "description": "Fallback Lucide icon symbol for items without their own.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
             },
             {
-              "name": "selection",
+              "name": "favorites",
               "type": {
-                "text": "'none' | 'single' | 'multiple'"
+                "text": "boolean"
               },
-              "default": "'none'",
-              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
-              "fieldName": "selection",
-              "attribute": "selection"
+              "default": "false",
+              "description": "Show favorite toggle on each item.",
+              "fieldName": "favorites",
+              "attribute": "favorites"
             },
             {
-              "name": "value",
+              "name": "shortcuts",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Reflects the currently selected button value(s).\nFor `single`, the value of the active button.\nFor `multiple`, a comma-delimited list of active values.",
-              "fieldName": "value",
-              "attribute": "value"
+              "default": "false",
+              "description": "Show keyboard shortcut text on each item.",
+              "fieldName": "shortcuts",
+              "attribute": "shortcuts"
             },
             {
-              "name": "name",
+              "name": "empty-message",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "When set, creates hidden input(s) for native form participation.",
-              "fieldName": "name",
-              "attribute": "name"
-            }
-          ],
-          "cssStates": [
-            {
-              "description": "Applied when variant=\"connected\", targetable via :state(btu-connected)",
-              "name": "btu-connected"
-            },
-            {
-              "description": "Applied when variant=\"spaced\", targetable via :state(btu-spaced)",
-              "name": "btu-spaced"
-            },
-            {
-              "description": "Applied when orientation=\"horizontal\", targetable via :state(btu-horizontal)",
-              "name": "btu-horizontal"
-            },
-            {
-              "description": "Applied when orientation=\"vertical\", targetable via :state(btu-vertical)",
-              "name": "btu-vertical"
-            },
-            {
-              "description": "Applied when the group is disabled, targetable via :state(btu-disabled)",
-              "name": "btu-disabled"
+              "default": "'No items available'",
+              "description": "Message displayed when the menu has no focusable items.",
+              "fieldName": "emptyMessage",
+              "attribute": "empty-message"
             }
           ],
           "mixins": [
@@ -4490,10 +4494,6 @@
               "name": "RovingTabindexMixin",
               "module": "/src/util/RovingTabindexMixin.js"
             },
-            {
-              "name": "ComponentStatesMixin",
-              "module": "/src/util/ComponentStatesMixin.js"
-            },
             {
               "name": "EventEmitterMixin",
               "module": "/src/util/EventEmitterMixin.js"
@@ -4507,7 +4507,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-button-group",
+          "tagName": "btu-dropdown-menu",
           "customElement": true
         }
       ],
@@ -4516,16 +4516,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/components/button-group/ButtonGroup.ts"
+            "name": "DropdownMenu",
+            "module": "src/components/dropdown/DropdownMenu.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-button-group",
+          "name": "btu-dropdown-menu",
           "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/components/button-group/ButtonGroup.ts"
+            "name": "DropdownMenu",
+            "module": "src/components/dropdown/DropdownMenu.ts"
           }
         }
       ]