@brightspot/ui 5.0.4-pre.20260624 → 5.2.0

package/docs/components/Widget.md

@@ -13,6 +13,7 @@
 | Name                | Module                         | Package |
 | ------------------- | ------------------------------ | ------- |
 | `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
+| `OnFindMixin`       | /src/util/OnFindMixin.js       |         |
 | `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
 
 ### Static Fields
@@ -23,23 +24,26 @@
 
 ### Fields
 
-| Name                 | Privacy | Type      | Default                                                                                                                                                                                                     | Description                                                                                                                          | Inherited From |
-| -------------------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
-| `_internals`         | private |           |                                                                                                                                                                                                             |                                                                                                                                      |                |
-| `heading`            |         | `string`  | `''`                                                                                                                                                                                                        | Heading text displayed in the header.                                                                                                |                |
-| `collapsible`        |         | `boolean` | `false`                                                                                                                                                                                                     | Whether the widget can be collapsed/expanded.
When true, a chevron toggle button appears in the header.                          |                |
-| `collapsed`          |         | `boolean` | `false`                                                                                                                                                                                                     | Whether the widget is currently collapsed.
When true, body and footer are hidden. Implies collapsible.                           |                |
-| `fullscreenable`     |         | `boolean` | `false`                                                                                                                                                                                                     | Whether the widget can enter fullscreen mode.
When true, a fullscreen toggle button appears in the header.                       |                |
-| `_isFullscreen`      | private | `boolean` | `false`                                                                                                                                                                                                     |                                                                                                                                      |                |
-| `_collapseTooltip`   | private |           | `new TooltipController(this, { target: 'button[data-tooltip="collapse"]', text: () => (this.collapsed ? 'Expand' : 'Collapse'), position: 'bottom', noArrow: true, offset: 'sm', })`                        |                                                                                                                                      |                |
-| `_fullscreenTooltip` | private |           | `new TooltipController(this, { target: 'button[data-tooltip="fullscreen"]', text: () => (this._isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'), position: 'bottom', noArrow: true, offset: 'sm', })` |                                                                                                                                      |                |
-| `isFullscreen`       |         | `boolean` |                                                                                                                                                                                                             | Whether the widget is currently in fullscreen mode (read-only).
Use \`btu-widget-fullscreen-changed\` event to react to changes. |                |
+| Name                 | Privacy | Type                | Default                                                                                                                                                                                                     | Description                                                                                                                          | Inherited From |
+| -------------------- | ------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
+| `_internals`         | private |                     |                                                                                                                                                                                                             |                                                                                                                                      |                |
+| `heading`            |         | `string`            | `''`                                                                                                                                                                                                        | Heading text displayed in the header.                                                                                                |                |
+| `collapsible`        |         | `boolean`           | `false`                                                                                                                                                                                                     | Whether the widget can be collapsed/expanded.
When true, a chevron toggle button appears in the header.                          |                |
+| `collapsed`          |         | `boolean`           | `false`                                                                                                                                                                                                     | Whether the widget is currently collapsed.
When true, body and footer are hidden. Implies collapsible.                           |                |
+| `fullscreenable`     |         | `boolean`           | `false`                                                                                                                                                                                                     | Whether the widget can enter fullscreen mode.
When true, a fullscreen toggle button appears in the header.                       |                |
+| `_isFullscreen`      | private | `boolean`           | `false`                                                                                                                                                                                                     |                                                                                                                                      |                |
+| `_collapseTooltip`   | private |                     | `new TooltipController(this, { target: 'button[data-tooltip="collapse"]', text: () => (this.collapsed ? 'Expand' : 'Collapse'), position: 'bottom', noArrow: true, offset: 'sm', })`                        |                                                                                                                                      |                |
+| `_fullscreenTooltip` | private |                     | `new TooltipController(this, { target: 'button[data-tooltip="fullscreen"]', text: () => (this._isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'), position: 'bottom', noArrow: true, offset: 'sm', })` |                                                                                                                                      |                |
+| `isFullscreen`       |         | `boolean`           |                                                                                                                                                                                                             | Whether the widget is currently in fullscreen mode (read-only).
Use \`btu-widget-fullscreen-changed\` event to react to changes. |                |
+| `#stopFns`           | private | `Array<() => void>` | `[]`                                                                                                                                                                                                        |                                                                                                                                      | OnFindMixin    |
 
 ### Methods
 
-| Name   | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
-| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
-| `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 |
+| Name                 | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return                                               | Inherited From    |
+| -------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------- | ----------------- |
+| `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 |
+| `onFindRegistration` |         |                                                                                                                                                                                                                                                                                    |                                                         | `OnFindRegistration \| OnFindRegistration[] \| null` | OnFindMixin       |
+| `#armFind`           | private |                                                                                                                                                                                                                                                                                    |                                                         |                                                      | OnFindMixin       |
 
 ### Events
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "5.0.4-pre.20260624",
+  "version": "5.2.0",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
@@ -21,7 +21,6 @@
     "cem:watch": "cem analyze --litelement --watch",
     "cem:docs": "yarn cem && node scripts/generate-docs.mjs",
     "build": "yarn clean && tsc --noEmitOnError && yarn cem && node scripts/copy-component-css.mjs && shx cp ./src/*.ts ./dist && shx rm ./dist/tailwind.storybook.config* && shx rm -Rf ./dist/stories",
-    "build:cms-ui": "yarn build && (cd src/legacy/tool-ui && yarn install --frozen-lockfile && yarn build) && (cd tool-ui && yarn install && yarn build)",
     "prepack": "yarn build && yarn build-storybook && (cd src/legacy/tool-ui && yarn build)",
     "storybook": "yarn cem && storybook dev -p 6006",
     "build-storybook": "yarn cem && storybook build -o ./dist/storybook",
@@ -80,6 +79,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "broadcast-channel": "^4.13.0",
     "loglevel": "^1.8.0",
+    "lottie-web": "^5.13.0",
     "lucide-static": "0.508.0",
     "tabbable": "6.2.0",
     "tailwindcss": "^3.4.13",

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

@@ -43,7 +43,7 @@
     @apply m-0 p-0;
 
     > button {
-      @apply flex w-full cursor-pointer items-center gap-1 rounded px-3 py-2 text-start text-sm text-gray-900 hover:bg-gray-100;
+      @apply flex w-full cursor-pointer items-center gap-1 px-3 py-2 text-start text-sm text-gray-900 hover:bg-gray-100;
     }
   }
 }

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

@@ -26,7 +26,7 @@
     > .CIG-large
     > .RCIG-list
     > li
-    > :where(.RCIG-remove, btu-dropdown) {
+    > :where(.RCIG-remove, btu-legacy-dropdown) {
     @apply hidden;
   }
 }

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

@@ -137,7 +137,7 @@
     &:not(.has-dropdown-actions) {
       @apply grid-cols-[1fr];
 
-      > btu-dropdown {
+      > btu-legacy-dropdown {
         @apply hidden;
       }
 

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

@@ -185,7 +185,7 @@
   }
 
   > .RCIG-remove,
-  > btu-dropdown {
+  > btu-legacy-dropdown {
     @apply hidden;
   }
 }

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

@@ -278,7 +278,10 @@
       .AuthorPersona-title,
       .ContentEdit-workflowTitle,
       .PrePublishPopup .Widget-title,
-      .Widget.is-collapsible .Widget-title
+      .Widget.is-collapsible .Widget-title,
+      /* Don't hide heading elements that are editable rich text content
+         (e.g. an H3 rich text element inside the RTE). */
+      .ProseMirror *
     ) {
     @apply !hidden;
   }

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

@@ -17,7 +17,7 @@
   @apply grid grid-cols-[1fr_repeat(4,auto)] grid-rows-[minmax(2.75rem,_auto)_1fr] items-center gap-x-2; /* minmax used to set the initial height of the RCIG-item to reduce shift while loading. */
 
   /* Accounts for fewer RCIG actions */
-  &:not(:has(> btu-dropdown)),
+  &:not(:has(> btu-legacy-dropdown)),
   &:not(.MultiSortable) {
     @apply grid-cols-[1fr_repeat(3,auto)];
   }
@@ -147,7 +147,7 @@
   @apply invisible;
 }
 
-.RCIG-item:has(> btu-dropdown) {
+.RCIG-item:has(> btu-legacy-dropdown) {
   .Dropdown-button {
     @apply btu-button-xs bg-white touch-device:btu-button-sm;
 
@@ -160,7 +160,7 @@
     @apply Dropdown-is-open;
   }
 
-  & > btu-dropdown :where(.RCIG-swap, .copyButton, .convertButton) {
+  & > btu-legacy-dropdown :where(.RCIG-swap, .copyButton, .convertButton) {
     @apply visible before:btu-icon before:me-2;
   }
 

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

@@ -148,7 +148,16 @@ onFind('.searchFiltersType', (element) => {
     ? document.querySelector('.Page-search input[name="q"]')
     : element.nextElementSibling?.querySelector('input[name="q"]')
 
-  if (targetQuery && targetQuery instanceof HTMLInputElement) {
+  // Only seed the sticky value into an empty, unfocused field so we never
+  // overwrite text the user has typed. This re-fires on every search frame
+  // reload; without the guard a reload overwrites the field with the saved
+  // (possibly empty) query and discards what the user just typed.
+  if (
+    targetQuery &&
+    targetQuery instanceof HTMLInputElement &&
+    !targetQuery.value &&
+    document.activeElement !== targetQuery
+  ) {
     targetQuery.value = sourceQuery.value
   }
 })

package/src/legacy/tool-ui/src/dropdown/index.ts

@@ -3,7 +3,7 @@ import { customElement, queryAsync, property } from 'lit/decorators.js'
 import { EventEmitterMixin } from '../EventEmitterMixin'
 import { setupMenuForAria, toggleMenu } from '../dom/popupMenu'
 
-@customElement('btu-dropdown')
+@customElement('btu-legacy-dropdown')
 export default class Dropdown extends EventEmitterMixin(LitElement) {
   @queryAsync('.Dropdown-container')
   _dropdownContainer?: Promise<HTMLElement>
@@ -100,6 +100,6 @@ export default class Dropdown extends EventEmitterMixin(LitElement) {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'btu-dropdown': Dropdown
+    'btu-legacy-dropdown': Dropdown
   }
 }