@syncfusion/ej2-inplace-editor 25.2.3 → 26.1.35

package/styles/material-dark.scss

@@ -1 +1,26 @@
-@import 'inplace-editor/material-dark.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
+@import 'ej2-inputs/styles/input/material-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/material-dark-definition.scss';
+@import 'ej2-inputs/styles/maskedtextbox/material-dark-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/material-dark-definition.scss';
+@import 'ej2-inputs/styles/slider/material-dark-definition.scss';
+@import 'ej2-inputs/styles/textbox/material-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/material-dark-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material-dark-definition.scss';
+@import 'ej2-calendars/styles/calendar/material-dark-definition.scss';
+@import 'ej2-calendars/styles/datepicker/material-dark-definition.scss';
+@import 'ej2-calendars/styles/daterangepicker/material-dark-definition.scss';
+@import 'ej2-calendars/styles/datetimepicker/material-dark-definition.scss';
+@import 'ej2-calendars/styles/timepicker/material-dark-definition.scss';
+@import 'ej2-dropdowns/styles/auto-complete/material-dark-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/material-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/material-dark-definition.scss';
+@import 'ej2-dropdowns/styles/multi-select/material-dark-definition.scss';
+@import 'ej2-popups/styles/popup/material-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/material-dark-definition.scss';
+@import 'ej2-popups/styles/tooltip/material-dark-definition.scss';
+@import 'ej2-richtexteditor/styles/rich-text-editor/material-dark-definition.scss';
+@import 'inplace-editor/material-dark-definition.scss';
+@import 'inplace-editor/icons/material-dark.scss';
+@import 'inplace-editor/all.scss';

package/styles/material.css

@@ -1,27 +1,56 @@
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
-    transform: scale(4);
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@-webkit-keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes slideTopUp {
   from {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
   to {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
-/* stylelint-disable-line no-empty-source */ /*! calendar material theme variables */
+/* stylelint-disable-line no-empty-source */
+/*! calendar material theme variables */
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
-  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -38,12 +67,14 @@
 }
 
 .e-input-group .e-ddl-icon:not(:active)::after {
-  animation: none;
+  -webkit-animation: none;
+          animation: none;
 }
 
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   margin-top: 2px;
 }
 
@@ -63,7 +94,8 @@
 .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
   background: #f5f5f5;
   border-width: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-bottom: 0;
 }
 
@@ -155,19 +187,43 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -314,6 +370,7 @@
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -324,8 +381,10 @@
   width: 18px;
 }
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -335,6 +394,7 @@
 }
 .e-inplaceeditor .e-editable-value-wrapper.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -367,6 +427,7 @@
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -377,8 +438,10 @@
   width: 18px;
 }
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -388,6 +451,7 @@
 }
 .e-inplaceeditor .e-editable-value-container.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -412,6 +476,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -491,7 +556,8 @@
 .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: auto;
   right: 5px;
-  transform: translateX(-30%) translateY(-50%);
+  -webkit-transform: translateX(-30%) translateY(-50%);
+          transform: translateX(-30%) translateY(-50%);
 }
 .e-inplaceeditor .e-editable-form,
 .e-inplaceeditor-tip .e-editable-form {
@@ -519,6 +585,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -555,7 +622,8 @@
 .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: 5px;
   right: auto;
-  transform: translateX(30%) translateY(-50%);
+  -webkit-transform: translateX(30%) translateY(-50%);
+          transform: translateX(30%) translateY(-50%);
 }
 
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
@@ -607,19 +675,24 @@
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title {
   -ms-flex-line-pack: center;
       align-content: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
   font-size: 13px;
   font-weight: 500;
   height: 30px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 0 0 0 10px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 16px;
@@ -632,6 +705,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 16px;
@@ -734,7 +808,8 @@
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #fff;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 2px;

package/styles/material.scss

@@ -1 +1,26 @@
-@import 'inplace-editor/material.scss';
+@import 'ej2-base/styles/definition/material.scss';
+@import 'ej2-inputs/styles/input/material-definition.scss';
+@import 'ej2-inputs/styles/color-picker/material-definition.scss';
+@import 'ej2-inputs/styles/maskedtextbox/material-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/material-definition.scss';
+@import 'ej2-inputs/styles/slider/material-definition.scss';
+@import 'ej2-inputs/styles/textbox/material-definition.scss';
+@import 'ej2-buttons/styles/button/material-definition.scss';
+@import 'ej2-buttons/styles/check-box/material-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material-definition.scss';
+@import 'ej2-calendars/styles/calendar/material-definition.scss';
+@import 'ej2-calendars/styles/datepicker/material-definition.scss';
+@import 'ej2-calendars/styles/daterangepicker/material-definition.scss';
+@import 'ej2-calendars/styles/datetimepicker/material-definition.scss';
+@import 'ej2-calendars/styles/timepicker/material-definition.scss';
+@import 'ej2-dropdowns/styles/auto-complete/material-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/material-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/material-definition.scss';
+@import 'ej2-dropdowns/styles/multi-select/material-definition.scss';
+@import 'ej2-popups/styles/popup/material-definition.scss';
+@import 'ej2-popups/styles/spinner/material-definition.scss';
+@import 'ej2-popups/styles/tooltip/material-definition.scss';
+@import 'ej2-richtexteditor/styles/rich-text-editor/material-definition.scss';
+@import 'inplace-editor/material-definition.scss';
+@import 'inplace-editor/icons/material.scss';
+@import 'inplace-editor/all.scss';

package/styles/material3-dark.css

@@ -44,7 +44,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -54,29 +54,58 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
-    transform: scale(4);
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@-webkit-keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes slideTopUp {
   from {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
   to {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
-/* stylelint-disable-line no-empty-source */ /*! calendar material3 theme variables */
+/* stylelint-disable-line no-empty-source */
+/*! calendar material3 theme variables */
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
-  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -93,12 +122,14 @@
 }
 
 .e-input-group .e-ddl-icon:not(:active)::after {
-  animation: none;
+  -webkit-animation: none;
+          animation: none;
 }
 
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   margin-top: 2px;
 }
 
@@ -119,7 +150,8 @@
 .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
   background: rgba(0, 0, 0, 0.0001);
   border-width: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-bottom: 0;
 }
 
@@ -212,19 +244,43 @@
 
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -363,6 +419,7 @@
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -373,8 +430,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -384,6 +443,7 @@
 }
 .e-inplaceeditor .e-editable-value-wrapper.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -416,6 +476,7 @@
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -426,8 +487,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -437,6 +500,7 @@
 }
 .e-inplaceeditor .e-editable-value-container.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -461,6 +525,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -526,7 +591,8 @@
 .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: auto;
   right: 5px;
-  transform: translateX(-30%) translateY(-50%);
+  -webkit-transform: translateX(-30%) translateY(-50%);
+          transform: translateX(-30%) translateY(-50%);
 }
 .e-inplaceeditor .e-editable-form,
 .e-inplaceeditor-tip .e-editable-form {
@@ -554,6 +620,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -590,7 +657,8 @@
 .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: 5px;
   right: auto;
-  transform: translateX(30%) translateY(-50%);
+  -webkit-transform: translateX(30%) translateY(-50%);
+          transform: translateX(30%) translateY(-50%);
 }
 
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
@@ -642,19 +710,24 @@
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title {
   -ms-flex-line-pack: center;
       align-content: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 24px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 20px 20px 12px 20px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -667,6 +740,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -720,6 +794,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-wrapper:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -737,6 +812,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-container:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -768,13 +844,16 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
   border-radius: 0;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 20px;
   color: rgba(var(--color-sf-on-surface));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
@@ -791,6 +870,7 @@
   border-radius: 8px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   color: rgba(var(--color-sf-on-surface));

package/styles/material3-dark.scss

@@ -1,3 +1,28 @@
 
 
-@import 'inplace-editor/material3-dark.scss';
+
+@import 'ej2-inputs/styles/input/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/maskedtextbox/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/slider/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/textbox/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/calendar/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/datepicker/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/daterangepicker/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/datetimepicker/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/timepicker/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/auto-complete/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/multi-select/material3-dark-definition.scss';
+@import 'ej2-popups/styles/popup/material3-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/material3-dark-definition.scss';
+@import 'ej2-popups/styles/tooltip/material3-dark-definition.scss';
+@import 'ej2-richtexteditor/styles/rich-text-editor/material3-dark-definition.scss';
+@import 'inplace-editor/material3-dark-definition.scss';
+@import 'inplace-editor/icons/material3-dark.scss';
+@import 'inplace-editor/all.scss';