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

package/dist/custom-elements.json

@@ -4,105 +4,225 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/components/action-bar/ActionBar.ts",
+      "path": "src/components/avatar/Avatar.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",
+          "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": "Gap between items (default: 0.75rem)",
-              "name": "--action-bar-gap"
+              "description": "Custom size (overrides size prop)",
+              "name": "--avatar-size"
             },
             {
-              "description": "Bar padding (default: 1.5rem)",
-              "name": "--action-bar-padding"
+              "description": "Fallback background color (default: purple-600)",
+              "name": "--avatar-bg-color"
             },
             {
-              "description": "Background color (default: white)",
-              "name": "--action-bar-background"
+              "description": "How rounded is the avatar (default: circle)",
+              "name": "--avatar-corner-rounding"
             },
             {
-              "description": "Border color (default: gray-200)",
-              "name": "--action-bar-border-color"
+              "description": "Optional ring border color",
+              "name": "--avatar-ring-color"
             },
             {
-              "description": "Z-index (default: 100)",
-              "name": "--action-bar-z-index"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `btu-action-item` elements",
-              "name": ""
+              "description": "Ring border width (default: 2px)",
+              "name": "--avatar-ring-width"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "position",
+              "name": "src",
               "type": {
-                "text": "Position"
+                "text": "string"
               },
-              "default": "'bottom'",
-              "description": "Bar position: 'top' or 'bottom' (default).",
-              "attribute": "position",
-              "reflects": true
+              "default": "''",
+              "description": "Image source URL",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "sticky",
+              "name": "alt",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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
+              "default": "''",
+              "description": "Alt text for the image",
+              "attribute": "alt"
             },
             {
               "kind": "field",
-              "name": "alignment",
+              "name": "fallback",
               "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": "''",
+              "description": "Fallback text (typically user initials)",
+              "attribute": "fallback"
             },
             {
               "kind": "field",
-              "name": "shadow",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
               },
-              "default": "false",
-              "description": "Adds a box-shadow to the bar.",
-              "attribute": "shadow",
-              "reflects": true
+              "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",
-              "name": "label",
+              "name": "tooltip",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Accessible label for the toolbar region.",
-              "attribute": "label"
+              "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": "compact",
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltipNoArrow",
               "type": {
                 "text": "boolean"
               },
               "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
+              "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"
+              }
             },
             {
               "kind": "method",
@@ -142,284 +262,72 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after first render and initialization",
-              "name": "btu-action-bar-ready"
+              "name": "btu-avatar-ready"
             },
             {
               "type": {
-                "text": "CustomEvent<{label: string}>"
+                "text": "CustomEvent<{src: string}>"
               },
-              "description": "Fired when an action item is clicked (bubbles from btu-action-item)",
-              "name": "btu-action-item-click"
+              "description": "Fired when image successfully loads",
+              "name": "btu-avatar-image-loaded"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{src: string, error: Event}>"
+              },
+              "description": "Fired when image fails to load",
+              "name": "btu-avatar-image-error"
             }
           ],
           "attributes": [
             {
-              "name": "position",
+              "name": "src",
               "type": {
-                "text": "Position"
+                "text": "string"
               },
-              "default": "'bottom'",
-              "description": "Bar position: 'top' or 'bottom' (default).",
-              "fieldName": "position",
-              "attribute": "position"
+              "default": "''",
+              "description": "Image source URL",
+              "fieldName": "src",
+              "attribute": "src"
             },
             {
-              "name": "sticky",
+              "name": "alt",
               "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"
-            },
-            {
-              "name": "item-alignment",
-              "type": {
-                "text": "Alignment"
-              },
-              "default": "'default'",
-              "description": "Content alignment: 'default' (two-zone), 'start', 'center', 'end'.\nNon-default alignments disable two-zone layout.",
-              "fieldName": "alignment",
-              "attribute": "item-alignment"
-            },
-            {
-              "name": "shadow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Adds a box-shadow to the bar.",
-              "fieldName": "shadow",
-              "attribute": "shadow"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Accessible label for the toolbar region.",
-              "fieldName": "label",
-              "attribute": "label"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "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"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "RovingTabindexMixin",
-              "module": "/src/util/RovingTabindexMixin.js"
-            },
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
-            },
-            {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-action-bar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ActionBar",
-            "module": "src/components/action-bar/ActionBar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-action-bar",
-          "declaration": {
-            "name": "ActionBar",
-            "module": "src/components/action-bar/ActionBar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/action-bar/ActionItem.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",
-          "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": "label",
-              "type": {
-                "text": "string"
+                "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": "Alt text for the image",
+              "fieldName": "alt",
+              "attribute": "alt"
             },
             {
-              "kind": "field",
-              "name": "symbol",
+              "name": "fallback",
               "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
-            },
-            {
-              "kind": "field",
-              "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).",
-              "attribute": "zone",
-              "reflects": true
+              "description": "Fallback text (typically user initials)",
+              "fieldName": "fallback",
+              "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)",
+              "fieldName": "size",
+              "attribute": "size"
             },
             {
-              "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",
@@ -427,141 +335,219 @@
               }
             },
             {
-              "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",
+              "fieldName": "tooltipPosition",
               "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",
+              "fieldName": "tooltipDelay",
               "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",
+              "fieldName": "tooltipOffset",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "tooltipNoArrow",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Hide the arrow pseudo-element.",
-              "attribute": "tooltip-no-arrow",
+              "fieldName": "tooltipNoArrow",
               "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",
+              "fieldName": "tooltipTrigger",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "_onMouseLeave",
-              "privacy": "private",
+              "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"
               }
             },
             {
-              "kind": "field",
-              "name": "_onFocusIn",
-              "privacy": "private",
+              "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"
               }
             },
             {
-              "kind": "field",
-              "name": "_onFocusOut",
-              "privacy": "private",
+              "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"
               }
             },
             {
-              "kind": "field",
-              "name": "_onClick",
-              "privacy": "private",
+              "name": "tooltip-no-arrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the arrow pseudo-element.",
+              "attribute": "tooltipNoArrow",
+              "fieldName": "tooltipNoArrow",
               "inheritedFrom": {
                 "name": "TooltipMixin",
                 "module": "src/util/TooltipMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "_onNativeToggle",
-              "privacy": "private",
+              "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"
               }
+            }
+          ],
+          "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-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/components/avatar/Avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/components/avatar/Avatar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/avatar/AvatarGroup.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",
+          "members": [
             {
               "kind": "field",
-              "name": "_onKeyDown",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "name": "max",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "_onDocumentClick",
+              "name": "size",
               "type": {
-                "text": "((e: MouseEvent) => void) | null"
+                "text": "'xs' | 'sm' | 'md'"
               },
-              "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "default": "'md'",
+              "description": "Size variant for all child avatars (unless individually overridden)",
+              "attribute": "size"
+            },
+            {
+              "kind": "method",
+              "name": "processAvatars",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Process all avatar children: apply size, handle overflow\nCall this method when avatars are dynamically added or removed"
             },
             {
               "kind": "method",
@@ -598,247 +584,293 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<{label: string}>"
+                "text": "CustomEvent"
               },
-              "description": "Fired when the action item is clicked (not fired when disabled or loading)",
-              "name": "btu-action-item-click"
+              "description": "Fired after first render and initialization",
+              "name": "btu-avatar-group-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{hidden: number}>"
+              },
+              "description": "Fired when avatars are hidden due to max limit",
+              "name": "btu-avatar-group-overflow"
             }
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "max",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "default": "''",
-              "description": "Button label text.",
-              "fieldName": "label",
-              "attribute": "label"
+              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
+              "fieldName": "max",
+              "attribute": "max"
             },
             {
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "ActionItemVariant"
+                "text": "'xs' | 'sm' | 'md'"
               },
-              "default": "'secondary'",
-              "description": "Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.",
-              "fieldName": "variant",
-              "attribute": "variant"
+              "default": "'md'",
+              "description": "Size variant for all child avatars (unless individually overridden)",
+              "fieldName": "size",
+              "attribute": "size"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
             },
             {
-              "name": "symbol",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Lucide icon symbol for the leading icon.",
-              "fieldName": "symbol",
-              "attribute": "symbol"
+              "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": [
+            {
+              "description": "Gap between items (default: 0.75rem)",
+              "name": "--action-bar-gap"
             },
             {
-              "name": "icon-only",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show icon only, hiding the label. Tooltip activates automatically with the label text.",
-              "fieldName": "iconOnly",
-              "attribute": "icon-only"
+              "description": "Bar padding (default: 1.5rem)",
+              "name": "--action-bar-padding"
             },
             {
-              "name": "disabled",
-              "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"
+              "description": "Background color (default: white)",
+              "name": "--action-bar-background"
             },
             {
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows a loading spinner and prevents interaction.",
-              "fieldName": "loading",
-              "attribute": "loading"
+              "description": "Border color (default: gray-200)",
+              "name": "--action-bar-border-color"
             },
             {
-              "name": "zone",
+              "description": "Z-index (default: 100)",
+              "name": "--action-bar-z-index"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more `btu-action-item` elements",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "position",
               "type": {
-                "text": "'start' | 'end' | ''"
+                "text": "Position"
               },
-              "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"
+              "default": "'bottom'",
+              "description": "Bar position: 'top' or 'bottom' (default).",
+              "attribute": "position",
+              "reflects": true
             },
             {
-              "name": "compactable",
+              "kind": "field",
+              "name": "sticky",
               "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"
-              }
+              "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
             },
             {
-              "name": "tooltipPosition",
+              "kind": "field",
+              "name": "alignment",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
+                "text": "Alignment"
               },
-              "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"
-              }
+              "default": "'default'",
+              "description": "Content alignment: 'default' (two-zone), 'start', 'center', 'end'.\nNon-default alignments disable two-zone layout.",
+              "attribute": "item-alignment",
+              "reflects": true
             },
             {
-              "name": "tooltipDelay",
+              "kind": "field",
+              "name": "shadow",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "fieldName": "tooltipDelay",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "default": "false",
+              "description": "Adds a box-shadow to the bar.",
+              "attribute": "shadow",
+              "reflects": true
             },
             {
-              "name": "tooltipOffset",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "TooltipOffset | null"
+                "text": "string"
               },
-              "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": "''",
+              "description": "Accessible label for the toolbar region.",
+              "attribute": "label"
             },
             {
-              "name": "tooltipNoArrow",
+              "kind": "field",
+              "name": "compact",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "fieldName": "tooltipNoArrow",
-              "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
             },
             {
-              "name": "tooltipTrigger",
-              "type": {
-                "text": "string"
+              "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"
+                }
               },
-              "default": "'hover focus'",
-              "description": "Space-separated trigger types: 'hover', 'focus', 'click'.",
-              "fieldName": "tooltipTrigger",
               "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
+                "name": "EventEmitterMixin",
+                "module": "src/util/EventEmitterMixin.ts"
               }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render and initialization",
+              "name": "btu-action-bar-ready"
             },
             {
-              "name": "tooltip-position",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right'"
+                "text": "CustomEvent<{label: string}>"
               },
-              "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"
-              }
+              "description": "Fired when an action item is clicked (bubbles from btu-action-item)",
+              "name": "btu-action-item-click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "position",
+              "type": {
+                "text": "Position"
+              },
+              "default": "'bottom'",
+              "description": "Bar position: 'top' or 'bottom' (default).",
+              "fieldName": "position",
+              "attribute": "position"
             },
             {
-              "name": "tooltip-delay",
+              "name": "sticky",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "300",
-              "description": "Show delay in milliseconds (hover trigger only).",
-              "attribute": "tooltipDelay",
-              "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": "tooltip-offset",
+              "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).",
-              "attribute": "tooltipOffset",
-              "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": "tooltip-no-arrow",
+              "name": "shadow",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hide the arrow pseudo-element.",
-              "attribute": "tooltipNoArrow",
-              "fieldName": "tooltipNoArrow",
-              "inheritedFrom": {
-                "name": "TooltipMixin",
-                "module": "src/util/TooltipMixin.ts"
-              }
+              "description": "Adds a box-shadow to the bar.",
+              "fieldName": "shadow",
+              "attribute": "shadow"
             },
             {
-              "name": "tooltip-trigger",
+              "name": "label",
               "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"
-              }
+              "default": "''",
+              "description": "Accessible label for the toolbar region.",
+              "fieldName": "label",
+              "attribute": "label"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "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"
             }
           ],
           "mixins": [
             {
-              "name": "TooltipMixin",
-              "module": "/src/util/TooltipMixin.js"
+              "name": "RovingTabindexMixin",
+              "module": "/src/util/RovingTabindexMixin.js"
             },
             {
               "name": "EventEmitterMixin",
@@ -853,7 +885,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-action-item",
+          "tagName": "btu-action-bar",
           "customElement": true
         }
       ],
@@ -862,90 +894,176 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ActionItem",
-            "module": "src/components/action-bar/ActionItem.ts"
+            "name": "ActionBar",
+            "module": "src/components/action-bar/ActionBar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-action-item",
+          "name": "btu-action-bar",
           "declaration": {
-            "name": "ActionItem",
-            "module": "src/components/action-bar/ActionItem.ts"
+            "name": "ActionBar",
+            "module": "src/components/action-bar/ActionBar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/avatar/Avatar.ts",
+      "path": "src/components/action-bar/ActionItem.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": "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": "Custom size (overrides size prop)",
-              "name": "--avatar-size"
-            },
-            {
-              "description": "Fallback background color (default: purple-600)",
-              "name": "--avatar-bg-color"
-            },
-            {
-              "description": "How rounded is the avatar (default: circle)",
-              "name": "--avatar-corner-rounding"
+              "description": "Override button background color",
+              "name": "--button-color"
             },
             {
-              "description": "Optional ring border color",
-              "name": "--avatar-ring-color"
+              "description": "Override button text color",
+              "name": "--button-text-color"
             },
             {
-              "description": "Ring border width (default: 2px)",
-              "name": "--avatar-ring-width"
+              "description": "Override button border radius",
+              "name": "--button-border-radius"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "src",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Image source URL",
-              "attribute": "src"
+              "description": "Button label text.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "alt",
+              "name": "variant",
+              "type": {
+                "text": "ActionItemVariant"
+              },
+              "default": "'secondary'",
+              "description": "Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "symbol",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Alt text for the image",
-              "attribute": "alt"
+              "description": "Lucide icon symbol for the leading icon.",
+              "attribute": "symbol"
             },
             {
               "kind": "field",
-              "name": "fallback",
+              "name": "iconOnly",
               "type": {
-                "text": "string"
+                "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
+            },
+            {
+              "kind": "field",
+              "name": "zone",
+              "type": {
+                "text": "'start' | 'end' | ''"
               },
               "default": "''",
-              "description": "Fallback text (typically user initials)",
-              "attribute": "fallback"
+              "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
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "compactable",
               "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": "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>"
+                }
+              }
             },
             {
               "kind": "field",
@@ -1133,66 +1251,92 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent"
+                "text": "CustomEvent<{label: string}>"
               },
-              "description": "Fired after first render and initialization",
-              "name": "btu-avatar-ready"
-            },
+              "description": "Fired when the action item is clicked (not fired when disabled or loading)",
+              "name": "btu-action-item-click"
+            }
+          ],
+          "attributes": [
             {
+              "name": "label",
               "type": {
-                "text": "CustomEvent<{src: string}>"
+                "text": "string"
               },
-              "description": "Fired when image successfully loads",
-              "name": "btu-avatar-image-loaded"
+              "default": "''",
+              "description": "Button label text.",
+              "fieldName": "label",
+              "attribute": "label"
             },
             {
+              "name": "variant",
               "type": {
-                "text": "CustomEvent<{src: string, error: Event}>"
+                "text": "ActionItemVariant"
               },
-              "description": "Fired when image fails to load",
-              "name": "btu-avatar-image-error"
-            }
-          ],
-          "attributes": [
+              "default": "'secondary'",
+              "description": "Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.",
+              "fieldName": "variant",
+              "attribute": "variant"
+            },
             {
-              "name": "src",
+              "name": "symbol",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Image source URL",
-              "fieldName": "src",
-              "attribute": "src"
+              "description": "Lucide icon symbol for the leading icon.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
             },
             {
-              "name": "alt",
+              "name": "icon-only",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Alt text for the image",
-              "fieldName": "alt",
-              "attribute": "alt"
+              "default": "false",
+              "description": "Show icon only, hiding the label. Tooltip activates automatically with the label text.",
+              "fieldName": "iconOnly",
+              "attribute": "icon-only"
             },
             {
-              "name": "fallback",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the action item. The button remains focusable for accessibility\nbut click events are suppressed.",
+              "fieldName": "disabled",
+              "attribute": "disabled"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a loading spinner and prevents interaction.",
+              "fieldName": "loading",
+              "attribute": "loading"
+            },
+            {
+              "name": "zone",
+              "type": {
+                "text": "'start' | 'end' | ''"
               },
               "default": "''",
-              "description": "Fallback text (typically user initials)",
-              "fieldName": "fallback",
-              "attribute": "fallback"
+              "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": "size",
+              "name": "compactable",
               "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)",
-              "fieldName": "size",
-              "attribute": "size"
+              "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",
@@ -1362,151 +1506,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-avatar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "src/components/avatar/Avatar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-avatar",
-          "declaration": {
-            "name": "Avatar",
-            "module": "src/components/avatar/Avatar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/avatar/AvatarGroup.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",
-          "members": [
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
-              "attribute": "max"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'xs' | 'sm' | 'md'"
-              },
-              "default": "'md'",
-              "description": "Size variant for all child avatars (unless individually overridden)",
-              "attribute": "size"
-            },
-            {
-              "kind": "method",
-              "name": "processAvatars",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Process all avatar children: apply size, handle overflow\nCall this method when avatars are dynamically added or removed"
-            },
-            {
-              "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-avatar-group-ready"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{hidden: number}>"
-              },
-              "description": "Fired when avatars are hidden due to max limit",
-              "name": "btu-avatar-group-overflow"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "max",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
-              "fieldName": "max",
-              "attribute": "max"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'xs' | 'sm' | 'md'"
-              },
-              "default": "'md'",
-              "description": "Size variant for all child avatars (unless individually overridden)",
-              "fieldName": "size",
-              "attribute": "size"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
-            },
-            {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-avatar-group",
+          "tagName": "btu-action-item",
           "customElement": true
         }
       ],
@@ -1515,16 +1515,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "AvatarGroup",
-            "module": "src/components/avatar/AvatarGroup.ts"
+            "name": "ActionItem",
+            "module": "src/components/action-bar/ActionItem.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-avatar-group",
+          "name": "btu-action-item",
           "declaration": {
-            "name": "AvatarGroup",
-            "module": "src/components/avatar/AvatarGroup.ts"
+            "name": "ActionItem",
+            "module": "src/components/action-bar/ActionItem.ts"
           }
         }
       ]