@brightspot/ui 5.3.2 → 5.4.1

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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"}

package/dist/custom-elements.json

@@ -1710,6 +1710,325 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/banner/Banner.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",
+          "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": [
+            {
+              "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"
+            },
+            {
+              "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": "Overrides the text and icon color",
+              "name": "--message-color-foreground"
+            },
+            {
+              "description": "Overrides the border color (defaults to the variant's 300 shade)",
+              "name": "--message-color-border"
+            },
+            {
+              "description": "Overrides the internal padding (default: 1rem)",
+              "name": "--message-padding"
+            },
+            {
+              "description": "Overrides the corner rounding (default: 8px)",
+              "name": "--message-border-radius"
+            }
+          ],
+          "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": "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": "variant",
+              "type": {
+                "text": "MessageVariant"
+              },
+              "default": "'info'",
+              "description": "Visual style and semantic meaning of the message.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The primary message or title text displayed.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "symbol",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the Lucide icon to display. Defaults to a sensible icon per variant.",
+              "attribute": "symbol"
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, a close icon is provided to allow the user to hide the message.",
+              "attribute": "dismissible",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_handleDismiss",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "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 the message is first rendered and initialized",
+              "name": "btu-message-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "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"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "MessageVariant"
+              },
+              "default": "'info'",
+              "description": "Visual style and semantic meaning of the message.",
+              "fieldName": "variant",
+              "attribute": "variant"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The primary message or title text displayed.",
+              "fieldName": "label",
+              "attribute": "label"
+            },
+            {
+              "name": "symbol",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the Lucide icon to display. Defaults to a sensible icon per variant.",
+              "fieldName": "symbol",
+              "attribute": "symbol"
+            },
+            {
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, a close icon is provided to allow the user to hide the message.",
+              "fieldName": "dismissible",
+              "attribute": "dismissible"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/util/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/util/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-message",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Message",
+            "module": "src/components/banner/Message.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-message",
+          "declaration": {
+            "name": "Message",
+            "module": "src/components/banner/Message.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/button-group/ButtonGroup.ts",

package/dist/storybook/assets/{ActionBar.stories-1Iqfy4PV.js → ActionBar.stories-BJcrfF0X.js}

@@ -1,4 +1,4 @@
-import{g as p,x as e}from"./iframe-DpPeZoRd.js";import{o as u}from"./style-map-WEdc6AkA.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:a}=p("btu-action-bar"),x={title:"Components/Action Bar",component:"btu-action-bar",tags:["autodocs"],parameters:{docs:{subtitle:"A persistent container for primary, secondary, tertiary, and destructive actions",description:{component:`
+import{g as p,x as e}from"./iframe-DUmd7GbF.js";import{o as u}from"./style-map-D_jXmlQ4.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:a}=p("btu-action-bar"),x={title:"Components/Action Bar",component:"btu-action-bar",tags:["autodocs"],parameters:{docs:{subtitle:"A persistent container for primary, secondary, tertiary, and destructive actions",description:{component:`
 ActionBar provides a horizontal bar for grouping action buttons, typically anchored to the bottom of a view.
 
 <h3>Two-Zone Layout:</h3>

package/dist/storybook/assets/{ActionItem.stories-DjKyE7m_.js → ActionItem.stories-xLR-VN2Q.js}

@@ -1,4 +1,4 @@
-import{g as d,x as a}from"./iframe-DpPeZoRd.js";import{o as b}from"./style-map-WEdc6AkA.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:u,argTypes:e}=d("btu-action-item"),g={title:"Components/Action Bar/Action Item",component:"btu-action-item",tags:["autodocs"],parameters:{docs:{subtitle:"A button element for use within an ActionBar",description:{component:`
+import{g as d,x as a}from"./iframe-DUmd7GbF.js";import{o as b}from"./style-map-D_jXmlQ4.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:u,argTypes:e}=d("btu-action-item"),g={title:"Components/Action Bar/Action Item",component:"btu-action-item",tags:["autodocs"],parameters:{docs:{subtitle:"A button element for use within an ActionBar",description:{component:`
 ActionItem renders a styled button using existing \`btu-button-*\` classes. It supports four visual variants — primary, secondary, tertiary, and destructive — along with optional icons, icon-only mode, loading state, and disabled state.
 
 <h3>Standalone vs. Inside ActionBar:</h3>