@brightspot/ui 5.3.2 → 5.4.0

package/dist/components/banner/Banner.css

@@ -0,0 +1,32 @@
+/* The base `.btu-banner` rules (display, width, position:relative, z-index) live in
+   tailwind-plugin-message.ts so they apply to static/Tailwind markup too. This file
+   holds only custom-element upgrade + auto-pagination behavior — the pager overlay
+   below relies on the plugin's `position: relative`. */
+
+/* FOUC prevention: lay out as a full-width block before the component upgrades
+   so the wrapped message doesn't shift when the banner takes over. */
+btu-banner:not(:defined) {
+  @apply w-full blokk;
+}
+
+/* Auto-pagination. Until the banner has paginated, show only the first message so the
+   rest don't flash stacked before `_paginate()` hides them. */
+btu-banner:not([data-paginated]) > btu-message:not(:first-of-type) {
+  @apply hidden;
+}
+
+/* Once paginated, the pager overlays the right of the active message strip (kept on the
+   banner so it never reparents). The message reserves room equal to the pager's width
+   plus its inset so content doesn't run under it — keep this in sync with the pager's
+   `inset-inline-end` below. */
+btu-banner[data-paginated] > btu-message {
+  padding-inline-end: 5rem;
+}
+
+btu-banner[data-paginated] > btu-pagination {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 1rem;
+  display: flex;
+  align-items: center;
+}

package/dist/components/banner/Banner.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import '../pagination/Pagination.js';
+import './Banner.css';
+import './Message.js';
+declare const Banner_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A full-width container that pins a `<btu-message>` to the top of the CMS or a
+ * content edit page. The banner has no content API of its own — compose a
+ * `<btu-message>` inside it (or several, e.g. for a paginated banner) and the banner
+ * spans each to 100% of the host, rendering it full-bleed (edge-to-edge, bottom
+ * border only, no corner rounding).
+ *
+ * Set the content (variant, label, symbol, dismissible, badge/description/actions
+ * slots) on the message itself. The full-width treatment lives on this wrapper, so
+ * the message has no `full-width` attribute — the banner owns that.
+ *
+ * @element btu-banner
+ *
+ * @slot - 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.
+ *
+ * @fires {CustomEvent} btu-banner-ready - Fired after the banner is first rendered and initialized
+ *
+ * @cssprop --banner-z-index - 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.
+ *
+ * @example
+ * ```html
+ * <btu-banner>
+ *   <btu-message variant="warning" label="API rate limits were updated">
+ *     <span slot="description">Review your usage dashboard to stay within the new limits.</span>
+ *     <button slot="actions" type="button">Learn more</button>
+ *   </btu-message>
+ * </btu-banner>
+ * ```
+ */
+export default class Banner extends Banner_base {
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    /**
+     * @internal
+     * Create a `<btu-pagination>` on the banner and show one message at a time, toggling
+     * `hidden` on page change. Reflects the messages present at first render (not
+     * re-evaluated on later add/remove).
+     */
+    private _paginate;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-banner': Banner;
+    }
+}
+export {};
+//# sourceMappingURL=Banner.d.ts.map

package/dist/components/banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/banner/Banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAGtC,OAAO,6BAA6B,CAAA;AACpC,OAAO,cAAc,CAAA;AACrB,OAAO,cAAc,CAAA;;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAAyC;IAC3E,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAKzB,YAAY,IAAI,IAAI;IAUpB;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IA6BjB,MAAM;CAGP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB;CACF"}

package/dist/components/banner/Banner.js

@@ -0,0 +1,94 @@
+import { LitElement, html } from 'lit';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+import '../pagination/Pagination.js';
+import './Banner.css';
+import './Message.js';
+/**
+ * A full-width container that pins a `<btu-message>` to the top of the CMS or a
+ * content edit page. The banner has no content API of its own — compose a
+ * `<btu-message>` inside it (or several, e.g. for a paginated banner) and the banner
+ * spans each to 100% of the host, rendering it full-bleed (edge-to-edge, bottom
+ * border only, no corner rounding).
+ *
+ * Set the content (variant, label, symbol, dismissible, badge/description/actions
+ * slots) on the message itself. The full-width treatment lives on this wrapper, so
+ * the message has no `full-width` attribute — the banner owns that.
+ *
+ * @element btu-banner
+ *
+ * @slot - 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.
+ *
+ * @fires {CustomEvent} btu-banner-ready - Fired after the banner is first rendered and initialized
+ *
+ * @cssprop --banner-z-index - 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.
+ *
+ * @example
+ * ```html
+ * <btu-banner>
+ *   <btu-message variant="warning" label="API rate limits were updated">
+ *     <span slot="description">Review your usage dashboard to stay within the new limits.</span>
+ *     <button slot="actions" type="button">Learn more</button>
+ *   </btu-message>
+ * </btu-banner>
+ * ```
+ */
+export default class Banner extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add('btu-banner');
+    }
+    firstUpdated() {
+        const messages = Array.from(this.querySelectorAll(':scope > btu-message'));
+        if (messages.length === 0) {
+            console.warn('[btu-banner] Expected at least one <btu-message> child.', this);
+        }
+        else if (messages.length > 1) {
+            this._paginate(messages);
+        }
+        this.emit('btu-banner-ready');
+    }
+    /**
+     * @internal
+     * Create a `<btu-pagination>` on the banner and show one message at a time, toggling
+     * `hidden` on page change. Reflects the messages present at first render (not
+     * re-evaluated on later add/remove).
+     */
+    _paginate(messages) {
+        const pager = document.createElement('btu-pagination');
+        pager.totalItems = messages.length;
+        pager.pageSize = 1;
+        // pageSize must be a valid option or the component resets it to the first default.
+        pager.pageSizeOptions = '1';
+        pager.hideTotalCount = true;
+        pager.pageSizeChanger = false;
+        pager.boundaryButtons = false;
+        const showPage = (page) => {
+            messages.forEach((message, i) => {
+                message.hidden = i !== page - 1;
+            });
+        };
+        pager.addEventListener('btu-pagination-change', e => {
+            showPage(e.detail.page);
+        });
+        showPage(1);
+        // Keep the pager on the banner (a stable host) so navigation never reparents it
+        // (no reconnect churn, no focus loss). `data-paginated` flips the banner from the
+        // pre-init FOUC guard to the paginated layout (both in Banner.css).
+        this.dataset.paginated = '';
+        this.append(pager);
+    }
+    // Light DOM: the messages render themselves; the banner only frames them.
+    render() {
+        return html ``;
+    }
+}
+if (!customElements.get('btu-banner')) {
+    customElements.define('btu-banner', Banner);
+}
+//# sourceMappingURL=Banner.js.map

package/dist/components/banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/banner/Banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,6BAA6B,CAAA;AACpC,OAAO,cAAc,CAAA;AACrB,OAAO,cAAc,CAAA;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,iBAAiB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAC3E,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;IAClC,CAAC;IAED,YAAY;QACV,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,sBAAsB,CAAC,CAAC,CAAA;QACvF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC1B,OAAO,CAAC,IAAI,CAAC,yDAAyD,EAAE,IAAI,CAAC,CAAA;QAC/E,CAAC;aAAM,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC1B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;IAC/B,CAAC;IAED;;;;;OAKG;IACK,SAAS,CAAC,QAAuB;QACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;QACtD,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAA;QAClC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAA;QAClB,mFAAmF;QACnF,KAAK,CAAC,eAAe,GAAG,GAAG,CAAA;QAC3B,KAAK,CAAC,cAAc,GAAG,IAAI,CAAA;QAC3B,KAAK,CAAC,eAAe,GAAG,KAAK,CAAA;QAC7B,KAAK,CAAC,eAAe,GAAG,KAAK,CAAA;QAE7B,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAQ,EAAE;YACtC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;gBAC9B,OAAO,CAAC,MAAM,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,CAAA;YACjC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAA;QAED,KAAK,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,CAAC,CAAC,EAAE;YAClD,QAAQ,CAAE,CAAmC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAC5D,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,CAAC,CAAC,CAAA;QACX,gFAAgF;QAChF,kFAAkF;QAClF,oEAAoE;QACpE,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAA;QAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC;IAED,0EAA0E;IAC1E,MAAM;QACJ,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;CACF;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;IACtC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;AAC7C,CAAC"}

package/dist/components/banner/Message.css

@@ -0,0 +1,4 @@
+/* FOUC prevention: hide pseudo-slotted content before component upgrades */
+btu-message:not(:defined) > [slot] {
+  @apply hidden;
+}

package/dist/components/banner/Message.d.ts

@@ -0,0 +1,103 @@
+import { LitElement, type PropertyValues } from 'lit';
+import '../icon-button/IconButton.js';
+import '../icon/Icon.js';
+import './Message.css';
+export type MessageVariant = 'primary' | 'info' | 'warning' | 'error' | 'success';
+declare const Message_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A message for communicating high-visibility content that is not tied to the
+ * user's current task — alerts, breaking news, and persistent status. Use it on
+ * its own as a contained, bordered card, or place it inside a `<btu-banner>` to
+ * span the full width of the page (e.g., pinned above the CMS content area).
+ *
+ * Messages render a leading icon, an optional badge, a label, an optional
+ * description, and an optional dismiss control. The label and description
+ * stack vertically in a text column; everything else sits on the same row.
+ *
+ * @element btu-message
+ *
+ * @slot badge - Pseudo-slot for a leading status/version tag, typically a
+ *   `<btu-badge>`. The slotted child is moved into the header row, before the
+ *   label.
+ * @slot 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).
+ * @slot actions - 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.
+ *
+ * @fires {CustomEvent} btu-message-ready - Fired after the message is first rendered and initialized
+ * @fires {CustomEvent} btu-message-dismiss - Fired when the user clicks the close/dismiss button.
+ *   Cancelable: the message hides itself (sets `hidden`) unless the listener calls `preventDefault()`.
+ *
+ * @cssprop --message-color-background - Overrides the background color for the message
+ * @cssprop --message-color-foreground - Overrides the text and icon color
+ * @cssprop --message-color-border - Overrides the border color (defaults to the variant's 300 shade)
+ * @cssprop --message-padding - Overrides the internal padding (default: 1rem)
+ * @cssprop --message-border-radius - Overrides the corner rounding (default: 8px)
+ *
+ * @example
+ * ```html
+ * <btu-message variant="info" label="New feature available" dismissible></btu-message>
+ * ```
+ *
+ * @example
+ * ```html
+ * <btu-message variant="error" label="Something went wrong" dismissible>
+ *   <span slot="description">We couldn't save your changes. Please try again in a moment.</span>
+ * </btu-message>
+ * ```
+ *
+ * @example
+ * ```html
+ * <btu-message variant="info" label="New feature available" dismissible>
+ *   <btu-badge slot="badge" variant="info" size="sm">v2.4</btu-badge>
+ *   <span slot="description">The redesigned editor is now available.</span>
+ *   <button slot="actions" type="button">Learn more</button>
+ * </btu-message>
+ * ```
+ */
+export default class Message extends Message_base {
+    /**
+     * Visual style and semantic meaning of the message.
+     * @attr
+     */
+    variant: MessageVariant;
+    /**
+     * The primary message or title text displayed.
+     * @attr
+     */
+    label: string | undefined;
+    /**
+     * Name of the Lucide icon to display. Defaults to a sensible icon per variant.
+     * @attr
+     */
+    symbol: string | undefined;
+    /**
+     * If true, a close icon is provided to allow the user to hide the message.
+     * @attr
+     */
+    dismissible: boolean;
+    /**
+     * @internal
+     * Safe, validated variant used for rendering and styling. If the consumer
+     * sets an unknown value on `this.variant`, we fall back to `info` here
+     * without overwriting the original user input on the element.
+     */
+    private _safeVariant;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    firstUpdated(): void;
+    private _handleDismiss;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-message': Message;
+    }
+}
+export {};
+//# sourceMappingURL=Message.d.ts.map

package/dist/components/banner/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/banner/Message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAMpE,OAAO,8BAA8B,CAAA;AACrC,OAAO,iBAAiB,CAAA;AACxB,OAAO,eAAe,CAAA;AAEtB,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;;AAqBjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,YAAyC;IAC5E;;;OAGG;IAEH,OAAO,EAAE,cAAc,CAAS;IAEhC;;;OAGG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAEzB;;;OAGG;IAEH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAE1B;;;OAGG;IAEH,WAAW,UAAQ;IAEnB;;;;;OAKG;IACH,OAAO,CAAC,YAAY,CAAyB;IAE7C,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAOzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAwBzD,YAAY,IAAI,IAAI;IAuCpB,OAAO,CAAC,cAAc;IActB,MAAM;CAkCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,OAAO,CAAA;KACvB;CACF"}

package/dist/components/banner/Message.js

@@ -0,0 +1,235 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { l10n } from '../../util/i18n.js';
+import onFind from '../../util/onFind.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+import '../icon-button/IconButton.js';
+import '../icon/Icon.js';
+import './Message.css';
+const DEFAULT_ICONS = {
+    primary: 'info',
+    info: 'info',
+    warning: 'triangle-alert',
+    error: 'circle-alert',
+    success: 'circle-check',
+};
+// Tailwind content scanning requires complete class names (no template literals),
+// so the variant class is looked up from this map instead of being built via
+// string interpolation at runtime.
+const VARIANT_CLASS = {
+    primary: 'btu-message-primary',
+    info: 'btu-message-info',
+    warning: 'btu-message-warning',
+    error: 'btu-message-error',
+    success: 'btu-message-success',
+};
+/**
+ * A message for communicating high-visibility content that is not tied to the
+ * user's current task — alerts, breaking news, and persistent status. Use it on
+ * its own as a contained, bordered card, or place it inside a `<btu-banner>` to
+ * span the full width of the page (e.g., pinned above the CMS content area).
+ *
+ * Messages render a leading icon, an optional badge, a label, an optional
+ * description, and an optional dismiss control. The label and description
+ * stack vertically in a text column; everything else sits on the same row.
+ *
+ * @element btu-message
+ *
+ * @slot badge - Pseudo-slot for a leading status/version tag, typically a
+ *   `<btu-badge>`. The slotted child is moved into the header row, before the
+ *   label.
+ * @slot 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).
+ * @slot actions - 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.
+ *
+ * @fires {CustomEvent} btu-message-ready - Fired after the message is first rendered and initialized
+ * @fires {CustomEvent} btu-message-dismiss - Fired when the user clicks the close/dismiss button.
+ *   Cancelable: the message hides itself (sets `hidden`) unless the listener calls `preventDefault()`.
+ *
+ * @cssprop --message-color-background - Overrides the background color for the message
+ * @cssprop --message-color-foreground - Overrides the text and icon color
+ * @cssprop --message-color-border - Overrides the border color (defaults to the variant's 300 shade)
+ * @cssprop --message-padding - Overrides the internal padding (default: 1rem)
+ * @cssprop --message-border-radius - Overrides the corner rounding (default: 8px)
+ *
+ * @example
+ * ```html
+ * <btu-message variant="info" label="New feature available" dismissible></btu-message>
+ * ```
+ *
+ * @example
+ * ```html
+ * <btu-message variant="error" label="Something went wrong" dismissible>
+ *   <span slot="description">We couldn't save your changes. Please try again in a moment.</span>
+ * </btu-message>
+ * ```
+ *
+ * @example
+ * ```html
+ * <btu-message variant="info" label="New feature available" dismissible>
+ *   <btu-badge slot="badge" variant="info" size="sm">v2.4</btu-badge>
+ *   <span slot="description">The redesigned editor is now available.</span>
+ *   <button slot="actions" type="button">Learn more</button>
+ * </btu-message>
+ * ```
+ */
+export default class Message extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Visual style and semantic meaning of the message.
+         * @attr
+         */
+        this.variant = 'info';
+        /**
+         * If true, a close icon is provided to allow the user to hide the message.
+         * @attr
+         */
+        this.dismissible = false;
+        /**
+         * @internal
+         * Safe, validated variant used for rendering and styling. If the consumer
+         * sets an unknown value on `this.variant`, we fall back to `info` here
+         * without overwriting the original user input on the element.
+         */
+        this._safeVariant = 'info';
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // classList (not a full className rewrite) preserves consumer-added classes.
+        this.classList.add('btu-message');
+        this.setAttribute('aria-atomic', 'true');
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('variant')) {
+            this._safeVariant = this.variant in VARIANT_CLASS ? this.variant : 'info';
+            if (this._safeVariant !== this.variant) {
+                console.warn(`[btu-message] Unrecognized variant: "${this.variant}". Falling back to "info".`, this);
+            }
+            // Re-setting aria-live on every render can re-announce the content in some
+            // screen readers, so only update it when the variant changes. error/primary
+            // are urgent (assertive); other variants are polite.
+            const isAssertive = this._safeVariant === 'error' || this._safeVariant === 'primary';
+            this.setAttribute('role', isAssertive ? 'alert' : 'status');
+            this.setAttribute('aria-live', isAssertive ? 'assertive' : 'polite');
+            // Swap only the variant class; leave all other classes untouched.
+            const variantClass = VARIANT_CLASS[this._safeVariant];
+            for (const cls of Object.values(VARIANT_CLASS)) {
+                if (cls !== variantClass)
+                    this.classList.remove(cls);
+            }
+            this.classList.add(variantClass);
+        }
+    }
+    firstUpdated() {
+        const hasDescription = !!this.querySelector(':scope > [slot="description"]');
+        if (!this.label?.trim() && !hasDescription) {
+            console.warn('[btu-message] No label or description provided.', this);
+        }
+        // Guard the containers instead of asserting non-null, so a future conditional
+        // wrapper can't null-deref.
+        const badgeContainer = this.querySelector('.btu-message-badge');
+        const descriptionContainer = this.querySelector('.btu-message-description');
+        const actionsContainer = this.querySelector('.btu-message-actions');
+        if (badgeContainer && descriptionContainer && actionsContainer) {
+            onFind(this, ':scope > :not([data-message-internal])', el => {
+                const slot = el.getAttribute('slot');
+                if (slot === 'badge') {
+                    badgeContainer.appendChild(el);
+                }
+                else if (slot === 'description') {
+                    descriptionContainer.appendChild(el);
+                    this.classList.add('btu-message-has-description');
+                }
+                else if (slot === 'actions') {
+                    actionsContainer.appendChild(el);
+                }
+                else if (slot) {
+                    console.warn(`[btu-message] Unrecognized slot="${slot}". Valid slots are "badge", "description", and "actions".`, el);
+                }
+                else {
+                    console.warn('[btu-message] Child element has no slot attribute. Use slot="badge", "description", or "actions".', el);
+                }
+            });
+        }
+        this.emit('btu-message-ready');
+    }
+    _handleDismiss() {
+        // Dispatch directly (rather than via `emit`) so the event is cancelable —
+        // the default action is to hide the message; consumers can call
+        // `preventDefault()` to keep it visible and manage dismissal themselves.
+        const event = new CustomEvent('btu-message-dismiss', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+        });
+        if (this.dispatchEvent(event)) {
+            this.hidden = true;
+        }
+    }
+    render() {
+        const iconName = this.symbol ?? DEFAULT_ICONS[this._safeVariant];
+        return html `
+      <btu-icon
+        class="btu-message-icon"
+        symbol="${iconName}"
+        size="md"
+        aria-hidden="true"
+        data-message-internal
+      ></btu-icon>
+      <div class="btu-message-body" data-message-internal>
+        <div class="btu-message-text">
+          <div class="btu-message-header">
+            <div class="btu-message-badge"></div>
+            ${this.label ? html `<span class="btu-message-label">${this.label}</span>` : nothing}
+          </div>
+          <div class="btu-message-description"></div>
+        </div>
+        <div class="btu-message-actions"></div>
+      </div>
+      ${this.dismissible
+            ? html `<btu-icon-button
+            class="btu-message-dismiss"
+            symbol="x"
+            type="tertiary-clear"
+            size="sm"
+            aria-label="${l10n('message', 'dismiss', 'Dismiss')}"
+            @click=${this._handleDismiss}
+            data-message-internal
+          ></btu-icon-button>`
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true })
+], Message.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], Message.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Message.prototype, "symbol", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Message.prototype, "dismissible", void 0);
+if (!customElements.get('btu-message')) {
+    customElements.define('btu-message', Message);
+}
+//# sourceMappingURL=Message.js.map

package/dist/components/banner/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/banner/Message.ts"],"names":[],"mappings":"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"}