@syncfusion/ej2-navigations 21.2.8 → 22.1.34

package/src/menu/menu.d.ts

@@ -41,8 +41,9 @@ export declare class Menu extends MenuBase implements INotifyPropertyChanged {
      * Specifies the template for Menu item.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Specifies whether to enable / disable the scrollable option in Menu.
      *

package/src/menu/menu.js

@@ -71,7 +71,7 @@ var Menu = /** @class */ (function (_super) {
         this.element.id = this.element.id || getUniqueID('ej2-menu');
         if (this.template) {
             try {
-                if (document.querySelectorAll(this.template).length) {
+                if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {
                     this.template = document.querySelector(this.template).innerHTML.trim();
                     this.clearChanges();
                 }

package/src/sidebar/sidebar.d.ts

@@ -3,36 +3,22 @@ import { EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
 import { SidebarModel } from './sidebar-model';
 /**
  * Specifies the Sidebar types.
+ * ```props
+ * Slide :- Specifies the animation sliding while opening the sidebar.
+ * Over :- Specifies the sidebar appearing over the main content.
+ * Push :- Specifies the sidebar pushing the main content.
+ * Auto :- Specifies that the sidebar opens automatically.
+ * ```
  */
-export declare type SidebarType = 
-/**
-* Specifies the animation sliding while opening the sidebar.
-*/
-'Slide' | 
-/**
-* Specifies the sidebar appearing over the main content.
-*/
-'Over' | 
-/**
-* Specifies the sidebar pushing the main content.
-*/
-'Push' | 
-/**
-* Specifies that the sidebar opens automatically.
-*/
-'Auto';
+export declare type SidebarType = 'Slide' | 'Over' | 'Push' | 'Auto';
 /**
  * Specifies the Sidebar positions.
+ * ```props
+ * Left :- Sidebar positions to the Left in relation to the main content.
+ * Right :- Sidebar positions to the Right in relation to the main content.
+ * ```
  */
-export declare type SidebarPosition = 
-/**
-* Sidebar positions to the Left in relation to the main content.
-*/
-'Left' | 
-/**
-* Sidebar positions to the Right in relation to the main content.
-*/
-'Right';
+export declare type SidebarPosition = 'Left' | 'Right';
 /**
  * Sidebar is an expandable or collapsible
  * component that typically act as a side container to place the primary or secondary content alongside of the main content.

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

@@ -101,15 +101,16 @@ export interface TabItemModel {
      * Specifies the header text of Tab item.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
 
     /**
      * Specifies the content of Tab item, that is displayed when concern item header is selected.
      *
      * @default ''
      */
-    content?: string | HTMLElement;
+    content?: string | HTMLElement | Function;
 
     /**
      * Sets the CSS classes to the Tab item to customize its styles.

package/src/tab/tab.d.ts

@@ -180,14 +180,15 @@ export declare class TabItem extends ChildProperty<TabItem> {
      * Specifies the header text of Tab item.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * Specifies the content of Tab item, that is displayed when concern item header is selected.
      *
      * @default ''
      */
-    content: string | HTMLElement;
+    content: string | HTMLElement | Function;
     /**
      * Sets the CSS classes to the Tab item to customize its styles.
      *

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

@@ -91,8 +91,9 @@ export interface ItemModel {
      * ```
      *
      * @default ""
+     * @aspType string
      */
-    template?: string | Object;
+    template?: string | Object | Function;
 
     /**
      * Specifies the types of command to be rendered in the Toolbar.
@@ -154,6 +155,7 @@ export interface ItemModel {
      * ```
      *
      * @default "Left"
+     * @aspPopulateDefaultValue
      */
     align?: ItemAlign;
 

package/src/toolbar/toolbar.d.ts

@@ -143,8 +143,9 @@ export declare class Item extends ChildProperty<Item> {
      * ```
      *
      * @default ""
+     * @aspType string
      */
-    template: string | Object;
+    template: string | Object | Function;
     /**
      * Specifies the types of command to be rendered in the Toolbar.
      * Supported types are:
@@ -203,6 +204,7 @@ export declare class Item extends ChildProperty<Item> {
      * ```
      *
      * @default "Left"
+     * @aspPopulateDefaultValue
      */
     align: ItemAlign;
     /**
@@ -389,6 +391,8 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
      */
     disable(value: boolean): void;
     private eleContains;
+    private focusFirstVisibleEle;
+    private focusLastVisibleEle;
     private eleFocus;
     private clickHandler;
     private popupClickHandler;

package/src/toolbar/toolbar.js

@@ -411,20 +411,20 @@ var Toolbar = /** @class */ (function (_super) {
                         if (isVisible(this.popObj.element)) {
                             nodes = [].slice.call(popupCheck.children);
                             if (e.action === 'home') {
-                                ele = nodes[0];
+                                ele = this.focusFirstVisibleEle(nodes);
                             }
                             else {
-                                ele = nodes[nodes.length - 1];
+                                ele = this.focusLastVisibleEle(nodes);
                             }
                         }
                     }
                     else {
                         nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
                         if (e.action === 'home') {
-                            ele = nodes[0];
+                            ele = this.focusFirstVisibleEle(nodes);
                         }
                         else {
-                            ele = nodes[nodes.length - 1];
+                            ele = this.focusLastVisibleEle(nodes);
                         }
                     }
                     if (ele) {
@@ -538,6 +538,30 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.eleContains = function (el) {
         return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
     };
+    Toolbar.prototype.focusFirstVisibleEle = function (nodes) {
+        var element;
+        var index = 0;
+        while (index < nodes.length) {
+            var ele = nodes[parseInt(index.toString(), 10)];
+            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
+                return ele;
+            }
+            index++;
+        }
+        return element;
+    };
+    Toolbar.prototype.focusLastVisibleEle = function (nodes) {
+        var element;
+        var index = nodes.length - 1;
+        while (index >= 0) {
+            var ele = nodes[parseInt(index.toString(), 10)];
+            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
+                return ele;
+            }
+            index--;
+        }
+        return element;
+    };
     Toolbar.prototype.eleFocus = function (closest, pos) {
         var sib = Object(closest)[pos + 'ElementSibling'];
         if (sib) {
@@ -1181,12 +1205,10 @@ var Toolbar = /** @class */ (function (_super) {
             if (checkoffset) {
                 if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {
                     if (this.overflowMode === 'Extended') {
-                        if (itemCount === itemPopCount) {
-                            var sepEle = inEle[parseInt(i.toString(), 10)];
-                            if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
-                                inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
-                                itemPopCount++;
-                            }
+                        var sepEle = inEle[parseInt(i.toString(), 10)];
+                        if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {
+                            inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);
+                            itemPopCount++;
                         }
                         itemCount++;
                     }
@@ -2150,10 +2172,7 @@ var Toolbar = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     setStyle(tEle, { 'width': formatUnit(newProp.width) });
-                    this.renderOverflowMode();
-                    if (this.popObj && wid < tEle.offsetWidth) {
-                        this.popupRefresh(this.popObj.element, false);
-                    }
+                    this.refreshOverflow();
                     break;
                 case 'height':
                     setStyle(this.element, { 'height': formatUnit(newProp.height) });

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

@@ -395,8 +395,11 @@ export interface TreeViewModel extends ComponentModel{
      * [Template](../../treeview/template/).
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      */
-    nodeTemplate?: string;
+    nodeTemplate?: string | Function;
 
     /**
      * Represents the selected nodes in the TreeView component. We can set the nodes that need to be

package/src/treeview/treeview.d.ts

@@ -413,40 +413,23 @@ export declare class FieldsSettings extends ChildProperty<FieldsSettings> {
 }
 /**
  * Defines the expand type of the TreeView node.
+ * ```props
+ * Auto :- The expand/collapse operation happens when you double-click on the node in desktop.
+ * Click :- The expand/collapse operation happens when you single-click on the node in desktop.
+ * DblClick :- The expand/collapse operation happens when you double-click on the node in desktop.
+ * None :- The expand/collapse operation will not happen.
+ * ```
  */
-export declare type ExpandOnSettings = 
-/**
-* The expand/collapse operation happens when you double-click on the node in desktop.
-*/
-'Auto' | 
-/**
-* The expand/collapse operation happens when you single-click on the node in desktop.
-*/
-'Click' | 
-/**
-* The expand/collapse operation happens when you double-click on the node in desktop.
-*/
-'DblClick' | 
-/**
-* The expand/collapse operation will not happen.
-*/
-'None';
+export declare type ExpandOnSettings = 'Auto' | 'Click' | 'DblClick' | 'None';
 /**
  * Defines the sorting order type for TreeView.
+ * ```props
+ * None :- Indicates that the nodes are not sorted.
+ * Ascending :- Indicates that the nodes are sorted in the ascending order.
+ * Descending :- Indicates that the nodes are sorted in the descending order
+ * ```
  */
-export declare type SortOrder = 
-/**
-* Indicates that the nodes are sorted in the ascending order.
-*/
-'Ascending' | 
-/**
-*  Indicates that the nodes are sorted in the descending order
-*/
-'Descending' | 
-/**
-* Indicates that the nodes are not sorted.
-*/
-'None';
+export declare type SortOrder = 'None' | 'Ascending' | 'Descending';
 /**
  * Configures animation settings for the TreeView component.
  */
@@ -786,8 +769,11 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * [Template](../../treeview/template/).
      *
      * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
      */
-    nodeTemplate: string;
+    nodeTemplate: string | Function;
     /**
      * Represents the selected nodes in the TreeView component. We can set the nodes that need to be
      * selected or get the ID of the nodes that are currently selected by using this property.

package/src/treeview/treeview.js

@@ -391,7 +391,7 @@ var TreeView = /** @class */ (function (_super) {
             var e = void 0;
             this.element.classList.add(INTERACTION);
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
                 else {

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

@@ -40,6 +40,7 @@ $acrdn-opacity: .5 !default;
 $acrdn-nrml-header-padding: 0 30px 0 15px !default;
 $acrdn-bgr-header-padding: 0 30px 0 15px !default;
 $acrdn-nest-nrml-header-padding: 0 30px !default;
+$acrdn-nested-item-header-focus-box-shadow: none !default;
 $acrdn-nest-bgr-header-padding: 0 30px !default;
 $acrdn-nest-second-nrml-header-padding: 0 30px 0 45px !default;
 $acrdn-nest-second-bgr-header-padding: 0 30px 0 45px !default;
@@ -126,6 +127,7 @@ $acrdn-item-select-border-color: $grey-99 !default;
 $acrdn-item-select-border-size: 1px !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: transparent !default;
 $acrdn-item-header-hover-border-color: initial !default;
@@ -157,7 +159,7 @@ $acrdn-item-selected-hdr-border-size: 0 0 1px 0 !default;
 $acrdn-item-selected-header-border-radius: 0 !default;
 $acrdn-item-selected-hdr-con-font: $acrdn-header-font !default;
 $acrdn-item-selected-select-border-color: $grey-99 !default;
-$acrdn-item-selected-select-border-size: 1px 0 1px 0 !default;
+$acrdn-item-selected-select-border-size: 1px !default;
 $acrdn-item-selected-hdr-icon-font: $acrdn-header-font !default;
 $acrdn-item-selected-exp-hdr-con-hover-color: $grey-dark-font !default;
 $acrdn-item-selected-exp-hdr-icon-hover-color: $grey-dark-font !default;

package/styles/accordion/_bootstrap-definition.scss

@@ -58,6 +58,7 @@ $acrdn-rtl-nest-nrml-header-padding: 0 30px !default;
 $acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
 $acrdn-rtl-nest-second-nrml-header-padding: 0  45px 0 30px !default;
 $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
+$acrdn-nested-item-header-focus-box-shadow: none !default;
 
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
@@ -131,6 +132,7 @@ $acrdn-item-select-border-color: $grey-dd !default;
 $acrdn-item-select-border-size: 1px !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: transparent !default;
 $acrdn-item-header-hover-border-color: initial !default;
@@ -162,7 +164,7 @@ $acrdn-item-selected-hdr-border-size: 0 0 1px 0 !default;
 $acrdn-item-selected-header-border-radius: 0 !default;
 $acrdn-item-selected-hdr-con-font: $gray-dark !default;
 $acrdn-item-selected-select-border-color: $grey-dd !default;
-$acrdn-item-selected-select-border-size: 1px 0 1px 0 !default;
+$acrdn-item-selected-select-border-size: 1px !default;
 $acrdn-item-selected-hdr-icon-font: $gray-dark !default;
 $acrdn-item-selected-exp-hdr-con-hover-color: $gray-dark !default;
 $acrdn-item-selected-exp-hdr-icon-hover-color: $gray-dark !default;

package/styles/accordion/_bootstrap4-definition.scss

@@ -52,6 +52,7 @@ $acrdn-rtl-nest-nrml-header-padding: 0 30px !default;
 $acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
 $acrdn-rtl-nest-second-nrml-header-padding: 0  45px 0 30px !default;
 $acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
+$acrdn-nested-item-header-focus-box-shadow: none !default;
 
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 16px !default;
@@ -134,6 +135,7 @@ $acrdn-item-select-bg: none !default;
 $acrdn-item-select-border-color: $acrdn-default-border !default;
 $acrdn-item-select-border-size: 0 0 1px 0 !default;
 $acrdn-item-panel-content-select-border-top: 1px solid $acrdn-default-border !default;
+$acrdn-item-panel-content-select-border-bottom: 0 !default;
 $acrdn-item-header-hover-border: 0 !default;
 $acrdn-item-header-hover-bg: $gray-100 !default;
 $acrdn-item-header-hover-border-color: initial !default;

package/styles/accordion/_bootstrap5-definition.scss

@@ -21,7 +21,7 @@ $acrdn-icon-font-size: $text-lg !default;
 $acrdn-selected-header-font-color: $primary !default;
 
 // Header, Nested header and RTL mode Padding
-$acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
+$acrdn-nest-nrml-header-padding: 10px 0 10px 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;
@@ -33,6 +33,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: inset $shadow-focus-ring1 !default;
 
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 12px !default;
@@ -134,6 +135,7 @@ $acrdn-item-select-border-color: $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: none !default;
 $acrdn-item-header-hover-border-color: initial !default;

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

@@ -64,6 +64,7 @@ $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-nested-item-header-focus-box-shadow: none !default;
 
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 14px !default;
@@ -129,6 +130,7 @@ $acrdn-item-select-border-color: $neutral-white !default;
 $acrdn-item-select-border-size: 1px 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: 1px solid $neutral-light !default;
 $acrdn-item-header-hover-bg: $neutral-light !default;
 $acrdn-item-header-hover-border-color: $neutral-light !default;

package/styles/accordion/_fabric-definition.scss

@@ -134,6 +134,7 @@ $acrdn-item-select-border-color: $neutral-white !default;
 $acrdn-item-select-border-size: 1px 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: 1px solid $neutral-lighter !default;
 $acrdn-item-header-hover-bg: $neutral-lighter !default;
 $acrdn-item-header-hover-border-color: $neutral-lighter !default;
@@ -178,5 +179,6 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $neutral-light-font !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: $theme-lighter !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 1px solid $acrdn-item-exp-hdr-focus-border-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-item-exp-hdr-focus-border-color !default;
+$acrdn-nested-item-header-focus-box-shadow: none !default;
 
 //enddefault

package/styles/accordion/_fluent-definition.scss

@@ -40,6 +40,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;
@@ -131,6 +132,7 @@ $acrdn-item-select-border-color: $acrdn-selected-border-color !default;
 $acrdn-item-select-border-size: 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: 1px solid $border-light !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;

package/styles/accordion/_fusionnew-definition.scss

@@ -33,6 +33,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;
@@ -134,6 +135,7 @@ $acrdn-item-select-border-color: $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: none !default;
 $acrdn-item-header-hover-border-color: initial !default;

package/styles/accordion/_highcontrast-definition.scss

@@ -52,6 +52,7 @@ $acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px !default;
 $acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
 $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-nested-item-header-focus-box-shadow: none !default;
 
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
@@ -158,6 +159,7 @@ $acrdn-item-select-border-color: $acrdn-selected-border-color !default;
 $acrdn-item-select-border-size: 0 !default;
 $acrdn-item-panel-content-select-bg: $bg-base-0 !default;
 $acrdn-item-panel-content-select-border-top: 0 !default;
+$acrdn-item-panel-content-select-border-bottom: 0 !default;
 $acrdn-item-header-hover-border: 1px solid $bg-base-0 !default;
 $acrdn-item-header-hover-bg: $hover-bg !default;
 $acrdn-item-header-hover-border-color: $acrdn-focus-exp-hdr-focus-border-color !default;

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

@@ -80,6 +80,7 @@ $acrdn-rtl-nest-nrml-header-padding: 0 24px 0 42px !default;
 $acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
 $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-nested-item-header-focus-box-shadow: none !default;
 
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 15px !default;
@@ -156,6 +157,7 @@ $acrdn-item-select-border-color: $acrdn-selected-border-color !default;
 $acrdn-item-select-border-size: 0 !default;
 $acrdn-item-panel-content-select-bg: $bg-base-0 !default;
 $acrdn-item-panel-content-select-border-top: 0 !default;
+$acrdn-item-panel-content-select-border-bottom: 0 !default;
 $acrdn-item-header-hover-border: 1px solid $bg-base-0 !default;
 $acrdn-item-header-hover-bg: $hover-bg !default;
 $acrdn-item-header-hover-border-color: $acrdn-focus-exp-hdr-focus-border-color !default;

package/styles/accordion/_layout.scss

@@ -24,6 +24,7 @@
           }
 
           > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            box-shadow: none;
             padding: $acrdn-nest-bgr-header-padding;
           }
 
@@ -136,6 +137,10 @@
       border-radius: $acrdn-item-border-radius;
       margin-top: $acrdn-item-margin-top;
 
+      &:first-child {
+        margin-top: 0;
+      }
+      
       &:not(.e-select) + .e-acrdn-item:not(.e-select) {
         margin-bottom: 0;
         margin-top: 0;
@@ -255,6 +260,10 @@
 
           > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
             padding: $acrdn-nest-nrml-header-padding;
+
+            &:focus {
+              box-shadow: $acrdn-nested-item-header-focus-box-shadow;
+            }
           }
 
           > .e-acrdn-content {

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

@@ -46,6 +46,7 @@ $acrdn-rtl-nest-nrml-header-padding: 0 32px 0 40px !default;
 $acrdn-rtl-nest-bgr-header-padding: 0 32px 0 46px !default;
 $acrdn-rtl-nest-second-nrml-header-padding: 0 48px 0 40px !default;
 $acrdn-rtl-nest-second-bgr-header-padding: 0 48px 0 46px !default;
+$acrdn-nested-item-header-focus-box-shadow: none !default;
 
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 16px !default;
@@ -132,6 +133,7 @@ $acrdn-item-select-border-color: transparent !default;
 $acrdn-item-select-border-size: 1px 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: $acrdn-header-hover-bg !default;
 $acrdn-item-header-hover-border-color: initial !default;

package/styles/accordion/_material-definition.scss

@@ -41,6 +41,7 @@ $acrdn-rtl-nest-nrml-header-padding: 0 32px 0 40px !default;
 $acrdn-rtl-nest-bgr-header-padding: 0 32px 0 46px !default;
 $acrdn-rtl-nest-second-nrml-header-padding: 0 48px 0 40px !default;
 $acrdn-rtl-nest-second-bgr-header-padding: 0 48px 0 46px !default;
+$acrdn-nested-item-header-focus-box-shadow: none !default;
 
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 16px !default;
@@ -128,6 +129,7 @@ $acrdn-item-select-border-color: transparent !default;
 $acrdn-item-select-border-size: 1px 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: transparent !default;
 $acrdn-item-header-hover-border-color: initial !default;

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

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