@syncfusion/ej2-vue-navigations 21.2.9 → 22.1.34

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-navigations@*",
-  "_id": "@syncfusion/ej2-vue-navigations@21.2.8",
+  "_id": "@syncfusion/ej2-vue-navigations@21.7.1",
   "_inBundle": false,
-  "_integrity": "sha512-zj9wdN2D2H3Mu3U7C1VXBMs+HzXCYHd9SW5t/i12QYAIbQkllz63ub6m8O8ijSw3/SzlJZ1NVoqZMce6U9WezA==",
+  "_integrity": "sha512-lNtYFpwnPTdx7Njb9CUqUZCaoJE7lJchfdA9ZaCkVTtLuVTE4GRJy832oXIdihyNr7TnEvcZbt1MBLmAkxLk9g==",
   "_location": "/@syncfusion/ej2-vue-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-21.2.8.tgz",
-  "_shasum": "a227b4f1e24993d9fe5df7ec1833e360d8cf009a",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-21.7.1.tgz",
+  "_shasum": "0730ab729f71b6f845032b957cfb3e8841f4da78",
   "_spec": "@syncfusion/ej2-vue-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-navigations": "21.2.9",
-    "@syncfusion/ej2-vue-base": "~21.2.9"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-navigations": "22.1.34",
+    "@syncfusion/ej2-vue-base": "~22.1.34"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for Vue",
@@ -69,6 +69,6 @@
     "ci-publish": "gulp ci-publish",
     "compile": "gulp ci-compile && gulp vue-global-script"
   },
-  "version": "21.2.9",
+  "version": "22.1.34",
   "sideEffects": false
 }

package/src/accordion/accordion.component.js

@@ -28,7 +28,7 @@ export var AccordionComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new Accordion({}),
+            ej2Instance: new Accordion({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: true,

package/src/appbar/appbar.component.js

@@ -25,7 +25,7 @@ export var AppBarComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new AppBar({}),
+            ej2Instance: new AppBar({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: false,

package/src/breadcrumb/breadcrumb.component.js

@@ -28,7 +28,7 @@ export var BreadcrumbComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new Breadcrumb({}),
+            ej2Instance: new Breadcrumb({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: true,

package/src/carousel/carousel.component.js

@@ -3,7 +3,7 @@ import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { isUndefined } from '@syncfusion/ej2-base';
 import { Carousel } from '@syncfusion/ej2-navigations';
 import { CarouselItemsDirective, CarouselItemDirective, CarouselItemsPlugin, CarouselItemPlugin } from './items.directive';
-export var properties = ['isLazyUpdate', 'plugins', 'animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'width', 'slideChanged', 'slideChanging'];
+export var properties = ['isLazyUpdate', 'plugins', 'animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'indicatorsType', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'swipeMode', 'width', 'slideChanged', 'slideChanging'];
 export var modelProps = ['selectedIndex'];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
@@ -28,7 +28,7 @@ export var CarouselComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new Carousel({}),
+            ej2Instance: new Carousel({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: true,

package/src/context-menu/contextmenu.component.js

@@ -26,7 +26,7 @@ export var ContextMenuComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new ContextMenu({}),
+            ej2Instance: new ContextMenu({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: false,

package/src/menu/menu.component.js

@@ -26,7 +26,7 @@ export var MenuComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new Menu({}),
+            ej2Instance: new Menu({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: true,

package/src/sidebar/sidebar.component.js

@@ -27,7 +27,7 @@ export var SidebarComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new Sidebar({}),
+            ej2Instance: new Sidebar({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: false,

package/src/tab/tab.component.js

@@ -26,7 +26,7 @@ export var TabComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new Tab({}),
+            ej2Instance: new Tab({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: true,

package/src/toolbar/toolbar.component.js

@@ -26,7 +26,7 @@ export var ToolbarComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new Toolbar({}),
+            ej2Instance: new Toolbar({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: true,

package/src/treeview/treeview.component.js

@@ -25,7 +25,7 @@ export var TreeViewComponent = vueDefineComponent({
     provide: function () { return { custom: this.custom }; },
     data: function () {
         return {
-            ej2Instances: new TreeView({}),
+            ej2Instance: new TreeView({}),
             propKeys: properties,
             models: modelProps,
             hasChildDirective: false,

package/styles/accordion/bootstrap-dark.css

@@ -22,6 +22,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 0 30px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -116,6 +117,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #505050;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -205,6 +209,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 30px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -383,6 +390,7 @@
   color: #f0f0f0;
   background: none;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #3e98ff;
@@ -470,7 +478,7 @@
 .e-accordion .e-acrdn-item.e-selected.e-select {
   border-color: #505050;
   border-style: solid;
-  border-width: 1px 0 1px 0;
+  border-width: 1px;
 }
 .e-accordion .e-acrdn-item.e-selected.e-select.e-active {
   background: #1a1a1a;
@@ -486,6 +494,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #505050;

package/styles/accordion/bootstrap.css

@@ -23,6 +23,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 0 30px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -117,6 +118,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #ddd;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -206,6 +210,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 30px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -384,6 +391,7 @@
   color: #333;
   background: none;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #333;
@@ -471,7 +479,7 @@
 .e-accordion .e-acrdn-item.e-selected.e-select {
   border-color: #ddd;
   border-style: solid;
-  border-width: 1px 0 1px 0;
+  border-width: 1px;
 }
 .e-accordion .e-acrdn-item.e-selected.e-select.e-active {
   background: #f5f5f5;
@@ -487,6 +495,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #ddd;

package/styles/accordion/bootstrap4.css

@@ -22,6 +22,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 0 30px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -116,6 +117,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid rgba(0, 0, 0, 0.13);
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -205,6 +209,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 30px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -383,6 +390,7 @@
   color: #212529;
   background: #fff;
   border-top: 1px solid rgba(0, 0, 0, 0.13);
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #007bff;
@@ -486,6 +494,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #000 #000 rgba(0, 0, 0, 0.13);

package/styles/accordion/bootstrap5-dark.css

@@ -24,6 +24,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 12px 0 12px 28px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -118,6 +119,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #444c54;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -205,7 +209,10 @@
   padding: 16px 16px 16px 26px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 8px 0 8px 26px;
+  padding: 10px 0 10px 26px;
+}
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
@@ -385,6 +392,7 @@
   color: #fff;
   background: none;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #fff;
@@ -488,6 +496,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #444c54;

package/styles/accordion/bootstrap5.css

@@ -24,6 +24,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 12px 0 12px 28px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -118,6 +119,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #dee2e6;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -205,7 +209,10 @@
   padding: 16px 16px 16px 26px;
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 8px 0 8px 26px;
+  padding: 10px 0 10px 26px;
+}
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
@@ -385,6 +392,7 @@
   color: #212529;
   background: none;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #212529;
@@ -488,6 +496,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #dee2e6;

package/styles/accordion/fabric-dark.css

@@ -22,6 +22,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 0 42px 0 24px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -116,6 +117,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #414040;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -205,6 +209,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 42px 0 24px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -383,6 +390,7 @@
   color: #dadada;
   background: none;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #dadada;
@@ -486,6 +494,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #414040;

package/styles/accordion/fabric.css

@@ -23,6 +23,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 0 42px 0 24px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -117,6 +118,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #eaeaea;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -206,6 +210,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 42px 0 24px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -384,6 +391,7 @@
   color: #333;
   background: none;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #333;
@@ -487,6 +495,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #eaeaea;

package/styles/accordion/fluent-dark.css

@@ -23,6 +23,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 12px 0 12px 28px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -117,6 +118,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px none #292827;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -206,6 +210,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 8px 0 8px 26px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -384,6 +391,7 @@
   color: #f3f2f1;
   background: none;
   border-top: 0;
+  border-bottom: 1px solid #292827;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #f3f2f1;
@@ -487,6 +495,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #292827;

package/styles/accordion/fluent.css

@@ -23,6 +23,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 12px 0 12px 28px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -117,6 +118,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px none #edebe9;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -206,6 +210,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 8px 0 8px 26px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -384,6 +391,7 @@
   color: #201f1e;
   background: none;
   border-top: 0;
+  border-bottom: 1px solid #edebe9;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #201f1e;
@@ -487,6 +495,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #edebe9;

package/styles/accordion/highcontrast-light.css

@@ -22,6 +22,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 0 42px 0 24px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -116,6 +117,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #757575;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -205,6 +209,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 42px 0 24px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -383,6 +390,7 @@
   color: #000;
   background: #fff;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #000;
@@ -486,6 +494,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #757575;

package/styles/accordion/highcontrast.css

@@ -23,6 +23,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 0 42px 0 24px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -117,6 +118,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #969696;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -206,6 +210,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 42px 0 24px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -384,6 +391,7 @@
   color: #fff;
   background: #000;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #fff;
@@ -487,6 +495,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #969696;