@well-insight/ui 0.1.10 → 0.1.12

package/dist/tree-select/index.js

@@ -1,18 +1,20 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { t as n } from "../Checkbox-BvlOYFGs.js";
-import { a as r, i, n as ee, o as te, r as a, s as ne } from "../checkStrategy-CZzuUKDI.js";
-import { c as re, o as ie } from "../config-DWwce9jA.js";
-import { n as o } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t, t as n } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-CN1tuC95.js";
+import { t as i } from "../Checkbox-CoovLjt_.js";
+import { a, i as o, n as ee, o as te, r as s, s as ne } from "../checkStrategy-CZzuUKDI.js";
+import { c, o as re } from "../config-CTLkobga.js";
+import { n as l } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as s, Teleport as ae, Transition as oe, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as se, defineComponent as p, nextTick as ce, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as le, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, vModelText as x, watch as S, withCtx as C, withDirectives as ue, withKeys as de, withModifiers as w } from "vue";
+import { Fragment as u, Teleport as ie, Transition as ae, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, nextTick as oe, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as se, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, vModelText as ce, watch as le, withCtx as ue, withDirectives as de, withKeys as fe, withModifiers as T } from "vue";
 //#region src/components/TreeSelect/TreeSelectNodeItem.vue?vue&type=script&setup=true&lang.ts
-var T = ["aria-expanded"], E = ["aria-label"], D = {
+var E = ["aria-expanded"], D = ["aria-label"], O = {
 	key: 1,
 	class: "wi-treeselect__toggler-spacer"
-}, O = ["disabled"], k = {
+}, k = ["disabled"], A = {
 	key: 0,
 	role: "group"
-}, A = /* @__PURE__ */ p({
+}, j = /* @__PURE__ */ _({
 	__name: "TreeSelectNodeItem",
 	props: {
 		node: {},
@@ -27,48 +29,51 @@ var T = ["aria-expanded"], E = ["aria-label"], D = {
 		"select",
 		"check"
 	],
-	setup(e) {
-		let t = o();
-		return (r, i) => (g(), d("li", {
+	setup(t) {
+		let n = l();
+		return (r, a) => (b(), m("li", {
 			class: "wi-treeselect__node",
 			role: "treeitem",
-			"aria-expanded": e.node.children?.length ? !!e.expanded[e.node.key] : void 0
-		}, [f("div", {
+			"aria-expanded": t.node.children?.length ? !!t.expanded[t.node.key] : void 0
+		}, [h("div", {
 			class: "wi-treeselect__row",
-			style: h({ paddingLeft: `${e.depth * .75}rem` })
+			style: y({ paddingLeft: `${t.depth * .75}rem` })
 		}, [
-			e.node.children?.length ? (g(), d("button", {
+			t.node.children?.length ? (b(), m("button", {
 				key: 0,
 				type: "button",
 				class: "wi-treeselect__toggler",
-				"aria-label": e.expanded[e.node.key] ? b(t).collapse : b(t).expand,
-				onClick: i[0] ||= w((t) => r.$emit("toggle", e.node.key), ["stop"])
-			}, y(e.expanded[e.node.key] ? "▾" : "▸"), 9, E)) : (g(), d("span", D)),
-			e.showCheckbox ? (g(), l(n, {
+				"aria-label": t.expanded[t.node.key] ? w(n).collapse : w(n).expand,
+				onClick: a[0] ||= T((e) => r.$emit("toggle", t.node.key), ["stop"])
+			}, [g(e, {
+				name: t.expanded[t.node.key] ? "chevron-down" : "chevron-right",
+				size: "sm"
+			}, null, 8, ["name"])], 8, D)) : (b(), m("span", O)),
+			t.showCheckbox ? (b(), f(i, {
 				key: 2,
 				class: "wi-treeselect__checkbox",
-				"model-value": !!e.checkedKeys[e.node.key],
-				disabled: e.node.disabled,
-				"onUpdate:modelValue": i[1] ||= (t) => r.$emit("check", e.node),
-				onClick: i[2] ||= w(() => {}, ["stop"])
-			}, null, 8, ["model-value", "disabled"])) : u("", !0),
-			f("button", {
+				"model-value": !!t.checkedKeys[t.node.key],
+				disabled: t.node.disabled,
+				"onUpdate:modelValue": a[1] ||= (e) => r.$emit("check", t.node),
+				onClick: a[2] ||= T(() => {}, ["stop"])
+			}, null, 8, ["model-value", "disabled"])) : p("", !0),
+			h("button", {
 				type: "button",
-				class: m(["wi-treeselect__option", { "wi-treeselect__option--selected": e.selectedKeys.includes(e.node.key) }]),
-				disabled: e.node.disabled,
-				onClick: i[3] ||= (t) => r.$emit("select", e.node)
-			}, y(e.node.label), 11, O)
-		], 4), e.node.children?.length && e.expanded[e.node.key] ? (g(), d("ul", k, [(g(!0), d(s, null, v(e.node.children, (t) => (g(), l(A, {
-			key: t.key,
-			node: t,
-			depth: e.depth + 1,
-			"selected-keys": e.selectedKeys,
-			"checked-keys": e.checkedKeys,
-			expanded: e.expanded,
-			"show-checkbox": e.showCheckbox,
-			onToggle: i[4] ||= (e) => r.$emit("toggle", e),
-			onSelect: i[5] ||= (e) => r.$emit("select", e),
-			onCheck: i[6] ||= (e) => r.$emit("check", e)
+				class: v(["wi-treeselect__option", { "wi-treeselect__option--selected": t.selectedKeys.includes(t.node.key) }]),
+				disabled: t.node.disabled,
+				onClick: a[3] ||= (e) => r.$emit("select", t.node)
+			}, C(t.node.label), 11, k)
+		], 4), t.node.children?.length && t.expanded[t.node.key] ? (b(), m("ul", A, [(b(!0), m(u, null, S(t.node.children, (e) => (b(), f(j, {
+			key: e.key,
+			node: e,
+			depth: t.depth + 1,
+			"selected-keys": t.selectedKeys,
+			"checked-keys": t.checkedKeys,
+			expanded: t.expanded,
+			"show-checkbox": t.showCheckbox,
+			onToggle: a[4] ||= (e) => r.$emit("toggle", e),
+			onSelect: a[5] ||= (e) => r.$emit("select", e),
+			onCheck: a[6] ||= (e) => r.$emit("check", e)
 		}, null, 8, [
 			"node",
 			"depth",
@@ -76,26 +81,26 @@ var T = ["aria-expanded"], E = ["aria-label"], D = {
 			"checked-keys",
 			"expanded",
 			"show-checkbox"
-		]))), 128))])) : u("", !0)], 8, T));
+		]))), 128))])) : p("", !0)], 8, E));
 	}
-}), fe = [
+}), pe = [
 	"aria-disabled",
 	"aria-expanded",
 	"onKeydown"
-], pe = {
+], me = {
 	key: 0,
 	class: "wi-treeselect__tags"
-}, me = { class: "wi-select__tag-label" }, he = [
+}, he = { class: "wi-select__tag-label" }, ge = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], ge = {
+], _e = {
 	key: 0,
 	class: "wi-select__tag wi-select__tag--more"
-}, j = ["aria-label"], _e = ["placeholder"], M = {
+}, ve = { class: "wi-select__suffix" }, ye = ["aria-label"], be = ["placeholder"], xe = {
 	class: "wi-treeselect__tree",
 	role: "tree"
-}, N = /* @__PURE__ */ p({
+}, M = /* @__PURE__ */ _({
 	__name: "TreeSelect",
 	props: {
 		options: {},
@@ -141,28 +146,28 @@ var T = ["aria-expanded"], E = ["aria-label"], D = {
 		appendTo: {}
 	},
 	emits: ["update:modelValue", "clear"],
-	setup(n, { emit: p }) {
-		let T = n, E = p, D = re(), O = o(), k = ie("TreeSelect", () => T.size), N = _(!1), P = _(""), F = _(null), I = _(null), L = _(null), R = _({}), z = _({}), B = c(() => e(T, D.value.appendTo)), V = c(() => t(T, D.value.appendTo)), H = c(() => T.multiple || T.selectionMode === "multiple" || T.checkable), U = c(() => Array.isArray(T.modelValue) ? T.modelValue : typeof T.modelValue == "string" && T.modelValue ? [T.modelValue] : []), ve = c(() => {
+	setup(i, { emit: _ }) {
+		let E = i, D = _, O = c(), k = l(), A = re("TreeSelect", () => E.size), M = x(!1), N = x(""), P = x(null), F = x(null), I = x(null), L = x({}), R = x({}), z = d(() => t(E, O.value.appendTo)), B = d(() => n(E, O.value.appendTo)), V = d(() => E.multiple || E.selectionMode === "multiple" || E.checkable), H = d(() => Array.isArray(E.modelValue) ? E.modelValue : typeof E.modelValue == "string" && E.modelValue ? [E.modelValue] : []), Se = d(() => {
 			let e = {};
-			for (let t of U.value) e[t] = !0;
+			for (let t of H.value) e[t] = !0;
 			return e;
-		}), W = c(() => ee(T.options, ve.value, T.checkStrategy, T.checkStrictly)), ye = c(() => {
-			let e = U.value[0];
-			if (!e || H.value) return T.placeholder ?? O.value.selectPlaceholder;
-			if (T.showPath) {
-				let t = i(T.options, e);
-				return t.length ? t.join(T.separator) : e;
+		}), U = d(() => ee(E.options, Se.value, E.checkStrategy, E.checkStrictly)), Ce = d(() => {
+			let e = H.value[0];
+			if (!e || V.value) return E.placeholder ?? k.value.selectPlaceholder;
+			if (E.showPath) {
+				let t = o(E.options, e);
+				return t.length ? t.join(E.separator) : e;
 			}
-			return a(T.options, e)?.label ?? T.placeholder ?? O.value.selectPlaceholder;
-		}), G = c(() => U.value.map((e) => ({
+			return s(E.options, e)?.label ?? E.placeholder ?? k.value.selectPlaceholder;
+		}), W = d(() => H.value.map((e) => ({
 			key: e,
-			label: T.showPath ? i(T.options, e).join(T.separator) : a(T.options, e)?.label ?? e
-		}))), K = c(() => {
-			let e = T.maxTagCount;
-			return e == null || e < 0 || G.value.length <= e ? G.value : G.value.slice(0, e);
-		}), q = c(() => Math.max(0, G.value.length - K.value.length)), be = c(() => {
-			let e = P.value.trim().toLowerCase();
-			if (!e) return T.options;
+			label: E.showPath ? o(E.options, e).join(E.separator) : s(E.options, e)?.label ?? e
+		}))), G = d(() => {
+			let e = E.maxTagCount;
+			return e == null || e < 0 || W.value.length <= e ? W.value : W.value.slice(0, e);
+		}), K = d(() => Math.max(0, W.value.length - G.value.length)), q = d(() => E.clearable && H.value.length > 0 && !E.disabled), we = d(() => {
+			let e = N.value.trim().toLowerCase();
+			if (!e) return E.options;
 			let t = (n) => {
 				let r = n.label.toLowerCase().includes(e), i = (n.children ?? []).map(t).filter((e) => e != null);
 				return r || i.length ? {
@@ -170,137 +175,141 @@ var T = ["aria-expanded"], E = ["aria-label"], D = {
 					children: i.length ? i : n.children
 				} : null;
 			};
-			return T.options.map(t).filter((e) => e != null);
+			return E.options.map(t).filter((e) => e != null);
 		});
 		function J() {
-			if (!V.value || !I.value) return;
-			let e = I.value.getBoundingClientRect();
-			R.value = {
-				left: `${e.left}px`,
-				minWidth: `${e.width}px`,
-				top: `${e.bottom + 8}px`
-			};
+			if (!B.value || !F.value) return;
+			let e = F.value.getBoundingClientRect();
+			L.value = r(e, "bottom-start", { minWidth: `${e.width}px` });
 		}
 		function Y() {
-			T.disabled || (N.value = !N.value, N.value && ce(() => J()));
+			E.disabled || (M.value = !M.value, M.value && oe(() => J()));
 		}
-		function xe(e) {
-			z.value = {
-				...z.value,
-				[e]: !z.value[e]
+		function Te(e) {
+			R.value = {
+				...R.value,
+				[e]: !R.value[e]
 			};
 		}
 		function X(e) {
-			H.value ? E("update:modelValue", e) : E("update:modelValue", e[0] ?? null);
+			V.value ? D("update:modelValue", e) : D("update:modelValue", e[0] ?? null);
 		}
-		function Se(e) {
+		function Ee(e) {
 			if (!e.disabled) {
-				if (T.checkable) {
+				if (E.checkable) {
 					Z(e);
 					return;
 				}
-				if (!H.value) {
-					E("update:modelValue", e.key === T.modelValue ? null : e.key), N.value = !1;
+				if (!V.value) {
+					D("update:modelValue", e.key === E.modelValue ? null : e.key), M.value = !1;
 					return;
 				}
-				X(U.value.includes(e.key) ? U.value.filter((t) => t !== e.key) : [...U.value, e.key]);
+				X(H.value.includes(e.key) ? H.value.filter((t) => t !== e.key) : [...H.value, e.key]);
 			}
 		}
 		function Z(e) {
 			if (e.disabled) return;
-			let t = { ...W.value }, n = !t[e.key];
-			T.checkStrictly ? n ? t[e.key] = !0 : delete t[e.key] : (te(e, n, t), ne(T.options, t));
-			let i = r(T.options, t, T.checkStrategy, T.checkStrictly);
-			X(Object.keys(i).filter((e) => i[e]));
+			let t = { ...U.value }, n = !t[e.key];
+			E.checkStrictly ? n ? t[e.key] = !0 : delete t[e.key] : (te(e, n, t), ne(E.options, t));
+			let r = a(E.options, t, E.checkStrategy, E.checkStrictly);
+			X(Object.keys(r).filter((e) => r[e]));
 		}
-		function Ce(e) {
-			X(U.value.filter((t) => t !== e));
+		function De(e) {
+			X(H.value.filter((t) => t !== e));
 		}
-		function we(e) {
-			e.stopPropagation(), E("update:modelValue", H.value ? [] : null), E("clear");
+		function Oe(e) {
+			e.stopPropagation(), D("update:modelValue", V.value ? [] : null), D("clear");
 		}
 		function Q(e) {
 			let t = e.target;
-			F.value?.contains(t) || L.value?.contains(t) || (N.value = !1);
+			P.value?.contains(t) || I.value?.contains(t) || (M.value = !1);
 		}
 		function $() {
-			N.value && J();
+			M.value && J();
 		}
-		return S(N, (e) => {
-			e ? (document.addEventListener("click", Q), V.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (P.value = "", document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), le(() => {
+		return le(M, (e) => {
+			e ? (document.addEventListener("click", Q), B.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (N.value = "", document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), se(() => {
 			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, t) => (g(), d("div", {
+		}), (t, n) => (b(), m("div", {
 			ref_key: "root",
-			ref: F,
-			class: m(["wi-treeselect", [`wi-treeselect--${b(k)}`, {
-				"wi-treeselect--disabled": n.disabled,
-				"wi-treeselect--open": N.value,
-				"wi-treeselect--multiple": H.value
+			ref: P,
+			class: v(["wi-treeselect", [`wi-treeselect--${w(A)}`, {
+				"wi-treeselect--disabled": i.disabled,
+				"wi-treeselect--open": M.value,
+				"wi-treeselect--multiple": V.value
 			}]])
-		}, [f("div", {
+		}, [h("div", { class: v(["wi-treeselect__control wi-select__control", {
+			"wi-select__control--clearable": q.value,
+			"wi-select__control--open": M.value
+		}]) }, [h("div", {
 			ref_key: "trigger",
-			ref: I,
+			ref: F,
 			class: "wi-treeselect__trigger",
 			role: "combobox",
 			tabindex: "0",
-			"aria-disabled": n.disabled || void 0,
-			"aria-expanded": N.value,
+			"aria-disabled": i.disabled || void 0,
+			"aria-expanded": M.value,
 			"aria-haspopup": "tree",
 			onClick: Y,
-			onKeydown: de(w(Y, ["prevent"]), ["enter"])
-		}, [
-			H.value && G.value.length ? (g(), d("div", pe, [(g(!0), d(s, null, v(K.value, (e) => (g(), d("span", {
-				key: e.key,
-				class: "wi-select__tag"
-			}, [f("span", me, y(e.label), 1), f("button", {
-				type: "button",
-				class: "wi-select__tag-remove",
-				"aria-label": b(O).remove,
-				disabled: n.disabled,
-				onClick: w((t) => Ce(e.key), ["stop"])
-			}, " × ", 8, he)]))), 128)), q.value ? (g(), d("span", ge, y(q.value > 0 ? `+${q.value}` : ""), 1)) : u("", !0)])) : (g(), d("span", {
-				key: 1,
-				class: m(["wi-treeselect__label", { "wi-treeselect__label--placeholder": !U.value.length }])
-			}, y(ye.value), 3)),
-			n.clearable && U.value.length && !n.disabled ? (g(), d("button", {
-				key: 2,
-				type: "button",
-				class: "wi-treeselect__clear",
-				"aria-label": b(O).clear,
-				onClick: we
-			}, " × ", 8, j)) : u("", !0),
-			t[2] ||= f("span", {
-				class: "wi-treeselect__caret",
-				"aria-hidden": "true"
-			}, "▾", -1)
-		], 40, fe), (g(), l(ae, {
-			to: B.value.to,
-			disabled: B.value.disabled
-		}, [se(oe, { name: "wi-scale-fade" }, {
-			default: C(() => [N.value ? (g(), d("div", {
+			onKeydown: fe(T(Y, ["prevent"]), ["enter"])
+		}, [V.value && W.value.length ? (b(), m("div", me, [(b(!0), m(u, null, S(G.value, (t) => (b(), m("span", {
+			key: t.key,
+			class: "wi-select__tag"
+		}, [h("span", he, C(t.label), 1), h("button", {
+			type: "button",
+			class: "wi-select__tag-remove",
+			"aria-label": w(k).removeTag,
+			disabled: i.disabled,
+			onClick: T((e) => De(t.key), ["stop"])
+		}, [g(e, {
+			name: "close",
+			size: "sm"
+		})], 8, ge)]))), 128)), K.value ? (b(), m("span", _e, C(K.value > 0 ? `+${K.value}` : ""), 1)) : p("", !0)])) : (b(), m("span", {
+			key: 1,
+			class: v(["wi-treeselect__label", { "wi-treeselect__label--placeholder": !H.value.length }])
+		}, C(Ce.value), 3))], 40, pe), h("div", ve, [q.value ? (b(), m("button", {
+			key: 0,
+			class: "wi-select__clear",
+			type: "button",
+			"aria-label": w(k).clear,
+			onClick: Oe
+		}, [g(e, {
+			name: "close",
+			size: "sm"
+		})], 8, ye)) : p("", !0), h("span", {
+			class: v(["wi-select__indicator", { "wi-select__indicator--open": M.value }]),
+			"aria-hidden": "true"
+		}, [g(e, {
+			name: "chevron-down",
+			size: "sm"
+		})], 2)])], 2), (b(), f(ie, {
+			to: z.value.to,
+			disabled: z.value.disabled
+		}, [g(ae, { name: "wi-scale-fade" }, {
+			default: ue(() => [M.value ? (b(), m("div", {
 				key: 0,
 				ref_key: "panel",
-				ref: L,
-				class: m(["wi-treeselect__panel", { "wi-treeselect__panel--teleported": V.value }]),
-				style: h(V.value ? R.value : void 0)
-			}, [n.filterable ? ue((g(), d("input", {
+				ref: I,
+				class: v(["wi-treeselect__panel", { "wi-treeselect__panel--teleported": B.value }]),
+				style: y(B.value ? L.value : void 0)
+			}, [i.filterable ? de((b(), m("input", {
 				key: 0,
-				"onUpdate:modelValue": t[0] ||= (e) => P.value = e,
+				"onUpdate:modelValue": n[0] ||= (e) => N.value = e,
 				class: "wi-treeselect__filter",
 				type: "search",
-				placeholder: b(O).searchPlaceholder,
-				onClick: t[1] ||= w(() => {}, ["stop"])
-			}, null, 8, _e)), [[x, P.value]]) : u("", !0), f("ul", M, [(g(!0), d(s, null, v(be.value, (e) => (g(), l(A, {
+				placeholder: w(k).searchPlaceholder,
+				onClick: n[1] ||= T(() => {}, ["stop"])
+			}, null, 8, be)), [[ce, N.value]]) : p("", !0), h("ul", xe, [(b(!0), m(u, null, S(we.value, (e) => (b(), f(j, {
 				key: e.key,
 				node: e,
 				depth: 0,
-				"selected-keys": U.value,
-				"checked-keys": W.value,
-				expanded: z.value,
-				"show-checkbox": n.checkable,
-				onToggle: xe,
-				onSelect: Se,
+				"selected-keys": H.value,
+				"checked-keys": U.value,
+				expanded: R.value,
+				"show-checkbox": i.checkable,
+				onToggle: Te,
+				onSelect: Ee,
 				onCheck: Z
 			}, null, 8, [
 				"node",
@@ -308,10 +317,10 @@ var T = ["aria-expanded"], E = ["aria-label"], D = {
 				"checked-keys",
 				"expanded",
 				"show-checkbox"
-			]))), 128))])], 6)) : u("", !0)]),
+			]))), 128))])], 6)) : p("", !0)]),
 			_: 1
 		})], 8, ["to", "disabled"]))], 2));
 	}
 });
 //#endregion
-export { N as WiTreeSelect };
+export { M as WiTreeSelect };

package/dist/tree-select/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }
@@ -769,6 +768,45 @@
     border-color: var(--wi-color-primary);
 }
 
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
+}
+
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* —— Data: Tree —— */
 .wi-tree,
 .wi-tree__children {
@@ -877,33 +915,42 @@
     position: relative;
 }
 
+.wi-treeselect__control {
+    display: inline-block;
+    max-width: 100%;
+    min-width: var(--wi-treeselect-min-width);
+}
+
 .wi-treeselect__trigger {
     align-items: center;
     background: var(--wi-color-surface);
     border: 1px solid var(--wi-color-border);
     border-radius: var(--wi-radius-control);
+    box-sizing: border-box;
     color: var(--wi-color-text);
     cursor: pointer;
     display: inline-flex;
     font: inherit;
     font-size: var(--wi-control-font-medium);
-    gap: var(--wi-space-2);
-    justify-content: space-between;
+    gap: var(--wi-space-1);
     min-height: var(--wi-control-height-medium);
-    min-width: var(--wi-treeselect-min-width);
     padding: 0 var(--wi-control-padding-x-medium);
+    padding-right: var(--wi-control-end-padding);
+    width: 100%;
 }
 
 .wi-treeselect--small .wi-treeselect__trigger {
     font-size: var(--wi-control-font-small);
     min-height: var(--wi-control-height-small);
-    padding: 0 var(--wi-control-padding-x-small);
+    padding-left: var(--wi-control-padding-x-small);
+    padding-right: var(--wi-control-end-padding);
 }
 
 .wi-treeselect--large .wi-treeselect__trigger {
     font-size: var(--wi-control-font-large);
     min-height: var(--wi-control-height-large);
-    padding: 0 var(--wi-control-padding-x-large);
+    padding-left: var(--wi-control-padding-x-large);
+    padding-right: var(--wi-control-end-padding);
 }
 
 .wi-treeselect__trigger:focus-visible {
@@ -931,13 +978,13 @@
     color: var(--wi-color-text-muted);
 }
 
-.wi-treeselect__clear {
-    background: transparent;
-    border: 0;
-    color: var(--wi-color-text-muted);
-    cursor: pointer;
-    font: inherit;
-    line-height: 1;
+.wi-treeselect__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
 }
 
 .wi-treeselect__filter {

package/dist/tree-select/style.js

@@ -1,5 +1,6 @@
 import '../theme/styles.css'
 import '../styles/base.css'
 import '../components/Checkbox/styles.css'
+import '../components/Icon/styles.css'
 import '../components/Tree/styles.css'
 import '../components/TreeSelect/styles.css'