@coveo/quantic 3.43.2 → 3.43.4

package/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.css

@@ -13,10 +13,10 @@
 
 .generated-answer-content__answer--streaming::after {
   content: '';
-  width: 0.5rem;
+  width: var(--slds-g-sizing-3, 0.5rem);
   height: 0.9rem;
   margin-left: 0.1rem;
-  background: var(--lwc-brandAccessible, #0176d3);
+  background: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
   display: inline-block;
   animation: cursor-blink 1.5s steps(2, start) infinite;
   vertical-align: baseline;
@@ -42,8 +42,8 @@ div[data-level='answer-heading-3'] {
 }
 
 div[data-level] {
-  margin-top: var(--lwc-spacingMedium, 1rem);
-  margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+  margin-top: var(--slds-g-spacing-4, var(--lwc-spacingMedium, 1rem));
+  margin-bottom: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
   font-weight: var(--slds-g-font-weight-7, bold);
 }
 
@@ -57,19 +57,19 @@ td {
 
 ol {
   list-style-type: decimal;
-  padding-inline-start: var(--lwc-spacingXLarge, 2rem);
-  margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+  padding-inline-start: var(--slds-g-spacing-6, var(--lwc-spacingXLarge, 2rem));
+  margin-bottom: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
 }
 
 ul {
   list-style-type: disc;
-  padding-inline-start: var(--lwc-spacingXLarge, 2rem);
-  margin-bottom: var(--lwc-spacingXSmall, 0.5rem);
+  padding-inline-start: var(--slds-g-spacing-6, var(--lwc-spacingXLarge, 2rem));
+  margin-bottom: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
 }
 
 code {
   padding: var(--lwc-spacingXxxSmall, 0.125rem) var(--lwc-spacingXxSmall, 0.25rem);
-  border: 1px solid;
+  border: var(--slds-g-sizing-border-1, 1px) solid;
   color: var(--quantic-genqa-inline-code);
   font-size: var(--quantic-genqa-text-small);
   background-color: var(--quantic-genqa-bg-neutral-light);
@@ -79,10 +79,10 @@ code {
 }
 
 pre {
-  padding: var(--lwc-spacingXSmall, 0.5rem);
+  padding: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 0.5rem));
   overflow: auto;
   max-height: 24rem;
-  border: 1px solid;
+  border: var(--slds-g-sizing-border-1, 1px) solid;
   background-color: var(--quantic-genqa-bg-neutral-light);
   border-color: var(--quantic-genqa-border-neutral);
   border-radius: var(--quantic-genqa-border-radius);
@@ -97,16 +97,16 @@ pre > code {
 }
 
 blockquote {
-  margin-left: var(--lwc-spacingXxLarge, 4rem);
-  margin-right: var(--lwc-spacingXxLarge, 4rem);;
+  margin-left: var(--slds-g-spacing-8, var(--lwc-spacingXxLarge, 4rem));
+  margin-right: var(--slds-g-spacing-8, var(--lwc-spacingXxLarge, 4rem));;
   font-size: italic;
 }
 
 .scrollable-table {
-  margin-top: var(--lwc-spacingLarge, 1.5rem);
-  margin-bottom: var(--lwc-spacingLarge, 1.5rem);
+  margin-top: var(--slds-g-spacing-5, var(--lwc-spacingLarge, 1.5rem));
+  margin-bottom: var(--slds-g-spacing-5, var(--lwc-spacingLarge, 1.5rem));
   display: inline-block;
-  border: 1px solid;
+  border: var(--slds-g-sizing-border-1, 1px) solid;
   overflow: auto;
   max-height: 24rem;
   border-color: var(--quantic-genqa-border-neutral-dim);
@@ -124,11 +124,11 @@ table {
 }
 
 table thead th {
-  padding: var(--lwc-spacingMedium, 1rem);
+  padding: var(--slds-g-spacing-4, var(--lwc-spacingMedium, 1rem));
   text-align: left;
   background-color: var(--quantic-genqa-bg-table-header);
-  border-bottom: solid 2px var(--quantic-genqa-border-neutral-dim);
-  border-left: solid 1px var(--quantic-genqa-border-neutral-dim);
+  border-bottom: solid var(--slds-g-sizing-border-2, 2px) var(--quantic-genqa-border-neutral-dim);
+  border-left: solid var(--slds-g-sizing-border-1, 1px) var(--quantic-genqa-border-neutral-dim);
 }
 
 table thead th:first-of-type {
@@ -141,8 +141,8 @@ tbody tr:nth-child(even) {
 
 tbody tr td {
   padding: var(--lwc-spacingMedium, 1rem);
-  border-left: solid 1px var(--quantic-genqa-border-neutral-dim);
-  border-bottom: solid 1px var(--quantic-genqa-border-neutral-dim);
+  border-left: solid var(--slds-g-sizing-border-1, 1px) var(--quantic-genqa-border-neutral-dim);
+  border-bottom: solid var(--slds-g-sizing-border-1, 1px) var(--quantic-genqa-border-neutral-dim);
 }
 
 tbody tr td:first-of-type {

package/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedTextContent.css

@@ -4,10 +4,10 @@
 
 .generated-answer-content__answer--streaming::after {
   content: '';
-  width: 0.5rem;
+  width: var(--slds-g-sizing-3, 0.5rem);
   height: 0.9rem;
   margin-left: 0.1rem;
-  background: var(--lwc-brandAccessible, #0176d3);
+  background: var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
   display: inline-block;
   animation: cursor-blink 1.5s steps(2, start) infinite;
   vertical-align: baseline;

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

@@ -3,13 +3,13 @@
 }
 
 .follow-up-input__container--error {
-  border-color: var(--lwc-colorBorderError, #ea001e);
+  border-color: var(--slds-g-color-error-base-50, var(--lwc-colorBorderError, #ea001e));
 }
 
 .follow-up-input__expander {
   display: grid;
   overflow: hidden;
-  margin-right: 2.5rem;
+  margin-right: var(--slds-g-spacing-7, 2.5rem);
 }
 
 .follow-up-input__expander::after {
@@ -26,7 +26,7 @@
   border: none;
   outline: none;
   background: transparent;
-  padding: 0.5rem 0.75rem;
+  padding: var(--slds-g-spacing-2, 0.5rem) var(--slds-g-spacing-3, 0.75rem);
   font: inherit;
   min-height: 2.5rem;
 }
@@ -39,9 +39,9 @@
   z-index: 10;
   overflow: visible;
   margin-right: 0;
-  background-color: var(--lwc-colorBackground, #fff);
-  border: 1px solid var(--lwc-brandAccessible, #0176d3);
-  border-radius: 0.25rem;
+  background-color: var(--slds-g-color-surface-1, var(--lwc-colorBackground, #fff));
+  border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-accent-container-1, var(--lwc-brandAccessible, #0176d3));
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
 }
 
 .follow-up-input__expander--expanded::after,
@@ -49,7 +49,7 @@
   white-space: pre-wrap;
   overflow-y: auto;
   max-height: 8rem;
-  padding-right: 2.5rem;
+  padding-right: var(--slds-g-spacing-7, 2.5rem);
   scrollbar-width: none;
 }
 
@@ -59,7 +59,7 @@
 
 .follow-up-input__submit-button {
   position: absolute;
-  right: 0.25rem;
-  bottom: 0.25rem;
+  right: var(--slds-g-spacing-1, 0.25rem);
+  bottom: var(--slds-g-spacing-1, 0.25rem);
   z-index: 15;
 }

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

@@ -6,8 +6,8 @@
 
 .stream-of-thought__collapsed-summary:focus-visible,
 .stream-of-thought__collapse-button:focus-visible {
-  border-radius: var(--slds-g-sizing-border-4, 0.25rem);
-  outline: 2px solid var(--lwc-brandPrimary, #1b96ff);
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
+  outline: var(--slds-g-sizing-border-2, 2px) solid var(--slds-g-color-accent-1, var(--lwc-brandPrimary, #1b96ff));
   outline-offset: 2px;
 }
 

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/quanticNumericFacet/e2e/data.ts

@@ -1,10 +1,16 @@
-const facetData = {
+const facetId = 'ytlikecount';
+const field = 'ytlikecount';
+
+/**
+ * Facet response before any value is selected.
+ */
+export const initialFacetData = {
   domain: {
     start: 0,
     end: 200,
   },
-  facetId: 'ytlikecount',
-  field: 'ytlikecount',
+  facetId,
+  field,
   moreValuesAvailable: false,
   values: [
     {
@@ -25,4 +31,18 @@ const facetData = {
   indexScore: 0.4,
 };
 
-export default facetData;
+const [firstRange, secondRange] = initialFacetData.values;
+
+/**
+ * Facet response after the first value is selected.
+ */
+export const selectedFacetData = {
+  ...initialFacetData,
+  values: [
+    {
+      ...firstRange,
+      state: 'selected',
+    },
+    secondRange,
+  ],
+};

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

@@ -6,7 +6,7 @@ import {
   insightSearchRequestRegex,
 } from '../../../../../../playwright/utils/requests';
 import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
-import facetData from './data';
+import {initialFacetData} from './data';
 import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
 
 const pageUrl = 's/quantic-numeric-facet';
@@ -23,18 +23,20 @@ type QuanticNumericFacetE2EFixtures = {
 
 export const testSearch = facetBase.extend<QuanticNumericFacetE2EFixtures>({
   options: {withInput: true},
-  facetResponseMock: [facetData],
+  facetResponses: {responses: [[initialFacetData]]},
   baseFacet: async ({page}, use) => {
     await use(new BaseFacetObject(page, searchRequestRegex));
   },
   facet: async (
-    {page, options, configuration, baseFacet, urlHash, facetResponseMock},
+    {page, options, configuration, baseFacet, urlHash, facetResponses},
     use
   ) => {
+    // search use case: interface auto-triggers a search on load, hence the mockSearchWithBaseResponse call below
+    await baseFacet.mockSearchWithBaseResponse();
     await page.goto(`${pageUrl}#${urlHash ? urlHash : ''}`);
-    if (facetResponseMock) {
-      await baseFacet.mockSearchWithFacetResponse(facetResponseMock);
-    }
+    await baseFacet.mockSearchWithFacetResponseSequence(
+      facetResponses?.responses
+    );
 
     configuration.configure(options);
     await baseFacet.waitForSearchResponse();
@@ -45,7 +47,7 @@ export const testSearch = facetBase.extend<QuanticNumericFacetE2EFixtures>({
 
 export const testInsight = facetBase.extend<QuanticNumericFacetE2EFixtures>({
   options: {withInput: true},
-  facetResponseMock: [facetData],
+  facetResponses: {responses: [[initialFacetData]]},
   baseFacet: async ({page}, use) => {
     await use(new BaseFacetObject(page, insightSearchRequestRegex));
   },
@@ -53,17 +55,19 @@ export const testInsight = facetBase.extend<QuanticNumericFacetE2EFixtures>({
     await use(new InsightSetupObject(page));
   },
   facet: async (
-    {page, options, baseFacet, configuration, insightSetup, facetResponseMock},
+    {page, options, baseFacet, configuration, insightSetup, facetResponses},
     use
   ) => {
     await page.goto(pageUrl);
-    if (facetResponseMock) {
-      await baseFacet.mockSearchWithFacetResponse(facetResponseMock);
-    }
+    await baseFacet.mockSearchWithFacetResponseSequence(
+      facetResponses?.responses
+    );
     configuration.configure({...options, useCase: useCaseEnum.insight});
     await insightSetup?.waitForInsightInterfaceInitialization();
-    await baseFacet.performSearch();
-    await baseFacet.waitForSearchResponse();
+    await Promise.all([
+      baseFacet.waitForSearchResponse(),
+      baseFacet.performSearch(),
+    ]);
     await use(new NumericFacetObject(page));
   },
 });

package/force-app/main/default/lwc/quanticNumericFacet/e2e/quanticNumericFacet.e2e.ts

@@ -3,7 +3,7 @@ import {
   useCaseEnum,
   useCaseTestCases,
 } from '../../../../../../playwright/utils/useCase';
-import facetData from './data';
+import {initialFacetData, selectedFacetData} from './data';
 
 const fixtures = {
   search: testSearch,
@@ -14,12 +14,22 @@ useCaseTestCases.forEach((useCase) => {
   let test = fixtures[useCase.value];
   test.describe(`quantic numeric facet ${useCase.label}`, () => {
     test.describe('when selecting and deselecting a facet value', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
       }) => {
         const selectedIndex = 0;
-        const {facetId, field, values} = facetData;
+        const {facetId, field, values} = initialFacetData;
         const expectedFacetData = {
           facetId,
           facetField: field,
@@ -61,12 +71,22 @@ useCaseTestCases.forEach((useCase) => {
     });
 
     test.describe('when selecting a facet value and clicking the clear filter button', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
       }) => {
         const selectedIndex = 0;
-        const {facetId, field, values} = facetData;
+        const {facetId, field, values} = initialFacetData;
         const expectedFacetData = {
           facetId,
           facetField: field,
@@ -113,7 +133,7 @@ useCaseTestCases.forEach((useCase) => {
       }) => {
         const exampleMin = '1';
         const exampleMax = '2';
-        const {facetId, field} = facetData;
+        const {facetId, field} = initialFacetData;
         const expectedFacetData = {
           facetId: `${facetId}_input`,
           facetField: field,
@@ -144,10 +164,12 @@ useCaseTestCases.forEach((useCase) => {
     if (useCase.value === useCaseEnum.search) {
       test.describe('with a selected value in the URL', () => {
         const selectedIndex = 0;
-        const {field, values} = facetData;
+        const {field, values} = initialFacetData;
         test.use({
           urlHash: `nf-${field}=${values[selectedIndex].start}...${values[selectedIndex].end}`,
-          facetResponseMock: undefined,
+          facetResponses: {
+            responses: [],
+          },
         });
 
         test('should select the correct facet value', async ({facet}) => {

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

@@ -34,6 +34,7 @@ export const testSearch = quanticBase.extend<QuanticPagerE2ESearchFixtures>({
     await use(new SearchObject(page, searchRequestRegex));
   },
   pager: async ({page, options, configuration, search, urlHash}, use) => {
+    await search.mockSearchWithBaseResponse();
     await page.goto(urlHash ? `${pageUrl}#${urlHash}` : pageUrl);
     const searchResponsePromise = search.waitForSearchResponse();
     configuration.configure(options);
@@ -52,12 +53,11 @@ export const testInsight = quanticBase.extend<QuanticPagerE2EInsightFixtures>({
     await use(new InsightSetupObject(page));
   },
   pager: async ({page, options, search, configuration, insightSetup}, use) => {
+    await search.mockSearchWithBaseResponse();
     await page.goto(pageUrl);
     configuration.configure({...options, useCase: useCaseEnum.insight});
     await insightSetup.waitForInsightInterfaceInitialization();
-    const searchResponsePromise = search.waitForSearchResponse();
-    await search.performSearch();
-    await searchResponsePromise;
+    await Promise.all([search.waitForSearchResponse(), search.performSearch()]);
     await use(new PagerObject(page));
   },
 });

package/force-app/main/default/lwc/quanticPager/e2e/quanticPager.e2e.ts

@@ -52,7 +52,7 @@ useCaseTestCases.forEach((useCase) => {
         pager,
         search,
       }) => {
-        const examplePage = 3;
+        const examplePage = 2;
         const searchResponsePromise = search.waitForSearchResponse();
         const pagerPageUaAnalyticsPromise =
           pager.waitForPagerNumberUaAnalytics();

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