@brightspot/ui 6.3.5-rc.1 → 6.4.0

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

@@ -29,34 +29,24 @@
 
 .CIG-label {
   /* line-height is set here to make sure that labels with/without action icons are always the same height */
-  @apply relative -order-2 flex h-min items-center text-sm font-semibold leading-6 text-gray-700;
+  @apply relative -order-2 flex h-min items-center gap-x-1 text-sm font-semibold leading-6 text-gray-700;
 }
 
 .CIG-label label {
   @apply min-w-max;
 }
 
-.CIG-requiredLabel {
-  @apply ps-2 text-sm font-normal text-gray-500;
+/* Hide the redundant text label on unlabeled fields; child-scoped so nested fields' labels survive. */
+.CIG-row.is-unlabeled > .CIG-label label {
+  @apply hidden;
 }
 
-/* Adjusts spacing between RCIG-list, view switcher and label when "Items Type" dropdown is missing */
-.CIG-label + .CIG-large .RCIG.is-previewable > {
-  .repeatablePreviewControls {
-    @apply top-[calc(theme(fontSize.md.1)_-_theme(spacing.7))];
-  }
-
-  .RCIG-expandAll {
-    @apply top-[calc(0px_-_theme(spacing.2)_*_2_-_theme(iconSize.lg)_+_theme(fontSize.md.1))];
-  }
-
-  .repeatablePreviewControls + .RCIG-list {
-    @apply mt-[calc(theme(fontSize.md.1)_+_theme(spacing.2))];
-  }
+.CIG-requiredLabel {
+  @apply text-sm font-normal text-gray-500;
 }
 
 .CIG-comments {
-  @apply ms-1 delay-[0.12s] before:btu-icon-message-circle-plus;
+  @apply delay-[0.12s] before:btu-icon-message-circle-plus;
 
   &.has-comments {
     @apply before:btu-icon-message-circle after:absolute after:right-[2px] after:top-[4px] after:size-[10px] after:rounded-full after:border after:bg-error-600 after:[clip-path:circle()] hover:bg-primary-50 hover:text-primary-800;
@@ -64,11 +54,11 @@
 }
 
 .CIG-help {
-  @apply ms-1 before:btu-icon-wrench;
+  @apply before:btu-icon-wrench;
 }
 
 .CIG-guide {
-  @apply ms-2 before:btu-icon-circle-help;
+  @apply before:btu-icon-circle-help;
 }
 
 .CIG-guide,
@@ -78,15 +68,12 @@
 }
 
 .CIG-wordCount {
-  --space: 0.375rem;
-  @apply order-last ms-auto mt-[--space] text-sm font-normal text-gray-500 opacity-0;
+  --space: 0.25rem;
+  /* ms-auto right-aligns the count; with a note present its flex-grow eats the free space first, so this only bites when there's no note. */
+  @apply order-last ms-auto flex flex-none justify-end gap-1 whitespace-nowrap text-sm font-normal text-gray-500 opacity-0;
 
   &.has-min-or-max {
-    @apply flex justify-end opacity-100;
-
-    .CIG-wordCount-min + .CIG-wordCount-max {
-      @apply ps-1;
-    }
+    @apply opacity-100;
   }
 }
 
@@ -126,12 +113,9 @@
   @apply relative order-[-1] -mx-[--space] w-screen;
 }
 
-.CIG > .CIG-note > .CIG-noteItem {
-  @apply mt-0;
-}
-
+/* Embedded note: flush divider, not the rounded row-note card. */
 .CIG > .CIG-note > .CIG-noteItem > .Message {
-  @apply my-0 rounded-none border-0 border-b;
+  @apply rounded-none border-0 border-b;
 }
 
 .CIG-note:empty,
@@ -139,21 +123,35 @@
   @apply hidden;
 }
 
-.CIG-row > .CIG-note,
+.CIG-row > .CIG-note {
+  @apply order-12 w-full min-w-0 flex-1 text-sm text-gray-500;
+}
+
 .CIG-noteItem {
-  @apply order-12 mt-1.5 w-full basis-full text-sm text-gray-500;
-  [data-dynamic-html] .Message {
-    @apply mb-0 mt-1.5 [overflow-wrap:anywhere];
-  }
+  @apply text-sm text-gray-500;
+}
+
+/* Outranks .Widget .Message:not(:has(+*)) to drop its margins; keeps its rounded border. */
+.CIG-note > .CIG-noteItem > .Message {
+  @apply my-0 [overflow-wrap:anywhere];
 }
 
 /* Fields marked with @NotePosition(ABOVE) (defaulted for embedded/clustered fields) */
 .CIG-row > .CIG-note.is-note-above {
-  @apply order-[-1] mb-1.5 mt-0 w-full basis-full;
+  @apply order-[-1] me-0 w-full basis-full;
+}
+
+/* A list's note sits above the list, full-width (not shrunk beside it by its flex-1 base).
+  .has-RCS is stamped on the row by ContentInputGroup.ts in place of :has(> .CIG-small.RCS). */
+.CIG-row.has-RCS > .CIG-note {
+  @apply order-[-1] basis-full;
 }
 
-.CIG-row > .CIG-note.is-note-above > .CIG-noteItem {
-  @apply mt-0;
+/* Shrink note-above width when the expandAll button is visible so they sit side by side.
+  .has-expandAll is stamped on the row by RepeatableContentInputGroup.js in place of
+  :has(.RCIG-expandAll). */
+.CIG-row.is-expandable.has-expandAll > .CIG-note.is-note-above {
+  @apply max-w-[calc(100%-theme(spacing.7)-theme(spacing.2))];
 }
 
 /* Equalize the ComboInput widths so that they look aligned. */
@@ -171,7 +169,13 @@
     @apply w-full;
   }
 
-  /* Inside a layout with columns, unset the min width to prevent fields from 
+  /* 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. */
   &.is-minimal,
@@ -191,7 +195,7 @@
 .CIG-large,
 .CIG-small {
   --CIG-space: 0.375rem;
-  @apply mt-[--CIG-space] basis-full;
+  @apply basis-full;
 }
 
 .CIG > .TemplateField {
@@ -207,7 +211,7 @@
   /* contain:inline-size, NOT @container. The containment is load-bearing: it stops
     descendant min-content widths propagating up, else .Admin-main scrolls sideways.
     The query container is what was slow - 13,158ms/layout vs 44ms for containment alone. */
-  @apply relative flex max-h-min min-w-[200px] basis-full flex-row flex-wrap content-start [contain:inline-size];
+  @apply relative flex max-h-min min-w-[200px] basis-full flex-row flex-wrap content-start gap-1 [contain:inline-size];
 
   /* The colored vertical "thread" to the side of each row.
     The 1px left offset is to stay true to the design so that there is a slight gap betweem the thread and container.
@@ -216,19 +220,24 @@
     @apply absolute bottom-0 left-[calc(1px_-_var(--space))] top-[3px] w-0.5 origin-left scale-x-0 rounded-lg bg-primary-600 opacity-0 transition;
   }
 
+  /* Stop the thread above the word count (which adds height when it isn't pulled up).
+    .has-wordCount is stamped on the row by v3.js updateWordCount() in place of
+    :has(> .CIG-wordCount), which onFind blacklists. */
+  &.has-wordCount::after {
+    @apply bottom-[calc(0.25rem_+_theme(lineHeight.4))]; /* clears the word count: row gap (gap-1) + its line height */
+  }
+
   /* Rows could be empty or have no visible children. */
   &:empty,
   &:has(> [type='hidden']:only-child) {
     @apply hidden;
   }
 
-  /* Show word count when focused */
-  &:focus-within {
-    .CIG-wordCount {
-      @apply opacity-100;
+  /* Child combinator: focusing a nested field must not reveal ancestor rows' word counts. */
+  &:focus-within > .CIG-wordCount {
+    @apply opacity-100;
 
-      transition: opacity 0.25s cubic-bezier(0.25, 0, 0.2, 1);
-    }
+    transition: opacity 0.25s cubic-bezier(0.25, 0, 0.2, 1);
   }
 
   /* hidden/unselected Tab Container CIG-rows, shouldn't have padding */
@@ -236,9 +245,21 @@
     @apply mt-[--CIG-row-space];
   }
 
-  /* Word count element in all Cig rows (except the last sibling row). */
-  &:has(+ .CIG-row) .CIG-wordCount {
-    @apply mb-[calc(-1_*_(var(--space)_+_theme(lineHeight.4)))]; /* negative margin keeps the word count from pushing the next CIG-row down. */
+  /* Extra top clearance so the pulled-up expand-all button clears the preceding field's word count. */
+  &.inputContainer.is-expandable {
+    @apply mt-[calc(var(--CIG-row-space)_+_0.25rem)];
+  }
+
+  /* A following sibling means the word count is pulled up, so the thread runs full-height.
+    .has-nextRow is stamped by ContentInputGroup.ts in place of :has(+ .CIG-row). */
+  &.has-nextRow {
+    &.has-wordCount::after {
+      @apply bottom-0;
+    }
+
+    > .CIG-wordCount {
+      @apply mb-[calc(-1_*_(var(--space)_+_theme(lineHeight.4)))]; /* negative margin keeps the word count from pushing the next CIG-row down. */
+    }
   }
 }
 
@@ -249,10 +270,9 @@
   @apply w-full basis-full;
 }
 
-/*
-  Fades out the surrounding buttons when the user focuses the input. */
+/* Match the row directly: :has(.is-highlighted) would also fade ancestor rows' buttons. */
 .CIG-row.is-inputFocused,
-.CIG-row:has(.is-highlighted) {
+.CIG-row.is-highlighted {
   > .CIG-label .CIG-guide:not(:hover),
   > .CIG-label .CIG-help:not(:hover),
   > .CIG-label .CIG-comments:not(:hover),
@@ -377,6 +397,15 @@
       @apply focus:ring-error-100 focus:border-error-600;
     }
   }
+
+  /* Don't bleed the error focus ring into a nested embedded field's inputs, unless
+    that nested row is itself in error (is-error propagates up every ancestor row). */
+  .CIG-row:not(.is-error) {
+    input,
+    textarea {
+      @apply focus:ring-primary-100 focus:border-primary-600;
+    }
+  }
 }
 
 /* Gray/yellow thread when the row is pending change. */
@@ -419,7 +448,7 @@
   @apply pt-0;
 }
 
-/* Remove all gaps around CIG inside unlabeled row by itself. */
+/* Collapse a lone unlabeled embedded record's box. Excludes RCIG bodies: tabless modules would match here (direct-child rows), tabbed wouldn't. */
 .CIG-row:where(
     [data-type='record'],
     [data-type='list/record'],
@@ -427,8 +456,7 @@
   )
   > .CIG-large {
   > .toggleable-form > .CIG,
-  > .CIG,
-  > .RCIG-list > .RCIG-item > .CIG {
+  > .CIG {
     &:has(> div.CIG-row.is-unlabeled:where(:only-of-type, :last-child)) {
       @apply rounded-none border-none p-0;
     }
@@ -578,10 +606,6 @@
   }
 }
 
-.CIG-row:only-child.is-unlabeled > .Message.is-error {
-  @apply ms-[calc(var(--CIG-padding)_+_theme(spacing.4))];
-}
-
 /* Query Field support. */
 .CIG.TC.is-query {
   --CIG-padding: 0;
@@ -655,7 +679,7 @@
 }
 
 .CIG-small > .DateStringCalendarEmbedded .DateStringCalendarEmbedded-widget {
-  @apply blokk border-none;
+  @apply border-none blokk;
 
   .DateStringCalendarTime,
   /* Unset the horizontal borders which appear in these pseudo-elements */

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

@@ -12,13 +12,46 @@ const toggleEmpty = (group: Element) => {
   group.classList.toggle('is-empty', !rows.length)
 }
 
+// Flag a row immediately followed by another row so CSS can pull up its word count
+// with a plain class instead of :has(+ .CIG-row).
+const updateHasNextRow = (row: Element) => {
+  row.classList.toggle(
+    'has-nextRow',
+    row.nextElementSibling?.matches('.CIG-row') ?? false,
+  )
+}
+
 onFind('.CIG', toggleEmpty)
 
+// Rows stream in asynchronously, so recompute each as it arrives, plus the row before
+// it, whose follower is now this one. A snapshot at group-find time would miss rows
+// inserted later and leave the word count pushing the next field down.
+onFind('.CIG-row', (row) => {
+  updateHasNextRow(row)
+  const previous = row.previousElementSibling
+  if (previous?.matches('.CIG-row')) {
+    updateHasNextRow(previous)
+  }
+})
+
 window.addEventListener('brightspot-content-state-change', ({ target }) => {
   if (!(target instanceof HTMLElement)) return
   for (const group of target.querySelectorAll('.CIG')) {
     toggleEmpty(group)
   }
+  // Recompute adjacency across the changed subtree to cover removals and reorders.
+  for (const row of target.querySelectorAll('.CIG-row')) {
+    updateHasNextRow(row)
+  }
+})
+
+// Flag the row of a compact collection (RCS) control so its note can go full-width
+// above the control with a plain class instead of :has(> .CIG-small.RCS).
+onFind('.CIG-small.RCS', (control) => {
+  const row = control.parentElement
+  if (row?.classList.contains('CIG-row')) {
+    row.classList.add('has-RCS')
+  }
 })
 
 // Move CIG-title to be more consistently placed.

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

@@ -424,6 +424,9 @@ onFind('.frame[name^=conversation-edit-post].loaded', (widget: HTMLElement) => {
 
 onFind('.Conversation-add-comment', (button) => {
   button.addEventListener('click', (event) => {
+    // This has no href, so keep the frame plugin from treating it as a link.
+    event.stopPropagation()
+
     const workflowBody = button.closest('.ContentEdit-workflowBody')
     if (workflowBody) {
       workflowBody

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

@@ -16,6 +16,7 @@ import './Diff'
 import './ExternalCalendars'
 import './ExternalItemObjects'
 import './LiveBlog'
+import './NewTabLinks'
 import './Notifications'
 import './PostPublish'
 import './PrePublish'

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

@@ -3,6 +3,9 @@ export {}
 declare global {
   interface Window {
     BRIGHTSPOT: {
+      a11y?: {
+        opensInNewWindow?: string
+      }
       ai: {
         AI_CHAT_ENABLED: boolean
         submitSuggestion: string

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

@@ -1,6 +1,110 @@
 .locationMap,
 .regionMap {
-  @apply z-0 h-[50dvh];
+  @apply z-0 h-[50dvh] !bg-gray-100;
+
+  /* Leaflet's chrome ships as unlayered CSS (JS imports), so overrides need `!`
+     to outrank it. */
+
+  /* OSM tiles are light-only; invert only the tile pane so other panes (markers,
+     regions, controls, popups) keep their true colors. */
+  .leaflet-tile-pane {
+    @apply dark:[filter:invert(1)_hue-rotate(180deg)_brightness(0.95)_contrast(0.9)];
+  }
+
+  .leaflet-bar a {
+    @apply !border-gray-200 !bg-white !text-gray-700 hover:!bg-gray-100;
+
+    &.leaflet-disabled {
+      @apply !text-gray-400;
+    }
+  }
+
+  .leaflet-control-attribution {
+    @apply !bg-white !text-gray-600;
+
+    a {
+      @apply !text-primary-600;
+    }
+  }
+
+  .leaflet-popup-content-wrapper,
+  .leaflet-popup-tip {
+    @apply !bg-white !text-gray-700;
+  }
+
+  .leaflet-popup-close-button {
+    @apply !text-gray-500 hover:!text-gray-700;
+  }
+
+  .leaflet-tooltip {
+    @apply !border-gray-200 !bg-white !text-gray-700;
+  }
+  /* Arrow color must track the tooltip surface */
+  .leaflet-tooltip-top::before {
+    @apply !border-t-white;
+  }
+  .leaflet-tooltip-bottom::before {
+    @apply !border-b-white;
+  }
+  .leaflet-tooltip-left::before {
+    @apply !border-l-white;
+  }
+  .leaflet-tooltip-right::before {
+    @apply !border-r-white;
+  }
+
+  .leaflet-control-geosearch form,
+  .leaflet-control-geosearch form input {
+    @apply !bg-white !text-gray-700;
+  }
+  .leaflet-control-geosearch a.leaflet-bar-part::before {
+    @apply !border-t-gray-600;
+  }
+  .leaflet-control-geosearch a.leaflet-bar-part::after {
+    @apply !border-gray-600;
+  }
+  .leaflet-control-geosearch .results {
+    @apply !bg-white !text-gray-700;
+  }
+  .leaflet-control-geosearch .results.active {
+    @apply !border-t-gray-200;
+  }
+  .leaflet-control-geosearch .results > .active,
+  .leaflet-control-geosearch .results > :hover {
+    @apply !border-gray-200 !bg-gray-100;
+  }
+  /* Transparent so it doesn't paint over the input's focus ring */
+  .leaflet-control-geosearch button.reset {
+    @apply !bg-transparent !px-4 !text-gray-500 hover:!text-gray-700;
+  }
+
+  /* Leaflet-draw's sprite glyphs don't theme and fail to invert cleanly; swap
+     them for design-system icons, like the locate/remove controls do. */
+  .leaflet-draw-toolbar a {
+    @apply flex items-center justify-center !bg-none before:btu-icon;
+  }
+  .leaflet-draw-draw-polygon {
+    @apply before:btu-icon-pentagon;
+  }
+  .leaflet-draw-draw-circle {
+    @apply before:btu-icon-circle;
+  }
+  .leaflet-draw-edit-edit {
+    @apply before:btu-icon-square-pen;
+  }
+  .leaflet-draw-edit-remove {
+    @apply before:btu-icon-trash-2;
+  }
+
+  /* Finish / Delete / Cancel action buttons */
+  .leaflet-draw-actions a {
+    @apply !border-gray-200 !bg-white !text-gray-700 hover:!bg-gray-100;
+  }
+
+  /* Overrides Leaflet's SVG stroke/fill presentation attributes */
+  .leaflet-overlay-pane path {
+    @apply !fill-primary-500 !stroke-primary-700;
+  }
 }
 
 .LocationMap-removeMarker {
@@ -13,7 +117,7 @@
 
 .LocationMap-marker {
   --size: 20px;
-  @apply !size-[var(--size)] before:blokk before:size-full before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.mapPin)];
+  @apply !size-[var(--size)] before:size-full before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:blokk before:[clip-path:theme(shape.mapPin)];
 }
 
 .LocationMap-locateControl {

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

@@ -124,8 +124,7 @@
   }
 
   .CIG-wordCount {
-    /* 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;
+    @apply pointer-events-none absolute end-3 top-3 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/NewTabLinks.ts

@@ -0,0 +1,25 @@
+import onFind from './dom/onFind'
+
+// Announces "opens in a new window" to screen readers. On the frontend so it also covers
+// plugin/message/dialog links; the onFind blacklist skips editorial content.
+onFind('a[target="_blank"]:not([download])', (link: HTMLAnchorElement) => {
+  const notice = window.BRIGHTSPOT?.a11y?.opensInNewWindow
+  if (!notice) {
+    return
+  }
+
+  // Match the accessible-name order (aria-label > text > title) so we compose, not clobber, an
+  // existing name. We set aria-label, not a child span: a span leaks into textContent, which
+  // other code reads for titles.
+  const name =
+    link.getAttribute('aria-label')?.trim() ||
+    link.textContent?.trim() ||
+    link.getAttribute('title')?.trim() ||
+    ''
+  if (!name) {
+    // Icon-only link with no accessible name — announce the notice on its own.
+    link.setAttribute('aria-label', notice)
+  } else if (!name.includes(notice)) {
+    link.setAttribute('aria-label', `${name}, ${notice}`)
+  }
+})

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

@@ -33,7 +33,7 @@
 }
 
 .Notification-clear {
-  @apply order-1 ms-auto;
+  @apply order-1 ms-auto shrink-0;
 
   .Button-clearSingle {
     @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error opacity-0 before:btu-icon before:btu-icon-x;
@@ -133,12 +133,30 @@
   @apply Dropdown-item;
 }
 
+/* The topic label is the only element that says what the notification is, so it leads
+   the row. It previously inherited .Notification-info's 12px/400 while the action sat
+   beside it as a filled primary button, which read as an offer to unsubscribe with the
+   notification as its caption.
+
+   Declared through custom properties rather than utilities because the markup is emitted
+   from Java with fixed class names: without a seam, a consumer retuning this row has to
+   redeclare these platform classes with hardcoded values. */
 .Notification-type {
   @apply truncate;
+
+  font-size: var(--notification-topic-font-size, 0.875rem);
+  font-weight: var(--notification-topic-font-weight, 600);
+  /* Worth several characters of fit at weight 600, on a label that ellipses. */
+  letter-spacing: var(--notification-topic-letter-spacing, -0.01em);
+  line-height: var(--notification-topic-line-height, 1.25rem);
 }
 
+/* The label absorbs shrink pressure by ellipsis; the timestamp has no such escape and
+   would otherwise break at its space and be clipped by the title's overflow. */
 .Notification-time {
-  @apply flex before:size-[1.125rem] before:bg-gray-500 before:[clip-path:circle(0.1rem)];
+  @apply flex whitespace-nowrap before:size-[1.125rem] before:bg-gray-500 before:[clip-path:circle(0.1rem)];
+
+  font-size: var(--notification-time-font-size, inherit);
 }
 
 .Notification-details {

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

@@ -89,6 +89,11 @@ onFind(
   },
 )
 
+// Move focus to the result link when the popup opens so keyboard and screen reader users can act on it.
+onFind('.Notification-actionResultUrl-link[data-autofocus]', (link: HTMLElement) => {
+  link.focus()
+})
+
 onFind('.Notification-actionBar', (actionBar: HTMLElement) => {
   const limit: string | null = actionBar.getAttribute('actionLimit')
   const list: HTMLElement = create('ul', {

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

@@ -78,15 +78,16 @@
 .RCIG.is-addToTop {
   @apply grid grid-cols-[1fr_auto] grid-rows-[auto_1fr] gap-2;
 
-  .RCIG-expandAll {
+  /* Direct children: grid placement must not reach a nested RCIG's controls. */
+  > .RCIG-expandAll {
     @apply static col-start-2 self-center;
   }
 
-  .RCIG-controls {
+  > .RCIG-controls {
     @apply col-start-1 row-start-1;
   }
 
-  .RCIG-list:not(:empty) {
+  > .RCIG-list:not(:empty) {
     @apply col-span-full mb-0;
   }
 }
@@ -211,35 +212,34 @@
 
 .RCIG-expandAll {
   --border-size: 1px;
-  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-sm absolute right-[--border-size] top-[calc(-1_*_(var(--button-size-sm)_+_var(--CIG-space,0))_-_var(--border-size))] before:btu-icon before:btu-icon-chevrons-up-down;
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-xs absolute right-[--border-size] top-[calc(-1_*_(var(--button-size-xs)_+_var(--CIG-space,0))_-_var(--border-size))] before:btu-icon before:btu-icon-chevrons-up-down;
 
   &.is-expanded {
     @apply before:btu-icon-chevrons-down-up;
   }
 }
 
+/* sm to match the view-switcher's height when it shares the row. */
+.RCIG.is-previewable > .RCIG-expandAll {
+  @apply btu-button-sm top-[calc(-1_*_(var(--button-size-sm)_+_var(--CIG-space,0))_-_var(--border-size))];
+}
+
 .RCIG[data-rcig-size='0'] {
-  .RCIG-expandAll,
-  .RCIG-resetWeights {
+  > .RCIG-expandAll,
+  > .RCIG-resetWeights {
     @apply hidden;
   }
-
-  &.is-previewable .repeatablePreviewControls {
-    @apply right-0;
-  }
 }
 
 .RCIG.is-previewable {
   > .repeatablePreviewControls {
-    @apply absolute right-11 top-[calc(-1_*_(38px_+_var(--CIG-space,0)))];
-  }
-
-  &.is-gridView > .repeatablePreviewControls {
-    @apply right-0;
+    @apply absolute right-0 top-[calc(-1_*_(38px_+_var(--CIG-space,0)))];
   }
 
-  &.is-gridView > .RCIG-expandAll {
-    @apply hidden;
+  /* .has-expandAll is stamped on this RCIG by RepeatableContentInputGroup.js in place of
+    :has(> .RCIG-expandAll); excludes emptied lists (button present but hidden). */
+  &.has-expandAll:not([data-rcig-size='0']) > .repeatablePreviewControls {
+    @apply right-11;
   }
 }
 
@@ -362,7 +362,7 @@
       }
 
       .ContentSelector-search {
-        @apply row-start-1 before:absolute before:end-[calc(theme(size.9)*2_+_theme(spacing.1))] before:top-[calc(144px_+_theme(spacing.1))];
+        @apply row-start-1 before:top-[calc(144px_+_theme(spacing.1))];
       }
 
       .ContentSelector-search figure {
@@ -415,14 +415,21 @@
     @apply before:me-[calc(theme(spacing.2)*2+55px)];
   }
 
-  .RCIG-expandAll,
-  .RCIG-resetWeights {
+  > .RCIG-expandAll,
+  > .RCIG-resetWeights {
     @apply btu-button-xs top-[calc(0px-var(--RCIG-buttonSize)-theme(spacing.1))];
   }
 }
 
 .RCIG-resetWeights {
-  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray absolute right-[calc(var(--RCIG-buttonSize)+theme(spacing.2))] before:btu-icon before:btu-icon-columns-3;
+  --border-size: 1px;
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray absolute right-[--border-size] before:btu-icon before:btu-icon-columns-3;
+}
+
+/* Offset left to make room for the expand-all button only when it's actually present.
+  .has-expandAll is stamped by RepeatableContentInputGroup.js in place of :has(> .RCIG-expandAll). */
+.RCIG.has-expandAll > .RCIG-resetWeights {
+  @apply right-[calc(var(--RCIG-buttonSize)+theme(spacing.2))];
 }
 
 .RCIG-weightBar {