@salesforcedevs/dx-components 1.3.241-dh1-alpha → 1.3.241-ux-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.241-dh1-alpha",
+    "version": "1.3.241-ux-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/button/button.html

@@ -7,7 +7,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading} part="content">
+        <span if:false={loading}>
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
@@ -29,7 +29,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading} part="content">
+        <span if:false={loading}>
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon

package/src/modules/dx/button/button.ts

@@ -80,6 +80,6 @@ export default class Button extends LightningElement {
 
     private onSlotChange(e: LightningSlotElement) {
         const slot = e.target;
-        this.isSlotEmpty = slot.assignedNodes().length === 0;
+        this.isSlotEmpty = slot.assignedElements().length !== 0;
     }
 }

package/src/modules/dx/headerNav/headerNav.css

@@ -10,26 +10,17 @@ nav {
 
 .nav-list {
     display: flex;
-    margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
 }
 
 .nav-list li {
     position: relative;
 }
 
-.nav-list li:not(:last-child) {
-    margin-right: var(--dx-g-spacing-md);
-}
-
 .nav-list-item-nav-menu {
     display: none;
 }
 
 @media (max-width: 768px) {
-    .nav-list {
-        margin-top: 0;
-    }
-
     .nav-list-item-nav-menu {
         display: flex;
     }

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

@@ -15,7 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-md);
+    padding-bottom: var(--dx-g-spacing-md);
 }
 
 .loading-skeleton {
@@ -53,14 +53,6 @@ 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);
-    padding-top: var(--dx-g-spacing-smd);
-    font-weight: var(--dx-g-font-bold);
-}
-
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -69,4 +61,8 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
+
+    .sidebar-content-tree {
+        padding: 0 var(--dx-g-spacing-sm);
+    }
 }

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

@@ -16,17 +16,22 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-50"
-                        size="medium"
+                        color="blue-vibrant-20"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
-        <div class="sidebar-header" show-shadow={showBoxShadow}>
-            <div class="header padding-horizontal" if:false={mobile}>
+
+        <div class="sidebar-header padding-horizontal">
+            <div class="header" if:false={mobile}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
+                <slot name="header"></slot>
+            </div>
+            <div class="mobile-header" if:true={mobile}>
+                <h2 class="dx-text-display-6">{header}</h2>
+                <slot name="header"></slot>
             </div>
-            <div class="search padding-horizontal">
+            <div class="search">
                 <dx-sidebar-search
                     onchange={onSearchChange}
                     onloading={onSearchLoading}
@@ -36,9 +41,8 @@
                     coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ></dx-sidebar-search>
             </div>
-            <slot name="version-picker"></slot>
             <h2
-                class="results-heading dx-text-body-3 padding-horizontal"
+                class="results-heading dx-text-display-8"
                 if:true={showResultsHeading}
             >
                 Results
@@ -79,7 +83,7 @@
                 size="small"
             ></dx-empty-state>
         </div>
-        <div class={sidebarContentClass} onscroll={handleScroll}>
+        <div class="sidebar-content sidebar-content-tree">
             <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(scrollEvent) {
+    private onSidebarSearchContentScroll() {
         if (this.isSearchLoading) {
             return;
         }
@@ -192,7 +192,6 @@ 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,6 @@
 
 .sidebar-content {
     overflow-y: auto;
-    padding-top: var(--dx-g-spacing-sm);
 }
 
 dx-empty-state {

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

@@ -16,19 +16,23 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-50"
-                        size="medium"
+                        color="blue-vibrant-20"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
 
         <template if:true={expanded}>
-            <div class="sidebar-header" show-shadow={showBoxShadow}>
-                <div class="header padding-horizontal" if:false={mobile}>
+            <div class="padding-horizontal">
+                <div class="header" if:false={mobile}>
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
+                    <slot name="header"></slot>
                 </div>
-                <div class="search padding-horizontal">
+                <div class="mobile-header" if:true={mobile}>
+                    <h2 class="dx-text-display-6">{header}</h2>
+                    <slot name="header"></slot>
+                </div>
+                <div class="search">
                     <dx-input
                         class="search-box"
                         type="search"
@@ -42,12 +46,10 @@
                         shortcut-key="j"
                     ></dx-input>
                 </div>
-                <slot name="version-picker"></slot>
             </div>
             <div
-                class={sidebarContentClass}
+                class="sidebar-content sidebar-content-tree"
                 if:true={anyResultMatch}
-                onscroll={handleScroll}
             >
                 <dx-tree
                     for:each={filteredTrees}

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -8,60 +8,29 @@ a {
 }
 
 .sidebar-item {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
-}
-
-.sidebar-item:not(.sidebar-item-selected):focus-visible {
-    padding: var(--dx-g-spacing-smd) 0;
-    margin: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-    border-radius: var(--dx-g-spacing-2xs);
-}
-
-.sidebar-item-selected:focus-visible {
-    padding: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    outline: none;
-
-    .search-result {
-        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-        border-radius: var(--dx-g-spacing-2xs);
-        padding: var(--dx-g-spacing-smd) 0;
-    }
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
 }
 
 .search-text {
-    font-size: var(--dx-g-text-sm);
+    font-size: var(--dx-g-text-xs);
     font-family: var(--dx-g-font-sans);
-    line-height: var(--dx-g-text-lg);
-    font-weight: var(--dx-g-font-bold);
+    line-height: 18px;
     overflow-wrap: break-word;
 }
 
 .description {
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
-
-    --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
-
-    font-weight: var(--dx-g-font-normal);
-    display: block;
 }
 
 .title {
     color: var(--dx-g-text-heading-color);
 }
 
-.title:hover {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
 .bold {
     font-weight: 700;
 }
 
 a > *:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-xs);
+    margin-bottom: 2px;
 }

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -1,20 +1,14 @@
 <template>
     <a class={className} href={href} onclick={onClick}>
-        <div class="search-result">
-            <span class="title search-text">
-                <template for:each={titleChunks} for:item="chunk">
-                    <span class={chunk.class} key={chunk.id}>
-                        {chunk.value}
-                    </span>
-                </template>
-            </span>
-            <span class="description dx-text-body-3 sidebar-item-truncate-text">
-                <template for:each={descriptionChunks} for:item="chunk">
-                    <span class={chunk.class} key={chunk.id}>
-                        {chunk.value}
-                    </span>
-                </template>
-            </span>
-        </div>
+        <span class="title search-text">
+            <template for:each={titleChunks} for:item="chunk">
+                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
+            </template>
+        </span>
+        <span class="description dx-text-body-3 sidebar-item-truncate-text">
+            <template for:each={descriptionChunks} for:item="chunk">
+                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
+            </template>
+        </span>
     </a>
 </template>

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

@@ -11,31 +11,13 @@ a {
     );
 
     position: relative;
-    height: var(--dx-g-spacing-3xl);
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
+    height: calc(var(--dx-g-spacing-3xl) - 4px);
 }
 
 .nav-list-item_default {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    padding: calc(var(--dx-g-spacing-sm) + 2px) var(--dx-g-spacing-md);
     justify-content: center;
     display: flex;
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-base);
-    line-height: var(--dx-g-spacing-lg);
-    font-weight: var(--dx-g-font-normal);
-}
-
-.nav-list-item_default:hover {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.nav-list-item_default:focus-visible {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    color: var(--dx-g-blue-vibrant-20);
-    outline: 2px solid var(--dx-g-blue-vibrant-60);
 }
 
 .nav-list-item_small {
@@ -84,27 +66,11 @@ button.nav-list-item:active > dx-icon,
 
 .nav-list-item_default.state-active {
     color: var(--dx-g-blue-vibrant-50);
-    font-weight: var(--dx-g-font-bold);
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
+    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);
 }
 
-.nav-list-item_default.state-active:hover {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.nav-list-item_default.state-active:focus-visible {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
-    outline: 2px solid var(--dx-g-blue-vibrant-60);
-    color: var(--dx-g-blue-vibrant-20);
-}
-
 @media (max-width: 1160px) {
     .nav-list-item_small {
         --horizontal-spacing: var(

package/src/modules/dx/treeItem/treeItem.css

@@ -14,8 +14,8 @@ button:focus {
 }
 
 .tree-children-loading {
-    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xl);
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-md);
 }
 
 @media (max-width: 768px) {

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

@@ -23,23 +23,21 @@
     --tile-height: 20px;
 
     font-family: var(--dx-g-font-sans);
-    font-size: 14px;
+    font-size: 13px;
     line-height: var(--tile-height);
-    font-weight: var(--dx-g-font-normal);
 }
 
 .tile-root {
-    font-family: var(--dx-g-font-sans);
+    font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
-    font-weight: var(--dx-g-font-bold);
-    color: var(--dx-g-blue-vibrant-20);
+    font-weight: var(--dx-g-font-demi);
+    color: var(--dx-g-blue-vibrant-30);
     display: block;
 }
 
 .tile-icon {
     align-items: center;
     height: var(--tile-height);
-    padding: 0 calc(var(--dx-g-spacing-xs) + 2px) 0 var(--dx-g-spacing-sm);
 }
 
 .tile-label {
@@ -56,102 +54,95 @@
 
 .tile-with-children .tile-expand-icon {
     order: 1;
+    padding-right: var(--dx-g-spacing-xs);
 }
 
 .indentation {
-    padding-left: calc(var(--indentation) + var(--dx-g-spacing-2xs));
+    padding-left: var(--indentation);
 }
 
 .tile-with-children .indentation {
     padding-left: calc(var(--indentation) - var(--base-indentation));
 }
 
-.tile-root-with-child .indentation {
-    padding-left: 0;
-}
-
-[aria-level="2"] {
-    --indentation: var(--dx-g-spacing-md);
-}
-
 [aria-level="3"] {
-    --indentation: calc(2 * var(--base-indentation));
+    --indentation: var(--base-indentation);
 }
 
 [aria-level="4"] {
-    --indentation: calc(3 * var(--base-indentation));
+    --indentation: calc(2 * var(--base-indentation));
 }
 
 [aria-level="5"] {
-    --indentation: calc(4 * var(--base-indentation));
+    --indentation: calc(3 * var(--base-indentation));
 }
 
 [aria-level="6"] {
-    --indentation: calc(5 * var(--base-indentation));
+    --indentation: calc(4 * var(--base-indentation));
 }
 
 [aria-level="7"] {
-    --indentation: calc(6 * var(--base-indentation));
+    --indentation: calc(5 * var(--base-indentation));
 }
 
 [aria-level="8"] {
-    --indentation: calc(7 * var(--base-indentation));
+    --indentation: calc(6 * var(--base-indentation));
 }
 
 [aria-level="9"] {
-    --indentation: calc(8 * var(--base-indentation));
+    --indentation: calc(7 * var(--base-indentation));
 }
 
 [aria-level="10"] {
-    --indentation: calc(9 * var(--base-indentation));
+    --indentation: calc(8 * var(--base-indentation));
 }
 
 [aria-level="11"] {
-    --indentation: calc(10 * var(--base-indentation));
+    --indentation: calc(9 * var(--base-indentation));
 }
 
 [aria-level="12"] {
-    --indentation: calc(11 * var(--base-indentation));
+    --indentation: calc(10 * var(--base-indentation));
 }
 
 [aria-level="13"] {
-    --indentation: calc(12 * var(--base-indentation));
+    --indentation: calc(11 * var(--base-indentation));
 }
 
 [aria-level="14"] {
-    --indentation: calc(13 * var(--base-indentation));
+    --indentation: calc(12 * var(--base-indentation));
 }
 
 [aria-level="15"] {
-    --indentation: calc(14 * var(--base-indentation));
+    --indentation: calc(13 * var(--base-indentation));
 }
 
 [aria-level="16"] {
-    --indentation: calc(15 * var(--base-indentation));
+    --indentation: calc(14 * var(--base-indentation));
 }
 
 [aria-level="17"] {
-    --indentation: calc(16 * var(--base-indentation));
+    --indentation: calc(15 * var(--base-indentation));
 }
 
 [aria-level="18"] {
-    --indentation: calc(17 * var(--base-indentation));
+    --indentation: calc(16 * var(--base-indentation));
 }
 
 [aria-level="19"] {
-    --indentation: calc(18 * var(--base-indentation));
+    --indentation: calc(17 * var(--base-indentation));
 }
 
 [aria-level="20"] {
-    --indentation: calc(19 * var(--base-indentation));
+    --indentation: calc(18 * var(--base-indentation));
 }
 
 [aria-level="21"] {
-    --indentation: calc(20 * var(--base-indentation));
+    --indentation: calc(19 * var(--base-indentation));
 }
 
 [aria-level="22"] {
-    --indentation: calc(21 * var(--base-indentation));
+    --indentation: calc(20 * var(--base-indentation));
 }
 
 dx-metadata-badge {
@@ -190,10 +181,10 @@ a {
 
 a:link,
 a:visited {
-    color: var(--dx-g-blue-vibrant-20);
+    color: var(--dx-g-gray-10);
 }
 
 a:visited.tile-root,
 a:link.tile-root {
-    color: var(--dx-g-blue-vibrant-20);
+    color: var(--dx-g-blue-vibrant-30);
 }

package/src/modules/dx/treeTile/treeTile.html

@@ -1,6 +1,12 @@
 <template>
     <a href={href} class={tileClass} target={target}>
         <div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
+            <span
+                class="tile-label sidebar-item-truncate-text"
+                title={treeNode.label}
+            >
+                {treeNode.label}
+            </span>
             <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon
                     aria-expanded={isExpanded}
@@ -10,12 +16,6 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
-            <span
-                class="tile-label sidebar-item-truncate-text"
-                title={treeNode.label}
-            >
-                {treeNode.label}
-            </span>
             <dx-metadata-badge
                 if:true={showMethod}
                 class="flex tile-icon"

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

@@ -37,7 +37,7 @@ export default class TreeTile extends LightningElement {
     }
 
     private get iconSize() {
-        return "xsmall";
+        return this.isRoot ? "small" : "xsmall";
     }
 
     private get metadataBadgeColor(): string | undefined {
@@ -62,7 +62,6 @@ export default class TreeTile extends LightningElement {
         return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
-            "tile-root-with-child": this.isRoot && this.showArrow,
             "sidebar-item-selected": this.isSelected
         });
     }

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -14,8 +14,6 @@ export class SidebarBase extends LightningElement {
     mobile: boolean = true;
     expanded: boolean = true;
     _value?: string = undefined;
-    showBoxShadow: boolean = false;
-    private scrolling: boolean = false;
 
     @api langValuePath: string = "id";
     @api language!: string;
@@ -49,29 +47,6 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
-    /**
-     * This method is to handle the scroll event for LNB and show box shadow
-     * @param scrollEvent
-     */
-    handleScroll(scrollEvent: any) {
-        const lnb = scrollEvent.target;
-
-        if (!this.scrolling) {
-            this.scrolling = true;
-            // Set a timeout to handle scroll event after a delay
-            setTimeout(() => {
-                // Check if lnb is scrolled
-                if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
-                    this.showBoxShadow = true;
-                } else {
-                    this.showBoxShadow = false;
-                }
-                // Reset scrolling back to false after handling the scroll
-                this.scrolling = false;
-            }, 200);
-        }
-    }
-
     renderedCallback(): void {
         /**
          * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done
@@ -150,11 +125,4 @@ export class SidebarBase extends LightningElement {
     private get hasSidebarFooter(): boolean {
         return this.languages?.length > 1 || Boolean(this.bailHref);
     }
-
-    private get sidebarContentClass(): string {
-        const sidebarConterCss = "sidebar-content sidebar-content-tree";
-        return this.hasSidebarFooter || this.hasMobileSidebarFooter
-            ? sidebarConterCss + " sidebar-content-hasfooter"
-            : sidebarConterCss;
-    }
 }

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

@@ -3,8 +3,6 @@
 
 :host {
     z-index: var(--dx-g-z-index-500);
-
-    --dx-g-doc-header-main-nav-height: 51px;
 }
 
 .header_l2_group-nav_overflow {
@@ -61,8 +59,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .header_l2 {
     background: white;
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
+    padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
 }
 
 .header_l2_group {
@@ -73,7 +70,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .header_l2_group-title {
     flex-shrink: 0;
-    padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
+    padding-right: var(--dx-g-spacing-xl);
 }
 
 .header_l2_group-title

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

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-sidebar-width: 337px;
+    --dx-c-sidebar-width: 275px;
     --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-background: white;
     --dx-c-sidebar-button-border: white;
@@ -11,7 +11,15 @@
     --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-    --doc-version-picker-width: 296px;
+}
+
+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);
 }
 
 .header {
@@ -28,18 +36,12 @@
 }
 
 .padding-horizontal {
-    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-c-sidebar-left-padding);
-}
-
-.sidebar-header[show-shadow="true"] {
-    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
+    padding-left: var(--dx-g-spacing-md);
+    padding-right: var(--dx-g-spacing-md);
 }
 
 .header-title {
-    line-height: 28px;
-    letter-spacing: -0.08px;
-    font-size: var(--dx-g-text-lg);
-    font-weight: var(--dx-g-font-demi);
+    line-height: inherit;
 }
 
 .header-toggle-icon {
@@ -69,6 +71,7 @@
         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-g-spacing-2xs) 0;
@@ -104,7 +107,7 @@
 
 .container.container-mobile.collapsed {
     height: unset;
-    padding: 4px 0;
+    padding-bottom: 0;
 }
 
 .container.container-mobile.collapsed .header {
@@ -144,14 +147,9 @@
     align-items: center;
 }
 
-.sidebar-content-hasfooter {
-    margin-bottom: var(--dx-g-spacing-2xl);
-}
-
-@media screen and (max-width: 767px) {
-    :host {
-        --doc-version-picker-width: calc(
-            100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
-        );
+@media screen and (max-width: 768px) {
+    .padding-horizontal {
+        padding-left: var(--dx-g-spacing-lg);
+        padding-right: var(--dx-g-spacing-md);
     }
 }

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

@@ -10,33 +10,10 @@
     background: var(--dx-g-cloud-blue-vibrant-95);
     box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
     border-radius: 0;
-    color: var(--dx-g-blue-vibrant-40) !important;
 }
 
 .sidebar-item {
-    padding: 6px var(--dx-g-spacing-lg) 6px
-        var(--dx-g-global-header-padding-horizontal);
-}
-
-.sidebar-item:not(.sidebar-item-selected):focus-visible {
-    padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
-    margin: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-    border-radius: var(--dx-g-spacing-2xs);
-}
-
-.sidebar-item-selected:focus-visible {
-    padding-top: 0;
-    padding-bottom: 0;
-    outline: none;
-
-    .indentation {
-        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-        border-radius: var(--dx-g-spacing-2xs);
-        padding-top: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
-        padding-bottom: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
-    }
+    padding: 6px var(--dx-g-spacing-xl);
 }
 
 .sidebar-item:not(.sidebar-item-selected):hover {