From 86519d1317ecdfb62328c2df1b3ce44a730bcd6d Mon Sep 17 00:00:00 2001
From: Simon Milord <simon.milord@gmail.com>
Date: Tue, 17 Sep 2024 12:26:31 -0400
Subject: [PATCH] feat(quantic)!: Change names of DOM Events used, to add the
 'quantic__' prefix (#4383)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[SFINT-5351](https://coveord.atlassian.net/browse/SFINT-5351)

### IN THIS PR:
Changed the prefix of custom DOM events in the quantic package to have
the ‘quantic__’ prefix so that the naming convention is standard across
the package.

### TESTS:
<img width="884" alt="image"
src="https://github.com/user-attachments/assets/f384d74f-1ce9-4172-8b1f-9a7a28e6dc47">



[SFINT-5351]:
https://coveord.atlassian.net/browse/SFINT-5351?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 .../recommendation-list.cypress.ts            |  2 +-
 .../folded-result-list.cypress.ts             |  2 +-
 .../result-list/result-list.cypress.ts        |  2 +-
 .../result-quickview.cypress.ts               |  2 +-
 .../lwc/actionSendRating/actionSendRating.js  |  2 +-
 .../exampleInsightPanel.html                  |  2 +-
 .../exampleQuanticFoldedResultList.html       |  2 +-
 .../exampleQuanticFoldedResultList.js         |  2 +-
 .../exampleQuanticRecommendationList.js       |  2 +-
 .../exampleQuanticResultList.js               |  2 +-
 .../exampleQuanticResultQuickview.js          |  2 +-
 .../main/lwc/exampleSearch/exampleSearch.html |  2 +-
 .../quanticBreadcrumbManager.html             |  8 +++----
 .../quanticCardContainer.js                   |  6 ++++--
 .../quanticCategoryFacet.html                 |  8 +++----
 .../quanticCategoryFacet.js                   |  2 +-
 .../quanticCategoryFacetValue.js              |  8 +++----
 .../__tests__/quanticCitation.test.js         |  4 ++--
 .../lwc/quanticCitation/quanticCitation.js    |  6 +++---
 .../quanticDateFacet/quanticDateFacet.html    |  4 ++--
 .../lwc/quanticDateFacet/quanticDateFacet.js  |  2 +-
 .../quanticDocumentSuggestion.js              |  4 ++--
 .../lwc/quanticFacet/quanticFacet.html        |  8 +++----
 .../default/lwc/quanticFacet/quanticFacet.js  |  2 +-
 .../quanticFacetValue/quanticFacetValue.js    |  8 +++----
 .../__tests__/quanticFeedback.test.js         | 21 +++++++++++--------
 .../lwc/quanticFeedback/quanticFeedback.html  |  4 ++--
 .../lwc/quanticFeedback/quanticFeedback.js    | 18 ++++++++--------
 .../quanticFoldedResultList.js                |  4 ++--
 .../templates/generatedAnswer.html            |  4 ++--
 ...quanticGeneratedAnswerCopyToClipboard.html |  2 +-
 .../quanticInsightInterface.js                | 11 ++++++----
 .../quanticNumberButton.js                    |  8 ++++---
 .../quanticNumericFacet.html                  |  4 ++--
 .../quanticNumericFacet.js                    |  2 +-
 .../lwc/quanticPager/quanticPager.html        |  6 +++---
 .../default/lwc/quanticPill/quanticPill.js    |  6 +++---
 .../__tests__/quanticQuickviewContent.test.js |  2 +-
 .../quanticQuickviewContent.js                |  2 +-
 .../quanticRadioButtonsGroup.test.js          |  4 ++--
 .../quanticRadioButtonsGroup.js               |  4 ++--
 .../quanticRecentQueriesList.html             |  2 +-
 .../quanticRecentResultsList.html             |  2 +-
 .../quanticRecommendationInterface.js         | 11 ++++++----
 .../quanticRecommendationList.js              |  4 ++--
 .../quanticRefineModalContent.js              |  7 +++++--
 .../quanticRefineToggle.js                    |  7 +++++--
 .../lwc/quanticResult/quanticResult.js        |  4 ++--
 .../quanticResultList/quanticResultList.js    |  4 ++--
 .../quanticResultQuickview.js                 | 11 ++++++----
 .../quanticResultsPerPage.html                |  2 +-
 .../quanticSearchBoxInput.js                  |  4 ++--
 .../templates/defaultSearchBoxInput.html      |  2 +-
 .../templates/expandableSearchBoxInput.html   |  2 +-
 .../quanticSearchBoxSuggestionsList.js        | 20 ++++++++++--------
 .../quanticSearchInterface.js                 | 11 ++++++----
 .../quanticSmartSnippet.html                  |  4 ++--
 .../quanticSourceCitations.html               |  2 +-
 .../__tests__/quanticStatefulButton.test.js   | 10 +++++++--
 .../quanticStatefulButton.js                  |  4 ++--
 .../main/default/lwc/quanticTab/quanticTab.js |  4 +++-
 .../lwc/quanticTabBar/quanticTabBar.js        |  2 +-
 .../quanticTimeframeFacet.html                |  6 +++---
 .../quanticTimeframeFacet.js                  |  4 ++--
 .../default/lwc/quanticUtils/quanticUtils.js  |  4 ++--
 65 files changed, 182 insertions(+), 147 deletions(-)

diff --git a/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts b/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts
index 71e0cf215d9..a4c933f7f89 100644
--- a/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts
+++ b/packages/quantic/cypress/e2e/default-2/recommendation-list/recommendation-list.cypress.ts
@@ -35,7 +35,7 @@ describe('quantic-recommendation-list', () => {
   const defaultHeadingLevel = 1;
 
   const registerRecommendationTemplatesEvent =
-    'registerrecommendationtemplates';
+    'quantic__registerrecommendationtemplates';
 
   const recommendationsAlias = '@recommendations';
 
diff --git a/packages/quantic/cypress/e2e/default-2/result-list/folded-result-list/folded-result-list.cypress.ts b/packages/quantic/cypress/e2e/default-2/result-list/folded-result-list/folded-result-list.cypress.ts
index 4843ada2d75..a0bba4476c6 100644
--- a/packages/quantic/cypress/e2e/default-2/result-list/folded-result-list/folded-result-list.cypress.ts
+++ b/packages/quantic/cypress/e2e/default-2/result-list/folded-result-list/folded-result-list.cypress.ts
@@ -38,7 +38,7 @@ describe('quantic-folded-result-list', () => {
   const defaultParentField = 'foldingchild';
   const defaultChildField = 'foldingparent';
   const defaultNumberOfFoldedResults = 2;
-  const registerResultTemplatesEvent = 'registerresulttemplates';
+  const registerResultTemplatesEvent = 'quantic__registerresulttemplates';
 
   function visitFoldedResultList(
     options: Partial<FoldedResultListOptions> = {},
diff --git a/packages/quantic/cypress/e2e/default-2/result-list/result-list.cypress.ts b/packages/quantic/cypress/e2e/default-2/result-list/result-list.cypress.ts
index 7608be658c9..c8f4b7473f6 100644
--- a/packages/quantic/cypress/e2e/default-2/result-list/result-list.cypress.ts
+++ b/packages/quantic/cypress/e2e/default-2/result-list/result-list.cypress.ts
@@ -25,7 +25,7 @@ describe('quantic-resultlist', () => {
 
   const defaultFieldsToInclude =
     'date,author,source,language,filetype,parents,sfknowledgearticleid';
-  const registerResultTemplatesEvent = 'registerresulttemplates';
+  const registerResultTemplatesEvent = 'quantic__registerresulttemplates';
 
   const indexResultsAlias = '@indexResults';
 
diff --git a/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts b/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts
index 1c3d8695a41..d63bc5c088f 100644
--- a/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts
+++ b/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts
@@ -24,7 +24,7 @@ interface ResultQuickviewOptions {
 describe('quantic-result-quickview', () => {
   const pageUrl = 's/quantic-result-quickview';
 
-  const haspreview = 'haspreview';
+  const haspreview = 'quantic__haspreview';
   const resultActionRegister = 'quantic__resultactionregister';
 
   function visitResultQuickview(options: Partial<ResultQuickviewOptions> = {}) {
diff --git a/packages/quantic/force-app/examples/main/lwc/actionSendRating/actionSendRating.js b/packages/quantic/force-app/examples/main/lwc/actionSendRating/actionSendRating.js
index 5679a2c4dd9..c640269c4e4 100644
--- a/packages/quantic/force-app/examples/main/lwc/actionSendRating/actionSendRating.js
+++ b/packages/quantic/force-app/examples/main/lwc/actionSendRating/actionSendRating.js
@@ -9,7 +9,7 @@ export default class ActionSendRating extends LightningElement {
     }, 0);
   }
   handleSendRating() {
-    const customEvent = new CustomEvent('rating', {
+    const customEvent = new CustomEvent('quantic__rating', {
       detail: {
         id: this._id,
         score: 1,
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html b/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html
index 1cb8f9488ba..a5d0d45eba2 100644
--- a/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html
+++ b/packages/quantic/force-app/examples/main/lwc/exampleInsightPanel/exampleInsightPanel.html
@@ -1,5 +1,5 @@
 <template>
-  <div onregisterresulttemplates={handleResultTemplateRegistration}>
+  <div onquantic__registerresulttemplates={handleResultTemplateRegistration}>
     <c-quantic-insight-interface engine-id={engineId} insight-id={insightId}>
       <c-quantic-aria-live></c-quantic-aria-live>
       <div
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.html b/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.html
index ba515439a3f..bdc1a93103b 100644
--- a/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.html
+++ b/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.html
@@ -16,7 +16,7 @@
       use-case={config.useCase}
       engine-id={engineId}
     >
-      <div onregisterresulttemplates={handleResultTemplateRegistration}>
+      <div onquantic__registerresulttemplates={handleResultTemplateRegistration}>
         <div>
           <c-quantic-tab
           label="Thread"
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.js b/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.js
index 8a478295d2c..8f2ae35d14f 100644
--- a/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.js
+++ b/packages/quantic/force-app/examples/main/lwc/exampleQuanticFoldedResultList/exampleQuanticFoldedResultList.js
@@ -57,7 +57,7 @@ export default class ExampleQuanticFoldedResultList extends LightningElement {
       defaultValue: 'search',
     },
   ];
-  expectedEvents = ['registerresulttemplates'];
+  expectedEvents = ['quantic__registerresulttemplates'];
 
   handleResultTemplateRegistration(event) {
     const resultTemplatesManager = event.detail;
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js b/packages/quantic/force-app/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js
index 2d9c05194b4..c8c8a5c205b 100644
--- a/packages/quantic/force-app/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js
+++ b/packages/quantic/force-app/examples/main/lwc/exampleQuanticRecommendationList/exampleQuanticRecommendationList.js
@@ -57,7 +57,7 @@ export default class ExampleQuanticRecommendationtList extends LightningElement
       defaultValue: 'grid',
     },
   ];
-  expectedEvents = ['registerrecommendationtemplates'];
+  expectedEvents = ['quantic__registerrecommendationtemplates'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultList/exampleQuanticResultList.js b/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultList/exampleQuanticResultList.js
index 63b7c236e5f..8c093adf985 100644
--- a/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultList/exampleQuanticResultList.js
+++ b/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultList/exampleQuanticResultList.js
@@ -25,7 +25,7 @@ export default class ExampleQuanticResultList extends LightningElement {
       defaultValue: 'search',
     },
   ];
-  expectedEvents = ['registerresulttemplates'];
+  expectedEvents = ['quantic__registerresulttemplates'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultQuickview/exampleQuanticResultQuickview.js b/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultQuickview/exampleQuanticResultQuickview.js
index 85d47e19f16..e9634fd6229 100644
--- a/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultQuickview/exampleQuanticResultQuickview.js
+++ b/packages/quantic/force-app/examples/main/lwc/exampleQuanticResultQuickview/exampleQuanticResultQuickview.js
@@ -55,7 +55,7 @@ export default class ExampleQuanticResultQuickview extends LightningElement {
     },
   ];
 
-  expectedEvents = ['haspreview', 'quantic__resultactionregister'];
+  expectedEvents = ['quantic__haspreview', 'quantic__resultactionregister'];
 
   handleTryItNow(evt) {
     this.config = evt.detail;
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleSearch/exampleSearch.html b/packages/quantic/force-app/examples/main/lwc/exampleSearch/exampleSearch.html
index a65fff21306..03787e4e019 100644
--- a/packages/quantic/force-app/examples/main/lwc/exampleSearch/exampleSearch.html
+++ b/packages/quantic/force-app/examples/main/lwc/exampleSearch/exampleSearch.html
@@ -1,7 +1,7 @@
 <template>
   <div
     class="search__container slds-p-around_medium"
-    onregisterresulttemplates={handleResultTemplateRegistration}
+    onquantic__registerresulttemplates={handleResultTemplateRegistration}
   >
     <c-quantic-search-interface
       engine-id={engineId}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
index 8c6d93619ec..574641b64c0 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
@@ -14,7 +14,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -31,7 +31,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -47,7 +47,7 @@
                 <span class="slds-col breadcrumb-manager__field-name">{breadcrumbValue.label}{labels.colon} </span>
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <li class="breadcrumb__container">
-                    <c-quantic-pill label={breadcrumbValue.value} ondeselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
+                    <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
                   </li>
                 </ul>
               </li>
@@ -58,7 +58,7 @@
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.value} ondeselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.js b/packages/quantic/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.js
index c73b2bb4939..c78b07c96f8 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticCardContainer/quanticCardContainer.js
@@ -3,6 +3,8 @@ import {LightningElement, api} from 'lwc';
 /**
  * The `QuanticCardContainer` component is used internally as a styling container.
  * @category Utility
+ * @fires CustomEvent#quantic__headerclick
+ * @fires CustomEvent#quantic__headerkeydown
  * @example
  * <c-quantic-card-container title="Card Example"></c-quantic-card-container>
  */
@@ -29,14 +31,14 @@ export default class QuanticCardContainer extends LightningElement {
 
   handleHeaderClick(evt) {
     evt.preventDefault();
-    const headerClickEvent = new CustomEvent('headerclick', {});
+    const headerClickEvent = new CustomEvent('quantic__headerclick', {});
     this.dispatchEvent(headerClickEvent);
   }
 
   handleHeaderKeyDown(evt) {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
-      const headerKeyDownEvent = new CustomEvent('headerkeydown', {});
+      const headerKeyDownEvent = new CustomEvent('quantic__headerkeydown', {});
       this.dispatchEvent(headerKeyDownEvent);
     }
   }
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.html b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.html
index b39de824de3..b8c404d3ebe 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.html
@@ -9,7 +9,7 @@
     </template>
     <template if:true={hasParentsOrValues}>
       <div class="slds-size_1-of-1 slds-var-m-bottom_large">
-        <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+        <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
           <lightning-button-icon
             class={actionButtonCssClasses}
             slot="actions"
@@ -53,7 +53,7 @@
                 <template for:each={nonActiveParents} for:item="v">
                   <li class="slds-grid facet__non-active-parent" key={v.value}>
                     <c-quantic-category-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       item={v}
                       non-active-parent="true"
                       formatting-function={remoteGetValueCaption}
@@ -83,7 +83,7 @@
                             item={v}
                             active-parent={activeParent}
                             formatting-function={remoteGetValueCaption}
-                            onselectvalue={onSelectValue}>
+                            onquantic__selectvalue={onSelectValue}>
                           </c-quantic-category-facet-value>
                         </li>
                       </template>
@@ -99,7 +99,7 @@
                       item={result}
                       is-search-result="true"
                       formatting-function={remoteGetValueCaption}
-                      onselectvalue={onSelectValue}>
+                      onquantic__selectvalue={onSelectValue}>
                     </c-quantic-category-facet-value>
                   </template>
                 </template>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js
index 51f9e27bb5b..3c97aa0b8f4 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js
@@ -274,7 +274,7 @@ export default class QuanticCategoryFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: !!this.hasParentsOrValues,
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacetValue/quanticCategoryFacetValue.js b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacetValue/quanticCategoryFacetValue.js
index dac0994bdb3..16b76d224fc 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacetValue/quanticCategoryFacetValue.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacetValue/quanticCategoryFacetValue.js
@@ -10,11 +10,11 @@ import {api, LightningElement} from 'lwc';
 
 /**
  * The `QuanticCategoryFacetValue` component is used by a `QuanticCategoryFacet` component to display a formatted facet value, path to that value and the number of results with that value.
- * @fires CustomEvent#selectvalue
+ * @fires CustomEvent#quantic__selectvalue
  * @category Search
  * @category Insight Panel
  * @example
- * <c-quantic-category-facet-value onselectvalue={onSelect} item={result} is-search-result active-parent></c-quantic-category-facet-value>
+ * <c-quantic-category-facet-value onquantic__selectvalue={onSelect} item={result} is-search-result active-parent></c-quantic-category-facet-value>
  */
 export default class QuanticCategoryFacetValue extends LightningElement {
   /**
@@ -113,7 +113,7 @@ export default class QuanticCategoryFacetValue extends LightningElement {
   onSelect(evt) {
     evt.preventDefault();
     this.dispatchEvent(
-      new CustomEvent('selectvalue', {
+      new CustomEvent('quantic__selectvalue', {
         detail: {
           value: this.facetValue,
         },
@@ -128,7 +128,7 @@ export default class QuanticCategoryFacetValue extends LightningElement {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
       this.dispatchEvent(
-        new CustomEvent('selectvalue', {
+        new CustomEvent('quantic__selectvalue', {
           detail: {
             value: this.facetValue,
           },
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCitation/__tests__/quanticCitation.test.js b/packages/quantic/force-app/main/default/lwc/quanticCitation/__tests__/quanticCitation.test.js
index cc4d1754e2c..e99dba24195 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticCitation/__tests__/quanticCitation.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticCitation/__tests__/quanticCitation.test.js
@@ -154,7 +154,7 @@ describe('c-quantic-citation', () => {
     it('should dispatch a citation hover event after hovering over the the citation for more than 1200ms, 200ms debounce duration before hover + 1000ms minimum hover duration', async () => {
       const element = createTestComponent();
       await flushPromises();
-      setupEventDispatchTest('citationhover');
+      setupEventDispatchTest('quantic__citationhover');
 
       const citationLink = element.shadowRoot.querySelector(
         selectors.citationLink
@@ -178,7 +178,7 @@ describe('c-quantic-citation', () => {
     it('should not dispatch a citation hover event after hovering over the the citation for more than 1200ms', async () => {
       const element = createTestComponent();
       await flushPromises();
-      setupEventDispatchTest('citationhover');
+      setupEventDispatchTest('quantic__citationhover');
 
       const citationLink = element.shadowRoot.querySelector(
         selectors.citationLink
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js b/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js
index 229118c4b6e..3b6c8ab5a4e 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js
@@ -9,10 +9,10 @@ const debounceDurationBeforeHoverMs = 200;
 
 /**
  * The `QuanticCitation` component renders an individual citation.
- * @fires CustomEvent#citationhover
+ * @fires CustomEvent#quantic__citationhover
  * @category Internal
  * @example
- * <c-quantic-citation citation={citation} interactive-citation={interactiveCitation} onclick={handleClick} onhover={handleHover}></c-quantic-citation>
+ * <c-quantic-citation citation={citation} interactive-citation={interactiveCitation} onclick={handleClick} onquantic__citationhover={handleHover}></c-quantic-citation>
  */
 export default class QuanticCitation extends NavigationMixin(LightningElement) {
   /**
@@ -84,7 +84,7 @@ export default class QuanticCitation extends NavigationMixin(LightningElement) {
       const tooltipDisplayDuration = Date.now() - this.hoverStartTimestamp;
       if (tooltipDisplayDuration >= minimumTooltipDisplayDurationMs) {
         this.dispatchEvent(
-          new CustomEvent('citationhover', {
+          new CustomEvent('quantic__citationhover', {
             detail: {
               citationHoverTimeMs: Date.now() - this.hoverStartTimestamp,
             },
diff --git a/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.html b/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.html
index f3b77f3c7e2..186cc78ce8f 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.html
@@ -9,7 +9,7 @@
     </template>
     <template if:true={hasValues}>
       <div class="slds-size_1-of-1">
-        <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+        <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
           <lightning-button-icon
             class="actionButtonCssClasses"
             slot="actions"
@@ -44,7 +44,7 @@
                 <template for:each={values} for:item="v">
                   <li class="slds-grid" key={v.value}>
                     <c-quantic-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       key={v.start}
                       item={v}
                       is-checked={v.checked}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js b/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js
index e37ae647f0f..39a5a90598b 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js
@@ -177,7 +177,7 @@ export default class QuanticDateFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.hasValues,
diff --git a/packages/quantic/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.js b/packages/quantic/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.js
index d2cc2c14610..c92240cd644 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticDocumentSuggestion/quanticDocumentSuggestion.js
@@ -84,7 +84,7 @@ export default class QuanticDocumentSuggestion extends LightningElement {
     this.validateProps();
     if (!this.hasInitializationError) {
       registerComponentForInit(this, this.engineId);
-      this.template.addEventListener('rating', this.onRating);
+      this.template.addEventListener('quantic__rating', this.onRating);
     }
   }
 
@@ -118,7 +118,7 @@ export default class QuanticDocumentSuggestion extends LightningElement {
 
   disconnectedCallback() {
     this.unsubscribeDocumentSuggestion?.();
-    this.template.removeEventListener('rating', this.onRating);
+    this.template.removeEventListener('quantic__rating', this.onRating);
   }
 
   validateProps() {
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.html b/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.html
index 13051d7c035..c4aa6ea0372 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.html
@@ -14,8 +14,8 @@
       <div class="slds-size_1-of-1 slds-var-m-bottom_large">
         <c-quantic-card-container
           title={label}
-          onheaderclick={toggleFacetVisibility}
-          onheaderkeydown={toggleFacetVisibility}
+          onquantic__headerclick={toggleFacetVisibility}
+          onquantic__headerkeydown={toggleFacetVisibility}
         >
           <lightning-button-icon
             class={actionButtonCssClasses}
@@ -68,7 +68,7 @@
                     <template for:each={values} for:item="v">
                       <li class="slds-grid" key={v.value}>
                         <c-quantic-facet-value
-                          onselectvalue={onSelectValue}
+                          onquantic__selectvalue={onSelectValue}
                           item={v}
                           key={v.value}
                           is-checked={v.checked}
@@ -117,7 +117,7 @@
                 <template if:true={hasSearchResults}>
                   <template for:each={facetSearchResults} for:item="result">
                     <c-quantic-facet-value
-                      onselectvalue={onSelectValue}
+                      onquantic__selectvalue={onSelectValue}
                       key={result.value}
                       item={result}
                       is-checked={result.checked}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js b/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js
index bfb1bbc792a..7994301b74d 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js
@@ -272,7 +272,7 @@ export default class QuanticFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.hasValues,
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.js b/packages/quantic/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.js
index 7092728a926..e57a985a0f5 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticFacetValue/quanticFacetValue.js
@@ -13,11 +13,11 @@ import {LightningElement, api} from 'lwc';
 
 /**
  * The `QuanticFacetValue` component is used by a facet component to display a formatted facet value and the number of results with that value.
- * @fires CustomEvent#selectvalue
+ * @fires CustomEvent#quantic__selectvalue
  * @category Search
  * @category Insight Panel
  * @example
- * <c-quantic-facet-value onselectvalue={onSelect} item={result} is-checked={result.checked} display-as-link={displayAsLink} formatting-function={formattingFunction}></c-quantic-facet-value>
+ * <c-quantic-facet-value onquantic__selectvalue={onSelect} item={result} is-checked={result.checked} display-as-link={displayAsLink} formatting-function={formattingFunction}></c-quantic-facet-value>
  */
 export default class QuanticFacetValue extends LightningElement {
   /**
@@ -113,7 +113,7 @@ export default class QuanticFacetValue extends LightningElement {
   onSelect(evt) {
     evt.preventDefault();
     this.dispatchEvent(
-      new CustomEvent('selectvalue', {
+      new CustomEvent('quantic__selectvalue', {
         detail: {
           value: this.formattedFacetValue,
         },
@@ -128,7 +128,7 @@ export default class QuanticFacetValue extends LightningElement {
     if (evt.code === 'Enter' || evt.code === 'Space') {
       evt.preventDefault();
       this.dispatchEvent(
-        new CustomEvent('selectvalue', {
+        new CustomEvent('quantic__selectvalue', {
           detail: {
             value: this.formattedFacetValue,
           },
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js b/packages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js
index 813854d02bc..2018093b474 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js
@@ -51,10 +51,13 @@ const defaultOptions = {
 };
 
 function setupEventListeners(element) {
-  element.addEventListener('like', functionsMocks.exampleHandleLike);
-  element.addEventListener('dislike', functionsMocks.exampleHandleDislike);
+  element.addEventListener('quantic__like', functionsMocks.exampleHandleLike);
   element.addEventListener(
-    'pressexplainwhy',
+    'quantic__dislike',
+    functionsMocks.exampleHandleDislike
+  );
+  element.addEventListener(
+    'quantic__pressexplainwhy',
     functionsMocks.exampleHandleExplainWhy
   );
 }
@@ -140,7 +143,7 @@ describe('c-quantic-feedback', () => {
     });
 
     describe('when the like button is clicked', () => {
-      it('should dispatch the "like" event', async () => {
+      it('should dispatch the quantic__like" event', async () => {
         const element = createTestComponent();
         setupEventListeners(element);
         await flushPromises();
@@ -148,7 +151,7 @@ describe('c-quantic-feedback', () => {
         const likeButton = element.shadowRoot.querySelector(
           selectors.likeButton
         );
-        likeButton.dispatchEvent(new CustomEvent('select'));
+        likeButton.dispatchEvent(new CustomEvent('quantic__select'));
 
         expect(likeButton).not.toBeNull();
         expect(functionsMocks.exampleHandleLike).toHaveBeenCalledTimes(1);
@@ -156,7 +159,7 @@ describe('c-quantic-feedback', () => {
     });
 
     describe('when the dislike button is clicked', () => {
-      it('should dispatch the "dislike" event', async () => {
+      it('should dispatch the "quantic__dislike" event', async () => {
         const element = createTestComponent();
         setupEventListeners(element);
         await flushPromises();
@@ -164,7 +167,7 @@ describe('c-quantic-feedback', () => {
         const dislikeButton = element.shadowRoot.querySelector(
           selectors.dislikeButton
         );
-        dislikeButton.dispatchEvent(new CustomEvent('select'));
+        dislikeButton.dispatchEvent(new CustomEvent('quantic__select'));
 
         expect(dislikeButton).not.toBeNull();
         expect(functionsMocks.exampleHandleDislike).toHaveBeenCalledTimes(1);
@@ -267,7 +270,7 @@ describe('c-quantic-feedback', () => {
     });
 
     describe('when the explain why button is clicked', () => {
-      it('should dispatch the "pressexplainwhy" event', async () => {
+      it('should dispatch the "quantic__pressexplainwhy" event', async () => {
         const element = createTestComponent({
           ...defaultOptions,
           state: 'liked',
@@ -346,7 +349,7 @@ describe('c-quantic-feedback', () => {
     });
 
     describe('when the explain why button is clicked', () => {
-      it('should dispatch the "pressexplainwhy" event', async () => {
+      it('should dispatch the "quantic__pressexplainwhy" event', async () => {
         const element = createTestComponent({
           ...defaultOptions,
           state: 'disliked',
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html b/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html
index e5b31d3f8a9..03391ceeb97 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html
@@ -3,10 +3,10 @@
     <span class="slds-var-p-right_small slds-text-color_weak feedback__question"
       id="feedback__question">{question}</span>
     <c-quantic-stateful-button selected={liked} data-cy="feedback__like-button" tooltip={likeLabel}
-      icon-name={likeIconName} onselect={handleLike} ondeselect={handleLike} without-borders selected-state-color="#2e844a"
+      icon-name={likeIconName} onquantic__select={handleLike} onquantic__deselect={handleLike} without-borders selected-state-color="#2e844a"
       label={likeButtonLabel} icon-size={size}></c-quantic-stateful-button>
     <c-quantic-stateful-button selected={disliked} data-cy="feedback__dislike-button" tooltip={dislikeLabel}
-      icon-name={dislikeIconName} onselect={handleDislike} ondeselect={handleDislike} without-borders selected-state-color="#ea001e"
+      icon-name={dislikeIconName} onquantic__select={handleDislike} onquantic__deselect={handleDislike} without-borders selected-state-color="#ea001e"
       label={dislikeButtonLabel} icon-size={size}></c-quantic-stateful-button>
   </div>
   <template if:true={displaySuccessMessage}>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.js b/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.js
index e67a70d7c00..b76ad0d4a61 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.js
@@ -6,9 +6,9 @@ import {LightningElement, api} from 'lwc';
 
 /**
  * The `QuanticFeedback` component displays a question and two buttons for giving positive or negative feedback.
- * @fires CustomEvent#like
- * @fires CustomEvent#dislike
- * @fires CustomEvent#pressExplainWhy
+ * @fires CustomEvent#quantic__like
+ * @fires CustomEvent#quantic__dislike
+ * @fires CustomEvent#quantic__pressexplainwhy
  * @category Search
  * @category Insight Panel
  */
@@ -94,12 +94,12 @@ export default class QuanticFeedback extends LightningElement {
   _size = 'xx-small';
 
   /**
-   * Fires the "like" event.
+   * Fires the "quantic__like" event.
    * @returns {void}
    */
   handleLike() {
     this.dispatchEvent(
-      new CustomEvent(`like`, {
+      new CustomEvent(`quantic__like`, {
         bubbles: true,
         composed: true,
       })
@@ -107,12 +107,12 @@ export default class QuanticFeedback extends LightningElement {
   }
 
   /**
-   * Fires the "dislike" event.
+   * Fires the "quantic__dislike" event.
    * @returns {void}
    */
   handleDislike() {
     this.dispatchEvent(
-      new CustomEvent(`dislike`, {
+      new CustomEvent(`quantic__dislike`, {
         bubbles: true,
         composed: true,
       })
@@ -120,12 +120,12 @@ export default class QuanticFeedback extends LightningElement {
   }
 
   /**
-   * Fires the "pressexplainwhy" event.
+   * Fires the "quantic__pressexplainwhy" event.
    * @returns {void}
    */
   handlePressExplainWhyButton() {
     this.dispatchEvent(
-      new CustomEvent(`pressexplainwhy`, {
+      new CustomEvent(`quantic__pressexplainwhy`, {
         bubbles: true,
         composed: true,
       })
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFoldedResultList/quanticFoldedResultList.js b/packages/quantic/force-app/main/default/lwc/quanticFoldedResultList/quanticFoldedResultList.js
index 2cd63fd1cec..804b4b41130 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticFoldedResultList/quanticFoldedResultList.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticFoldedResultList/quanticFoldedResultList.js
@@ -16,7 +16,7 @@ import {LightningElement, api} from 'lwc';
 /**
  * The `QuanticFoldedResultList` component is responsible for displaying query results by applying one or more result templates.
  * This component can display query results that have a parent-child relationship with any level of nesting.
- * @fires CustomEvent#registerresulttemplates
+ * @fires CustomEvent#quantic__registerresulttemplates
  * @category Search
  * @example
  * <c-quantic-folded-result-list engine-id={engineId} fields-to-include="objecttype,gdfiletitle" collection-field="foldingcollection" parent-field="foldingparent" child-field="foldingchild" number-of-folded-results="2"></c-quantic-folded-result-list>
@@ -134,7 +134,7 @@ export default class QuanticFoldedResultList extends LightningElement {
 
   registerTemplates() {
     this.dispatchEvent(
-      new CustomEvent('registerresulttemplates', {
+      new CustomEvent('quantic__registerresulttemplates', {
         bubbles: true,
         detail: this.resultTemplatesManager,
       })
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html
index 8f635d8ce11..a5db411a0fe 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html
@@ -11,8 +11,8 @@
             <div class="slds-grid flex-one slds-grid_align-end">
               <c-quantic-feedback
                 state={feedbackState}
-                onlike={handleLike}
-                ondislike={handleDislike}
+                onquantic__like={handleLike}
+                onquantic__dislike={handleDislike}
                 like-icon-name="utility:like"
                 like-label={labels.thisAnswerWasHelpful}
                 dislike-icon-name="utility:dislike"
diff --git a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerCopyToClipboard/quanticGeneratedAnswerCopyToClipboard.html b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerCopyToClipboard/quanticGeneratedAnswerCopyToClipboard.html
index c6370d46b52..c9e0704844f 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerCopyToClipboard/quanticGeneratedAnswerCopyToClipboard.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswerCopyToClipboard/quanticGeneratedAnswerCopyToClipboard.html
@@ -3,7 +3,7 @@
     selected={isSelected}
     tooltip={tooltip}
     icon-name="utility:copy"
-    onselect={handleCopyToClipboard}
+    onquantic__select={handleCopyToClipboard}
     without-borders
     selected-state-color="#2e844a"
     icon-size="xx-small"
diff --git a/packages/quantic/force-app/main/default/lwc/quanticInsightInterface/quanticInsightInterface.js b/packages/quantic/force-app/main/default/lwc/quanticInsightInterface/quanticInsightInterface.js
index 7da7d26e11e..d726cbddd67 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticInsightInterface/quanticInsightInterface.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticInsightInterface/quanticInsightInterface.js
@@ -48,9 +48,12 @@ export default class QuanticInsightInterface extends LightningElement {
   disconnectedCallback() {
     destroyEngine(this.engineId);
     if (this.ariaLiveEventsBound) {
-      this.removeEventListener('arialivemessage', this.handleAriaLiveMessage);
       this.removeEventListener(
-        'registerregion',
+        'quantic__arialivemessage',
+        this.handleAriaLiveMessage
+      );
+      this.removeEventListener(
+        'quantic__registerregion',
         this.handleRegisterAriaLiveRegion
       );
     }
@@ -122,11 +125,11 @@ export default class QuanticInsightInterface extends LightningElement {
 
   bindAriaLiveEvents() {
     this.template.addEventListener(
-      'arialivemessage',
+      'quantic__arialivemessage',
       this.handleAriaLiveMessage.bind(this)
     );
     this.template.addEventListener(
-      'registerregion',
+      'quantic__registerregion',
       this.handleRegisterAriaLiveRegion.bind(this)
     );
     this.ariaLiveEventsBound = true;
diff --git a/packages/quantic/force-app/main/default/lwc/quanticNumberButton/quanticNumberButton.js b/packages/quantic/force-app/main/default/lwc/quanticNumberButton/quanticNumberButton.js
index e442d1dfda4..b6edb2e4d30 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticNumberButton/quanticNumberButton.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticNumberButton/quanticNumberButton.js
@@ -2,10 +2,10 @@ import {LightningElement, api} from 'lwc';
 
 /**
  * The `QuanticNumberButton` component is used internally to display a button in a set of buttons with numeric labels.
- * @fires CustomEvent#select
+ * @fires CustomEvent#quantic__select
  * @category Utility
  * @example
- * <c-quantic-number-button number="1" selected onselect={select}></c-quantic-number-button>
+ * <c-quantic-number-button number="1" selected onquantic__select={select}></c-quantic-number-button>
  */
 export default class QuanticNumberButton extends LightningElement {
   /**
@@ -40,6 +40,8 @@ export default class QuanticNumberButton extends LightningElement {
   }
 
   select() {
-    this.dispatchEvent(new CustomEvent('select', {detail: this.number}));
+    this.dispatchEvent(
+      new CustomEvent('quantic__select', {detail: this.number})
+    );
   }
 }
diff --git a/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.html b/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.html
index 2d0aa00b799..c497b074579 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.html
@@ -9,7 +9,7 @@
     </template>
     <template if:true={shouldRenderFacet}>
       <div data-cy="numeric-facet__card" class="slds-size_1-of-1 slds-var-m-bottom_large">
-        <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+        <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
           <lightning-button-icon
             class={actionButtonCssClasses}
             slot="actions"
@@ -94,7 +94,7 @@
                     <template for:each={values} for:item="v">
                       <li class="slds-grid" key={v.key}>
                         <c-quantic-facet-value
-                          onselectvalue={onSelectValue}
+                          onquantic__selectvalue={onSelectValue}
                           item={v}
                           is-checked={v.checked}
                           formatting-function={formattingFunction}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.js b/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.js
index 0ab185bfb0a..834a660f81c 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.js
@@ -293,7 +293,7 @@ export default class QuanticNumericFacet extends LightningElement {
       !this.searchStatus?.state?.hasError &&
       !this.searchStatus?.state?.firstSearchExecuted;
 
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.shouldRenderFacet,
diff --git a/packages/quantic/force-app/main/default/lwc/quanticPager/quanticPager.html b/packages/quantic/force-app/main/default/lwc/quanticPager/quanticPager.html
index 651522e7d56..84ea14b52cc 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticPager/quanticPager.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticPager/quanticPager.html
@@ -15,11 +15,11 @@
           onclick={previous}
           aria-label={labels.previousPage}
         ></lightning-button>
-    
+
         <template for:each={currentPagesObjects} for:item="page">
-          <c-quantic-number-button key={page.number} number={page.number} selected={page.selected} onselect={goto} aria-label-value={page.ariaLabelValue}></c-quantic-number-button>
+          <c-quantic-number-button key={page.number} number={page.number} selected={page.selected} onquantic__select={goto} aria-label-value={page.ariaLabelValue}></c-quantic-number-button>
         </template>
-    
+
         <lightning-button
           disabled={nextDisabled}
           variant="base"
diff --git a/packages/quantic/force-app/main/default/lwc/quanticPill/quanticPill.js b/packages/quantic/force-app/main/default/lwc/quanticPill/quanticPill.js
index 339cee100b9..ed10bc6f223 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticPill/quanticPill.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticPill/quanticPill.js
@@ -2,10 +2,10 @@ import {LightningElement, api} from 'lwc';
 
 /**
  * The `QuanticPill` component is used internally to display a deselectable button.
- * @fires CustomEvent#deselect
+ * @fires CustomEvent#quantic__deselect
  * @category Utility
  * @example
- * <c-quantic-pill label="Case" alt-text="Remove Case filter" ondeselect={myDeselectFunction}></c-quantic-pill>
+ * <c-quantic-pill label="Case" alt-text="Remove Case filter" onquantic__deselect={myDeselectFunction}></c-quantic-pill>
  */
 export default class QuanticPill extends LightningElement {
   /**
@@ -34,7 +34,7 @@ export default class QuanticPill extends LightningElement {
   @api actionName;
 
   deselect() {
-    this.dispatchEvent(new CustomEvent('deselect'));
+    this.dispatchEvent(new CustomEvent('quantic__deselect'));
   }
 
   get alternativeText() {
diff --git a/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/__tests__/quanticQuickviewContent.test.js b/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/__tests__/quanticQuickviewContent.test.js
index 787ef93c6f9..1a119247978 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/__tests__/quanticQuickviewContent.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/__tests__/quanticQuickviewContent.test.js
@@ -68,7 +68,7 @@ describe('c-quantic-quickview-content', () => {
       const element = createTestComponent(youtubeTestCase.options);
       await flushPromises();
 
-      setupSimulation(element, 'loadingstatechange');
+      setupSimulation(element, 'quantic__loadingstatechange');
 
       const iframe = element.shadowRoot.querySelector(
         youtubeTestCase.selectors.iframeSelector
diff --git a/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/quanticQuickviewContent.js b/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/quanticQuickviewContent.js
index 6b4f8fc26ef..c38b1f740bf 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/quanticQuickviewContent.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticQuickviewContent/quanticQuickviewContent.js
@@ -33,7 +33,7 @@ export default class QuanticQuickviewContent extends LightningElement {
 
   handleIframeLoaded() {
     this.isLoading = false;
-    this.dispatchEvent(new CustomEvent('loadingstatechange'));
+    this.dispatchEvent(new CustomEvent('quantic__loadingstatechange'));
   }
 
   stopPropagation(evt) {
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/__tests__/quanticRadioButtonsGroup.test.js b/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/__tests__/quanticRadioButtonsGroup.test.js
index 7c0648fd214..653ec24cf80 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/__tests__/quanticRadioButtonsGroup.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/__tests__/quanticRadioButtonsGroup.test.js
@@ -199,7 +199,7 @@ describe('c-quantic-radio-buttons-group', () => {
   });
 
   describe('User interaction', () => {
-    it('should dispatch the "change" event when a radio button is clicked', async () => {
+    it('should dispatch the "quantic__change" event when a radio button is clicked', async () => {
       const element = createTestComponent();
       await flushPromises();
 
@@ -208,7 +208,7 @@ describe('c-quantic-radio-buttons-group', () => {
       );
       const radioInput = radioInputs[0];
       const changeHandler = jest.fn();
-      element.addEventListener('change', changeHandler);
+      element.addEventListener('quantic__change', changeHandler);
 
       radioInput.click();
 
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/quanticRadioButtonsGroup.js b/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/quanticRadioButtonsGroup.js
index 957e0fb8881..ee1100a4660 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/quanticRadioButtonsGroup.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticRadioButtonsGroup/quanticRadioButtonsGroup.js
@@ -121,7 +121,7 @@ export default class QuanticRadioButtonsGroup extends LightningElement {
     }
     this._value = value;
     this.dispatchEvent(
-      new CustomEvent('change', {
+      new CustomEvent('quantic__change', {
         detail: {
           value,
         },
@@ -145,7 +145,7 @@ export default class QuanticRadioButtonsGroup extends LightningElement {
     this._value = value;
 
     this.dispatchEvent(
-      new CustomEvent('change', {
+      new CustomEvent('quantic__change', {
         detail: {
           value,
         },
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRecentQueriesList/quanticRecentQueriesList.html b/packages/quantic/force-app/main/default/lwc/quanticRecentQueriesList/quanticRecentQueriesList.html
index aadd2e86e90..2788e4a1257 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRecentQueriesList/quanticRecentQueriesList.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticRecentQueriesList/quanticRecentQueriesList.html
@@ -9,7 +9,7 @@
     </template>
     <template if:false={showPlaceholder}>
       <template lwc:if={shouldDisplayRecentQueriesCard}>
-        <c-quantic-card-container data-cy="recent-queries-card" title={label} onheaderclick={toggleVisibility} onheaderkeydown={toggleVisibility}>
+        <c-quantic-card-container data-cy="recent-queries-card" title={label} onquantic__headerclick={toggleVisibility} onquantic__headerkeydown={toggleVisibility}>
           <lightning-button-icon class="slds-p-bottom_small" slot="actions" icon-name={actionButtonIcon}
             alternative-text={actionButtonLabel} variant="bare" tabindex="-1" aria-hidden="true">
           </lightning-button-icon>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRecentResultsList/quanticRecentResultsList.html b/packages/quantic/force-app/main/default/lwc/quanticRecentResultsList/quanticRecentResultsList.html
index 96febf3f396..820cde1cdda 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRecentResultsList/quanticRecentResultsList.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticRecentResultsList/quanticRecentResultsList.html
@@ -9,7 +9,7 @@
     </template>
     <template if:false={showPlaceholder}>
       <template lwc:if={shouldDisplayRecentResultsCard}>
-        <c-quantic-card-container data-cy="recent-results-card" title={label} onheaderclick={toggleVisibility} onheaderkeydown={toggleVisibility}>
+        <c-quantic-card-container data-cy="recent-results-card" title={label} onquantic__headerclick={toggleVisibility} onquantic__headerkeydown={toggleVisibility}>
           <lightning-button-icon class="slds-p-bottom_small" slot="actions" icon-name={actionButtonIcon}
             alternative-text={actionButtonLabel} variant="bare" tabindex="-1" aria-hidden="true">
           </lightning-button-icon>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRecommendationInterface/quanticRecommendationInterface.js b/packages/quantic/force-app/main/default/lwc/quanticRecommendationInterface/quanticRecommendationInterface.js
index d4c627cb608..07ead2c5a43 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRecommendationInterface/quanticRecommendationInterface.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticRecommendationInterface/quanticRecommendationInterface.js
@@ -105,9 +105,12 @@ export default class QuanticRecommendationInterface extends LightningElement {
 
   disconnectedCallback() {
     if (this.ariaLiveEventsBound) {
-      this.removeEventListener('arialivemessage', this.handleAriaLiveMessage);
       this.removeEventListener(
-        'registerregion',
+        'quantic__arialivemessage',
+        this.handleAriaLiveMessage
+      );
+      this.removeEventListener(
+        'quantic__registerregion',
         this.handleRegisterAriaLiveRegion
       );
     }
@@ -129,11 +132,11 @@ export default class QuanticRecommendationInterface extends LightningElement {
 
   bindAriaLiveEvents() {
     this.template.addEventListener(
-      'arialivemessage',
+      'quantic__arialivemessage',
       this.handleAriaLiveMessage.bind(this)
     );
     this.template.addEventListener(
-      'registerregion',
+      'quantic__registerregion',
       this.handleRegisterAriaLiveRegion.bind(this)
     );
     this.ariaLiveEventsBound = true;
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRecommendationList/quanticRecommendationList.js b/packages/quantic/force-app/main/default/lwc/quanticRecommendationList/quanticRecommendationList.js
index 44237f127c8..69bf4a9c6f3 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRecommendationList/quanticRecommendationList.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticRecommendationList/quanticRecommendationList.js
@@ -29,7 +29,7 @@ import loadingTemplate from './templates/loading.html';
 
 /**
  * The `QuanticRecommendationList` component displays recommendations by applying one or more result templates in different layouts.
- * @fires CustomEvent#registerrecommendationtemplates
+ * @fires CustomEvent#quantic__registerrecommendationtemplates
  * @category Recommendation
  * @example
  * <c-quantic-recommendation-list engine-id={engineId} recommendation={recommendationId} fields-to-include="objecttype,filetype" number-of-recommendations="3" recommendations-per-row="10" heading-level="1"></c-quantic-recommendation-list>
@@ -182,7 +182,7 @@ export default class QuanticRecommendationList extends LightningElement {
       conditions: [],
     });
     this.dispatchEvent(
-      new CustomEvent('registerrecommendationtemplates', {
+      new CustomEvent('quantic__registerrecommendationtemplates', {
         bubbles: true,
         detail: this.resultTemplatesManager,
       })
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRefineModalContent/quanticRefineModalContent.js b/packages/quantic/force-app/main/default/lwc/quanticRefineModalContent/quanticRefineModalContent.js
index aa63e727425..a3ab8dd4ae9 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRefineModalContent/quanticRefineModalContent.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticRefineModalContent/quanticRefineModalContent.js
@@ -92,7 +92,7 @@ export default class QuanticRefineModalContent extends LightningElement {
 
   connectedCallback() {
     registerComponentForInit(this, this.engineId);
-    this.addEventListener('renderfacet', this.handleRenderFacetEvent);
+    this.addEventListener('quantic__renderfacet', this.handleRenderFacetEvent);
   }
 
   renderedCallback() {
@@ -102,7 +102,10 @@ export default class QuanticRefineModalContent extends LightningElement {
   disconnectedCallback() {
     this.unsubscribeSearchStatus?.();
     this.unsubscribeBreadcrumbManager?.();
-    this.removeEventListener('renderfacet', this.handleRenderFacetEvent);
+    this.removeEventListener(
+      'quantic__renderfacet',
+      this.handleRenderFacetEvent
+    );
   }
 
   /**
diff --git a/packages/quantic/force-app/main/default/lwc/quanticRefineToggle/quanticRefineToggle.js b/packages/quantic/force-app/main/default/lwc/quanticRefineToggle/quanticRefineToggle.js
index 9adc83d18e9..5de9b23d310 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticRefineToggle/quanticRefineToggle.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticRefineToggle/quanticRefineToggle.js
@@ -106,7 +106,7 @@ export default class QuanticRefineToggle extends LightningElement {
 
   connectedCallback() {
     registerComponentForInit(this, this.engineId);
-    this.addEventListener('renderfacet', this.handleRenderFacetEvent);
+    this.addEventListener('quantic__renderfacet', this.handleRenderFacetEvent);
   }
 
   /**
@@ -165,7 +165,10 @@ export default class QuanticRefineToggle extends LightningElement {
     this.unsubscribeQuerySummary?.();
     this.unsubscribeBreadcrumbManager?.();
     this.unsubscribeSearchStatus?.();
-    this.removeEventListener('renderfacet', this.handleRenderFacetEvent);
+    this.removeEventListener(
+      'quantic__renderfacet',
+      this.handleRenderFacetEvent
+    );
   }
 
   get isContentEmpty() {
diff --git a/packages/quantic/force-app/main/default/lwc/quanticResult/quanticResult.js b/packages/quantic/force-app/main/default/lwc/quanticResult/quanticResult.js
index 012ed4f6d87..b6d2779ff66 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticResult/quanticResult.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticResult/quanticResult.js
@@ -65,7 +65,7 @@ export default class QuanticResult extends LightningElement {
   quickviewIsOpen = false;
 
   connectedCallback() {
-    this.template.addEventListener('haspreview', this.onHasPreview);
+    this.template.addEventListener('quantic__haspreview', this.onHasPreview);
     this.template.host.addEventListener('mouseenter', this.setHoverState);
     this.template.host.addEventListener('mouseleave', this.removeHoverState);
     this.template.addEventListener(
@@ -75,7 +75,7 @@ export default class QuanticResult extends LightningElement {
   }
 
   disconnectedCallback() {
-    this.template.removeEventListener('haspreview', this.onHasPreview);
+    this.template.removeEventListener('quantic__haspreview', this.onHasPreview);
     this.template.host.removeEventListener('mouseenter', this.setHoverState);
     this.template.host.removeEventListener('mouseleave', this.removeHoverState);
     this.template.removeEventListener(
diff --git a/packages/quantic/force-app/main/default/lwc/quanticResultList/quanticResultList.js b/packages/quantic/force-app/main/default/lwc/quanticResultList/quanticResultList.js
index 9f64db46449..f1a2d192dd3 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticResultList/quanticResultList.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticResultList/quanticResultList.js
@@ -16,7 +16,7 @@ import {LightningElement, api, track} from 'lwc';
 
 /**
  * The `QuanticResultList` component is responsible for displaying query results by applying one or more result templates.
- * @fires CustomEvent#registerresulttemplates
+ * @fires CustomEvent#quantic__registerresulttemplates
  * @category Search
  * @category Insight Panel
  * @example
@@ -113,7 +113,7 @@ export default class QuanticResultList extends LightningElement {
 
   registerTemplates() {
     this.dispatchEvent(
-      new CustomEvent('registerresulttemplates', {
+      new CustomEvent('quantic__registerresulttemplates', {
         bubbles: true,
         detail: this.resultTemplatesManager,
       })
diff --git a/packages/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.js b/packages/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.js
index 1a0eb97f5db..20567b2d75f 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.js
@@ -19,9 +19,9 @@ import {LightningElement, api, track} from 'lwc';
 /**
  * The `QuanticResultQuickview` component renders a button which the end user can click to open a modal box containing certain information about a result.
  * @category Result Template
- * @fires CustomEvent#haspreview
+ * @fires CustomEvent#quantic__haspreview
  * @example
- * <c-quantic-result-quickview engine-id={engineId} result={result} maximum-preview-size="100"></c-quantic-result-quickview>
+ * <c-quantic-result-quickview engine-id={engineId} result={result} maximum-preview-size="100" onquantic__haspreview={handleHasPreview}></c-quantic-result-quickview>
  */
 export default class QuanticResultQuickview extends LightningElement {
   /**
@@ -121,7 +121,10 @@ export default class QuanticResultQuickview extends LightningElement {
       );
       this.dispatchEvent(resultActionRegister);
     }
-    this.addEventListener('loadingstatechange', this.handleLoadingStateChange);
+    this.addEventListener(
+      'quantic__loadingstatechange',
+      this.handleLoadingStateChange
+    );
   }
 
   renderedCallback() {
@@ -196,7 +199,7 @@ export default class QuanticResultQuickview extends LightningElement {
 
   dispatchHasPreview(hasPreview) {
     this.dispatchEvent(
-      new CustomEvent('haspreview', {
+      new CustomEvent('quantic__haspreview', {
         detail: {
           hasPreview,
         },
diff --git a/packages/quantic/force-app/main/default/lwc/quanticResultsPerPage/quanticResultsPerPage.html b/packages/quantic/force-app/main/default/lwc/quanticResultsPerPage/quanticResultsPerPage.html
index 3770908388b..905d15741bc 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticResultsPerPage/quanticResultsPerPage.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticResultsPerPage/quanticResultsPerPage.html
@@ -11,7 +11,7 @@
             key={choice.value}
             number={choice.value}
             selected={choice.selected}
-            onselect={select}
+            onquantic__select={select}
             aria-label-value={choice.ariaLabelValue}
           ></c-quantic-number-button>
         </template>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js
index 485dae701cb..59263c111ee 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js
@@ -97,14 +97,14 @@ export default class QuanticSearchBoxInput extends LightningElement {
 
   connectedCallback() {
     this.addEventListener(
-      'suggestionlistrender',
+      'quantic__suggestionlistrender',
       this.handleSuggestionListEvent
     );
   }
 
   disconnectedCallback() {
     this.removeEventListener(
-      'suggestionlistrender',
+      'quantic__suggestionlistrender',
       this.handleSuggestionListEvent
     );
   }
diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/defaultSearchBoxInput.html b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/defaultSearchBoxInput.html
index 5d7458e0080..3348307ddc7 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/defaultSearchBoxInput.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/defaultSearchBoxInput.html
@@ -71,7 +71,7 @@
           </div>
           <template if:true={shouldDisplaySuggestions}>
             <c-quantic-search-box-suggestions-list
-              onselection={handleSelection}
+              onquantic__selection={handleSelection}
               suggestions={suggestions}
               query={inputValue}
               recent-queries={recentQueries}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/expandableSearchBoxInput.html b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/expandableSearchBoxInput.html
index 797723c7fd3..786cd2177c9 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/expandableSearchBoxInput.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/templates/expandableSearchBoxInput.html
@@ -81,7 +81,7 @@
           </div>
           <template if:true={shouldDisplaySuggestions}>
             <c-quantic-search-box-suggestions-list
-              onselection={handleSelection}
+              onquantic__selection={handleSelection}
               suggestions={suggestions}
               query={inputValue}
               recent-queries={recentQueries}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxSuggestionsList/quanticSearchBoxSuggestionsList.js b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxSuggestionsList/quanticSearchBoxSuggestionsList.js
index 881fe70c51b..090163b308e 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxSuggestionsList/quanticSearchBoxSuggestionsList.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxSuggestionsList/quanticSearchBoxSuggestionsList.js
@@ -20,13 +20,12 @@ const optionCSSClass =
 
 /**
  * The `QuanticSearchBoxSuggestionsList` is used internally by search box components to display the query suggestions in an omnibox.
- * @fires CustomEvent#highlightchange
- * @fires CustomEvent#suggestionselected
+ * @fires CustomEvent#quantic__selection
  * @fires CustomEvent#quantic__clearrecentqueries
  * @category Search
  * @category Insight Panel
  * @example
- * <c-quantic-search-box-suggestions-list suggestions={suggestions} onhighlightchange={handleHighlightChange} onsuggestionselected={handleSuggestionSelection}></c-quantic-search-box-suggestions-list>
+ * <c-quantic-search-box-suggestions-list suggestions={suggestions} onquantic__selection={handleSuggestionSelection}></c-quantic-search-box-suggestions-list>
  */
 export default class QuanticSearchBoxSuggestionsList extends LightningElement {
   /**
@@ -163,11 +162,14 @@ export default class QuanticSearchBoxSuggestionsList extends LightningElement {
 
   sendSuggestionListIdToInput() {
     const listboxId = this.template.querySelector('ul').getAttribute('id');
-    const suggestionListEvent = new CustomEvent('suggestionlistrender', {
-      detail: listboxId,
-      bubbles: true,
-      composed: true,
-    });
+    const suggestionListEvent = new CustomEvent(
+      'quantic__suggestionlistrender',
+      {
+        detail: listboxId,
+        bubbles: true,
+        composed: true,
+      }
+    );
     this.dispatchEvent(suggestionListEvent);
   }
 
@@ -250,7 +252,7 @@ export default class QuanticSearchBoxSuggestionsList extends LightningElement {
       isClearRecentQueryButton: isClearRecentQueryButton,
       isRecentQuery: isRecentQuery,
     };
-    const suggestionSelectedEvent = new CustomEvent('selection', {
+    const suggestionSelectedEvent = new CustomEvent('quantic__selection', {
       detail: {selection},
     });
     this.dispatchEvent(suggestionSelectedEvent);
diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchInterface/quanticSearchInterface.js b/packages/quantic/force-app/main/default/lwc/quanticSearchInterface/quanticSearchInterface.js
index 9e96cf5f79f..583096dc89e 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticSearchInterface/quanticSearchInterface.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticSearchInterface/quanticSearchInterface.js
@@ -133,9 +133,12 @@ export default class QuanticSearchInterface extends LightningElement {
     this.unsubscribeUrlManager?.();
     window.removeEventListener('hashchange', this.onHashChange);
     if (this.ariaLiveEventsBound) {
-      this.removeEventListener('arialivemessage', this.handleAriaLiveMessage);
       this.removeEventListener(
-        'registerregion',
+        'quantic__arialivemessage',
+        this.handleAriaLiveMessage
+      );
+      this.removeEventListener(
+        'quantic__registerregion',
         this.handleRegisterAriaLiveRegion
       );
     }
@@ -202,11 +205,11 @@ export default class QuanticSearchInterface extends LightningElement {
 
   bindAriaLiveEvents() {
     this.template.addEventListener(
-      'arialivemessage',
+      'quantic__arialivemessage',
       this.handleAriaLiveMessage.bind(this)
     );
     this.template.addEventListener(
-      'registerregion',
+      'quantic__registerregion',
       this.handleRegisterAriaLiveRegion.bind(this)
     );
     this.ariaLiveEventsBound = true;
diff --git a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html
index 16894f0052d..0f1e2c582a1 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html
@@ -28,8 +28,8 @@
       </div>
       <div class="slds-var-m-bottom_small">
         <c-quantic-feedback success-message={labels.thankYouForFeedback}
-          hide-explain-why-button={hideExplainWhyFeedbackButton} onlike={like} ondislike={dislike}
-          onpressexplainwhy={explainWhy} state={feedbackState}></c-quantic-feedback>
+          hide-explain-why-button={hideExplainWhyFeedbackButton} onquantic__like={like} onquantic__dislike={dislike}
+          onquantic__pressexplainwhy={explainWhy} state={feedbackState}></c-quantic-feedback>
       </div>
     </template>
   </template>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticSourceCitations/quanticSourceCitations.html b/packages/quantic/force-app/main/default/lwc/quanticSourceCitations/quanticSourceCitations.html
index 8696895cae7..2b5c76292d7 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticSourceCitations/quanticSourceCitations.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticSourceCitations/quanticSourceCitations.html
@@ -9,7 +9,7 @@
           key={citation.data.id}
           citation={citation.data}
           interactive-citation={citation.interactiveCitation}
-          oncitationhover={citation.handleCitationHover}
+          onquantic__citationhover={citation.handleCitationHover}
         ></c-quantic-citation>
       </template>
     </ol>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/__tests__/quanticStatefulButton.test.js b/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/__tests__/quanticStatefulButton.test.js
index 5e3228b27af..38675c1cc02 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/__tests__/quanticStatefulButton.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/__tests__/quanticStatefulButton.test.js
@@ -20,8 +20,14 @@ const selectors = {
 };
 
 function setupEventListeners(element) {
-  element.addEventListener('select', functionsMocks.exampleHandleSelect);
-  element.addEventListener('deselect', functionsMocks.exampleHandleDeselect);
+  element.addEventListener(
+    'quantic__select',
+    functionsMocks.exampleHandleSelect
+  );
+  element.addEventListener(
+    'quantic__deselect',
+    functionsMocks.exampleHandleDeselect
+  );
 }
 
 const exampleOptions = {
diff --git a/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/quanticStatefulButton.js b/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/quanticStatefulButton.js
index cc46c8f6567..2f9cbb5f1c8 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/quanticStatefulButton.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticStatefulButton/quanticStatefulButton.js
@@ -68,9 +68,9 @@ export default class QuanticStatefulButton extends LightningElement {
   handleClick(event) {
     event.stopPropagation();
     if (this.selected) {
-      this.dispatchEvent(new CustomEvent('deselect'));
+      this.dispatchEvent(new CustomEvent('quantic__deselect'));
     } else {
-      this.dispatchEvent(new CustomEvent('select'));
+      this.dispatchEvent(new CustomEvent('quantic__select'));
     }
   }
 
diff --git a/packages/quantic/force-app/main/default/lwc/quanticTab/quanticTab.js b/packages/quantic/force-app/main/default/lwc/quanticTab/quanticTab.js
index ed9eef28f6b..8070b85ff44 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticTab/quanticTab.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticTab/quanticTab.js
@@ -68,7 +68,9 @@ export default class QuanticTab extends LightningElement {
 
   renderedCallback() {
     initializeWithHeadless(this, this.engineId, this.initialize);
-    this.dispatchEvent(new CustomEvent('tab_rendered', {bubbles: true}));
+    this.dispatchEvent(
+      new CustomEvent('quantic__tabrendered', {bubbles: true})
+    );
   }
 
   /**
diff --git a/packages/quantic/force-app/main/default/lwc/quanticTabBar/quanticTabBar.js b/packages/quantic/force-app/main/default/lwc/quanticTabBar/quanticTabBar.js
index 314df55fa3a..72a36a2e421 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticTabBar/quanticTabBar.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticTabBar/quanticTabBar.js
@@ -39,7 +39,7 @@ export default class QuanticTabBar extends LightningElement {
   connectedCallback() {
     window.addEventListener('click', this.closeDropdown);
     window.addEventListener('resize', this.updateTabsDisplay);
-    this.addEventListener('tab_rendered', this.updateTabsDisplay);
+    this.addEventListener('quantic__tabrendered', this.updateTabsDisplay);
   }
 
   renderedCallback() {
diff --git a/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.html b/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.html
index d19a27bcab3..47cef4a038a 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.html
@@ -12,7 +12,7 @@
     <template if:false={showPlaceholder}>
       <template if:true={showFacet}>
         <div class="slds-size_1-of-1 slds-var-m-bottom_large">
-          <c-quantic-card-container title={label} onheaderclick={toggleFacetVisibility} onheaderkeydown={toggleFacetVisibility}>
+          <c-quantic-card-container title={label} onquantic__headerclick={toggleFacetVisibility} onquantic__headerkeydown={toggleFacetVisibility}>
             <lightning-button-icon
               slot="actions"
               class={actionButtonCssClasses}
@@ -23,7 +23,7 @@
               tabindex="-1"
               aria-hidden="true"
             ></lightning-button-icon>
-    
+
             <template if:true={hasActiveValues}>
               <button
                 class="facet__clear-filter slds-button slds-grid slds-grid_vertical-align-center slds-p-horizontal_x-small slds-m-top_small"
@@ -106,7 +106,7 @@
                         <c-quantic-facet-value
                           item={v}
                           is-checked={v.selected}
-                          onselectvalue={onSelectValue}
+                          onquantic__selectvalue={onSelectValue}
                           formatting-function={formatFacetValue}
                           display-as-link
                           is-range-facet
diff --git a/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.js b/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.js
index b3653d5c73d..eb5e982517c 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticTimeframeFacet/quanticTimeframeFacet.js
@@ -463,10 +463,10 @@ export default class QuanticTimeframeFacet extends LightningElement {
   }
 
   /**
-   * Fires the 'renderfacet' custom event.
+   * Fires the 'quantic__renderfacet' custom event.
    */
   sendFacetRenderEvent() {
-    const renderFacetEvent = new CustomEvent('renderfacet', {
+    const renderFacetEvent = new CustomEvent('quantic__renderfacet', {
       detail: {
         id: this.facetId ?? this.field,
         shouldRenderFacet: this.showFacet,
diff --git a/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js b/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js
index d6092c35252..65452498a5b 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticUtils/quanticUtils.js
@@ -550,7 +550,7 @@ export class Store {
  */
 export function AriaLiveRegion(regionName, elem, assertive = false) {
   function dispatchMessage(message) {
-    const ariaLiveMessageEvent = new CustomEvent('arialivemessage', {
+    const ariaLiveMessageEvent = new CustomEvent('quantic__arialivemessage', {
       bubbles: true,
       composed: true,
       detail: {
@@ -563,7 +563,7 @@ export function AriaLiveRegion(regionName, elem, assertive = false) {
   }
 
   function registerRegion() {
-    const registerRegionEvent = new CustomEvent('registerregion', {
+    const registerRegionEvent = new CustomEvent('quantic__registerregion', {
       bubbles: true,
       composed: true,
       detail: {