@brightspot/ui 5.3.2 → 5.4.1

package/README.md

@@ -1,212 +1,175 @@
 # Brightspot UI
 
-<a id="readme-top"></a>
+`@brightspot/ui` is a library of ready-made interface pieces — buttons, widgets, icons — plus a full set of colors and styles (light, dark, and high-contrast) for the screens inside the Brightspot CMS.
 
-<div>
-<h2 align="center">platform-ui</h2>
-  <p align="center">
-    A UI library optimized for rapid, standards-based Brightspot CMS component creation.
-    <br/>
-  </p>
-</div>
+The CMS's own interface is built from this UI library, and we're gradually moving the rest of it over. It is also published so individual Brightspot projects can use it.
 
-<!-- TOC -->
-<details>
-  <summary>Table of Contents</summary>
-  <ol>
-  <li>
-      <a href="#about">About</a>
-    </li>
-    <li>
-      <a href="#getting-started">Getting Started</a>
-    </li>
-    <li><a href="#prerequisites">Prerequisites</a></li>
-    <li><a href="#installation">Installation</a></li>
-    <li>
-      <a href="#using-plugins">Using Plugins</a>
-    </li>
-    <li>
-      <a href="#examples">Examples</a>
-    </li>
-    <li>
-      <a href="#development">Development</a>
-    </li>
-  </ol>
-</details>
+## What do you want to do?
 
-## About
+- [Fix or change the CMS UI](#fix-or-change-the-cms-ui)
+- [Use the UI library in a project](#use-the-ui-library-in-a-project)
+- [Improve the UI library itself](#improve-the-ui-library-itself)
 
-Brightspot UI is a package of custom web components and styles to provide a basis for building new CMS components. It uses [TailwindCSS](https://v3.tailwindcss.com/) for styling and [LitElement](https://lit.dev/) for web components.
+---
 
-If you're developing a Brightspot CMS plugin or creating custom CMS UI for your project, then you've come to the right place!
+## Fix or change the CMS UI
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+The CMS interface lives in `src/legacy/tool-ui/`. Edit files there and preview them in a running CMS one of two ways.
 
-## Getting Started
+**You'll need:** Node 22 (`nvm use 22`), Yarn 1, a local `brightspot` checkout, and `yarn install` run once here.
 
-_Note:_ To get the best developer experience we recommend using VSCode editor. The marketplace of extensions that are available provide code formatting and intellisense for all the TailwindCSS classnames and our plugins, etc. The VSCode setup is documented [here](https://github.com/perfectsense/brightspot/tree/release/5.0/cms/tool-ui#visual-studio-code).
+> **Editor tip:** In VSCode, the recommended extensions autocomplete the `btu-*` classes as you type. See the [VSCode setup notes](src/legacy/tool-ui/README.md#visual-studio-code).
 
-### Prerequisites
+### Fast way — live preview (for everyday edits)
 
-Your codebase needs to be compatible with
+1. Start the CMS backend (in your `brightspot/` folder):
 
-- TailwindCSS **v3**
-
-### Installation
-
-1. Install the Brightspot ui node module as a devDependency
    ```sh
-   yarn add -D @brightspot/ui
-   ```
-2. Create a `tailwind.config` file and add Brightspot ui as a preset. More on TWCSS presets [here](https://v3.tailwindcss.com/docs/presets#presets).
-   ```ts
-   // (Typescript example) contents of tailwind.config.ts
-    export default {
-      ...
-      presets: [require('@brightspot/ui')],
-      ...
-    }
-   ```
-   ```js
-   // (Javascript example) contents of tailwind.config.js
-    export default {
-      ...
-      presets: [require('@brightspot/ui/dist/tailwind.config.js')],
-      ...
-    }
+   docker compose up -d
    ```
-3. Build your frontend
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+2. Start the live preview (here):
 
-## Using Plugins
-
-Brightspot UI comes with a variety of TailwindCSS plugins to make styling simpler and declarative. Visit the Storybook to see the available plugins.
+   ```sh
+   cd src/legacy/tool-ui
+   yarn server:local
+   ```
 
-To use our plugins, include them in your TailwindCSS config as usual. Plugin files are provided in both Typescript and Javascript variants and are available under the `dist` path in the platform-ui module.
+3. Open the dev server — note the **`:8080`**, not plain `localhost`:
 
-An example of including a plugin:
+   ```
+   https://localhost:8080/cms/
+   ```
 
-```ts
-// your tailwind.config.ts
-  ...
-  plugins: [
-    require('@brightspot/ui/dist/tailwind-plugin-theme.ts'),
-    ...
-```
+   Click through the certificate warning (local cert — normal).
 
-## Web Components
+Now edit anything in `src/legacy/tool-ui/src/` and the browser updates on its own — no rebuilding.
 
-Brightspot UI includes custom web components built with LitElement. FOUC (Flash of Unstyled Content) prevention is handled automatically when you import the components.
+_Seeing `502` errors? The CMS backend isn't reachable — check the docker step._
 
-Import components in your JavaScript/TypeScript:
+### Full way — build the real package (for a final check only)
 
-```ts
-import '@brightspot/ui/dist/components/widget/Widget'
-```
+Slower, but produces the actual file the CMS ships. Needs two temporary edits in `brightspot` — **don't commit them**.
 
-See the Storybook documentation for detailed usage examples and API references.
+1. Build the package (here):
 
-## Examples
-
-We use [Storybook](https://storybook.js.org/) for interactive previewing of our ui components. Launch that in the browser by running:
-
-```sh
-  yarn storybook
-```
+   ```sh
+   ./gradlew publishToMavenLocal
+   ```
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+2. Point `brightspot` at your build:
+   - `site/build.gradle` — add `mavenLocal()` under `repositories`
+   - `platform/brightspot-dependencies/build.gradle` — change the cms-tool-ui line to:
 
-## Development
+     ```groovy
+     api 'com.brightspot.ui:cms-tool-ui:9999-SNAPSHOT'
+     ```
 
-### Prerequisites
+3. Rebuild and run (in `brightspot/`):
 
-- Node.js v22+
-- Yarn 1 (classic)
+   ```sh
+   ./gradlew docker
+   ```
 
-### Layout
+4. Check it at https://localhost/cms/, then undo the two edits when done.
 
-This repo ships two surfaces inside one published `@brightspot/ui` npm package:
+---
 
-- `src/` — the modern design system (web components, Tailwind plugins, presets). Built by `yarn build` into `dist/`.
-- `src/legacy/tool-ui/` — the brightspot CMS frontend (JS, CSS, webpack, tests). Has its own `package.json`. Built by `(cd src/legacy/tool-ui && yarn build)` into `src/legacy/tool-ui/src/main/webapp/dist/`.
+## Use the UI library in a project
 
-The publish flow (`yarn prepack`) builds both.
+> Starting a new frontend package? [`@brightspot/ui-builder`](https://www.npmjs.com/package/@brightspot/ui-builder) scaffolds the build (Vite) and wires up this preset for you. The steps below are for adding the library to a build you already have.
 
-### Component-only work (no CMS needed)
+**You'll need:** a frontend using TailwindCSS v3.
 
 ```sh
-yarn storybook
+yarn add -D @brightspot/ui
 ```
 
-Opens Storybook at http://localhost:6006. Iterate on `src/` components and Tailwind plugins without booting the CMS.
-
-### CMS integration work
-
-The brightspot CMS consumes `@brightspot/ui` from npm. Two workflows for local iteration:
-
-#### Fast loop: webpack-dev-server (recommended for JS/CSS edits)
+If you don't already have one, create a Tailwind config file at the root of your frontend — `tailwind.config.mjs`:
 
-1. Start the CMS in docker as usual (from `brightspot/`):
-
-   ```sh
-   ./gradlew docker
-   ```
+```js
+// tailwind.config.mjs
+export default {
+  content: ['./src/**/*.{js,ts,html}'], // wherever your markup lives
+}
+```
 
-2. Start the dev server (from `platform-ui/src/legacy/tool-ui/`):
+Then add `@brightspot/ui` as a [preset](https://v3.tailwindcss.com/docs/presets). One line pulls in everything — all colors, styles, and components:
 
-   ```sh
-   yarn server:local
-   ```
+```js
+// tailwind.config.mjs
+import preset from '@brightspot/ui'
 
-   Proxies to `localhost` (or `~/.brightspot/local-url` if set), serves freshly compiled assets at `/cms/dist/`, and injects `x-brightspot-dev: 1` on proxied requests so the CMS returns unhashed asset paths.
+export default {
+  presets: [preset],
+  content: ['./src/**/*.{js,ts,html}'],
+}
+```
 
-3. Open the CMS at the dev-server URL (https://localhost:8080/cms/) instead of the docker URL. Edit files in `src/legacy/tool-ui/src/`; changes hot-reload in the browser.
+Leave `plugins` empty — the preset already registers every component's plugin, so listing them again double-registers.
 
-#### Full WAR rebuild (for the modern `src/` surface, or final smoke)
+To use a component, import it (it self-registers its `btu-*` element), then use the tag. Import from the `components/` subpath with the `.js` extension — not the deep `dist/` path:
 
-`yarn server:local` only serves `src/legacy/tool-ui/`. For edits to the modern surface in `src/`, or to validate against the actual WAR build:
+```ts
+import '@brightspot/ui/components/badge/Badge.js'
+```
 
-1. Link the package (once per machine, from `platform-ui/`):
+```html
+<btu-badge>Draft</btu-badge>
+```
 
-   ```sh
-   yarn link
-   ```
+To browse everything available, run the interactive catalog:
 
-2. Consume the link (in `brightspot/cms/tool-ui/`):
+```sh
+yarn storybook   # opens http://localhost:6006
+```
 
-   ```sh
-   yarn link @brightspot/ui
-   ```
+---
 
-3. Edit, then rebuild whichever surface changed:
+## Improve the UI library itself
 
-   ```sh
-   yarn build                              # for src/ edits
-   (cd src/legacy/tool-ui && yarn build)   # for src/legacy/tool-ui/ edits
-   ```
+Adding or fixing a component, style, or color.
 
-4. Rebuild the CMS WAR and roll it into tomcat (from `brightspot/`):
+**You'll need:** Node 22 (`nvm use 22`), Yarn 1.
 
-   ```sh
-   ./gradlew :cms-tool-ui:yarnBuild
-   ./gradlew docker
-   ```
+**Where things live:**
 
-5. Smoke at https://localhost/cms/ (apache, port 443).
+- `src/` — the UI library (components, styles, colors); this is what gets published.
+- `src/legacy/tool-ui/` — the CMS interface (see the first section).
+- `tool-ui/` — packaging only.
 
-### Unlink when done
+Build and preview components in the catalog — no CMS needed:
 
 ```sh
-# in brightspot/cms/tool-ui:
-yarn unlink @brightspot/ui && yarn install --force
-
-# in platform-ui:
-yarn unlink
+yarn storybook
 ```
 
-### Releases
+Before committing:
 
-`@brightspot/ui` ships via release-please. For migration-track prereleases (`-cms-ui-migration.N`), bump the version, publish to npm, then update the consumer pin in `brightspot/cms/tool-ui/package.json` and rerun `yarn install` there.
+```sh
+yarn build              # compile everything
+yarn check:conventions  # check the rules
+yarn format             # tidy formatting
+yarn test:storybook     # run tests
+```
 
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
+**House rules** — when you touch one of these areas, read its guide in `.ai/` first:
+
+| Area                                            | Guide                                  |
+| ----------------------------------------------- | -------------------------------------- |
+| Naming (sizes, icons, events, CSS vars)         | `.ai/LESSONS-NAMING.md`                |
+| JSDoc and types                                 | `.ai/LESSONS-JSDOC.md`                 |
+| Reusing the button primitive                    | `.ai/LESSONS-BUTTON-REUSE.md`          |
+| Keeping plugin styles isolated                  | `.ai/LESSONS-PLUGIN-ISOLATION.md`      |
+| Safelisting classes written at runtime          | `.ai/LESSONS-SAFELIST.md`              |
+| Preset vs Storybook config; adding a new plugin | `.ai/LESSONS-TAILWIND-CONFIGS.md`      |
+| CSS custom properties + Tailwind gotchas        | `.ai/LESSONS-CSS-PROPS.md`             |
+| Writing Storybook stories                       | `.ai/LESSONS-STORYBOOK.md`             |
+| Anchor positioning / popovers                   | `.ai/LESSONS-ANCHOR-POSITIONING.md`    |
+| Reduced motion                                  | `.ai/LESSONS-REDUCED-MOTION.md`        |
+| Roving tabindex                                 | `.ai/LESSONS-ROVING-TABINDEX.md`       |
+| Composing components                            | `.ai/LESSONS-COMPONENT-COMPOSITION.md` |
+
+See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for documentation standards.
+
+**Releases** are automatic: merge to `main`, and a version is tagged and published for you.

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