@syncfusion/ej2-layouts 31.2.2 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.2
-*  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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _layouts from '@syncfusion/ej2-layouts';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-layouts",
-  "version": "31.2.2",
+  "version": "32.1.19",
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,7 +8,7 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-layouts.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.2"
+    "@syncfusion/ej2-base": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

package/src/dashboard-layout/dashboard-layout.js

@@ -1610,7 +1610,7 @@ var DashboardLayout = /** @class */ (function (_super) {
         if (this.startRow < eleSwapRow) {
             direction = 1;
         }
-        else if (this.startRow > eleSwapRow) {
+        else if (this.startRow >= eleSwapRow) {
             direction = 0;
         }
         if (!this.swapAvailability(collisions, element)) {

package/styles/avatar/_all.scss

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

package/styles/avatar/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 // Avatar Base
 $avatar-base-border-radius: 8px !default;
 $avatar-base-background-color: $content-bg-color-alt3 !default;
@@ -8,6 +11,7 @@ $avatar-base-line-height: 22px !default;
 $avatar-base-text-color: $content-text-color-alt2 !default;
 $avatar-base-font-weight: $font-weight-medium !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;
@@ -27,6 +31,18 @@ $avatar-base-xlarge-line-height: 28px !default;
 //border
 $avatar-border: $avatar-border-color !default;
 
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;
+
 .e-avatar {
   border: 1px solid $avatar-border;
 }

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_bootstrap-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_bootstrap4-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
+
 // Avatar Base
 $avatar-base-border-radius: 4px !default;
 $avatar-base-font-size: 1.05em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: $gray-200 !default;
 $avatar-base-text-color: $gray-900 !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_bootstrap5-dark-definition.scss

@@ -1 +1,42 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+// Avatar Base
+$avatar-base-border-radius: 2px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+$avatar-large-border-radius: 4px !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_bootstrap5-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 // Avatar Base
 $avatar-base-border-radius: 2px !default;
 $avatar-base-background-color: $content-bg-color-alt3 !default;
@@ -8,6 +11,7 @@ $avatar-base-line-height: 22px !default;
 $avatar-base-text-color: $icon-color !default;
 $avatar-base-font-weight: $font-weight-medium !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;
@@ -24,3 +28,15 @@ $avatar-base-xsmall-line-height: 16px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 28px !default;
 $avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_bootstrap5.3-definition.scss

@@ -1,5 +1,8 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+
 // Avatar Base
-$avatar-base-border-radius: 2px !default;
+$avatar-base-border-radius: $radius-2 !default;
 $avatar-base-background-color: $content-bg-color-alt3 !default;
 $avatar-base-font-size: $text-sm !default;
 $avatar-base-width: 40px !default;
@@ -8,19 +11,32 @@ $avatar-base-line-height: 22px !default;
 $avatar-base-text-color: $icon-color !default;
 $avatar-base-font-weight: $font-weight-medium !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
-$avatar-circle-border-radius: 50% !default;
+$avatar-circle-border-radius: $border-radius-50p !default;
 
 // Avatar size
 $avatar-xsmall-font-size: $text-xxs !default;
 $avatar-small-font-size: $text-xs !default;
 $avatar-large-font-size: $text-lg !default;
 $avatar-xlarge-font-size: $text-xl !default;
-$avatar-large-border-radius: 4px !default;
+$avatar-large-border-radius: $radius-4 !default;
 
 // Avatar Line Height
 $avatar-base-xsmall-line-height: 16px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 28px !default;
 $avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;
@@ -16,3 +20,9 @@ $avatar-xsmall-font-size: .6em !default;
 $avatar-small-font-size: .8em !default;
 $avatar-large-font-size: 1.2em !default;
 $avatar-xlarge-font-size: 1.4em !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_fabric-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;
@@ -16,3 +20,9 @@ $avatar-xsmall-font-size: .6em !default;
 $avatar-small-font-size: .8em !default;
 $avatar-large-font-size: 1.2em !default;
 $avatar-xlarge-font-size: 1.4em !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

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

@@ -1 +1,41 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+// Avatar Base
+$avatar-base-border-radius: 4px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-base !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 24px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-normal !default;
+$avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-xl !default;
+$avatar-xlarge-font-size: $text-2xl !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_fluent-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
+
 // Avatar Base
 $avatar-base-border-radius: 4px !default;
 $avatar-base-background-color: $content-bg-color-alt3 !default;
@@ -8,6 +11,7 @@ $avatar-base-line-height: 24px !default;
 $avatar-base-text-color: $icon-color !default;
 $avatar-base-font-weight: $font-weight-normal !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;
@@ -23,3 +27,15 @@ $avatar-base-xsmall-line-height: 16px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 28px !default;
 $avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_fluent2-definition.scss

@@ -1,5 +1,8 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 // Avatar Base
-$avatar-base-border-radius: 4px !default;
+$avatar-base-border-radius: $radius-4 !default;
 $avatar-base-background-color: $content-bg-color-alt3 !default;
 $avatar-base-font-size: $text-sm !default;
 $avatar-base-width: 40px !default;
@@ -8,9 +11,11 @@ $avatar-base-line-height: 22px !default;
 $avatar-base-text-color: $content-text-color-alt2 !default;
 $avatar-base-font-weight: $font-weight-normal !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
+$avatar-border-width: 1px !default;
 
 // Circle Avatar
-$avatar-circle-border-radius: 50% !default;
+$avatar-circle-border-radius: $border-radius-50p !default;
 
 // Avatar size
 $avatar-xsmall-font-size: $text-sm !default;
@@ -26,3 +31,15 @@ $avatar-base-xlarge-line-height: 28px !default;
 
 //border
 $avatar-border: $dialog-border !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_fusionnew-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
+
 // Avatar Base
 $avatar-base-border-radius: 2px !default;
 $avatar-base-background-color: $content-bg-color-alt3 !default;
@@ -8,6 +11,7 @@ $avatar-base-line-height: 22px !default;
 $avatar-base-text-color: $icon-color !default;
 $avatar-base-font-weight: $font-weight-medium !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_highcontrast-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_layout.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin avatar-size($height, $width, $line-height) {
   height: $height;
   width: $width;
@@ -15,7 +17,7 @@
     border-radius: $avatar-base-border-radius;
     color: $avatar-base-text-color;
     display: inline-flex;
-    font-family: $font-family;
+    font-family: $avatar-font-family;
     font-size: $avatar-base-font-size;
     font-weight: $avatar-base-font-weight;
     height: $avatar-base-height;
@@ -29,7 +31,7 @@
 
     @if ($skin-name == 'fluent2') {
       &:has(:not(img)) {
-        border: 1px solid $avatar-border;
+        border: $avatar-border-width solid $avatar-border;
       }
     }
 
@@ -49,21 +51,21 @@
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(24px, 24px, $avatar-base-xsmall-line-height);
+        @include avatar-size($avatar-base-xsmall-height, $avatar-base-xsmall-width, $avatar-base-xsmall-line-height);
       }
     }
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(32px, 32px, $avatar-base-small-line-height);
+        @include avatar-size($avatar-base-small-height, $avatar-base-small-width, $avatar-base-small-line-height);
       }
     }
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(48px, 48px, $avatar-base-large-line-height);
+        @include avatar-size($avatar-base-large-height, $avatar-base-large-width, $avatar-base-large-line-height);
       }
       @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
         border-radius: $avatar-large-border-radius;
@@ -73,7 +75,7 @@
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(56px, 56px, $avatar-base-xlarge-line-height);
+        @include avatar-size($avatar-base-xlarge-height, $avatar-base-xlarge-width, $avatar-base-xlarge-line-height);
       }
       @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
         border-radius: $avatar-large-border-radius;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_material-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

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

@@ -1 +1,34 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$avatar-base-border-radius: $radius-4 !default;
+$avatar-base-background-color: rgba($primary-light) !default;
+$avatar-base-font-size: $text-xl !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 20px !default;
+$avatar-base-text-color: rgba($primary-darker) !default;
+$avatar-base-font-weight: 500 !default;
+$avatar-base-img-height: 100% !default;
+$avatar-circle-border-radius: $border-radius-50p !default;
+$avatar-xsmall-font-size: 14px !default;
+$avatar-small-font-size: 18px !default;
+$avatar-large-font-size: 26px !default;
+$avatar-xlarge-font-size: 30px !default;
+$avatar-large-border-radius: $radius-4 !default;
+$avatar-base-xsmall-line-height: 14px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 26px !default;
+$avatar-base-xlarge-line-height: 30px !default;
+$avatar-font-family: $font-family !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_material3-definition.scss

@@ -1,4 +1,6 @@
-$avatar-base-border-radius: 4px !default;
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
+$avatar-base-border-radius: $radius-4 !default;
 $avatar-base-background-color: rgba($primary-light) !default;
 $avatar-base-font-size: $text-xl !default;
 $avatar-base-width: 40px !default;
@@ -7,13 +9,26 @@ $avatar-base-line-height: 20px !default;
 $avatar-base-text-color: rgba($primary-darker) !default;
 $avatar-base-font-weight: 500 !default;
 $avatar-base-img-height: 100% !default;
-$avatar-circle-border-radius: 50% !default;
+$avatar-circle-border-radius: $border-radius-50p !default;
 $avatar-xsmall-font-size: 14px !default;
 $avatar-small-font-size: 18px !default;
 $avatar-large-font-size: 26px !default;
 $avatar-xlarge-font-size: 30px !default;
-$avatar-large-border-radius: 4px !default;
+$avatar-large-border-radius: $radius-4 !default;
 $avatar-base-xsmall-line-height: 14px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 26px !default;
 $avatar-base-xlarge-line-height: 30px !default;
+$avatar-font-family: $font-family !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_tailwind-dark-definition.scss

@@ -1 +1,41 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+// Avatar Base
+$avatar-base-border-radius: 4px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $content-text-color-alt2 !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;