@salesforcedevs/dx-components 1.3.210-lnb3-alpha → 1.3.210-lnb4-alpha

package/package.json

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

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

@@ -272,20 +272,6 @@
             </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">
@@ -927,31 +913,4 @@
         </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,9 +94,7 @@ export const generalLinksRaw: OptionWithRequiredNested[] = [
                 id: "Events and Calendar"
             },
             {
-                link: {
-                    href: "https://www.salesforce.com/partners/become-a-partner/"
-                },
+                link: { href: "https://go.appexchange.com/partnerprogram" },
                 label: "Partner Community",
                 id: "Partner Community"
             },

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

@@ -14,25 +14,19 @@ export default class MainContentHeader extends LightningElement {
     @api imgSrcMobile!: string;
     @api ctaTarget?: string | null = null;
     @api ctaTargetSecondary?: string | null = null;
-    @api backgroundGradientColor?: string;
-    @api backgroundGradientDark: boolean = false;
+    @api backgroundColor?: string;
+    @api backgroundColorDark: boolean = false;
     @api hasSwoop: boolean = false;
 
     private get style() {
         return cx(
-            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%);`
+            this.backgroundColor &&
+                `background-color: var(--dx-g-${this.backgroundColor});`
         );
     }
 
     private get textStyle() {
-        return cx(
-            "text-container",
-            this.backgroundGradientDark && "light-text"
-        );
+        return cx("text-container", this.backgroundColorDark && "light-text");
     }
 
     private onCtaClick(e: Event) {

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

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

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

@@ -274,15 +274,18 @@ 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;
@@ -419,17 +422,11 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     width: fit-content;
 }
 
-.dx-result-info {
-    display: flex;
-    gap: 12px;
+.dx-badge {
+    display: block;
     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,7 +6,6 @@ import {
     CONTENT_TYPE_ICONS
 } from "dxConstants/contentTypes";
 import { getContentTypeColorVariables } from "dxUtils/contentTypes";
-import { pollUntil } from "dxUtils/async";
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -41,78 +40,35 @@ const resultsTemplatesInnerHtml = `
     <script
         id="myDocumentResultTemplate"
         class="result-template"
-        type="text/underscore"
+        type="text/html"
         data-field-publicurl=""
     >
         <div class="dx-result">
-            <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>
+            <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>
             <p class="dx-result-excerpt CoveoExcerpt"></p>
         </div>
     </script>
     <script
         id="myDefaultResultTemplate"
         class="result-template"
-        type="text/underscore"
+        type="text/html"
     >
             <div class="dx-result">
-                <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>
+                <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>
                 <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];
@@ -132,107 +88,6 @@ 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;
@@ -284,12 +139,9 @@ export default class SearchResults extends LightningElement {
         BreadcrumbManager.clearBreadcrumbs();
     }
 
-    private currentPage: number = 25;
+    private currentPage: number = 1;
     private totalPages: number = 1;
 
-    private originalBreadcrumbs: string[] = [];
-    private initialWindowWidth = window.innerWidth;
-
     private goToPage(e: CustomEvent) {
         const page = e.detail;
         const Pager = Coveo.get(
@@ -327,7 +179,6 @@ export default class SearchResults extends LightningElement {
                 if (Coveo.state(this.root!, "q") === "") {
                     Coveo.state(this.root!, "sort", "date descending");
                 }
-
                 this.isInitialized = true;
             }
         );
@@ -353,110 +204,6 @@ 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(this.root!);
-
-            window.onresize = () => this.processBreadcrumbs(root);
-        });
-    }
-
-    // Checks if text is wrapping by comparing it with an element's text that doesn't wrap
-    private isTextWrapping = (
-        elementOne: HTMLElement,
-        elementTwo: HTMLElement
-    ) => elementOne.offsetHeight > elementTwo.offsetHeight;
-
-    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, breadcrumbItems[0])) {
-                breadcrumbItems[i].textContent = "...";
-            } else {
-                break; // Exit the loop if the breadcrumb is no longer overflowing
-            }
-        }
-    };
-
-    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, breadcrumbItems[0])) {
-                // 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, breadcrumbItems[0])) {
-                    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() {
@@ -465,7 +212,6 @@ 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;
         }
 
@@ -481,21 +227,6 @@ 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);
     }
 
@@ -504,7 +235,6 @@ 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/stepSequence/stepSequence.ts

@@ -9,7 +9,6 @@ import cx from "classnames";
 export default class StepSequence extends LightningElement {
     @api animateTransitions = false;
     @api communicateStepChanges = false;
-    @api containerScrollToId = "";
     @api forceInitiallyVisible = false;
     @api initialStepIndex: string | undefined;
     @api optimizePositionAfterAnimation = false;
@@ -40,9 +39,15 @@ export default class StepSequence extends LightningElement {
 
         if (this.useHistory) {
             this.defaultScrollRestorationValue = history.scrollRestoration;
-            history.scrollRestoration = "manual"; // Step component must override scroll behavior to work properly with history and maintain scrollTo behavior of component
+            history.scrollRestoration = "manual";
+            history.replaceState(
+                {
+                    ...window.history.state,
+                    currentStepIndex: this.currentStepIndex
+                },
+                ""
+            );
             window.addEventListener("popstate", this.handleHistoryPopstate);
-            window.addEventListener("hashchange", this.handleHashChange);
         }
 
         if (this.sessionStorageId) {
@@ -82,7 +87,6 @@ export default class StepSequence extends LightningElement {
 
     disconnectedCallback() {
         window.removeEventListener("popstate", this.handleHistoryPopstate);
-        window.removeEventListener("hashchange", this.handleHashChange);
         this.removeEventListener("transitionend", this.handleTransitionEnd);
         history.scrollRestoration = this.defaultScrollRestorationValue;
     }
@@ -162,17 +166,6 @@ export default class StepSequence extends LightningElement {
         }
 
         if (this.useHistory && updateHistory) {
-            if (typeof history.state?.currentStepIndex !== "number") {
-                // This is a "new" interaction with the step component, so we store the current
-                // component state in history so that going back from the next step works right
-                history.pushState(
-                    {
-                        currentStepIndex: this.currentStepIndex
-                    },
-                    "",
-                    this.containerScrollToId // update browser hash for correct "feel" to in-page navigation
-                );
-            }
             history.pushState(
                 {
                     currentStepIndex: nextStepIndex
@@ -254,34 +247,9 @@ export default class StepSequence extends LightningElement {
     }
 
     handleHistoryPopstate = ({ state }: PopStateEvent) => {
-        if (
-            typeof state?.currentStepIndex !== "number" ||
-            state.currentStepIndex === this.currentStepIndex
-        ) {
-            // This history item is not a step change, so bail early.
-            return;
-        }
-
-        this.remeasureSteps();
-        this.changeActiveStep(state.currentStepIndex, false);
-        this.scrollToStepTop();
-    };
-
-    handleHashChange = ({ newURL }: HashChangeEvent) => {
-        const newHash = new URL(newURL).hash;
-        const oldScrollValue = history.state?.scroll?.value;
-
-        if (typeof oldScrollValue === "number") {
-            window.scrollTo({
-                top: oldScrollValue
-            });
-        } else if (newHash) {
-            document.querySelector(newHash)?.scrollIntoView();
-        } else {
-            // No hash and no old scroll value means this was the initial history item
-            window.scrollTo({
-                top: 0
-            });
+        if (typeof state?.currentStepIndex === "number") {
+            this.remeasureSteps();
+            this.changeActiveStep(state.currentStepIndex, false);
         }
     };
 

package/src/modules/dx/treeTile/treeTile.css

@@ -65,6 +65,10 @@
     padding-left: calc(var(--indentation) - var(--base-indentation));
 }
 
+.tile-root-with-child .indentation {
+    padding-left: calc(var(--indentation) - var(--base-indentation));
+}
+
 [aria-level="2"] {
     --indentation: var(--base-indentation);
 }

package/src/modules/dx/treeTile/treeTile.ts

@@ -61,7 +61,8 @@ export default class TreeTile extends LightningElement {
     private get tileClass() {
         return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,
-            "tile-with-children": this.hasChildren,
+            "tile-with-children": !this.isRoot && this.hasChildren,
+            "tile-root-with-child": this.isRoot && this.showArrow,
             "sidebar-item-selected": this.isSelected
         });
     }