Atomic v360 bump

blocks/atomic-search/atomic-search.css

@@ -25,6 +25,18 @@
   --atomic-search-skeleton-margin-top: 0px;
 }
 
+/* Flatten Atomic 3.60+ Lit theme tokens to match ExL prod (Atomic 3.13) chrome. */
+.atomic-search atomic-search-interface {
+  --atomic-border-radius: 0;
+  --atomic-border-radius-md: 0;
+  --atomic-border-radius-lg: 0;
+  --atomic-background: transparent;
+
+  /* Kill Atomic 3.60 default 1.5rem/1rem layout gaps that inflate section margins. */
+  --atomic-layout-spacing-x: 0;
+  --atomic-layout-spacing-y: 0;
+}
+
 .atomic-search-premium-search-wrapper {
   position: relative;
   min-height: var(--atomic-search-premium-search-height, 0);
@@ -403,9 +415,11 @@
 }
 
 @media only screen and (min-width: 1024px) {
-  .atomic-search atomic-search-interface atomic-search-layout[id^='atomic-search-layout'] {
+  .atomic-search atomic-search-interface atomic-search-layout[id^='atomic-search-layout'],
+  .atomic-search atomic-search-interface atomic-search-layout {
     grid-template-columns: 0 20% 80% !important;
-    grid-column-gap: 16px;
+    grid-column-gap: 0;
+    column-gap: 0;
   }
 
   .atomic-load-skeleton-main {
@@ -476,7 +490,18 @@
   }
 
   .section.atomic-search-container .atomic-search-wrapper {
+    box-sizing: border-box;
+    width: 100%;
     max-width: 1440px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .section.atomic-search-container .atomic-search-wrapper .atomic-search,
+  .section.atomic-search-container .atomic-search-wrapper atomic-search-interface,
+  .section.atomic-search-container .atomic-search-wrapper atomic-search-layout {
+    width: 100%;
+    max-width: 100%;
   }
 
   .atomic-search button.facet-close-btn {

blocks/atomic-search/atomic-search.js

@@ -156,8 +156,10 @@ export default function decorate(block) {
       atomicResultPageHandler(block.querySelector('atomic-results-per-page'));
     };
 
+    // Wait for components we actually mount. Atomic 3.60+ lazy-registers CE definitions;
+    // we use atomic-folded-result-list (not atomic-result-list), so waiting on the latter hangs forever.
     Promise.all([
-      customElements.whenDefined('atomic-result-list'),
+      customElements.whenDefined('atomic-folded-result-list'),
       customElements.whenDefined('atomic-result'),
       customElements.whenDefined('atomic-result-multi-value-text'),
       customElements.whenDefined('atomic-search-box'),
@@ -166,11 +168,18 @@ export default function decorate(block) {
       customElements.whenDefined('atomic-breadbox'),
       customElements.whenDefined('atomic-pager'),
       customElements.whenDefined('atomic-no-results'),
-      customElements.whenDefined('atomic-search-box'),
       customElements.whenDefined('atomic-results-per-page'),
       customElements.whenDefined('atomic-notifications'),
     ]).then(() => {
       atomicNoResultHandler(block, placeholders);
+      // Register before commonActionHandler — facet init can fire FACET_LOADED synchronously.
+      document.addEventListener(
+        CUSTOM_EVENTS.FACET_LOADED,
+        () => {
+          resolveBlockLevelSkeleton(block);
+        },
+        { once: true },
+      );
       commonActionHandler();
       decorateIcons(block);
       let eventFiredOnPageLoad = false;
@@ -224,14 +233,6 @@ export default function decorate(block) {
         filters: placeholders.searchFiltersLabel || 'Filters',
       });
 
-      document.addEventListener(
-        CUSTOM_EVENTS.FACET_LOADED,
-        () => {
-          resolveBlockLevelSkeleton(block);
-        },
-        { once: true },
-      );
-
       const trackingHandler = (event) => {
         const isResizeAction = event?.detail?.callFrom === 'resize';
         if (isResizeAction) {

blocks/atomic-search/components/atomic-facet-engine-helpers.js

@@ -167,7 +167,7 @@ export function applyFacetRawValuesToDom(parentWrapper, engineValues, placeholde
       delete li.dataset.updated;
       delete li.dataset.childfacet;
       delete li.dataset.parent;
-      li.querySelector('[part="only-facet-btn"]')?.remove();
+      li.querySelector('[part~="only-facet-btn"]')?.remove();
       delete li.dataset.onlyfacet;
       li.part?.remove('facet-child-element');
       const labelEl = li.querySelector('label');

blocks/atomic-search/components/atomic-search-breadbox.js

@@ -1,8 +1,12 @@
-import { CUSTOM_EVENTS, isUserClick } from './atomic-search-utils.js';
+import { CUSTOM_EVENTS, isUserClick, waitFor } from './atomic-search-utils.js';
 
 export default function atomicBreadBoxHandler(baseElement) {
+  let listObserver = null;
+  let listObserveRetryPending = false;
+
   function updateFilterClearBtnStyles(enabled) {
     const clearBtn = document.querySelector('.clear-label');
+    if (!clearBtn) return;
     if (enabled) {
       clearBtn.classList.add('clear-btn-enabled');
     } else {
@@ -15,6 +19,22 @@ export default function atomicBreadBoxHandler(baseElement) {
     document.dispatchEvent(event);
   }
 
+  /**
+   * Atomic 3.13 toggled visibility via `.atomic-hidden` on the host.
+   * Atomic 3.60+ (Lit) often leaves className empty and only swaps display / crumbs.
+   * Drive Clear All from active breadcrumbs so both versions stay in sync with prod.
+   */
+  function hasActiveBreadcrumbs() {
+    const list = baseElement.shadowRoot?.querySelector('[part="breadcrumb-list"]');
+    if (!list) return false;
+    return list.querySelectorAll('li.breadcrumb').length > 0;
+  }
+
+  function isBreadboxEnabled() {
+    if (baseElement.className?.includes('atomic-hidden')) return false;
+    return hasActiveBreadcrumbs();
+  }
+
   function attachListeners() {
     const parentWrapper = baseElement.shadowRoot.querySelector(`[part="breadcrumb-list"]`);
     if (!parentWrapper) {
@@ -74,32 +94,56 @@ export default function atomicBreadBoxHandler(baseElement) {
     });
   }
 
-  function observeBreadboxUI(enabled) {
-    const targetElement = baseElement.shadowRoot.querySelector(`[part="breadcrumb-list"]`);
+  function syncFromBreadcrumbs({ emitFilterUpdate = true } = {}) {
+    const enabled = isBreadboxEnabled();
+    updateFilterClearBtnStyles(enabled);
     if (enabled) {
-      const observer = new MutationObserver(() => {
-        attachListeners();
-        onFilterUpdate();
-      });
-      observer.observe(targetElement, { childList: true });
-    } else {
+      attachListeners();
+    }
+    if (emitFilterUpdate) {
       onFilterUpdate();
     }
   }
 
+  function observeBreadcrumbList() {
+    const targetElement = baseElement.shadowRoot?.querySelector(`[part="breadcrumb-list"]`);
+    if (!targetElement) {
+      // Retry until Lit mounts the breadcrumb list; coalesce concurrent retries.
+      if (!listObserveRetryPending) {
+        listObserveRetryPending = true;
+        waitFor(() => {
+          listObserveRetryPending = false;
+          observeBreadcrumbList();
+        });
+      }
+      return;
+    }
+    listObserveRetryPending = false;
+    if (listObserver) {
+      listObserver.disconnect();
+    }
+    listObserver = new MutationObserver(() => {
+      syncFromBreadcrumbs();
+    });
+    listObserver.observe(targetElement, { childList: true, subtree: true });
+    syncFromBreadcrumbs();
+  }
+
   const observer = new MutationObserver((mutationsList) => {
     mutationsList.forEach((mutation) => {
       if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-        const enabled = !baseElement.className.includes('atomic-hidden');
-        updateFilterClearBtnStyles(enabled);
-        observeBreadboxUI(enabled);
-        attachListeners();
+        // Keep legacy Atomic 3.13 class-toggle path.
+        syncFromBreadcrumbs();
+        observeBreadcrumbList();
+      }
+      if (mutation.type === 'childList') {
+        observeBreadcrumbList();
       }
     });
   });
 
   function onResultsUpdate() {
-    onFilterUpdate();
+    syncFromBreadcrumbs();
   }
 
   function hideSection() {
@@ -110,9 +154,10 @@ export default function atomicBreadBoxHandler(baseElement) {
     baseElement.style.display = '';
   }
 
-  document.addEventListener(CUSTOM_EVENTS.RESULT_UPDATED, onResultsUpdate, { once: true });
+  document.addEventListener(CUSTOM_EVENTS.RESULT_UPDATED, onResultsUpdate);
   document.addEventListener(CUSTOM_EVENTS.NO_RESULT_FOUND, hideSection);
   document.addEventListener(CUSTOM_EVENTS.RESULT_FOUND, showSection);
 
   observer.observe(baseElement, { attributes: true, attributeFilter: ['class'], childList: true });
+  observeBreadcrumbList();
 }