@syncfusion/ej2-navigations 21.2.9 → 22.1.34

package/styles/accordion/_material3-definition.scss

@@ -0,0 +1,182 @@
+/*! Accordion's material 3 theme wise override definitions and variables */
+/* stylelint-disable */
+$acrdn-skin: 'material3' !default;
+
+// font definitions
+$acrdn-icon-font-size: $text-base !default;
+$acrdn-slct-header-font-weight: 500;
+$acrdn-header-font: rgba($content-text-color) !default;
+$acrdn-nested-header-font: rgba($content-text-color) !default;
+$acrdn-header-font-weight: 500 !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: 500 !default;
+$acrdn-content-font-size: $text-sm !default;
+$acrdn-header-font-bgr-size: $text-base !default;
+$acrdn-content-font-bgr-size: $text-base !default;
+$acrdn-bgr-arrow-icon-font-size: $text-xl;
+$acrdn-bgr-item-header-content-font-size: $text-base !default;
+$acrdn-icon-font-size: $text-base !default;
+$acrdn-selected-header-font-color: rgba($content-text-color) !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 !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;
+
+// dimension definitions
+$acrdn-border-radius: 8px !default;
+$acrdn-nrml-header-minheight: 36px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 20px !default;
+$acrdn-bgr-header-lineheight: 24px !default;
+$acrdn-nrml-header-paddingpix: 10px !default;
+$acrdn-bgr-header-paddingpix: 14px !default;
+$acrdn-content-line-height: 20px !default;
+$acrdn-nrml-header-icon-padding: 8px !default;
+$acrdn-bgr-header-icon-padding: 12px !default;
+$acrdn-nrml-icn-minwidth: 16px !default;
+$acrdn-bgr-icn-minwidth: 20px !default;
+$acrdn-selected-border-size: 0 !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 1px !default;
+
+$acrdn-item-hdr-con-lineheight: 20px !default;
+$acrdn-item-selected-first-child-border-top: 1px none rgba($border-light) !default;
+$acrdn-item-selected-last-child-border-bottom: 1px solid rgba($border-light) !default;
+$acrdn-item-border-radius: 0 !default;
+$acrdn-item-margin-top: 0 !default;
+$acrdn-item-nested-panel-item-select-margin: 0 !default;
+$acrdn-item-overflow: visible !default;
+$acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
+$acrdn-item-hdr-border-radius: 0 !default;
+$acrdn-item-tgl-icon-display: table !default;
+$acrdn-item-arrow-icon-font-size: $text-base !default;
+$acrdn-opacity: .5 !default;
+
+// color definitions
+$acrdn-tab-highlight-color:  ($content-bg-color-hover, 0.05) !default;
+$acrdn-active-bg: rgba($content-bg-color, 0.0001) !default;
+$acrdn-bg-color: $transparent !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
+$acrdn-selected-header-color: $transparent !default;
+$acrdn-icon-color: rgba($icon-color) !default;
+$acrdn-selected-icon-color: rgba($icon-color) !default;
+$acrdn-content-color: rgba($content-text-color) !default;
+$acrdn-selected-border-color: rgba($border-light) !default;
+$acrdn-header-focus-bg: $content-bg-color-focus !default;
+$acrdn-header-hover-bg: $content-bg-color-hover !default;
+$acrdn-header-active-bg: $transparent !default;
+$acrdn-item-header-focus-border-color: rgba($border-light) !default;
+$acrdn-item-icon-disable-color: $icon-color-disabled !default;
+$acrdn-text-disable-color: $content-text-color-disabled !default;
+$acrdn-default-border: $acrdn-selected-border-color !default;
+
+$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 !default;
+$acrdn-item-first-child-hdr-focus-border-radius: 4px 4px 0 0 !default;
+$acrdn-item-last-child-border-bottom: 0 !default;
+$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 0 0 4px 4px !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 0 1px 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-header-font-color !default;
+$acrdn-item-focus-exp-hdricon-hover-font: $acrdn-icon-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: rgba($content-text-color) !default;
+$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
+$acrdn-item-selected-exp-hdr-focus-border-color: rgba($border-light) !default;
+$acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
+$acrdn-item-selected-exp-hdr-focus-border-size: 0 0 1px 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: $transparent !default;
+$acrdn-item-nes-pan-con-last-child-border-bottom: 1px none $acrdn-selected-border-color !default;
+$acrdn-item-select-bg: none !default;
+$acrdn-item-select-border-color: rgba($border-light) !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-hover !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: $shadow-focus-ring1 !default;
+$acrdn-item-header-focus-bg: $content-bg-color-focus !default;
+$acrdn-item-header-focus-active-color: rgba($content-text-color) !default;
+$acrdn-item-select-exp-hdr-hover-color: rgba($content-text-color) !default;
+$acrdn-item-selected-exp-hdr-border-color: rgba($border-light) !default;
+$acrdn-item-selected-exp-hdr-border-size: 0 !default;
+$acrdn-item-selected-exp-hdr-bg: $transparent !default;
+$acrdn-item-selected-exp-hdr-hover-color: rgba($content-text-color) !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: rgba($content-text-color) !default;
+$acrdn-item-selected-exp-hdr-icon-color: rgba($icon-color) !default;
+$acrdn-item-selected-exp-hdr-hover-border-color: rgba($border-light) !default;
+$acrdn-item-selected-tgl-icon-color: rgba($content-text-color) !default;
+$acrdn-item-selected-hdr-font: rgba($content-text-color) !default;
+$acrdn-item-select-hdr-focus-border-color: rgba($border-light) !default;
+$acrdn-item-selected-border-color: rgba($border-light) !default;
+$acrdn-item-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-select-last-border-bottom: 1px none rgba($border-light) !default;
+$acrdn-item-selected-selected-border-color: rgba($border-light) !default;
+$acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-header-background: $transparent !default;
+$acrdn-item-selected-hdr-border-color: rgba($border-light) !default;
+$acrdn-item-selected-hdr-border-size:  0 !default;
+$acrdn-item-selected-header-border-radius: 0 !default;
+$acrdn-item-selected-hdr-con-font: rgba($primary) !default;
+$acrdn-item-selected-select-border-color: rgba($border-light) !default;
+$acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-hdr-icon-font: rgba($primary) !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: rgba($content-text-color) !default;
+$acrdn-item-selected-exp-hdr-icon-hover-color: rgba($icon-color) !default;
+$acrdn-item-selected-select-active-bg: $transparent !default;
+$acrdn-item-nes-pan-exp-hdr-color: rgba($content-text-color) !default;
+$acrdn-item-selected-hdr-hover-border-color: rgba($border-light) !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: rgba($primary) !default;
+$acrdn-item-nes-selected-exp-hover-hdr-icons-font: rgba($primary) !default;
+$acrdn-item-nes-selected-exp-hover-hdr-con-font: rgba($content-text-color) !default;
+$acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
+$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
+$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;

package/styles/accordion/_tailwind-definition.scss

@@ -39,6 +39,7 @@ $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;
@@ -130,6 +131,7 @@ $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;

package/styles/accordion/_theme.scss

@@ -27,6 +27,12 @@
         border-radius: $acrdn-item-first-child-hdr-focus-border-radius;
       }
 
+      @if ($skin-name == 'Material3') {
+        &:first-child.e-selected.e-select > .e-acrdn-header:focus {
+          border-radius: $acrdn-item-first-child-hdr-focus-border-radius;
+        }
+      }
+
       &:last-child {
         border-bottom: $acrdn-item-last-child-border-bottom;
 
@@ -169,6 +175,7 @@
           color: $acrdn-content-color;
           background: $acrdn-item-panel-content-select-bg;
           border-top: $acrdn-item-panel-content-select-border-top;
+          border-bottom: $acrdn-item-panel-content-select-border-bottom;
         }
       }
 
@@ -327,6 +334,8 @@
 
           &:focus {
             box-shadow: $acrdn-item-header-focus-box-shadow;
+            position: relative;
+            z-index: 2;
           }
         }
 

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;