@coveo/quantic 3.43.3 → 3.43.4

package/force-app/main/default/lwc/quanticGeneratedAnswerThread/quanticGeneratedAnswerThread.css

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: 10px 1fr;
   grid-template-rows: auto 1fr;
-  column-gap: var(--lwc-spacingXSmall, 8px);
+  column-gap: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 8px));
 }
 
 .generated-answer-thread__timeline {
@@ -13,21 +13,21 @@
 .generated-answer-thread__dot-column {
   width: 10px;
   height: 1lh;
-  margin-block: var(--lwc-spacingXxSmall, 4px);
+  margin-block: var(--slds-g-spacing-1, var(--lwc-spacingXxSmall, 4px));
 }
 
 .generated-answer-thread__dot {
-  height: 8px;
-  width: 8px;
+  height: var(--slds-g-sizing-3, 8px);
+  width: var(--slds-g-sizing-3, 8px);
   border-radius: 50%;
-  background-color: var(--lwc-colorBorder, #dddbda);
+  background-color: var(--slds-g-color-neutral-base-90, var(--lwc-colorBorder, #dddbda));
 }
 
 .generated-answer-thread__connector {
   position: relative;
   flex: 1;
   width: 1px;
-  background-color: var(--lwc-colorBorder, #dddbda);
+  background-color: var(--slds-g-color-neutral-base-90, var(--lwc-colorBorder, #dddbda));
 }
 
 .generated-answer-thread__connector::before,
@@ -36,8 +36,8 @@
   position: absolute;
   left: 0;
   width: 1px;
-  height: 8px;
-  background-color: var(--lwc-colorBorder, #dddbda);
+  height: var(--slds-g-sizing-3, 8px);
+  background-color: var(--slds-g-color-neutral-base-90, var(--lwc-colorBorder, #dddbda));
 }
 
 .generated-answer-thread__connector::before {

package/force-app/main/default/lwc/quanticInsightSummary/quanticInsightSummary.css

@@ -1,5 +1,6 @@
 .initial-summary-message {
-  background-color: #d8e6fe;
+  background-color: var(--slds-g-color-brand-base-90, #d8e6fe);
+  /* stylelint-disable-next-line slds/no-hardcoded-values-slds2 */
   color: #54698d;
   width: 100%;
 }

package/force-app/main/default/lwc/quanticModal/quanticModal.css

@@ -1,5 +1,5 @@
 .modal {
-  background-color: var(--lwc-colorBackgroundAlt, rgb(255, 255, 255));
+  background-color: var(--slds-g-color-surface-1, var(--lwc-colorBackgroundAlt, rgb(255, 255, 255)));
   top: 0;
   left: 0;
   display: flex;
@@ -28,7 +28,7 @@
 }
 
 .modal__header {
-  background-color: var(--lwc-colorBackground, rgb(243, 243, 243));
+  background-color: var(--slds-g-color-surface-2, var(--lwc-colorBackground, rgb(243, 243, 243)));
 }
 
 .modal__container {
@@ -44,7 +44,7 @@
 }
 
 .modal__footer {
-  background-color: var(--lwc-colorBackground, rgb(243, 243, 243));
+  background-color: var(--slds-g-color-surface-2, var(--lwc-colorBackground, rgb(243, 243, 243)));
 }
 
 .part-screen {

package/force-app/main/default/lwc/quanticNotifications/e2e/fixture.ts

@@ -27,6 +27,7 @@ export const testSearch =
       await use(new SearchObjectWithNotifyTrigger(page, searchRequestRegex));
     },
     notifications: async ({page, configuration, search}, use) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure();
       await search.waitForSearchResponse();
@@ -46,11 +47,14 @@ export const testInsight =
       await use(new InsightSetupObject(page));
     },
     notifications: async ({page, search, configuration, insightSetup}, use) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure({useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await use(new NotificationsObject(page));
     },
   });

package/force-app/main/default/lwc/quanticNotifications/quanticNotifications.css

@@ -1,6 +1,6 @@
 .notification {
-  background-color: var(---lwc-colorBackgroundAlt, white);
-  border: 1px solid var(--lwc-colorBackgroundToast, rgb(116, 116, 116));
+  background-color: var(--lwc-colorBackgroundAlt, white);
+  border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-50, var(--lwc-colorBackgroundToast, rgb(116, 116, 116)));
   margin-right: 0;
   margin-left: 0;
   width: 100%;

package/force-app/main/default/lwc/quanticPill/quanticPill.css

@@ -1,11 +1,11 @@
 .pill__container {
   display: flex;
   flex-direction: row;
-  border-radius: .25rem;
+  border-radius: var(--slds-g-radius-border-2, .25rem);
 }
 
 .pill__container:hover {
-  background-color: #f6f7f9;
+  background-color: var(--slds-g-color-surface-2, #f6f7f9);
 }
 
 .pill__text-container {

package/force-app/main/default/lwc/quanticPlaceholder/quanticPlaceholder.css

@@ -2,10 +2,6 @@
   flex-grow: 1;
 }
 
-.placeholder__card-container {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 
 .placeholder__round {
   min-width: 13px;
@@ -48,11 +44,11 @@
 }
 
 .grey {
-  background-color: #E9EAEC;
+  background-color: var(--slds-g-color-surface-container-1, #E9EAEC);
 }
 
 .light-grey {
-  background-color: #F5F5F6;
+  background-color: var(--slds-g-color-surface-2, #F5F5F6);
 }
 
 .placeholder__animation {

package/force-app/main/default/lwc/quanticPlaceholder/quanticPlaceholder.html

@@ -2,7 +2,7 @@
   <template if:true={shouldDisplay}>
     <div class="slds-p-horizontal_x-small">
       <template if:true={isCardVariant}>
-        <div class="placeholder__card-container slds-grid_vertical">
+        <div class="placeholder__card-container slds-p-vertical_medium slds-grid_vertical">
           <div class="slds-col slds-m-bottom_large">
             <div class="grey placeholder__card-header placeholder__rounded placeholder__animation"></div>
           </div>

package/force-app/main/default/lwc/quanticRadioButtonsGroup/quanticRadioButtonsGroup.css

@@ -1,15 +1,15 @@
 :host {
   --neutral-color: rgb(94, 94, 94);
   --hover-background-color: #F4F6F9;
-  --hover-color: var(--lwc-brandAccessible,#2574A9);
-  --lwc-brandAccessibleActive: var(--hover-color);
+  --hover-color: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #2574A9));
+  --lwc-brandAccessibleActive: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #2574A9));
   --color-gray-6: rgb(201, 199, 197);
   --radio-button-box-shadow: 0 0 3px #0176d3;
   --lwc-shadowButtonFocus: none;
 }
 
 .radio-buttons-group__legend {
-  color: var(--lwc-colorTextPlaceholder, #747474);
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, #747474));
   font-weight: var(--slds-g-font-weight-4, normal);
   font-size: inherit;
   padding-top: 0;
@@ -38,13 +38,13 @@
 }
 
 .radio-button:first-child {
-  border-top-left-radius: var(--lwc-borderRadiusMedium, 0.25rem);
-  border-bottom-left-radius: var(--lwc-borderRadiusMedium, 0.25rem);
+  border-top-left-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
+  border-bottom-left-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
 }
 
 .radio-button:last-child {
-  border-top-right-radius: var(--lwc-borderRadiusMedium, 0.25rem);
-  border-bottom-right-radius: var(--lwc-borderRadiusMedium, 0.25rem);
+  border-top-right-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
+  border-bottom-right-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
 }
 
 .radio-button--selected:hover,
@@ -65,8 +65,8 @@
 .radio-button--selected,
 .radio-button--selected:hover,
 .radio-button--selected:focus {
-  background-color: var(--lwc-brandAccessible,#2574A9);
-  color: var(--lwc-colorTextButtonBrand,#FFFFFF);
+  background-color: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible,#2574A9));
+  color: var(--slds-g-color-on-accent-1, var(--lwc-colorTextButtonBrand,#FFFFFF));
 }
 
 .radio-button--selected:focus-within,

package/force-app/main/default/lwc/quanticRecentQueriesList/e2e/fixture.ts

@@ -31,6 +31,7 @@ export const testSearch =
       {page, options, configuration, search, urlHash},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(urlHash ? `${pageUrl}#${urlHash}` : pageUrl);
       configuration.configure(options);
       await search.waitForSearchResponse();

package/force-app/main/default/lwc/quanticRecentQueriesList/quanticRecentQueriesList.css

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: row;
   min-width: 0;
-  border-radius: .25rem;
+  border-radius: var(--slds-g-radius-border-2, .25rem);
   line-height: var(--lwc-lineHeightText, 1.5);
 }
 
@@ -13,17 +13,13 @@ a {
 }
 
 .recent-query__container:hover {
-  background-color: #f6f7f9;
+  background-color: var(--slds-g-color-surface-2, #f6f7f9);
 }
 
 .query-text__container {
   min-width: 0;
 }
 
-.recent-query__icon {
-  margin-right: 0.5rem;
-}
-
 .empty-list-message {
-  color: var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474));
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474)));
 }

package/force-app/main/default/lwc/quanticRecentQueriesList/quanticRecentQueriesList.html

@@ -26,7 +26,7 @@
                   <li key={query} class="slds-grid" value={index} onclick={executeQuery} data-testid="recent-query-item">
                     <button
                       class="slds-button recent-query__container slds-grid_vertical-align-center slds-size_1-of-1 slds-p-around_x-small">
-                      <lightning-icon class="recent-query__icon slds-current-color" icon-name="utility:search"
+                      <lightning-icon class="recent-query__icon slds-m-right_x-small slds-current-color" icon-name="utility:search"
                         size="xx-small" aria-hidden="true"></lightning-icon>
                       <span class="slds-text-body_small query-text__container slds-truncate" data-testid="recent-query-text">{query}</span>
                     </button>

package/force-app/main/default/lwc/quanticRecentResultsList/e2e/fixture.ts

@@ -30,6 +30,7 @@ export const testSearch =
       {page, options, configuration, search, urlHash, analytics},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(urlHash ? `${pageUrl}#${urlHash}` : pageUrl);
       const searchResponsePromise = search.waitForSearchResponse();
       await configuration.configure(options);

package/force-app/main/default/lwc/quanticRecentResultsList/quanticRecentResultsList.css

@@ -4,17 +4,13 @@
   display: flex;
   flex-direction: row;
   min-width: 0;
-  color:  var(--lwc-brandTextLink, #0176d3);
+  color: var(--slds-s-link-color, var(--lwc-brandTextLink, #0176d3));
 }
 
 .result-link__container {
   min-width: 0;
 }
 
-.recent-result__icon {
-  margin-right: .5rem;
-}
-
 .empty-list-message {
-  color: var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474));
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474)));
 }

package/force-app/main/default/lwc/quanticRecentResultsList/quanticRecentResultsList.html

@@ -24,7 +24,7 @@
                   <li class="slds-grid" key={result.uniqueId} data-testid="recent-result-item">
                     <div
                       class="recent-result__container slds-grid_vertical-align-center slds-size_1-of-1 slds-p-around_x-small">
-                      <lightning-icon class="recent-result__icon slds-current-color" icon-name="utility:page"
+                      <lightning-icon class="recent-result__icon slds-m-right_x-small slds-current-color" icon-name="utility:page"
                         alternative-text="page icon" size="xx-small"></lightning-icon>
                       <div class="slds-text-body_small result-link__container">
                         <c-quantic-recent-result-link result={result} engine-id={engineId}

package/force-app/main/default/lwc/quanticRecommendationList/e2e/fixture.ts

@@ -24,6 +24,7 @@ export const test = quanticBase.extend<QuanticRecommendationListE2EFixtures>({
     await use(new SearchObject(page, searchRequestRegex));
   },
   recommendationList: async ({page, options, configuration, search}, use) => {
+    await search.mockSearchWithBaseResponse();
     await page.goto(pageUrl);
     configuration.configure(options);
     await search.waitForSearchResponse();

package/force-app/main/default/lwc/quanticRecommendationList/quanticRecommendationList.css

@@ -9,5 +9,5 @@
 .recommendation-item__content {
   height: 100%;
   overflow: hidden;
-  border-radius: var(--lwc-borderRadiusLarge, 0.5rem);
+  border-radius: var(--slds-g-radius-border-3, var(--lwc-borderRadiusLarge, 0.5rem));
 }

package/force-app/main/default/lwc/quanticRefineToggle/quanticRefineToggle.css

@@ -13,13 +13,13 @@
 }
 
 .refine-button_filters-badge {
-  background: var(--lwc-brandAccessible, #0176d3);
-  color: var(--lwc-colorBackgroundAlt, #ffffff);
+  background: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
+  color: var(--slds-g-color-surface-1, var(--lwc-colorBackgroundAlt, #ffffff));
   border-radius: 50%;
   top: -.5rem;
   right: -.5rem;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--slds-g-sizing-6, 1.25rem);
+  height: var(--slds-g-sizing-6, 1.25rem);
   font-weight: var(--slds-g-font-weight-7, bold);
   z-index: 1;
 }

package/force-app/main/default/lwc/quanticResultActionStyles/quanticResultActionStyles.css

@@ -1,7 +1,7 @@
 .result-action_white-container {
-  background-color: white;
+  background-color: var(--slds-g-color-surface-1, white);
   display: inline-block;
-  border-radius: var(--slds-g-sizing-border-4, 0.25rem);
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
 }
 
 .result-action_button {

package/force-app/main/default/lwc/quanticResultCopyToClipboard/e2e/fixture.ts

@@ -34,11 +34,14 @@ export const testInsight =
       {page, options, search, configuration, insightSetup},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure(options);
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await use(new ResultCopyToClipboard(page));
     },
   });

package/force-app/main/default/lwc/quanticResultLink/quanticResultLink.css

@@ -1,3 +1,3 @@
 a {
-  color: var(--lwc-colorTextLinkActive, #0f2d5d);
+  color: var(--slds-s-link-color-active, var(--lwc-colorTextLinkActive, #0f2d5d));
 }

package/force-app/main/default/lwc/quanticResultList/e2e/fixture.ts

@@ -32,6 +32,7 @@ export const testSearch =
       await use(new SearchObject(page, searchRequestRegex));
     },
     resultList: async ({page, options, configuration, search}, use) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure(options);
       await search.waitForSearchResponse();
@@ -53,11 +54,14 @@ export const testInsight =
       {page, options, search, configuration, insightSetup},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await search.waitForSearchResultsVisible();
       await use(new ResultListObject(page));
     },

package/force-app/main/default/lwc/quanticResultPrintableUri/quanticResultPrintableUri.css

@@ -1,6 +1,6 @@
 .result-parenturi__container {
   font-size: .9em;
-  color: #C5CACF
+  color: var(--slds-g-color-on-surface-1, #C5CACF);
 }
 
 .result-parenturi__container:last-child {

package/force-app/main/default/lwc/quanticResultQuickview/e2e/fixture.ts

@@ -43,7 +43,8 @@ export const testSearch =
         )
       );
     },
-    resultQuickview: async ({page, options, configuration}, use) => {
+    resultQuickview: async ({page, options, configuration, search}, use) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(resultQuickviewUrl);
       await configuration.configure(options);
       await use(new ResultQuickviewObject(page));
@@ -69,11 +70,14 @@ export const testInsight =
       {page, options, search, configuration, insightSetup},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(resultQuickviewUrl);
       await configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await use(new ResultQuickviewObject(page));
     },
   });

package/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.css

@@ -10,22 +10,22 @@
 }
 
 .quickview__result-date {
-  color: #3E3E3C;
+  color: var(--slds-g-color-on-surface-2, #3E3E3C);
   font-weight: var(--slds-g-font-weight-4, normal);
   font-size: var(--slds-g-font-scale-2, 15px);
 }
 
 .quickview__button-base:not([disabled]){
-  border-radius: 0.25rem;
-  color: var(--lwc-colorTextLinkActive, #0f2d5d);
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
+  color: var(--slds-s-link-color-active, var(--lwc-colorTextLinkActive, #0f2d5d));
 }
 
 .quickview__button-base:not([disabled]):hover {
-  background-color: #f6f7f9;
-  box-shadow: 0 0 0 0.25rem #f6f7f9;
+  background-color: var(--slds-g-color-surface-2, #f6f7f9);
+  box-shadow: 0 0 0 0.25rem var(--slds-g-color-surface-2, #f6f7f9);
 }
 
 .quickview-modal__footer {
-  background-color: white;
+  background-color: var(--slds-g-color-surface-1, white);
   text-align: unset;
 }

package/force-app/main/default/lwc/quanticResultTag/quanticResultTag.css

@@ -1,7 +1,9 @@
+/* stylelint-disable-next-line slds/no-hardcoded-values-slds2 */
 .recommended-tag {
   background-color: #4fbe75;
 }
 
+/* stylelint-disable-next-line slds/no-hardcoded-values-slds2 */
 .featured-tag {
   background-color: #b070e6;
 }

package/force-app/main/default/lwc/quanticResultTemplate/quanticResultTemplate.css

@@ -10,7 +10,7 @@
 
 .date__container{
   font-size: .9em;
-  color:#3E3E3C;
+  color: var(--slds-g-color-on-surface-2, #3E3E3C);
 }
 
 /* max-width value comes from SLDS definition of `slds-medium-size`. "See https://www.lightningdesignsystem.com/utilities/grid/#Responsive-Layout-Options.*/

package/force-app/main/default/lwc/quanticResultsPerPage/e2e/fixture.ts

@@ -42,6 +42,7 @@ export const testSearch =
       {page, options, configuration, search, urlHash},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(
         urlHash ? `${resultsPerPageUrl}#${urlHash}` : resultsPerPageUrl
       );
@@ -64,11 +65,14 @@ export const testInsight =
       {page, options, search, configuration, insightSetup},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(resultsPerPageUrl);
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await use(new ResultsPerPageObject(page));
     },
   });

package/force-app/main/default/lwc/quanticSearchBox/e2e/fixture.ts

@@ -48,6 +48,7 @@ export const testSearch = quanticBase.extend<QuanticSearchBoxE2ESearchFixtures>(
       {page, options, configuration, search, urlHash, analytics},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(urlHash ? `${pageUrl}#${urlHash}` : pageUrl);
 
       configuration.configure(options);
@@ -70,9 +71,10 @@ export const testInsight =
       await use(new InsightSetupObject(page));
     },
     searchBox: async (
-      {page, options, configuration, insightSetup, analytics},
+      {page, options, configuration, insightSetup, analytics, search},
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(pageUrl);
 
       configuration.configure({...options, useCase: useCaseEnum.insight});

package/force-app/main/default/lwc/quanticSearchBoxInput/templates/defaultSearchBoxInput.css

@@ -5,5 +5,5 @@
 }
 
 input {
-  border: var(--lwc-borderWidthThin, 1px) solid var(--lwc-brandAccessible, #0176d3);
+  border: var(--slds-g-sizing-border-1, var(--lwc-borderWidthThin, 1px)) solid var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
 }

package/force-app/main/default/lwc/quanticSearchBoxInput/templates/expandableSearchBoxInput.css

@@ -4,14 +4,6 @@
   margin: inherit;
 }
 
-.searchbox__icon-container-left {
-  margin-left: 0.5rem;
-}
-
-.searchbox__icon-container-right {
-  margin-right: 0.5rem;
-}
-
 /* This is to override some style from the slds-has-input and prevent */
 /* the search icon from sliding down as the searchbox expands */
 .searchbox__search-icon {
@@ -21,7 +13,7 @@
 
 .searchbox__container {
   overflow: visible;
-  border: var(--lwc-borderWidthThin, 1px) solid var(--lwc-brandAccessible, #0176d3);
+  border: var(--slds-g-sizing-border-1, var(--lwc-borderWidthThin, 1px)) solid var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
 }
 
 .z-index-high {
@@ -43,7 +35,7 @@ textarea.searchbox__input {
 
 .searchbox__submit-button {
   border: none;
-  border-radius: 0 var(--lwc-borderRadiusMedium, 0.25rem) var(--lwc-borderRadiusMedium, 0.25rem) 0;
+  border-radius: 0 var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem)) var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem)) 0;
 }
 
 .searchbox__container-wrapper {
@@ -54,6 +46,6 @@ textarea.searchbox__input {
 .searchbox_floating-container {
   position: absolute;
   width: 100%;
-  background-color: var(--lwc-colorBackgroundAlt, rgb(255, 255, 255));
-  border-radius: 0.25rem;
+  background-color: var(--slds-g-color-surface-1, var(--lwc-colorBackgroundAlt, rgb(255, 255, 255)));
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
 }

package/force-app/main/default/lwc/quanticSearchBoxInput/templates/expandableSearchBoxInput.html

@@ -9,7 +9,7 @@
             <div class={searchBoxContainerClass} role="none">
               <template if:true={withoutSubmitButton}>
                 <div
-                  class="slds-grid slds-align_absolute-center searchbox__icon-container searchbox__icon-container-left"
+                  class="slds-grid slds-align_absolute-center searchbox__icon-container slds-m-left_x-small"
                 >
                   <lightning-icon
                     class="slds-icon slds-input__icon slds-input__icon_left searchbox__search-icon"
@@ -42,7 +42,7 @@
 
               <template if:false={isQueryEmpty}>
                 <div
-                  class="slds-grid slds-align_absolute-center searchbox__icon-container searchbox__icon-container-right"
+                  class="slds-grid slds-align_absolute-center searchbox__icon-container slds-m-right_x-small"
                 >
                   <lightning-button-icon
                     onclick={clearInput}

package/force-app/main/default/lwc/quanticSearchBoxSuggestionsList/e2e/fixture.ts

@@ -59,6 +59,7 @@ export const testSearch =
       },
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(searchBoxSuggestionsListUrl);
       if (recentQueries.length > 0) {
         await querySuggest.setRecentQueries(recentQueries);
@@ -94,9 +95,11 @@ export const testInsight =
         querySuggest,
         analytics,
         recentQueries,
+        search,
       },
       use
     ) => {
+      await search.mockSearchWithBaseResponse();
       await page.goto(searchBoxSuggestionsListUrl);
       if (recentQueries.length > 0) {
         await querySuggest.setRecentQueries(recentQueries);

package/force-app/main/default/lwc/quanticSmartSnippet/e2e/fixture.ts

@@ -43,8 +43,8 @@ export const testSearch =
     ) => {
       const smartSnippetObject = new SmartSnippetObject(page);
 
-      await page.goto(pageUrl);
       await search.mockSearchWithSmartSnippetResponse(data);
+      await page.goto(pageUrl);
 
       configuration.configure(options);
       await search.waitForSearchResponse();
@@ -77,13 +77,15 @@ export const testInsight =
     ) => {
       const smartSnippetObject = new SmartSnippetObject(page);
 
-      await page.goto(pageUrl);
       await search.mockSearchWithSmartSnippetResponse(data);
+      await page.goto(pageUrl);
 
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        search.waitForSearchResponse(),
+        search.performSearch(),
+      ]);
       await use(smartSnippetObject);
     },
   });