@syncfusion/ej2-navigations 20.4.52 → 21.1.35

package/src/treeview/treeview.d.ts

@@ -414,11 +414,39 @@ export declare class FieldsSettings extends ChildProperty<FieldsSettings> {
 /**
  * Defines the expand type of the TreeView node.
  */
-export declare type ExpandOnSettings = 'Auto' | 'Click' | 'DblClick' | 'None';
+export declare type ExpandOnSettings = 
+/**
+* The expand/collapse operation happens when you double-click on the node in desktop.
+*/
+'Auto' | 
+/**
+* The expand/collapse operation happens when you single-click on the node in desktop.
+*/
+'Click' | 
+/**
+* The expand/collapse operation happens when you double-click on the node in desktop.
+*/
+'DblClick' | 
+/**
+* The expand/collapse operation will not happen.
+*/
+'None';
 /**
  * Defines the sorting order type for TreeView.
  */
-export declare type SortOrder = 'None' | 'Ascending' | 'Descending';
+export declare type SortOrder = 
+/**
+* Indicates that the nodes are sorted in the ascending order.
+*/
+'Ascending' | 
+/**
+*  Indicates that the nodes are sorted in the descending order
+*/
+'Descending' | 
+/**
+* Indicates that the nodes are not sorted.
+*/
+'None';
 /**
  * Configures animation settings for the TreeView component.
  */
@@ -558,8 +586,8 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     allowEditing: boolean;
     /**
      * Enables or disables multi-selection of nodes. To select multiple nodes:
-     * * Select the nodes by holding down the CTRL key while clicking on the nodes.
-     * * Select consecutive nodes by clicking the first node to select and hold down the **SHIFT** key
+     * * Select the nodes by holding down the **Ctrl** key while clicking on the nodes.
+     * * Select consecutive nodes by clicking the first node to select and hold down the **Shift** key
      * and click the last node to select.
      *
      * For more information on multi-selection, refer to

package/src/treeview/treeview.js

@@ -2007,6 +2007,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.isLoaded) {
             eventArgs.nodeData = this.getNodeData(li);
             this.trigger('nodeSelected', eventArgs);
+            this.isRightClick = false;
         }
         this.isRightClick = false;
     };
@@ -2644,7 +2645,7 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.focusIn = function () {
         if (!this.mouseDownStatus) {
             var focusedElement = this.getFocusedNode();
-            focusedElement.setAttribute("tanindex", "0");
+            focusedElement.setAttribute("tabindex", "0");
             addClass([focusedElement], [HOVER, FOCUS]);
             EventHandler.add(focusedElement, 'blur', this.focusOut, this);
         }
@@ -2859,7 +2860,7 @@ var TreeView = /** @class */ (function (_super) {
             this.renderReactTemplates();
         }
         else {
-            txtEle.innerText = newText;
+            this.enableHtmlSanitizer ? txtEle.innerText = newText : txtEle.innerHTML = newText;
         }
         if (isInput) {
             removeClass([liEle], EDITING);
@@ -3058,7 +3059,7 @@ var TreeView = /** @class */ (function (_super) {
         });
         this.dropObj = new Droppable(this.element, {
             out: function (e) {
-                if (!isNOU(e) && !e.target.classList.contains(SIBLING)) {
+                if (!isNOU(e) && !e.target.classList.contains(SIBLING) && (_this.dropObj.dragData.default && _this.dropObj.dragData.default.helper.classList.contains(ROOT))) {
                     document.body.style.cursor = 'not-allowed';
                 }
             },
@@ -3757,15 +3758,29 @@ var TreeView = /** @class */ (function (_super) {
                 }
             }
             if (!refNode && ((this.sortOrder === 'Ascending') || (this.sortOrder === 'Descending'))) {
-                var cNodes = dropUl.childNodes;
-                for (var i = 0; i < li.length; i++) {
-                    for (var j = 0; j < cNodes.length; j++) {
-                        var returnValue = (this.sortOrder === 'Ascending') ? cNodes[j].textContent.toUpperCase() > li[i].innerText.toUpperCase() : cNodes[j].textContent.toUpperCase() < li[i].innerText.toUpperCase();
-                        if (returnValue) {
-                            dropUl.insertBefore(li[i], cNodes[j]);
-                            break;
+                if (dropUl.childNodes.length === 0) {
+                    for (var i = 0; i < li.length; i++) {
+                        dropUl.insertBefore(li[i], refNode);
+                    }
+                    if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNOU(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
+                        this.preventExpand = false;
+                        var dropIcon = select('div.' + ICON, dropLi);
+                        if (dropIcon && dropIcon.classList.contains(EXPANDABLE)) {
+                            this.expandAction(dropLi, dropIcon, null);
+                        }
+                    }
+                }
+                else {
+                    var cNodes = dropUl.childNodes;
+                    for (var i = 0; i < li.length; i++) {
+                        for (var j = 0; j < cNodes.length; j++) {
+                            var returnValue = (this.sortOrder === 'Ascending') ? cNodes[j].textContent.toUpperCase() > li[i].innerText.toUpperCase() : cNodes[j].textContent.toUpperCase() < li[i].innerText.toUpperCase();
+                            if (returnValue) {
+                                dropUl.insertBefore(li[i], cNodes[j]);
+                                break;
+                            }
+                            dropUl.insertBefore(li[i], cNodes[cNodes.length]);
                         }
-                        dropUl.insertBefore(li[i], cNodes[cNodes.length]);
                     }
                 }
             }

package/styles/accordion/_bootstrap-dark-definition.scss

@@ -32,7 +32,6 @@ $acrdn-item-nested-panel-item-select-margin: 2px !default;
 $acrdn-item-overflow: hidden !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: underline !default;
 $acrdn-item-hdr-border-radius: 4px !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: none !default;
 $acrdn-item-arrow-icon-font-size: 12px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_bootstrap-definition.scss

@@ -41,7 +41,6 @@ $acrdn-item-nested-panel-item-select-margin: 2px !default;
 $acrdn-item-overflow: hidden !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: underline !default;
 $acrdn-item-hdr-border-radius: 4px !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: none !default;
 $acrdn-item-arrow-icon-font-size: 12px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_bootstrap4-definition.scss

@@ -36,7 +36,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: hidden !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: underline !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 14px !default;
 

package/styles/accordion/_bootstrap5-definition.scss

@@ -11,13 +11,13 @@ $acrdn-header-font-weight: $font-weight-normal !default;
 $acrdn-header-font-size: $text-sm !default;
 $acrdn-nest-header-font-size: $text-sm !default;
 $acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
-$acrdn-nest-header-content-font-weight: normal !default;
+$acrdn-nest-header-content-font-weight: $font-weight-normal !default;
 $acrdn-content-font-size: $text-sm !default;
 $acrdn-header-font-bgr-size: $text-base !default;
 $acrdn-content-font-bgr-size: $text-base !default;
-$acrdn-bgr-arrow-icon-font-size: 22px;
-$acrdn-bgr-item-header-content-font-size: 16px !default;
-$acrdn-icon-font-size: 18px !default;
+$acrdn-bgr-arrow-icon-font-size: $text-xl;
+$acrdn-bgr-item-header-content-font-size: $text-base !default;
+$acrdn-icon-font-size: $text-lg !default;
 $acrdn-selected-header-font-color: $primary !default;
 
 // Header, Nested header and RTL mode Padding
@@ -74,9 +74,8 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: visible !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 4px !default;
 $acrdn-item-tgl-icon-display: table !default;
-$acrdn-item-arrow-icon-font-size: 18px !default;
+$acrdn-item-arrow-icon-font-size: $text-lg !default;
 $acrdn-opacity: .5 !default;
 
 // color definitions
@@ -178,4 +177,4 @@ $acrdn-item-nes-selected-exp-hover-hdr-icons-font: $primary !default;
 $acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
-$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;

package/styles/accordion/_fabric-dark-definition.scss

@@ -38,7 +38,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: hidden !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 14px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_fabric-definition.scss

@@ -36,7 +36,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: hidden !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 14px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_fluent-definition.scss

@@ -23,9 +23,8 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: hidden !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
-$acrdn-item-arrow-icon-font-size: 12px !default;
+$acrdn-item-arrow-icon-font-size: $text-xs !default;
 $acrdn-opacity: .5 !default;
 
 // Header, Nested header and RTL mode Padding
@@ -73,7 +72,7 @@ $acrdn-header-font-weight: $font-weight-normal !default;
 $acrdn-header-font-size: $text-sm !default;
 $acrdn-nest-header-font-size: $text-sm !default;
 $acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
-$acrdn-nest-header-content-font-weight: normal !default;
+$acrdn-nest-header-content-font-weight: $font-weight-normal !default;
 $acrdn-content-font-size: $text-sm !default;
 $acrdn-header-font-bgr-size: $text-base !default;
 $acrdn-content-font-bgr-size: $text-base !default;
@@ -89,9 +88,9 @@ $acrdn-item-header-focus-border-color: $primary !default;
 
 $acrdn-border-type: solid !default;
 $acrdn-border-size: 1px !default;
-$acrdn-bgr-arrow-icon-font-size: 22px;
-$acrdn-bgr-item-header-content-font-size: 16px !default;
-$acrdn-icon-font-size: 18px !default;
+$acrdn-bgr-arrow-icon-font-size: $text-xl;
+$acrdn-bgr-item-header-content-font-size: $text-base !default;
+$acrdn-icon-font-size: $text-lg !default;
 $acrdn-item-icon-disable-color: $icon-color-disabled;
 $acrdn-text-disable-color: $content-text-color-disabled;
 

package/styles/accordion/_fusionnew-definition.scss

@@ -74,7 +74,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: visible !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 4px !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 18px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_highcontrast-definition.scss

@@ -35,7 +35,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: visible !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 12px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_highcontrast-light-definition.scss

@@ -63,7 +63,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: visible !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 12px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_layout.scss

@@ -201,7 +201,6 @@
         text-decoration: none;
         text-overflow: ellipsis;
         white-space: nowrap;
-        margin-bottom: $acrdn-item-hdr-margin-bottom;
 
         > * {
           display: inline-block;

package/styles/accordion/_material-dark-definition.scss

@@ -29,7 +29,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: visible !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 12px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_material-definition.scss

@@ -24,7 +24,6 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: visible !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: 12px !default;
 $acrdn-opacity: .5 !default;

package/styles/accordion/_tailwind-definition.scss

@@ -22,9 +22,8 @@ $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: hidden !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
 $acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 0 !default;
 $acrdn-item-tgl-icon-display: table !default;
-$acrdn-item-arrow-icon-font-size: 18px !default;
+$acrdn-item-arrow-icon-font-size: $text-lg !default;
 $acrdn-opacity: .5 !default;
 
 // Header, Nested header and RTL mode Padding
@@ -72,7 +71,7 @@ $acrdn-header-font-weight: $font-weight-medium !default;
 $acrdn-header-font-size: $text-sm !default;
 $acrdn-nest-header-font-size: $text-sm !default;
 $acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
-$acrdn-nest-header-content-font-weight: normal !default;
+$acrdn-nest-header-content-font-weight: $font-weight-normal !default;
 $acrdn-content-font-size: $text-sm !default;
 $acrdn-header-font-bgr-size: $text-base !default;
 $acrdn-content-font-bgr-size: $text-base !default;
@@ -88,9 +87,9 @@ $acrdn-header-active-bg: $content-bg-color-pressed !default;
 $acrdn-border-type: solid !default;
 $acrdn-border-size: 1px !default;
 $acrdn-border-radius: 0 !default;
-$acrdn-bgr-arrow-icon-font-size: 22px;
-$acrdn-bgr-item-header-content-font-size: 16px !default;
-$acrdn-icon-font-size: 18px !default;
+$acrdn-bgr-arrow-icon-font-size: $text-xl;
+$acrdn-bgr-item-header-content-font-size: $text-base !default;
+$acrdn-icon-font-size: $text-lg !default;
 $acrdn-item-icon-disable-color: $icon-color-disabled;
 $acrdn-text-disable-color: $content-text-color-disabled;
 

package/styles/accordion/bootstrap-dark.css

@@ -161,7 +161,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/bootstrap.css

@@ -162,7 +162,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/bootstrap4.css

@@ -161,7 +161,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/bootstrap5-dark.css

@@ -58,7 +58,7 @@
   min-height: 48px;
   min-width: 24px;
   right: 16px;
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
@@ -67,7 +67,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
@@ -163,7 +163,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 4px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;
@@ -224,7 +223,7 @@
   padding: 20px 20px 20px 38px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;

package/styles/accordion/bootstrap5.css

@@ -58,7 +58,7 @@
   min-height: 48px;
   min-width: 24px;
   right: 16px;
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
@@ -67,7 +67,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
@@ -163,7 +163,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 4px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;
@@ -224,7 +223,7 @@
   padding: 20px 20px 20px 38px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;

package/styles/accordion/fabric-dark.css

@@ -161,7 +161,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/fabric.css

@@ -162,7 +162,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/fluent-dark.css

@@ -57,7 +57,7 @@
   min-height: 48px;
   min-width: 24px;
   right: 16px;
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
@@ -66,7 +66,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
@@ -162,7 +162,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;
@@ -223,7 +222,7 @@
   padding: 20px 20px 20px 38px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;

package/styles/accordion/fluent.css

@@ -57,7 +57,7 @@
   min-height: 48px;
   min-width: 24px;
   right: 16px;
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
@@ -66,7 +66,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
@@ -162,7 +162,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;
@@ -223,7 +222,7 @@
   padding: 20px 20px 20px 38px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;

package/styles/accordion/highcontrast-light.css

@@ -161,7 +161,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/highcontrast.css

@@ -162,7 +162,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/material-dark.css

@@ -162,7 +162,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/material.css

@@ -163,7 +163,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;

package/styles/accordion/tailwind-dark.css

@@ -58,7 +58,7 @@
   min-height: 48px;
   min-width: 24px;
   right: 16px;
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
@@ -67,7 +67,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
@@ -163,7 +163,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;
@@ -224,7 +223,7 @@
   padding: 20px 20px 20px 38px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;

package/styles/accordion/tailwind.css

@@ -58,7 +58,7 @@
   min-height: 48px;
   min-width: 24px;
   right: 16px;
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
@@ -67,7 +67,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
-  font-size: 22px;
+  font-size: 20px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
@@ -163,7 +163,6 @@
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;
@@ -224,7 +223,7 @@
   padding: 20px 20px 20px 38px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;

package/styles/appbar/_bootstrap5-definition.scss

@@ -3,6 +3,6 @@
 $appbar-bg-color-primary: $primary !default;
 $appbar-color-primary: $primary-text-color !default;
 $appbar-border-color-primary: $primary !default;
-$appbar-font-size: 14px !default;
-$appbar-bigger-font-size: 16px !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
 $appbar-border: none !default;

package/styles/appbar/_fluent-definition.scss

@@ -3,6 +3,6 @@
 $appbar-bg-color-primary: $primary !default;
 $appbar-color-primary: $primary-text-color !default;
 $appbar-border-color-primary: $primary !default;
-$appbar-font-size: 14px !default;
-$appbar-bigger-font-size: 16px !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
 $appbar-border: none !default;

package/styles/appbar/_layout.scss

@@ -62,6 +62,9 @@
       &.e-sticky {
         position: fixed;
         top: auto;
+        max-width: inherit;
+        left: auto;
+        right: auto;
       }
     }