diff --git a/packages/html/src/autocomplete/tests/autocomplete-flat.tsx b/packages/html/src/autocomplete/tests/autocomplete-flat.tsx
index 8efbefddce5..be7e6082354 100644
--- a/packages/html/src/autocomplete/tests/autocomplete-flat.tsx
+++ b/packages/html/src/autocomplete/tests/autocomplete-flat.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>Autocomplete Flat</span>
             <span>Autocomplete Flat RTL</span>
 
+            <div>
+                <AutocompleteNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <AutocompleteNormal fillMode="flat" />
+            </div>
             <div>
                 <AutocompleteNormal fillMode="flat" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/autocomplete/tests/autocomplete-outline.tsx b/packages/html/src/autocomplete/tests/autocomplete-outline.tsx
index 8a5532e28ee..d0ae7e6d229 100644
--- a/packages/html/src/autocomplete/tests/autocomplete-outline.tsx
+++ b/packages/html/src/autocomplete/tests/autocomplete-outline.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>Autocomplete Outline</span>
             <span>Autocomplete Outline RTL</span>
 
+            <div>
+                <AutocompleteNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <AutocompleteNormal fillMode="outline" />
+            </div>
             <div>
                 <AutocompleteNormal fillMode="outline" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/autocomplete/tests/autocomplete-solid.tsx b/packages/html/src/autocomplete/tests/autocomplete-solid.tsx
index accd30cd92e..e5270ac5177 100644
--- a/packages/html/src/autocomplete/tests/autocomplete-solid.tsx
+++ b/packages/html/src/autocomplete/tests/autocomplete-solid.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>Autocomplete</span>
             <span>Autocomplete RTL</span>
 
+            <div>
+                <AutocompleteNormal />
+            </div>
+            <div dir="rtl">
+                <AutocompleteNormal />
+            </div>
             <div>
                 <AutocompleteNormal placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/combobox/tests/combobox-flat.tsx b/packages/html/src/combobox/tests/combobox-flat.tsx
index 0dcaaa2f9fe..4934b7b7ea2 100644
--- a/packages/html/src/combobox/tests/combobox-flat.tsx
+++ b/packages/html/src/combobox/tests/combobox-flat.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>ComboBox Flat</span>
             <span>ComboBox Flat RTL</span>
 
+            <div>
+                <ComboboxNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <ComboboxNormal fillMode="flat" />
+            </div>
             <div>
                 <ComboboxNormal fillMode="flat" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/combobox/tests/combobox-outline.tsx b/packages/html/src/combobox/tests/combobox-outline.tsx
index 7169f245f74..d2557f4f460 100644
--- a/packages/html/src/combobox/tests/combobox-outline.tsx
+++ b/packages/html/src/combobox/tests/combobox-outline.tsx
@@ -15,6 +15,12 @@ export default () =>(
             <span>ComboBox Outline</span>
             <span>ComboBox Outline RTL</span>
 
+            <div>
+                <ComboboxNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <ComboboxNormal fillMode="outline" />
+            </div>
             <div>
                 <ComboboxNormal fillMode="outline" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/combobox/tests/combobox-solid.tsx b/packages/html/src/combobox/tests/combobox-solid.tsx
index 3345d9279dd..72e31db0aca 100644
--- a/packages/html/src/combobox/tests/combobox-solid.tsx
+++ b/packages/html/src/combobox/tests/combobox-solid.tsx
@@ -15,6 +15,12 @@ export default () =>(
             <span>ComboBox</span>
             <span>ComboBox RTL</span>
 
+            <div>
+                <ComboboxNormal />
+            </div>
+            <div dir="rtl">
+                <ComboboxNormal />
+            </div>
             <div>
                 <ComboboxNormal placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/dropdowngrid/tests/dropdowngrid-flat.tsx b/packages/html/src/dropdowngrid/tests/dropdowngrid-flat.tsx
index 453db932b2c..e8f1c7a3bb1 100644
--- a/packages/html/src/dropdowngrid/tests/dropdowngrid-flat.tsx
+++ b/packages/html/src/dropdowngrid/tests/dropdowngrid-flat.tsx
@@ -14,6 +14,13 @@ export default () =>(
             <span>DropdownGrid Flat</span>
             <span>DropdownGrid Flat RTL</span>
 
+            <div>
+                <DropdownGridNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <DropdownGridNormal fillMode="flat" />
+            </div>
+
             <div>
                 <DropdownGridNormal fillMode="flat" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/dropdowngrid/tests/dropdowngrid-outline.tsx b/packages/html/src/dropdowngrid/tests/dropdowngrid-outline.tsx
index 0a85c395e74..62918f9db3e 100644
--- a/packages/html/src/dropdowngrid/tests/dropdowngrid-outline.tsx
+++ b/packages/html/src/dropdowngrid/tests/dropdowngrid-outline.tsx
@@ -15,10 +15,10 @@ export default () =>(
             <span>DropdownGrid Outline RTL</span>
 
             <div>
-                <DropdownGrid fillMode="outline" placeholder="DropdownGrid..." />
+                <DropdownGridNormal fillMode="outline" />
             </div>
             <div dir="rtl">
-                <DropdownGrid fillMode="outline" placeholder="DropdownGrid..." />
+                <DropdownGridNormal fillMode="outline" />
             </div>
 
             <div>
diff --git a/packages/html/src/dropdowngrid/tests/dropdowngrid-solid.tsx b/packages/html/src/dropdowngrid/tests/dropdowngrid-solid.tsx
index f4e8b26fd5e..2008ed81011 100644
--- a/packages/html/src/dropdowngrid/tests/dropdowngrid-solid.tsx
+++ b/packages/html/src/dropdowngrid/tests/dropdowngrid-solid.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>DropdownGrid</span>
             <span>DropdownGrid RTL</span>
 
+            <div>
+                <DropdownGridNormal />
+            </div>
+            <div dir="rtl">
+                <DropdownGridNormal />
+            </div>
             <div>
                 <DropdownGridNormal placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/dropdownlist/tests/dropdownlist-flat.tsx b/packages/html/src/dropdownlist/tests/dropdownlist-flat.tsx
index ab1517b67fd..015fbcb3564 100644
--- a/packages/html/src/dropdownlist/tests/dropdownlist-flat.tsx
+++ b/packages/html/src/dropdownlist/tests/dropdownlist-flat.tsx
@@ -15,6 +15,12 @@ export default () =>(
             <span>DropdownList Flat</span>
             <span>DropdownList Flat RTL</span>
 
+            <div>
+                <DropdownList fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <DropdownList fillMode="flat" />
+            </div>
             <div>
                 <DropdownList fillMode="flat" placeholder="DropdownList..." />
             </div>
diff --git a/packages/html/src/dropdownlist/tests/dropdownlist-outline.tsx b/packages/html/src/dropdownlist/tests/dropdownlist-outline.tsx
index f0ec120ff45..546511ffdb5 100644
--- a/packages/html/src/dropdownlist/tests/dropdownlist-outline.tsx
+++ b/packages/html/src/dropdownlist/tests/dropdownlist-outline.tsx
@@ -15,6 +15,12 @@ export default () =>(
             <span>DropdownList Outline</span>
             <span>DropdownList Outline RTL</span>
 
+            <div>
+                <DropdownList fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <DropdownList fillMode="outline" />
+            </div>
             <div>
                 <DropdownList fillMode="outline" placeholder="DropdownList..." />
             </div>
diff --git a/packages/html/src/dropdownlist/tests/dropdownlist.tsx b/packages/html/src/dropdownlist/tests/dropdownlist.tsx
index 39e6303e58b..954524c3bec 100644
--- a/packages/html/src/dropdownlist/tests/dropdownlist.tsx
+++ b/packages/html/src/dropdownlist/tests/dropdownlist.tsx
@@ -15,6 +15,12 @@ export default () =>(
             <span>DropdownList</span>
             <span>DropdownList RTL</span>
 
+            <div>
+                <DropdownList />
+            </div>
+            <div dir="rtl">
+                <DropdownList />
+            </div>
             <div>
                 <DropdownList placeholder="DropdownList..." />
             </div>
diff --git a/packages/html/src/dropdowntree/tests/dropdowntree-flat.tsx b/packages/html/src/dropdowntree/tests/dropdowntree-flat.tsx
index 6513b95b96d..5cb9965a446 100644
--- a/packages/html/src/dropdowntree/tests/dropdowntree-flat.tsx
+++ b/packages/html/src/dropdowntree/tests/dropdowntree-flat.tsx
@@ -15,6 +15,12 @@ export default () =>(
             <span>DropdownTree Flat</span>
             <span>DropdownTree Flat RTL</span>
 
+            <div>
+                <DropdownTreeNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <DropdownTreeNormal fillMode="flat" />
+            </div>
             <div>
                 <DropdownTreeNormal fillMode="flat" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/dropdowntree/tests/dropdowntree-outline.tsx b/packages/html/src/dropdowntree/tests/dropdowntree-outline.tsx
index c4363d227c3..269e8c2272d 100644
--- a/packages/html/src/dropdowntree/tests/dropdowntree-outline.tsx
+++ b/packages/html/src/dropdowntree/tests/dropdowntree-outline.tsx
@@ -15,6 +15,12 @@ export default () =>(
             <span>DropdownTree Outline</span>
             <span>DropdownTree Outline RTL</span>
 
+            <div>
+                <DropdownTreeNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <DropdownTreeNormal fillMode="outline" />
+            </div>
             <div>
                 <DropdownTreeNormal fillMode="outline" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/dropdowntree/tests/dropdowntree-solid.tsx b/packages/html/src/dropdowntree/tests/dropdowntree-solid.tsx
index 08f2fc6a4bc..822eae0fa9f 100644
--- a/packages/html/src/dropdowntree/tests/dropdowntree-solid.tsx
+++ b/packages/html/src/dropdowntree/tests/dropdowntree-solid.tsx
@@ -15,6 +15,13 @@ export default () =>(
             <span>DropdownTree</span>
             <span>DropdownTree RTL</span>
 
+            <div>
+                <DropdownTreeNormal />
+            </div>
+            <div dir="rtl">
+                <DropdownTreeNormal />
+            </div>
+
             <div>
                 <DropdownTreeNormal placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/floating-label/tests/floating-label-flat.tsx b/packages/html/src/floating-label/tests/floating-label-flat.tsx
index 137376da45a..ae6b6862543 100644
--- a/packages/html/src/floating-label/tests/floating-label-flat.tsx
+++ b/packages/html/src/floating-label/tests/floating-label-flat.tsx
@@ -17,6 +17,16 @@ export default () =>(
             <span>Floating label flat</span>
             <span>Floating label flat RTL</span>
 
+            <div>
+                <FloatingLabelNormal label="Label without placeholder">
+                    <TextboxNormal fillMode="flat" />
+                </FloatingLabelNormal>
+            </div>
+            <div dir="rtl">
+                <FloatingLabelNormal label="Label without placeholder">
+                    <TextboxNormal fillMode="flat" />
+                </FloatingLabelNormal>
+            </div>
             <div>
                 <FloatingLabelNormal label="Label with placeholder">
                     <TextboxNormal fillMode="flat" placeholder="placeholder" />
diff --git a/packages/html/src/floating-label/tests/floating-label-outline.tsx b/packages/html/src/floating-label/tests/floating-label-outline.tsx
index 744df64ed4c..2a8e666b35e 100644
--- a/packages/html/src/floating-label/tests/floating-label-outline.tsx
+++ b/packages/html/src/floating-label/tests/floating-label-outline.tsx
@@ -17,6 +17,16 @@ export default () =>(
             <span>Floating label outline</span>
             <span>Floating label outline RTL</span>
 
+            <div>
+                <FloatingLabelNormal label="Label without placeholder">
+                    <TextboxNormal fillMode="outline" />
+                </FloatingLabelNormal>
+            </div>
+            <div dir="rtl">
+                <FloatingLabelNormal label="Label without placeholder">
+                    <TextboxNormal fillMode="outline" />
+                </FloatingLabelNormal>
+            </div>
             <div>
                 <FloatingLabelNormal label="Label with placeholder">
                     <TextboxNormal fillMode="outline" placeholder="placeholder" />
diff --git a/packages/html/src/floating-label/tests/floating-label-solid.tsx b/packages/html/src/floating-label/tests/floating-label-solid.tsx
index 42d74b80697..2445d4bdbad 100644
--- a/packages/html/src/floating-label/tests/floating-label-solid.tsx
+++ b/packages/html/src/floating-label/tests/floating-label-solid.tsx
@@ -17,6 +17,16 @@ export default () =>(
             <span>Floating label</span>
             <span>Floating label RTL</span>
 
+            <div>
+                <FloatingLabelNormal label="Label without placeholder">
+                    <TextboxNormal />
+                </FloatingLabelNormal>
+            </div>
+            <div dir="rtl">
+                <FloatingLabelNormal label="Label without placeholder">
+                    <TextboxNormal />
+                </FloatingLabelNormal>
+            </div>
             <div>
                 <FloatingLabelNormal label="Label with placeholder">
                     <TextboxNormal placeholder="placeholder" />
diff --git a/packages/html/src/maskedtextbox/tests/maskedtextbox-flat.tsx b/packages/html/src/maskedtextbox/tests/maskedtextbox-flat.tsx
index 1fa7687a892..c151cd4dae5 100644
--- a/packages/html/src/maskedtextbox/tests/maskedtextbox-flat.tsx
+++ b/packages/html/src/maskedtextbox/tests/maskedtextbox-flat.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>MaskedTextBox Flat</span>
             <span>MaskedTextBox Flat RTL</span>
 
+            <div>
+                <MaskedTextboxNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <MaskedTextboxNormal fillMode="flat" />
+            </div>
             <div>
                 <MaskedTextboxNormal fillMode="flat" placeholder="(___) ___-__-__-__" />
             </div>
diff --git a/packages/html/src/maskedtextbox/tests/maskedtextbox-outline.tsx b/packages/html/src/maskedtextbox/tests/maskedtextbox-outline.tsx
index 7e98e20443f..6379378b453 100644
--- a/packages/html/src/maskedtextbox/tests/maskedtextbox-outline.tsx
+++ b/packages/html/src/maskedtextbox/tests/maskedtextbox-outline.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>MaskedTextBox Outline</span>
             <span>MaskedTextBox Outline RTL</span>
 
+            <div>
+                <MaskedTextboxNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <MaskedTextboxNormal fillMode="outline" />
+            </div>
             <div>
                 <MaskedTextboxNormal fillMode="outline" placeholder="(___) ___-__-__-__" />
             </div>
diff --git a/packages/html/src/maskedtextbox/tests/maskedtextbox-solid.tsx b/packages/html/src/maskedtextbox/tests/maskedtextbox-solid.tsx
index 0ea985740b8..55845b8cd92 100644
--- a/packages/html/src/maskedtextbox/tests/maskedtextbox-solid.tsx
+++ b/packages/html/src/maskedtextbox/tests/maskedtextbox-solid.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>MaskedTextBox</span>
             <span>MaskedTextBox RTL</span>
 
+            <div>
+                <MaskedTextboxNormal />
+            </div>
+            <div dir="rtl">
+                <MaskedTextboxNormal />
+            </div>
             <div>
                 <MaskedTextboxNormal placeholder="(___) ___-__-__-__" />
             </div>
diff --git a/packages/html/src/multiselect/tests/multiselect-flat.tsx b/packages/html/src/multiselect/tests/multiselect-flat.tsx
index 12a6576af0e..47d3d9edf9f 100644
--- a/packages/html/src/multiselect/tests/multiselect-flat.tsx
+++ b/packages/html/src/multiselect/tests/multiselect-flat.tsx
@@ -16,6 +16,14 @@ export default () =>(
             <span>MultiSelect Flat</span>
             <span>MultiSelect Flat RTL</span>
 
+            <div>no placeholder or value</div>
+            <div>
+                <MultiSelectNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectNormal fillMode="flat" />
+            </div>
+
             <div>placeholder</div>
             <div>
                 <MultiSelectNormal fillMode="flat" placeholder="placeholder..." />
diff --git a/packages/html/src/multiselect/tests/multiselect-outline.tsx b/packages/html/src/multiselect/tests/multiselect-outline.tsx
index 4d6ad36749f..64beba58ba8 100644
--- a/packages/html/src/multiselect/tests/multiselect-outline.tsx
+++ b/packages/html/src/multiselect/tests/multiselect-outline.tsx
@@ -16,6 +16,14 @@ export default () =>(
             <span>MultiSelect Outline</span>
             <span>MultiSelect Outline RTL</span>
 
+            <div>no placeholder or value</div>
+            <div>
+                <MultiSelectNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectNormal fillMode="outline" />
+            </div>
+
             <div>placeholder</div>
             <div>
                 <MultiSelectNormal fillMode="outline" placeholder="placeholder..." />
diff --git a/packages/html/src/multiselect/tests/multiselect-solid.tsx b/packages/html/src/multiselect/tests/multiselect-solid.tsx
index 8f8ce527674..3ba2d904338 100644
--- a/packages/html/src/multiselect/tests/multiselect-solid.tsx
+++ b/packages/html/src/multiselect/tests/multiselect-solid.tsx
@@ -16,6 +16,14 @@ export default () =>(
             <span>MultiSelect</span>
             <span>MultiSelect RTL</span>
 
+            <div>no placeholder or value</div>
+            <div>
+                <MultiSelectNormal/>
+            </div>
+            <div dir="rtl">
+                <MultiSelectNormal />
+            </div>
+
             <div>placeholder</div>
             <div>
                 <MultiSelectNormal placeholder="placeholder..." />
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx
index c9cf85ddd6f..e93ddb5f07a 100644
--- a/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-flat.tsx
@@ -17,7 +17,15 @@ export default () =>(
             <span>MultiSelectTree</span>
             <span>MultiSelectTree RTL</span>
 
-            <div>empty</div>
+            <div>no placeholder nor value</div>
+            <div>
+                <MultiSelectTreeNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTreeNormal fillMode="flat" />
+            </div>
+
+            <div>placeholder</div>
             <div>
                 <MultiSelectTreeNormal fillMode="flat" placeholder="MultiSelectTree..." />
             </div>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-outline.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-outline.tsx
index 928d3c639d9..19031ef9614 100644
--- a/packages/html/src/multiselecttree/tests/multiselecttree-outline.tsx
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-outline.tsx
@@ -17,7 +17,15 @@ export default () =>(
             <span>MultiSelectTree</span>
             <span>MultiSelectTree RTL</span>
 
-            <div>empty</div>
+            <div>no placeholder nor value</div>
+            <div>
+                <MultiSelectTreeNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTreeNormal fillMode="outline" />
+            </div>
+
+            <div>placeholder</div>
             <div>
                 <MultiSelectTreeNormal fillMode="outline" placeholder="MultiSelectTree..." />
             </div>
diff --git a/packages/html/src/multiselecttree/tests/multiselecttree-solid.tsx b/packages/html/src/multiselecttree/tests/multiselecttree-solid.tsx
index ce5f1e976cb..e6de058978f 100644
--- a/packages/html/src/multiselecttree/tests/multiselecttree-solid.tsx
+++ b/packages/html/src/multiselecttree/tests/multiselecttree-solid.tsx
@@ -17,7 +17,15 @@ export default () =>(
             <span>MultiSelectTree</span>
             <span>MultiSelectTree RTL</span>
 
-            <div>empty</div>
+            <div>no placeholder nor value</div>
+            <div>
+                <MultiSelectTreeNormal />
+            </div>
+            <div dir="rtl">
+                <MultiSelectTreeNormal />
+            </div>
+
+            <div>placeholder</div>
             <div>
                 <MultiSelectTreeNormal placeholder="MultiSelectTree..." />
             </div>
diff --git a/packages/html/src/numerictextbox/tests/numerictextbox-flat.tsx b/packages/html/src/numerictextbox/tests/numerictextbox-flat.tsx
index 04c6671dc30..5a238c5dd10 100644
--- a/packages/html/src/numerictextbox/tests/numerictextbox-flat.tsx
+++ b/packages/html/src/numerictextbox/tests/numerictextbox-flat.tsx
@@ -13,6 +13,13 @@ export default () =>(
             <span>NumericTextBox Flat</span>
             <span>NumericTextBox Flat RTL</span>
 
+            <div>
+                <NumericTextboxNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <NumericTextboxNormal fillMode="flat" />
+            </div>
+
             <div>
                 <NumericTextboxNormal fillMode="flat" placeholder="NumericTextBox..." />
             </div>
diff --git a/packages/html/src/numerictextbox/tests/numerictextbox-outline.tsx b/packages/html/src/numerictextbox/tests/numerictextbox-outline.tsx
index 891fa5fc7a5..41285a48823 100644
--- a/packages/html/src/numerictextbox/tests/numerictextbox-outline.tsx
+++ b/packages/html/src/numerictextbox/tests/numerictextbox-outline.tsx
@@ -13,6 +13,12 @@ export default () =>(
             <span>NumericTextBox Outline</span>
             <span>NumericTextBox Outline RTL</span>
 
+            <div>
+                <NumericTextboxNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <NumericTextboxNormal fillMode="outline" />
+            </div>
             <div>
                 <NumericTextboxNormal fillMode="outline" placeholder="NumericTextBox..." />
             </div>
diff --git a/packages/html/src/numerictextbox/tests/numerictextbox-solid.tsx b/packages/html/src/numerictextbox/tests/numerictextbox-solid.tsx
index bdf004f4315..51dc5f6ca2a 100644
--- a/packages/html/src/numerictextbox/tests/numerictextbox-solid.tsx
+++ b/packages/html/src/numerictextbox/tests/numerictextbox-solid.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>NumericTextBox</span>
             <span>NumericTextBox RTL</span>
 
+            <div>
+                <NumericTextboxNormal />
+            </div>
+            <div dir="rtl">
+                <NumericTextboxNormal />
+            </div>
             <div>
                 <NumericTextboxNormal placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/textarea/tests/textarea-flat.tsx b/packages/html/src/textarea/tests/textarea-flat.tsx
index 45d5a7f6314..495de36937f 100644
--- a/packages/html/src/textarea/tests/textarea-flat.tsx
+++ b/packages/html/src/textarea/tests/textarea-flat.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>TextArea Flat</span>
             <span>TextArea Flat RTL</span>
 
+            <div>
+                <TextareaNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <TextareaNormal fillMode="flat" />
+            </div>
             <div>
                 <TextareaNormal fillMode="flat" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/textarea/tests/textarea-outline.tsx b/packages/html/src/textarea/tests/textarea-outline.tsx
index 89de6f14672..57f89e43ac2 100644
--- a/packages/html/src/textarea/tests/textarea-outline.tsx
+++ b/packages/html/src/textarea/tests/textarea-outline.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>TextArea Flat</span>
             <span>TextArea Flat RTL</span>
 
+            <div>
+                <Textarea fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <Textarea fillMode="outline" />
+            </div>
             <div>
                 <Textarea fillMode="outline" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/textarea/tests/textarea-solid.tsx b/packages/html/src/textarea/tests/textarea-solid.tsx
index 90e2efdf05f..07bb603e38c 100644
--- a/packages/html/src/textarea/tests/textarea-solid.tsx
+++ b/packages/html/src/textarea/tests/textarea-solid.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>TextArea</span>
             <span>TextArea RTL</span>
 
+            <div>
+                <TextareaNormal />
+            </div>
+            <div dir="rtl">
+                <TextareaNormal />
+            </div>
             <div>
                 <TextareaNormal placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/textbox/tests/textbox-flat.tsx b/packages/html/src/textbox/tests/textbox-flat.tsx
index f71fccf4026..733c4f60394 100644
--- a/packages/html/src/textbox/tests/textbox-flat.tsx
+++ b/packages/html/src/textbox/tests/textbox-flat.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>TextBox Flat</span>
             <span>TextBox Flat RTL</span>
 
+            <div>
+                <TextboxNormal fillMode="flat" />
+            </div>
+            <div dir="rtl">
+                <TextboxNormal fillMode="flat" />
+            </div>
             <div>
                 <TextboxNormal fillMode="flat" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/textbox/tests/textbox-outline.tsx b/packages/html/src/textbox/tests/textbox-outline.tsx
index d192bac4741..be2e0dc8dfc 100644
--- a/packages/html/src/textbox/tests/textbox-outline.tsx
+++ b/packages/html/src/textbox/tests/textbox-outline.tsx
@@ -14,6 +14,12 @@ export default () =>(
             <span>TextBox Outline</span>
             <span>TextBox Outline RTL</span>
 
+            <div>
+                <TextboxNormal fillMode="outline" />
+            </div>
+            <div dir="rtl">
+                <TextboxNormal fillMode="outline" />
+            </div>
             <div>
                 <TextboxNormal fillMode="outline" placeholder="placeholder..." />
             </div>
diff --git a/packages/html/src/textbox/tests/textbox-solid.tsx b/packages/html/src/textbox/tests/textbox-solid.tsx
index a1f9e54491c..82e4b707119 100644
--- a/packages/html/src/textbox/tests/textbox-solid.tsx
+++ b/packages/html/src/textbox/tests/textbox-solid.tsx
@@ -14,6 +14,13 @@ export default () =>(
             <span>TextBox</span>
             <span>TextBox RTL</span>
 
+            <div>
+                <TextboxNormal />
+            </div>
+            <div dir="rtl">
+                <TextboxNormal />
+            </div>
+
             <div>
                 <TextboxNormal placeholder="placeholder..." />
             </div>
diff --git a/tests/autocomplete/autocomplete-flat.html b/tests/autocomplete/autocomplete-flat.html
index b4b05b09a1c..f0ab762bc27 100644
--- a/tests/autocomplete/autocomplete-flat.html
+++ b/tests/autocomplete/autocomplete-flat.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>Autocomplete Flat</span>
         <span>Autocomplete Flat RTL</span>
+        <div>
+            <span class="k-autocomplete k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-autocomplete k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-autocomplete k-input k-input-md k-input-flat k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/autocomplete/autocomplete-outline.html b/tests/autocomplete/autocomplete-outline.html
index 7f3120deecc..513f8f29ca3 100644
--- a/tests/autocomplete/autocomplete-outline.html
+++ b/tests/autocomplete/autocomplete-outline.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>Autocomplete Outline</span>
         <span>Autocomplete Outline RTL</span>
+        <div>
+            <span class="k-autocomplete k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-autocomplete k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-autocomplete k-input k-input-md k-input-outline k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/autocomplete/autocomplete-solid.html b/tests/autocomplete/autocomplete-solid.html
index 85c757d3158..7685c8fb1d9 100644
--- a/tests/autocomplete/autocomplete-solid.html
+++ b/tests/autocomplete/autocomplete-solid.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>Autocomplete</span>
         <span>Autocomplete RTL</span>
+        <div>
+            <span class="k-autocomplete k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-autocomplete k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-autocomplete k-input k-input-md k-input-solid k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/combobox/combobox-flat.html b/tests/combobox/combobox-flat.html
index 5f668a0a653..7ad2be8d906 100644
--- a/tests/combobox/combobox-flat.html
+++ b/tests/combobox/combobox-flat.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>ComboBox Flat</span>
         <span>ComboBox Flat RTL</span>
+        <div>
+            <span class="k-combobox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-combobox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-combobox k-input k-input-md k-input-flat k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/combobox/combobox-outline.html b/tests/combobox/combobox-outline.html
index 227f18b5b33..c545fa8af68 100644
--- a/tests/combobox/combobox-outline.html
+++ b/tests/combobox/combobox-outline.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>ComboBox Outline</span>
         <span>ComboBox Outline RTL</span>
+        <div>
+            <span class="k-combobox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-combobox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-combobox k-input k-input-md k-input-outline k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/combobox/combobox-solid.html b/tests/combobox/combobox-solid.html
index 1fcec1af73d..3884a362160 100644
--- a/tests/combobox/combobox-solid.html
+++ b/tests/combobox/combobox-solid.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>ComboBox</span>
         <span>ComboBox RTL</span>
+        <div>
+            <span class="k-combobox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-combobox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-combobox k-input k-input-md k-input-solid k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/dropdowngrid/dropdowngrid-flat.html b/tests/dropdowngrid/dropdowngrid-flat.html
index 0002ec82f2f..4fbe11c5056 100644
--- a/tests/dropdowngrid/dropdowngrid-flat.html
+++ b/tests/dropdowngrid/dropdowngrid-flat.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownGrid Flat</span>
         <span>DropdownGrid Flat RTL</span>
+        <div>
+            <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-flat k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/dropdowngrid/dropdowngrid-outline.html b/tests/dropdowngrid/dropdowngrid-outline.html
index 580367ed742..bf21b1c6263 100644
--- a/tests/dropdowngrid/dropdowngrid-outline.html
+++ b/tests/dropdowngrid/dropdowngrid-outline.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownGrid Outline</span>
         <span>DropdownGrid Outline RTL</span>
+        <div>
+            <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-outline k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="DropdownGrid..." autocomplete="off" value="">
diff --git a/tests/dropdowngrid/dropdowngrid-solid.html b/tests/dropdowngrid/dropdowngrid-solid.html
index 513f12e2df3..f745487b2e6 100644
--- a/tests/dropdowngrid/dropdowngrid-solid.html
+++ b/tests/dropdowngrid/dropdowngrid-solid.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownGrid</span>
         <span>DropdownGrid RTL</span>
+        <div>
+            <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdowngrid k-combobox k-input k-input-md k-input-solid k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/dropdownlist/dropdownlist-flat.html b/tests/dropdownlist/dropdownlist-flat.html
index cc8fde2a7ca..96c61424ef1 100644
--- a/tests/dropdownlist/dropdownlist-flat.html
+++ b/tests/dropdownlist/dropdownlist-flat.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownList Flat</span>
         <span>DropdownList Flat RTL</span>
+        <div>
+            <span class="k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
                 <span class="k-input-inner">DropdownList...</span>
diff --git a/tests/dropdownlist/dropdownlist-outline.html b/tests/dropdownlist/dropdownlist-outline.html
index acd65db022f..d65744cf75a 100644
--- a/tests/dropdownlist/dropdownlist-outline.html
+++ b/tests/dropdownlist/dropdownlist-outline.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownList Outline</span>
         <span>DropdownList Outline RTL</span>
+        <div>
+            <span class="k-dropdownlist k-picker k-picker-md k-picker-outline k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdownlist k-picker k-picker-md k-picker-outline k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdownlist k-picker k-picker-md k-picker-outline k-rounded-md">
                 <span class="k-input-inner">DropdownList...</span>
diff --git a/tests/dropdownlist/dropdownlist.html b/tests/dropdownlist/dropdownlist.html
index cb50d3c59e5..39b28e66d7f 100644
--- a/tests/dropdownlist/dropdownlist.html
+++ b/tests/dropdownlist/dropdownlist.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownList</span>
         <span>DropdownList RTL</span>
+        <div>
+            <span class="k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md">
                 <span class="k-input-inner">DropdownList...</span>
diff --git a/tests/dropdowntree/dropdowntree-flat.html b/tests/dropdowntree/dropdowntree-flat.html
index d40a9df4d97..59b6dedbfcb 100644
--- a/tests/dropdowntree/dropdowntree-flat.html
+++ b/tests/dropdowntree/dropdowntree-flat.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownTree Flat</span>
         <span>DropdownTree Flat RTL</span>
+        <div>
+            <span class="k-dropdowntree k-picker k-picker-md k-picker-flat k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdowntree k-picker k-picker-md k-picker-flat k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdowntree k-picker k-picker-md k-picker-flat k-rounded-md">
                 <span class="k-input-inner">placeholder...</span>
diff --git a/tests/dropdowntree/dropdowntree-outline.html b/tests/dropdowntree/dropdowntree-outline.html
index 514c90845b9..cb6bb64bfd8 100644
--- a/tests/dropdowntree/dropdowntree-outline.html
+++ b/tests/dropdowntree/dropdowntree-outline.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownTree Outline</span>
         <span>DropdownTree Outline RTL</span>
+        <div>
+            <span class="k-dropdowntree k-picker k-picker-md k-picker-outline k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdowntree k-picker k-picker-md k-picker-outline k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdowntree k-picker k-picker-md k-picker-outline k-rounded-md">
                 <span class="k-input-inner">placeholder...</span>
diff --git a/tests/dropdowntree/dropdowntree-solid.html b/tests/dropdowntree/dropdowntree-solid.html
index 005f6ec84e3..f614bae7b65 100644
--- a/tests/dropdowntree/dropdowntree-solid.html
+++ b/tests/dropdowntree/dropdowntree-solid.html
@@ -17,6 +17,30 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>DropdownTree</span>
         <span>DropdownTree RTL</span>
+        <div>
+            <span class="k-dropdowntree k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-dropdowntree k-picker k-picker-md k-picker-solid k-rounded-md">
+                <span class="k-input-inner"></span>
+                <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M256 352 128 160h256z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </span>
+        </div>
         <div>
             <span class="k-dropdowntree k-picker k-picker-md k-picker-solid k-rounded-md">
                 <span class="k-input-inner">placeholder...</span>
diff --git a/tests/floating-label/floating-label-flat.html b/tests/floating-label/floating-label-flat.html
index a2ca0ba1545..51f4183b070 100644
--- a/tests/floating-label/floating-label-flat.html
+++ b/tests/floating-label/floating-label-flat.html
@@ -20,6 +20,22 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>Floating label flat</span>
         <span>Floating label flat RTL</span>
+        <div>
+            <span class="k-floating-label-container k-empty">
+                <span class="k-textbox k-input k-input-md k-input-flat k-rounded-md">
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </span>
+                <label class="k-floating-label">Label without placeholder</label>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-floating-label-container k-empty">
+                <span class="k-textbox k-input k-input-md k-input-flat k-rounded-md">
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </span>
+                <label class="k-floating-label">Label without placeholder</label>
+            </span>
+        </div>
         <div>
             <span class="k-floating-label-container k-empty">
                 <span class="k-textbox k-input k-input-md k-input-flat k-rounded-md">
diff --git a/tests/floating-label/floating-label-outline.html b/tests/floating-label/floating-label-outline.html
index 742d8d46cf4..8e561ec48c9 100644
--- a/tests/floating-label/floating-label-outline.html
+++ b/tests/floating-label/floating-label-outline.html
@@ -20,6 +20,22 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>Floating label outline</span>
         <span>Floating label outline RTL</span>
+        <div>
+            <span class="k-floating-label-container k-empty">
+                <span class="k-textbox k-input k-input-md k-input-outline k-rounded-md">
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </span>
+                <label class="k-floating-label">Label without placeholder</label>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-floating-label-container k-empty">
+                <span class="k-textbox k-input k-input-md k-input-outline k-rounded-md">
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </span>
+                <label class="k-floating-label">Label without placeholder</label>
+            </span>
+        </div>
         <div>
             <span class="k-floating-label-container k-empty">
                 <span class="k-textbox k-input k-input-md k-input-outline k-rounded-md">
diff --git a/tests/floating-label/floating-label-solid.html b/tests/floating-label/floating-label-solid.html
index 6774cb9a39b..176c089d0dc 100644
--- a/tests/floating-label/floating-label-solid.html
+++ b/tests/floating-label/floating-label-solid.html
@@ -20,6 +20,22 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>Floating label</span>
         <span>Floating label RTL</span>
+        <div>
+            <span class="k-floating-label-container k-empty">
+                <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </span>
+                <label class="k-floating-label">Label without placeholder</label>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-floating-label-container k-empty">
+                <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </span>
+                <label class="k-floating-label">Label without placeholder</label>
+            </span>
+        </div>
         <div>
             <span class="k-floating-label-container k-empty">
                 <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
diff --git a/tests/maskedtextbox/maskedtextbox-flat.html b/tests/maskedtextbox/maskedtextbox-flat.html
index 8151daf33b2..0d4b31b9174 100644
--- a/tests/maskedtextbox/maskedtextbox-flat.html
+++ b/tests/maskedtextbox/maskedtextbox-flat.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>MaskedTextBox Flat</span>
         <span>MaskedTextBox Flat RTL</span>
+        <div>
+            <span class="k-maskedtextbox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-maskedtextbox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-maskedtextbox k-input k-input-md k-input-flat k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="(___) ___-__-__-__" autocomplete="off" value="">
diff --git a/tests/maskedtextbox/maskedtextbox-outline.html b/tests/maskedtextbox/maskedtextbox-outline.html
index 16940aa1b45..bd158b04b0a 100644
--- a/tests/maskedtextbox/maskedtextbox-outline.html
+++ b/tests/maskedtextbox/maskedtextbox-outline.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>MaskedTextBox Outline</span>
         <span>MaskedTextBox Outline RTL</span>
+        <div>
+            <span class="k-maskedtextbox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-maskedtextbox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-maskedtextbox k-input k-input-md k-input-outline k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="(___) ___-__-__-__" autocomplete="off" value="">
diff --git a/tests/maskedtextbox/maskedtextbox-solid.html b/tests/maskedtextbox/maskedtextbox-solid.html
index 91610855b9b..a0b4591778e 100644
--- a/tests/maskedtextbox/maskedtextbox-solid.html
+++ b/tests/maskedtextbox/maskedtextbox-solid.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>MaskedTextBox</span>
         <span>MaskedTextBox RTL</span>
+        <div>
+            <span class="k-maskedtextbox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-maskedtextbox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-maskedtextbox k-input k-input-md k-input-solid k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="(___) ___-__-__-__" autocomplete="off" value="">
diff --git a/tests/multiselect/multiselect-flat.html b/tests/multiselect/multiselect-flat.html
index bef8fa5da06..2319e42d43e 100644
--- a/tests/multiselect/multiselect-flat.html
+++ b/tests/multiselect/multiselect-flat.html
@@ -18,6 +18,24 @@
         <span></span>
         <span>MultiSelect Flat</span>
         <span>MultiSelect Flat RTL</span>
+
+        <div>no placeholder nor value</div>
+        <div>
+            <span class="k-multiselect k-input k-input-md k-input-flat k-rounded-md">
+                <div class="k-input-values">
+                    <div class="k-chip-list k-chip-list-md"></div>
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </div>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-multiselect k-input k-input-md k-input-flat k-rounded-md">
+                <div class="k-input-values">
+                    <div class="k-chip-list k-chip-list-md"></div>
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </div>
+            </span>
+        </div>
         <div>placeholder</div>
         <div>
             <span class="k-multiselect k-input k-input-md k-input-flat k-rounded-md">
diff --git a/tests/multiselect/multiselect-outline.html b/tests/multiselect/multiselect-outline.html
index 64f4ef604dd..e4bb1b20d5d 100644
--- a/tests/multiselect/multiselect-outline.html
+++ b/tests/multiselect/multiselect-outline.html
@@ -18,6 +18,24 @@
         <span></span>
         <span>MultiSelect Outline</span>
         <span>MultiSelect Outline RTL</span>
+
+        <div>no placeholder or value</div>
+        <div>
+            <span class="k-multiselect k-input k-input-md k-input-outline k-rounded-md">
+                <div class="k-input-values">
+                    <div class="k-chip-list k-chip-list-md"></div>
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </div>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-multiselect k-input k-input-md k-input-outline k-rounded-md">
+                <div class="k-input-values">
+                    <div class="k-chip-list k-chip-list-md"></div>
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </div>
+            </span>
+        </div>
         <div>placeholder</div>
         <div>
             <span class="k-multiselect k-input k-input-md k-input-outline k-rounded-md">
diff --git a/tests/multiselect/multiselect-solid.html b/tests/multiselect/multiselect-solid.html
index 9e6ba55e2b8..480e9d160d6 100644
--- a/tests/multiselect/multiselect-solid.html
+++ b/tests/multiselect/multiselect-solid.html
@@ -18,6 +18,24 @@
         <span></span>
         <span>MultiSelect</span>
         <span>MultiSelect RTL</span>
+
+        <div>no placeholder or value</div>
+        <div>
+            <span class="k-multiselect k-input k-input-md k-input-solid k-rounded-md">
+                <div class="k-input-values">
+                    <div class="k-chip-list k-chip-list-md"></div>
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </div>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-multiselect k-input k-input-md k-input-solid k-rounded-md">
+                <div class="k-input-values">
+                    <div class="k-chip-list k-chip-list-md"></div>
+                    <input type="text" class="k-input-inner" autocomplete="off" value="">
+                </div>
+            </span>
+        </div>
         <div>placeholder</div>
         <div>
             <span class="k-multiselect k-input k-input-md k-input-solid k-rounded-md">
diff --git a/tests/multiselecttree/multiselecttree-flat.html b/tests/multiselecttree/multiselecttree-flat.html
index abcdfb02514..3922f8574bd 100644
--- a/tests/multiselecttree/multiselecttree-flat.html
+++ b/tests/multiselecttree/multiselecttree-flat.html
@@ -18,21 +18,29 @@
         <span></span>
         <span>MultiSelectTree</span>
         <span>MultiSelectTree RTL</span>
-        <div>empty</div>
         <div>
             <span class="k-multiselecttree k-input k-input-md k-input-flat k-rounded-md">
                 <div class="k-input-values k-chip-list k-chip-list-md"></div>
-                <span class="k-input-inner">
-                    <span class="k-input-value-text">MultiSelectTree...</span>
-                </span>
+                <span class="k-input-inner"></span>
             </span>
         </div>
         <div dir="rtl">
             <span class="k-multiselecttree k-input k-input-md k-input-flat k-rounded-md">
                 <div class="k-input-values k-chip-list k-chip-list-md"></div>
-                <span class="k-input-inner">
-                    <span class="k-input-value-text">MultiSelectTree...</span>
-                </span>
+                <span class="k-input-inner"></span>
+            </span>
+        </div>
+        <div>placeholder</div>
+        <div>
+            <span class="k-multiselecttree k-input k-input-md k-input-flat k-rounded-md">
+                <div class="k-input-values k-chip-list k-chip-list-md"></div>
+                <span class="k-input-inner">>MultiSelectTree...</span>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-multiselecttree k-input k-input-md k-input-flat k-rounded-md">
+                <div class="k-input-values k-chip-list k-chip-list-md"></div>
+                <span class="k-input-inner">MultiSelectTree...</span>
             </span>
         </div>
         <div>arrow button</div>
diff --git a/tests/multiselecttree/multiselecttree-outline.html b/tests/multiselecttree/multiselecttree-outline.html
index a651c71c7c9..2e63df92af5 100644
--- a/tests/multiselecttree/multiselecttree-outline.html
+++ b/tests/multiselecttree/multiselecttree-outline.html
@@ -19,20 +19,30 @@
         <span>MultiSelectTree</span>
         <span>MultiSelectTree RTL</span>
         <div>empty</div>
+        <div>no placeholder not value</div>
         <div>
             <span class="k-multiselecttree k-input k-input-md k-input-outline k-rounded-md">
                 <div class="k-input-values k-chip-list k-chip-list-md"></div>
-                <span class="k-input-inner">
-                    <span class="k-input-value-text">MultiSelectTree...</span>
-                </span>
+                <span class="k-input-inner"></span>
             </span>
         </div>
         <div dir="rtl">
             <span class="k-multiselecttree k-input k-input-md k-input-outline k-rounded-md">
                 <div class="k-input-values k-chip-list k-chip-list-md"></div>
-                <span class="k-input-inner">
-                    <span class="k-input-value-text">MultiSelectTree...</span>
-                </span>
+                <span class="k-input-inner"></span>
+            </span>
+        </div>
+        <div>placeholder</div>
+        <div>
+            <span class="k-multiselecttree k-input k-input-md k-input-outline k-rounded-md">
+                <div class="k-input-values k-chip-list k-chip-list-md"></div>
+                <span class="k-input-inner">>MultiSelectTree...</span>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-multiselecttree k-input k-input-md k-input-outline k-rounded-md">
+                <div class="k-input-values k-chip-list k-chip-list-md"></div>
+                <span class="k-input-inner">MultiSelectTree...</span>
             </span>
         </div>
         <div>arrow button</div>
diff --git a/tests/multiselecttree/multiselecttree-solid.html b/tests/multiselecttree/multiselecttree-solid.html
index 6fcd2401c7a..df3c480f108 100644
--- a/tests/multiselecttree/multiselecttree-solid.html
+++ b/tests/multiselecttree/multiselecttree-solid.html
@@ -18,21 +18,30 @@
         <span></span>
         <span>MultiSelectTree</span>
         <span>MultiSelectTree RTL</span>
-        <div>empty</div>
+        <div>no placeholder not value</div>
         <div>
             <span class="k-multiselecttree k-input k-input-md k-input-solid k-rounded-md">
                 <div class="k-input-values k-chip-list k-chip-list-md"></div>
-                <span class="k-input-inner">
-                    <span class="k-input-value-text">MultiSelectTree...</span>
-                </span>
+                <span class="k-input-inner"></span>
             </span>
         </div>
         <div dir="rtl">
             <span class="k-multiselecttree k-input k-input-md k-input-solid k-rounded-md">
                 <div class="k-input-values k-chip-list k-chip-list-md"></div>
-                <span class="k-input-inner">
-                    <span class="k-input-value-text">MultiSelectTree...</span>
-                </span>
+                <span class="k-input-inner"></span>
+            </span>
+        </div>
+        <div>placeholder</div>
+        <div>
+            <span class="k-multiselecttree k-input k-input-md k-input-solid k-rounded-md">
+                <div class="k-input-values k-chip-list k-chip-list-md"></div>
+                <span class="k-input-inner">>MultiSelectTree...</span>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-multiselecttree k-input k-input-md k-input-solid k-rounded-md">
+                <div class="k-input-values k-chip-list k-chip-list-md"></div>
+                <span class="k-input-inner">MultiSelectTree...</span>
             </span>
         </div>
         <div>arrow button</div>
diff --git a/tests/numerictextbox/numerictextbox-flat.html b/tests/numerictextbox/numerictextbox-flat.html
index 8d9147820d0..e3abbbeb5e8 100644
--- a/tests/numerictextbox/numerictextbox-flat.html
+++ b/tests/numerictextbox/numerictextbox-flat.html
@@ -17,6 +17,48 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>NumericTextBox Flat</span>
         <span>NumericTextBox Flat RTL</span>
+        <div>
+            <span class="k-numerictextbox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <span class="k-spin-button k-input-spinner">
+                    <button class="k-spinner-increase k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m256 160 128 192H128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-spinner-decrease k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M256 352 128 160h256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-numerictextbox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <span class="k-spin-button k-input-spinner">
+                    <button class="k-spinner-increase k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m256 160 128 192H128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-spinner-decrease k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M256 352 128 160h256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </span>
+        </div>
         <div>
             <span class="k-numerictextbox k-input k-input-md k-input-flat k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="NumericTextBox..." autocomplete="off" value="">
diff --git a/tests/numerictextbox/numerictextbox-outline.html b/tests/numerictextbox/numerictextbox-outline.html
index d80e9225c99..a7e919cbc25 100644
--- a/tests/numerictextbox/numerictextbox-outline.html
+++ b/tests/numerictextbox/numerictextbox-outline.html
@@ -17,6 +17,48 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>NumericTextBox Outline</span>
         <span>NumericTextBox Outline RTL</span>
+        <div>
+            <span class="k-numerictextbox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <span class="k-spin-button k-input-spinner">
+                    <button class="k-spinner-increase k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m256 160 128 192H128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-spinner-decrease k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M256 352 128 160h256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-numerictextbox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <span class="k-spin-button k-input-spinner">
+                    <button class="k-spinner-increase k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m256 160 128 192H128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-spinner-decrease k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M256 352 128 160h256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </span>
+        </div>
         <div>
             <span class="k-numerictextbox k-input k-input-md k-input-outline k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="NumericTextBox..." autocomplete="off" value="">
diff --git a/tests/numerictextbox/numerictextbox-solid.html b/tests/numerictextbox/numerictextbox-solid.html
index 46bb5b646db..c9642ba8e63 100644
--- a/tests/numerictextbox/numerictextbox-solid.html
+++ b/tests/numerictextbox/numerictextbox-solid.html
@@ -17,6 +17,48 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>NumericTextBox</span>
         <span>NumericTextBox RTL</span>
+        <div>
+            <span class="k-numerictextbox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <span class="k-spin-button k-input-spinner">
+                    <button class="k-spinner-increase k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m256 160 128 192H128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-spinner-decrease k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M256 352 128 160h256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-numerictextbox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+                <span class="k-spin-button k-input-spinner">
+                    <button class="k-spinner-increase k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-up">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m256 160 128 192H128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-spinner-decrease k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M256 352 128 160h256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </span>
+        </div>
         <div>
             <span class="k-numerictextbox k-input k-input-md k-input-solid k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/textarea/textarea-flat.html b/tests/textarea/textarea-flat.html
index ba1ae96a333..772f522ceab 100644
--- a/tests/textarea/textarea-flat.html
+++ b/tests/textarea/textarea-flat.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>TextArea Flat</span>
         <span>TextArea Flat RTL</span>
+        <div>
+            <span class="k-textarea !k-flex-col k-input k-input-md k-input-flat k-rounded-md">
+                <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner"></textarea>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-textarea !k-flex-col k-input k-input-md k-input-flat k-rounded-md">
+                <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner"></textarea>
+            </span>
+        </div>
         <div>
             <span class="k-textarea !k-flex-col k-input k-input-md k-input-flat k-rounded-md">
                 <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner" placeholder="placeholder..."></textarea>
diff --git a/tests/textarea/textarea-outline.html b/tests/textarea/textarea-outline.html
index 1107f490f2e..e8324a9ad4e 100644
--- a/tests/textarea/textarea-outline.html
+++ b/tests/textarea/textarea-outline.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>TextArea Flat</span>
         <span>TextArea Flat RTL</span>
+        <div>
+            <span class="k-textarea !k-flex-col k-input k-input-md k-input-outline k-rounded-md">
+                <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner"></textarea>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-textarea !k-flex-col k-input k-input-md k-input-outline k-rounded-md">
+                <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner"></textarea>
+            </span>
+        </div>
         <div>
             <span class="k-textarea !k-flex-col k-input k-input-md k-input-outline k-rounded-md">
                 <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner" placeholder="placeholder..."></textarea>
diff --git a/tests/textarea/textarea-solid.html b/tests/textarea/textarea-solid.html
index 1fd1d0ee4a0..b83ec3c5353 100644
--- a/tests/textarea/textarea-solid.html
+++ b/tests/textarea/textarea-solid.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>TextArea</span>
         <span>TextArea RTL</span>
+        <div>
+            <span class="k-textarea !k-flex-col k-input k-input-md k-input-solid k-rounded-md">
+                <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner"></textarea>
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-textarea !k-flex-col k-input k-input-md k-input-solid k-rounded-md">
+                <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner"></textarea>
+            </span>
+        </div>
         <div>
             <span class="k-textarea !k-flex-col k-input k-input-md k-input-solid k-rounded-md">
                 <textarea class="!k-overflow-auto !k-flex-none k-resize k-input-inner" placeholder="placeholder..."></textarea>
diff --git a/tests/textbox/textbox-flat.html b/tests/textbox/textbox-flat.html
index 80f7c0662db..bada54cf36d 100644
--- a/tests/textbox/textbox-flat.html
+++ b/tests/textbox/textbox-flat.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>TextBox Flat</span>
         <span>TextBox Flat RTL</span>
+        <div>
+            <span class="k-textbox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-textbox k-input k-input-md k-input-flat k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-textbox k-input k-input-md k-input-flat k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/textbox/textbox-outline.html b/tests/textbox/textbox-outline.html
index 1da86a722a5..7d2d966cba5 100644
--- a/tests/textbox/textbox-outline.html
+++ b/tests/textbox/textbox-outline.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>TextBox Outline</span>
         <span>TextBox Outline RTL</span>
+        <div>
+            <span class="k-textbox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-textbox k-input k-input-md k-input-outline k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-textbox k-input k-input-md k-input-outline k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">
diff --git a/tests/textbox/textbox-solid.html b/tests/textbox/textbox-solid.html
index 0032f558bf0..944a03adef4 100644
--- a/tests/textbox/textbox-solid.html
+++ b/tests/textbox/textbox-solid.html
@@ -17,6 +17,16 @@
     <div id="test-area" class="k-d-grid k-grid-cols-2">
         <span>TextBox</span>
         <span>TextBox RTL</span>
+        <div>
+            <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
+        <div dir="rtl">
+            <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
+                <input type="text" class="k-input-inner" autocomplete="off" value="">
+            </span>
+        </div>
         <div>
             <span class="k-textbox k-input k-input-md k-input-solid k-rounded-md">
                 <input type="text" class="k-input-inner" placeholder="placeholder..." autocomplete="off" value="">