fix: Input Icon Z-Index Issue with Form Validation (#2525)

.changeset/fix-input-icon-z-index.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.input-icon-addon` z-index issue with form validation feedback and added default height.

core/scss/ui/forms/_form-icon.scss

@@ -20,10 +20,12 @@ Icon input
   top: 0;
   bottom: 0;
   left: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
+  height: $input-height;
   color: var(--#{$prefix}icon-color);
   pointer-events: none;
   font-size: 1.2em;

preview/pages/form-layout.html

@@ -161,6 +161,43 @@ page-libs: [litepicker]
 				</div>
 			</div>
 
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h3 class="card-title">
+							Form with Icons and Validation
+						</h3>
+					</div>
+					<div class="card-body">
+						<form class="space-y">
+							<div>
+								<div class="input-icon">
+									<span class="input-icon-addon">
+										{% include "ui/icon.html" icon="user" %}
+									</span>
+									<input type="text" value="" class="form-control is-invalid" placeholder="Username">
+									<div class="invalid-feedback">
+										This throws the icon out of bounds when input element contains `is-invalid` class.
+									</div>
+								</div>
+							</div>
+
+							<div>
+								<div class="input-icon">
+									<span class="input-icon-addon">
+										{% include "ui/icon.html" icon="mail" %}
+									</span>
+									<input type="email" value="" class="form-control is-valid" placeholder="Email">
+									<div class="valid-feedback">
+										This email looks good!
+									</div>
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+
 			<div class="col-12">
 				{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
 			</div>