@well-insight/ui 0.1.9 → 0.1.11

package/dist/select/index.js

@@ -1,10 +1,12 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n, i as ee, o as te } from "../config-DWwce9jA.js";
-import { n as ne, t as r } 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 ee } from "../overlayPlacement-CN1tuC95.js";
+import { c as te, i as ne, o as re } from "../config-CTLkobga.js";
+import { n as ie, t as r } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as i, Teleport as re, Transition as ie, computed as a, createBlock as ae, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as oe, defineComponent as l, nextTick as se, normalizeClass as u, normalizeStyle as ce, onBeforeUnmount as le, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, vModelText as ue, watch as de, withCtx as fe, withDirectives as pe, withModifiers as me } from "vue";
+import { Fragment as i, Teleport as ae, Transition as oe, computed as a, createBlock as se, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, nextTick as ce, normalizeClass as d, normalizeStyle as le, onBeforeUnmount as ue, openBlock as f, ref as p, renderList as de, toDisplayString as m, unref as h, vModelText as fe, watch as pe, withCtx as me, withDirectives as he, withModifiers as ge } from "vue";
 //#region src/components/Select/Select.vue?vue&type=script&setup=true&lang.ts
-var he = ["for"], ge = [
+var _e = ["for"], ve = [
 	"id",
 	"tabindex",
 	"aria-expanded",
@@ -14,52 +16,44 @@ var he = ["for"], ge = [
 	"aria-disabled",
 	"aria-busy",
 	"aria-multiselectable"
-], _e = {
+], ye = {
 	key: 0,
 	class: "wi-select__tags"
-}, ve = { class: "wi-select__tag-label" }, ye = [
+}, be = { class: "wi-select__tag-label" }, xe = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], be = ["aria-label"], xe = {
+], Se = ["aria-label"], Ce = {
 	key: 1,
 	class: "wi-select__value"
-}, Se = {
+}, we = {
 	key: 2,
 	class: "wi-select__spinner",
 	"aria-hidden": "true"
-}, Ce = ["aria-label"], we = [
+}, Te = { class: "wi-select__suffix" }, Ee = ["aria-label"], De = [
 	"id",
 	"aria-multiselectable",
 	"aria-label"
-], Te = ["placeholder", "aria-label"], Ee = {
+], Oe = ["placeholder", "aria-label"], ke = {
 	key: 1,
 	class: "wi-select__empty",
 	role: "status"
-}, De = [
+}, Ae = [
 	"aria-selected",
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], Oe = {
-	key: 0,
-	class: "wi-select__check",
-	"aria-hidden": "true"
-}, ke = {
+], je = {
 	key: 2,
 	class: "wi-select__empty",
 	role: "status"
-}, Ae = ["required", "value"], je = ["id", "role"], g = /* @__PURE__ */ l({
+}, Me = ["required", "value"], Ne = ["id", "role"], g = /* @__PURE__ */ u({
 	__name: "Select",
 	props: {
 		modelValue: { default: void 0 },
 		options: {},
 		label: {},
 		helpText: {},
-		error: {
-			type: Boolean,
-			default: !1
-		},
 		invalid: {
 			type: Boolean,
 			default: !1
@@ -101,6 +95,10 @@ var he = ["for"], ge = [
 			type: Boolean,
 			default: void 0
 		},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
 		emptyMessage: {},
 		filter: {
 			type: Boolean,
@@ -122,85 +120,82 @@ var he = ["for"], ge = [
 		"search",
 		"create"
 	],
-	setup(l, { emit: g }) {
-		let _ = l, v = g, y = ee("Select"), b = n(), x = ne(), S = f(null), C = f(null), w = f(null), T = f(null), E = f(!1), D = f(""), O = f(-1), k = f({}), A = f([]), j = a(() => _.id ?? `wi-select-${Math.random().toString(36).slice(2, 8)}`), Me = a(() => _.emptyMessage ?? x.value.emptyOptions), M = a(() => _.multiple ?? y.value.multiple ?? !1), Ne = a(() => _.tag ?? y.value.tag ?? !1), N = a(() => _.remote ?? y.value.remote ?? !1), P = a(() => _.loading ?? !1), F = a(() => _.fluid ?? y.value.fluid ?? !1), Pe = a(() => _.showClear ?? y.value.showClear ?? !1), I = a(() => _.filter ?? y.value.filter ?? !1), Fe = te("Select", () => _.size), Ie = a(() => e(_, b.value.appendTo)), L = a(() => t(_, b.value.appendTo)), R = a(() => _.error || _.invalid || !!_.errorMessage), z = a(() => _.errorMessage || _.helpText), Le = a(() => !!_.errorMessage || R.value && !!_.helpText), B = a(() => M.value ? Array.isArray(_.modelValue) ? _.modelValue : _.modelValue == null ? [] : [_.modelValue] : _.modelValue == null || Array.isArray(_.modelValue) ? [] : [_.modelValue]), V = a(() => {
+	setup(u, { emit: g }) {
+		let _ = u, v = g, y = ne("Select"), b = te(), x = ie(), S = p(null), C = p(null), w = p(null), T = p(null), E = p(!1), D = p(""), O = p(-1), k = p({}), A = p([]), j = a(() => _.id ?? `wi-select-${Math.random().toString(36).slice(2, 8)}`), Pe = a(() => _.emptyMessage ?? x.value.emptyOptions), M = a(() => _.multiple ?? y.value.multiple ?? !1), Fe = a(() => _.tag ?? y.value.tag ?? !1), N = a(() => _.remote ?? y.value.remote ?? !1), P = a(() => _.loading ?? !1), Ie = a(() => _.fluid ?? y.value.fluid ?? !1), Le = a(() => _.showClear ?? _.clearable ?? y.value.showClear ?? y.value.clearable ?? !1), F = a(() => _.filter ?? y.value.filter ?? !1), Re = re("Select", () => _.size), ze = a(() => t(_, b.value.appendTo)), I = a(() => n(_, b.value.appendTo)), L = a(() => _.invalid || !!_.errorMessage), R = a(() => _.errorMessage || _.helpText), Be = a(() => !!_.errorMessage || L.value && !!_.helpText), z = a(() => M.value ? Array.isArray(_.modelValue) ? _.modelValue : _.modelValue == null ? [] : [_.modelValue] : _.modelValue == null || Array.isArray(_.modelValue) ? [] : [_.modelValue]), B = a(() => {
 			let e = new Set(_.options.map((e) => String(e.value))), t = [];
 			for (let n of A.value) e.has(String(n.value)) || (t.push(n), e.add(String(n.value)));
-			for (let n of B.value) e.has(String(n)) || (t.push({
+			for (let n of z.value) e.has(String(n)) || (t.push({
 				label: String(n),
 				value: n
 			}), e.add(String(n)));
 			return [..._.options, ...t];
 		});
-		function Re(e) {
-			return V.value.find((t) => t.value === e);
+		function Ve(e) {
+			return B.value.find((t) => t.value === e);
 		}
-		let H = a(() => B.value.map((e) => Re(e) ?? {
+		let V = a(() => z.value.map((e) => Ve(e) ?? {
 			label: String(e),
 			value: e
-		})), ze = a(() => {
-			let e = H.value;
+		})), He = a(() => {
+			let e = V.value;
 			return _.maxTagCount == null || e.length <= _.maxTagCount ? e : e.slice(0, _.maxTagCount);
-		}), U = a(() => Math.max(0, H.value.length - ze.value.length)), Be = a(() => M.value ? void 0 : H.value[0]), Ve = a(() => Be.value?.label ?? _.placeholder ?? x.value.selectPlaceholder), W = a(() => B.value.length > 0), He = a(() => Pe.value && W.value && !_.disabled), G = a(() => D.value.trim()), Ue = a(() => !Ne.value || !I.value || !G.value ? !1 : !V.value.some((e) => e.label.toLowerCase() === G.value.toLowerCase() || String(e.value) === G.value)), We = a(() => {
+		}), H = a(() => Math.max(0, V.value.length - He.value.length)), Ue = a(() => M.value ? void 0 : V.value[0]), We = a(() => Ue.value?.label ?? _.placeholder ?? x.value.selectPlaceholder), U = a(() => z.value.length > 0), Ge = a(() => Le.value && U.value && !_.disabled), W = a(() => D.value.trim()), G = a(() => !Fe.value || !F.value || !W.value ? !1 : !B.value.some((e) => e.label.toLowerCase() === W.value.toLowerCase() || String(e.value) === W.value)), Ke = a(() => {
 			if (N.value) return _.options;
-			let e = G.value.toLowerCase();
-			return e ? V.value.filter((t) => t.label.toLowerCase().includes(e)) : V.value;
-		}), K = a(() => Ue.value ? [{
-			label: G.value,
-			value: G.value,
+			let e = W.value.toLowerCase();
+			return e ? B.value.filter((t) => t.label.toLowerCase().includes(e)) : B.value;
+		}), K = a(() => G.value ? [{
+			label: W.value,
+			value: W.value,
 			created: !0
-		}, ...We.value] : We.value), q = a(() => K.value.filter((e) => !e.disabled)), Ge = a(() => r(x.value.createOption, { value: G.value })), Ke = a(() => r(x.value.moreTags, { count: U.value }));
+		}, ...Ke.value] : Ke.value), q = a(() => K.value.filter((e) => !e.disabled)), qe = a(() => r(x.value.createOption, { value: W.value })), Je = a(() => r(x.value.moreTags, { count: H.value }));
 		function J(e) {
-			return B.value.some((t) => t === e);
+			return z.value.some((t) => t === e);
 		}
 		function Y(e) {
 			v("update:modelValue", e), v("change", e);
 		}
-		function qe() {
-			if (!L.value || !C.value) return;
-			let e = C.value.getBoundingClientRect(), t = b.value.zIndex ?? 1e3;
-			k.value = {
-				left: _.placement === "bottom-end" ? `${e.right}px` : `${e.left}px`,
+		function Ye() {
+			if (!I.value || !C.value) return;
+			let e = C.value.getBoundingClientRect();
+			k.value = ee(e, _.placement === "bottom-end" ? "bottom-end" : "bottom-start", {
 				minWidth: `${e.width}px`,
-				top: `${e.bottom + 8}px`,
-				zIndex: String(t),
-				..._.placement === "bottom-end" ? { transform: "translateX(-100%)" } : {}
-			};
+				zIndex: b.value.zIndex ?? 1e3
+			});
 		}
 		function X(e) {
-			_.disabled || E.value === e || (E.value = e, e ? (D.value = "", O.value = Math.max(0, q.value.findIndex((e) => !e.created && J(e.value))), v("show"), se(() => {
-				qe(), I.value ? T.value?.focus({ preventScroll: !0 }) : w.value?.focus({ preventScroll: !0 });
+			_.disabled || E.value === e || (E.value = e, e ? (D.value = "", O.value = Math.max(0, q.value.findIndex((e) => !e.created && J(e.value))), v("show"), ce(() => {
+				Ye(), F.value ? T.value?.focus({ preventScroll: !0 }) : w.value?.focus({ preventScroll: !0 });
 			})) : (D.value = "", v("hide")));
 		}
 		function Z(e) {
 			if (!e.disabled) {
 				if (e.created) {
-					Je();
+					Xe();
 					return;
 				}
 				if (M.value) {
-					Y(J(e.value) ? B.value.filter((t) => t !== e.value) : [...B.value, e.value]);
+					Y(J(e.value) ? z.value.filter((t) => t !== e.value) : [...z.value, e.value]);
 					return;
 				}
 				Y(e.value), X(!1), C.value?.focus({ preventScroll: !0 });
 			}
 		}
-		function Je() {
-			let e = G.value;
-			if (!e || !Ue.value) return;
+		function Xe() {
+			let e = W.value;
+			if (!e || !G.value) return;
 			let t = {
 				label: e,
 				value: e
 			};
 			A.value.some((e) => e.value === t.value) || (A.value = [...A.value, t]), v("create", t), Z({ ...t }), D.value = "";
 		}
-		function Ye(e, t) {
-			t.stopPropagation(), t.preventDefault(), !(_.disabled || !M.value) && Y(B.value.filter((t) => t !== e));
+		function Ze(e, t) {
+			t.stopPropagation(), t.preventDefault(), !(_.disabled || !M.value) && Y(z.value.filter((t) => t !== e));
 		}
-		function Xe(e) {
-			e?.stopPropagation(), e?.preventDefault(), !(_.disabled || !W.value) && (Y(M.value ? [] : void 0), v("clear"), C.value?.focus({ preventScroll: !0 }));
+		function Qe(e) {
+			e?.stopPropagation(), e?.preventDefault(), !(_.disabled || !U.value) && (Y(M.value ? [] : void 0), v("clear"), C.value?.focus({ preventScroll: !0 }));
 		}
-		function Ze(e) {
+		function $e(e) {
 			_.disabled || [
 				"Enter",
 				" ",
@@ -208,7 +203,7 @@ var he = ["for"], ge = [
 				"ArrowUp"
 			].includes(e.key) && (e.preventDefault(), E.value || X(!0));
 		}
-		function Qe(e) {
+		function et(e) {
 			if (e.key === "Escape") {
 				e.preventDefault(), X(!1), C.value?.focus({ preventScroll: !0 });
 				return;
@@ -223,138 +218,151 @@ var he = ["for"], ge = [
 			E.value && !S.value?.contains(e.target) && !w.value?.contains(e.target) && X(!1);
 		}
 		function $() {
-			E.value && qe();
+			E.value && Ye();
 		}
-		return de(D, (e) => {
-			O.value = q.value.length ? 0 : -1, E.value && (I.value || N.value) && v("search", e);
-		}), de(E, (e) => {
-			e && N.value && v("search", D.value), e ? (document.addEventListener("click", Q), L.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
-		}), le(() => {
+		return pe(D, (e) => {
+			O.value = q.value.length ? 0 : -1, E.value && (F.value || N.value) && v("search", e);
+		}), pe(E, (e) => {
+			e && N.value && v("search", D.value), e ? (document.addEventListener("click", Q), I.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), ue(() => {
 			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
-		}), (e, t) => (d(), s("div", {
+		}), (t, n) => (f(), s("div", {
 			ref_key: "root",
 			ref: S,
-			class: u(["wi-select-field", { "wi-select-field--fluid": F.value }])
+			class: d(["wi-select-field", { "wi-select-field--fluid": Ie.value }])
 		}, [
-			l.label ? (d(), s("label", {
+			u.label ? (f(), s("label", {
 				key: 0,
 				class: "wi-select-field__label",
 				for: j.value
-			}, m(l.label), 9, he)) : o("", !0),
-			c("div", { class: u(["wi-select__control", { "wi-select__control--clearable": He.value }]) }, [c("div", {
+			}, m(u.label), 9, _e)) : o("", !0),
+			c("div", { class: d(["wi-select__control", {
+				"wi-select__control--clearable": Ge.value,
+				"wi-select__control--open": E.value
+			}]) }, [c("div", {
 				id: j.value,
 				ref_key: "trigger",
 				ref: C,
-				class: u(["wi-select", [`wi-select--${h(Fe)}`, {
-					"wi-select--error": R.value,
+				class: d(["wi-select", [`wi-select--${h(Re)}`, {
+					"wi-select--invalid": L.value,
 					"wi-select--open": E.value,
-					"wi-select--placeholder": !W.value,
-					"wi-select--fluid": F.value,
+					"wi-select--placeholder": !U.value,
+					"wi-select--fluid": Ie.value,
 					"wi-select--multiple": M.value,
-					"wi-select--disabled": l.disabled,
+					"wi-select--disabled": u.disabled,
 					"wi-select--loading": P.value
 				}]]),
 				role: "combobox",
-				tabindex: l.disabled ? -1 : 0,
+				tabindex: u.disabled ? -1 : 0,
 				"aria-expanded": E.value,
 				"aria-haspopup": "listbox",
 				"aria-controls": `${j.value}-listbox`,
-				"aria-invalid": R.value || void 0,
-				"aria-describedby": z.value ? `${j.value}-help` : void 0,
-				"aria-disabled": l.disabled || void 0,
+				"aria-invalid": L.value || void 0,
+				"aria-describedby": R.value ? `${j.value}-help` : void 0,
+				"aria-disabled": u.disabled || void 0,
 				"aria-busy": P.value || void 0,
 				"aria-multiselectable": M.value || void 0,
-				onClick: t[0] ||= (e) => X(!E.value),
-				onKeydown: Ze
-			}, [
-				M.value && W.value ? (d(), s("div", _e, [(d(!0), s(i, null, p(ze.value, (e) => (d(), s("span", {
-					key: String(e.value),
-					class: "wi-select__tag"
-				}, [c("span", ve, m(e.label), 1), c("button", {
-					class: "wi-select__tag-remove",
-					type: "button",
-					"aria-label": h(x).removeTag,
-					disabled: l.disabled,
-					onClick: (t) => Ye(e.value, t)
-				}, " × ", 8, ye)]))), 128)), U.value ? (d(), s("span", {
-					key: 0,
-					class: "wi-select__tag wi-select__tag--more",
-					"aria-label": Ke.value
-				}, " +" + m(U.value), 9, be)) : o("", !0)])) : (d(), s("span", xe, m(Ve.value), 1)),
-				P.value ? (d(), s("span", Se)) : o("", !0),
-				t[3] ||= c("span", {
-					class: "wi-select__indicator",
-					"aria-hidden": "true"
-				}, null, -1)
-			], 42, ge), He.value ? (d(), s("button", {
+				onClick: n[0] ||= (e) => X(!E.value),
+				onKeydown: $e
+			}, [M.value && U.value ? (f(), s("div", ye, [(f(!0), s(i, null, de(He.value, (t) => (f(), s("span", {
+				key: String(t.value),
+				class: "wi-select__tag"
+			}, [c("span", be, m(t.label), 1), c("button", {
+				class: "wi-select__tag-remove",
+				type: "button",
+				"aria-label": h(x).removeTag,
+				disabled: u.disabled,
+				onClick: (e) => Ze(t.value, e)
+			}, [l(e, {
+				name: "close",
+				size: "sm"
+			})], 8, xe)]))), 128)), H.value ? (f(), s("span", {
+				key: 0,
+				class: "wi-select__tag wi-select__tag--more",
+				"aria-label": Je.value
+			}, " +" + m(H.value), 9, Se)) : o("", !0)])) : (f(), s("span", Ce, m(We.value), 1)), P.value ? (f(), s("span", we)) : o("", !0)], 42, ve), c("div", Te, [Ge.value ? (f(), s("button", {
 				key: 0,
 				class: "wi-select__clear",
 				type: "button",
 				"aria-label": h(x).clear,
-				onClick: Xe
-			}, " × ", 8, Ce)) : o("", !0)], 2),
-			(d(), ae(re, {
-				to: Ie.value.to,
-				disabled: Ie.value.disabled
-			}, [oe(ie, { name: "wi-scale-fade" }, {
-				default: fe(() => [E.value ? (d(), s("div", {
+				onClick: Qe
+			}, [l(e, {
+				name: "close",
+				size: "sm"
+			})], 8, Ee)) : o("", !0), c("span", {
+				class: d(["wi-select__indicator", { "wi-select__indicator--open": E.value }]),
+				"aria-hidden": "true"
+			}, [l(e, {
+				name: "chevron-down",
+				size: "sm"
+			})], 2)])], 2),
+			(f(), se(ae, {
+				to: ze.value.to,
+				disabled: ze.value.disabled
+			}, [l(oe, { name: "wi-scale-fade" }, {
+				default: me(() => [E.value ? (f(), s("div", {
 					key: 0,
 					id: `${j.value}-listbox`,
 					ref_key: "menu",
 					ref: w,
-					class: u(["wi-select__menu", [`wi-select__menu--${l.placement}`, { "wi-select__menu--teleported": L.value }]]),
-					style: ce(L.value ? k.value : void 0),
+					class: d(["wi-select__menu", [`wi-select__menu--${u.placement}`, { "wi-select__menu--teleported": I.value }]]),
+					style: le(I.value ? k.value : void 0),
 					role: "listbox",
 					tabindex: "-1",
 					"aria-multiselectable": M.value || void 0,
-					"aria-label": l.label ?? l.placeholder ?? h(x).selectOption,
-					onKeydown: Qe
+					"aria-label": u.label ?? u.placeholder ?? h(x).selectOption,
+					onKeydown: et
 				}, [
-					I.value ? pe((d(), s("input", {
+					F.value ? he((f(), s("input", {
 						key: 0,
 						ref_key: "filterInput",
 						ref: T,
-						"onUpdate:modelValue": t[1] ||= (e) => D.value = e,
+						"onUpdate:modelValue": n[1] ||= (e) => D.value = e,
 						class: "wi-select__filter",
 						type: "search",
 						placeholder: h(x).searchPlaceholder,
 						"aria-label": h(x).filterOptions,
-						onClick: t[2] ||= me(() => {}, ["stop"]),
-						onKeydown: me(Qe, ["stop"])
-					}, null, 40, Te)), [[ue, D.value]]) : o("", !0),
-					P.value ? (d(), s("div", Ee, m(h(x).loading), 1)) : o("", !0),
-					(d(!0), s(i, null, p(K.value, (e) => (d(), s("button", {
-						key: e.created ? `__create:${String(e.value)}` : String(e.value),
-						class: u(["wi-select__option", {
-							"wi-select__option--selected": !e.created && J(e.value),
-							"wi-select__option--highlighted": q.value[O.value]?.value === e.value && !!q.value[O.value]?.created == !!e.created,
-							"wi-select__option--create": e.created
+						onClick: n[2] ||= ge(() => {}, ["stop"]),
+						onKeydown: ge(et, ["stop"])
+					}, null, 40, Oe)), [[fe, D.value]]) : o("", !0),
+					P.value ? (f(), s("div", ke, m(h(x).loading), 1)) : o("", !0),
+					(f(!0), s(i, null, de(K.value, (t) => (f(), s("button", {
+						key: t.created ? `__create:${String(t.value)}` : String(t.value),
+						class: d(["wi-select__option", {
+							"wi-select__option--selected": !t.created && J(t.value),
+							"wi-select__option--highlighted": q.value[O.value]?.value === t.value && !!q.value[O.value]?.created == !!t.created,
+							"wi-select__option--create": t.created
 						}]),
 						type: "button",
 						role: "option",
-						"aria-selected": e.created ? void 0 : J(e.value),
-						disabled: e.disabled,
-						onMouseenter: (t) => !e.disabled && (O.value = q.value.findIndex((t) => t.value === e.value && !!t.created == !!e.created)),
-						onClick: (t) => Z(e)
-					}, [c("span", null, m(e.created ? Ge.value : e.label), 1), !e.created && J(e.value) ? (d(), s("span", Oe, "✓")) : o("", !0)], 42, De))), 128)),
-					!K.value.length && !P.value ? (d(), s("div", ke, m(Me.value), 1)) : o("", !0)
-				], 46, we)) : o("", !0)]),
+						"aria-selected": t.created ? void 0 : J(t.value),
+						disabled: t.disabled,
+						onMouseenter: (e) => !t.disabled && (O.value = q.value.findIndex((e) => e.value === t.value && !!e.created == !!t.created)),
+						onClick: (e) => Z(t)
+					}, [c("span", null, m(t.created ? qe.value : t.label), 1), !t.created && J(t.value) ? (f(), se(e, {
+						key: 0,
+						class: "wi-select__check",
+						name: "check",
+						size: "sm"
+					})) : o("", !0)], 42, Ae))), 128)),
+					!K.value.length && !P.value ? (f(), s("div", je, m(Pe.value), 1)) : o("", !0)
+				], 46, De)) : o("", !0)]),
 				_: 1
 			})], 8, ["to", "disabled"])),
-			l.required ? (d(), s("input", {
+			u.required ? (f(), s("input", {
 				key: 1,
 				class: "wi-select__required-input",
 				tabindex: "-1",
 				"aria-hidden": "true",
-				required: !W.value,
-				value: M.value ? B.value.join(",") : B.value[0]
-			}, null, 8, Ae)) : o("", !0),
-			z.value ? (d(), s("span", {
+				required: !U.value,
+				value: M.value ? z.value.join(",") : z.value[0]
+			}, null, 8, Me)) : o("", !0),
+			R.value ? (f(), s("span", {
 				key: 2,
 				id: `${j.value}-help`,
-				class: u(["wi-select-field__help", { "wi-select-field__help--error": Le.value }]),
-				role: Le.value ? "alert" : void 0
-			}, m(z.value), 11, je)) : o("", !0)
+				class: d(["wi-select-field__help", { "wi-select-field__help--invalid": Be.value }]),
+				role: Be.value ? "alert" : void 0
+			}, m(R.value), 11, Ne)) : o("", !0)
 		], 2));
 	}
 });