@syncfusion/ej2-inputs 22.2.9 → 23.1.36

package/styles/maskedtextbox/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import '../input/material3-dark-definition.scss';
 @import 'material3-dark-definition.scss';

package/styles/maskedtextbox/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/maskedtextbox/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import '../input/material3-definition.scss';
 @import 'material3-definition.scss';

package/styles/maskedtextbox/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* stylelint-disable property-no-vendor-prefix */
 /*! maskedtextbox layout */
 .e-control-wrapper.e-mask .e-maskedtextbox {

package/styles/maskedtextbox/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import '../input/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'all.scss';

package/styles/maskedtextbox/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* stylelint-disable property-no-vendor-prefix */
 /*! maskedtextbox layout */
 .e-control-wrapper.e-mask .e-maskedtextbox {

package/styles/maskedtextbox/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import '../input/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'all.scss';

package/styles/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 .e-signature {
   border: 1px solid;
 }
@@ -1324,6 +1323,26 @@ label.e-float-text,
           user-select: text;
 }
 
+.e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -34px;
+  width: auto;
+}
+
+.e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -34px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -40px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -40px;
+  width: auto;
+}
+
 label.e-float-text,
 .e-float-input label.e-float-text,
 .e-float-input.e-control-wrapper label.e-float-text,
@@ -3296,7 +3315,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
   border: 1px solid;
   border-width: 0 0 1px 0;
-  margin-left: 16px;
+  margin-left: 8px;
 }
 
 .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
@@ -3307,7 +3326,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
 .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
   margin-left: 0;
-  margin-right: 16px;
+  margin-right: 8px;
 }
 
 .e-float-input input.e-input,
@@ -4214,6 +4233,14 @@ textarea.e-outline.e-input,
   border-top-color: transparent;
 }
 
+.e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
+  border-top-color: transparent;
+}
+
 .e-outline.e-input-group,
 .e-outline .e-input-group,
 .e-outline .e-input-group.e-control-wrapper,
@@ -4342,20 +4369,12 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
 .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
   border-color: #00b0ff;
   box-shadow: inset 1px 1px #00b0ff, inset -1px 0 #00b0ff, inset 0 -1px #00b0ff;
 }
@@ -4369,11 +4388,27 @@ textarea.e-outline.e-input,
   margin-left: 0;
 }
 
+.e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
+  margin-right: 0;
+}
+
 .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-  margin: 9px 12px 9px 0;
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
 
 .e-outline.e-float-input .e-clear-icon,
@@ -4786,6 +4821,22 @@ textarea.e-input.e-small.e-outline,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
   margin-left: 0;
   margin-right: 8px;
 }
@@ -5172,7 +5223,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
 .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-  line-height: 50px;
+  line-height: 54px;
 }
 
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5287,6 +5338,15 @@ textarea.e-input.e-bigger.e-small.e-outline,
   transition: border-color 0.1s, box-shadow 0.2s;
 }
 
+.e-outline.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
+  transition: none;
+}
+
 .e-bigger.e-outline label.e-float-text::before,
 .e-bigger.e-outline label.e-float-text::after,
 .e-bigger.e-outline.e-float-input label.e-float-text::before,
@@ -14848,7 +14908,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 20px;
   padding: 4px;
-  line-height: 13px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -14946,7 +15005,6 @@ body.e-colorpicker-overflow {
 .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
-  line-height: 9px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -14961,7 +15019,6 @@ body.e-colorpicker-overflow {
 .e-bigger.e-rating-container .e-rating-item-container,
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
-  line-height: 21px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -14978,7 +15035,6 @@ body.e-colorpicker-overflow {
 .e-bigger .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
-  line-height: 17px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 .e-signature {
   border: 1px solid;
 }
@@ -1332,6 +1331,26 @@ label.e-float-text,
           user-select: text;
 }
 
+.e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -34px;
+  width: auto;
+}
+
+.e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -34px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -40px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -40px;
+  width: auto;
+}
+
 label.e-float-text,
 .e-float-input label.e-float-text,
 .e-float-input.e-control-wrapper label.e-float-text,
@@ -3304,7 +3323,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
   border: 1px solid;
   border-width: 0 0 1px 0;
-  margin-left: 16px;
+  margin-left: 8px;
 }
 
 .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
@@ -3315,7 +3334,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
 .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
   margin-left: 0;
-  margin-right: 16px;
+  margin-right: 8px;
 }
 
 .e-float-input input.e-input,
@@ -4222,6 +4241,14 @@ textarea.e-outline.e-input,
   border-top-color: transparent;
 }
 
+.e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
+  border-top-color: transparent;
+}
+
 .e-outline.e-input-group,
 .e-outline .e-input-group,
 .e-outline .e-input-group.e-control-wrapper,
@@ -4350,20 +4377,12 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
 .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
   border-color: #e3165b;
   box-shadow: inset 1px 1px #e3165b, inset -1px 0 #e3165b, inset 0 -1px #e3165b;
 }
@@ -4377,11 +4396,27 @@ textarea.e-outline.e-input,
   margin-left: 0;
 }
 
+.e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
+  margin-right: 0;
+}
+
 .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-  margin: 9px 12px 9px 0;
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
 
 .e-outline.e-float-input .e-clear-icon,
@@ -4794,6 +4829,22 @@ textarea.e-input.e-small.e-outline,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
   margin-left: 0;
   margin-right: 8px;
 }
@@ -5180,7 +5231,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
 .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-  line-height: 50px;
+  line-height: 54px;
 }
 
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5295,6 +5346,15 @@ textarea.e-input.e-bigger.e-small.e-outline,
   transition: border-color 0.1s, box-shadow 0.2s;
 }
 
+.e-outline.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
+  transition: none;
+}
+
 .e-bigger.e-outline label.e-float-text::before,
 .e-bigger.e-outline label.e-float-text::after,
 .e-bigger.e-outline.e-float-input label.e-float-text::before,
@@ -14892,7 +14952,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 20px;
   padding: 4px;
-  line-height: 13px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -14990,7 +15049,6 @@ body.e-colorpicker-overflow {
 .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
-  line-height: 9px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -15005,7 +15063,6 @@ body.e-colorpicker-overflow {
 .e-bigger.e-rating-container .e-rating-item-container,
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
-  line-height: 21px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -15022,7 +15079,6 @@ body.e-colorpicker-overflow {
 .e-bigger .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
-  line-height: 17px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;
@@ -1368,6 +1367,26 @@ label.e-float-text,
           user-select: text;
 }
 
+.e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -34px;
+  width: auto;
+}
+
+.e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -34px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  left: -40px;
+  width: auto;
+}
+
+.e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
+  right: -40px;
+  width: auto;
+}
+
 label.e-float-text,
 .e-float-input label.e-float-text,
 .e-float-input.e-control-wrapper label.e-float-text,
@@ -3246,7 +3265,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
   border: 1px solid;
   border-width: 0 0 1px 0;
-  margin-left: 16px;
+  margin-left: 8px;
 }
 
 .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
@@ -3257,7 +3276,7 @@ textarea.e-input.e-bigger.e-small,
 .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
 .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
   margin-left: 0;
-  margin-right: 16px;
+  margin-right: 8px;
 }
 
 .e-float-input input.e-input,
@@ -4164,6 +4183,14 @@ textarea.e-outline.e-input,
   border-top-color: transparent;
 }
 
+.e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+.e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
+  border-top-color: transparent;
+}
+
 .e-outline.e-input-group,
 .e-outline .e-input-group,
 .e-outline .e-input-group.e-control-wrapper,
@@ -4292,20 +4319,12 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-.e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
 .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
 .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-.e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+.e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
   border-color: rgba(var(--color-sf-primary));
   box-shadow: inset 1px 1px rgba(var(--color-sf-primary)), inset -1px 0 rgba(var(--color-sf-primary)), inset 0 -1px rgba(var(--color-sf-primary));
 }
@@ -4319,11 +4338,27 @@ textarea.e-outline.e-input,
   margin-left: 0;
 }
 
+.e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
+  margin-right: 0;
+}
+
 .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-  margin: 9px 12px 9px 0;
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
 
 .e-outline.e-float-input .e-clear-icon,
@@ -4738,6 +4773,22 @@ textarea.e-input.e-small.e-outline,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
 .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
 .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
+  margin-left: 8px;
+  margin-right: 0;
+}
+
+.e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
+.e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
+.e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
   margin-left: 0;
   margin-right: 8px;
 }
@@ -5124,7 +5175,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
 .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-  line-height: 50px;
+  line-height: 54px;
 }
 
 .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5239,6 +5290,15 @@ textarea.e-input.e-bigger.e-small.e-outline,
   transition: border-color 0.1s, box-shadow 0.2s;
 }
 
+.e-outline.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
+.e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
+  transition: none;
+}
+
 .e-bigger.e-outline label.e-float-text::before,
 .e-bigger.e-outline label.e-float-text::after,
 .e-bigger.e-outline.e-float-input label.e-float-text::before,
@@ -14894,7 +14954,6 @@ body.e-colorpicker-overflow {
   cursor: pointer;
   font-size: 20px;
   padding: 4px;
-  line-height: 13px;
   display: block;
   min-width: calc(1em + 8px);
   min-height: calc(1em + 8px);
@@ -14992,7 +15051,6 @@ body.e-colorpicker-overflow {
 .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
-  line-height: 9px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -15007,7 +15065,6 @@ body.e-colorpicker-overflow {
 .e-bigger.e-rating-container .e-rating-item-container,
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
-  line-height: 21px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -15024,7 +15081,6 @@ body.e-colorpicker-overflow {
 .e-bigger .e-small.e-rating-container .e-rating-item-container,
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
-  line-height: 17px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
@@ -15088,7 +15144,7 @@ body.e-colorpicker-overflow {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px rgba(var(--color-sf-primary))-10%;
+  -webkit-text-stroke: 1px rgba(var(--color-sf-primary));
 }
 .e-rating-container.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, rgba(var(--color-sf-primary)) var(--rating-value), transparent var(--rating-value));

package/styles/material3-dark.scss

@@ -1,5 +1,5 @@
 
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 @import 'signature/material3-dark.scss';
 @import 'input/material3-dark.scss';
 @import 'numerictextbox/material3-dark.scss';