@brightspot/ui 5.4.3-pr.189 → 5.5.0

package/dist/custom-elements.json

@@ -1600,6 +1600,15 @@
               "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
               "attribute": "size"
             },
+            {
+              "kind": "field",
+              "name": "activity",
+              "type": {
+                "text": "'busy' | 'live' | undefined"
+              },
+              "description": "Attention state that draws the eye to the badge. Names the *intent*; the\ncomponent owns the visual treatment (so it can change without callers).\n- 'busy': an in-progress state — a glint shimmers across the label text\n- 'live': a live/active state — a ring ripples out from the leading dot\n  (implies `dot`)",
+              "attribute": "activity"
+            },
             {
               "kind": "method",
               "name": "emit",
@@ -1671,6 +1680,15 @@
               "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
               "fieldName": "size",
               "attribute": "size"
+            },
+            {
+              "name": "activity",
+              "type": {
+                "text": "'busy' | 'live' | undefined"
+              },
+              "description": "Attention state that draws the eye to the badge. Names the *intent*; the\ncomponent owns the visual treatment (so it can change without callers).\n- 'busy': an in-progress state — a glint shimmers across the label text\n- 'live': a live/active state — a ring ripples out from the leading dot\n  (implies `dot`)",
+              "fieldName": "activity",
+              "attribute": "activity"
             }
           ],
           "mixins": [
@@ -1712,151 +1730,197 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/button-group/ButtonGroup.ts",
+      "path": "src/components/banner/Banner.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 full-width container that pins a `<btu-message>` to the top of the CMS or a\ncontent edit page. The banner has no content API of its own — compose a\n`<btu-message>` inside it (or several, e.g. for a paginated banner) and the banner\nspans each to 100% of the host, rendering it full-bleed (edge-to-edge, bottom\nborder only, no corner rounding).\n\nSet the content (variant, label, symbol, dismissible, badge/description/actions\nslots) on the message itself. The full-width treatment lives on this wrapper, so\nthe message has no `full-width` attribute — the banner owns that.",
+          "name": "Banner",
           "cssProperties": [
             {
-              "description": "Space between buttons when variant=\"spaced\" (default: spacing.sm)",
-              "name": "--button-group-gap"
-            },
+              "description": "Stack order for the banner (default: 100). The banner is `position: relative`, so this always applies; set `position: sticky` to also pin it to the viewport.",
+              "name": "--banner-z-index"
+            }
+          ],
+          "slots": [
             {
-              "description": "Corner radius of outer edges when variant=\"connected\" (default: 0.5rem)",
-              "name": "--button-group-border-radius"
-            },
+              "description": "One or more `<btu-message>` elements, full-bleed to the host width. With more than one, the banner auto-creates a `<btu-pagination>` and shows one at a time.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Internal divider color between connected buttons (default: gray-300)",
-              "name": "--button-group-border-color"
-            },
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  },
+                  "description": "Event name from CustomEventMap"
+                },
+                {
+                  "name": "detail",
+                  "optional": true,
+                  "type": {
+                    "text": "UnpackCustomEvent<CustomEventMap[K]>"
+                  },
+                  "description": "Optional event detail payload"
+                }
+              ],
+              "description": "Dispatches a type-safe CustomEvent with standardized configuration.\n\nAll events are configured with:\n- bubbles: true (event propagates up the DOM tree)\n- cancelable: false (event cannot be cancelled)\n- composed: true (event crosses shadow DOM boundaries)",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EventEmitterMixin",
+                "module": "src/util/EventEmitterMixin.ts"
+              }
+            }
+          ],
+          "events": [
             {
-              "description": "Background of a toggled/selected child (default: child's --button-tint-subtle)",
-              "name": "--button-group-selection-bg"
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the banner is first rendered and initialized",
+              "name": "btu-banner-ready"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
             },
             {
-              "description": "Text/icon color of a toggled/selected child (default: child's --button-tint-strong)",
-              "name": "--button-group-selection-color"
+              "name": "ReadyMixin",
+              "module": "/src/util/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/components/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/components/banner/Banner.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/banner/Message.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A message for communicating high-visibility content that is not tied to the\nuser's current task — alerts, breaking news, and persistent status. Use it on\nits own as a contained, bordered card, or place it inside a `<btu-banner>` to\nspan the full width of the page (e.g., pinned above the CMS content area).\n\nMessages render a leading icon, an optional badge, a label, an optional\ndescription, and an optional dismiss control. The label and description\nstack vertically in a text column; everything else sits on the same row.",
+          "name": "Message",
+          "cssProperties": [
+            {
+              "description": "Overrides the background color for the message",
+              "name": "--message-color-background"
             },
             {
-              "description": "Highlight color of the selection shimmer effect (default: child's --button-tint-highlight) Reads the following CSS custom properties from each child button (set by the button plugin per color variant — see tailwind-plugin-button.ts):",
-              "name": "--button-group-shimmer-highlight"
+              "description": "Overrides the text and icon color",
+              "name": "--message-color-foreground"
             },
             {
-              "description": "Subtle tint of the child button's color family (read-only here)",
-              "name": "--button-tint-subtle"
+              "description": "Overrides the border color (defaults to the variant's 300 shade)",
+              "name": "--message-color-border"
             },
             {
-              "description": "Strong tint of the child button's color family (read-only here)",
-              "name": "--button-tint-strong"
+              "description": "Overrides the internal padding (default: 1rem)",
+              "name": "--message-padding"
             },
             {
-              "description": "Highlight tint of the child button's color family (read-only here)",
-              "name": "--button-tint-highlight"
+              "description": "Overrides the corner rounding (default: 8px)",
+              "name": "--message-border-radius"
             }
           ],
           "slots": [
             {
-              "description": "One or more `<button class=\"btu-button …\">` or `<btu-icon-button>` elements to display in the group. The `connected` variant rounds the outer corners on the real `<button>`, so anchors styled as `.btu-button` slotted directly will not get rounded corners. Use `<button>` for grouped controls.",
-              "name": ""
+              "description": "Pseudo-slot for a leading status/version tag, typically a `<btu-badge>`. The slotted child is moved into the header row, before the label.",
+              "name": "badge"
             },
             {
-              "description": "Pushes the child to the end of the group via auto-margin (vertical: bottom, horizontal: right)",
-              "name": "end"
+              "description": "Pseudo-slot for supporting text rendered directly beneath the label. Slot a single inline element (e.g., `<span slot=\"description\">`) or a block element to enable rich content (links, emphasis).",
+              "name": "description"
+            },
+            {
+              "description": "Pseudo-slot for CTA buttons, links, or a `<btu-pagination>`. Children with `slot=\"actions\"` are moved into an internal container on the trailing edge of the body. `.btu-button` children inherit the message's foreground color across all states. The message does not emit an action-click event — attach handlers to your own elements.",
+              "name": "actions"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "tagName",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "description": "Layout direction of the buttons.",
-              "attribute": "orientation",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'connected' | 'spaced'"
+                "text": "MessageVariant"
               },
-              "default": "'connected'",
-              "description": "`connected` collapses shared borders for a joined appearance.\n`spaced` renders buttons with a gap.",
+              "default": "'info'",
+              "description": "Visual style and semantic meaning of the message.",
               "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md' | 'lg'"
-              },
-              "default": "'md'",
-              "description": "Propagates a uniform size to all child buttons.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "When true, disables all child buttons as a group.",
-              "attribute": "disabled"
+              "description": "The primary message or title text displayed.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "selection",
+              "name": "symbol",
               "type": {
-                "text": "'none' | 'single' | 'multiple'"
+                "text": "string | undefined"
               },
-              "default": "'none'",
-              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
-              "attribute": "selection",
-              "reflects": true
+              "description": "Name of the Lucide icon to display. Defaults to a sensible icon per variant.",
+              "attribute": "symbol"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "dismissible",
               "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.",
-              "attribute": "value",
+              "default": "false",
+              "description": "If true, a close icon is provided to allow the user to hide the message.",
+              "attribute": "dismissible",
               "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": "_handleDismiss",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
@@ -1888,187 +1952,69 @@
                 "name": "EventEmitterMixin",
                 "module": "src/util/EventEmitterMixin.ts"
               }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the message is first rendered and initialized",
+              "name": "btu-message-ready"
             },
             {
-              "kind": "field",
-              "name": "#stopFns",
-              "privacy": "private",
               "type": {
-                "text": "Array<() => void>"
+                "text": "CustomEvent"
               },
-              "default": "[]",
-              "inheritedFrom": {
-                "name": "OnFindMixin",
-                "module": "src/util/OnFindMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onFindRegistration",
-              "return": {
-                "type": {
-                  "text": "OnFindRegistration | OnFindRegistration[] | null"
-                }
-              },
-              "inheritedFrom": {
-                "name": "OnFindMixin",
-                "module": "src/util/OnFindMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#armFind",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "OnFindMixin",
-                "module": "src/util/OnFindMixin.ts"
-              }
+              "description": "Fired when the user clicks the close/dismiss button. Cancelable: the message hides itself (sets `hidden`) unless the listener calls `preventDefault()`.",
+              "name": "btu-message-dismiss"
             }
           ],
-          "events": [
-            {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired after first render and initialization",
-              "name": "btu-button-group-ready"
-            },
+          "attributes": [
             {
+              "name": "variant",
               "type": {
-                "text": "CustomEvent<{value: string}>"
+                "text": "MessageVariant"
               },
-              "description": "Fired when selection changes (single/multiple modes only)",
-              "name": "btu-button-group-change"
+              "default": "'info'",
+              "description": "Visual style and semantic meaning of the message.",
+              "fieldName": "variant",
+              "attribute": "variant"
             },
-            {
-              "type": {
-                "text": "CustomEvent<{name: string | undefined}>"
-              },
-              "description": "Bubbles from child btu-icon-button elements when clicked",
-              "name": "btu-icon-button-click"
-            }
-          ],
-          "attributes": [
             {
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
+              "description": "The primary message or title text displayed.",
               "fieldName": "label",
               "attribute": "label"
             },
             {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'horizontal'",
-              "description": "Layout direction of the buttons.",
-              "fieldName": "orientation",
-              "attribute": "orientation"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "'connected' | 'spaced'"
-              },
-              "default": "'connected'",
-              "description": "`connected` collapses shared borders for a joined appearance.\n`spaced` renders buttons with a gap.",
-              "fieldName": "variant",
-              "attribute": "variant"
-            },
-            {
-              "name": "size",
+              "name": "symbol",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "string | undefined"
               },
-              "default": "'md'",
-              "description": "Propagates a uniform size to all child buttons.",
-              "fieldName": "size",
-              "attribute": "size"
+              "description": "Name of the Lucide icon to display. Defaults to a sensible icon per variant.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
             },
             {
-              "name": "disabled",
+              "name": "dismissible",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, disables all child buttons as a group.",
-              "fieldName": "disabled",
-              "attribute": "disabled"
-            },
-            {
-              "name": "selection",
-              "type": {
-                "text": "'none' | 'single' | 'multiple'"
-              },
-              "default": "'none'",
-              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
-              "fieldName": "selection",
-              "attribute": "selection"
-            },
-            {
-              "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.",
-              "fieldName": "value",
-              "attribute": "value"
-            },
-            {
-              "name": "name",
-              "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"
+              "description": "If true, a close icon is provided to allow the user to hide the message.",
+              "fieldName": "dismissible",
+              "attribute": "dismissible"
             }
           ],
           "mixins": [
-            {
-              "name": "RovingTabindexMixin",
-              "module": "/src/util/RovingTabindexMixin.js"
-            },
-            {
-              "name": "ComponentStatesMixin",
-              "module": "/src/util/ComponentStatesMixin.js"
-            },
             {
               "name": "EventEmitterMixin",
               "module": "/src/util/EventEmitterMixin.js"
             },
-            {
-              "name": "OnFindMixin",
-              "module": "/src/util/OnFindMixin.js"
-            },
             {
               "name": "ReadyMixin",
               "module": "/src/util/ReadyMixin.js"
@@ -2078,7 +2024,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-button-group",
+          "tagName": "btu-message",
           "customElement": true
         }
       ],
@@ -2087,213 +2033,167 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/components/button-group/ButtonGroup.ts"
+            "name": "Message",
+            "module": "src/components/banner/Message.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-button-group",
+          "name": "btu-message",
           "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/components/button-group/ButtonGroup.ts"
+            "name": "Message",
+            "module": "src/components/banner/Message.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/banner/Banner.ts",
+      "path": "src/components/button-group/ButtonGroup.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A full-width container that pins a `<btu-message>` to the top of the CMS or a\ncontent edit page. The banner has no content API of its own — compose a\n`<btu-message>` inside it (or several, e.g. for a paginated banner) and the banner\nspans each to 100% of the host, rendering it full-bleed (edge-to-edge, bottom\nborder only, no corner rounding).\n\nSet the content (variant, label, symbol, dismissible, badge/description/actions\nslots) on the message itself. The full-width treatment lives on this wrapper, so\nthe message has no `full-width` attribute — the banner owns that.",
-          "name": "Banner",
+          "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": "Stack order for the banner (default: 100). The banner is `position: relative`, so this always applies; set `position: sticky` to also pin it to the viewport.",
-              "name": "--banner-z-index"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `<btu-message>` elements, full-bleed to the host width. With more than one, the banner auto-creates a `<btu-pagination>` and shows one at a time.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  },
-                  "description": "Event name from CustomEventMap"
-                },
-                {
-                  "name": "detail",
-                  "optional": true,
-                  "type": {
-                    "text": "UnpackCustomEvent<CustomEventMap[K]>"
-                  },
-                  "description": "Optional event detail payload"
-                }
-              ],
-              "description": "Dispatches a type-safe CustomEvent with standardized configuration.\n\nAll events are configured with:\n- bubbles: true (event propagates up the DOM tree)\n- cancelable: false (event cannot be cancelled)\n- composed: true (event crosses shadow DOM boundaries)",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "EventEmitterMixin",
-                "module": "src/util/EventEmitterMixin.ts"
-              }
-            }
-          ],
-          "events": [
+              "description": "Space between buttons when variant=\"spaced\" (default: spacing.sm)",
+              "name": "--button-group-gap"
+            },
             {
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired after the banner is first rendered and initialized",
-              "name": "btu-banner-ready"
-            }
-          ],
-          "mixins": [
+              "description": "Corner radius of outer edges when variant=\"connected\" (default: 0.5rem)",
+              "name": "--button-group-border-radius"
+            },
             {
-              "name": "EventEmitterMixin",
-              "module": "/src/util/EventEmitterMixin.js"
+              "description": "Internal divider color between connected buttons (default: gray-300)",
+              "name": "--button-group-border-color"
             },
             {
-              "name": "ReadyMixin",
-              "module": "/src/util/ReadyMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "btu-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/components/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "btu-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/components/banner/Banner.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/banner/Message.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A message for communicating high-visibility content that is not tied to the\nuser's current task — alerts, breaking news, and persistent status. Use it on\nits own as a contained, bordered card, or place it inside a `<btu-banner>` to\nspan the full width of the page (e.g., pinned above the CMS content area).\n\nMessages render a leading icon, an optional badge, a label, an optional\ndescription, and an optional dismiss control. The label and description\nstack vertically in a text column; everything else sits on the same row.",
-          "name": "Message",
-          "cssProperties": [
+              "description": "Background of a toggled/selected child (default: child's --button-tint-subtle)",
+              "name": "--button-group-selection-bg"
+            },
             {
-              "description": "Overrides the background color for the message",
-              "name": "--message-color-background"
+              "description": "Text/icon color of a toggled/selected child (default: child's --button-tint-strong)",
+              "name": "--button-group-selection-color"
             },
             {
-              "description": "Overrides the text and icon color",
-              "name": "--message-color-foreground"
+              "description": "Highlight color of the selection shimmer effect (default: child's --button-tint-highlight) Reads the following CSS custom properties from each child button (set by the button plugin per color variant — see tailwind-plugin-button.ts):",
+              "name": "--button-group-shimmer-highlight"
             },
             {
-              "description": "Overrides the border color (defaults to the variant's 300 shade)",
-              "name": "--message-color-border"
+              "description": "Subtle tint of the child button's color family (read-only here)",
+              "name": "--button-tint-subtle"
             },
             {
-              "description": "Overrides the internal padding (default: 1rem)",
-              "name": "--message-padding"
+              "description": "Strong tint of the child button's color family (read-only here)",
+              "name": "--button-tint-strong"
             },
             {
-              "description": "Overrides the corner rounding (default: 8px)",
-              "name": "--message-border-radius"
+              "description": "Highlight tint of the child button's color family (read-only here)",
+              "name": "--button-tint-highlight"
             }
           ],
           "slots": [
             {
-              "description": "Pseudo-slot for a leading status/version tag, typically a `<btu-badge>`. The slotted child is moved into the header row, before the label.",
-              "name": "badge"
+              "description": "One or more `<button class=\"btu-button …\">` or `<btu-icon-button>` elements to display in the group. The `connected` variant rounds the outer corners on the real `<button>`, so anchors styled as `.btu-button` slotted directly will not get rounded corners. Use `<button>` for grouped controls.",
+              "name": ""
             },
             {
-              "description": "Pseudo-slot for supporting text rendered directly beneath the label. Slot a single inline element (e.g., `<span slot=\"description\">`) or a block element to enable rich content (links, emphasis).",
-              "name": "description"
+              "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",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
+              "attribute": "label"
             },
             {
-              "description": "Pseudo-slot for CTA buttons, links, or a `<btu-pagination>`. Children with `slot=\"actions\"` are moved into an internal container on the trailing edge of the body. `.btu-button` children inherit the message's foreground color across all states. The message does not emit an action-click event — attach handlers to your own elements.",
-              "name": "actions"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Layout direction of the buttons.",
+              "attribute": "orientation",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "MessageVariant"
+                "text": "'connected' | 'spaced'"
               },
-              "default": "'info'",
-              "description": "Visual style and semantic meaning of the message.",
+              "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": "label",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "description": "The primary message or title text displayed.",
-              "attribute": "label"
+              "default": "'md'",
+              "description": "Propagates a uniform size to all child buttons.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "symbol",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Name of the Lucide icon to display. Defaults to a sensible icon per variant.",
-              "attribute": "symbol"
+              "default": "false",
+              "description": "When true, disables all child buttons as a group.",
+              "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "dismissible",
+              "name": "selection",
               "type": {
-                "text": "boolean"
+                "text": "'none' | 'single' | 'multiple'"
               },
-              "default": "false",
-              "description": "If true, a close icon is provided to allow the user to hide the message.",
-              "attribute": "dismissible",
+              "default": "'none'",
+              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
+              "attribute": "selection",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_handleDismiss",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "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",
@@ -2325,6 +2225,41 @@
                 "name": "EventEmitterMixin",
                 "module": "src/util/EventEmitterMixin.ts"
               }
+            },
+            {
+              "kind": "field",
+              "name": "#stopFns",
+              "privacy": "private",
+              "type": {
+                "text": "Array<() => void>"
+              },
+              "default": "[]",
+              "inheritedFrom": {
+                "name": "OnFindMixin",
+                "module": "src/util/OnFindMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onFindRegistration",
+              "return": {
+                "type": {
+                  "text": "OnFindRegistration | OnFindRegistration[] | null"
+                }
+              },
+              "inheritedFrom": {
+                "name": "OnFindMixin",
+                "module": "src/util/OnFindMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#armFind",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "OnFindMixin",
+                "module": "src/util/OnFindMixin.ts"
+              }
             }
           ],
           "events": [
@@ -2332,62 +2267,145 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the message is first rendered and initialized",
-              "name": "btu-message-ready"
+              "description": "Fired after first render and initialization",
+              "name": "btu-button-group-ready"
             },
             {
               "type": {
-                "text": "CustomEvent"
+                "text": "CustomEvent<{value: string}>"
               },
-              "description": "Fired when the user clicks the close/dismiss button. Cancelable: the message hides itself (sets `hidden`) unless the listener calls `preventDefault()`.",
-              "name": "btu-message-dismiss"
+              "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"
             }
           ],
           "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the group, announced by assistive devices via aria-label.",
+              "fieldName": "label",
+              "attribute": "label"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Layout direction of the buttons.",
+              "fieldName": "orientation",
+              "attribute": "orientation"
+            },
             {
               "name": "variant",
               "type": {
-                "text": "MessageVariant"
+                "text": "'connected' | 'spaced'"
               },
-              "default": "'info'",
-              "description": "Visual style and semantic meaning of the message.",
+              "default": "'connected'",
+              "description": "`connected` collapses shared borders for a joined appearance.\n`spaced` renders buttons with a gap.",
               "fieldName": "variant",
               "attribute": "variant"
             },
             {
-              "name": "label",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "description": "The primary message or title text displayed.",
-              "fieldName": "label",
-              "attribute": "label"
+              "default": "'md'",
+              "description": "Propagates a uniform size to all child buttons.",
+              "fieldName": "size",
+              "attribute": "size"
             },
             {
-              "name": "symbol",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Name of the Lucide icon to display. Defaults to a sensible icon per variant.",
-              "fieldName": "symbol",
-              "attribute": "symbol"
+              "default": "false",
+              "description": "When true, disables all child buttons as a group.",
+              "fieldName": "disabled",
+              "attribute": "disabled"
             },
             {
-              "name": "dismissible",
+              "name": "selection",
               "type": {
-                "text": "boolean"
+                "text": "'none' | 'single' | 'multiple'"
               },
-              "default": "false",
-              "description": "If true, a close icon is provided to allow the user to hide the message.",
-              "fieldName": "dismissible",
-              "attribute": "dismissible"
+              "default": "'none'",
+              "description": "Enables toggle/selection behavior.\n`single` allows one active button; `multiple` allows many.",
+              "fieldName": "selection",
+              "attribute": "selection"
+            },
+            {
+              "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.",
+              "fieldName": "value",
+              "attribute": "value"
+            },
+            {
+              "name": "name",
+              "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"
             }
           ],
           "mixins": [
+            {
+              "name": "RovingTabindexMixin",
+              "module": "/src/util/RovingTabindexMixin.js"
+            },
+            {
+              "name": "ComponentStatesMixin",
+              "module": "/src/util/ComponentStatesMixin.js"
+            },
             {
               "name": "EventEmitterMixin",
               "module": "/src/util/EventEmitterMixin.js"
             },
+            {
+              "name": "OnFindMixin",
+              "module": "/src/util/OnFindMixin.js"
+            },
             {
               "name": "ReadyMixin",
               "module": "/src/util/ReadyMixin.js"
@@ -2397,7 +2415,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "btu-message",
+          "tagName": "btu-button-group",
           "customElement": true
         }
       ],
@@ -2406,16 +2424,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Message",
-            "module": "src/components/banner/Message.ts"
+            "name": "ButtonGroup",
+            "module": "src/components/button-group/ButtonGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "btu-message",
+          "name": "btu-button-group",
           "declaration": {
-            "name": "Message",
-            "module": "src/components/banner/Message.ts"
+            "name": "ButtonGroup",
+            "module": "src/components/button-group/ButtonGroup.ts"
           }
         }
       ]