@brightspot/ui 6.1.2-pr.275 → 6.3.0

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

@@ -10,7 +10,7 @@ html::view-transition-group(prosemirror-enhancement) {
   }
 
   &.block.readOnly {
-    @apply grid grid-cols-[1fr_auto] gap-2 rounded-lg border p-2 [grid-template-areas:'label_menu''preview_preview'] hover:border-gray-300 hover:bg-gray-50;
+    @apply grid h-auto grid-cols-[1fr_auto] gap-2 rounded-lg border p-2 [grid-template-areas:'label_menu''preview_preview'] hover:border-gray-300 hover:bg-gray-50;
   }
 
   &:where(.readOnly.ProseMirror-selectednode) {
@@ -28,7 +28,8 @@ html::view-transition-group(prosemirror-enhancement) {
   @apply flex gap-2 py-1 text-sm font-medium text-gray-900;
 }
 
-.Enhancement-preview {
+.Enhancement-preview,
+.Enhancement-initialBody {
   @apply [grid-area:preview];
 }
 

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

@@ -920,6 +920,17 @@ onFind('.ProfileDropdown-items', (items: HTMLElement) => {
   items.closest('.Widget')?.classList.add('has-profileDropdown')
 })
 
+// Lets Widget.css row out buttons with no ActionBar collecting them, without a :has() on the form.
+onFind(
+  ['.Widget > form > .Button', '.Widget > form > .fixedScrollable > .Button'],
+  (button: HTMLElement) => {
+    const form = button.parentElement
+    if (form && !form.querySelector(':scope > .ActionBar')) {
+      form.classList.add('has-looseButtons')
+    }
+  },
+)
+
 onFind('.Widget-controls', (controls: HTMLElement) => {
   const widget = controls.closest<HTMLElement>('.Widget')
   if (!widget) return

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

@@ -1,5 +1,5 @@
 .FileInput {
-  @apply relative flex cursor-pointer flex-col items-center gap-3 rounded-lg border border-gray-300 px-6 py-4 before:btu-icon before:btu-icon-upload before:rounded-full before:bg-gray-100 before:p-2 before:text-primary-700 after:text-sm after:font-semibold after:text-primary-700 after:[content:attr(data-choose)] hover:border-gray-300 hover:bg-gray-100 hover:before:bg-gray-200 hover:before:text-gray-700 hover:after:underline hover:after:[content:attr(data-choose)];
+  @apply relative flex max-w-[540px] cursor-pointer flex-col items-center gap-3 rounded-lg border border-gray-300 px-6 py-4 before:btu-icon before:btu-icon-upload before:rounded-full before:bg-gray-100 before:p-2 before:text-primary-700 after:text-sm after:font-semibold after:text-primary-700 after:[content:attr(data-choose)] hover:border-gray-300 hover:bg-gray-100 hover:before:bg-gray-200 hover:before:text-gray-700 hover:after:underline hover:after:[content:attr(data-choose)];
 
   input[type='file'] {
     @apply absolute bottom-0 left-0 right-0 top-0 cursor-pointer border-0 p-0 opacity-0;

package/src/legacy/tool-ui/src/Global.d.ts

@@ -87,10 +87,13 @@ declare global {
           imageHeight: string
           imageHeightOpen: string
           imageHeightClose: string
+          chartNoData: string
           fieldSelect: string
           fieldHide: string
           filtersHide: string
           filtersShow: string
+          formFilterNoResults: string
+          formFilterPlaceholder: string
           focusTrapHint: string
           fullScreen: string
           fullScreenSearch: string

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

@@ -18,11 +18,11 @@
   --guide-title-h: calc(var(--guide-edit-icon-size) + theme(padding.6));
   --guide-controls-w: calc(2 * var(--guide-edit-icon-size) + theme(padding.8));
 
-  @apply btu-heading-4 relative h-[var(--guide-title-h)] truncate border-b border-b-gray-200 bg-gray-50 py-3.5 pl-4 pr-[var(--guide-controls-w)] text-gray-900;
+  @apply btu-heading-4 relative h-[var(--guide-title-h)] truncate border-b border-b-gray-200 bg-gray-50 py-3.5 ps-4 pe-[var(--guide-controls-w)] text-gray-900;
 }
 
 .Guide-controls {
-  @apply absolute right-4 top-3 flex items-center gap-2;
+  @apply absolute end-4 top-3 flex items-center gap-2;
 }
 
 .Guide-edit {
@@ -104,15 +104,15 @@
 }
 
 .Guide-embedded {
-  @apply relative ml-2.5 pl-2.5 shadow-[-1px_0_0_theme(colors.gray.300)];
+  @apply relative ms-2.5 ps-2.5 shadow-[-1px_0_0_theme(colors.gray.300)] rtl:shadow-[1px_0_0_theme(colors.gray.300)];
 
   > .Guide-edit {
-    @apply absolute right-0 top-[calc(0px-var(--guide-edit-icon-size)-0.5rem-1px)];
+    @apply absolute end-0 top-[calc(0px-var(--guide-edit-icon-size)-0.5rem-1px)];
   }
 
   .Guide-field,
   .Guide-description {
-    @apply pl-1 pr-0;
+    @apply ps-1 pe-0;
   }
 
   .Guide-tabCluster {

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

@@ -79,7 +79,7 @@
 .is-imagePreview {
   --icon-button-w: 37px;
 
-  @apply relative grid max-w-[calc(360px-theme(spacing.8))] items-center overflow-hidden [grid-template-areas:'preview_preview_preview''groups_open_edit''message_message_message'] [grid-template-columns:calc(100%-var(--icon-button-w)*2)_auto_auto] before:relative before:h-full before:rounded-t-lg before:border before:border-b-0 before:border-gray-300 before:[grid-area:preview];
+  @apply relative w-fit grid items-center overflow-hidden [grid-template-areas:'preview_preview_preview''groups_open_edit''message_message_message'] [grid-template-columns:calc(100%-var(--icon-button-w)*2)_auto_auto] before:relative before:h-full before:rounded-t-lg before:border before:border-b-0 before:border-gray-300 before:[grid-area:preview];
 }
 
 .ImageEditor-editToggle,

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

@@ -27,6 +27,10 @@
     --link-h-min: calc(theme(lineHeight.4) + theme(spacing.2));
 
     @apply flex max-h-[--link-h-max] min-h-[--link-h-min] items-center rounded-lg;
+
+    &:not(:first-child) {
+      @apply mt-2;
+    }
   }
 
   > li.Message {

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

@@ -1,5 +1,5 @@
 .objectId-edit-heading {
-  @apply btu-button btu-button-fill-none btu-button-primary blokk truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
+  @apply btu-button btu-button-fill-none btu-button-primary blokk truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left rtl:before:btu-icon-arrow-right before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
 }
 
 .Grid:has(.LiveBlogGrid),
@@ -15,7 +15,7 @@
 }
 
 .LiveBlogPostList-open {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute top-[calc(var(--page-broadcast-h)+var(--page-broadcastAlert-h)_+_52px_+_theme(spacing.2))] z-[1] before:btu-icon before:btu-icon-chevron-left md:hidden;
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute top-[calc(var(--page-broadcast-h)+var(--page-broadcastAlert-h)_+_52px_+_theme(spacing.2))] z-[1] before:btu-icon before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right md:hidden;
 }
 
 .LiveBlogGrid:not(.is-visible) .LiveBlogPostList-open {

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

@@ -20,7 +20,7 @@
   > ul {
     --ProseMirror-toolbar-h: calc(theme(spacing.4) + theme(lineHeight.6));
 
-    @apply relative inline-flex h-[var(--ProseMirror-toolbar-h)] w-full flex-wrap items-center gap-y-3 overflow-clip py-2 pr-[calc(var(--ProseMirrorToolbar-rightControls)+var(--ProseMirror-wordCount)+var(--iconSize-xs))] ps-3;
+    @apply relative inline-flex h-[var(--ProseMirror-toolbar-h)] w-full flex-wrap items-center gap-y-3 overflow-clip py-2 pe-[calc(var(--ProseMirrorToolbar-rightControls)+var(--ProseMirror-wordCount)+var(--iconSize-xs))] ps-3;
 
     .rte2-toolbar-submenu-2,
     .rte2-toolbar-separator,
@@ -44,12 +44,17 @@
 
   /* SUBMENUS */
   .rte2-toolbar-submenu-2 {
-    &:not(
-        [data-rte-toolbar-submenu='Format'],
-        [data-rte-toolbar-submenu='Embed'],
-        [data-rte-toolbar-submenu='Substitutions']
+    /* Only these render an icon (or a bare chevron) instead of their name, so only these
+       can afford to collapse the label. Every other submenu name reaches the DOM verbatim
+       from @RichTextElement.Tag(menu = ...) and has no icon, so hiding it leaves nothing.
+       :is() rather than :where() to keep the specificity the sibling rule below assumes. */
+    &:is(
+        [data-rte-toolbar-submenu='Style'],
+        [data-rte-toolbar-submenu='Align'],
+        [data-rte-toolbar-submenu='Enhancements']
       )
-      > button {
+      > button,
+    &.rte-overflow-btn > button {
       @apply btu-button-text-hidden;
     }
 
@@ -119,7 +124,8 @@
   }
 
   .CIG-wordCount {
-    @apply absolute end-3 top-1.5 z-10 opacity-100;
+    /* pointer-events-none keeps the status box from swallowing clicks meant for the overflow button beneath it */
+    @apply pointer-events-none absolute end-3 top-1.5 z-10 opacity-100;
 
     /* Override inline styles from JS */
     @apply [--ProseMirror-wordCountSpacingWithOneIcon:52px] [--ProseMirror-wordCountSpacingWithThreeIcons:120px] [--ProseMirror-wordCountSpacingWithTwoIcons:85px];

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

@@ -34,16 +34,11 @@
   }
 
   a {
-    @apply order-3 ms-auto font-semibold text-[--link-color] decoration-solid decoration-auto max-md:ms-0;
+    @apply order-3 font-semibold text-[--link-color] decoration-solid decoration-auto;
   }
 
-  /* The Message-icon is always JS-appended last (see Message.js), so a leading anchor means the
-     message is just an icon + a bare link (e.g. Book Outline's link, ToolUser's password reset
-     link) - it should hug the icon now that the bar is full width, not drift to the far end.
-     Messages with real content before the link (e.g. a heading + a "view results" link) are
-     unaffected and keep the link pinned to the end. */
-  > a:first-child {
-    @apply ms-0;
+  .ContentEdit-revisionActions, .WorkInProgressRestoredMessage-actions a, .Message-returnToDashboard {
+    @apply ms-auto max-md:ms-0;
   }
 
   .is-emphasis {
@@ -174,7 +169,7 @@
   }
 
   a {
-    @apply order-[0] ms-0;
+    @apply order-[0];
   }
 
   .ComboInput {

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

@@ -67,7 +67,7 @@
 }
 
 .Page-broadcastAlert {
-  @apply flex max-h-[--page-broadcastAlert-h] border-b border-b-error-200 bg-error-25 p-4 text-sm leading-4 text-error-600 before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)] md:col-span-full;
+  @apply flex items-center h-[--page-broadcastAlert-h] border-b border-b-error-200 bg-error-25 px-4 text-sm leading-4 text-error-600 before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)] md:col-span-full;
 }
 
 .Page-broadcastAlert a {
@@ -75,7 +75,7 @@
 }
 
 .Page-broadcastAlert-messages {
-  @apply me-auto overflow-y-hidden overflow-x-scroll;
+  @apply me-auto h-full py-4 overflow-y-hidden overflow-x-auto [scrollbar-width:thin];
 }
 
 .Page-broadcastAlert .pagination {
@@ -101,7 +101,7 @@
 }
 
 .Page-broadcast {
-  @apply max-h-[--page-broadcast-h] overflow-y-hidden overflow-x-scroll border-b border-b-warning-200 bg-warning-25 p-4 text-sm leading-4 text-warning-700 [--link-color:theme(colors.warning.800)] before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-warning-800 md:col-span-full;
+  @apply max-h-[--page-broadcast-h] overflow-y-hidden overflow-x-auto [scrollbar-width:thin] border-b border-b-warning-200 bg-warning-25 p-4 text-sm leading-4 text-warning-700 [--link-color:theme(colors.warning.800)] before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-warning-800 md:col-span-full;
 
   /*
     Submitting a form inside a broadcast (Ex: Stop scheduling)
@@ -161,11 +161,12 @@
 
   > a {
     @apply grid auto-cols-[0px] grid-flow-col grid-cols-[max-content] items-center justify-center rounded-lg text-[0] @[80px]:grid-cols-[max-content_minmax(0,1fr)_max-content] max-md:grow;
+  }
 
-    /* Displays site name if site switcher is missing (e.g. user has access to only 1 site) */
-    .Page-siteName {
-      @apply hidden @[80px]:col-[2/3] @[80px]:line-clamp-1 @[80px]:blokk @[80px]:truncate @[80px]:px-2 @[80px]:text-sm;
-    }
+  /* Displays site name when no site switcher is present; at .Page-title level (not nested under
+     > a) because v5.ts moves .toolUserSite into .Page-title as a sibling of > a */
+  .Page-siteName {
+    @apply hidden @[80px]:col-[2/3] @[80px]:line-clamp-1 @[80px]:blokk @[80px]:truncate @[80px]:px-2 @[80px]:text-sm;
   }
 
   > a:hover a[target='siteSwitch'] {
@@ -232,8 +233,30 @@
 }
 
 .Page-header {
-  @apply flex w-full items-center justify-end overflow-hidden border-b bg-white p-4 text-gray-700 max-md:gap-4 md:h-[var(--page-header-h)] md:flex-nowrap md:@container/page-header;
+  @apply flex w-full items-center justify-end overflow-hidden border-b p-4 text-[var(--Page-header-fg,theme(colors.gray.700))] max-md:gap-4 md:h-[var(--page-header-h)] md:flex-nowrap md:@container/page-header;
   grid-area: header;
+  /* Defaults to the original `bg-white` token; overridden by the V5 custom header color. */
+  background-color: var(--Page-header-bg, var(--btu-theme-white));
+  /*
+    srgb-linear (not oklch) so r/g/b are linear-light and 0.2126r+0.7152g+0.0722b is true WCAG
+    luminance — the black/white flip is then correct at any saturation. 0.198 is the white↔#171717
+    (≈linear 0.0086) crossover; *100000 makes the clamp a hard step. Unset --Page-header-bg makes
+    this invalid on purpose, so .Page-header falls back to gray-700. Needs relative-color syntax:
+    Chrome 119 / Safari 16.4 / Firefox 128.
+  */
+  --Page-header-fg: color(from var(--Page-header-bg) srgb-linear
+    clamp(0.0086, (0.198 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
+    clamp(0.0086, (0.198 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
+    clamp(0.0086, (0.198 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
+}
+
+/*
+  currentColor so the icons follow the header's derived fg (gray-700 by default). Kept a low-
+  specificity element selector on purpose: the button component's per-state hover/pressed tokens
+  must still win over this rest-state override.
+*/
+.Page-header button {
+  --button-fill-none-text-color: currentColor;
 }
 
 .Page-header > * {
@@ -901,7 +924,7 @@
 }
 
 .Page-create .ComboInput-label {
-  --button-border-radius: 50%;
+  --button-border-radius: .5rem;
   @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-plus;
 }
 

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

@@ -335,10 +335,27 @@
 }
 
 .Popup[name^='conversation-'],
-.Popup[name='toolUserSaveSearch'] {
+.Popup[name='toolUserSaveSearch'],
+.Popup[name='contentReportingStatus'],
+.Popup.is-contentReportingStatus {
   @apply [--popup-h:auto];
 }
 
+/* Report status download bar and form fields sit directly in the frame
+   (outside a Widget grid), so they need their own inset. The is-* class covers
+   the same page opened through the Past Report Results view popup, which uses
+   a generic objectId-edit frame (marked by ContentReporting.js). */
+.Popup[name='contentReportingStatus'] .frame,
+.Popup.is-contentReportingStatus .frame {
+  > .ContentReporting-status {
+    @apply pt-6;
+  }
+
+  > .CIG {
+    @apply px-6 pb-6;
+  }
+}
+
 /* Available schedules popup */
 .frame[name='scheduleList'] {
   ul {

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

@@ -1,7 +1,7 @@
 .ProseMirror {
   --ProseMirror-numLines: 10;
 
-  @apply min-h-[calc(var(--ProseMirror-numLines)*theme(lineHeight.4))] whitespace-pre-wrap rounded-b-lg px-4 py-[var(--lineHeight-m)] focus:[box-shadow:none];
+  @apply min-h-[calc(var(--ProseMirror-numLines)*theme(lineHeight.4))] whitespace-pre-wrap rounded-b-lg px-4 py-[var(--lineHeight-m)] leading-[normal] focus:[box-shadow:none];
 }
 
 :where(.ProseMirror-fullscreen-container) {

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

@@ -61,7 +61,7 @@
   }
 
   .RCIG-item > & {
-    @apply after:btu-icon after:btu-icon-chevron-up after:absolute after:right-2 after:top-2 after:ms-auto after:size-7 after:shrink-0 after:items-center after:justify-center after:rounded-lg after:bg-white;
+    @apply after:btu-icon after:btu-icon-chevron-up after:absolute after:end-2 after:top-2 after:ms-auto after:size-7 after:shrink-0 after:items-center after:justify-center after:rounded-lg after:bg-white;
   }
 
   .RCIG-item.is-collapsed > &,
@@ -316,11 +316,11 @@
 
       > .ContentSelector-edit,
       > .ContentSummary-info {
-        @apply overflow-visible after:absolute after:-left-1 after:-top-[5px] after:h-9 after:w-px after:bg-gray-200 touch-device:after:-bottom-0 touch-device:after:top-0 touch-device:after:h-[unset] more-contrast:bg-gray-400;
+        @apply overflow-visible after:absolute after:-start-1 after:-top-[5px] after:h-9 after:w-px after:bg-gray-200 touch-device:after:-bottom-0 touch-device:after:top-0 touch-device:after:h-[unset] more-contrast:bg-gray-400;
       }
 
       > .ContentSelector-search {
-        @apply col-start-2 before:right-0 before:top-0 touch-device:before:right-auto touch-device:before:top-auto;
+        @apply col-start-2 before:end-0 before:top-0 touch-device:before:end-auto touch-device:before:top-auto;
 
         > span {
           @apply hidden;
@@ -362,7 +362,7 @@
       }
 
       .ContentSelector-search {
-        @apply row-start-1 before:absolute before:right-[calc(theme(size.9)*2_+_theme(spacing.1))] before:top-[calc(144px_+_theme(spacing.1))];
+        @apply row-start-1 before:absolute before:end-[calc(theme(size.9)*2_+_theme(spacing.1))] before:top-[calc(144px_+_theme(spacing.1))];
       }
 
       .ContentSelector-search figure {
@@ -380,7 +380,7 @@
         [data-preview='']
       )
       + .ContentSelector-search {
-      @apply h-[calc(9rem+1px)] w-full max-w-none overflow-visible rounded-none border-b border-solid border-b-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:btu-button-sm before:absolute before:right-1 before:top-full before:mt-[5px];
+      @apply h-[calc(9rem+1px)] w-full max-w-none overflow-visible rounded-none border-b border-solid border-b-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:btu-button-sm before:absolute before:end-1 before:top-full before:mt-[5px];
 
       + .ContentSelector-edit {
         @apply hidden;

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

@@ -102,7 +102,7 @@
 }
 
 .Revisions-compare {
-  @apply btu-button-text-hidden before:btu-icon before:btu-icon-arrow-right;
+  @apply btu-button-text-hidden before:btu-icon before:btu-icon-arrow-right rtl:before:btu-icon-arrow-left;
 }
 
 .Revisions-listItem.is-parentRevision {
@@ -239,11 +239,15 @@
 }
 
 .Revisions-workflowTransition .Revisions-userLabel {
-  @apply text-xs font-medium text-gray-500;
+  @apply inline;
+}
+
+.Revisions-workflowTransition .Revisions-userLabel::before {
+  @apply content-['_'];
 }
 
 .Revisions-workflowTransition .Revisions-userLabel > span {
-  @apply me-0.5 min-w-max;
+  @apply me-0.5;
 }
 
 .Revisions-workflowComment {
@@ -255,7 +259,7 @@
 }
 
 .Revisions-workflowStateIcon {
-  @apply grid cursor-auto place-items-center before:btu-icon before:btu-icon-arrow-right before:font-semibold before:text-gray-500 before:btu-icon-xs;
+  @apply grid cursor-auto place-items-center before:btu-icon before:btu-icon-arrow-right rtl:before:btu-icon-arrow-left before:font-semibold before:text-gray-500 before:btu-icon-xs;
 }
 
 /* Adjustments to Guide styles within a Popup (ie, Sites history) */

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

@@ -88,13 +88,13 @@
 
 /* Override input styles so they appear as arrow buttons */
 .SearchFields-sort-item-label input.SearchFields-input {
-  @apply btu-button btu-button-text-hidden !btu-button-fill-none btu-button-gray btu-button-xs shrink-0 border-none before:btu-icon before:btu-icon-circle-arrow-right touch-device:btu-button-sm after:hidden;
+  @apply btu-button btu-button-text-hidden !btu-button-fill-none btu-button-gray btu-button-xs shrink-0 border-none before:btu-icon before:btu-icon-circle-arrow-right rtl:before:btu-icon-circle-arrow-left touch-device:btu-button-sm after:hidden;
 }
 
 .SearchFields-displayContainer
   .SearchFields-sort-item-label
   input.SearchFields-input {
-  @apply before:btu-icon-circle-arrow-left;
+  @apply before:btu-icon-circle-arrow-left rtl:before:btu-icon-circle-arrow-right;
 }
 
 .SearchFields-sort-item-span {

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

@@ -1,17 +1,8 @@
-/*
- * Dialog.css assigns grid-template-rows: subgrid to all .has-ActionBarContent elements
- * via a deeply-nested selector at specificity (0,4,1). The Advanced Query Builder form
- * needs its own 4-row grid (header | scrollpane | 1fr spacer | ActionBar), so !important
- * is the only way to override it from outside Dialog.css.
- */
-.SearchWidgetAdvanced > form.has-ActionBarContent {
-  grid-template-rows: min-content min-content 1fr min-content !important;
-  align-items: stretch;
-  height: 100%;
-}
-
 .SearchWidgetAdvanced > form {
-  @apply pt-6;
+  /* 4-row grid: header | scrollpane | 1fr spacer | ActionBar. Columns come
+     from the Widget grid; Dialog.css exempts this widget from its popup
+     column layout so the grid here stays in charge. */
+  @apply col-[fullbleed-start/fullbleed-end] grid h-full grid-cols-subgrid items-stretch pt-6 [grid-template-rows:min-content_min-content_1fr_min-content];
 
   /* Explicit row assignments for the 4-row grid above.
    * Row 1: header (ComboInput + add button side by side)

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

@@ -152,10 +152,10 @@
 }
 
 .TabBar-item.is-error a {
-  --tabitem-padding-right: calc(
+  --tabitem-padding-end: calc(
     theme(gap.2) + theme(iconSize.md) + theme(padding[1.5])
   );
-  @apply -mr-[--tabitem-padding-right] pr-[--tabitem-padding-right];
+  @apply -me-[--tabitem-padding-end] pe-[--tabitem-padding-end];
 }
 
 /* Account for different structure of dashboard tabs */

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

@@ -168,7 +168,7 @@
   &:has(> .TC, > .CIG, > .SearchInput, > .ActionBar) {
     @apply grid grid-cols-subgrid [grid-column:fullbleed-start_/_fullbleed-end];
 
-    & > :not(.ActionBar, .Widget-controls, .Message) {
+    & > :not(.ActionBar, .Widget-controls, .Message, .Button) {
       @apply px-0 [grid-column:content-start_/_content-end];
     }
   }
@@ -178,6 +178,25 @@
   }
 }
 
+/* Keeps loose buttons at intrinsic width in the content column; inert once the form is flex. */
+.Widget > form > .Button,
+.Widget > form > .fixedScrollable > .Button {
+  @apply justify-self-start [grid-column:content-start_/_content-end];
+}
+
+/* Grid gives each child its own row; flex lets loose buttons flow. content-start keeps wrap lines
+   together when the widget is taller than its content. Class is stamped in Entry.ts — a :has()
+   would nest in the grid block above, which is re-emitted per `@apply Widget` consumer. The class
+   is doubled to outrank that block. */
+.Widget > form.has-looseButtons.has-looseButtons,
+.Widget > form > .fixedScrollable.has-looseButtons.has-looseButtons {
+  @apply flex flex-wrap content-start items-center gap-2 px-[--space] pb-[--space];
+
+  > :not(.Button) {
+    @apply basis-full;
+  }
+}
+
 /* Provide a matching gap at the bottom of scrollable widgets with a CIG at the end */
 .Widget > .StandardForm .CIG:not(+ .ActionBar),
 .Widget > form > .fixedScrollable > .CIG:last-child {
@@ -433,7 +452,7 @@ btu-widget.SearchWidget-create {
 }
 
 .fixedScrollable .CIG-row {
-  @apply after:left-[calc(1px_-_var(--CIG-padding))];
+  @apply after:start-[calc(1px_-_var(--CIG-padding))];
 }
 
 /* ContentEditDrawer Widget (The Shelf) */
@@ -448,6 +467,14 @@ btu-widget.SearchWidget-create {
   @apply bg-gray-50;
 }
 
+.Widget[data-internal-name='com.psddev.cms.tool.content.ReferencesWidget'] {
+  > p {
+    > a.icon-action-search {
+      @apply my-4 w-full btu-button btu-button-outline btu-button-sm btu-button-gray btu-button-fill-none before:btu-icon before:btu-icon-search;
+    }
+  }
+}
+
 /* Translations Widget */
 .Widget[data-internal-name='com.psddev.translation.page.TranslationTab'] > * {
   @apply col-span-full;

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

@@ -308,14 +308,23 @@ export default class Dialog extends ComponentStatesMixin(
 
     popupContent.classList.add('has-ActionBar')
 
-    // Mark ancestors of ActionBars that have substantive content
     actionBars.forEach((actionBar) => {
+      // Mark ancestors of ActionBars that have substantive content
       const hasContent = actionBar.querySelector(
         ':scope > *:not(.ImageEditor-closeButton)',
       )
       if (hasContent) {
         this._markAncestors(actionBar, 'has-ActionBarContent', popupContent)
       }
+
+      // Mark the element immediately before an ActionBar
+      const previous = actionBar.previousElementSibling
+      const isPrePublishScrollable =
+        previous?.classList.contains('fixedScrollable') &&
+        previous.closest('.Widget.PrePublish')
+      if (previous && !isPrePublishScrollable) {
+        previous.classList.add('before-ActionBar')
+      }
     })
 
     // Mark ancestors of status messages
@@ -326,23 +335,6 @@ export default class Dialog extends ComponentStatesMixin(
     messages.forEach((message) => {
       this._markAncestors(message, 'has-StatusMessage', dialog)
     })
-
-    // Mark elements that appear immediately before an ActionBar
-    const candidates = this._findInScope(
-      scope,
-      'form, .TC, .AIChat-wrapper, .fixedScrollable',
-    )
-    candidates.forEach((element) => {
-      const isBeforeActionBar =
-        element.nextElementSibling?.classList.contains('ActionBar')
-      const isPrePublishScrollable =
-        element.classList.contains('fixedScrollable') &&
-        element.closest('.Widget.PrePublish')
-
-      if (isBeforeActionBar && !isPrePublishScrollable) {
-        element.classList.add('before-ActionBar')
-      }
-    })
   }
 
   private async _handleClose(e?: Event): Promise<void> {

package/src/legacy/tool-ui/src/form/FormFilter/index.ts

@@ -17,10 +17,10 @@ export default class FormFilter extends LitElement {
   static noFilterTypes = new Set(['option', 'textarea'])
 
   @property()
-  noMatches = 'No Results!'
+  noMatches = window.BRIGHTSPOT?.ui?.tooltips?.formFilterNoResults ?? 'No Results!'
 
   @property()
-  placeholder = 'Find in form'
+  placeholder = window.BRIGHTSPOT?.ui?.tooltips?.formFilterPlaceholder ?? 'Find in form'
 
   @property()
   selector = 'form > .CIG'

package/src/legacy/tool-ui/src/main/webapp/dist/2111.5d43fec84fea624d6371.css

@@ -0,0 +1 @@
+.ProseMirror{--ProseMirror-numLines:10;min-height:calc(var(--ProseMirror-numLines) * 1.25rem);white-space:pre-wrap;line-height:normal}[dir] .ProseMirror{padding-top:var(--lineHeight-m);padding-bottom:var(--lineHeight-m)}[dir=ltr] .ProseMirror,[dir=rtl] .ProseMirror{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem;padding-left:1rem;padding-right:1rem}[dir] .ProseMirror:focus{box-shadow:none}:where(.ProseMirror-fullscreen-container){height:.25rem;overflow:hidden}.ProseMirror .rte2-style-bold{font-weight:700}.ProseMirror .rte2-style-italic{font-style:italic}.ProseMirror .rte2-style-underline{text-decoration-line:underline}.ProseMirror .rte2-style-strikethrough{text-decoration-line:line-through}[dir=ltr] .ProseMirror .cms-textAlign-left{text-align:left}[dir=rtl] .ProseMirror .cms-textAlign-left{text-align:right}[dir] .ProseMirror :where(.cms-textAlign-center,[dir] .rte2-style-align-center){text-align:center}[dir=ltr] .ProseMirror :where(.cms-textAlign-right,[dir=ltr] .rte2-style-align-right){text-align:right}[dir=rtl] .ProseMirror :where(.cms-textAlign-right,[dir=rtl] .rte2-style-align-right){text-align:left}.ProseMirror .rte2-style-subscript{bottom:-.25rem}.ProseMirror .rte2-style-subscript,.ProseMirror .rte2-style-superscript{position:relative;vertical-align:baseline;font-size:75%;line-height:0}.ProseMirror .rte2-style-superscript{top:-.5rem}.ProseMirror .rte2-style-brightspot-core-rte-heading-HeadingThree{font-size:1.125rem;line-height:1.75rem;font-weight:600}.ProseMirror .rte2-style-brightspot-core-rte-heading-HeadingTwo{font-size:1.5rem;line-height:2rem;font-weight:600}.ProseMirror :is(bsp-line,bsp-break){display:block}.ProseMirror :is(bsp-line,bsp-break):has(>.ProseMirror-trailingBreak){line-height:var(--lineHeight-m)}[dir] .ProseMirror :where(ul,[dir] ol):not(.Dropdown,[dir] .ProseMirror-tableSubmenuList){margin-top:1.25rem;margin-bottom:1.25rem}[dir=ltr] .ProseMirror :where(ul,[dir=ltr] ol):not(.Dropdown,[dir=ltr] .ProseMirror-tableSubmenuList){margin-left:2rem}[dir=rtl] .ProseMirror :where(ul,[dir=rtl] ol):not(.Dropdown,[dir=rtl] .ProseMirror-tableSubmenuList){margin-right:2rem}.ProseMirror ul{list-style-type:disc}.ProseMirror ul ul{list-style-type:circle}.ProseMirror ul ul ul{list-style-type:square}.ProseMirror ol{list-style-type:decimal}.ProseMirror ol ol{list-style-type:lower-alpha}.ProseMirror li{position:relative}.ProseMirror:has(+.ProseMirror-moveEnhancementOverlay){caret-color:transparent;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color)}[dir] .ProseMirror:has(+.ProseMirror-moveEnhancementOverlay){border-color:transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.ProseMirror:has(+.ProseMirror-moveEnhancementOverlay)>:not(.Enhancement.readOnly.ProseMirror-selectednode){opacity:.6}.ProseMirror:has(+.ProseMirror-moveEnhancementOverlay) .Enhancement.readOnly.ProseMirror-selectednode{--tw-border-opacity:1}[dir] .ProseMirror:has(+.ProseMirror-moveEnhancementOverlay) .Enhancement.readOnly.ProseMirror-selectednode{border-color:oklch(var(--btu-theme-primary-700)/var(--tw-border-opacity))}.ProseMirror:has(+.ProseMirror-moveEnhancementOverlay) .Enhancement.readOnly.ProseMirror-selectednode>*{opacity:.6}.ProseMirror .rte2-style-comment{gap:.5rem;--tw-bg-opacity:1;--tw-text-opacity:1;color:oklch(var(--btu-theme-primary-800)/var(--tw-text-opacity))}[dir] .ProseMirror .rte2-style-comment{border-radius:.25rem;background-color:oklch(var(--btu-theme-primary-50)/var(--tw-bg-opacity))}[dir=ltr] .ProseMirror .rte2-style-comment,[dir=rtl] .ProseMirror .rte2-style-comment{margin-left:.25rem;margin-right:.25rem;padding-left:.25rem;padding-right:.25rem}.ProseMirror .rte2-style-comment:before{font-family:lucide;display:inline-flex;font-feature-settings:"liga" 0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:var(--icon-size);font-style:normal;font-weight:400;letter-spacing:normal;line-height:var(--icon-size);text-transform:none;white-space:nowrap;word-wrap:normal;vertical-align:top;--tw-content:"\e116";padding-inline-end:.25rem;content:var(--tw-content);--icon-size:1.25rem}[dir=ltr] .ProseMirror .rte2-style-comment:before{direction:ltr}[dir=rtl] .ProseMirror .rte2-style-comment:before{direction:rtl}.ProseMirror .rte2-style-comment[data-collapse=true]:before{content:var(--tw-content);padding-inline-end:0}.ProseMirror .rte2-style-comment .collapsed{display:none}.is-locked .ProseMirror .rte2-style-comment{opacity:.6}.ProseMirror-comments{display:none}.rte2-style-ins-insert{--tw-bg-opacity:1;--tw-text-opacity:1;color:oklch(var(--btu-theme-success-900)/var(--tw-text-opacity));text-decoration-line:none}[dir] .rte2-style-ins-insert{background-color:oklch(var(--btu-theme-success-200)/var(--tw-bg-opacity))}.rte2-style-ins-insert .Enhancement{--tw-bg-opacity:1}[dir] .rte2-style-ins-insert .Enhancement{background-color:oklch(var(--btu-theme-success-50)/var(--tw-bg-opacity))}.rte2-style-ins-delete{--tw-bg-opacity:1;--tw-text-opacity:1;color:oklch(var(--btu-theme-error-900)/var(--tw-text-opacity))}[dir] .rte2-style-ins-delete{background-color:oklch(var(--btu-theme-error-200)/var(--tw-bg-opacity))}.rte2-style-ins-delete .Enhancement{--tw-bg-opacity:1;--tw-text-opacity:1;color:oklch(var(--btu-theme-error-600)/var(--tw-text-opacity))}[dir] .rte2-style-ins-delete .Enhancement{background-color:oklch(var(--btu-theme-error-50)/var(--tw-bg-opacity))}.rte2-style-ins-delete .ProsemirrorEnhancementMenu{display:none}[dir] .ProseMirror-previewMode .rte2-style-ins-insert,[dir] .ProseMirror-previewMode .rte2-style-ins-insert .Enhancement{background-color:transparent}.ProseMirror-previewMode .rte2-style-ins-delete{display:none}.ProseMirror-aiPreviewMode .rte2-style-ins-ai{--tw-bg-opacity:1;--tw-text-opacity:1;color:oklch(var(--btu-theme-purple-900)/var(--tw-text-opacity))}[dir] .ProseMirror-aiPreviewMode .rte2-style-ins-ai{background-color:oklch(var(--btu-theme-purple-100)/var(--tw-bg-opacity))}.ProseMirror-aiInlinePreviewMode .rte2-style-ai-inline-highlight{--tw-bg-opacity:1}[dir] .ProseMirror-aiInlinePreviewMode .rte2-style-ai-inline-highlight{background-color:oklch(var(--btu-theme-primary-50)/var(--tw-bg-opacity))}.ProseMirror-aiInlinePreviewMode .rte2-style-ai-inline-ins{--tw-bg-opacity:1;--tw-text-opacity:1;color:oklch(var(--btu-theme-primary-900)/var(--tw-text-opacity));text-decoration-line:none}[dir] .ProseMirror-aiInlinePreviewMode .rte2-style-ai-inline-ins{background-color:oklch(var(--btu-theme-primary-50)/var(--tw-bg-opacity))}.ProseMirror-aiInlinePreviewMode .rte2-style-ai-inline-del{--tw-bg-opacity:1;text-decoration-line:line-through}[dir] .ProseMirror-aiInlinePreviewMode .rte2-style-ai-inline-del{background-color:oklch(var(--btu-theme-gray-50)/var(--tw-bg-opacity))}.CIG-row:only-child.is-unlabeled[data-field=richText]{width:100%}