From 462835fbab5a6038ca1694db9ea95335f3de268e Mon Sep 17 00:00:00 2001
From: Guillaume Sainthillier <guillaume-sainthillier@users.noreply.github.com>
Date: Mon, 19 Oct 2026 18:02:54 +0200
Subject: [PATCH] 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  |  5 +++
 .../css-var-prefix.test.mjs.snap              |  2 ++
 core/scss/vendor/_tom-select.scss             | 34 +++++++++++++++----
 3 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fix-tom-select-disabled-radius.md

diff --git a/.changeset/fix-tom-select-disabled-radius.md b/.changeset/fix-tom-select-disabled-radius.md
new file mode 100644
index 000000000..6b829b0f9
--- /dev/null
+++ b/.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.
diff --git a/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap b/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap
index a5692898f..45add2673 100644
--- a/core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap
+++ b/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",
diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss
index 6612be68e..07c4477b3 100644
--- a/core/scss/vendor/_tom-select.scss
+++ b/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;
+    }
   }
 }