@salesforcedevs/dx-components 1.3.210-lnb2-alpha → 1.3.210-lnb21-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.210-lnb2-alpha",
+    "version": "1.3.210-lnb21-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg

@@ -272,6 +272,20 @@
             </g>
         </g>
     </symbol>
+    <symbol id="data-cloud" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" style="fill:#fff">
+        <defs>
+        <style>.acls-2,.acls-4{stroke-width:0}.acls-2{fill:#8a8ed1}.acls-4{fill:#fff}</style>
+        </defs>
+        <path class="acls-2" d="M28 4C14.77 4 4 14.77 4 28c0 7.9 3.84 14.93 9.76 19.3.7-4.58 3.55-8.46 7.5-10.56-2.61-2.02-4.29-5.17-4.29-8.71C16.97 21.95 21.92 17 28 17s11.03 4.95 11.03 11.03c0 3.54-1.69 6.69-4.29 8.71 3.95 2.1 6.8 5.98 7.5 10.56 5.92-4.37 9.77-11.4 9.77-19.31 0-13.23-10.77-24-24-24Z"/>
+        <path class="acls-2" d="M11.07 18.3c.69-1.2 2.21-1.61 3.41-.92a2.5 2.5 0 0 1 .93 3.41c-.46.81-1.3 1.26-2.17 1.26-.42 0-.85-.11-1.24-.34a2.489 2.489 0 0 1-.92-3.41ZM8.49 28.06c0-1.38 1.11-2.5 2.49-2.51 1.38 0 2.51 1.11 2.51 2.5s-1.11 2.5-2.49 2.5h-.01c-1.38 0-2.5-1.11-2.5-2.49ZM14.55 38.71a2.504 2.504 0 0 1-3.42-.9c-.7-1.2-.29-2.73.9-3.42 1.19-.7 2.73-.29 3.42.9a2.51 2.51 0 0 1-.9 3.42ZM20.7 15.46c-.4.23-.83.34-1.26.34-.86 0-1.7-.44-2.16-1.24-.7-1.19-.3-2.73.9-3.42 1.19-.7 2.72-.29 3.42.9a2.51 2.51 0 0 1-.9 3.42ZM28 13.49h-.07c-1.38 0-2.5-1.11-2.5-2.49 0-1.38 1.11-2.5 2.49-2.51h.11c1.37.02 2.47 1.13 2.47 2.5s-1.12 2.5-2.5 2.5ZM38.67 14.52a2.51 2.51 0 0 1-2.17 1.24c-.43 0-.86-.1-1.25-.33a2.5 2.5 0 0 1 2.5-4.33c1.2.69 1.6 2.22.92 3.42ZM41.48 17.32a2.5 2.5 0 0 1 2.5 4.33c-.39.23-.82.33-1.25.33-.86 0-1.7-.44-2.17-1.24-.69-1.2-.28-2.73.92-3.42ZM44.91 37.73c-.46.81-1.3 1.26-2.17 1.26-.42 0-.85-.11-1.24-.34a2.493 2.493 0 0 1-.92-3.41c.69-1.2 2.22-1.61 3.42-.92a2.5 2.5 0 0 1 .91 3.41ZM45.01 30.48c-1.38 0-2.5-1.12-2.5-2.49s1.12-2.51 2.5-2.51a2.5 2.5 0 0 1 0 5Z"/>
+        <circle class="acls-4" cx="27.99" cy="28.03" r="7.03"/>
+        <path class="acls-4" d="M27.99 39.06c-5.75 0-10.42 4.67-10.42 10.42v.13C20.72 51.14 24.26 52 28 52s7.26-.86 10.41-2.38v-.14c0-5.75-4.67-10.42-10.42-10.42Z"/>
+        <circle cx="28" cy="28" r="28" style="stroke-width:0;fill:#200647"/>
+        <path class="acls-4" d="M38.41 49.62C35.26 51.14 31.73 52 28 52s-7.27-.86-10.43-2.39v-.13c0-5.75 4.67-10.42 10.42-10.42s10.42 4.67 10.42 10.42v.14Z"/>
+        <circle class="acls-4" cx="27.99" cy="28.03" r="7.03"/>
+        <path d="M42.23 47.31c-.7-4.58-3.55-8.47-7.5-10.56 2.61-2.02 4.29-5.17 4.29-8.71 0-6.08-4.95-11.03-11.03-11.03s-11.03 4.95-11.03 11.03c0 3.54 1.69 6.69 4.29 8.71-3.95 2.1-6.8 5.98-7.5 10.56-5.91-4.38-9.76-11.4-9.76-19.3C4 14.77 14.77 4 28 4s24 10.77 24 24c0 7.91-3.85 14.94-9.77 19.31Z" style="fill:#7f8ced;stroke-width:0"/>
+        <path class="acls-4" d="M37.75 11.1a2.5 2.5 0 0 0-2.5 4.33c.39.23.82.33 1.25.33.86 0 1.7-.44 2.17-1.24.68-1.2.28-2.73-.92-3.42ZM11 30.55c1.38 0 2.49-1.12 2.49-2.5s-1.13-2.5-2.51-2.5a2.5 2.5 0 0 0-2.49 2.51c0 1.38 1.12 2.49 2.5 2.49H11ZM42.73 21.98c.43 0 .86-.1 1.25-.33a2.5 2.5 0 0 0-2.5-4.33c-1.2.69-1.61 2.22-.92 3.42.47.8 1.31 1.24 2.17 1.24ZM11.99 21.71c.39.23.82.34 1.24.34a2.5 2.5 0 0 0 1.24-4.67c-1.2-.69-2.72-.28-3.41.92s-.28 2.73.92 3.41ZM44 34.32c-1.2-.69-2.73-.28-3.42.92-.69 1.19-.28 2.72.92 3.41.39.23.82.34 1.24.34.87 0 1.71-.45 2.17-1.26a2.5 2.5 0 0 0-.91-3.41ZM45.01 25.48c-1.38 0-2.5 1.12-2.5 2.51s1.12 2.49 2.5 2.49a2.5 2.5 0 0 0 0-5ZM28.03 8.49h-.11A2.5 2.5 0 0 0 25.43 11c0 1.38 1.12 2.49 2.5 2.49H28a2.5 2.5 0 0 0 .03-5ZM18.18 11.14a2.49 2.49 0 0 0-.9 3.42c.46.8 1.3 1.24 2.16 1.24.43 0 .86-.11 1.26-.34a2.51 2.51 0 0 0 .9-3.42c-.7-1.19-2.23-1.6-3.42-.9ZM12.03 34.39c-1.19.69-1.6 2.22-.9 3.42a2.504 2.504 0 0 0 3.42.9 2.51 2.51 0 0 0 .9-3.42 2.499 2.499 0 0 0-3.42-.9Z"/>
+    </symbol>
     <symbol viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" id="integration">
         <g id="Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g id="ICONS-symbols" transform="translate(-1005.000000, 0.000000)" fill-rule="nonzero">
@@ -913,4 +927,31 @@
         </clipPath>
         </defs>
     </symbol>
+    <symbol fill="none" id="data-cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
+        <path fill="#8a8ed1" d="m28,4C14.77,4,4,14.77,4,28c0,7.9,3.84,14.93,9.76,19.3.7-4.58,3.55-8.46,7.5-10.56-2.61-2.02-4.29-5.17-4.29-8.71,0-6.08,4.95-11.03,11.03-11.03s11.03,4.95,11.03,11.03c0,3.54-1.69,6.69-4.29,8.71,3.95,2.1,6.8,5.98,7.5,10.56,5.92-4.37,9.77-11.4,9.77-19.31,0-13.23-10.77-24-24-24Z"/>
+        <path fill="#8a8ed1" d="m11.07,18.3c.69-1.2,2.21-1.61,3.41-.92,1.2.68,1.61,2.21.93,3.41h0c-.46.81-1.3,1.26-2.17,1.26-.42,0-.85-.11-1.24-.34-1.2-.68-1.61-2.21-.92-3.41Z"/>
+        <path fill="#8a8ed1" d="m8.49,28.06c0-1.38,1.11-2.5,2.49-2.51,1.38,0,2.51,1.11,2.51,2.5s-1.11,2.5-2.49,2.5h-.01c-1.38,0-2.5-1.11-2.5-2.49Z"/>
+        <path fill="#8a8ed1" d="m14.55,38.71c-.4.23-.83.34-1.26.34-.86,0-1.7-.45-2.16-1.24-.7-1.2-.29-2.73.9-3.42,1.19-.7,2.73-.29,3.42.9.69,1.19.29,2.72-.9,3.42Z"/>
+        <path fill="#8a8ed1" d="m20.7,15.46c-.4.23-.83.34-1.26.34-.86,0-1.7-.44-2.16-1.24-.7-1.19-.3-2.73.9-3.42,1.19-.7,2.72-.29,3.42.9.69,1.19.29,2.72-.9,3.42Z"/>
+        <path fill="#8a8ed1" d="m28,13.49h-.07c-1.38,0-2.5-1.11-2.5-2.49,0-1.38,1.11-2.5,2.49-2.51h.11c1.37.02,2.47,1.13,2.47,2.5s-1.12,2.5-2.5,2.5Z"/>
+        <path fill="#8a8ed1" d="m38.67,14.52c-.47.8-1.31,1.24-2.17,1.24-.43,0-.86-.1-1.25-.33-1.2-.69-1.6-2.22-.91-3.42.69-1.19,2.22-1.6,3.41-.91,1.2.69,1.6,2.22.92,3.42Z"/>
+        <path fill="#8a8ed1" d="m41.48,17.32c1.19-.69,2.72-.28,3.41.91.69,1.2.29,2.73-.91,3.42-.39.23-.82.33-1.25.33-.86,0-1.7-.44-2.17-1.24-.69-1.2-.28-2.73.92-3.42Z"/>
+        <path fill="#8a8ed1" d="m44.91,37.73c-.46.81-1.3,1.26-2.17,1.26-.42,0-.85-.11-1.24-.34-1.2-.69-1.61-2.22-.92-3.41.69-1.2,2.22-1.61,3.42-.92,1.19.69,1.6,2.22.91,3.41Z"/>
+        <path fill="#8a8ed1" d="m45.01,30.48c-1.38,0-2.5-1.12-2.5-2.49s1.12-2.51,2.5-2.51,2.5,1.12,2.5,2.5-1.12,2.5-2.5,2.5Z"/>
+        <circle fill="#fff" cx="27.99" cy="28.03" r="7.03"/>
+        <path fill="#fff" d="m27.99,39.06c-5.75,0-10.42,4.67-10.42,10.42v.13c3.15,1.53,6.69,2.39,10.43,2.39s7.26-.86,10.41-2.38v-.14c0-5.75-4.67-10.42-10.42-10.42Z"/>
+        <circle fill="#200647" class="cls-1" cx="28" cy="28" r="28"/>
+        <path fill="#fff" d="m38.41,49.62c-3.15,1.52-6.68,2.38-10.41,2.38s-7.27-.86-10.43-2.39v-.13c0-5.75,4.67-10.42,10.42-10.42s10.42,4.67,10.42,10.42v.14Z"/>
+        <circle fill="#fff" cx="27.99" cy="28.03" r="7.03"/>
+        <path fill="#7f8ced" d="m42.23,47.31c-.7-4.58-3.55-8.47-7.5-10.56,2.61-2.02,4.29-5.17,4.29-8.71,0-6.08-4.95-11.03-11.03-11.03s-11.03,4.95-11.03,11.03c0,3.54,1.69,6.69,4.29,8.71-3.95,2.1-6.8,5.98-7.5,10.56-5.91-4.38-9.76-11.4-9.76-19.3C4,14.77,14.77,4,28,4s24,10.77,24,24c0,7.91-3.85,14.94-9.77,19.31Z"/>
+        <path fill="#fff" d="m37.75,11.1c-1.19-.69-2.72-.28-3.41.91-.69,1.2-.29,2.73.91,3.42.39.23.82.33,1.25.33.86,0,1.7-.44,2.17-1.24.68-1.2.28-2.73-.92-3.42Z"/>
+        <path fill="#fff" d="m11,30.55c1.38,0,2.49-1.12,2.49-2.5s-1.13-2.5-2.51-2.5c-1.38.01-2.5,1.13-2.49,2.51,0,1.38,1.12,2.49,2.5,2.49h.01Z"/>
+        <path fill="#fff" d="m42.73,21.98c.43,0,.86-.1,1.25-.33,1.2-.69,1.6-2.22.91-3.42-.69-1.19-2.22-1.6-3.41-.91-1.2.69-1.61,2.22-.92,3.42.47.8,1.31,1.24,2.17,1.24Z"/>
+        <path fill="#fff" d="m11.99,21.71c.39.23.82.34,1.24.34.87,0,1.71-.45,2.17-1.26h0c.68-1.2.27-2.73-.93-3.41-1.2-.69-2.72-.28-3.41.92s-.28,2.73.92,3.41Z"/>
+        <path fill="#fff" d="m44,34.32c-1.2-.69-2.73-.28-3.42.92-.69,1.19-.28,2.72.92,3.41.39.23.82.34,1.24.34.87,0,1.71-.45,2.17-1.26.69-1.19.28-2.72-.91-3.41Z"/>
+        <path fill="#fff" d="m45.01,25.48c-1.38,0-2.5,1.12-2.5,2.51s1.12,2.49,2.5,2.49,2.5-1.12,2.5-2.5-1.12-2.5-2.5-2.5Z"/>
+        <path fill="#fff" d="m28.03,8.49h-.11c-1.38.01-2.5,1.13-2.49,2.51,0,1.38,1.12,2.49,2.5,2.49h.07c1.38,0,2.5-1.12,2.5-2.5s-1.1-2.48-2.47-2.5Z"/>
+        <path fill="#fff" d="m18.18,11.14c-1.2.69-1.6,2.23-.9,3.42.46.8,1.3,1.24,2.16,1.24.43,0,.86-.11,1.26-.34,1.19-.7,1.59-2.23.9-3.42-.7-1.19-2.23-1.6-3.42-.9Z"/>
+        <path fill="#fff" d="m12.03,34.39c-1.19.69-1.6,2.22-.9,3.42.46.79,1.3,1.24,2.16,1.24.43,0,.86-.11,1.26-.34,1.19-.7,1.59-2.23.9-3.42-.69-1.19-2.23-1.6-3.42-.9Z"/>
+    </symbol>
 </svg>

package/src/modules/dx/footer/links.ts

@@ -94,7 +94,9 @@ export const generalLinksRaw: OptionWithRequiredNested[] = [
                 id: "Events and Calendar"
             },
             {
-                link: { href: "https://go.appexchange.com/partnerprogram" },
+                link: {
+                    href: "https://www.salesforce.com/partners/become-a-partner/"
+                },
                 label: "Partner Community",
                 id: "Partner Community"
             },

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -14,19 +14,25 @@ export default class MainContentHeader extends LightningElement {
     @api imgSrcMobile!: string;
     @api ctaTarget?: string | null = null;
     @api ctaTargetSecondary?: string | null = null;
-    @api backgroundColor?: string;
-    @api backgroundColorDark: boolean = false;
+    @api backgroundGradientColor?: string;
+    @api backgroundGradientDark: boolean = false;
     @api hasSwoop: boolean = false;
 
     private get style() {
         return cx(
-            this.backgroundColor &&
-                `background-color: var(--dx-g-${this.backgroundColor});`
+            this.backgroundGradientColor &&
+                !this.backgroundGradientDark &&
+                `background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
+            this.backgroundGradientDark &&
+                `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`
         );
     }
 
     private get textStyle() {
-        return cx("text-container", this.backgroundColorDark && "light-text");
+        return cx(
+            "text-container",
+            this.backgroundGradientDark && "light-text"
+        );
     }
 
     private onCtaClick(e: Event) {

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -164,12 +164,13 @@ export default class ScrollManager extends LightningElement {
     }
 
     saveScroll = throttle(100, () => {
+        const scrollingElement = document.scrollingElement || document.body;
         window.history.replaceState(
             {
                 ...window.history.state,
                 scroll: {
-                    value: document.body.scrollTop,
-                    docSize: document.body.scrollHeight
+                    value: scrollingElement.scrollTop,
+                    docSize: scrollingElement.scrollHeight
                 }
             },
             "",

package/src/modules/dx/searchResults/searchResults.css

@@ -274,18 +274,15 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 }
 
 .dx-result-title {
+    /* override the default Coveo style */
+    color: var(--dx-g-blue-vibrant-20) !important;
+    display: block;
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-lg);
     margin: 0;
     margin-bottom: var(--dx-g-spacing-sm);
 }
 
-.CoveoResultLink,
-a.CoveoResultLink,
-.CoveoResult a.CoveoResultLink {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
 .dx-result-excerpt {
     color: var(--dx-g-gray-10);
     font-size: 14px;
@@ -422,11 +419,17 @@ a.CoveoResultLink,
     width: fit-content;
 }
 
-.dx-badge {
-    display: block;
+.dx-result-info {
+    display: flex;
+    gap: 12px;
     margin-bottom: var(--dx-g-spacing-smd);
 }
 
+.breadcrumb {
+    color: #555;
+    font-size: var(--dx-g-text-xs);
+}
+
 .no-results {
     display: flex;
     justify-content: center;

package/src/modules/dx/searchResults/searchResults.ts

@@ -6,6 +6,10 @@ import {
     CONTENT_TYPE_ICONS
 } from "dxConstants/contentTypes";
 import { getContentTypeColorVariables } from "dxUtils/contentTypes";
+import { pollUntil } from "dxUtils/async";
+
+// Max height for breadcrumb without wrapping
+const MAX_BREADCRUMB_HEIGHT = 16;
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -40,35 +44,78 @@ const resultsTemplatesInnerHtml = `
     <script
         id="myDocumentResultTemplate"
         class="result-template"
-        type="text/html"
+        type="text/underscore"
         data-field-publicurl=""
     >
         <div class="dx-result">
-            <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
-            <p class="dx-result-title">
-                <a
-                    class="CoveoResultLink"
-                    data-field="@publicurl"
-                ></a>
-            </p>
+            <div class="dx-result-info">
+                <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+                <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
+                    <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
+                <% } else { %>
+                    <% if (raw.uri.includes('/references/')) { %>
+                        <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
+                    <% } else { %>
+                        <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                    <% } %>
+                <% } %>
+            </div>
+            <a
+                href="<%= raw.uri %>"
+                class="dx-result-title"
+            >
+                <%= title %>
+                <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
+                <% } %>
+            </a>
             <p class="dx-result-excerpt CoveoExcerpt"></p>
         </div>
     </script>
     <script
         id="myDefaultResultTemplate"
         class="result-template"
-        type="text/html"
+        type="text/underscore"
     >
             <div class="dx-result">
-                <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
-                <p class="dx-result-title">
-                    <a class="CoveoResultLink"></a>
-                </p>
+                <div class="dx-result-info">
+                    <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+                    <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
+                        <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
+                    <% } else { %>
+                        <% if (raw.uri.includes('/references/')) { %>
+                            <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
+                        <% } else { %>
+                            <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                        <% } %>
+                    <% } %>
+                </div>
+                <a
+                    href="<%= raw.uri %>"
+                    class="dx-result-title"
+                >
+                    <% if (title) { %>
+                        <%= title %>
+                    <% } else { %>
+                        <%= uri %>
+                    <% } %>
+                    <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                            <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
+                    <% } %>
+                </a>
                 <p class="dx-result-excerpt CoveoExcerpt"></p>
             </div>
     </script>
 `;
 
+const isInternalDomain = (domain: string) =>
+    domain === "developer.salesforce.com" ||
+    domain === "developer-website-s.herokuapp.com";
+
+const isTrailheadDomain = (domain: string) =>
+    domain === "trailhead.salesforce.com" ||
+    domain === "dev.trailhead.salesforce.com";
+
 const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
     const style = getContentTypeColorVariables(value);
     const label = CONTENT_TYPE_LABELS[value];
@@ -88,6 +135,107 @@ const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
         `;
 };
 
+const processParts = (parts: string[], internalFlag = false) => {
+    // filter /docs/ breadcrumb item from internal domains
+    const filterFn = internalFlag
+        ? (part: string) => part !== "docs"
+        : (part: string) => part;
+
+    return parts.filter(filterFn).map((part) => {
+        // Remove special characters & .htm/.xml extension
+        part = part
+            .replace(/_/g, "")
+            .replace(/-/g, "")
+            .replace(/.html*/g, "")
+            .replace(/.xml/g, "")
+            .replace(/b2c/g, "B2C");
+
+        // Capitalize first letter of each word
+        part = part.replace(/\w\S*/g, (w) => {
+            return w.replace(/^\w/, (c) => c.toUpperCase());
+        });
+
+        return `<span class="breadcrumb-item">${decodeURI(part)}</span>`;
+    });
+};
+
+const buildTemplateHelperUriBreadcrumbs = (value: string) => {
+    const url = new URL(value);
+
+    // exclude youtube links from breadcrumbs
+    const hostnamePattern = /^((www\.)?(youtube\.com|youtu\.be))$/;
+
+    // we don't want to show atlas docs because the url structure is mad ugly
+    if (hostnamePattern.test(url.hostname) || url.pathname.includes("atlas.")) {
+        return "";
+    }
+
+    let parts = url.pathname.split("/").filter((part) => part !== "");
+
+    // Remove language prefix from trailhead URLs
+    if (isTrailheadDomain(url.hostname)) {
+        parts = parts
+            .slice(1)
+            .filter((part) => part !== "content" && part !== "learn");
+    }
+
+    const breadcrumbs = processParts(parts, isInternalDomain(url.hostname));
+
+    if (!isInternalDomain(url.hostname)) {
+        // Remove the first breadcrumb item if it's an internal domain (i.e drop developer.salesforce.com from developer.salesforce.com / B2C Commerce / Open Commerce API / Filtering)
+        breadcrumbs.unshift(
+            `<span class="breadcrumb-item">${url.hostname}</span>`
+        );
+
+        return `
+            <span class="breadcrumb">
+                ${breadcrumbs.join(" / ")}
+            </span>
+        `;
+    } else if (breadcrumbs.length === 1) {
+        // Hide breadcrumbs if there is only one breadcrumb item
+        return "";
+    }
+
+    // remove the last breadcrumb item (the search result title makes it redundant)
+    breadcrumbs.pop();
+
+    return `<span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>`;
+};
+
+const buildTemplateHelperBreadcrumbs = (value: string) => {
+    const parts = value.split("/").filter((part) => part !== "");
+
+    // Don't show breadcrumbs if there's only one part
+    if (parts.length === 1) {
+        return "";
+    }
+
+    const breadcrumbs = processParts(parts);
+
+    // remove last breadcrumb item
+    breadcrumbs.pop();
+
+    return `
+            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>
+        `;
+};
+
+const buildTemplateHelperMetaBreadcrumbs = (value: string) => {
+    const parts = value.split("/").filter((part) => part !== "");
+
+    // Don't show breadcrumbs if there's only one part
+    if (parts.length === 1) {
+        return "";
+    }
+
+    const breadcrumbs = processParts(parts);
+
+    return `
+            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")}</span>
+        `;
+};
+
 // @ts-ignore Dark Magic (TM) we are overriding the 'title' field with a custom getter. We should really stop doing this.
 export default class SearchResults extends LightningElement {
     @api coveoOrganizationId!: string;
@@ -139,9 +287,12 @@ export default class SearchResults extends LightningElement {
         BreadcrumbManager.clearBreadcrumbs();
     }
 
-    private currentPage: number = 1;
+    private currentPage: number = 25;
     private totalPages: number = 1;
 
+    private originalBreadcrumbs: string[] = [];
+    private initialWindowWidth = window.innerWidth;
+
     private goToPage(e: CustomEvent) {
         const page = e.detail;
         const Pager = Coveo.get(
@@ -179,6 +330,7 @@ export default class SearchResults extends LightningElement {
                 if (Coveo.state(this.root!, "q") === "") {
                     Coveo.state(this.root!, "sort", "date descending");
                 }
+
                 this.isInitialized = true;
             }
         );
@@ -204,6 +356,126 @@ export default class SearchResults extends LightningElement {
 
             this.trackSearchResults(event, this.query, this.totalResults);
         });
+
+        Coveo.$$(root).on(Coveo.QueryEvents.deferredQuerySuccess, async () => {
+            // wait specified time to ensure breadcrumbs are rendered before processing them
+            await pollUntil(
+                () => {
+                    const coveoResults =
+                        this.root!.querySelector(".CoveoResult");
+
+                    return Boolean(coveoResults);
+                },
+                20,
+                1000
+            );
+
+            this.processBreadcrumbs(root);
+
+            window.onresize = () => this.processBreadcrumbs(root);
+        });
+    }
+
+    // check if the breadcrumb is overflowing or not based on the height of a single character in the text element
+    private isTextWrapping = (element: HTMLElement) => {
+        return element.offsetHeight > MAX_BREADCRUMB_HEIGHT;
+    };
+
+    private truncateBreadcrumbText = (breadcrumbItems: HTMLElement[]) => {
+        breadcrumbItems.forEach((breadcrumbItem: HTMLElement) => {
+            const breadcrumbItemText = breadcrumbItem.textContent!;
+            if (breadcrumbItemText.length > 30) {
+                breadcrumbItem.textContent = `${breadcrumbItemText.substring(
+                    0,
+                    30
+                )}...`;
+            }
+        });
+    };
+
+    private addBreadcrumbEllipsis = (
+        breadcrumbItems: HTMLElement[],
+        breadcrumb: HTMLElement
+    ) => {
+        for (let i = 1; i < breadcrumbItems.length; i++) {
+            if (this.isTextWrapping(breadcrumb)) {
+                // if the previous element is an ellipsis, make it empty (in order to avoid multiple grouped ellipsis)
+                if (breadcrumbItems[i - 1]?.textContent === "...") {
+                    breadcrumbItems[i].innerHTML = "";
+                } else {
+                    breadcrumbItems[i].textContent = "...";
+                }
+            } else {
+                break; // Exit the loop if the breadcrumb is no longer overflowing
+            }
+        }
+
+        // remove any empty breadcrumb items
+        breadcrumb.innerHTML = breadcrumb.innerHTML
+            .replace(
+                / ?\/ +<span class="breadcrumb-item"><\/span> +\/ ?/g,
+                " / "
+            )
+            // when first loading the page on mobile, the breadcrumb items are not grouped correctly
+            .replace(
+                `<span class="breadcrumb-item">...</span> / <span class="breadcrumb-item">...</span>`,
+                `<span class="breadcrumb-item">...</span>`
+            );
+    };
+
+    private formatBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
+        breadcrumbs?.forEach((breadcrumb: HTMLElement) => {
+            // Get all breadcrumb items that are separated by '/'
+            const breadcrumbItems: any =
+                breadcrumb.querySelectorAll(".breadcrumb-item");
+
+            // Check if the breadcrumb is overflowing by comparing it's height to the height of the first breadcrumb item
+            if (this.isTextWrapping(breadcrumb)) {
+                // it is overflowing, so we need to truncate long titles to 30 characters
+                this.truncateBreadcrumbText(breadcrumbItems);
+
+                // Iteratively check if the breadcrumb is still overflowing and replace text with '...' starting from the second breadcrumb item
+                this.addBreadcrumbEllipsis(breadcrumbItems, breadcrumb);
+
+                // After processing all breadcrumb items, if it's still overflowing, hide the breadcrumb element
+                if (this.isTextWrapping(breadcrumb)) {
+                    breadcrumb.style.display = "none";
+                }
+            }
+        });
+    };
+
+    private restoreBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
+        breadcrumbs.forEach((breadcrumb: HTMLElement, index: number) => {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            breadcrumb.innerHTML = this.originalBreadcrumbs[index];
+        });
+    };
+
+    private windowSizeIncreased = () =>
+        window.innerWidth > this.initialWindowWidth;
+
+    private processBreadcrumbs(root: HTMLElement) {
+        // Get all breadcrumbs from search results
+        const breadcrumbs = Array.from(
+            root.querySelectorAll(".breadcrumb")
+        ) as HTMLElement[];
+
+        if (this.originalBreadcrumbs.length === 0) {
+            this.originalBreadcrumbs = breadcrumbs.map(
+                (breadcrumb) => breadcrumb.innerHTML
+            );
+        }
+
+        if (this.windowSizeIncreased()) {
+            /*
+                Reset the breadcrumbs to their original state and process them again.
+                The additional space means we can replace ellipsis with full text.
+            */
+            this.restoreBreadcrumbs(breadcrumbs);
+        }
+
+        this.formatBreadcrumbs(breadcrumbs);
     }
 
     private initializeCoveo() {
@@ -212,6 +484,7 @@ export default class SearchResults extends LightningElement {
         const resultsList = this.template.querySelector(".CoveoResultList");
 
         if (resultsList) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
             resultsList.innerHTML = resultsTemplatesInnerHtml;
         }
 
@@ -227,6 +500,21 @@ export default class SearchResults extends LightningElement {
             buildTemplateHelperBadge
         );
 
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "breadcrumbs",
+            buildTemplateHelperBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "metabreadcrumbs",
+            buildTemplateHelperMetaBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "uriBreadcrumbs",
+            buildTemplateHelperUriBreadcrumbs
+        );
+
         Coveo.init(this.root);
     }
 
@@ -235,6 +523,7 @@ export default class SearchResults extends LightningElement {
             if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
                 this.initializeCoveo();
             } else {
+                // eslint-disable-next-line @lwc/lwc/no-document-query
                 const script = document.querySelector("script.coveo-script");
                 script?.addEventListener("load", () => {
                     this.initializeCoveo();

package/src/modules/dx/sidebar/sidebar.css

@@ -15,8 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    border-top: 1px solid var(--dx-g-gray-90);
-    padding-bottom: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-md);
 }
 
 .loading-skeleton {
@@ -54,6 +53,13 @@ dx-empty-state {
     --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
 
+.results-heading {
+    --dx-g-text-body-color: var(--sds-g-gray-14);
+
+    margin-bottom: var(--dx-g-spacing-sm);
+    font-weight: var(--dx-g-font-bold);
+}
+
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -62,8 +68,4 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
-
-    .sidebar-content-tree {
-        padding: 0 var(--dx-g-spacing-sm);
-    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -22,7 +22,10 @@
             </div>
         </div>
 
-        <div class="sidebar-header padding-horizontal">
+        <div
+            class="sidebar-header padding-horizontal"
+            show-shadow={showBoxShadow}
+        >
             <div class="header" if:false={mobile}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
@@ -42,7 +45,7 @@
                 ></dx-sidebar-search>
             </div>
             <h2
-                class="results-heading dx-text-display-8"
+                class="results-heading dx-text-body-3"
                 if:true={showResultsHeading}
             >
                 Results
@@ -83,7 +86,7 @@
                 size="small"
             ></dx-empty-state>
         </div>
-        <div class="sidebar-content sidebar-content-tree">
+        <div class={sidebarContentClass} onscroll={handleScroll}>
             <dx-tree
                 for:each={trees}
                 for:item="tree"

package/src/modules/dx/sidebar/sidebar.ts

@@ -175,7 +175,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll() {
+    private onSidebarSearchContentScroll(scrollEvent) {
         if (this.isSearchLoading) {
             return;
         }
@@ -192,6 +192,7 @@ export default class Sidebar extends SidebarBase {
             this.requestedFetchMoreResults = true;
             search.fetchMoreResults();
         }
+        this.handleScroll(scrollEvent);
     }
 
     private initializeSearchScrollPosition() {

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -2,7 +2,7 @@
 
 .sidebar-content {
     overflow-y: auto;
-    border-top: 1px solid var(--dx-g-gray-90);
+    padding-top: var(--dx-g-spacing-sm);
 }
 
 dx-empty-state {