@syncfusion/ej2-navigations 24.2.4 → 25.1.35

package/src/toolbar/toolbar.js

@@ -1075,7 +1075,9 @@ var Toolbar = /** @class */ (function (_super) {
             popup.appendTo(ele);
             EventHandler.add(document, 'scroll', this.docEvent.bind(this));
             EventHandler.add(document, 'click ', this.docEvent.bind(this));
-            popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
+            if (this.overflowMode !== 'Extended') {
+                popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
+            }
             if (this.isVertical) {
                 popup.element.style.visibility = 'hidden';
             }
@@ -1090,7 +1092,7 @@ var Toolbar = /** @class */ (function (_super) {
             }
             this.popObj = popup;
         }
-        else {
+        else if (this.overflowMode !== 'Extended') {
             var popupEle = this.popObj.element;
             setStyle(popupEle, { maxHeight: '', display: 'block' });
             setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
@@ -1117,11 +1119,13 @@ var Toolbar = /** @class */ (function (_super) {
         var toolEle = this.popObj.element.parentElement;
         var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
         popupNav.setAttribute('aria-expanded', 'true');
-        setStyle(popObj.element, { height: 'auto', maxHeight: '' });
-        popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
         if (this.overflowMode === 'Extended') {
             popObj.element.style.minHeight = '';
         }
+        else {
+            setStyle(popObj.element, { height: 'auto', maxHeight: '' });
+            popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';
+        }
         var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;
         var popIcon = popupNav.firstElementChild;
         popupNav.classList.add(CLS_TBARNAVACT);
@@ -1138,9 +1142,11 @@ var Toolbar = /** @class */ (function (_super) {
                     break;
                 }
             }
-            setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });
+            if (this.overflowMode !== 'Extended') {
+                setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });
+            }
         }
-        else if (this.isVertical) {
+        else if (this.isVertical && this.overflowMode !== 'Extended') {
             var tbEleData = this.element.getBoundingClientRect();
             setStyle(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });
         }
@@ -2024,13 +2030,25 @@ var Toolbar = /** @class */ (function (_super) {
         this.activeEle.focus();
     };
     Toolbar.prototype.activeEleRemove = function (curEle) {
+        var previousEle = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
         if (!isNOU(this.activeEle)) {
             this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));
+            if (previousEle) {
+                previousEle.removeAttribute('tabindex');
+            }
+            previousEle = this.activeEle;
         }
         this.activeEle = curEle;
         if (this.getDataTabindex(this.activeEle) === '-1') {
             if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {
-                this.updateTabIndex('-1');
+                if (!isNOU(this.element.querySelector('.e-hor-nav')) && this.element.querySelector('.e-hor-nav').classList.contains('e-nav-active')) {
+                    this.updateTabIndex('0');
+                    this.getDataTabindex(previousEle) === '-1' ? previousEle.setAttribute('tabindex', '0') :
+                        previousEle.setAttribute('tabindex', this.getDataTabindex(previousEle));
+                }
+                else {
+                    this.updateTabIndex('-1');
+                }
                 curEle.removeAttribute('tabindex');
             }
             else {

package/src/treeview/treeview-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {ExpandOnSettings,SortOrder,FailureEventArgs,DataBoundEventArgs,DataSourceChangedEventArgs,DrawNodeEventArgs,NodeKeyPressEventArgs,NodeCheckEventArgs,NodeClickEventArgs,NodeExpandEventArgs,DragAndDropEventArgs,NodeEditEventArgs,NodeSelectEventArgs} from "./treeview";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -19,7 +19,6 @@ export interface FieldsSettingsModel {
      * @aspDatasourceNullIgnore
      * @isGenericType true
      */
-    /* eslint-disable */
     dataSource?: DataManager | { [key: string]: Object }[];
 
     /**
@@ -286,8 +285,8 @@ export interface TreeViewModel extends ComponentModel{
     dragArea?: HTMLElement | string;
 
     /**
-     * Specifies whether to allow rendering of untrusted HTML values in the TreeView component.
-     * While enable this property, it sanitize suspected untrusted strings and script, and update in the TreeView component.
+     * Specifies whether to display or remove the untrusted HTML values in the TreeView component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      * ```html
      * <div id="tree"></div>
      * ```
@@ -298,7 +297,7 @@ export interface TreeViewModel extends ComponentModel{
      * });
      * treeObj.appendTo('#tree');
      * ```
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 
@@ -470,7 +469,6 @@ export interface TreeViewModel extends ComponentModel{
      *
      * @event
      */
-    /* eslint-disable */
     created?: EmitType<Object>;
 
     /**
@@ -500,7 +498,6 @@ export interface TreeViewModel extends ComponentModel{
      *
      * @event
      */
-    /* eslint-disable */
     destroyed?: EmitType<Object>;
 
     /**

package/src/treeview/treeview.d.ts

@@ -665,8 +665,8 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      */
     dragArea: HTMLElement | string;
     /**
-     * Specifies whether to allow rendering of untrusted HTML values in the TreeView component.
-     * While enable this property, it sanitize suspected untrusted strings and script, and update in the TreeView component.
+     * Specifies whether to display or remove the untrusted HTML values in the TreeView component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      * ```html
      * <div id="tree"></div>
      * ```
@@ -677,7 +677,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * });
      * treeObj.appendTo('#tree');
      * ```
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**

package/src/treeview/treeview.js

@@ -206,7 +206,6 @@ var TreeView = /** @class */ (function (_super) {
         _this.preventExpand = false;
         _this.checkedElement = [];
         _this.disableNode = [];
-        // eslint-disable-next-line
         _this.validArr = [];
         _this.validNodes = [];
         _this.expandChildren = [];
@@ -384,7 +383,6 @@ var TreeView = /** @class */ (function (_super) {
             this.element.setAttribute('aria-multiselectable', 'false');
         }
     };
-    // eslint-disable-next-line
     TreeView.prototype.templateComplier = function (template) {
         if (template) {
             this.hasTemplate = true;
@@ -410,7 +408,6 @@ var TreeView = /** @class */ (function (_super) {
         var _this = this;
         this.treeList.push('false');
         if (this.fields.dataSource instanceof DataManager) {
-            /* eslint-disable */
             this.isOffline = this.fields.dataSource.dataSource.offline;
             if (this.fields.dataSource.ready) {
                 this.fields.dataSource.ready.then(function (e) {
@@ -702,7 +699,7 @@ var TreeView = /** @class */ (function (_super) {
             element = this.element.querySelector('[data-uid="' + data[this.fields.id] + '"]');
         }
         if (element) {
-            var ariaChecked = element.querySelector('.' + CHECKBOXWRAP).getAttribute('aria-checked');
+            var ariaChecked = element.getAttribute('aria-checked');
             if (ariaChecked !== 'true') {
                 this.changeState(element, 'indeterminate', null, true, true);
             }
@@ -757,24 +754,22 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.beforeNodeCreate = function (e) {
         if (this.showCheckBox) {
             var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
-            checkboxEle.setAttribute('role', 'checkbox');
-            checkboxEle.setAttribute('aria-label', e.text);
             var icon = select('div.' + ICON, e.item);
             var id = e.item.getAttribute('data-uid');
             e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);
             var checkValue = getValue(e.fields.isChecked, e.curData);
             if (this.checkedNodes.indexOf(id) > -1) {
                 select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
-                checkboxEle.setAttribute('aria-checked', 'true');
+                e.item.setAttribute('aria-checked', 'true');
                 this.addCheck(e.item);
             }
             else if (!isNOU(checkValue) && checkValue.toString() === 'true') {
                 select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
-                checkboxEle.setAttribute('aria-checked', 'true');
+                e.item.setAttribute('aria-checked', 'true');
                 this.addCheck(e.item);
             }
             else {
-                checkboxEle.setAttribute('aria-checked', 'false');
+                e.item.setAttribute('aria-checked', 'false');
             }
             var frame = select('.' + CHECKBOXFRAME, checkboxEle);
             EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);
@@ -1308,7 +1303,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
         if (!isNOU(ariaState)) {
-            wrapper.setAttribute('aria-checked', ariaState);
+            currLi.setAttribute('aria-checked', ariaState);
         }
         if (isAdd) {
             var data = [].concat([], this.checkActionNodes);
@@ -1322,7 +1317,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         if (!isPrevent) {
             if (!isNOU(ariaState)) {
-                wrapper.setAttribute('aria-checked', ariaState);
+                currLi.setAttribute('aria-checked', ariaState);
                 eventArgs.data[0].checked = ariaState;
                 this.trigger('nodeChecked', eventArgs);
                 this.checkActionNodes = [];
@@ -2029,7 +2024,7 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.nodeSelectAction = function (li, e, eventArgs, multiSelect) {
-        if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {
+        if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !(e.ctrlKey || e.metaKey))))) {
             this.removeSelectAll();
         }
         if (this.allowMultiSelection && e && e.shiftKey) {
@@ -2140,7 +2135,7 @@ var TreeView = /** @class */ (function (_super) {
         this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
     };
     TreeView.prototype.expandHandler = function (e) {
-        var target = e.originalEvent.target;
+        var target = Browser.isDevice && !Browser.isIos ? document.elementFromPoint(e.originalEvent.changedTouches[0].clientX, e.originalEvent.changedTouches[0].clientY) : e.originalEvent.target;
         if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||
             target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||
             target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {
@@ -2357,7 +2352,7 @@ var TreeView = /** @class */ (function (_super) {
         this.checkActionNodes = [];
         var ariaState = !isCheck ? 'true' : 'false';
         if (!isNOU(ariaState)) {
-            checkWrap.setAttribute('aria-checked', ariaState);
+            currLi.setAttribute('aria-checked', ariaState);
         }
         var eventArgs = this.getCheckEvent(currLi, isCheck ? 'uncheck' : 'check', e);
         this.trigger('nodeChecking', eventArgs, function (observedArgs) {
@@ -2709,6 +2704,9 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.onMouseOver = function (e) {
+        if (Browser.isDevice) {
+            return;
+        }
         var target = e.target;
         var classList = target.classList;
         var currentLi = closest(target, '.' + LISTITEM);
@@ -2753,7 +2751,7 @@ var TreeView = /** @class */ (function (_super) {
             var checked = null;
             var checkboxElement = select('.' + CHECKBOXWRAP, currLi);
             if (this.showCheckBox && checkboxElement) {
-                checked = checkboxElement.getAttribute('aria-checked');
+                checked = currLi.getAttribute('aria-checked');
             }
             return {
                 id: id, text: text, parentID: pid, selected: selected, selectable: selectable, expanded: expanded,
@@ -5163,7 +5161,7 @@ var TreeView = /** @class */ (function (_super) {
         Property(null)
     ], TreeView.prototype, "dragArea", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], TreeView.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)

package/styles/accordion/_bds-definition.scss

@@ -0,0 +1,180 @@
+//default
+/*! component's theme wise override tailwind-definitions and variables */
+$acrdn-skin: $skin-name !default;
+$acrdn-slct-header-font-weight: $font-weight-semibold;
+
+$acrdn-nrml-header-minheight: 40px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 22px !default;
+$acrdn-bgr-header-lineheight: 24px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+$acrdn-icon-font-size: $text-lg !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-tab-highlight-color: rgba(0, 0, 0, 0) !default;
+
+$acrdn-item-hdr-con-lineheight: 22px !default;
+$acrdn-item-selected-first-child-border-top: 1px none $border-light !default;
+$acrdn-item-selected-last-child-border-bottom: 1px solid $border-light !default;
+$acrdn-item-border-radius: 4px 4px 0 0 !default;
+$acrdn-item-margin-top: 0 !default;
+$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-tgl-icon-display: table !default;
+$acrdn-item-arrow-icon-font-size: $text-lg !default;
+$acrdn-opacity: .5 !default;
+
+// Header, Nested header and RTL mode Padding
+$acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
+$acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
+$acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
+$acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
+$acrdn-nrml-header-padding: 8px 12px !default;
+$acrdn-bgr-header-padding: 12px 16px !default;
+$acrdn-rtl-nrml-header-padding: 7px 12px !default;
+$acrdn-rtl-bgr-header-padding: 11px 17px !default;
+$acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
+$acrdn-rtl-nest-bgr-header-padding: 12px 28px 12px 0 !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 8px 38px 8px 0 !default;
+$acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
+$acrdn-nested-item-header-focus-box-shadow: none !default;
+
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 12px !default;
+$acrdn-bgr-content-padding: 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;
+$acrdn-nest-bgr-content-padding: 20px 20px 20px 28px !default;
+$acrdn-nest-second-nrml-content-padding: 20px 20px 20px 38px !default;
+$acrdn-nest-second-bgr-content-padding: 24px 24px 24px 40px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
+
+$acrdn-nrml-header-icon-padding: 8px !default;
+$acrdn-bgr-header-icon-padding: 12px !default;
+$acrdn-nrml-icn-minwidth: 22px !default;
+$acrdn-bgr-icn-minwidth: 24px !default;
+$acrdn-active-bg: $content-bg-color !default;
+$acrdn-bg-color: $content-bg-color-alt1 !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
+$acrdn-selected-header-font-color: $icon-color !default;
+$acrdn-selected-header-color: $content-bg-color !default;
+$acrdn-icon-color: $icon-color !default;
+$acrdn-selected-icon-color: $icon-color !default;
+$acrdn-content-color: $content-text-color !default;
+$acrdn-header-font: $content-text-color !default;
+$acrdn-nested-header-font: $content-text-color !default;
+$acrdn-header-font-weight: $font-weight-semibold !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: $font-weight-medium !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-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-selected-border-color: $border-light !default;
+$acrdn-default-border: $acrdn-selected-border-color !default;
+$acrdn-header-focus-bg: $content-bg-color-focus !default;
+$acrdn-header-hover-bg: $content-bg-color-hover !default;
+$acrdn-header-active-bg: $content-bg-color-pressed !default;
+
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 0 !default;
+$acrdn-border-radius: 0 !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;
+
+$acrdn-item-border-color: $acrdn-default-border !default;
+$acrdn-item-border-nav-type: solid !default;
+$acrdn-item-border-size: 0 0 1px 0 !default;
+$acrdn-item-select-last-child-border-bottom: 0 !default;
+$acrdn-item-select-last-child-border-radius: 0 0 4px 4px !default;
+$acrdn-item-first-child-hdr-focus-border-radius: 0 !default;
+$acrdn-item-last-child-border-bottom: 1px solid $acrdn-default-border !default;
+$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 0 !default;
+$acrdn-item-focus-border-color: $acrdn-default-border !default;
+$acrdn-item-focus-border-size: 0 0 1px 0 !default;
+$acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-color: $acrdn-default-border !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-type: solid !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-size: 0 !default;
+$acrdn-item-focus-exp-hdr-hover-focus-bg-color: $content-bg-color-hover !default;
+$acrdn-item-focus-exp-hdr-hover-focus-color: $acrdn-selected-header-font-color !default;
+$acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-icon-color !default;
+$acrdn-item-focus-exp-hdricon-hover-font: $acrdn-selected-header-font-color !default;
+$acrdn-item-focus-selected-exp-border-color: $acrdn-default-border !default;
+$acrdn-item-exp-select-border-color: $acrdn-default-border !default;
+$acrdn-item-exp-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-header-border: 0 !default;
+$acrdn-item-select-exp-hdr-con-disable-font: $content-text-color-disabled !default;
+$acrdn-item-header-content-disable-color: $content-text-color !default;
+$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
+$acrdn-item-selected-exp-hdr-focus-border-color: $acrdn-default-border !default;
+$acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
+$acrdn-item-selected-exp-hdr-focus-border-size: 0 !default;
+$acrdn-item-selected-exp-hdr-focus-bg: $content-bg-color-focus !default;
+$acrdn-item-selected-exp-hdr-hover-bg: $content-bg-color-hover !default;
+$acrdn-item-selected-exp-hdr-active-bg: $content-bg-color !default;
+$acrdn-item-nes-pan-con-last-child-border-bottom: 1px none $acrdn-selected-border-color !default;
+$acrdn-item-select-bg: $content-bg-color !default;
+$acrdn-item-select-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-panel-content-select-bg: none !default;
+$acrdn-item-panel-content-select-border-top: 0 !default;
+$acrdn-item-panel-content-select-border-bottom: 0 !default;
+$acrdn-item-header-hover-border: 0 !default;
+$acrdn-item-header-hover-bg: $content-bg-color-focus !default;
+$acrdn-item-header-hover-border-color: initial !default;
+$acrdn-item-header-active-border: 0 !default;
+$acrdn-item-header-active-border-color: initial !default;
+$acrdn-item-header-focus-border: 0 !default;
+$acrdn-item-header-focus-box-shadow: none !default;
+$acrdn-item-header-focus-bg: $content-bg-color-focus !default;
+$acrdn-item-header-focus-active-color: $content-text-color !default;
+$acrdn-item-select-exp-hdr-hover-color: $content-text-color !default;
+$acrdn-item-selected-exp-hdr-border-color: initial !default;
+$acrdn-item-selected-exp-hdr-border-size: 0 !default;
+$acrdn-item-selected-exp-hdr-bg: $content-bg-color !default;
+$acrdn-item-selected-exp-hdr-hover-color: $icon-color !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: $icon-color !default;
+$acrdn-item-selected-exp-hdr-icon-color: $icon-color !default;
+$acrdn-item-selected-exp-hdr-hover-border-color: initial !default;
+$acrdn-item-selected-tgl-icon-color: $icon-color !default;
+$acrdn-item-selected-hdr-font: $content-text-color !default;
+$acrdn-item-select-hdr-focus-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-select-last-border-bottom: 1px none $acrdn-selected-border-color !default;
+$acrdn-item-selected-selected-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-header-background: none !default;
+$acrdn-item-selected-hdr-border-color: initial !default;
+$acrdn-item-selected-hdr-border-size: 0 !default;
+$acrdn-item-selected-header-border-radius: 0 !default;
+$acrdn-item-selected-hdr-con-font: $content-text-color !default;
+$acrdn-item-selected-select-border-color: $acrdn-selected-border-color !default;
+$acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-hdr-icon-font: $icon-color !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: $icon-color !default;
+$acrdn-item-selected-exp-hdr-icon-hover-color: $icon-color !default;
+$acrdn-item-selected-select-active-bg: $content-bg-color !default;
+$acrdn-item-nes-pan-exp-hdr-color: $content-text-color !default;
+$acrdn-item-selected-hdr-hover-border-color: initial !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: $icon-color !default;
+$acrdn-item-nes-selected-exp-hover-hdr-icons-font: $icon-color !default;
+$acrdn-item-nes-selected-exp-hover-hdr-con-font: $icon-color !default;
+$acrdn-item-exp-not-selected-hdr-focus-bg: $content-bg-color-focus !default;
+$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
+$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+
+//enddefault

package/styles/accordion/_material-definition.scss

@@ -69,7 +69,7 @@ $acrdn-icon-color: rgba($grey-light-font, .54) !default;
 $acrdn-selected-icon-color: rgba($grey-light-font, .54) !default;
 $acrdn-content-color: rgba($grey-light-font, .87) !default;
 $acrdn-header-font:  rgba($grey-light-font, .87) !default;
-$acrdn-nested-header-font:  rgba($grey-light-font, .54) !default;
+$acrdn-nested-header-font: rgba($grey-light-font, .87) !default;
 $acrdn-header-font-weight: normal !default;
 $acrdn-header-font-size: 15px !default;
 $acrdn-nest-header-font-size: 14px !default;

package/styles/accordion/icons/_bds.scss

@@ -0,0 +1,17 @@
+@include export-module('accordion-bds-icons') {
+
+  /*! accordion icons */
+  #{&}.e-accordion {
+
+    .e-tgl-collapse-icon {
+
+      &::before {
+        content: '\e729';
+      }
+
+      &.e-expand-icon {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+}

package/styles/accordion/material.css

@@ -529,7 +529,7 @@
   color: rgba(0, 0, 0, 0.87);
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-header-content {
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0, 0, 0, 0.87);
 }
 .e-accordion .e-acrdn-item .e-toggle-icon {
   color: rgba(0, 0, 0, 0.54);

package/styles/appbar/_bds-definition.scss

@@ -0,0 +1,27 @@
+/*! AppBar component bds theme definitions and variables */
+
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
+$appbar-border: $appbar-border-color-alt1 !default;
+
+/* stylelint-disable */
+.e-appbar {
+  &.e-light {
+    border-bottom: 1px solid $appbar-border !important;
+  }
+  &.e-horizontal-bottom {
+    border-top: 1px solid $appbar-border !important;
+  }
+}
+
+.e-bigger .e-appbar,
+.e-appbar.e-bigger {
+  padding: 16px !important;
+  height: 72px !important;
+  &.e-prominent {
+    height: 132px;
+  }
+}

package/styles/bootstrap-dark.css

@@ -1286,7 +1286,7 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-toolbar .e-toolbar-item,
 .e-toolbar.e-bigger .e-toolbar-item {
@@ -1333,8 +1333,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 0;
   padding: 2.5px 5px;
 }
@@ -1518,6 +1518,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 38px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1622,6 +1635,12 @@
   min-height: 0;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1637,7 +1656,7 @@
   padding: 1px 2.5px;
   border-radius: 4px;
   line-height: 27px;
-  border: none;
+  border: 1px solid transparent;
   cursor: pointer;
   font-size: 16px;
   font-weight: 400;
@@ -1660,7 +1679,7 @@
   line-height: 25px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
-  padding: 0 1.5px;
+  padding: 0 2.5px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
   outline: 0;
@@ -1672,7 +1691,7 @@
   font-size: 14px;
   padding: 0 12px 0 6px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 30px;
   padding: 4px 2.5px;
@@ -1965,6 +1984,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 15px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 12px 0 0;
 }
@@ -2003,7 +2025,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 15px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -2055,7 +2076,7 @@
   background: #131313;
   box-shadow: none;
   color: #f0f0f0;
-  border: none;
+  border: 1px solid transparent;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
   color: #f0f0f0;
@@ -2987,6 +3008,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10300,6 +10327,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;