@syncfusion/ej2-inputs 34.2.2 → 34.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.2.2
+*  version : 34.2.7
 *  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "34.2.2",
+  "version": "34.2.7",
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.2.2",
-    "@syncfusion/ej2-buttons": "~34.2.2",
-    "@syncfusion/ej2-popups": "~34.2.2",
-    "@syncfusion/ej2-splitbuttons": "~34.2.2"
+    "@syncfusion/ej2-base": "~34.2.6",
+    "@syncfusion/ej2-buttons": "~34.2.6",
+    "@syncfusion/ej2-popups": "~34.2.6",
+    "@syncfusion/ej2-splitbuttons": "~34.2.6"
   },
   "devDependencies": {},
   "keywords": [

package/src/input/input.js

@@ -40,6 +40,7 @@ export var Input;
     };
     var floatType;
     var isBindClearAction = true;
+    var resizeHandlers = new Map();
     /**
      * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
      * ```
@@ -462,6 +463,11 @@ export var Input;
             _internalRipple(false, null, args.buttons);
         }
         unwireFloatingEvents(args.element);
+        var resizeHandler = resizeHandlers.get(args.element);
+        if (resizeHandler) {
+            window.removeEventListener('resize', resizeHandler);
+            resizeHandlers.delete(args.element);
+        }
         if (!isNullOrUndefined(args.element)) {
             delete args.element.__eventHandlers;
             if (args.element.classList.contains(CLASSNAMES.INPUT)) {
@@ -582,10 +588,30 @@ export var Input;
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
     function calculateWidth(element, container, moduleName) {
+        if (moduleName !== 'multiselect' && element && container && !resizeHandlers.has(element)) {
+            var resizeHandler_1 = function () {
+                if (!document.documentElement.contains(container)) {
+                    window.removeEventListener('resize', resizeHandler_1);
+                    resizeHandlers.delete(element);
+                    return;
+                }
+                calculateWidth(element, container, moduleName);
+            };
+            resizeHandlers.set(element, resizeHandler_1);
+            window.addEventListener('resize', resizeHandler_1);
+        }
         if (moduleName !== 'multiselect' && !_isElementVisible(element)) {
             return;
         }
         var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
+        if (moduleName !== 'multiselect' && element && container) {
+            var iconWidth_1 = 0;
+            var icons = container.getElementsByClassName('e-input-group-icon');
+            Array.from(icons).forEach(function (icon) {
+                iconWidth_1 += icon.clientWidth + parseInt(getComputedStyle(icon, null).getPropertyValue('margin-right'), 10);
+            });
+            elementWidth = elementWidth + (iconWidth_1 - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10));
+        }
         if (!isNullOrUndefined(container) && !isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
@@ -627,7 +653,7 @@ export var Input;
     function setPlaceholder(placeholder, element, moduleName) {
         var modules = [
             'textbox', 'numerictextbox', 'textarea', 'combobox',
-            'datepicker', 'daterangepicker', 'datetimepicker'
+            'datepicker', 'daterangepicker', 'datetimepicker', 'maskedtextbox'
         ];
         placeholder = encodePlaceHolder(placeholder);
         var parentElement = getParentNode(element);

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

@@ -82,14 +82,17 @@ export interface MaskedTextBoxModel extends ComponentModel{
     enablePersistence?: boolean;
 
     /**
-     * Sets a value that masks the MaskedTextBox to allow/validate the user input.
-     * * Mask allows [`standard mask elements`](../../maskedtextbox/mask-configuration/#standard-mask-elements)
-     * </b>, <b>[`custom characters`](../../maskedtextbox/mask-configuration/#custom-characters)</b> and
-     * <b>[`regular expression`](../../maskedtextbox/mask-configuration/#regular-expression)</b> as mask
-     * elements.
-     * For more information on mask, refer to
-     * [mask](../../maskedtextbox/mask-configuration/#standard-mask-elements).
-     * * If the mask value is empty, the MaskedTextBox will behave as an input element with text type.
+     * Sets a value that masks the MaskedTextBox to allow or validate user input.
+     *
+     * Mask supports
+     * [`standard mask elements`](../../maskedtextbox/mask-configuration#standard-mask-elements),
+     * [`custom characters`](../../maskedtextbox/mask-configuration#custom-characters) snd
+     * [`regular expression`](../../maskedtextbox/mask-configuration#regular-expression)
+     * as mask elements.
+     *
+     * For more information, refer to the [mask](../../maskedtextbox/mask-configuration#standard-mask-elements) documentation.
+     *
+     * If the `mask` value is empty, the MaskedTextBox behaves as an input element with text type.
      *
      * {% codeBlock src='maskedtextbox/mask/index.md' %}{% endcodeBlock %}
      *

package/src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -111,14 +111,17 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
      */
     enablePersistence: boolean;
     /**
-     * Sets a value that masks the MaskedTextBox to allow/validate the user input.
-     * * Mask allows [`standard mask elements`](../../maskedtextbox/mask-configuration/#standard-mask-elements)
-     * </b>, <b>[`custom characters`](../../maskedtextbox/mask-configuration/#custom-characters)</b> and
-     * <b>[`regular expression`](../../maskedtextbox/mask-configuration/#regular-expression)</b> as mask
-     * elements.
-     * For more information on mask, refer to
-     * [mask](../../maskedtextbox/mask-configuration/#standard-mask-elements).
-     * * If the mask value is empty, the MaskedTextBox will behave as an input element with text type.
+     * Sets a value that masks the MaskedTextBox to allow or validate user input.
+     *
+     * Mask supports
+     * [`standard mask elements`](../../maskedtextbox/mask-configuration#standard-mask-elements),
+     * [`custom characters`](../../maskedtextbox/mask-configuration#custom-characters) snd
+     * [`regular expression`](../../maskedtextbox/mask-configuration#regular-expression)
+     * as mask elements.
+     *
+     * For more information, refer to the [mask](../../maskedtextbox/mask-configuration#standard-mask-elements) documentation.
+     *
+     * If the `mask` value is empty, the MaskedTextBox behaves as an input element with text type.
      *
      * {% codeBlock src='maskedtextbox/mask/index.md' %}{% endcodeBlock %}
      *

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -240,7 +240,7 @@ var MaskedTextBox = /** @class */ (function (_super) {
     };
     MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) {
         if (dynamicPlaceholder || this.placeholder) {
-            Input.setPlaceholder(this.placeholder, this.element);
+            Input.setPlaceholder(this.placeholder, this.element, this.getModuleName());
             if ((this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') ||
                 this.element.value === this.promptMask && this.floatLabelType === 'Never') {
                 setElementValue.call(this, '');

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

@@ -26,8 +26,6 @@ export interface NumericTextBoxModel extends ComponentModel{
 
     /**
      * Specifies a minimum value that is allowed a user can enter.
-     * For more information on min, refer to
-     * [min](../../numerictextbox/getting-started/#range-validation).
      *
      * @default null
      * @aspType object
@@ -38,8 +36,6 @@ export interface NumericTextBoxModel extends ComponentModel{
 
     /**
      * Specifies a maximum value that is allowed a user can enter.
-     * For more information on max, refer to
-     * [max](../../numerictextbox/getting-started/#range-validation).
      *
      * @default null
      * @aspType object
@@ -50,8 +46,6 @@ export interface NumericTextBoxModel extends ComponentModel{
 
     /**
      * Specifies the incremental or decremental step size for the NumericTextBox.
-     * For more information on step, refer to
-     * [step](../../numerictextbox/getting-started/#range-validation).
      *
      * @default 1
      * @isGenericType true
@@ -121,8 +115,7 @@ export interface NumericTextBoxModel extends ComponentModel{
 
     /**
      * Specifies the number format that indicates the display format for the value of the NumericTextBox.
-     * For more information on formats, refer to
-     * [formats](../../numerictextbox/formats/#standard-formats).
+     * For more information on formats, refer to [formats](../../numerictextbox/formats#standard-formats).
      *
      * @default 'n2'
      */
@@ -130,8 +123,6 @@ export interface NumericTextBoxModel extends ComponentModel{
 
     /**
      * Specifies the number precision applied to the textbox value when the NumericTextBox is focused.
-     * For more information on decimals, refer to
-     * [decimals](../../numerictextbox/formats/#precision-of-numbers).
      *
      * @default null
      */

package/src/numerictextbox/numerictextbox.d.ts

@@ -54,6 +54,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private prependedElement;
     private appendedElement;
     private iconTemplateFunction;
+    private resizeHandler;
     /**
      * Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the
      * complete UI styles for the NumericTextBox component.
@@ -71,8 +72,6 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     value: number;
     /**
      * Specifies a minimum value that is allowed a user can enter.
-     * For more information on min, refer to
-     * [min](../../numerictextbox/getting-started/#range-validation).
      *
      * @default null
      * @aspType object
@@ -82,8 +81,6 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     min: number;
     /**
      * Specifies a maximum value that is allowed a user can enter.
-     * For more information on max, refer to
-     * [max](../../numerictextbox/getting-started/#range-validation).
      *
      * @default null
      * @aspType object
@@ -93,8 +90,6 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     max: number;
     /**
      * Specifies the incremental or decremental step size for the NumericTextBox.
-     * For more information on step, refer to
-     * [step](../../numerictextbox/getting-started/#range-validation).
      *
      * @default 1
      * @isGenericType true
@@ -157,16 +152,13 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     enablePersistence: boolean;
     /**
      * Specifies the number format that indicates the display format for the value of the NumericTextBox.
-     * For more information on formats, refer to
-     * [formats](../../numerictextbox/formats/#standard-formats).
+     * For more information on formats, refer to [formats](../../numerictextbox/formats#standard-formats).
      *
      * @default 'n2'
      */
     format: string;
     /**
      * Specifies the number precision applied to the textbox value when the NumericTextBox is focused.
-     * For more information on decimals, refer to
-     * [decimals](../../numerictextbox/formats/#precision-of-numbers).
      *
      * @default null
      */
@@ -355,6 +347,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private keyPressHandler;
     private numericRegex;
     private mouseWheel;
+    private windowResize;
     private focusHandler;
     private focusOutHandler;
     private mouseDownOnSpinner;

package/src/numerictextbox/numerictextbox.js

@@ -495,6 +495,8 @@ var NumericTextBox = /** @class */ (function (_super) {
                 EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);
             }
         }
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     NumericTextBox.prototype.wireSpinBtnEvents = function () {
         /* bind spin button events */
@@ -517,6 +519,10 @@ var NumericTextBox = /** @class */ (function (_super) {
         if (this.formEle) {
             EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     };
     NumericTextBox.prototype.unwireSpinBtnEvents = function () {
         /* unbind spin button events */
@@ -1043,6 +1049,9 @@ var NumericTextBox = /** @class */ (function (_super) {
         }
         this.cancelEvent(event);
     };
+    NumericTextBox.prototype.windowResize = function () {
+        this.updateFloatLabelOverflowWidth();
+    };
     NumericTextBox.prototype.focusHandler = function (event) {
         var _this = this;
         clearTimeout(selectionTimeOut);

package/src/textarea/textarea.d.ts

@@ -25,6 +25,7 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
     private prependedElement;
     private appendedElement;
     private iconTemplateFn;
+    private resizeHandler;
     /**
      * Specifies the boolean value whether the TextArea allows user to change the text.
      *
@@ -247,6 +248,7 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
      * @returns {void}
      */
     destroy(): void;
+    private windowResize;
     private focusHandler;
     private focusOutHandler;
     protected keydownHandler(args: KeyboardEvent): void;

package/src/textarea/textarea.js

@@ -494,6 +494,8 @@ var TextArea = /** @class */ (function (_super) {
             EventHandler.add(this.formElement, 'reset', this.resetForm, this);
         }
         this.bindClearEvent();
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     TextArea.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'focus', this.focusHandler);
@@ -504,6 +506,10 @@ var TextArea = /** @class */ (function (_super) {
         if (this.isForm) {
             EventHandler.remove(this.formElement, 'reset', this.resetForm);
         }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     };
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
@@ -542,6 +548,9 @@ var TextArea = /** @class */ (function (_super) {
         }
         _super.prototype.destroy.call(this);
     };
+    TextArea.prototype.windowResize = function () {
+        this.updateFloatLabelOverflowWidth();
+    };
     TextArea.prototype.focusHandler = function (args) {
         var eventArgs = {
             container: this.textareaWrapper.container,

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

@@ -229,7 +229,7 @@ export interface UploaderModel extends ComponentModel{
      * Specifies the drop target to handle the drag-and-drop upload.
      * By default, the component creates wrapper around file input that will act as drop target.
      *
-     * > For more information, refer to the [drag-and-drop](../../uploader/file-source/#drag-and-drop) section from the documentation.
+     * > For more information, refer to the [drag-and-drop](../../uploader/file-source#drag-and-drop) section from the documentation.
      *
      * @default null
      */

package/src/uploader/uploader.d.ts

@@ -642,7 +642,7 @@ export declare class Uploader extends Component<HTMLInputElement> implements INo
      * Specifies the drop target to handle the drag-and-drop upload.
      * By default, the component creates wrapper around file input that will act as drop target.
      *
-     * > For more information, refer to the [drag-and-drop](../../uploader/file-source/#drag-and-drop) section from the documentation.
+     * > For more information, refer to the [drag-and-drop](../../uploader/file-source#drag-and-drop) section from the documentation.
      *
      * @default null
      */

package/styles/fluent2-lite.css

@@ -2185,8 +2185,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 14px;
   top: -28px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.92);
+          transform: translate3d(-8px, 6px, 0) scale(0.92);
 }
 
 .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -2407,8 +2407,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],

package/styles/fluent2.css

@@ -2185,8 +2185,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 14px;
   top: -28px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.92);
+          transform: translate3d(-8px, 6px, 0) scale(0.92);
 }
 
 .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -2407,8 +2407,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],
@@ -6905,8 +6905,8 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -6933,8 +6933,8 @@ textarea.e-input.e-bigger.e-small,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-input-group.e-bigger textarea,

package/styles/input/_bigger.scss

@@ -2088,7 +2088,15 @@
   .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      transform: translate3d(0, 6px, 0) scale(.86);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.86);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.86);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.86);
+      }
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
@@ -2142,7 +2150,15 @@
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      transform: translate3d(0, 6px, 0) scale(.86);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.86);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.86);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.86);
+      }
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;

package/styles/input/_layout.scss

@@ -2432,7 +2432,16 @@
     font-size: $float-label-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       top: $textarea-float-top;
-      transform: translate3d(0, 6px, 0) scale(.92);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.92);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.92);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.92);
+      }
+
       @if $input-skin-name == 'tailwind3' {
         left: 2px;
       }
@@ -2859,7 +2868,15 @@
   .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      transform: translate3d(0, 6px, 0) scale(.86);
+      @if $input-skin-name == 'fluent2'{
+        transform: translate3d(-8px, 6px, 0) scale(.86);
+      }
+      @else if $input-skin-name == 'tailwind3'{
+        transform: translate3d(-10px, 6px, 0) scale(.86);
+      }
+      @else{
+        transform: translate3d(0, 6px, 0) scale(.86);
+      }
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;

package/styles/input/fluent2.css

@@ -2175,8 +2175,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 14px;
   top: -28px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.92);
+          transform: translate3d(-8px, 6px, 0) scale(0.92);
 }
 
 .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -2397,8 +2397,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],
@@ -6895,8 +6895,8 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -6923,8 +6923,8 @@ textarea.e-input.e-bigger.e-small,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-8px, 6px, 0) scale(0.86);
+          transform: translate3d(-8px, 6px, 0) scale(0.86);
 }
 
 .e-input-group.e-bigger textarea,

package/styles/input/tailwind3.css

@@ -1848,8 +1848,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 12px;
   top: -24px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.92);
+          transform: translate3d(-10px, 6px, 0) scale(0.92);
   left: 2px;
 }
 
@@ -1998,8 +1998,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],
@@ -6499,8 +6499,8 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -6527,8 +6527,8 @@ textarea.e-input.e-bigger.e-small,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-input-group.e-bigger textarea,

package/styles/tailwind3-lite.css

@@ -1860,8 +1860,8 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
   font-size: 12px;
   top: -24px;
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.92);
-          transform: translate3d(0, 6px, 0) scale(0.92);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.92);
+          transform: translate3d(-10px, 6px, 0) scale(0.92);
   left: 2px;
 }
 
@@ -2010,8 +2010,8 @@ textarea.e-input.e-small.e-rtl,
 .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
 .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-  -webkit-transform: translate3d(0, 6px, 0) scale(0.86);
-          transform: translate3d(0, 6px, 0) scale(0.86);
+  -webkit-transform: translate3d(-10px, 6px, 0) scale(0.86);
+          transform: translate3d(-10px, 6px, 0) scale(0.86);
 }
 
 .e-float-input textarea[disabled],