@syncfusion/ej2-lists - npm Package Compare versions

Comparing version 31.2.12 to 32.1.19

aceconfig.js

+//Config file for Accessibility-Checker
+module.exports = {
+    ruleArchive: "18March2024",
+    policies: ["WCAG_2_1","IBM_Accessibility"],
+    failLevels: ["violation", "potentialviolation"],
+    reportLevels: [
+        "violation",
+        "potentialviolation",
+        "recommendation",
+        "potentialrecommendation",
+        "manual",
+        "pass",
+    ],
+    outputFormat: ["html","json"],
+    label: [process.env.TRAVIS_BRANCH],
+    outputFolder:"accessibility-reports",
+  };

styles/list-view/_theme-variables.scss

+@forward './_tailwind3-definition';

styles/sortable/_theme-variables.scss

+@forward './_tailwind3-definition';

dist/global/index.d.ts

@@ -1,10 +0,1 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.12
-*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  [e-mail]. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _lists from '@syncfusion/ej2-lists';
@@ -11,0 +2,0 @@

package.json

 {
   "name": "@syncfusion/ej2-lists",
-  "version": "31.2.12",
+  "version": "32.1.19",
   "description": "The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.",
@@ -11,6 +11,6 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.12",
-    "@syncfusion/ej2-buttons": "~31.2.12",
-    "@syncfusion/ej2-data": "~31.2.12",
-    "@syncfusion/ej2-popups": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-data": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19"
   },
@@ -17,0 +17,0 @@ "devDependencies": {},

src/common/list-base.js

@@ -990,4 +990,4 @@ /* eslint-disable no-inner-declarations */
         else if (!grpLI && options && options.template) {
-            var compiledString = compileTemplate(options.template);
             if (componentInstance && componentInstance.getModuleName() !== 'listview') {
+                var compiledString = compileTemplate(options.template);
                 var compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);
@@ -999,3 +999,10 @@ if (compiledElement) {
             else {
-                append(compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate), li);
+                // For spreadsheet comment templates, call the template function directly instead of relying on compiled string.
+                if (componentInstance && componentInstance.isInternalTemplate) {
+                    append(options.template(item), li);
+                }
+                else {
+                    var compiledString = compileTemplate(options.template);
+                    append(compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate), li);
+                }
             }
@@ -1002,0 +1009,0 @@ }

styles/bds-lite.scss

@@ -1,7 +0,6 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'list-view/bds-definition.scss';
-@import 'list-view/icons/bds.scss';
-@import 'list-view/all.scss';
-@import 'sortable/bds-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'list-view/bds-definition' as *;
+@use 'list-view/icons/bds' as *;
+@use 'list-view/all' as *;
+@use 'sortable/bds-definition' as *;
+@use 'sortable/all' as *;

styles/bds.css

@@ -502,3 +502,3 @@
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -510,3 +510,3 @@ margin-right: 5px;
   font-size: 24px;
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -513,0 +513,0 @@ }

styles/bds.scss

@@ -1,8 +0,7 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'list-view/bds-definition.scss';
-@import 'list-view/icons/bds.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/bds-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'list-view/bds-definition' as *;
+@use 'list-view/icons/bds' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/bds-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap-dark-lite.scss

@@ -1,7 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
-@import 'list-view/bootstrap-dark-definition.scss';
-@import 'list-view/icons/bootstrap-dark.scss';
-@import 'list-view/all.scss';
-@import 'sortable/bootstrap-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
+@use 'list-view/bootstrap-dark-definition' as *;
+@use 'list-view/icons/bootstrap-dark' as *;
+@use 'list-view/all' as *;
+@use 'sortable/bootstrap-dark-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap-dark.scss

@@ -1,8 +0,7 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
-@import 'list-view/bootstrap-dark-definition.scss';
-@import 'list-view/icons/bootstrap-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/bootstrap-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
+@use 'list-view/bootstrap-dark-definition' as *;
+@use 'list-view/icons/bootstrap-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/bootstrap-dark-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap-lite.scss

@@ -1,7 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
-@import 'list-view/bootstrap-definition.scss';
-@import 'list-view/icons/bootstrap.scss';
-@import 'list-view/all.scss';
-@import 'sortable/bootstrap-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap-definition' as *;
+@use 'list-view/bootstrap-definition' as *;
+@use 'list-view/icons/bootstrap' as *;
+@use 'list-view/all' as *;
+@use 'sortable/bootstrap-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap.scss

@@ -1,8 +0,7 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
-@import 'list-view/bootstrap-definition.scss';
-@import 'list-view/icons/bootstrap.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/bootstrap-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap-definition' as *;
+@use 'list-view/bootstrap-definition' as *;
+@use 'list-view/icons/bootstrap' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/bootstrap-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap4-lite.scss

@@ -1,7 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
-@import 'list-view/bootstrap4-definition.scss';
-@import 'list-view/icons/bootstrap4.scss';
-@import 'list-view/all.scss';
-@import 'sortable/bootstrap4-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap4-definition' as *;
+@use 'list-view/bootstrap4-definition' as *;
+@use 'list-view/icons/bootstrap4' as *;
+@use 'list-view/all' as *;
+@use 'sortable/bootstrap4-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap4.scss

@@ -1,8 +0,7 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
-@import 'list-view/bootstrap4-definition.scss';
-@import 'list-view/icons/bootstrap4.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/bootstrap4-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap4-definition' as *;
+@use 'list-view/bootstrap4-definition' as *;
+@use 'list-view/icons/bootstrap4' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/bootstrap4-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap5-dark-lite.css

@@ -426,3 +426,2 @@ .e-icon-collapsible::before {
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -429,0 +428,0 @@ outline: none;

styles/bootstrap5-dark-lite.scss

@@ -1,7 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
-@import 'list-view/bootstrap5-dark-definition.scss';
-@import 'list-view/icons/bootstrap5-dark.scss';
-@import 'list-view/all.scss';
-@import 'sortable/bootstrap5-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap5-dark-definition' as *;
+@use 'list-view/bootstrap5-dark-definition' as *;
+@use 'list-view/icons/bootstrap5-dark' as *;
+@use 'list-view/all' as *;
+@use 'sortable/bootstrap5-dark-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap5-dark.css

@@ -474,3 +474,2 @@ .e-icon-collapsible::before {
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -477,0 +476,0 @@ outline: none;

styles/bootstrap5-dark.scss

@@ -1,8 +0,7 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
-@import 'list-view/bootstrap5-dark-definition.scss';
-@import 'list-view/icons/bootstrap5-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/bootstrap5-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/bootstrap5-dark-definition' as *;
+@use 'list-view/bootstrap5-dark-definition' as *;
+@use 'list-view/icons/bootstrap5-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/bootstrap5-dark-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap5-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
-@import 'list-view/bootstrap5-definition.scss';
-@import 'list-view/icons/bootstrap5.scss';
-@import 'list-view/all.scss';
-@import 'sortable/bootstrap5-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5-definition' as *;
+@use 'list-view/bootstrap5-definition' as *;
+@use 'list-view/icons/bootstrap5' as *;
+@use 'list-view/all' as *;
+@use 'sortable/bootstrap5-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap5.3-lite.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-icon-collapsible::before {
@@ -19,3 +99,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -214,3 +294,3 @@ overflow: auto;
 .e-listview.e-rtl .e-checkbox .e-checkbox-left {
-  margin: -2px 0 0 8px;
+  margin: -2px 0 0 8;
 }
@@ -231,3 +311,3 @@ .e-listview.e-rtl .e-checkbox .e-checkbox-right {
   border-color: var(--color-sf-border-light);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -234,0 +314,0 @@ }

styles/bootstrap5.3-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5.3-definition.scss';
-@import 'list-view/bootstrap5.3-definition.scss';
-@import 'list-view/icons/bootstrap5.3.scss';
-@import 'list-view/all.scss';
-@import 'sortable/bootstrap5.3-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5.3-definition' as *;
+@use 'list-view/bootstrap5.3-definition' as *;
+@use 'list-view/icons/bootstrap5.3' as *;
+@use 'list-view/all' as *;
+@use 'sortable/bootstrap5.3-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap5.3.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-icon-collapsible::before {
@@ -19,3 +99,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -214,3 +294,3 @@ overflow: auto;
 .e-listview.e-rtl .e-checkbox .e-checkbox-left {
-  margin: -2px 0 0 8px;
+  margin: -2px 0 0 8;
 }
@@ -231,3 +311,3 @@ .e-listview.e-rtl .e-checkbox .e-checkbox-right {
   border-color: var(--color-sf-border-light);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -234,0 +314,0 @@ }

styles/bootstrap5.3.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5.3-definition.scss';
-@import 'list-view/bootstrap5.3-definition.scss';
-@import 'list-view/icons/bootstrap5.3.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/bootstrap5.3-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5.3-definition' as *;
+@use 'list-view/bootstrap5.3-definition' as *;
+@use 'list-view/icons/bootstrap5.3' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/bootstrap5.3-definition' as *;
+@use 'sortable/all' as *;

styles/bootstrap5.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
-@import 'list-view/bootstrap5-definition.scss';
-@import 'list-view/icons/bootstrap5.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/bootstrap5-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5-definition' as *;
+@use 'list-view/bootstrap5-definition' as *;
+@use 'list-view/icons/bootstrap5' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/bootstrap5-definition' as *;
+@use 'sortable/all' as *;

styles/fabric-dark-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-buttons/styles/check-box/fabric-dark-definition.scss';
-@import 'list-view/fabric-dark-definition.scss';
-@import 'list-view/icons/fabric-dark.scss';
-@import 'list-view/all.scss';
-@import 'sortable/fabric-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/check-box/fabric-dark-definition' as *;
+@use 'list-view/fabric-dark-definition' as *;
+@use 'list-view/icons/fabric-dark' as *;
+@use 'list-view/all' as *;
+@use 'sortable/fabric-dark-definition' as *;
+@use 'sortable/all' as *;

styles/fabric-dark.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-buttons/styles/check-box/fabric-dark-definition.scss';
-@import 'list-view/fabric-dark-definition.scss';
-@import 'list-view/icons/fabric-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fabric-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/check-box/fabric-dark-definition' as *;
+@use 'list-view/fabric-dark-definition' as *;
+@use 'list-view/icons/fabric-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fabric-dark-definition' as *;
+@use 'sortable/all' as *;

styles/fabric-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-buttons/styles/check-box/fabric-definition.scss';
-@import 'list-view/fabric-definition.scss';
-@import 'list-view/icons/fabric.scss';
-@import 'list-view/all.scss';
-@import 'sortable/fabric-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/check-box/fabric-definition' as *;
+@use 'list-view/fabric-definition' as *;
+@use 'list-view/icons/fabric' as *;
+@use 'list-view/all' as *;
+@use 'sortable/fabric-definition' as *;
+@use 'sortable/all' as *;

styles/fabric.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-buttons/styles/check-box/fabric-definition.scss';
-@import 'list-view/fabric-definition.scss';
-@import 'list-view/icons/fabric.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fabric-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/check-box/fabric-definition' as *;
+@use 'list-view/fabric-definition' as *;
+@use 'list-view/icons/fabric' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fabric-definition' as *;
+@use 'sortable/all' as *;

styles/fluent-dark-lite.css

@@ -414,3 +414,2 @@ .e-icon-collapsible::before {
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -417,0 +416,0 @@ outline: none;

styles/fluent-dark-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
-@import 'list-view/fluent-dark-definition.scss';
-@import 'list-view/icons/fluent-dark.scss';
-@import 'list-view/all.scss';
-@import 'sortable/fluent-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/check-box/fluent-dark-definition' as *;
+@use 'list-view/fluent-dark-definition' as *;
+@use 'list-view/icons/fluent-dark' as *;
+@use 'list-view/all' as *;
+@use 'sortable/fluent-dark-definition' as *;
+@use 'sortable/all' as *;

styles/fluent-dark.css

@@ -505,3 +505,2 @@ .e-icon-collapsible::before {
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -508,0 +507,0 @@ outline: none;

styles/fluent-dark.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
-@import 'list-view/fluent-dark-definition.scss';
-@import 'list-view/icons/fluent-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fluent-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/check-box/fluent-dark-definition' as *;
+@use 'list-view/fluent-dark-definition' as *;
+@use 'list-view/icons/fluent-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fluent-dark-definition' as *;
+@use 'sortable/all' as *;

styles/fluent-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'ej2-buttons/styles/check-box/fluent-definition.scss';
-@import 'list-view/fluent-definition.scss';
-@import 'list-view/icons/fluent.scss';
-@import 'list-view/all.scss';
-@import 'sortable/fluent-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/check-box/fluent-definition' as *;
+@use 'list-view/fluent-definition' as *;
+@use 'list-view/icons/fluent' as *;
+@use 'list-view/all' as *;
+@use 'sortable/fluent-definition' as *;
+@use 'sortable/all' as *;

styles/fluent.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'ej2-buttons/styles/check-box/fluent-definition.scss';
-@import 'list-view/fluent-definition.scss';
-@import 'list-view/icons/fluent.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fluent-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/check-box/fluent-definition' as *;
+@use 'list-view/fluent-definition' as *;
+@use 'list-view/icons/fluent' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fluent-definition' as *;
+@use 'sortable/all' as *;

styles/fluent2-lite.css

@@ -7,2 +7,82 @@
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 .e-icon-collapsible::before {
@@ -23,3 +103,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -38,3 +118,3 @@ overflow: auto;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   margin: 4px;
@@ -240,3 +320,3 @@ padding: 0;
   border-color: var(--color-sf-border-light);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -363,3 +443,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -366,0 +446,0 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {

styles/fluent2-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'ej2-buttons/styles/check-box/fluent2-definition.scss';
-@import 'list-view/fluent2-definition.scss';
-@import 'list-view/icons/fluent2.scss';
-@import 'list-view/all.scss';
-@import 'sortable/fluent2-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/check-box/fluent2-definition' as *;
+@use 'list-view/fluent2-definition' as *;
+@use 'list-view/icons/fluent2' as *;
+@use 'list-view/all' as *;
+@use 'sortable/fluent2-definition' as *;
+@use 'sortable/all' as *;

styles/fluent2.css

@@ -7,2 +7,82 @@
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 .e-icon-collapsible::before {
@@ -23,3 +103,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -38,3 +118,3 @@ overflow: auto;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   margin: 4px;
@@ -240,3 +320,3 @@ padding: 0;
   border-color: var(--color-sf-border-light);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -363,3 +443,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -453,3 +533,3 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   display: flex;
-  font-weight: 600;
+  font-weight: 500;
   height: 38px;
@@ -469,3 +549,3 @@ }
 .e-listview.e-bigger .e-icon-collapsible {
-  font-size: 14px;
+  font-size: 12px;
 }
@@ -472,0 +552,0 @@ .e-bigger .e-listview .e-icon-collapsible::before,

styles/fluent2.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'ej2-buttons/styles/check-box/fluent2-definition.scss';
-@import 'list-view/fluent2-definition.scss';
-@import 'list-view/icons/fluent2.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/fluent2-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/check-box/fluent2-definition' as *;
+@use 'list-view/fluent2-definition' as *;
+@use 'list-view/icons/fluent2' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/fluent2-definition' as *;
+@use 'sortable/all' as *;

styles/highcontrast-light-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-light-definition.scss';
-@import 'list-view/highcontrast-light-definition.scss';
-@import 'list-view/icons/highcontrast-light.scss';
-@import 'list-view/all.scss';
-@import 'sortable/highcontrast-light-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-light-definition' as *;
+@use 'list-view/highcontrast-light-definition' as *;
+@use 'list-view/icons/highcontrast-light' as *;
+@use 'list-view/all' as *;
+@use 'sortable/highcontrast-light-definition' as *;
+@use 'sortable/all' as *;

styles/highcontrast-light.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-light-definition.scss';
-@import 'list-view/highcontrast-light-definition.scss';
-@import 'list-view/icons/highcontrast-light.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/highcontrast-light-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-light-definition' as *;
+@use 'list-view/highcontrast-light-definition' as *;
+@use 'list-view/icons/highcontrast-light' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/highcontrast-light-definition' as *;
+@use 'sortable/all' as *;

styles/highcontrast-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
-@import 'list-view/highcontrast-definition.scss';
-@import 'list-view/icons/highcontrast.scss';
-@import 'list-view/all.scss';
-@import 'sortable/highcontrast-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-definition' as *;
+@use 'list-view/highcontrast-definition' as *;
+@use 'list-view/icons/highcontrast' as *;
+@use 'list-view/all' as *;
+@use 'sortable/highcontrast-definition' as *;
+@use 'sortable/all' as *;

styles/highcontrast.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
-@import 'list-view/highcontrast-definition.scss';
-@import 'list-view/icons/highcontrast.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/highcontrast-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-definition' as *;
+@use 'list-view/highcontrast-definition' as *;
+@use 'list-view/icons/highcontrast' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/highcontrast-definition' as *;
+@use 'sortable/all' as *;

styles/list-view/_all.scss

@@ -1,2 +0,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

styles/list-view/_bds-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 //layout
@@ -11,2 +14,3 @@ $listview-icon-margin-right: 2px !default;
 $listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
 $listview-header-text-padding: 12px !default;
@@ -55,2 +59,21 @@ $listview-header-font-size: $text-xs !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: 10px !default;
 
@@ -95,2 +118,3 @@ //ListView In-built template variables
 $listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
 
@@ -97,0 +121,0 @@ //color

styles/list-view/_bigger.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin list-style($height, $line-height, $position) {
@@ -113,3 +115,3 @@ height: $height;
       @if ($skin-name == 'tailwind3') {
-        padding-top: 9px;
+        padding-top: $listview-touch-group-item-padding-top;
       }
@@ -135,3 +137,3 @@
       @if ($skin-name == 'tailwind3') {
-        padding: 0 16px;
+        padding: $listview-touch-list-header-padding-top;
       }
@@ -159,3 +161,3 @@
       @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
-        @include size($listview-touch-item-size, $listview-touch-item-size);
+        @include size($listview-touch-item-height, $listview-touch-item-size);
         margin-right: $listview-touch-icon-margin-right;
@@ -167,9 +169,9 @@ }
       @if ($skin-name == 'bootstrap4') {
-        font-size: 12px;
+        font-size: $listview-icon-collapsible-font-size;
       }
       @else if $skin-name == 'fluent2' {
-        font-size: 14px;
+        font-size: $listview-icon-collapsible-font-size;
 
         &::before {
-          padding: 5px;
+          padding: $listview-icon-collapsible-before-padding;
         }
@@ -179,6 +181,6 @@ }
         font-size: $listview-touch-item-size;
-        @include size($listview-touch-item-size, $listview-touch-item-size);
+        @include size($listview-touch-item-height, $listview-touch-item-size);
       }
       @if ($skin-name == 'tailwind3') {
-        font-size: 22px;
+        font-size: $listview-touch-collapsible-icon-font-size;
       }
@@ -205,4 +207,4 @@ }
       @if $skin-name == 'tailwind3' {
-        margin: 10px 12px 10px 0;
-        @include size($listview-icon-size, $listview-icon-size);
+        margin: $listview-touch-back-icon-margin;
+        @include size($listview-icon-height, $listview-icon-size);
         &::before {
@@ -250,6 +252,6 @@ font-size: $listview-touch-back-icon-font-size;
         & .e-list-icon {
-          margin-right: 12px;
+          margin-right: $listview-rtl-touch-list-icon-margin-right;
         }
         & .e-icon-back {
-          margin: 0 12px;
+          margin: $listview-rtl-touch-back-icon-margin;
         }
@@ -286,4 +288,4 @@ }
           .e-avatar {
-            @include avatar-size($listview-touch-template-avatar-size, $listview-touch-template-avatar-size, -5px, $listview-template-avatar-left, null);
-            margin: 10px 10px 10px 0;
+            @include avatar-size($listview-touch-template-avatar-height, $listview-touch-template-avatar-size, -5px, $listview-template-avatar-left, null);
+            margin: $listview-touch-list-avatar-margin;
           }
@@ -304,3 +306,3 @@ }
           .e-list-content {
-            padding-top: 3px;
+            padding-top: $listview-touch-template-multiline-content-padding-top;
           }
@@ -307,0 +309,0 @@ }

styles/list-view/_bootstrap-dark-definition.scss

 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
@@ -83,2 +85,18 @@ //default
 $listview-rtl-checkbox-right-margin: -4px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -113,3 +131,4 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: .7142em !default;
+$listview-template-height: inherit !default;
 
 //enddefault

styles/list-view/_bootstrap-definition.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $listview-font-family: $font-family !default;
@@ -76,2 +78,18 @@ $listview-text-color: rgba($grey-light-font, 1) !default;
 $listview-rtl-checkbox-right-margin: -4px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -106,1 +124,2 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: .7142em !default;
+$listview-template-height: inherit !default;

styles/list-view/_bootstrap4-definition.scss

 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
@@ -86,2 +88,19 @@ $listview-font-family: $font-family !default;
 $listview-touch-rtl-checkbox-right-margin: 0 12px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-icon-collapsible-font-size: 12px !default;
+$listview-list-icon-size: 30px !default;
 
@@ -116,1 +135,2 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: .7142em !default;
+$listview-template-height: inherit !default;

styles/list-view/_bootstrap5-dark-definition.scss

@@ -1,1 +0,154 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+//layout
+$listview-icon-margin-right: 8px !default;
+$listview-icon-back-margin: 0 !default;
+$listview-rtl-icon-back-margin: 0 !default;
+$listview-item-height: 36px !default;
+$listview-item-line-height: 18px !default;
+$listview-item-padding: 7px 9px 7px 12px !default;
+$listview-rtl-item-padding: 7px 12px 7px 12px !default;
+$listview-header-padding: 6px 12px !default;
+$listview-back-icon-font-size: $text-xs !default;
+$listview-root-border-radius: 4px !default;
+$listview-nested-icon-collapsible: 12px !default;
+$listview-icon-size: 20px !default;
+$listview-header-text-padding: 12px !default;
+$listview-header-height: 36px !default;
+$listview-header-line-height: 18px !default;
+$listview-border-bottom: 1px !default;
+$listview-border-top: 0 !default;
+$listview-border-left: 0 !default;
+$listview-border-right: 0 !default;
+$listview-group-first-border-bottom: 1px !default;
+$listview-group-border-top: 0 !default;
+$listview-group-border-bottom: 1px !default;
+$listview-groupheader-item-height: 36px !default;
+$listview-groupheader-item-line-height: 20px !default;
+$listview-groupheader-font-size: $text-xs !default;
+$listview-border-size: 1px !default;
+$listview-font-size: $text-sm !default;
+$listview-back-padding-right: 8px !default;
+$listview-back-icon-size: 20px !default;
+$listview-touch-item-height: 40px !default;
+$listview-touch-item-line-height: 24px !default;
+$listview-touch-item-size: 24px !default;
+$listview-touch-item-padding: 16px 14px 12px 16px !default;
+$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
+$listview-touch-item-font-size: $text-base !default;
+$listview-touch-groupheader-height: 40px !default;
+$listview-touch-groupheader-line-height: 20px !default;
+$listview-touch-header-height: 40px !default;
+$listview-touch-header-font-weight: $font-weight-medium !default;
+$listview-touch-header-font-size: $text-sm !default;
+$listview-touch-header-line-height: 22px !default;
+$listview-touch-header-icon-margin-top: 2px !default;
+$listview-touch-icon-margin-right: 12px !default;
+$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
+$listview-touch-checkbox-left-margin: 0 12px 0 0 !default;
+$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
+$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
+$listview-checkbox-right-margin: -2px 0 0 8px !default;
+$listview-checkbox-left-margin: 0 8px 0 0 !default;
+$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
+$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: 10px !default;
+
+//ListView In-built template variables
+$listview-template-padding: 10px 16px !default;
+$listview-template-avatar-padding-right: 16px !default;
+$listview-template-avatar-padding-left: 68px !default;
+$listview-template-avatar-rightposition-padding-right: 68px !default;
+$listview-template-avatar-rightposition-padding-left: 16px !default;
+$listview-template-avatar-size: 40px !default;
+$listview-template-avatar-top: 0 !default;
+$listview-template-avatar-left: 0 !default;
+$listview-template-avatar-margin: 7px 16px 7px 12px !default;
+$listview-template-avatar-rightposition-right: 0 !default;
+$listview-template-badge-height: 18px !default;
+$listview-template-badge-width: 20px !default;
+$listview-template-badge-line-height: 16px !default;
+$listview-template-badge-font-size: $text-xxs !default;
+$listview-template-badge-right: 12px !default;
+$listview-template-avatar-badge-padding-right: 10px !default;
+$listview-template-avatar-badge-padding-left: 68px !default;
+$listview-template-badgewithoutavatar-padding-right: 10px !default;
+$listview-template-badgewithoutavatar-padding-left: 16px !default;
+$listview-template-item-padding: 8px 0 !default;
+$listview-template-multiline-header-padding: 0 !default;
+$listview-template-multiline-content-padding: 2px 0 0 0 !default;
+$listview-template-multiline-header-font-size: $text-sm !default;
+$listview-template-multiline-padding: 4px !default;
+$listview-template-multiline-content-font-size: $text-sm !default;
+$listview-template-multiline-avatar-top: 0 !default;
+$listview-touch-template-padding: 12px 16px !default;
+$listview-touch-template-multiline-padding: 7px !default;
+$listview-touch-template-avatar-padding-left: 88px !default;
+$listview-touch-template-avatar-size: 48px !default;
+$listview-touch-template-multiline-header-font-size: $text-base !default;
+$listview-touch-template-multiline-header-line-height: 24px !default;
+$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
+$listview-touch-template-badge-height: 20px !default;
+$listview-touch-template-badge-width: 34px !default;
+$listview-touch-template-badge-line-height: 18px !default;
+$listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
+
+//color
+$listview-font-family: $font-family !default;
+$listview-text-color: $content-text-color !default;
+$listview-text-disabled: $content-text-color-disabled !default;
+$listview-icon-color: $icon-color !default;
+$listview-icon-disabled: $icon-color-disabled !default;
+$listview-background: $transparent !default;
+$listview-line-color: $border-light !default;
+$listview-item-hover-bg: $content-bg-color-hover !default;
+$listview-text-hover-color: $content-text-color-hover !default;
+$listview-item-active-bg: $content-bg-color-selected !default;
+$listview-root-border-color: $border-light !default;
+$listview-text-active-color: $content-text-color-selected !default;
+$listview-header-text-color: $content-text-color-alt3 !default;
+$listview-header-text-disabled: $content-text-color-disabled !default;
+$listview-header-bg: transparent !default;
+$listview-header-icon-color: $icon-color !default;
+$listview-header-icon-disabled: $icon-color-disabled !default;
+$listview-header-border: $border-light !default;
+$listview-header-font-size: $text-xs !default;
+$listview-header-font-weight: $font-weight-medium !default;
+$listview-hover-border-color: $border-light !default;
+$listview-border-bottom-color: $border-light !default;
+$listview-border-top-color: transparent !default;
+$listview-border-right-color: transparent !default;
+$listview-border-left-color: transparent !default;
+$listview-groupheader-text-color: $content-text-color-alt3 !default;
+$listview-groupheader-bg: transparent !default;
+$listview-groupheader-icon: $icon-color !default;
+$listview-focused-collapsible-color: $content-text-color-selected !default;
+$listview-icon-hover: $icon-color-hover !default;
+$listview-icon-pressed: $icon-color-pressed !default;
+$checkmark-bgcolor: $content-bg-color !default;
+$checkmark-border-color: $content-bg-color !default;
+$checkmark-color: $primary !default;
+
+//ListView In-built template variables
+$listview-template-multiline-header-color: $content-text-color !default;
+$listview-template-multiline-content-color: $content-text-color-alt3 !default;
+$listview-template-focused-multiline-content-color: $content-text-color-selected !default;

styles/list-view/_bootstrap5-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 //layout
@@ -53,2 +56,20 @@ $listview-icon-margin-right: 8px !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: 10px !default;
 
@@ -93,2 +114,3 @@ //ListView In-built template variables
 $listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
 
@@ -95,0 +117,0 @@ //color

styles/list-view/_bootstrap5.3-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+
 //layout
@@ -11,3 +14,3 @@ $listview-icon-margin-right: 8px !default;
 $listview-back-icon-font-size: $text-xs !default;
-$listview-root-border-radius: 4px !default;
+$listview-root-border-radius: $radius-4 !default;
 $listview-nested-icon-collapsible: 12px !default;
@@ -52,4 +55,20 @@ $listview-icon-size: 20px !default;
 $listview-checkbox-left-margin: 0 8px 0 0 !default;
-$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
+$listview-rtl-checkbox-left-margin: -2px 0 0 8 !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -94,2 +113,3 @@ //ListView In-built template variables
 $listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
 
@@ -96,0 +116,0 @@ //color

styles/list-view/_fabric-dark-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+
 //default
@@ -81,2 +84,18 @@ $listview-font-family: $font-family !default;
 $listview-rtl-checkbox-right-margin: -2px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -111,3 +130,4 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: .6153em !default;
+$listview-template-height: inherit !default;
 
 //enddefault

styles/list-view/_fabric-definition.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $listview-font-family: $font-family !default;
@@ -76,2 +78,18 @@ $listview-text-color: $neutral-light-font !default;
 $listview-rtl-checkbox-right-margin: -2px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -106,1 +124,2 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: .6153em !default;
+$listview-template-height: inherit !default;

styles/list-view/_fluent-dark-definition.scss

@@ -1,1 +0,159 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+//layout
+$listview-icon-margin-right: 12px !default;
+$listview-icon-back-margin: 0 !default;
+$listview-icon-back-margin-right: 12px !default;
+$listview-rtl-icon-back-margin: 4px !default;
+$listview-item-height: 38px !default;
+$listview-item-line-height: 22px !default;
+$listview-item-padding: 7px 12px 7px 12px !default;
+$listview-rtl-item-padding: 7px 12px 7px 9px !default;
+$listview-header-padding: 6px 12px !default;
+$listview-back-icon-font-size: $text-sm !default;
+$listview-root-border-radius: 0 !default;
+$listview-nested-icon-collapsible: 12px !default;
+$listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
+$listview-header-text-padding: 12px !default;
+$listview-header-height: 38px !default;
+$listview-header-line-height: 18px !default;
+$listview-border-bottom: 0 !default;
+$listview-border-top: 0 !default;
+$listview-border-left: 0 !default;
+$listview-border-right: 0 !default;
+$listview-group-first-border-bottom: 0 !default;
+$listview-group-border-top: 1px !default;
+$listview-group-border-bottom: 0 !default;
+$listview-groupheader-item-height: 38px !default;
+$listview-groupheader-item-line-height: 22px !default;
+$listview-groupheader-font-size: $text-sm !default;
+$listview-border-size: 1px !default;
+$listview-font-size: $text-sm !default;
+$listview-back-padding-right: 12px !default;
+$listview-back-icon-size: 20px !default;
+$listview-touch-item-height: 44px !default;
+$listview-touch-item-line-height: 24px !default;
+$listview-touch-item-size: 24px !default;
+$listview-touch-item-padding: 12px 14px 12px 16px !default;
+$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
+$listview-touch-item-font-size: $text-base !default;
+$listview-touch-groupheader-height: 44px !default;
+$listview-touch-groupheader-line-height: 24px !default;
+$listview-touch-header-height: 44px !default;
+$listview-touch-header-font-weight: $font-weight-medium !default;
+$listview-touch-header-font-size: $text-sm !default;
+$listview-touch-header-line-height: 22px !default;
+$listview-touch-header-icon-margin-top: 2px !default;
+$listview-touch-icon-margin-right: 12px !default;
+$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
+$listview-touch-checkbox-left-margin: 0 16px 0 0 !default;
+$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
+$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
+$listview-checkbox-right-margin: -2px 0 0 8px !default;
+$listview-checkbox-left-margin: -2px 10px 0 0 !default;
+$listview-rtl-checkbox-left-margin: 0 3px 3px 12px !default;
+$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 18px !default;
+$listview-list-badge-border-radius: 10px !default;
+
+//ListView In-built template variables
+$listview-template-touch-font-size: $text-base !default;
+$listview-template-padding: 10px 16px !default;
+$listview-template-touch-padding: 10px 16px 10px 68px !default;
+$listview-template-avatar-padding-right: 16px !default;
+$listview-template-avatar-padding-left: 68px !default;
+$listview-template-avatar-rightposition-padding-right: 68px !default;
+$listview-template-avatar-rightposition-padding-left: 16px !default;
+$listview-template-avatar-size: 40px !default;
+$listview-template-avatar-touch-size: 48px !default;
+$listview-template-avatar-top: 0 !default;
+$listview-template-avatar-left: 0 !default;
+$listview-template-avatar-margin: 7px 16px 7px 12px !default;
+$listview-template-avatar-rtl-margin: 7px 12px 7px 16px !default;
+$listview-template-avatar-rightposition-right: 0 !default;
+$listview-template-badge-height: 18px !default;
+$listview-template-badge-width: 20px !default;
+$listview-template-badge-line-height: 16px !default;
+$listview-template-badge-font-size: $text-xxs !default;
+$listview-template-badge-right: 12px !default;
+$listview-template-avatar-badge-padding-right: 10px !default;
+$listview-template-avatar-badge-padding-left: 68px !default;
+$listview-template-badgewithoutavatar-padding-right: 10px !default;
+$listview-template-badgewithoutavatar-padding-left: 16px !default;
+$listview-template-item-padding: 8px 0 !default;
+$listview-template-multiline-header-padding: 0 !default;
+$listview-template-multiline-content-padding: 2px 0 0 0 !default;
+$listview-template-multiline-header-font-size: $text-sm !default;
+$listview-template-multiline-padding: 6px 4px !default;
+$listview-template-multiline-touch-padding: 6px 16px 6px 68px !default;
+$listview-template-multiline-content-font-size: $text-xs !default;
+$listview-template-multiline-avatar-top: 0 !default;
+$listview-touch-template-padding: 12px 16px !default;
+$listview-touch-template-multiline-padding: 7px !default;
+$listview-touch-template-avatar-padding-left: 88px !default;
+$listview-touch-template-avatar-size: 48px !default;
+$listview-touch-template-multiline-header-font-size: $text-base !default;
+$listview-touch-template-multiline-header-line-height: 24px !default;
+$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
+$listview-touch-template-badge-height: 20px !default;
+$listview-touch-template-badge-width: 34px !default;
+$listview-touch-template-badge-line-height: 18px !default;
+$listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
+
+//color
+$listview-font-family: $font-family !default;
+$listview-text-color: $content-text-color !default;
+$listview-text-disabled: $content-text-color-disabled !default;
+$listview-icon-color: $icon-color !default;
+$listview-icon-disabled: $icon-color-disabled !default;
+$listview-background: $transparent !default;
+$listview-line-color: $border-light !default;
+$listview-item-hover-bg: $content-bg-color-hover !default;
+$listview-text-hover-color: $content-text-color-hover !default;
+$listview-item-active-bg: $content-bg-color-selected !default;
+$listview-root-border-color: $border-light !default;
+$listview-text-active-color: $content-text-color-selected !default;
+$listview-header-text-color: $primary !default;
+$listview-header-text-disabled: $content-text-color-disabled !default;
+$listview-header-bg: transparent !default;
+$listview-header-icon-color: $icon-color !default;
+$listview-header-icon-disabled: $icon-color-disabled !default;
+$listview-header-border: $border-light !default;
+$listview-header-font-size: $text-sm !default;
+$listview-header-font-weight: $font-weight-medium !default;
+$listview-hover-border-color: $border-light !default;
+$listview-border-bottom-color: $border-light !default;
+$listview-border-top-color: transparent !default;
+$listview-border-right-color: transparent !default;
+$listview-border-left-color: transparent !default;
+$listview-groupheader-text-color: $primary !default;
+$listview-groupheader-bg: transparent !default;
+$listview-groupheader-icon: $icon-color !default;
+$listview-focused-collapsible-color: $content-text-color-selected !default;
+$listview-icon-hover: $icon-color-hover !default;
+$listview-icon-pressed: $icon-color-pressed !default;
+$checkmark-bgcolor: $content-bg-color !default;
+$checkmark-border-color: $content-bg-color !default;
+$checkmark-color: $primary !default;
+
+//ListView In-built template variables
+$listview-template-multiline-header-color: $content-text-color !default;
+$listview-template-multiline-content-color: $content-text-color-alt3 !default;
+$listview-template-focused-multiline-content-color: $content-text-color-selected !default;

styles/list-view/_fluent-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
+
 //layout
@@ -15,2 +18,3 @@ $listview-icon-margin-right: 12px !default;
 $listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
 $listview-header-text-padding: 12px !default;
@@ -55,2 +59,18 @@ $listview-header-height: 38px !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 18px !default;
+$listview-list-badge-border-radius: 10px !default;
 
@@ -100,2 +120,3 @@ //ListView In-built template variables
 $listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
 
@@ -102,0 +123,0 @@ //color

styles/list-view/_fluent2-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 //layout
@@ -7,3 +10,3 @@ $listview-icon-margin-right: 4px !default;
 $listview-item-line-height: 20px !default;
-$listview-item-radius: 4px !default;
+$listview-item-radius: $radius-4 !default;
 $listview-item-margin-bottom: 4px !default;
@@ -14,9 +17,10 @@ $listview-rtl-icon-back-margin: 4px !default;
 $listview-header-padding: 8px !default;
-$listview-root-border-radius: 4px !default;
+$listview-root-border-radius: $radius-4 !default;
 $listview-nested-icon-collapsible: 12px !default;
 $listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
 $listview-header-text-padding: 12px !default;
 $listview-header-font-size: $text-xs !default;
 $listview-header-height: 32px !default;
-$listview-header-font-weight: $font-weight-medium !default;
+$listview-header-font-weight: $font-weight-semibold !default;
 $listview-header-line-height: 16px !default;
@@ -61,2 +65,20 @@ $listview-border-bottom: 0 !default;
 $listview-rtl-checkbox-right-margin: 0 -4px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-icon-collapsible-font-size: 12px !default;
+$listview-icon-collapsible-before-padding: 5px !default;
+$listview-item-header-line-height: 20px !default;
+$listview-list-content-line-height: 16px !default;
+$listview-list-badge-border-radius: $radius-10 !default;
 
@@ -101,2 +123,3 @@ //ListView In-built template variables
 $listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
 
@@ -103,0 +126,0 @@ //color

styles/list-view/_fusionnew-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
+
 //layout
@@ -53,2 +56,18 @@ $listview-icon-margin-right: 8px !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -93,2 +112,3 @@ //ListView In-built template variables
 $listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
 
@@ -95,0 +115,0 @@ //color

styles/list-view/_highcontrast-definition.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $listview-font-family: $font-family !default;
@@ -76,2 +78,18 @@ $listview-text-color: $content-font !default;
 $listview-rtl-checkbox-right-margin: -2px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -106,1 +124,2 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: .6153em !default;
+$listview-template-height: inherit !default;

styles/list-view/_highcontrast-light-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 //default
@@ -81,2 +84,18 @@ $listview-font-family: $font-family !default;
 $listview-rtl-checkbox-right-margin: -2px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-list-icon-size: 30px !default;
 
@@ -111,3 +130,4 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: .6153em !default;
+$listview-template-height: inherit !default;
 
 //enddefault

styles/list-view/_layout.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin list-style($height, $line-height, $position) {
@@ -78,3 +80,3 @@ height: $height;
           margin: $listview-item-margin-bottom;
-          padding: 0;
+          padding: $listview-padding-none;
         }
@@ -102,4 +104,4 @@ @if ($skin-name == 'tailwind') {
       & .e-list-parent {
-        margin: 0;
-        padding: 0;
+        margin: $listview-list-margin;
+        padding: $listview-list-padding;
       }
@@ -119,3 +121,3 @@
           @include size($listview-back-icon-size, $listview-back-icon-size);
-          margin: 8px 8px 8px 0;
+          margin: $listview-back-icon-margin;
         }
@@ -134,5 +136,5 @@ }
           @if ($skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2' ) {
-            border-bottom: 1px solid;
+            border-bottom: $listview-header-border-bottom-size solid;
           }
-          padding: 0 $listview-header-text-padding;
+          padding: $listview-list-padding $listview-header-text-padding;
         }
@@ -180,3 +182,3 @@
         line-height: $listview-groupheader-item-line-height;
-        font-weight: 600;
+        font-weight: $listview-group-item-font-weight;
         @if ($skin-name == 'tailwind') {
@@ -206,6 +208,6 @@ box-sizing: border-box;
           @if $skin-name == 'fluent2' {
-            padding: 0;
+            padding: $listview-padding-none;
           }
           @if $skin-name == 'tailwind3' {
-            font-weight: 600;
+            font-weight: $listview-group-item-font-weight;
           }
@@ -215,3 +217,3 @@ }
         &:first-child {
-          border: 0;
+          border: $listview-border-none;
           border-bottom: $listview-group-first-border-bottom solid $listview-border-bottom-color;
@@ -234,3 +236,3 @@ }
         @if ($skin-name == 'tailwind') {
-          @include size($listview-icon-size, $listview-icon-size);
+          @include size($listview-icon-height, $listview-icon-size);
         }
@@ -240,3 +242,3 @@ }
       & .e-text-content {
-        height: 100%;
+        height: $listview-text-content-height;
         position: relative;
@@ -247,9 +249,9 @@ vertical-align: middle;
           .e-list-text {
-            width: calc(100% - 40px);
+            width: $listview-checkbox-text-content-width;
           }
           &.e-checkbox-left .e-list-icon + .e-list-text {
-            width: calc(100% - 90px);
+            width: $listview-checkbox-left-list-icon-text-width;
           }
           &.e-checkbox-right .e-list-icon + .e-list-text {
-            width: calc(100% - 80px);
+            width: $listview-checkbox-right-list-icon-text-width;
           }
@@ -288,3 +290,3 @@ }
         @if $skin-name == 'tailwind3' {
-          font-weight: 500;
+          font-weight: $listview-list-text-font-weight;
         }
@@ -296,3 +298,3 @@ }
       & .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
-        width: calc(100% - 60px);
+        width: $listview-icon-text-width;
       }
@@ -303,12 +305,12 @@
         @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
-          @include size($listview-icon-size, $listview-icon-size);
+          @include size($listview-icon-height, $listview-icon-size);
         }
         @else if ($skin-name == 'Material3') {
-          @include size(20px, 20px);
+          @include size($listview-icon-size, $listview-icon-size);
         }
         @else if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          @include size(18px, 18px);
+          @include size($listview-icon-size, $listview-icon-size);
         }
         @else {
-          @include size(30px, 30px);
+          @include size($listview-list-icon-size, $listview-list-icon-size);
         }
@@ -351,3 +353,3 @@ }
           @else {
-            @include icon-margin(16px, 0);
+            @include icon-margin($listview-item-icon-margin-left, $listview-item-icon-margin-right);
           }
@@ -354,0 +356,0 @@ }

styles/list-view/_material-dark-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+
 //default
@@ -81,2 +84,18 @@ $listview-font-family: $font-family !default;
 $listview-rtl-checkbox-right-margin: -2px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-icon-size: 18px !default;
 
@@ -111,3 +130,4 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: 1.0666em !default;
+$listview-template-height: inherit !default;
 
 //enddefault

styles/list-view/_material-definition.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
 $listview-font-family: $font-family !default;
@@ -76,2 +78,18 @@ $listview-text-color: rgba($grey-light-font, .87) !default;
 $listview-rtl-checkbox-right-margin: -2px 10px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-icon-size: 18px !default;
 
@@ -106,1 +124,2 @@ //ListView In-built template variables
 $listview-template-multiline-avatar-top: 1.0666em !default;
+$listview-template-height: inherit !default;

styles/list-view/_material3-dark-definition.scss

@@ -1,1 +0,146 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$listview-icon-margin-right: 10px !default;
+$listview-icon-back-margin:  0 !default;
+$listview-icon-back-margin-right:  14px !default;
+$listview-rtl-icon-back-margin:  0 !default;
+$listview-item-height: 40px !default;
+$listview-item-line-height: 22px !default;
+$listview-item-padding:  10px 16px !default;
+$listview-rtl-item-padding: 7px 12px 7px 12px !default;
+$listview-header-padding:  6px 12px !default;
+$listview-back-icon-font-size: 18px !default;
+$listview-root-border-radius: $radius-4 !default;
+$listview-nested-icon-collapsible: 18px !default;
+$listview-icon-size: 20px !default;
+$listview-header-text-padding: 16px !default;
+$listview-header-height: 34px !default;
+$listview-header-line-height: 18px !default;
+$listview-border-bottom: 0 !default;
+$listview-border-top: 0 !default;
+$listview-border-left: 0 !default;
+$listview-border-right: 0 !default;
+$listview-group-first-border-bottom: 0 !default;
+$listview-group-border-top: 0 !default;
+$listview-group-border-bottom: 1px !default;
+$listview-groupheader-item-height: 36px !default;
+$listview-groupheader-item-line-height: 18px !default;
+$listview-groupheader-font-size: $text-xs !default;
+$listview-border-size: 1px !default;
+$listview-font-size: $text-sm !default;
+$listview-back-padding-right: 8px !default;
+$listview-back-icon-size: 20px !default;
+$listview-touch-item-height: 48px !default;
+$listview-touch-item-line-height: 24px !default;
+$listview-touch-item-size: 24px !default;
+$listview-touch-item-padding: 16px 14px 12px 16px !default;
+$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
+$listview-touch-item-font-size: $text-base !default;
+$listview-touch-groupheader-height: 40px !default;
+$listview-touch-groupheader-line-height: 20px !default;
+$listview-touch-header-height: 40px !default;
+$listview-touch-header-font-weight: $font-weight-medium !default;
+$listview-touch-header-font-size: $text-sm !default;
+$listview-touch-header-line-height: 22px !default;
+$listview-touch-header-icon-margin-top: 2px !default;
+$listview-touch-icon-margin-right: 16px !default;
+$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
+$listview-touch-checkbox-left-margin: 0 12px 0 0 !default;
+$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
+$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
+$listview-checkbox-right-margin: -2px 0 0 8px !default;
+$listview-checkbox-left-margin: 0 8px 0 0 !default;
+$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
+$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-template-padding: 10px 16px !default;
+$listview-template-avatar-padding-right: 16px !default;
+$listview-template-avatar-padding-left: 68px !default;
+$listview-template-avatar-rightposition-padding-right: 68px !default;
+$listview-template-avatar-rightposition-padding-left: 16px !default;
+$listview-template-avatar-size: 40px !default;
+$listview-template-avatar-top: 0 !default;
+$listview-template-avatar-left: 0 !default;
+$listview-template-avatar-margin: 7px 16px 7px 12px !default;
+$listview-template-avatar-background: rgba($primary) !default;
+$listview-template-avatar-rightposition-right: 0 !default;
+$listview-template-badge-height: 20px !default;
+$listview-template-badge-width: 36px !default;
+$listview-template-badge-line-height: 20px !default;
+$listview-template-badge-font-size: $text-xs !default;
+$listview-template-badge-right: 12px !default;
+$listview-template-avatar-badge-padding-right: 10px !default;
+$listview-template-avatar-badge-padding-left: 68px !default;
+$listview-template-badgewithoutavatar-padding-right: 10px !default;
+$listview-template-badgewithoutavatar-padding-left: 16px !default;
+$listview-template-item-padding: 8px 0 !default;
+$listview-template-multiline-header-padding: 0 !default;
+$listview-template-multiline-content-padding: 2px 0 0 0 !default;
+$listview-template-multiline-header-font-size: $text-sm !default;
+$listview-template-multiline-padding: 4px !default;
+$listview-template-multiline-content-font-size: $text-sm !default;
+$listview-template-multiline-avatar-top: 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listview-touch-template-padding: 12px 16px !default;
+$listview-touch-template-multiline-padding: 7px !default;
+$listview-touch-template-avatar-padding-left: 88px !default;
+$listview-touch-template-avatar-size: 48px !default;
+$listview-touch-template-multiline-header-font-size: $text-base !default;
+$listview-touch-template-multiline-header-line-height: 24px !default;
+$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
+$listview-touch-template-badge-height: 20px !default;
+$listview-touch-template-badge-width: 34px !default;
+$listview-touch-template-badge-line-height: 18px !default;
+$listview-touch-template-badge-font-size: $text-xs !default;
+$listview-font-family: $font-family !default;
+$listview-text-color: rgba($content-text-color) !default;
+$listview-text-disabled: $content-text-color-disabled !default;
+$listview-icon-color: rgba($icon-color) !default;
+$listview-icon-disabled: $icon-color-disabled !default;
+$listview-background: $transparent !default;
+$listview-line-color: rgba($border-light) !default;
+$listview-item-hover-bg: $content-bg-color-hover !default;
+$listview-text-hover-color: rgba($content-text-color-hover) !default;
+$listview-item-active-bg: rgba($content-bg-color-selected) !default;
+$listview-root-border-color: rgba($border-light) !default;
+$listview-text-active-color: rgba($content-text-color-selected) !default;
+$listview-header-text-color: rgba($content-text-color-alt1) !default;
+$listview-header-text-disabled: $content-text-color-disabled !default;
+$listview-header-bg: transparent !default;
+$listview-header-icon-color: rgba($icon-color) !default;
+$listview-header-icon-disabled: $icon-color-disabled !default;
+$listview-header-border: rgba($border-light) !default;
+$listview-header-font-size: $text-xs !default;
+$listview-header-font-weight: $font-weight-semibold !default;
+$listview-hover-border-color: rgba($border-light) !default;
+$listview-border-bottom-color: rgba($border-light) !default;
+$listview-border-top-color: transparent !default;
+$listview-border-right-color: transparent !default;
+$listview-border-left-color: transparent !default;
+$listview-groupheader-text-color: rgba($content-text-color-alt1) !default;
+$listview-groupheader-bg: transparent !default;
+$listview-groupheader-icon: rgba($icon-color) !default;
+$listview-focused-collapsible-color: rgba($content-text-color-selected) !default;
+$listview-icon-hover: rgba($icon-color-hover) !default;
+$listview-icon-pressed: rgba($icon-color-pressed) !default;
+$checkmark-bgcolor: rgba($primary) !default;
+$checkmark-border-color: rgba($primary) !default;
+$checkmark-color: rgba($primary-text-color) !default;
+$listview-template-multiline-header-color: rgba($content-text-color) !default;
+$listview-template-multiline-content-color: rgba($content-text-color-alt1) !default;
+$listview-template-focused-multiline-content-color: rgba($content-text-color-selected) !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-template-height: inherit !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: $radius-10 !default;

styles/list-view/_material3-definition.scss

@@ -0,12 +1,14 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $listview-icon-margin-right: 10px !default;
-$listview-icon-back-margin: 0 !default;
-$listview-icon-back-margin-right: 14px !default;
-$listview-rtl-icon-back-margin: 0 !default;
+$listview-icon-back-margin:  0 !default;
+$listview-icon-back-margin-right:  14px !default;
+$listview-rtl-icon-back-margin:  0 !default;
 $listview-item-height: 40px !default;
 $listview-item-line-height: 22px !default;
-$listview-item-padding: 10px 16px !default;
+$listview-item-padding:  10px 16px !default;
 $listview-rtl-item-padding: 7px 12px 7px 12px !default;
-$listview-header-padding: 6px 12px !default;
+$listview-header-padding:  6px 12px !default;
 $listview-back-icon-font-size: 18px !default;
-$listview-root-border-radius: 4px !default;
+$listview-root-border-radius: $radius-4 !default;
 $listview-nested-icon-collapsible: 18px !default;
@@ -80,2 +82,8 @@ $listview-icon-size: 20px !default;
 $listview-template-multiline-avatar-top: 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
 $listview-touch-template-padding: 12px 16px !default;
@@ -111,3 +119,3 @@ $listview-touch-template-multiline-padding: 7px !default;
 $listview-header-font-size: $text-xs !default;
-$listview-header-font-weight: $font-weight-medium !default;
+$listview-header-font-weight: $font-weight-semibold !default;
 $listview-hover-border-color: rgba($border-light) !default;
@@ -130,1 +138,12 @@ $listview-border-bottom-color: rgba($border-light) !default;
 $listview-template-focused-multiline-content-color: rgba($content-text-color-selected) !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-template-height: inherit !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: $radius-10 !default;

styles/list-view/_tailwind-dark-definition.scss

@@ -1,1 +0,147 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+//layout
+$listview-icon-margin-right: 2px !default;
+$listview-item-height: 38px !default;
+$listview-item-line-height: 21px !default;
+$listview-item-padding: 8px 9px 8px 12px !default;
+$listview-rtl-item-padding: 8px 12px 8px 9px !default;
+$listview-header-padding: 6px 12px !default;
+$listview-root-border-radius: 0 !default;
+$listview-nested-icon-collapsible: 20px !default;
+$listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
+$listview-header-text-padding: 12px !default;
+$listview-header-font-size: $text-xs !default;
+$listview-header-height: 30px !default;
+$listview-header-font-weight: $font-weight-medium !default;
+$listview-header-line-height: 18px !default;
+$listview-border-bottom: 0 !default;
+$listview-border-top: 0 !default;
+$listview-border-left: 0 !default;
+$listview-border-right: 0 !default;
+$listview-group-border-top: 0 !default;
+$listview-group-border-bottom: 0 !default;
+$listview-group-first-border-bottom: 0 !default;
+
+$listview-groupheader-item-height: 30px !default;
+$listview-groupheader-item-line-height: 18px !default;
+$listview-groupheader-font-size: $text-xs !default;
+$listview-border-size: 1px !default;
+$listview-font-size: $text-sm !default;
+$listview-back-padding-right: 8px !default;
+$listview-back-icon-size: 20px !default;
+$listview-back-icon-font-size: $text-base !default;
+$listview-touch-item-height: 48px !default;
+$listview-touch-item-line-height: 23px !default;
+$listview-touch-item-size: 24px !default;
+$listview-touch-item-height: 24px !default;
+$listview-touch-item-padding: 12px 14px 12px 16px !default;
+$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
+$listview-touch-item-font-size: $text-base !default;
+$listview-touch-groupheader-height: 38px !default;
+$listview-touch-groupheader-line-height: 22px !default;
+$listview-touch-header-height: 38px !default;
+$listview-touch-header-font-weight: $font-weight-medium !default;
+$listview-touch-header-font-size: $text-sm !default;
+$listview-touch-header-line-height: 22px !default;
+$listview-touch-header-icon-margin-top: 2px !default;
+$listview-touch-icon-margin-right: 5px !default;
+$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
+$listview-touch-checkbox-left-margin: -2px 12px 0 0 !default;
+$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
+$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
+$listview-checkbox-right-margin: -2px 0 0 8px !default;
+$listview-checkbox-left-margin: -2px 8px 0 0 !default;
+$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
+$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: 10px !default;
+
+//ListView In-built template variables
+$listview-template-padding: 8px 16px !default;
+$listview-template-avatar-padding-right: 16px !default;
+$listview-template-avatar-padding-left: 68px !default;
+$listview-template-avatar-rightposition-padding-right: 68px !default;
+$listview-template-avatar-rightposition-padding-left: 16px !default;
+$listview-template-avatar-size: 40px !default;
+$listview-template-avatar-top: 0 !default;
+$listview-template-avatar-left: 0 !default;
+$listview-template-avatar-margin: 7px 16px 7px 12px !default;
+$listview-template-avatar-rightposition-right: 0 !default;
+$listview-template-badge-height: 18px !default;
+$listview-template-badge-width: 32px !default;
+$listview-template-badge-line-height: 18px !default;
+$listview-template-badge-font-size: $text-xxs !default;
+$listview-template-badge-right: 12px !default;
+$listview-template-avatar-badge-padding-right: 10px !default;
+$listview-template-avatar-badge-padding-left: 68px !default;
+$listview-template-badgewithoutavatar-padding-right: 10px !default;
+$listview-template-badgewithoutavatar-padding-left: 16px !default;
+$listview-template-item-padding: 8px 0 !default;
+$listview-template-multiline-header-padding: 0 !default;
+$listview-template-multiline-content-padding: 2px 0 0 0 !default;
+$listview-template-multiline-header-font-size: $text-sm !default;
+$listview-template-multiline-padding: 4px !default;
+$listview-template-multiline-content-font-size: $text-sm !default;
+$listview-template-multiline-avatar-top: 0 !default;
+$listview-touch-template-padding: 12px 16px !default;
+$listview-touch-template-multiline-padding: 7px !default;
+$listview-touch-template-avatar-padding-left: 88px !default;
+$listview-touch-template-avatar-size: 48px !default;
+$listview-touch-template-multiline-header-font-size: $text-base !default;
+$listview-touch-template-multiline-header-line-height: 24px !default;
+$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
+$listview-touch-template-badge-height: 20px !default;
+$listview-touch-template-badge-width: 34px !default;
+$listview-touch-template-badge-line-height: 18px !default;
+$listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
+
+//color
+$listview-font-family: $font-family !default;
+$listview-text-color: $content-text-color !default;
+$listview-text-disabled: $content-text-color-disabled !default;
+$listview-icon-color: $icon-color !default;
+$listview-icon-disabled: $icon-color-disabled !default;
+$listview-background: $transparent !default;
+$listview-line-color: $border-light !default;
+$listview-item-hover-bg: $content-bg-color-hover !default;
+$listview-text-hover-color: $content-text-color-hover !default;
+$listview-item-active-bg: $content-bg-color-selected !default;
+$listview-root-border-color: none !default;
+$listview-text-active-color: $content-text-color-selected !default;
+$listview-header-text-color: $content-text-color-alt2 !default;
+$listview-header-text-disabled: $content-text-color-disabled !default;
+$listview-header-bg: $content-bg-color-alt2 !default;
+$listview-header-icon-color: $icon-color !default;
+$listview-header-icon-disabled: $icon-color-disabled !default;
+$listview-header-border: $transparent !default;
+$listview-hover-border-color: transparent !default;
+$listview-border-bottom-color: transparent !default;
+$listview-border-top-color: transparent !default;
+$listview-border-right-color: transparent !default;
+$listview-border-left-color: transparent !default;
+$listview-groupheader-text-color: $content-text-color-alt2 !default;
+$listview-groupheader-bg: $content-bg-color-alt2 !default;
+$listview-groupheader-icon: $icon-color !default;
+
+//ListView In-built template variables
+$listview-template-multiline-header-color: $content-text-color !default;
+$listview-template-multiline-content-color: $content-text-color-alt2 !default;

styles/list-view/_tailwind-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 //layout
@@ -11,2 +14,3 @@ $listview-icon-margin-right: 2px !default;
 $listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
 $listview-header-text-padding: 12px !default;
@@ -36,2 +40,3 @@ $listview-header-font-size: $text-xs !default;
 $listview-touch-item-size: 24px !default;
+$listview-touch-item-height: 24px !default;
 $listview-touch-item-padding: 12px 14px 12px 16px !default;
@@ -56,2 +61,19 @@ $listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-border-none: 0 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
+$listview-item-header-line-height: 22px !default;
+$listview-list-content-line-height: 22px !default;
+$listview-list-badge-border-radius: 10px !default;
 
@@ -96,2 +118,3 @@ //ListView In-built template variables
 $listview-touch-template-badge-font-size: $text-xs !default;
+$listview-template-height: inherit !default;
 
@@ -98,0 +121,0 @@ //color

styles/list-view/_tailwind3-definition.scss

@@ -0,1 +1,4 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 //layout
@@ -14,5 +17,6 @@ $listview-icon-margin-right: 8px !default;
 $listview-touch-back-icon-font-size: $text-xl !default;
-$listview-root-border-radius: 4px !default;
+$listview-root-border-radius: $radius-4 !default;
 $listview-nested-icon-collapsible: 18px !default;
 $listview-icon-size: 20px !default;
+$listview-icon-height: 20px !default;
 $listview-header-text-padding: 12px !default;
@@ -38,2 +42,3 @@ $listview-header-height: 34px !default;
 $listview-touch-item-size: 24px !default;
+$listview-touch-item-height: 24px !default;
 $listview-touch-item-padding: 16px 14px 12px 16px !default;
@@ -58,2 +63,25 @@ $listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$listview-touch-group-item-padding-top: 9px !default;
+$listview-touch-list-header-padding-top: 0 16px !default;
+$listview-touch-collapsible-icon-font-size: 22px !default;
+$listview-touch-back-icon-margin: 10px 12px 10px 0 !default;
+$listview-rtl-touch-list-icon-margin-right: 12px !default;
+$listview-rtl-touch-back-icon-margin: 0 12px !default;
+$listview-list-margin: 0 !default;
+$listview-list-padding: 0 !default;
+$listview-back-icon-margin: 8px 8px 8px 0 !default;
+$listview-header-border-bottom-size: 1px !default;
+$listview-group-item-font-weight: 600 !default;
+$listview-list-text-font-weight: 500 !default;
+$listview-border-none: 0 !default;
+$listview-item-icon-margin-left: 16px !default;
+$listview-item-icon-margin-right: 0 !default;
+$listitem-header-font-weight: 500 !default;
+$listview-margin-none: 0 !default;
+$listview-padding-none: 0 !default;
+$listview-text-content-height: 100% !default;
+$listview-checkbox-text-content-width: calc(100% - 40px) !default;
+$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
+$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
+$listview-icon-text-width: calc(100% - 60px) !default;
 
@@ -68,2 +96,3 @@ //ListView In-built template variables
 $listview-touch-template-avatar-size: 44px !default;
+$listview-touch-template-avatar-height: 44px !default;
 $listview-template-avatar-top: 0 !default;
@@ -101,2 +130,5 @@ $listview-template-avatar-left: 0 !default;
 $listview-template-avatar-background: $content-bg-color-alt2 !default;
+$listview-touch-list-avatar-margin: 10px 10px 10px 0 !default;
+$listview-touch-template-multiline-content-padding-top: 3px !default;
+$listview-template-height: inherit !default;
 
@@ -103,0 +135,0 @@ //color

styles/list-view/_theme.scss

@@ -1,2 +0,4 @@
-@mixin avatar-padding($left, $right) {
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@mixin avatar-padding($left, $right) {
   padding-left: $left;
@@ -108,3 +110,3 @@ padding-right: $right;
       .e-list-wrapper {
-        height: inherit;
+        height: $listview-template-height;
         position: relative;
@@ -136,15 +138,15 @@
               font-weight: $font-weight-normal;
-              line-height: 22px;
+              line-height: $listview-item-header-line-height;
             }
             @else if $skin-name == 'fluent2' {
               font-weight: $font-weight-normal;
-              line-height: 20px;
+              line-height: $listview-item-header-line-height;
             }
             @else {
-              font-weight: 500;
+              font-weight: $listitem-header-font-weight;
             }
             @if ($skin-name == 'tailwind3') {
-              line-height: 20px;
+              line-height: $listview-header-line-height;
             }
-            margin: 0;
+            margin: $listview-margin-none;
             overflow: hidden;
@@ -163,15 +165,15 @@ padding: $listview-template-multiline-header-padding;
               @if ($skin-name == 'FluentUI') {
-                line-height: 18px;
+                line-height: $listview-list-content-line-height;
               }
               @else {
-                line-height: 22px;
+                line-height: $listview-list-content-line-height;
               }
             }
             @if ($skin-name == 'fluent2') {
-              line-height: 16px;
+              line-height: $listview-list-content-line-height;
             }
             @if ($skin-name == 'tailwind3') {
-              line-height: 20px;
+              line-height: $listview-header-line-height;
             }
-            margin: 0;
+            margin: $listview-margin-none;
             padding: $listview-template-multiline-content-padding;
@@ -234,7 +236,7 @@ word-wrap: break-word;
             line-height: $listview-template-badge-line-height;
-            padding: 0;
+            padding: $listview-padding-none;
             position: absolute;
             transform: translateY(-50%);
             @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3'  or $skin-name == 'fluent2') {
-              border-radius: 10px;
+              border-radius: $listview-list-badge-border-radius;
             }
@@ -255,3 +257,3 @@ }
             display: block;
-            margin: 0;
+            margin: $listview-margin-none;
             overflow: hidden;
@@ -258,0 +260,0 @@ padding: $listview-template-item-padding;

styles/list-view/bds.css

@@ -502,3 +502,3 @@
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -510,3 +510,3 @@ margin-right: 5px;
   font-size: 24px;
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -513,0 +513,0 @@ }

styles/list-view/bds.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/bootstrap-dark.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/bootstrap.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/bootstrap4.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap4-definition' as *;
+@use 'bootstrap4-definition' as *;
+@use 'icons/bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/bootstrap5-dark.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5-dark-definition' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'icons/bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/bootstrap5.3.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-icon-collapsible::before {
@@ -19,3 +99,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -214,3 +294,3 @@ overflow: auto;
 .e-listview.e-rtl .e-checkbox .e-checkbox-left {
-  margin: -2px 0 0 8px;
+  margin: -2px 0 0 8;
 }
@@ -231,3 +311,3 @@ .e-listview.e-rtl .e-checkbox .e-checkbox-right {
   border-color: var(--color-sf-border-light);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -234,0 +314,0 @@ }

styles/list-view/bootstrap5.3.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5.3-definition.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'icons/bootstrap5.3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5.3-definition' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'icons/bootstrap5.3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/bootstrap5.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5-definition' as *;
+@use 'bootstrap5-definition' as *;
+@use 'icons/bootstrap5' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/fabric-dark.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-buttons/styles/check-box/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/check-box/fabric-dark-definition' as *;
+@use 'fabric-dark-definition' as *;
+@use 'icons/fabric-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/fabric.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-buttons/styles/check-box/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/check-box/fabric-definition' as *;
+@use 'fabric-definition' as *;
+@use 'icons/fabric' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/fluent-dark.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/check-box/fluent-dark-definition' as *;
+@use 'fluent-dark-definition' as *;
+@use 'icons/fluent-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/fluent.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'ej2-buttons/styles/check-box/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/check-box/fluent-definition' as *;
+@use 'fluent-definition' as *;
+@use 'icons/fluent' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/fluent2.css

@@ -7,2 +7,82 @@
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 .e-icon-collapsible::before {
@@ -23,3 +103,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -38,3 +118,3 @@ overflow: auto;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   margin: 4px;
@@ -240,3 +320,3 @@ padding: 0;
   border-color: var(--color-sf-border-light);
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -363,3 +443,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -453,3 +533,3 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   display: flex;
-  font-weight: 600;
+  font-weight: 500;
   height: 38px;
@@ -469,3 +549,3 @@ }
 .e-listview.e-bigger .e-icon-collapsible {
-  font-size: 14px;
+  font-size: 12px;
 }
@@ -472,0 +552,0 @@ .e-bigger .e-listview .e-icon-collapsible::before,

styles/list-view/fluent2.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'ej2-buttons/styles/check-box/fluent2-definition.scss';
-@import 'fluent2-definition.scss';
-@import 'icons/fluent2.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/check-box/fluent2-definition' as *;
+@use 'fluent2-definition' as *;
+@use 'icons/fluent2' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/highcontrast-light.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-light-definition.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-light-definition' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'icons/highcontrast-light' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/highcontrast.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-definition' as *;
+@use 'highcontrast-definition' as *;
+@use 'icons/highcontrast' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/icons/_bds.scss

@@ -0,1 +1,3 @@
+@use '../bds-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_bootstrap-dark.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap-dark-definition' as *;
 @include export-module('listview-bootstrap-dark-icons') {
@@ -2,0 +4,0 @@ .e-listview {

styles/list-view/icons/_bootstrap.scss

@@ -0,1 +1,3 @@
+@use '../bootstrap-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e943';

styles/list-view/icons/_bootstrap4.scss

@@ -0,1 +1,3 @@
+@use '../bootstrap4-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e70b';

styles/list-view/icons/_bootstrap5-dark.scss

@@ -1,1 +0,1 @@
-@import './bootstrap5.scss';
+@use './bootstrap5' as *;

styles/list-view/icons/_bootstrap5.3.scss

@@ -0,1 +1,3 @@
+@use '../bootstrap5.3-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_bootstrap5.scss

@@ -0,1 +1,3 @@
+@use '../bootstrap5-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_fabric-dark.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fabric-dark-definition' as *;
 @include export-module('listview-fabric-dark-icons') {
@@ -2,0 +4,0 @@ .e-listview {

styles/list-view/icons/_fabric.scss

@@ -0,1 +1,3 @@
+@use '../fabric-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e85c';

styles/list-view/icons/_fluent-dark.scss

@@ -1,1 +0,1 @@
-@import './fluent.scss';
+@use './fluent' as *;

styles/list-view/icons/_fluent.scss

@@ -0,1 +1,3 @@
+@use '../fluent-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_fluent2.scss

@@ -0,1 +1,3 @@
+@use '../fluent2-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_fusionnew.scss

@@ -0,1 +1,3 @@
+@use '../fusionnew-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_highcontrast-light.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../highcontrast-light-definition' as *;
 @include export-module('listview-highcontrast-light-icons') {
@@ -2,0 +4,0 @@ .e-listview {

styles/list-view/icons/_highcontrast.scss

@@ -0,1 +1,3 @@
+@use '../highcontrast-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e85c';

styles/list-view/icons/_material-dark.scss

@@ -0,1 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../material-dark-definition' as *;
 @include export-module('listview-material-dark-icons') {
@@ -2,0 +4,0 @@ .e-listview {

styles/list-view/icons/_material.scss

@@ -0,1 +1,3 @@
+@use '../material-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e913';

styles/list-view/icons/_material3-dark.scss

@@ -1,1 +0,1 @@
-@import './material3.scss';
+@use './material3' as *;

styles/list-view/icons/_material3.scss

@@ -0,1 +1,3 @@
+@use '../material3-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_tailwind-dark.scss

@@ -0,1 +1,3 @@
+@use '../tailwind-dark-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_tailwind.scss

@@ -0,1 +1,3 @@
+@use '../tailwind-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/icons/_tailwind3.scss

@@ -0,1 +1,3 @@
+@use '../tailwind3-definition' as *;
+
 .e-icon-collapsible::before {
@@ -2,0 +4,0 @@ content: '\e748';

styles/list-view/material-dark.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'ej2-buttons/styles/check-box/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'ej2-buttons/styles/check-box/material-dark-definition' as *;
+@use 'material-dark-definition' as *;
+@use 'icons/material-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/material.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'ej2-buttons/styles/check-box/material-definition.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'ej2-buttons/styles/check-box/material-definition' as *;
+@use 'material-definition' as *;
+@use 'icons/material' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/material3-dark.css

 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-icon-collapsible::before {
@@ -16,3 +180,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -229,3 +393,3 @@ overflow: auto;
   border-color: rgba(var(--color-sf-outline-variant));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -357,3 +521,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -446,3 +610,3 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   display: flex;
-  font-weight: 600;
+  font-weight: 500;
   height: 40px;
@@ -449,0 +613,0 @@ }

styles/list-view/material3-dark.scss

@@ -1,7 +0,6 @@
-
-
-@import 'ej2-buttons/styles/check-box/material3-dark-definition.scss';
-@import 'material3-dark-definition.scss';
-@import 'icons/material3-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'ej2-buttons/styles/check-box/material3-dark-definition' as *;
+@use 'material3-dark-definition' as *;
+@use 'icons/material3-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/material3.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-icon-collapsible::before {
@@ -19,3 +99,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -232,3 +312,3 @@ overflow: auto;
   border-color: rgba(var(--color-sf-outline-variant));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -360,3 +440,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -449,3 +529,3 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   display: flex;
-  font-weight: 600;
+  font-weight: 500;
   height: 40px;
@@ -452,0 +532,0 @@ }

styles/list-view/material3.scss

@@ -1,7 +0,6 @@
-
-
-@import 'ej2-buttons/styles/check-box/material3-definition.scss';
-@import 'material3-definition.scss';
-@import 'icons/material3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'ej2-buttons/styles/check-box/material3-definition' as *;
+@use 'material3-definition' as *;
+@use 'icons/material3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/tailwind-dark.css

@@ -488,3 +488,3 @@ .e-icon-collapsible::before {
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -496,3 +496,3 @@ margin-right: 5px;
   font-size: 24px;
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -499,0 +499,0 @@ }

styles/list-view/tailwind-dark.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'ej2-buttons/styles/check-box/tailwind-dark-definition.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'icons/tailwind-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'ej2-buttons/styles/check-box/tailwind-dark-definition' as *;
+@use 'tailwind-dark-definition' as *;
+@use 'icons/tailwind-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/tailwind.css

@@ -488,3 +488,3 @@ .e-icon-collapsible::before {
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -496,3 +496,3 @@ margin-right: 5px;
   font-size: 24px;
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -499,0 +499,0 @@ }

styles/list-view/tailwind.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'ej2-buttons/styles/check-box/tailwind-definition.scss';
-@import 'tailwind-definition.scss';
-@import 'icons/tailwind.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'ej2-buttons/styles/check-box/tailwind-definition' as *;
+@use 'tailwind-definition' as *;
+@use 'icons/tailwind' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/list-view/tailwind3.css

@@ -5,2 +5,72 @@
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-icon-collapsible::before {
@@ -19,3 +89,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -237,3 +307,3 @@ overflow: auto;
   border-color: var(--color-sf-border-light);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -305,3 +375,3 @@ }
   font-weight: 500;
-  line-height: 20px;
+  line-height: 16px;
   margin: 0;
@@ -317,3 +387,3 @@ overflow: hidden;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 16px;
   margin: 0;
@@ -470,3 +540,3 @@ padding: 2px 0 0 0;
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -473,0 +543,0 @@ margin-right: 12px;

styles/list-view/tailwind3.scss

@@ -1,6 +0,6 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/check-box/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/check-box/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

styles/material-dark-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'ej2-buttons/styles/check-box/material-dark-definition.scss';
-@import 'list-view/material-dark-definition.scss';
-@import 'list-view/icons/material-dark.scss';
-@import 'list-view/all.scss';
-@import 'sortable/material-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'ej2-buttons/styles/check-box/material-dark-definition' as *;
+@use 'list-view/material-dark-definition' as *;
+@use 'list-view/icons/material-dark' as *;
+@use 'list-view/all' as *;
+@use 'sortable/material-dark-definition' as *;
+@use 'sortable/all' as *;

styles/material-dark.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'ej2-buttons/styles/check-box/material-dark-definition.scss';
-@import 'list-view/material-dark-definition.scss';
-@import 'list-view/icons/material-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/material-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'ej2-buttons/styles/check-box/material-dark-definition' as *;
+@use 'list-view/material-dark-definition' as *;
+@use 'list-view/icons/material-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/material-dark-definition' as *;
+@use 'sortable/all' as *;

styles/material-lite.scss

@@ -1,7 +0,6 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'ej2-buttons/styles/check-box/material-definition.scss';
-@import 'list-view/material-definition.scss';
-@import 'list-view/icons/material.scss';
-@import 'list-view/all.scss';
-@import 'sortable/material-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/material-definition' as *;
+@use 'list-view/material-definition' as *;
+@use 'list-view/icons/material' as *;
+@use 'list-view/all' as *;
+@use 'sortable/material-definition' as *;
+@use 'sortable/all' as *;

styles/material.scss

@@ -1,8 +0,7 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'ej2-buttons/styles/check-box/material-definition.scss';
-@import 'list-view/material-definition.scss';
-@import 'list-view/icons/material.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/material-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-buttons/styles/check-box/material-definition' as *;
+@use 'list-view/material-definition' as *;
+@use 'list-view/icons/material' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/material-definition' as *;
+@use 'sortable/all' as *;

styles/material3-dark-lite.css

 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-icon-collapsible::before {
@@ -16,3 +180,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -229,3 +393,3 @@ overflow: auto;
   border-color: rgba(var(--color-sf-outline-variant));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -357,3 +521,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -411,3 +575,2 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -414,0 +577,0 @@ outline: none;

styles/material3-dark-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/material3-dark.scss';
-@import 'ej2-buttons/styles/check-box/material3-dark-definition.scss';
-@import 'list-view/material3-dark-definition.scss';
-@import 'list-view/icons/material3-dark.scss';
-@import 'list-view/all.scss';
-@import 'sortable/material3-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'ej2-buttons/styles/check-box/material3-dark-definition' as *;
+@use 'list-view/material3-dark-definition' as *;
+@use 'list-view/icons/material3-dark' as *;
+@use 'list-view/all' as *;
+@use 'sortable/material3-dark-definition' as *;
+@use 'sortable/all' as *;

styles/material3-dark.css

 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-icon-collapsible::before {
@@ -16,3 +180,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -229,3 +393,3 @@ overflow: auto;
   border-color: rgba(var(--color-sf-outline-variant));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -357,3 +521,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -446,3 +610,3 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   display: flex;
-  font-weight: 600;
+  font-weight: 500;
   height: 40px;
@@ -475,3 +639,2 @@ }
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -478,0 +641,0 @@ outline: none;

styles/material3-dark.scss

@@ -1,10 +0,8 @@
-
-
-
-@import 'ej2-buttons/styles/check-box/material3-dark-definition.scss';
-@import 'list-view/material3-dark-definition.scss';
-@import 'list-view/icons/material3-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/material3-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'ej2-buttons/styles/check-box/material3-dark-definition' as *;
+@use 'list-view/material3-dark-definition' as *;
+@use 'list-view/icons/material3-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/material3-dark-definition' as *;
+@use 'sortable/all' as *;

styles/material3-lite.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-icon-collapsible::before {
@@ -19,3 +99,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -232,3 +312,3 @@ overflow: auto;
   border-color: rgba(var(--color-sf-outline-variant));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -360,3 +440,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -363,0 +443,0 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {

styles/material3-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/material3.scss';
-@import 'ej2-buttons/styles/check-box/material3-definition.scss';
-@import 'list-view/material3-definition.scss';
-@import 'list-view/icons/material3.scss';
-@import 'list-view/all.scss';
-@import 'sortable/material3-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'ej2-buttons/styles/check-box/material3-definition' as *;
+@use 'list-view/material3-definition' as *;
+@use 'list-view/icons/material3' as *;
+@use 'list-view/all' as *;
+@use 'sortable/material3-definition' as *;
+@use 'sortable/all' as *;

styles/material3.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-icon-collapsible::before {
@@ -19,3 +99,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -232,3 +312,3 @@ overflow: auto;
   border-color: rgba(var(--color-sf-outline-variant));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -360,3 +440,3 @@ }
           transform: translateY(-50%);
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
 }
@@ -449,3 +529,3 @@ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
   display: flex;
-  font-weight: 600;
+  font-weight: 500;
   height: 40px;
@@ -452,0 +532,0 @@ }

styles/material3.scss

@@ -1,10 +0,8 @@
-
-
-
-@import 'ej2-buttons/styles/check-box/material3-definition.scss';
-@import 'list-view/material3-definition.scss';
-@import 'list-view/icons/material3.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/material3-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'ej2-buttons/styles/check-box/material3-definition' as *;
+@use 'list-view/material3-definition' as *;
+@use 'list-view/icons/material3' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/material3-definition' as *;
+@use 'sortable/all' as *;

styles/sortable/_all.scss

@@ -1,1 +0,1 @@
-@import 'layout.scss';
+@use 'layout' as *;

styles/sortable/_bootstrap5-dark-definition.scss

@@ -1,1 +0,2 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';

styles/sortable/_fluent-dark-definition.scss

@@ -1,1 +0,2 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';

styles/sortable/_layout.scss

@@ -1,2 +0,4 @@
-@include export-module('sortable-layout') {
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@include export-module('sortable-layout') {
   #{&}.e-sortable {
@@ -3,0 +5,0 @@ outline: none;

styles/sortable/_material3-dark-definition.scss

@@ -1,1 +0,2 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';

styles/sortable/_tailwind-dark-definition.scss

@@ -1,1 +0,2 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';

styles/sortable/bds.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'bds-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'bds-definition' as *;
+@use 'all' as *;

styles/sortable/bootstrap-dark.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'all' as *;

styles/sortable/bootstrap.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'bootstrap-definition' as *;
+@use 'all' as *;

styles/sortable/bootstrap4.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'bootstrap4-definition' as *;
+@use 'all' as *;

styles/sortable/bootstrap5-dark.css

@@ -1,2 +0,1 @@
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -3,0 +2,0 @@ outline: none;

styles/sortable/bootstrap5-dark.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'all' as *;

styles/sortable/bootstrap5.3.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable-line no-empty-source */
@@ -7,0 +87,0 @@ .e-sortable {

styles/sortable/bootstrap5.3.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'all' as *;

styles/sortable/bootstrap5.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'bootstrap5-definition' as *;
+@use 'all' as *;

styles/sortable/fabric-dark.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'fabric-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;

styles/sortable/fabric.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'fabric-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'fabric-definition' as *;
+@use 'all' as *;

styles/sortable/fluent-dark.css

@@ -1,2 +0,1 @@
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -3,0 +2,0 @@ outline: none;

styles/sortable/fluent-dark.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'fluent-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'fluent-dark-definition' as *;
+@use 'all' as *;

styles/sortable/fluent.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'fluent-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'fluent-definition' as *;
+@use 'all' as *;

styles/sortable/fluent2.css

@@ -7,2 +7,82 @@
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 /* stylelint-disable-line no-empty-source */
@@ -9,0 +89,0 @@ .e-sortable {

styles/sortable/fluent2.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'all' as *;

styles/sortable/highcontrast-light.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'all' as *;

styles/sortable/highcontrast.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'all' as *;

styles/sortable/material-dark.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'material-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'material-dark-definition' as *;
+@use 'all' as *;

styles/sortable/material.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'material-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'material-definition' as *;
+@use 'all' as *;

styles/sortable/material3-dark.css

 
 
-/* stylelint-disable-line no-empty-source */
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-sortable {
@@ -5,0 +84,0 @@ outline: none;

styles/sortable/material3-dark.scss

@@ -1,4 +0,3 @@
-
-
-@import 'material3-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@use 'material3-dark-definition' as *;
+@use 'all' as *;

styles/sortable/material3.css

@@ -5,2 +5,82 @@
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 /* stylelint-disable-line no-empty-source */
@@ -7,0 +87,0 @@ .e-sortable {

styles/sortable/material3.scss

@@ -1,4 +0,3 @@
-
-
-@import 'material3-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'material3-definition' as *;
+@use 'all' as *;

styles/sortable/tailwind-dark.css

@@ -1,2 +0,1 @@
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -3,0 +2,0 @@ outline: none;

styles/sortable/tailwind-dark.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'tailwind-dark-definition' as *;
+@use 'all' as *;

styles/sortable/tailwind.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'tailwind-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'tailwind-definition' as *;
+@use 'all' as *;

styles/sortable/tailwind3.css

@@ -5,2 +5,72 @@
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable-line no-empty-source */
@@ -7,0 +77,0 @@ .e-sortable {

styles/sortable/tailwind3.scss

@@ -1,3 +0,3 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'tailwind3-definition.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'tailwind3-definition' as *;
+@use 'all' as *;

styles/tailwind-dark-lite.css

@@ -425,3 +425,2 @@ .e-icon-collapsible::before {
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -428,0 +427,0 @@ outline: none;

styles/tailwind-dark-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'ej2-buttons/styles/check-box/tailwind-dark-definition.scss';
-@import 'list-view/tailwind-dark-definition.scss';
-@import 'list-view/icons/tailwind-dark.scss';
-@import 'list-view/all.scss';
-@import 'sortable/tailwind-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'ej2-buttons/styles/check-box/tailwind-dark-definition' as *;
+@use 'list-view/tailwind-dark-definition' as *;
+@use 'list-view/icons/tailwind-dark' as *;
+@use 'list-view/all' as *;
+@use 'sortable/tailwind-dark-definition' as *;
+@use 'sortable/all' as *;

styles/tailwind-dark.css

@@ -488,3 +488,3 @@ .e-icon-collapsible::before {
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -496,3 +496,3 @@ margin-right: 5px;
   font-size: 24px;
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -583,3 +583,2 @@ }
 
-/* stylelint-disable-line no-empty-source */
 .e-sortable {
@@ -586,0 +585,0 @@ outline: none;

styles/tailwind-dark.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'ej2-buttons/styles/check-box/tailwind-dark-definition.scss';
-@import 'list-view/tailwind-dark-definition.scss';
-@import 'list-view/icons/tailwind-dark.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/tailwind-dark-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'ej2-buttons/styles/check-box/tailwind-dark-definition' as *;
+@use 'list-view/tailwind-dark-definition' as *;
+@use 'list-view/icons/tailwind-dark' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/tailwind-dark-definition' as *;
+@use 'sortable/all' as *;

styles/tailwind-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'ej2-buttons/styles/check-box/tailwind-definition.scss';
-@import 'list-view/tailwind-definition.scss';
-@import 'list-view/icons/tailwind.scss';
-@import 'list-view/all.scss';
-@import 'sortable/tailwind-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'ej2-buttons/styles/check-box/tailwind-definition' as *;
+@use 'list-view/tailwind-definition' as *;
+@use 'list-view/icons/tailwind' as *;
+@use 'list-view/all' as *;
+@use 'sortable/tailwind-definition' as *;
+@use 'sortable/all' as *;

styles/tailwind.css

@@ -488,3 +488,3 @@ .e-icon-collapsible::before {
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -496,3 +496,3 @@ margin-right: 5px;
   font-size: 24px;
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -499,0 +499,0 @@ }

styles/tailwind.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'ej2-buttons/styles/check-box/tailwind-definition.scss';
-@import 'list-view/tailwind-definition.scss';
-@import 'list-view/icons/tailwind.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/tailwind-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'ej2-buttons/styles/check-box/tailwind-definition' as *;
+@use 'list-view/tailwind-definition' as *;
+@use 'list-view/icons/tailwind' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/tailwind-definition' as *;
+@use 'sortable/all' as *;

styles/tailwind3-lite.css

@@ -5,2 +5,72 @@
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-icon-collapsible::before {
@@ -19,3 +89,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -237,3 +307,3 @@ overflow: auto;
   border-color: var(--color-sf-border-light);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -305,3 +375,3 @@ }
   font-weight: 500;
-  line-height: 20px;
+  line-height: 16px;
   margin: 0;
@@ -317,3 +387,3 @@ overflow: hidden;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 16px;
   margin: 0;
@@ -320,0 +390,0 @@ padding: 2px 0 0 0;

styles/tailwind3-lite.scss

@@ -1,7 +0,7 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/check-box/tailwind3-definition.scss';
-@import 'list-view/tailwind3-definition.scss';
-@import 'list-view/icons/tailwind3.scss';
-@import 'list-view/all.scss';
-@import 'sortable/tailwind3-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/check-box/tailwind3-definition' as *;
+@use 'list-view/tailwind3-definition' as *;
+@use 'list-view/icons/tailwind3' as *;
+@use 'list-view/all' as *;
+@use 'sortable/tailwind3-definition' as *;
+@use 'sortable/all' as *;

styles/tailwind3.css

@@ -5,2 +5,72 @@
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-icon-collapsible::before {
@@ -19,3 +89,3 @@ content: "\e748";
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
@@ -237,3 +307,3 @@ overflow: auto;
   border-color: var(--color-sf-border-light);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
@@ -305,3 +375,3 @@ }
   font-weight: 500;
-  line-height: 20px;
+  line-height: 16px;
   margin: 0;
@@ -317,3 +387,3 @@ overflow: hidden;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 16px;
   margin: 0;
@@ -470,3 +540,3 @@ padding: 2px 0 0 0;
 .e-listview.e-bigger .e-list-icon {
-  height: 24px;
+  height: 48px;
   width: 24px;
@@ -473,0 +543,0 @@ margin-right: 12px;

styles/tailwind3.scss

@@ -1,8 +0,8 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/check-box/tailwind3-definition.scss';
-@import 'list-view/tailwind3-definition.scss';
-@import 'list-view/icons/tailwind3.scss';
-@import 'list-view/all.scss';
-@import 'list-view/bigger.scss';
-@import 'sortable/tailwind3-definition.scss';
-@import 'sortable/all.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/check-box/tailwind3-definition' as *;
+@use 'list-view/tailwind3-definition' as *;
+@use 'list-view/icons/tailwind3' as *;
+@use 'list-view/all' as *;
+@use 'list-view/bigger' as *;
+@use 'sortable/tailwind3-definition' as *;
+@use 'sortable/all' as *;

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3505743

2.03%

Number of package files

291

1.04%

Lines of code

47120

3.63%

Worsened metrics

Number of low supply chain risk alerts

62

1.64%

Number of medium supply chain risk alerts

7

16.67%

Dependency changes

• + Added

  @syncfusion/ej2-base@32.1.24
  (transitive)

• + Added

  @syncfusion/ej2-buttons@32.1.24
  (transitive)

• + Added

  @syncfusion/ej2-data@32.1.24
  (transitive)

• + Added

  @syncfusion/ej2-icons@32.1.24
  (transitive)

• + Added

  @syncfusion/ej2-popups@32.1.25
  (transitive)

• - Removed

  @syncfusion/ej2-base@31.2.18
  (transitive)

• - Removed

  @syncfusion/ej2-buttons@31.2.18
  (transitive)

• - Removed

  @syncfusion/ej2-data@31.2.18
  (transitive)

• - Removed

  @syncfusion/ej2-icons@31.2.12
  (transitive)

• - Removed

  @syncfusion/ej2-popups@31.2.12
  (transitive)

• Updated

  @syncfusion/ej2-base@~32.1.19

• Updated

  @syncfusion/ej2-buttons@~32.1.19

• Updated

  @syncfusion/ej2-data@~32.1.19

• Updated

  @syncfusion/ej2-popups@~32.1.19