Fix validation colors on .input-group-text in .input-group-flat (#3111)

.changeset/fix-input-group-flat-validation.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.input-group-flat` so `.input-group-text` follows the `.is-valid` and `.is-invalid` border and focus colors.

core/scss/tests/input-group-flat.test.mjs

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { compile as compileSass } from 'sass'
+
+const scssDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const { css } = compileSass(path.join(scssDir, 'ui', '_forms.scss'), { loadPaths: ['node_modules'], style: 'expanded' })
+const flat = css.replace(/\s+/g, ' ')
+
+describe('input-group-flat validation', () => {
+  it.each(['valid', 'invalid'])('carries the %s border color over to the input-group-text', (state) => {
+    expect(flat).toContain(`.input-group-flat:has(.form-control.is-${state}) .input-group-text`)
+  })
+
+  it.each(['valid', 'invalid'])('follows .was-validated for the :%s pseudo-class', (state) => {
+    expect(flat).toContain(`.was-validated .input-group-flat:has(.form-control:${state}) .input-group-text`)
+  })
+
+  it.each(['valid', 'invalid'])('keeps the %s color while the group has focus', (state) => {
+    expect(flat).toMatch(new RegExp(`\\.input-group-flat:has\\(\\.form-control\\.is-${state}\\):focus-within[^{]*\\{ outline-color: [^;]+; \\}`))
+    expect(flat).toMatch(new RegExp(`\\.input-group-flat:has\\(\\.form-control\\.is-${state}\\):focus-within \\.form-control,[^{]*\\.input-group-text \\{ border-color: [^;]+ !important; \\}`))
+  })
+})

core/scss/ui/_forms.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../config' as *;
 
 textarea {
@@ -211,6 +212,27 @@ Input group
       border-inline-start: 0;
     }
   }
+
+  @each $state, $data in $form-validation-states {
+    $border-color: map.get($data, 'border-color');
+    $focus-ring-color: map.get($data, 'focus-ring-color');
+
+    &:has(.form-control.is-#{$state}),
+    .was-validated &:has(.form-control:#{$state}) {
+      .input-group-text {
+        border-color: $border-color;
+      }
+
+      &:focus-within {
+        outline-color: $focus-ring-color;
+
+        .form-control,
+        .input-group-text {
+          border-color: $border-color !important;
+        }
+      }
+    }
+  }
 }
 
 /**