Fix Tom Select validation border colors and focus ring (#3077)

core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap

@@ -56,13 +56,16 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre
   "--tblr-chart-3",
   "--tblr-chart-4",
   "--tblr-chart-5",
+  "--tblr-danger",
   "--tblr-font-sans-serif",
   "--tblr-font-size-h3",
   "--tblr-font-size-h5",
   "--tblr-font-weight-medium",
   "--tblr-font-weight-semibold",
+  "--tblr-form-invalid-border-color",
   "--tblr-form-select-bg-icon",
   "--tblr-form-select-bg-img",
+  "--tblr-form-valid-border-color",
   "--tblr-gray-500",
   "--tblr-green",
   "--tblr-icon-size",
@@ -78,6 +81,7 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre
   "--tblr-shadow-card",
   "--tblr-shadow-dropdown",
   "--tblr-shadow-input",
+  "--tblr-success",
   "--tblr-tertiary",
   "--tblr-text-inverted",
   "--tblr-yellow",

core/scss/vendor/_tom-select.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../config' as *;
 
 $input-border-width: 1px;
@@ -52,6 +53,23 @@ $input-border-width: 1px;
       background-image: var(--form-select-bg-img), var(--form-select-bg-icon, none);
     }
   }
+
+  // The same preset also colours the wrapper border and the focused
+  // `.ts-control` with `var(--bs-form-valid-color)` / `--bs-form-invalid-color`.
+  // Those variables do not exist in Tabler, so the border falls back to
+  // `currentColor` and the focus ring disappears. Repeat Tabler's own
+  // validation colours; `!important` for the same reason as `.ts-dropdown`
+  // below.
+  @each $state, $data in $form-validation-states {
+    &.is-#{$state} {
+      border-color: map.get($data, 'border-color') !important;
+
+      &.focus .ts-control {
+        border-color: map.get($data, 'border-color') !important;
+        box-shadow: map.get($data, 'focus-box-shadow') !important;
+      }
+    }
+  }
 }
 
 // The bootstrap5 preset hardcodes Bootstrap's own input metrics on