POC 2 using slots and composition

packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.css

@@ -37,4 +37,8 @@
 .citation__tooltip {
   color: rgb(26, 27, 30);
   cursor: default;
-}
+}
+
+.citation__title--active {
+  color: var(--lwc-brandAccessible, #0176d3);
+}

packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.html

@@ -12,11 +12,8 @@
       onmouseleave={handleCitationMouseLeave}
       onclick={handleClick}
     >
-      <p
-        class="citation__title slds-m-left_x-small slds-truncate slds-has-flexi-truncate"
-      >
-        {citationTitle}
-      </p>
+      <slot name="icon"></slot>
+      <p class={citationTitleClasses}>{citationTitle}</p>
     </a>
     <c-quantic-tooltip
       light-theme
@@ -26,9 +23,27 @@
       onmouseleave={handleTooltipMouseLeave}
     >
       <div class="citation__tooltip" slot="content">
-        <div data-testid="citation__tooltip-uri" class="slds-text-body_small slds-text-color_weak slds-truncate slds-var-p-vertical_xxx-small">{hrefValue}</div>
-        <div data-testid="citation__tooltip-title" class="slds-text-title_bold slds-var-p-vertical_xx-small">{citationTitle}</div>
-        <div data-testid="citation__tooltip-text" class="citation__tooltip-text slds-text-body_small slds-var-p-vertical_xxx-small">{text}</div>
+        <div
+          data-testid="citation__tooltip-uri"
+          class="slds-text-body_small slds-text-color_weak slds-truncate slds-var-p-vertical_xxx-small"
+        >
+          {hrefValue}
+        </div>
+        <div
+          data-testid="citation__tooltip-title"
+          class="slds-text-title_bold slds-var-p-vertical_xx-small"
+        >
+          {citationTitle}
+        </div>
+        <div
+          data-testid="citation__tooltip-text"
+          class="citation__tooltip-text slds-text-body_small slds-var-p-vertical_xxx-small"
+        >
+          {text}
+        </div>
+        <div>
+          <slot name="actions"></slot>
+        </div>
       </div>
     </c-quantic-tooltip>
   </li>

packages/quantic/force-app/main/default/lwc/quanticCitation/quanticCitation.js

@@ -54,6 +54,12 @@ export default class QuanticCitation extends NavigationMixin(LightningElement) {
    * @default false
    */
   @api disableCitationAnchoring = false;
+  /**
+   * The variant of the citation.
+   * @api
+   * @type {string} "default" || "active"
+   */
+  @api variant = 'default';
 
   /** @type {Object} */
   timeout;
@@ -247,4 +253,10 @@ export default class QuanticCitation extends NavigationMixin(LightningElement) {
       ? this.salesforceRecordUrl
       : (this.clickUri ?? this.citation?.uri);
   }
+
+  get citationTitleClasses() {
+    return this.variant === 'active'
+      ? 'citation__title citation__title--active slds-m-left_x-small slds-truncate slds-has-flexi-truncate'
+      : 'citation__title slds-m-left_x-small slds-truncate slds-has-flexi-truncate';
+  }
 }

packages/quantic/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html

@@ -66,7 +66,9 @@
                     citations={citations}
                     citation-hover-handler={handleCitationHover}
                     disable-citation-anchoring={disableCitationAnchoring}
-                  ></c-quantic-source-citations>
+                  >
+                    <slot name="citation-component" slot="citation-component"></slot>
+                </c-quantic-source-citations>
                 </div>
               </template>
             </div>

packages/quantic/force-app/main/default/lwc/quanticSourceCitations/quanticSourceCitations.html

@@ -5,14 +5,19 @@
     >
     <ol class="slds-list_horizontal slds-wrap">
       <template for:each={indexedCitations} for:item="citation">
-        <c-quantic-citation
-          key={citation.data.id}
-          citation={citation.data}
-          interactive-citation={citation.interactiveCitation}
-          onquantic__citationhover={citation.handleCitationHover}
-          disable-citation-anchoring={disableCitationAnchoring}
-        ></c-quantic-citation>
+        <slot key={citation.data.id} name="citation-component">
+          <!-- DEFAULT: Render default quanticCitation if no slot content provided -->
+          <c-quantic-citation
+            citation={citation.data}
+            interactive-citation={citation.interactiveCitation}
+            onquantic__citationhover={citation.handleCitationHover}
+            disable-citation-anchoring={disableCitationAnchoring}
+          >
+            <slot name="icon"></slot>
+            <slot name="actions"></slot>
+          </c-quantic-citation>
+        </slot>
       </template>
     </ol>
   </template>
-</template>
+</template>

packages/quantic/force-app/main/default/lwc/quanticSourceCitations/quanticSourceCitations.js

@@ -56,6 +56,11 @@ export default class QuanticSourceCitations extends LightningElement {
 
   renderedCallback() {
     initializeWithHeadless(this, this.engineId, this.initialize);
+
+    // Push citation data to slotted custom components
+    if (this.isInitialized) {
+      this._pushDataToCustomSlots();
+    }
   }
 
   initialize = (engine) => {
@@ -64,6 +69,43 @@ export default class QuanticSourceCitations extends LightningElement {
     this.isInitialized = true;
   };
 
+  /**
+   * Pushes citation data to custom slotted components
+   * @private
+   */
+  _pushDataToCustomSlots() {
+    const slots = this.template.querySelectorAll('slot[name="citation-component"]');
+    if (!slots || slots.length === 0) return;
+
+    slots.forEach((slotEl, index) => {
+      // @ts-ignore
+      const assigned = slotEl.assignedElements({flatten: true});
+
+      // If nothing assigned, fallback is showing - don't push to it
+      if (assigned.length === 0) {
+        return; // Using fallback content
+      }
+
+      // Get the corresponding citation for this slot
+      const citationData = this.indexedCitations[index];
+      if (!citationData) return;
+
+      // Push data to each assigned element
+      assigned.forEach((el) => {
+        // Set the public API properties directly
+        if ('citation' in el) {
+          el.citation = citationData.data;
+        }
+        if ('interactiveCitation' in el) {
+          el.interactiveCitation = citationData.interactiveCitation;
+        }
+        if ('engineId' in el) {
+          el.engineId = this.engineId;
+        }
+      });
+    });
+  }
+
   /**
    * Returns the indexed citations.
    * @returns {Object}
@@ -97,4 +139,4 @@ export default class QuanticSourceCitations extends LightningElement {
   get shouldDisplayCitations() {
     return this.isInitialized && !!this.citations?.length;
   }
-}
+}