@brightspot/ui 5.3.2 → 5.4.1

package/docs/components/Message.md

@@ -0,0 +1,75 @@
+# `src/components/banner/Message.ts`:
+
+## class: `Message`, `btu-message`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                | Module                         | Package |
+| ------------------- | ------------------------------ | ------- |
+| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
+| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
+
+### Fields
+
+| Name          | Privacy | Type                  | Default  | Description                                                                  | Inherited From |
+| ------------- | ------- | --------------------- | -------- | ---------------------------------------------------------------------------- | -------------- |
+| `variant`     |         | `MessageVariant`      | `'info'` | Visual style and semantic meaning of the message.                            |                |
+| `label`       |         | `string \| undefined` |          | The primary message or title text displayed.                                 |                |
+| `symbol`      |         | `string \| undefined` |          | Name of the Lucide icon to display. Defaults to a sensible icon per variant. |                |
+| `dismissible` |         | `boolean`             | `false`  | If true, a close icon is provided to allow the user to hide the message.     |                |
+
+### Methods
+
+| Name             | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
+| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
+| `_handleDismiss` | private |                                                                                                                                                                                                                                                                                    |                                                         | `void`    |                   |
+| `emit`           |         | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |
+
+### Events
+
+| Name                  | Type          | Description                                                                                                                                                 | Inherited From |
+| --------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `btu-message-ready`   | `CustomEvent` | Fired after the message is first rendered and initialized                                                                                                   |                |
+| `btu-message-dismiss` | `CustomEvent` | Fired when the user clicks the close/dismiss button. Cancelable: the message hides itself (sets \`hidden\`) unless the listener calls \`preventDefault()\`. |                |
+
+### Attributes
+
+| Name          | Field       | Inherited From |
+| ------------- | ----------- | -------------- |
+| `variant`     | variant     |                |
+| `label`       | label       |                |
+| `symbol`      | symbol      |                |
+| `dismissible` | dismissible |                |
+
+### CSS Properties
+
+| Name                         | Default | Description                                                      |
+| ---------------------------- | ------- | ---------------------------------------------------------------- |
+| `--message-color-background` |         | Overrides the background color for the message                   |
+| `--message-color-foreground` |         | Overrides the text and icon color                                |
+| `--message-color-border`     |         | Overrides the border color (defaults to the variant's 300 shade) |
+| `--message-padding`          |         | Overrides the internal padding (default: 1rem)                   |
+| `--message-border-radius`    |         | Overrides the corner rounding (default: 8px)                     |
+
+### Slots
+
+| Name          | Description                                                                                                                                                                                                                                                                                                                                        |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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.                                                                                                                                                                                                      |
+| `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).                                                                                                                                              |
+| `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. |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name          | Declaration | Module                           | Package |
+| --------------------------- | ------------- | ----------- | -------------------------------- | ------- |
+| `js`                        | `default`     | Message     | src/components/banner/Message.ts |         |
+| `custom-element-definition` | `btu-message` | Message     | src/components/banner/Message.ts |         |

package/docs/components/README.md

@@ -9,6 +9,7 @@ This directory contains auto-generated API documentation for all Brightspot UI w
 - [`<btu-avatar>` - Avatar](Avatar.md)
 - [`<btu-avatar-group>` - AvatarGroup](AvatarGroup.md)
 - [`<btu-badge>` - Badge](Badge.md)
+- [`<btu-banner>` - Banner](Banner.md)
 - [`<btu-button-group>` - ButtonGroup](ButtonGroup.md)
 - [`<btu-card>` - Card](Card.md)
 - [`<btu-checkbox>` - Checkbox](Checkbox.md)
@@ -22,6 +23,7 @@ This directory contains auto-generated API documentation for all Brightspot UI w
 - [`<btu-icon>` - Icon](Icon.md)
 - [`<btu-icon-button>` - IconButton](IconButton.md)
 - [`<btu-linear-progress>` - LinearProgress](LinearProgress.md)
+- [`<btu-message>` - Message](Message.md)
 - [`<btu-pagination>` - Pagination](Pagination.md)
 - [`<btu-popover>` - Popover](Popover.md)
 - [`<btu-switch>` - Switch](Switch.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "5.3.2",
+  "version": "5.4.1",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

package/src/legacy/tool-ui/src/ContentInputGroup.css

@@ -185,6 +185,10 @@
   @apply mt-[--CIG-space] basis-full;
 }
 
+.CIG > .TemplateField {
+  @apply basis-full;
+}
+
 /* -------------- */
 /*    CIG-row     */
 /* -------------- */

package/src/legacy/tool-ui/src/Hierarchy.css

@@ -1,6 +1,6 @@
 /* Hierarchy search result styles */
 .Hierarchy {
-  @apply col-span-full grid size-full auto-cols-[minmax(auto,2fr)] grid-flow-col grid-cols-[minmax(262px,1fr)_minmax(262px,1fr)] gap-1 overflow-x-auto overflow-y-hidden px-2.5 [grid-row:2/4];
+  @apply col-span-full flex size-full gap-1 overflow-x-auto overflow-y-hidden px-2.5 [grid-row:2/4];
 
   .watch-button {
     @apply hidden;
@@ -8,14 +8,7 @@
 }
 
 .Hierarchy-column {
-  @apply max-h-full min-w-[262px] overflow-y-auto;
-
-  /* Hacky way to make sure that a single column will span full width */
-  .Hierarchy > & {
-    &:has(+ .Hierarchy-children) {
-      @apply col-span-2;
-    }
-  }
+  @apply max-h-full min-w-[262px] flex-1 shrink-0 overflow-y-auto;
 
   a[data-mismatch-hierarchy-type] {
     @apply pointer-events-none cursor-none opacity-30;
@@ -51,11 +44,11 @@
 }
 
 .Hierarchy-children {
-  @apply contents;
+  @apply flex shrink-0 gap-1;
 
   /* Shows the user that the selected item has no loadable children */
   :has(li.is-selected) + &.loaded:empty {
-    @apply blokk h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
+    @apply blokk h-[42px] min-w-[262px] rounded-lg bg-gray-100 shadow-md;
   }
 }
 

package/src/legacy/tool-ui/src/MenuView.css

@@ -60,6 +60,10 @@
       @apply btu-button-pressed after:-rotate-180;
     }
 
+    &.active:not(.is-open):not(.rte-overflow-btn) > button {
+      @apply btu-button-pressed;
+    }
+
     &.rte-overflow-btn {
       @apply h-7;
     }
@@ -316,6 +320,11 @@ button + .rte2-toolbar-submenu-2-items {
   @apply btu-button-pressed;
 }
 
+/* Submenu active items: selector specificity (0-3-1) beats Dropdown-item's background-color:transparent (0-2-3) */
+.rte2-toolbar-submenu-2-items .ProseMirrorToolbar-action.active > a {
+  @apply btu-dropdown-item-selected;
+}
+
 .ProseMirrorToolbar-action.disabled > a[data-icon] {
   @apply btu-button-disabled;
 }

package/src/legacy/tool-ui/src/Page.css

@@ -780,7 +780,7 @@
   }
 
   .Page-title {
-    @apply visible absolute bottom-[55dvh] top-auto z-10 order-2 flex w-full transform-none items-center justify-start ps-6 @container-normal md:bottom-[56dvh] md:right-0 md:m-[unset] md:w-[--Page-loginWidth];
+    @apply visible absolute bottom-[55dvh] top-auto z-10 order-2 flex w-full transform-none items-center justify-start ps-6 @container-normal md:bottom-[56dvh] md:right-0 md:m-[unset] md:!me-0 md:w-[--Page-loginWidth] md:max-w-none;
   }
 
   .Page-title img {

package/src/legacy/tool-ui/src/PrePublish.ts

@@ -18,30 +18,6 @@ onFind('.PrePublish', (popup: HTMLElement) => {
   }
 
   close?.addEventListener('click', () => {
-    // User closed the popup and chose to continue then submit without interferrence.
-    if (form) {
-      const input = form.querySelector<HTMLInputElement>(
-        'input[name="prePublish"]',
-      )
-      const button = form.querySelector<HTMLButtonElement>(
-        'button[name="prePublishDisplay"]',
-      )
-
-      input?.remove()
-
-      if (button) {
-        button.addEventListener(
-          'click',
-          () => {
-            if (input) {
-              form.appendChild(input)
-            }
-          },
-          { once: true },
-        )
-      }
-    }
-
     popup.classList.remove('is-visible')
 
     if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {

package/src/legacy/tool-ui/src/ThemeBundleEditor.css

@@ -44,6 +44,10 @@
   }
 }
 
+dialog:modal .ThemeBundleEditor-stage.is-open {
+  @apply inset-[var(--padding)] rounded-2xl overflow-hidden;
+}
+
 /* Carryover from v4 */
 .Styleguide .Page.is-inIframe {
   @apply h-full;