Support a leading input icon on Tom Select fields (#3300)

.changeset/tom-select-input-icon.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/docs": patch
+---
+
+Added `.input-icon` support for Tom Select: a leading icon no longer overlaps the selected value.

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

@@ -81,6 +81,7 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre
   "--tblr-green",
   "--tblr-icon-size",
   "--tblr-info",
+  "--tblr-input-icon-padding-start",
   "--tblr-light",
   "--tblr-orange",
   "--tblr-primary",

core/scss/vendor/_tom-select.scss

@@ -94,6 +94,13 @@
   }
 }
 
+// In an `.input-icon`, the wrapper carries the `.form-select` class that gets the room for
+// the icon, but the preset draws the text in `.ts-control` with its own padding: leave the
+// room for a leading icon there.
+.input-icon > .input-icon-addon ~ .ts-wrapper .ts-control {
+  padding-inline-start: var(--input-icon-padding-start);
+}
+
 // Every declaration below is `!important`: the bootstrap5 preset CSS targets
 // these same selectors at equal specificity, and whichever stylesheet is
 // included last otherwise wins outright (not just for z-index — the preset's

docs/content/ui/plugins/advanced-select.mdx

@@ -9,6 +9,7 @@ related: [/ui/forms/select-group, /ui/forms/elements]
 ---
 
 import Example from '@components/Example.astro';
+import Icon from '@ui/Icon.astro';
 import TabsPackage from '@components/TabsPackage.astro';
 import { Code } from 'astro:components';
 import { site } from '@shared/lib/site.ts';
@@ -146,6 +147,24 @@ Add `.is-valid` or `.is-invalid` to the `<select>` to show a validation state. T
 </div>
 </Example>
 
+### With an icon
+
+Put the `<select>` in an [`.input-icon`](/ui/forms/elements#input-with-icon) after an `.input-icon-addon`, as for an input. The icon shows inside the Tom Select field.
+
+<Example>
+<div class="input-icon">
+  <span class="input-icon-addon">
+    <Icon name="user" />
+  </span>
+  <select class="form-select" id="select-icon" data-placeholder="Assign to…">
+    <option value="">Assign to…</option>
+    <option value="1">Jane Doe</option>
+    <option value="2">Mark Smith</option>
+    <option value="3">Amy Kim</option>
+  </select>
+</div>
+</Example>
+
 ### Rich options
 
 An option can carry extra markup - an avatar, a flag, a badge - through a `data-custom-properties` attribute. Read it in a custom `render.option` / `render.item` function and show it next to the option text.
@@ -218,7 +237,7 @@ window.addEventListener('load', function () {
 		return '<div>' + escape(data.text) + '</div>';
 	}
 
-	['select-overview', 'select-basic', 'select-placeholder', 'select-multiple', 'select-optgroup', 'select-valid', 'select-invalid'].forEach(function (id) {
+	['select-overview', 'select-basic', 'select-placeholder', 'select-multiple', 'select-optgroup', 'select-valid', 'select-invalid', 'select-icon'].forEach(function (id) {
 		var el = document.getElementById(id);
 		if (el) new TomSelect(el, { copyClassesToDropdown: false, dropdownParent: 'body' });
 	});