@salesforcedevs/dx-components 1.3.206-alpha.11 → 1.3.210-lang1-alpha

package/package.json

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

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

@@ -1193,7 +1193,7 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
     <path d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z"></path>
   </symbol>
   <symbol id="twitter" viewBox="0 0 1200 1227">
-    <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" fill="#fff"/>
+    <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/>
   </symbol>
   <symbol id="typo3" viewBox="0 0 448 512">
     <path d="M178.7 78.4c0-24.7 5.4-32.4 13.9-39.4-69.5 8.5-149.3 34-176.3 66.4-5.4 7.7-9.3 20.8-9.3 37.1C7 246 113.8 480 191.1 480c36.3 0 97.3-59.5 146.7-139-7 2.3-11.6 2.3-18.5 2.3-57.2 0-140.6-198.5-140.6-264.9zM301.5 32c-30.1 0-41.7 5.4-41.7 36.3 0 66.4 53.8 198.5 101.7 198.5 26.3 0 78.8-99.7 78.8-182.3 0-40.9-67-52.5-138.8-52.5z"></path>

package/src/modules/dx/dropdown/dropdown.html

@@ -11,6 +11,7 @@
         placement={placement}
         small={small}
         width={width}
+        lang-picker={langPicker}
     >
         <slot slot="control"></slot>
         <div

package/src/modules/dx/dropdown/dropdown.ts

@@ -37,6 +37,7 @@ export default class Dropdown extends LightningElement {
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
+    @api langPicker?: boolean;
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -38,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-blue-vibrant-95) !important;
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -46,7 +46,7 @@
 }
 
 .option-active {
-    background: var(--dx-g-blue-vibrant-95);
+    background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
 .option_details {
@@ -79,6 +79,22 @@
     -webkit-box-orient: vertical;
 }
 
+.option-docoption {
+    align-items: center;
+    flex-direction: row;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+}
+
+.option-docoption .option_label {
+    color: var(--dx-g-gray-10);
+    font-weight: normal !important;
+}
+
+.option-docoption.option-active .option_label {
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
+    font-weight: var(--dx-g-font-bold);
+}
+
 .option_label > *:last-child {
     margin-left: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,6 +1,11 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
+import {
+    IconSprite,
+    IconSymbol,
+    IconBadgeShape,
+    IconSize
+} from "typings/custom";
 import { toDxColor } from "dxUtils/css";
 
 const validShapes = ["square", "circle"];
@@ -11,7 +16,7 @@ export default class IconBadge extends LightningElement {
     @api color?: string | null = null;
     @api backgroundColor?: string;
     @api backgroundSize?: string;
-    @api iconSize?: string = "override";
+    @api iconSize?: IconSize = "override";
     @api alt: string = "";
 
     _shape: IconBadgeShape = "circle";

package/src/modules/dx/podcastHost/podcastHost.css

@@ -6,6 +6,12 @@
     --dx-c-host-img-margin-right: 16px;
 }
 
+dx-icon {
+    display: inline-block;
+    position: relative;
+    top: -1px;
+}
+
 .container {
     background: white;
     box-shadow: var(--dx-g-box-shadow-sm);

package/src/modules/dx/podcastHost/podcastHost.html

@@ -14,14 +14,13 @@
             <div class="host-bio">
                 <p>{bio}</p>
             </div>
-            <dx-button
-                href={twitterHref}
-                target="_blank"
-                variant="inline"
-                icon-symbol="twitter"
-                icon-sprite="brand"
-            >
-                Follow {firstName} on Twitter
+            <dx-button href={twitterHref} target="_blank" variant="inline">
+                Follow {firstName} on&nbsp;
+                <dx-icon
+                    size="xsmall"
+                    sprite="brand"
+                    symbol="twitter"
+                ></dx-icon>
             </dx-button>
         </div>
     </div>

package/src/modules/dx/popover/popover.css

@@ -44,6 +44,12 @@
     transform: translateY(0);
 }
 
+.popover-leftalign {
+    opacity: 1;
+    transform: translateX(-16px) translateY(-8px);
+    transition: none;
+}
+
 .popover-overridewidth {
     max-width: unset;
 }

package/src/modules/dx/popover/popover.ts

@@ -39,6 +39,7 @@ export default class Popover extends LightningElement {
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
     @api showArrow?: boolean | null;
+    @api langPicker?: boolean;
 
     @api
     get open() {
@@ -151,7 +152,11 @@ export default class Popover extends LightningElement {
     }
 
     private get containerClassName() {
-        return cx("popover-container", this.open && "popover-container_open");
+        return cx(
+            "popover-container",
+            this.open && "popover-container_open",
+            this.langPicker && "popover-leftalign"
+        );
     }
 
     private get style() {

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

@@ -386,13 +386,7 @@ a.CoveoResultLink,
     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);
-}

package/src/modules/dx/searchResults/searchResults.html

@@ -84,6 +84,7 @@
                     class="CoveoResultList"
                     data-layout="list"
                     data-wait-animation="fade"
+                    data-auto-select-fields-to-include="true"
                     lwc:dom="manual"
                 ></div>
                 <div class="coveo-results-footer" aria-hidden="true">

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

@@ -1,6 +1,5 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
-import debounce from "debounce";
 import { track as trackGTM } from "dxUtils/analytics";
 import {
     CONTENT_TYPE_LABELS,
@@ -45,11 +44,7 @@ const resultsTemplatesInnerHtml = `
         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>
-                <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
-                <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
-            </div>
+            <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
             <p class="dx-result-title">
                 <a
                     class="CoveoResultLink"
@@ -65,11 +60,7 @@ const resultsTemplatesInnerHtml = `
         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>
-                    <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
-                    <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
-                </div>
+                <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>
@@ -97,83 +88,6 @@ const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
         `;
 };
 
-const processParts = (parts: string[]) => {
-    return parts.map((part) => {
-        // Remove special characters & .htm/.xml extension
-        part = part
-            .replace(/_/g, " ")
-            .replace(/-/g, " ")
-            .replace(/.htm/g, " ")
-            .replace(/.xml/g, " ");
-
-        // 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);
-
-    // Only generate breadcrumbs for external links using the URL
-    const hostnamePattern =
-        /^((www\.)?developer\.salesforce\.com|(www\.)?developer-website-s\.herokuapp\.com|(www\.)?youtube\.com)$/;
-    if (hostnamePattern.test(url.hostname)) {
-        return "";
-    }
-
-    let parts = url.pathname.split("/").filter((part) => part !== "");
-
-    // Remove language prefix from trailhead URLs
-    if (
-        url.hostname === "trailhead.salesforce.com" ||
-        url.hostname === "dev.trailhead.salesforce.com"
-    ) {
-        parts = parts
-            .slice(1)
-            .filter((part) => part !== "content" && part !== "learn");
-    }
-
-    const breadcrumbs = processParts(parts);
-
-    breadcrumbs.unshift(`<span class="breadcrumb-item">${url.hostname}</span>`);
-
-    return `
-            <span class="breadcrumb">
-                ${breadcrumbs.join(" / ")}
-            </span>
-        `;
-};
-
-const buildTemplateHelperBreadcrumbs = (value: string) => {
-    let parts: string[] = [];
-
-    if (value.includes("developer.salesforce.com")) {
-        const url = new URL(value);
-        parts = url.pathname.split("/").filter((part) => part !== "");
-    } else {
-        parts = value.split("/").filter((part) => part !== "");
-    }
-
-    // Don't show breadcrumbs if there's only one part or two (two because we remove the last item in the next step)
-    if (parts.length === 1 || parts.length === 2) {
-        return "";
-    }
-
-    const breadcrumbs = processParts(parts);
-
-    // Remove the last breadcrumb item
-    breadcrumbs.pop();
-    console.log(breadcrumbs);
-
-    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;
@@ -220,12 +134,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 windowWidth = window.innerWidth;
-
     private goToPage(e: CustomEvent) {
         const page = e.detail;
         const Pager = Coveo.get(
@@ -263,7 +174,6 @@ export default class SearchResults extends LightningElement {
                 if (Coveo.state(this.root!, "q") === "") {
                     Coveo.state(this.root!, "sort", "date descending");
                 }
-
                 this.isInitialized = true;
             }
         );
@@ -283,98 +193,6 @@ export default class SearchResults extends LightningElement {
             });
             this.trackSearchResults(event, this.query, this.totalResults);
         });
-
-        Coveo.$$(root).on(Coveo.QueryEvents.deferredQuerySuccess, () => {
-            this.processBreadcrumbs(root);
-
-            window.onresize = debounce(() => {
-                this.processBreadcrumbs(root);
-            }, 10);
-        });
-    }
-
-    // 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.windowWidth;
-
-    private processBreadcrumbs(root: HTMLElement) {
-        // Get all breadcrumbs from search results
-        const breadcrumbs = root.querySelectorAll(
-            ".breadcrumb"
-            // eslint-disable-next-line no-undef
-        ) as NodeListOf<HTMLElement>;
-
-        if (this.originalBreadcrumbs.length === 0) {
-            this.originalBreadcrumbs = Array.from(breadcrumbs).map(
-                // eslint-disable-next-line @lwc/lwc/no-inner-html
-                (breadcrumb) => breadcrumb.innerHTML
-            );
-        }
-
-        if (this.windowSizeIncreased()) {
-            // reset the breadcrumbs to their original state
-            this.restoreBreadcrumbs(Array.from(breadcrumbs));
-        }
-
-        this.formatBreadcrumbs(Array.from(breadcrumbs));
     }
 
     private initializeCoveo() {
@@ -382,7 +200,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;
         }
 
@@ -398,16 +215,6 @@ export default class SearchResults extends LightningElement {
             buildTemplateHelperBadge
         );
 
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "uriBreadcrumbs",
-            buildTemplateHelperUriBreadcrumbs
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "breadcrumbs",
-            buildTemplateHelperBreadcrumbs
-        );
-
         Coveo.init(this.root);
     }
 
@@ -416,7 +223,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/sidebar/sidebar.html

@@ -92,5 +92,27 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
+
+        <template if:false={mobile}>
+            <div if:true={hasSidebarFooter} class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></doc-sidebar-footer-nav>
+            </div>
+        </template>
+
+        <template if:true={mobile}>
+            <div if:true={hasMobileSidebarFooter} class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></doc-sidebar-footer-nav>
+            </div>
+        </template>
     </div>
 </template>

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

@@ -5,6 +5,7 @@ import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
+import type { OptionWithLink } from "typings/custom";
 
 const MOBILE_SIZE_MATCH = "768px";
 
@@ -14,6 +15,11 @@ export default class Sidebar extends SidebarBase {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
+    @api langValuePath: string = "id";
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get value() {
@@ -256,4 +262,20 @@ export default class Sidebar extends SidebarBase {
             this.template.querySelector("dx-sidebar-search") as any
         )?.requestOpenDropdown(false);
     }
+
+    private get hasMobileSidebarFooter(): boolean {
+        return !!(
+            this.mobile &&
+            this.languages &&
+            toJson(this.languages).length > 1 &&
+            this.expanded
+        );
+    }
+
+    private get hasSidebarFooter(): boolean {
+        return !!(
+            (this.languages && toJson(this.languages).length > 1) ||
+            Boolean(this.bailHref)
+        );
+    }
 }

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -67,6 +67,25 @@
                 title="No Results"
                 if:false={anyResultMatch}
             ></dx-empty-state>
+            <div if:true={hasMobileSidebarFooter} class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></doc-sidebar-footer-nav>
+            </div>
+        </template>
+
+        <template if:false={mobile}>
+            <div if:true={hasSidebarFooter} class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></doc-sidebar-footer-nav>
+            </div>
         </template>
     </div>
 </template>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -4,12 +4,18 @@ import { api } from "lwc";
 import { TreeNode } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
+import type { OptionWithLink } from "typings/custom";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
+    @api langValuePath: string = "id";
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get value() {
@@ -190,4 +196,20 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private get hasMobileSidebarFooter(): boolean {
+        return !!(
+            this.mobile &&
+            this.languages &&
+            toJson(this.languages).length > 1 &&
+            this.expanded
+        );
+    }
+
+    private get hasSidebarFooter(): boolean {
+        return !!(
+            (this.languages && toJson(this.languages).length > 1) ||
+            Boolean(this.bailHref)
+        );
+    }
 }

package/src/modules/dx/tab/tab.css

@@ -11,22 +11,13 @@ a {
     );
 
     position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    font-family: var(--dx-g-font-display);
-    white-space: nowrap;
-    color: var(--dx-g-blue-vibrant-20);
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
+    height: calc(var(--dx-g-spacing-3xl) - 4px);
 }
 
 .nav-list-item_default {
-    border: 0;
-    border-radius: var(--dx-g-spacing-md);
-    font-size: var(--dx-g-text-sm);
-    padding: 0 var(--horizontal-spacing);
+    padding: calc(var(--dx-g-spacing-sm) + 2px) var(--dx-g-spacing-md);
+    justify-content: center;
+    display: flex;
 }
 
 .nav-list-item_small {
@@ -46,8 +37,6 @@ button.nav-list-item_small > dx-icon {
     margin-left: var(--dx-g-spacing-xs);
 }
 
-.nav-list-item_default:hover,
-.nav-list-item_default:active,
 :host([aria-expanded="true"]) button.nav-list-item_default {
     background: var(
         --dx-g-brand-current-button-color-background-inactive,
@@ -76,11 +65,10 @@ button.nav-list-item:active > dx-icon,
 }
 
 .nav-list-item_default.state-active {
-    background: var(
-        --dx-g-brand-current-button-color-background-active,
-        var(--dx-g-brand-default-button-color-background-active)
-    );
-    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
+    color: var(--dx-g-blue-vibrant-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
 }
 
 @media (max-width: 1160px) {
@@ -100,3 +88,10 @@ button.nav-list-item:active > dx-icon,
         );
     }
 }
+
+@media (max-width: 768px) {
+    .nav-list-item {
+        height: var(--dx-g-spacing-3xl);
+        display: flex;
+    }
+}

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -58,7 +58,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 /* Second row */
 
 .header_l2 {
-    background: var(--dx-g-brand-current-color-background);
+    background: white;
     padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
 }
 
@@ -70,6 +70,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .header_l2_group-title {
     flex-shrink: 0;
+    padding-right: var(--dx-g-spacing-xl);
 }
 
 .header_l2_group-title

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -13,7 +13,12 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
-dx-tree:not(:last-child) {
+dx-tree {
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
+dx-tree:last-child {
+    border-bottom: 1px solid var(--dx-g-gray-90);
     margin-bottom: var(--dx-g-spacing-sm);
 }
 
@@ -53,7 +58,7 @@ dx-tree:not(:last-child) {
 }
 
 .container {
-    background-color: var(--dx-g-gray-95);
+    background-color: white;
     display: flex;
     flex-direction: column;
     height: var(--dx-c-sidebar-height);
@@ -66,10 +71,10 @@ dx-tree:not(:last-child) {
         var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
     );
 
+    border-right: 1px solid var(--dx-g-gray-90);
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
+    padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
     position: relative;
 }
 
@@ -127,6 +132,20 @@ dx-tree:not(:last-child) {
     white-space: nowrap;
 }
 
+.footer-nav {
+    display: flex;
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-xs) var(--dx-g-spacing-2xl);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: inherit;
+    background: white;
+    border-top: 1px solid var(--dx-g-gray-90);
+    border-right: 1px solid var(--dx-g-gray-90);
+    height: var(--dx-g-spacing-xl);
+}
+
 @media screen and (max-width: 768px) {
     .padding-horizontal {
         padding-left: var(--dx-g-spacing-lg);

package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css

@@ -8,14 +8,14 @@
 
 .sidebar-item-selected {
     background: var(--dx-g-cloud-blue-vibrant-95);
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
     border-radius: 0;
 }
 
 .sidebar-item {
-    padding: 6px var(--dx-g-spacing-md);
+    padding: 6px var(--dx-g-spacing-xl);
 }
 
 .sidebar-item:not(.sidebar-item-selected):hover {
-    background-color: var(--dx-g-gray-90);
+    color: var(--dx-g-blue-vibrant-50);
 }