@brightspot/ui 6.2.0 → 6.3.1

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

@@ -1,5 +1,5 @@
 .CodeMirror {
-  @apply h-auto rounded-lg border border-gray-300 bg-white !text-gray-900 transition hover:bg-gray-100;
+  @apply h-auto rounded-lg border border-gray-300 !bg-white !text-gray-900 transition hover:!bg-gray-100;
 
   /*
     Bound :has() invalidation. CM mutates inner DOM per keystroke; without
@@ -16,11 +16,11 @@
 
 .CodeMirror-scrollbar-filler,
 .CodeMirror-gutter-filler {
-  @apply bg-white;
+  @apply !bg-white;
 }
 
 .CodeMirror-gutters {
-  @apply border-e-gray-300 bg-gray-50;
+  @apply !border-e-gray-300 !bg-gray-50;
 }
 
 .CodeMirror-linenumber {
@@ -28,23 +28,23 @@
 }
 
 .CodeMirror-guttermarker {
-  @apply text-gray-900;
+  @apply !text-gray-900;
 }
 
 .CodeMirror-guttermarker-subtle {
-  @apply text-gray-500;
+  @apply !text-gray-500;
 }
 
 .CodeMirror-cursor {
-  @apply border-s-[2px] border-s-primary-600;
+  @apply !border-s-[2px] !border-s-primary-600;
 }
 
 .CodeMirror div.CodeMirror-secondarycursor {
-  @apply border-s-gray-200;
+  @apply !border-s-gray-200;
 }
 
 .cm-fat-cursor .CodeMirror-cursor {
-  @apply bg-success-200;
+  @apply !bg-success-200;
 }
 
 .cm-fat-cursor-mark {
@@ -56,7 +56,7 @@
 }
 
 .CodeMirror-ruler {
-  @apply border-s-gray-200;
+  @apply !border-s-gray-200;
 }
 
 .cm-s-default .cm-header {

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

@@ -143,6 +143,10 @@
   @apply hidden;
 }
 
+.ComboInput-empty {
+  @apply px-4 py-2 text-sm text-gray-500;
+}
+
 /* Caps height of uninitialized ComboInputs */
 select {
   @apply max-h-[2.25rem];

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

@@ -385,6 +385,11 @@ suggests. Example use case "pin" icon button in live blog posts */
   }
 }
 
+/* Collapse edit-top-html container when empty so it doesn't reserve space above tabs. */
+.bsp-edit-top-html {
+  @apply empty:hidden;
+}
+
 /* v4 things which shouldn't appear in v5 */
 .v4-only {
   @apply hidden;

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

@@ -367,8 +367,9 @@
     @apply !blokk;
   }
 
+  /* Hug the device width (plus borders) when it fits so the iframe renders unscaled. */
   & .PreviewFrame-typeDisplay {
-    @apply [grid-area:preview] [grid-column:container-start/container-end];
+    @apply w-[min(100%,calc(var(--ContentEdit-previewWidth,100%)_+_2px))] justify-self-center [grid-area:preview] [grid-column:container-start/container-end];
   }
 
   & .PreviewFrame-typeControls .ComboInput:not(:has(~ .ComboInput)) {

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

@@ -171,12 +171,6 @@
     @apply w-full;
   }
 
-  /* min() replaces a @[312px]/CIG gate. Pixel-identical only while .CIG-row keeps
-    contain:inline-size - otherwise the 100% inflates intrinsic widths. */
-  > .CIG-small.inputSmall:not(.is-grid) {
-    @apply min-w-[min(312px,100%)] max-w-[540px] basis-1/2;
-  }
-
   /* Inside a layout with columns, unset the min width to prevent fields from 
   overlapping on smaller viewports. Set flex basis back to full so that the fields are not
   really small here. These will still get the max width of 540px. */
@@ -190,6 +184,10 @@
   }
 }
 
+.CIG .CIG-row:not([data-type="file"]) > .CIG-small.inputSmall:not(.is-grid) {
+  @apply min-w-[min(312px,100%)] max-w-[540px] basis-1/2;
+}
+
 .CIG-large,
 .CIG-small {
   --CIG-space: 0.375rem;

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

@@ -194,7 +194,13 @@ dialog:modal > .QueryField-frame > .Popup:where(:not([popover])) {
     }
   }
 
-  /* Fix the ActionBar to the bottom of the modal. */
+  /* Fix the ActionBar to the bottom of the modal.
+     One layout for every popup body: the frame scrolls, the wrappers between
+     it and the ActionBar (has-ActionBarContent) stretch as plain columns, and
+     the bar pins to the bottom with mt-auto while staying visible during
+     scroll (sticky). This works for any child count or nesting depth, unlike
+     the row subgrid it replaces. SearchFields, SearchWidgetAdvanced, and
+     PostPublish own their internal layouts and only join the outer column. */
   &:where(
       :not(
           [name='toolUserTfa'],
@@ -204,38 +210,79 @@ dialog:modal > .QueryField-frame > .Popup:where(:not([popover])) {
         )
     )
     .Popup-content:where(.has-ActionBar:not(.has-AdminNav, .is-editing)) {
-    @apply grid-rows-[[title]_max-content_[main]_1fr_max-content_[action-bar]];
-
-    &.has-StatusMessage {
-      @apply grid-rows-[[title]_max-content_[message]_max-content_[main]_1fr_max-content_[action-bar]];
-    }
-
-    *.has-ActionBarContent {
-      @apply row-[main/action-bar] grid grid-rows-[subgrid] items-baseline;
-
-      &.has-StatusMessage {
-        @apply row-[message/action-bar];
+    @apply grid-rows-[[title]_max-content_[main]_minmax(0,1fr)];
+
+    .has-ActionBarContent:not(
+        .SearchFields,
+        .SearchFields *,
+        .SearchWidgetAdvanced,
+        .SearchWidgetAdvanced *,
+        .PostPublish-form,
+        .PostPublish-form *
+      ) {
+      @apply flex grow flex-col row-[main];
+
+      /* Body content lines up with the popup inset; wrappers and full-bleed
+         elements are exempt. */
+      > :not(
+          .ActionBar,
+          .Message,
+          .TabBar,
+          .has-ActionBarContent,
+          .AIChat-wrapper,
+          .DT-wrapper,
+          table
+        ) {
+        @apply mx-[--space];
+      }
 
-        .Widget-title + .Message {
-          @apply row-[message/main];
-        }
+      /* A form that is a sibling of the ActionBar is plain content here;
+         without this it keeps the Widget grid's subgrid columns, which
+         collapse inside this flex column. */
+      > form:not(.has-ActionBarContent) {
+        @apply flex flex-col;
       }
 
-      &.SearchFields.has-tabs {
-        @apply h-full grid-rows-[auto_[main]_1fr_max-content_[action-bar]];
+      /* Same hazard for a fixedScrollable holding the fields before the bar
+         (e.g. the Profile popup): Widget.css turns it into a subgrid when it
+         holds a TC/CIG, which orphans inside this flex column and shoves the
+         fields into a phantom second column. */
+      > .fixedScrollable.before-ActionBar {
+        @apply flex flex-col;
       }
     }
 
-    .Widget .has-ActionBarContent {
-      @apply col-[fullbleed-start/fullbleed-end] grid-cols-subgrid;
+    /* Gap between the last content element and the bar. */
+    .before-ActionBar {
+      @apply mb-6;
     }
 
-    :is(form, .TC, .AIChat-wrapper, .fixedScrollable).before-ActionBar {
-      @apply col-[fullbleed-start/fullbleed-end] max-h-full overflow-y-auto px-[--space] pb-6;
+    /* Chat log keeps its own scroll pane. */
+    .AIChat-wrapper.before-ActionBar {
+      @apply grow overflow-y-auto px-[--space];
     }
 
     .ActionBar {
-      @apply mt-0 h-max self-end;
+      @apply mt-auto;
+    }
+
+    /* SearchFields keeps its legacy two-pane grid, with or without tabs
+       (Select Fields vs Show/Hide Filters). */
+    .SearchFields {
+      @apply grid h-full grow grid-rows-[[main]_1fr_max-content_[action-bar]] row-[main];
+
+      &.has-tabs {
+        @apply grid-rows-[auto_[main]_1fr_max-content_[action-bar]];
+      }
+
+      > form.has-ActionBarContent {
+        @apply grid grid-rows-[subgrid] row-[main/action-bar];
+      }
+    }
+
+    /* Self-managed widgets still fill the body column. */
+    :is(.Widget.SearchWidgetAdvanced, .PostPublish-form) {
+      @apply grow;
     }
   }
 
@@ -255,6 +302,12 @@ dialog:modal > .QueryField-frame > .Popup:where(:not([popover])) {
   .Popup-content .Popup-close {
     @apply first:ms-auto;
   }
+
+  /* Same when the only element before it is the legacy heading, which is
+     always hidden (e.g. objectId-edit popups without a cloned title). */
+  .Popup-content > .Popup-heading + .Popup-close {
+    @apply ms-auto;
+  }
 }
 
 /* Content Edit workflow popup — v4 lifecycle does not always remove [open]
@@ -400,9 +453,10 @@ dialog dialog > .PrePublishPopup {
   --popup-w: initial;
 }
 
-/* Post Publish Actions modal */
+/* Post Publish Actions modal. The named columns mirror the Widget grid,
+   which no longer reaches here via subgrid. */
 dialog:modal .PostPublish-form > div {
-  @apply h-full;
+  @apply grid h-full [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_[content-end]_var(--space)_[fullbleed-end]];
 
   > * {
     @apply col-[content-start/content-end];
@@ -416,8 +470,11 @@ dialog:modal .PostPublish-form > div {
     @apply relative mb-12 mt-1.5 after:absolute after:-bottom-6 after:-left-[var(--space)] after:-right-[var(--space)] after:h-px after:bg-gray-200;
   }
 
-  > div:where(:has(~ .ActionBar)),
-  > :where(:has(+ .ActionBar)) {
+  /* Content area(s) before the ActionBar scroll. The ActionBar is always the
+     last child, so div:not(.ActionBar) matches the content divs; .before-ActionBar
+     (stamped by dialog/index.ts) covers a non-div immediately before the bar. */
+  > div:not(.ActionBar),
+  > .before-ActionBar {
     @apply relative col-[fullbleed-start/fullbleed-end] max-h-full overflow-y-auto px-[--space] pb-6;
   }
 

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

@@ -77,6 +77,8 @@ declare global {
           combo: {
             empty: string
             multi: string
+            noMatches: string
+            noOptions: string
           }
           createNew: string
           multiSort: string

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/MenuView.css

@@ -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;
     }
 

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

@@ -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/Revisions.css

@@ -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 {

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/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> {