Round disabled Tom Select fields and small/large focus rings (#3312)

Co-authored-by: codecalm <codecalm@gmail.com>

.changeset/fix-tom-select-disabled-radius.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the square corners of disabled Tom Select fields and the square focus ring of small and large ones.

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

@@ -56,6 +56,8 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre
   "--tblr-chart-3",
   "--tblr-chart-4",
   "--tblr-chart-5",
+  "--tblr-control-disabled-bg",
+  "--tblr-control-disabled-border-color",
   "--tblr-control-font-size",
   "--tblr-control-line-height",
   "--tblr-control-padding-x",

core/scss/vendor/_tom-select.scss

@@ -79,13 +79,19 @@
 // padding, 1px border and 3px bottom margin out of the control's padding so
 // the chips fill the same height. The font size is `!important` because the
 // preset sets its own on `.form-select-sm.has-items .ts-control`, which
-// outranks this selector.
+// outranks this selector. The radius comes from the wrapper too: the preset
+// rounds `.ts-control` with `var(--bs-border-radius*)`, which Tabler does not
+// define, so the focus ring of a small or large select came out square. It is
+// `!important` because the preset's `.ts-wrapper.form-select-sm .ts-control`
+// (and `-lg`) has the same specificity, so it would otherwise win whenever the
+// preset CSS is loaded after `tabler-vendors.css`.
 .ts-wrapper.form-control,
 .ts-wrapper.form-select {
   .ts-control {
     padding: var(--control-padding-y) var(--control-padding-x);
     font-size: var(--control-font-size) !important;
     line-height: var(--control-line-height);
+    border-radius: inherit !important;
   }
 
   &.multi.has-items .ts-control {
@@ -168,12 +174,28 @@
   }
 }
 
-.ts-wrapper.disabled .ts-control {
-  background-color: var(--secondary-bg);
-  opacity: 1;
+.ts-wrapper.disabled {
+  .ts-control {
+    background-color: var(--secondary-bg);
+    opacity: 1;
 
-  & > div.item {
-    color: var(--gray-500);
+    & > div.item {
+      color: var(--gray-500);
+    }
+  }
+
+  // The `.form-control` / `.form-select` wrapper draws the rounded border, so a
+  // background on the `.ts-control` inside it spilled over the corners. Paint the
+  // disabled state on the wrapper with the tokens of a native `:disabled` control,
+  // which also covers a single select with a value (`.full`, painted `--body-bg`).
+  &.form-control,
+  &.form-select {
+    background-color: var(--control-disabled-bg);
+    border-color: var(--control-disabled-border-color);
+
+    .ts-control {
+      background-color: transparent;
+    }
   }
 }