@brightspot/ui 6.1.2-pr.275 → 6.3.0

package/dist/tailwind-plugin-button.ts

@@ -90,6 +90,8 @@ module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
       '&:disabled': disabledStyle,
       '&[disabled]': disabledStyle,
       textDecoration: 'none',
+      // Explicit so re-applying btu-button clears an outline, as it already does background/color.
+      outline: 'none',
       transition: 'scale 150ms ease',
       '&:hover': {
         color: 'var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.1.2-pr.275",
+  "version": "6.3.0",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
@@ -27,6 +27,7 @@
     "build-storybook": "yarn cem && storybook build -o ./dist/storybook",
     "test:storybook": "vitest --project=storybook",
     "test:css-bloat": "vitest run --project=css-bloat",
+    "test:combo-input": "vitest run --project=combo-input",
     "check:conventions": "yarn cem && node scripts/check-conventions-all.mjs",
     "check:conventions:fast": "node scripts/check-conventions.mjs",
     "prepare": "husky && (cd src/legacy/tool-ui && yarn install)",
@@ -54,7 +55,9 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-storybook": "^10.0.7",
     "globals": "^16.0.0",
+    "happy-dom": "^20.11.1",
     "husky": "^9.1.7",
+    "js-cookie": "^3.0.1",
     "lint-staged": "^16.2.6",
     "lit": "^3.3.0",
     "mini-css-extract-plugin": "^2.6.1",

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

@@ -13,7 +13,7 @@
 }
 
 /* Admin areas side nav styling */
-.Admin-nav {
+.Admin .Admin-nav {
   @apply bg-gray-50;
 
   > h2,
@@ -43,7 +43,7 @@
     }
 
     /* These content selectors should just appear as normal ComboInputs */
-    > form > .ContentSelector-select + .ComboInput {
+    > form > .ComboInput {
       @apply rounded-lg px-4;
 
       &:not([aria-expanded='true'], :focus-visible) {
@@ -135,10 +135,6 @@
       }
     }
 
-    &:not(:first-child) {
-      @apply mt-2;
-    }
-
     a:hover {
       @apply text-gray-900;
     }

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

@@ -1,5 +1,13 @@
 btu-cig-cluster {
-  @apply blokk flex-grow basis-full contain-layout contain-style;
+  --gap: calc(2 * var(--CIG-padding));
+
+  /* Flex (not block) so narrow .CIG-row children pair up like they do in .CIG. */
+  @apply flex flex-grow flex-wrap basis-full gap-x-[--gap] contain-layout contain-style;
+}
+
+/* Children run the full row; the narrow modifiers (.is-half etc.) override this to pair up. */
+btu-cig-cluster > * {
+  @apply basis-full;
 }
 
 btu-cig-cluster:state(btu-error) {

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

@@ -247,7 +247,7 @@ Highcharts.theme = {
 }
 
 Highcharts.setOptions(Highcharts.theme)
-Highcharts.setOptions({ lang: { noData: 'No Data to Display' } })
+Highcharts.setOptions({ lang: { noData: window.BRIGHTSPOT?.ui?.tooltips?.chartNoData ?? 'No Data to Display' } })
 
 const createLabels = (table: HTMLTableElement): string[] => {
   const labels = []

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

@@ -202,6 +202,12 @@
   }
 }
 
+/* btu-button is colorless without a variant. :where() keeps this at one class of specificity so
+   context rules (ActionBar, etc.) still win. */
+.Button:not(:where(.is-dominant, .is-green, .is-yellow, .Link)) {
+  @apply btu-button-gray btu-button-fill-none btu-button-outline;
+}
+
 .Button.is-dominant {
   @apply btu-button-primary;
 }
@@ -379,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

@@ -760,18 +760,29 @@
   @apply flex flex-nowrap gap-2;
 }
 
+/* Lives in the edit grid, not the scrolling form, so a space-taking scrollbar
+  can't push the hit target off the panel edge. */
 .ContentEdit-resizeWrapper {
-  --resize-hitbox-w: 8px;
-  @apply pointer-events-none invisible absolute z-20 !col-[fullbleed-end] w-[--resize-hitbox-w] bg-transparent [inset-block-end:0] [inset-block-start:0] [inset-inline-start:calc(100%_-_var(--resize-hitbox-w))] md:pointer-events-auto md:visible md:cursor-col-resize;
+  --resize-hitbox-w: 16px;
+  margin-inline-end: calc(-1 * var(--resize-hitbox-w));
+  @apply pointer-events-none hidden w-[--resize-hitbox-w] justify-self-end bg-transparent [grid-area:left] md:pointer-events-auto md:relative md:z-20 md:cursor-col-resize md:touch-none;
 }
 
-.ContentEdit-resizeWrapper:hover .ContentEdit-resizeHandle {
+/* Laid out only in the edit grid, since other popups are grids with no `left` area. */
+:is(.Page.is-editing .Page-content, .Popup-content.is-editing)
+  > .ContentEdit-resizeWrapper {
+  @apply md:blokk;
+}
+
+.ContentEdit-resizeWrapper:hover .ContentEdit-resizeHandle,
+.ContentEdit-resizeWrapper:active .ContentEdit-resizeHandle {
   @apply bg-primary-500;
 }
 
 .ContentEdit-resizeHandle {
   --resize-handle-w: 2px;
-  @apply pointer-events-none fixed h-full w-[var(--resize-handle-w)] translate-x-[calc(var(--resize-hitbox-w)_-_var(--resize-handle-w))] transition-all;
+  /* Persistently visible so it's discoverable on touch devices (no :hover). */
+  @apply pointer-events-none absolute inset-y-0 start-0 w-[var(--resize-handle-w)] bg-primary-100 transition-colors;
 }
 
 /* Banners / Messages styling in Content edit form */
@@ -884,14 +895,10 @@
 }
 
 .ContentEdit-revisionActions {
-  @apply text-[--Revision-revisionEmphasisColor] max-md:mt-3;
+  @apply flex flex-wrap gap-4 text-[--Revision-revisionEmphasisColor] max-md:mt-3;
 
   > a {
-    white-space: nowrap;
-  }
-
-  > a:not(:first-child) {
-    margin-left: var(--gap-l);
+    @apply whitespace-nowrap;
   }
 }
 
@@ -1015,11 +1022,11 @@
 }
 
 button.ContentEdit-workflowLink {
-  @apply btu-button btu-button-fill-none btu-button-primary m-6 !ms-auto btu-button-container-none after:btu-icon after:btu-icon-arrow-right after:ml-2;
+  @apply btu-button btu-button-fill-none btu-button-primary m-6 !ms-auto btu-button-container-none after:btu-icon after:btu-icon-arrow-right rtl:after:btu-icon-arrow-left after:ms-2;
 }
 
 [data-name='publishOverride'] button.ContentEdit-workflowLink {
-  @apply !me-auto !ms-6 before:btu-icon before:btu-icon-arrow-left before:mr-2 after:hidden;
+  @apply !me-auto !ms-6 before:btu-icon before:btu-icon-arrow-left rtl:before:btu-icon-arrow-right before:me-2 after:hidden;
 }
 
 /* Hide workflow link when not in publish override mode */

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

@@ -13,9 +13,9 @@ let panelData: PanelData | null
 let pointerIsDown = false
 let pdOriginX = 0 // Pointer down origin x position
 let gtcOrigin: number[] = [] // Origin Grid Template Columns in pixels
-let ogTransProp: undefined | string
 let isRTL = false // Whether the container has RTL direction
 let container: HTMLElement | null // The target Page
+let grid: HTMLElement | null // The grid whose columns the drag resizes
 let panel: HTMLElement | null // The target Panel
 
 const updateWidth = (length: string) => {
@@ -47,6 +47,8 @@ const onPointerDown = (e: PointerEvent) => {
     if (e.target.classList.contains('ContentEdit-resizeWrapper')) {
       container = e.target.closest<HTMLElement>('.Page-content, .Popup')
       if (!container) return
+      // Capture so a touch/trackpad drag isn't stolen by scroll and lost mid-drag.
+      e.target.setPointerCapture(e.pointerId)
       pointerIsDown = true
       const isPopup = container.classList.contains('Popup')
       if (isPopup) {
@@ -57,15 +59,15 @@ const onPointerDown = (e: PointerEvent) => {
         document.body.style.userSelect = 'none'
       }
       pdOriginX = e.screenX
-      const computedStyle = getComputedStyle(container)
-      ogTransProp = computedStyle.transitionProperty
-      isRTL = computedStyle.direction === 'rtl'
-      container.style.transitionProperty = 'none'
-      const grid = isPopup
+      isRTL = getComputedStyle(container).direction === 'rtl'
+      grid = isPopup
         ? container.querySelector<HTMLElement>('.Popup-content')
         : container
       if (!grid) return
 
+      // The transition belongs to the grid, which in a popup is not the container.
+      grid.style.transitionProperty = 'none'
+
       gtcOrigin = window
         .getComputedStyle(grid)
         .gridTemplateColumns.split(' ')
@@ -101,15 +103,16 @@ const onPointerDown = (e: PointerEvent) => {
   }
 }
 
-const onPointerUp = (e: PointerEvent) => {
+const onPointerUp = (e: PointerEvent, save = true) => {
   panel = null
   pointerIsDown = false
+  if (grid) {
+    grid.style.removeProperty('transition-property')
+    grid = null
+  }
   if (e.target instanceof HTMLElement) {
     container = e.target.closest<HTMLElement>('.Page-content, .Popup')
   }
-  if (container && ogTransProp) {
-    container.style.transitionProperty = ogTransProp
-  }
   if (container?.classList.contains('Popup')) {
     container.style.cursor = 'initial'
     container.style.userSelect = 'unset'
@@ -128,7 +131,9 @@ const onPointerUp = (e: PointerEvent) => {
   }
 
   if (panelData && panelData.width) {
-    savePreferredWidth(panelData)
+    // A cancelled drag (scroll gesture stealing the pointer) shouldn't persist its
+    // interrupted width.
+    if (save) savePreferredWidth(panelData)
     panelData = null
   }
 }
@@ -156,7 +161,11 @@ const onPointerMove = (e: PointerEvent) => {
 
 const initResizablePanel = () => {
   onFind('.ContentEdit-main', (cl) => {
-    cl.append(
+    // Appended to the grid, not the scrolling form: see ContentEdit.css.
+    const grid = cl.closest<HTMLElement>('.Page-content, .Popup-content')
+    if (!grid || grid.querySelector(':scope > .ContentEdit-resizeWrapper'))
+      return
+    grid.append(
       create(
         'div',
         { className: 'ContentEdit-resizeWrapper' },
@@ -167,6 +176,11 @@ const initResizablePanel = () => {
 
   document.body.addEventListener('pointerdown', onPointerDown, false)
   document.body.addEventListener('pointerup', onPointerUp, false)
+  document.body.addEventListener(
+    'pointercancel',
+    (e) => onPointerUp(e, false),
+    false,
+  )
   document.body.addEventListener('pointermove', onPointerMove, false)
 
   // Check if there's a preferred width for the content form

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;
@@ -515,6 +513,14 @@
     @apply pointer-events-auto;
   }
 
+  .CIG-note :where(a, button, [role='button'], btu-copy-to-clipboard) {
+    @apply pointer-events-auto cursor-pointer;
+  }
+
+  .CIG-note a {
+    @apply text-primary-600;
+  }
+
   .MultiSortable:hover {
     @apply cursor-[unset];
   }
@@ -684,10 +690,6 @@
   @apply !pointer-events-auto !opacity-100;
 }
 
-.CIG-row.is-unlabeled > .AIChatButton {
-  @apply absolute right-0 top-[calc(-1_*_var(--button-size-md))] ms-0 ![display:initial];
-}
-
 /* Focus state for CIG-small in read-only rows */
 :is(.CIG-row.is-readOnly, .CIG.is-readOnly) .CIG-small:focus-within {
   @apply rounded-lg outline-dashed outline-[4px] outline-gray-300;

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

@@ -1,5 +1,5 @@
 .Conversation {
-  --post-form-h: 198px; /* this magic number is the approx height of the post form to reduce the jittering of the height while the RTE renders. */
+  --post-form-h: 136px; /* this magic number is the approx height of the post form to reduce the jittering of the height while the RTE renders. */
   @apply !col-[fullbleed-start_/_fullbleed-end] grid min-h-0 grid-rows-[minmax(0px,1fr)_minmax(var(--post-form-h),auto)];
 }
 
@@ -94,7 +94,7 @@
 }
 
 .Conversation-workflowStateIcon {
-  @apply flex before:btu-icon before:btu-icon-arrow-right before:font-semibold before:text-gray-500 before:btu-icon-xs;
+  @apply flex 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;
 }
 
 .Conversation-text {
@@ -128,11 +128,19 @@
 
 /* TODO: revisit newPost when ProseMirror is styled */
 .Conversation-newPost {
-  @apply flex flex-col items-end gap-4 border-t border-t-gray-200 p-4;
+  @apply flex flex-row items-end gap-3 border-t border-t-gray-200 p-4;
+
+  .CIG-small {
+    @apply mt-0;
+  }
 }
 
 .Conversation-newPost .ProseMirrorContainer {
   @apply bg-white;
+
+  .ProseMirror {
+    @apply py-4;
+  }
 }
 
 .Conversation-newPostButton {
@@ -181,6 +189,10 @@
     }
   }
 
+  .Conversation-newPost {
+    @apply flex-col;
+  }
+
   .Conversation-posts {
     @apply max-h-[calc(100vh-3.3rem)] overflow-y-auto;
   }
@@ -212,10 +224,6 @@
       @apply blokk max-h-[300px] overflow-y-auto;
     }
   }
-
-  .Conversation {
-    @apply flex min-h-max flex-col;
-  }
 }
 
 .Popup[name='conversation-reply'] {
@@ -225,6 +233,10 @@
     .Conversation-posts {
       @apply overflow-y-visible;
     }
+
+    .Conversation-newPost {
+      @apply flex-col;
+    }
   }
 }
 

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

@@ -78,6 +78,10 @@ html::view-transition-new(dashboard-widget) {
       &:has(> a:focus-visible) {
         @apply ring-inset;
       }
+
+      &:not(:first-child) {
+        @apply mt-0;
+      }
     }
 
     > li > a {

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/EmbeddedInputGroup/index.ts

@@ -13,11 +13,7 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
   @queryAsync('.EIG-item')
   _eigItem?: Promise<HTMLElement>
 
-  @queryAsync('.EIG-title')
-  _title?: Promise<HTMLElement>
-
-  @queryAsync('.removeButton')
-  _removeButton?: Promise<HTMLElement>
+  private _watchingItems = false
 
   connectedCallback(): void {
     super.connectedCallback()
@@ -25,29 +21,6 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
     this.initializeEigItem()
   }
 
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    this._removeButton?.then((removeButton) => {
-      removeButton?.removeEventListener('click', (evt) => {
-        this._removeItem(evt)
-      })
-    })
-
-    this._title?.then((title) => {
-      title?.removeEventListener('click', () => {
-        this._eigToggle()
-      })
-
-      title?.removeEventListener('keydown', ({ key }) => {
-        if (key === 'Enter' || key === 'Space' || key === ' ') {
-          event?.preventDefault()
-          this._eigToggle()
-        }
-      })
-    })
-  }
-
   private _eigToggle = () => {
     this._eigItem?.then((eigItem) => {
       if (eigItem) {
@@ -101,6 +74,9 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
             if (eigLiveRegion) eigLiveRegion.textContent = tooltips?.restore
           }
         }
+
+        // Fire a change event so the content-state pipeline recomputes and the live preview reflects the removed/restored item.
+        eigItem.dispatchEvent(new Event('change', { bubbles: true }))
       }
     })
   }
@@ -114,43 +90,36 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
   }
 
   initializeEigItem() {
+    // Register the watcher once; onFind then binds each .EIG-item's controls exactly once — on initial load, on Add, and when the item is swapped.
+    if (!this._watchingItems) {
+      this._watchingItems = true
+      onFind(this, '.EIG-item', (eigItem: HTMLElement) => {
+        const title = eigItem.querySelector<HTMLElement>('.EIG-title')
+        const removeButton = eigItem.querySelector<HTMLElement>('.removeButton')
+        this.titleAddEventListeners(title)
+        this.removeButtonAddEventListeners(removeButton)
+      })
+    }
+
+    // Restore the previously-collapsed state.
     this._eigItem?.then((eigItem) => {
       if (eigItem) {
         const associatedDataField = eigItem.closest<HTMLElement>('[data-field]')
-        const itemClassList = eigItem.classList
-        let key = null
 
-        // Check if item is collapsed previously
         if (associatedDataField) {
-          key = getComponentKey(associatedDataField, 'data-field')
+          const key = getComponentKey(associatedDataField, 'data-field')
           if (key && ls.getItem(key)) {
-            itemClassList.add('is-collapsed')
+            eigItem.classList.add('is-collapsed')
             eigItem.querySelector('.CIG-large')?.setAttribute('hidden', '')
           }
         }
-      } else {
-        // No EIG item has been added yet (i.e., Add Module) so monitor for it.
-        onFind(this, '.EIG-item', (eigItem: HTMLElement) => {
-          const title = eigItem.querySelector<HTMLElement>('.EIG-title')
-          const removeButton =
-            eigItem.querySelector<HTMLElement>('.removeButton')
-          this.titleAddEventListeners(title)
-          this.removeButtonAddEventListeners(removeButton)
-        })
       }
     })
-
-    this._title?.then((title) => {
-      this.titleAddEventListeners(title)
-    })
-
-    this._removeButton?.then((removeButton) => {
-      this.removeButtonAddEventListeners(removeButton)
-    })
   }
 
   titleAddEventListeners(title: HTMLElement | null) {
     if (!title) return
+
     title.addEventListener('click', () => {
       this._eigToggle()
     })
@@ -166,6 +135,7 @@ export default class EmbeddedInputGroup extends EventEmitterMixin(LitElement) {
 
   removeButtonAddEventListeners(removeButton: HTMLElement | null) {
     if (!removeButton) return
+
     const eigLiveRegion = create('span', {
       class: 'screen-reader-only',
       'aria-live': 'polite',