@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/src/carousel/index.d.ts

@@ -0,0 +1,3 @@
+/** Carousel export modules */
+export * from './carousel';
+export * from './carousel-model';

package/src/carousel/index.js

@@ -0,0 +1,2 @@
+/** Carousel export modules */
+export * from './carousel';

package/src/common/h-scroll.js

@@ -210,11 +210,13 @@ var HScroll = /** @class */ (function (_super) {
     HScroll.prototype.createNavIcon = function (element) {
         var id = element.id.concat('_nav');
         var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);
-        var nav = this.createElement('div', { id: id.concat('_right'), className: clsRight });
+        var rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };
+        var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });
         nav.setAttribute('aria-disabled', 'false');
         var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);
-        var navEle = this.createElement('div', { id: id.concat('_left'), className: clsLeft + ' ' + CLS_DISABLE });
+        var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };
+        var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });
         navEle.setAttribute('aria-disabled', 'true');
         var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         navEle.appendChild(navLeftItem);
@@ -406,7 +408,7 @@ var HScroll = /** @class */ (function (_super) {
                 classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
             }
         }
-        else {
+        else if (addDisable && removeDisable) {
             addDisable.classList.add(CLS_DISABLE);
             addDisable.setAttribute('aria-disabled', 'true');
             addDisable.removeAttribute('tabindex');

package/src/common/menu-base.js

@@ -536,14 +536,14 @@ var MenuBase = /** @class */ (function (_super) {
         if (this.isMenuVisible()) {
             var sli = void 0;
             var item_1;
-            var wrapper = this.getWrapper();
+            var wrapper_1 = this.getWrapper();
             var beforeCloseArgs = void 0;
             var items_1;
             var popups = this.getPopups();
             var isClose = false;
-            var cnt = this.isMenu ? popups.length + 1 : wrapper.childElementCount;
+            var cnt = this.isMenu ? popups.length + 1 : wrapper_1.childElementCount;
             var ul_1 = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])
-                : selectAll('.e-menu-parent', wrapper)[cnt - 1];
+                : selectAll('.e-menu-parent', wrapper_1)[cnt - 1];
             if (this.isMenu && ul_1.classList.contains('e-menu')) {
                 sli = this.getLIByClass(ul_1, SELECTED);
                 if (sli) {
@@ -632,6 +632,9 @@ var MenuBase = /** @class */ (function (_super) {
                         _this.navIdx.length !== 0 && closest(e.target, '.e-menu-parent.e-control')) {
                         _this.closeMenu(0, e);
                     }
+                    else if (isOpen && !_this.isMenu && selectAll('.e-menu-parent', wrapper_1)[ulIndex - 1] && e.which === 3) {
+                        _this.closeMenu(null, e);
+                    }
                     else {
                         if (isOpen && (_this.keyType === 'right' || _this.keyType === 'click')) {
                             _this.afterCloseMenu(e);
@@ -964,14 +967,8 @@ var MenuBase = /** @class */ (function (_super) {
                             _this.setBlankIconStyle(_this.popupWrapper);
                             _this.wireKeyboardEvent(_this.popupWrapper);
                             rippleEffect(_this.popupWrapper, { selector: '.' + ITEM });
-                            if (_this.popupWrapper.style.position === 'fixed' && _this.top > 0) {
-                                _this.popupWrapper.style.left = _this.left + 'px';
-                                _this.popupWrapper.style.top = _this.top + scrollY + 'px';
-                            }
-                            else {
-                                _this.popupWrapper.style.left = _this.left + 'px';
-                                _this.popupWrapper.style.top = _this.top + 'px';
-                            }
+                            _this.popupWrapper.style.left = _this.left + 'px';
+                            _this.popupWrapper.style.top = _this.top + 'px';
                             var animationOptions = _this.animationSettings.effect !== 'None' ? {
                                 name: _this.animationSettings.effect, duration: _this.animationSettings.duration,
                                 timingFunction: _this.animationSettings.easing
@@ -1698,8 +1695,9 @@ var MenuBase = /** @class */ (function (_super) {
     MenuBase.prototype.removeItem = function (item, navIdx, idx) {
         item.splice(idx, 1);
         var uls = this.getWrapper().children;
-        if (navIdx.length < uls.length) {
-            detach(uls[navIdx.length].children[idx]);
+        var uls_length = this.hamburgerMode ? 1 : uls.length;
+        if (navIdx.length < uls_length) {
+            detach(uls[this.hamburgerMode ? 1 : navIdx.length].children[idx]);
         }
     };
     /**

package/src/index.d.ts

@@ -10,3 +10,4 @@ export * from './tab/index';
 export * from './treeview/index';
 export * from './sidebar/index';
 export * from './breadcrumb/index';
+export * from './carousel/index';

package/src/index.js

@@ -10,3 +10,4 @@ export * from './tab/index';
 export * from './treeview/index';
 export * from './sidebar/index';
 export * from './breadcrumb/index';
+export * from './carousel/index';

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

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';import { ToolbarModel } from '../toolbar';
+import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';import { ToolbarModel } from '../toolbar';
 import {HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/tab/tab.js

@@ -211,11 +211,12 @@ var Tab = /** @class */ (function (_super) {
      */
     Tab.prototype.destroy = function () {
         var _this = this;
-        if (this.isReact) {
+        if (this.isReact || this.isAngular) {
             this.clearTemplate();
         }
         if (!isNOU(this.tbObj)) {
             this.tbObj.destroy();
+            this.tbObj = null;
         }
         this.unWireEvents();
         ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach(function (val) {
@@ -234,6 +235,28 @@ var Tab = /** @class */ (function (_super) {
                 cntEle.innerHTML = this.cnt;
             }
         }
+        if (this.btnCls) {
+            this.btnCls = null;
+        }
+        this.hdrEle = null;
+        this.cntEle = null;
+        this.tbItems = null;
+        this.tbItem = null;
+        this.tbPop = null;
+        this.prevItem = null;
+        this.popEle = null;
+        this.bdrLine = null;
+        this.content = null;
+        this.dragItem = null;
+        this.cloneElement = null;
+        this.draggingItems = [];
+        if (this.draggableItems && this.draggableItems.length > 0) {
+            for (var i = 0; i < this.draggableItems.length; i++) {
+                this.draggableItems[i].destroy();
+                this.draggableItems[i] = null;
+            }
+            this.draggableItems = [];
+        }
         _super.prototype.destroy.call(this);
         this.trigger('destroyed');
     };
@@ -266,6 +289,9 @@ var Tab = /** @class */ (function (_super) {
         this.isSwipeed = false;
         this.itemIndexArray = [];
         this.templateEle = [];
+        if (this.allowDragAndDrop) {
+            this.dragArea = !isNOU(this.dragArea) ? this.dragArea : '#' + this.element.id + ' ' + ('.' + CLS_HEADER);
+        }
         if (!isNOU(nested)) {
             nested.parentElement.classList.add(CLS_NEST);
             this.isNested = true;
@@ -483,7 +509,15 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.parseObject = function (items, index) {
         var _this = this;
-        var tbCount = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element).length;
+        var tbItems = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element);
+        var maxId = this.lastIndex;
+        if (!this.isReplace && tbItems.length > 0) {
+            var idList_1 = [];
+            tbItems.forEach(function (item) {
+                idList_1.push(parseInt(item.id.slice(item.id.indexOf('_') + 1), 10));
+            });
+            maxId = Math.max.apply(Math, idList_1);
+        }
         var tItems = [];
         var txtWrapEle;
         var spliceArray = [];
@@ -509,8 +543,7 @@ var Tab = /** @class */ (function (_super) {
             else {
                 itemIndex = index + i;
             }
-            var addIndex = _this.isAdd ? tbCount + i : _this.lastIndex + 1;
-            _this.lastIndex = ((tbCount === 0) ? i : ((_this.isReplace) ? (itemIndex) : (addIndex)));
+            _this.lastIndex = ((tbItems.length === 0) ? i : ((_this.isReplace) ? (itemIndex) : (maxId + 1 + i)));
             var disabled = (item.disabled) ? ' ' + CLS_DISABLE + ' ' + CLS_OVERLAY : '';
             var hidden = (item.visible === false) ? ' ' + CLS_HIDDEN : '';
             txtWrapEle = _this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });
@@ -818,7 +851,12 @@ var Tab = /** @class */ (function (_super) {
         var templateFn;
         if (typeof val === 'string') {
             val = val.trim();
-            ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
+            if (this.isVue) {
+                templateFn = compile(SanitizeHtmlHelper.sanitize(val));
+            }
+            else {
+                ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
+            }
         }
         else {
             templateFn = compile(val);
@@ -1237,6 +1275,7 @@ var Tab = /** @class */ (function (_super) {
         }
         if (!isNOU(this.cntEle) && !isNOU(this.touchModule)) {
             this.touchModule.destroy();
+            this.touchModule = null;
         }
         window.removeEventListener('resize', this.resizeContext);
         EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
@@ -1266,8 +1305,13 @@ var Tab = /** @class */ (function (_super) {
         if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {
             return;
         }
-        if (e.originalEvent && this.isNested) {
-            e.originalEvent.stopPropagation();
+        if (this.isNested) {
+            this.element.setAttribute('data-swipe', 'true');
+        }
+        var nestedTab = this.element.querySelector('[data-swipe="true"]');
+        if (nestedTab) {
+            nestedTab.removeAttribute('data-swipe');
+            return;
         }
         this.isSwipeed = true;
         if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {
@@ -1488,7 +1532,7 @@ var Tab = /** @class */ (function (_super) {
                 this.reRenderItems();
             }
             else {
-                if (this.isRect) {
+                if (this.isReact || this.isAngular) {
                     this.clearTemplate();
                 }
                 this.setItems(newProp.items);
@@ -1501,12 +1545,13 @@ var Tab = /** @class */ (function (_super) {
                     detach(selectElement.firstElementChild);
                 }
                 this.select(this.selectedItem);
+                this.draggableItems = [];
+                this.bindDraggable();
             }
         }
     };
     Tab.prototype.initializeDrag = function (target) {
         var _this = this;
-        this.dragArea = !isNOU(this.dragArea) ? this.dragArea : '#' + this.element.id + ' ' + ('.' + CLS_HEADER);
         var dragObj = new Draggable(target, {
             dragArea: this.dragArea,
             dragTarget: '.' + CLS_TB_ITEM,
@@ -1684,6 +1729,7 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.itemDragStop = function (e) {
         var _this = this;
         detach(this.cloneElement);
+        this.cloneElement = null;
         this.dragItem.querySelector('.' + CLS_WRAP).style.visibility = 'visible';
         document.body.style.cursor = '';
         var dragStopArgs = {
@@ -1712,6 +1758,7 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
         });
+        this.dragItem = null;
     };
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
@@ -1800,8 +1847,8 @@ var Tab = /** @class */ (function (_super) {
             var textValue_1;
             items.forEach(function (item, place) {
                 textValue_1 = item.headerTemplate || item.header.text;
-                if (!(isNOU(item.headerTemplate || item.header) ||
-                    isNOU(textValue_1) || (textValue_1.length === 0) && isNOU(item.header.iconCss))) {
+                if (!(isNOU(item.headerTemplate || item.header) || isNOU(textValue_1) ||
+                    (textValue_1.length === 0) && !isNOU(item.header) && isNOU(item.header.iconCss))) {
                     _this.items.splice((index + i_1), 0, item);
                     i_1++;
                 }
@@ -1856,12 +1903,25 @@ var Tab = /** @class */ (function (_super) {
                     detach(cntTrg);
                 }
                 _this.trigger('removed', tabRemovingArgs);
+                if (_this.draggableItems && _this.draggableItems.length > 0) {
+                    _this.draggableItems[index].destroy();
+                    _this.draggableItems[index] = null;
+                    _this.draggableItems.splice(index, 1);
+                }
                 if (trg.classList.contains(CLS_ACTIVE)) {
                     index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', _this.element).length - 1) ? index - 1 : index;
                     _this.enableAnimation = false;
                     _this.selectedItem = index;
                     _this.select(index);
                 }
+                else if (index !== _this.selectedItem) {
+                    if (index < _this.selectedItem) {
+                        index = _this.itemIndexArray.indexOf(_this.tbItem[_this.selectedItem].id);
+                        _this.setProperties({ selectedItem: index > -1 ? index : _this.selectedItem }, true);
+                        _this.prevIndex = _this.selectedItem;
+                    }
+                    _this.tbItem = selectAll('.' + CLS_TB_ITEM, _this.getTabHeader());
+                }
                 if (selectAll('.' + CLS_TB_ITEM, _this.element).length === 0) {
                     _this.hdrEle.style.display = 'none';
                 }
@@ -2013,6 +2073,7 @@ var Tab = /** @class */ (function (_super) {
             }
             if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {
                 this.prevIndex = this.selectedItem;
+                this.prevItem = this.tbItem[this.prevIndex];
                 if (this.tbItem[args].classList.contains(CLS_TB_POPUP) && this.reorderActiveTab) {
                     this.setActive(this.popupHandler(this.tbItem[args]), null, isInteracted);
                     if ((!isNOU(this.items) && this.items.length > 0) && this.allowDragAndDrop) {

package/src/toolbar/toolbar.js

@@ -207,6 +207,7 @@ var Toolbar = /** @class */ (function (_super) {
         }
         this.popObj = null;
         this.tbarAlign = null;
+        this.tbarItemsCol = [];
         this.remove(this.element, 'e-toolpop');
         if (this.cssClass) {
             removeClass([this.element], this.cssClass.split(' '));
@@ -1691,6 +1692,9 @@ var Toolbar = /** @class */ (function (_super) {
                     innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);
                 }
                 this.items.splice(index, 0, item);
+                if (item.template) {
+                    this.tbarEle.splice(this.tbarEle.length - 1, 1);
+                }
                 this.tbarEle.splice(index, 0, innerEle);
                 index++;
                 this.offsetWid = itemsDiv.offsetWidth;
@@ -1763,11 +1767,15 @@ var Toolbar = /** @class */ (function (_super) {
         if (typeof (templateProp) === 'string' || !isComponent) {
             var templateFn = void 0;
             var val = templateProp;
+            var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
             val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;
             try {
                 if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {
                     innerEle.appendChild(templateProp);
                 }
+                else if (typeof (templateProp) === 'string' && regEx.test(val)) {
+                    innerEle.innerHTML = val;
+                }
                 else if (document.querySelectorAll(val).length) {
                     var ele = document.querySelector(val);
                     var tempStr = ele.outerHTML.trim();
@@ -1777,6 +1785,9 @@ var Toolbar = /** @class */ (function (_super) {
                         this.tempId.push(val);
                     }
                 }
+                else {
+                    templateFn = templateCompiler(val);
+                }
             }
             catch (e) {
                 templateFn = templateCompiler(val);

package/src/treeview/treeview.js

@@ -385,6 +385,9 @@ var TreeView = /** @class */ (function (_super) {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (e) {
                 return compile(template);
@@ -713,7 +716,7 @@ var TreeView = /** @class */ (function (_super) {
                 this.validNodes.push(checkedChild);
             }
             var subChildItems = getValue(this.fields.child.toString(), childItems[index]);
-            if (subChildItems) {
+            if (subChildItems && subChildItems.length) {
                 this.parentCheckData.push(treeData);
                 this.updateChildCheckState(subChildItems, childItems[index]);
             }
@@ -2671,7 +2674,7 @@ var TreeView = /** @class */ (function (_super) {
         return { cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData, event: e };
     };
     TreeView.prototype.renderNodeTemplate = function (data, textEle, dataId) {
-        var tempArr = this.nodeTemplateFn(data, this, 'nodeTemplate' + dataId, this.element.id + 'nodeTemplate', this.isStringTemplate, undefined, textEle);
+        var tempArr = this.nodeTemplateFn(data, this, 'nodeTemplate' + dataId, this.element.id + 'nodeTemplate', this.isStringTemplate, undefined, textEle, this.root);
         if (tempArr) {
             tempArr = Array.prototype.slice.call(tempArr);
             append(tempArr, textEle);

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

@@ -35,13 +35,13 @@ $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-pa
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
 $acrdn-bgr-content-padding: 15px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 30px !default;
 $acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 45px !default;
 $acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 30px 15px 15px !default;
 $acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 45px 15px 15px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
 $acrdn-nrml-icn-minwidth: 24px !default;
 $acrdn-bgr-icn-minwidth: 24px !default;

package/styles/accordion/_bootstrap-definition.scss

@@ -46,13 +46,13 @@ $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-pa
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
 $acrdn-bgr-content-padding: 15px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 30px !default;
 $acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 45px !default;
 $acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 30px 15px 15px !default;
 $acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 45px 15px 15px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
 
 

package/styles/accordion/_bootstrap4-definition.scss

@@ -45,13 +45,13 @@ $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-pa
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 16px !default;
 $acrdn-bgr-content-padding: 20px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 30px !default;
 $acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 45px !default;
 $acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 30px 15px 15px !default;
 $acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 45px 15px 15px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
 $acrdn-nrml-icn-minwidth: 24px !default;
 $acrdn-bgr-icn-minwidth: 24px !default;

package/styles/accordion/_bootstrap5-definition.scss

@@ -25,8 +25,8 @@ $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: 7px 12px 3px !default;
-$acrdn-bgr-header-padding: 11px 17px !default;
+$acrdn-nrml-header-padding: 10px 16px !default;
+$acrdn-bgr-header-padding: 13px 20px !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;
@@ -37,14 +37,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !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 !default;
-$acrdn-nest-bgr-content-padding: 20px !default;
-$acrdn-nest-second-nrml-content-padding: 20px !default;
-$acrdn-nest-second-bgr-content-padding: 24px !default;
-$acrdn-rtl-nest-nrml-content-padding: 16px !default;
-$acrdn-rtl-nest-bgr-content-padding: 20px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 20px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 24px !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;
 
 // dimension definitions
 $acrdn-border-radius: 4px !default;

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

@@ -19,7 +19,7 @@ $acrdn-content-line-height: 1.5 !default;
 $acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $acrdn-active-bg: $default-bg-color !default;
 $acrdn-active-bg-color: $acrdn-active-bg !default;
-$acrdn-nested-header-font: $header-font-color !default;
+$acrdn-nested-header-font: $neutral-light-font !default;
 $acrdn-nrml-header-minheight: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;
 $acrdn-nrml-header-lineheight: 39px !default;
@@ -41,14 +41,14 @@ $acrdn-rtl-nest-second-nrml-header-padding: 0  36px 0 42px  !default;
 $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
 $acrdn-nrml-content-padding: 15px !default;
 $acrdn-bgr-content-padding: 19px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
-$acrdn-nest-bgr-content-padding: 19px 19px 19px 45px !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
-$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 60px !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
-$acrdn-rtl-nest-bgr-content-padding: 19px 45px 19px 19px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 19px 60px 19px 19px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 24px !default;
+$acrdn-nest-bgr-content-padding: 19px 19px 19px 24px !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 36px !default;
+$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 36px !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 24px 15px 15px !default;
+$acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
 
 $acrdn-nrml-header-icon-padding: 8px !default;

package/styles/accordion/_fabric-definition.scss

@@ -20,7 +20,7 @@ $acrdn-bg-color: $default-bg-color !default;
 $acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-active-bg: $default-bg-color !default;
 $acrdn-active-bg-color: $acrdn-active-bg !default;
-$acrdn-nested-header-font: $header-font-color !default;
+$acrdn-nested-header-font: $neutral-light-font !default;
 
 $acrdn-nrml-header-paddingpix: 12px !default;
 $acrdn-bgr-header-paddingpix: 12px !default;
@@ -42,14 +42,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-pa
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
 $acrdn-bgr-content-padding: 19px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
-$acrdn-nest-bgr-content-padding: 19px 19px 19px 45px !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
-$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 60px !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
-$acrdn-rtl-nest-bgr-content-padding: 19px 45px 19px 19px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 19px 60px 19px 19px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 24px !default;
+$acrdn-nest-bgr-content-padding: 19px 19px 19px 24px !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 36px !default;
+$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 36px !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 24px 15px 15px !default;
+$acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
 
 $acrdn-nrml-header-icon-padding: 8px !default;

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

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/accordion/_fluent-definition.scss

@@ -3,7 +3,7 @@
 $acrdn-skin: 'FluentUI' !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;
 
-$acrdn-border-radius: 4px !default;
+$acrdn-border-radius: 2px !default;
 $acrdn-nrml-header-minheight: 38px !default;
 $acrdn-bgr-header-minheight: 48px !default;
 $acrdn-nrml-header-lineheight: 22px !default;
@@ -31,14 +31,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !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 !default;
-$acrdn-nest-bgr-content-padding: 20px !default;
-$acrdn-nest-second-nrml-content-padding: 20px !default;
-$acrdn-nest-second-bgr-content-padding: 24px !default;
-$acrdn-rtl-nest-nrml-content-padding: 16px !default;
-$acrdn-rtl-nest-bgr-content-padding: 20px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 20px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 24px !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;
@@ -70,7 +70,7 @@ $acrdn-selected-border-color: $border-light !default;
 $acrdn-default-border: $acrdn-selected-border-color !default;
 $acrdn-header-focus-bg: $content-bg-color-hover !default;
 $acrdn-header-hover-bg: $content-bg-color-hover !default;
-$acrdn-header-active-bg: $content-bg-color !default;
+$acrdn-header-active-bg: $content-bg-color-pressed !default;
 $acrdn-item-header-focus-border-color: $primary !default;
 
 $acrdn-border-type: solid !default;

package/styles/accordion/_highcontrast-definition.scss

@@ -41,14 +41,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-pa
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
 $acrdn-bgr-content-padding: 19px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
-$acrdn-nest-bgr-content-padding: 19px 19px 19px 45px !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
-$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 60px !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
-$acrdn-rtl-nest-bgr-content-padding: 19px 45px 19px 19px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 19px 60px 19px 19px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 24px !default;
+$acrdn-nest-bgr-content-padding: 19px 19px 19px 24px !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 36px !default;
+$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 36px !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 24px 15px 15px !default;
+$acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
 
 $acrdn-nrml-header-icon-padding: 8px !default;

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

@@ -72,14 +72,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-pa
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
 $acrdn-bgr-content-padding: 19px !default;
-$acrdn-nest-nrml-content-padding: 15px 15px 15px 45px !default;
-$acrdn-nest-bgr-content-padding: 19px 19px 19px 45px !default;
-$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 60px !default;
-$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 60px !default;
-$acrdn-rtl-nest-nrml-content-padding: 15px 45px 15px 15px !default;
-$acrdn-rtl-nest-bgr-content-padding: 19px 45px 19px 19px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 15px 60px 15px 15px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 19px 60px 19px 19px !default;
+$acrdn-nest-nrml-content-padding: 15px 15px 15px 24px !default;
+$acrdn-nest-bgr-content-padding: 19px 19px 19px 24px !default;
+$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 36px !default;
+$acrdn-nest-second-bgr-content-padding: 19px 19px 19px 36px !default;
+$acrdn-rtl-nest-nrml-content-padding: 15px 24px 15px 15px !default;
+$acrdn-rtl-nest-bgr-content-padding: 19px 24px 19px 19px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 15px 36px 15px 15px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 19px 36px 19px 19px !default;
 
 
 $acrdn-nrml-header-icon-padding: 8px !default;