@sparklingopinions/sparkling-ui 0.7.0 → 0.9.1

package/dist/components/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
-import { useFieldControl as e } from "../FormField/context.js";
-import t from "../internal/CheckIcon.js";
-import n from "../Spinner/Spinner.js";
-import r from "../Tag/Tag.js";
-import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as ee, nextTick as m, normalizeClass as h, normalizeStyle as te, openBlock as g, ref as _, renderList as v, renderSlot as y, shallowRef as ne, toDisplayString as b, unref as x, useAttrs as re, useModel as ie, withCtx as S } from "vue";
-import { ListboxContent as ae, ListboxFilter as oe, ListboxItem as C, ListboxRoot as se, ListboxVirtualizer as ce, PopoverAnchor as le, PopoverContent as ue, PopoverPortal as de, PopoverRoot as fe } from "reka-ui";
+import e from "../Icon/Icon.js";
+import { useFieldControl as t } from "../FormField/context.js";
+import n from "../internal/CheckIcon.js";
+import r from "../Spinner/Spinner.js";
+import i from "../Tag/Tag.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as ee, nextTick as h, normalizeClass as g, normalizeStyle as te, openBlock as _, ref as v, renderList as y, renderSlot as b, shallowRef as ne, toDisplayString as x, unref as S, useAttrs as re, useModel as ie, withCtx as C } from "vue";
+import { ListboxContent as ae, ListboxFilter as oe, ListboxItem as w, ListboxRoot as se, ListboxVirtualizer as ce, PopoverAnchor as le, PopoverContent as ue, PopoverPortal as de, PopoverRoot as fe } from "reka-ui";
 //#region src/components/Select/Select.vue?vue&type=script&setup=true&lang.ts
 var pe = [
 	"aria-expanded",
@@ -20,23 +21,26 @@ var pe = [
 	class: "flex flex-wrap gap-1 py-1.25"
 }, _e = {
 	key: 4,
+	class: "inline-flex min-w-0 items-center gap-1.5"
+}, ve = { class: "truncate whitespace-nowrap" }, ye = {
+	key: 5,
 	class: "min-w-0 truncate whitespace-nowrap"
-}, ve = {
+}, be = {
 	key: 0,
 	class: "flex min-h-11 flex-wrap items-center gap-1 border-b border-sui-line-subtle px-3 py-2.5"
-}, ye = {
+}, xe = {
 	key: 1,
 	class: "flex justify-center py-6"
-}, be = { class: "inline-flex min-w-0 items-center gap-1.5 truncate" }, xe = { class: "inline-flex min-w-0 items-center gap-1.5 truncate" }, Se = { class: "inline-flex min-w-0 items-center gap-1.5" }, Ce = {
+}, Se = { class: "inline-flex min-w-0 items-center gap-1.5 truncate" }, Ce = { class: "inline-flex min-w-0 items-center gap-1.5 truncate" }, we = { class: "inline-flex min-w-0 items-center gap-1.5" }, Te = {
 	key: 1,
 	class: "font-medium"
-}, we = {
+}, Ee = {
 	key: 3,
 	class: "px-3.5 py-3 text-13 text-sui-ink-muted"
-}, w = "flex min-h-8 cursor-pointer items-center justify-between gap-3 rounded-lg py-1.5 pr-2 pl-2.5 text-13 whitespace-nowrap text-sui-ink outline-hidden select-none data-disabled:cursor-default data-disabled:opacity-50 data-highlighted:bg-sui-sunken data-[state=checked]:font-medium data-[state=checked]:text-sui-accent group-data-keyboard/list:data-highlighted:sui-ring-inset", T = /*@__PURE__*/ f({
+}, T = "flex min-h-8 cursor-pointer items-center justify-between gap-3 rounded-lg py-1.5 pr-2 pl-2.5 text-13 whitespace-nowrap text-sui-ink outline-hidden select-none data-disabled:cursor-default data-disabled:opacity-50 data-highlighted:bg-sui-sunken data-[state=checked]:font-medium data-[state=checked]:text-sui-accent group-data-keyboard/list:data-highlighted:sui-ring-inset", E = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "Select",
-	props: /*@__PURE__*/ p({
+	props: /*@__PURE__*/ m({
 		options: {},
 		selectedOptions: { default: () => [] },
 		multiple: { type: Boolean },
@@ -74,19 +78,19 @@ var pe = [
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ p(["query-change", "create-error"], ["update:modelValue"]),
-	setup(f, { emit: p }) {
-		let T = f, E = p, D = re(), O = a(() => D["aria-label"]), Te = a(() => Object.fromEntries(Object.entries(D).filter(([e]) => e !== "aria-label"))), k = ie(f, "modelValue"), A = _(!1), j = _(""), M = _(!1), N = a(() => Array.isArray(k.value) ? k.value : k.value === null || k.value === void 0 ? [] : [k.value]), P = ne([]), F = a(() => N.value.map((e) => [
-			T.options,
-			T.selectedOptions,
-			P.value
-		].map((t) => t.find((t) => t.value === e)).find((e) => !!e)).filter((e) => !!e)), I = a(() => T.searchable ?? (T.multiple || T.canCreate || T.clearable || T.filter === !1 || T.options.length > 8)), L = a(() => T.multiple || T.clearable), Ee = (e, t) => typeof T.filter == "function" ? T.filter(e, t) : e.label.toLowerCase().includes(t.toLowerCase()), R = a(() => {
-			let e = j.value.trim();
-			return T.options.filter((e) => !(T.multiple && I.value && N.value.includes(e.value))).filter((t) => !e || T.filter === !1 || Ee(t, e));
-		}), z = a(() => {
-			let e = j.value.trim().toLowerCase();
-			return T.canCreate && !!e && !T.options.some((t) => t.label.toLowerCase() === e);
-		}), De = a(() => R.value.length > 20), B = [
+	emits: /*@__PURE__*/ m(["query-change", "create-error"], ["update:modelValue"]),
+	setup(p, { emit: m }) {
+		let E = p, D = m, O = re(), k = o(() => O["aria-label"]), De = o(() => Object.fromEntries(Object.entries(O).filter(([e]) => e !== "aria-label"))), A = ie(p, "modelValue"), j = v(!1), M = v(""), N = v(!1), P = o(() => Array.isArray(A.value) ? A.value : A.value === null || A.value === void 0 ? [] : [A.value]), F = ne([]), I = o(() => P.value.map((e) => [
+			E.options,
+			E.selectedOptions,
+			F.value
+		].map((t) => t.find((t) => t.value === e)).find((e) => !!e)).filter((e) => !!e)), L = o(() => E.searchable ?? (E.multiple || E.canCreate || E.clearable || E.filter === !1 || E.options.length > 8)), R = o(() => E.multiple || E.clearable), Oe = (e, t) => typeof E.filter == "function" ? E.filter(e, t) : e.label.toLowerCase().includes(t.toLowerCase()), z = o(() => {
+			let e = M.value.trim();
+			return E.options.filter((e) => !(E.multiple && L.value && P.value.includes(e.value))).filter((t) => !e || E.filter === !1 || Oe(t, e));
+		}), B = o(() => {
+			let e = M.value.trim().toLowerCase();
+			return E.canCreate && !!e && !E.options.some((t) => t.label.toLowerCase() === e);
+		}), ke = o(() => z.value.length > 20), V = [
 			"gray",
 			"purple",
 			"red",
@@ -95,192 +99,226 @@ var pe = [
 			"pink",
 			"blue",
 			"slate"
-		], V = a(() => B[j.value.length % B.length]), H = { create: !0 }, { attrs: Oe, invalid: U } = e(() => void 0, () => T.invalid);
-		function W(e) {
-			j.value = e, E("query-change", e);
-		}
+		], H = o(() => V[M.value.length % V.length]), U = { create: !0 }, { attrs: Ae, invalid: W } = t(() => void 0, () => E.invalid);
 		function G(e) {
-			T.disabled || (M.value = e, A.value = !0);
+			M.value = e, D("query-change", e);
 		}
-		function K() {
-			A.value = !1, j.value && W("");
+		function K(e) {
+			E.disabled || (N.value = e, j.value = !0);
 		}
-		function q(e) {
-			A.value ? K() : G(!!e && e.detail === 0);
+		function q() {
+			j.value = !1, M.value && G("");
 		}
 		function J(e) {
-			P.value = [e, ...P.value.filter((t) => t.value !== e.value)], T.multiple ? (k.value = N.value.includes(e.value) ? N.value.filter((t) => t !== e.value) : [...N.value, e.value], W("")) : (k.value = e.value, K());
+			j.value ? q() : K(!!e && e.detail === 0);
+		}
+		function je(e) {
+			F.value = [e, ...F.value.filter((t) => t.value !== e.value)], E.multiple ? (A.value = P.value.includes(e.value) ? P.value.filter((t) => t !== e.value) : [...P.value, e.value], G("")) : (A.value = e.value, q());
 		}
-		let Y = _(!1);
-		async function ke() {
+		let Y = v(!1);
+		async function Me() {
 			if (Y.value) return;
-			let e = j.value.trim(), t = T.createColored ? {
+			let e = M.value.trim(), t = E.createColored ? {
 				label: e,
-				color: V.value
+				color: H.value
 			} : { label: e };
 			Y.value = !0;
 			try {
-				J(T.createOption ? await T.createOption(t) : {
+				je(E.createOption ? await E.createOption(t) : {
 					value: e,
 					label: e,
 					color: t.color
 				});
 			} catch (e) {
-				E("create-error", e);
+				D("create-error", e);
 			} finally {
 				Y.value = !1;
 			}
 		}
 		function X(e, t) {
-			e.preventDefault(), "create" in t ? ke() : t.disabled || J(t);
+			e.preventDefault(), "create" in t ? Me() : t.disabled || je(t);
 		}
 		function Z(e) {
-			k.value = T.multiple ? N.value.filter((t) => t !== e) : null;
+			A.value = E.multiple ? P.value.filter((t) => t !== e) : null;
 		}
-		function Ae(e) {
+		function Ne(e) {
 			[
 				"ArrowUp",
 				"ArrowDown",
 				"Home",
 				"End"
-			].includes(e.key) && (M.value = !0), e.key === "Backspace" && L.value && !j.value && N.value.length && Z(N.value[N.value.length - 1]);
+			].includes(e.key) && (N.value = !0), e.key === "Backspace" && R.value && !M.value && P.value.length && Z(P.value[P.value.length - 1]);
 		}
-		function je(e) {
-			!A.value && ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), G(!0));
+		function Pe(e) {
+			!j.value && ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), K(!0));
 		}
-		function Me(e) {
-			e.preventDefault(), m(() => e.target?.querySelector("[data-select-filter], [role=\"listbox\"]")?.focus());
+		function Fe(e) {
+			e.preventDefault(), h(() => e.target?.querySelector("[data-select-filter], [role=\"listbox\"]")?.focus());
 		}
-		let Q = _();
-		function Ne(e) {
+		let Q = v();
+		function Ie(e) {
 			let t = e.detail.originalEvent.target;
 			t instanceof Node && Q.value?.$el?.contains(t) && e.preventDefault();
 		}
-		function Pe(e) {
+		function Le(e) {
 			e.preventDefault(), Q.value?.$el?.focus();
 		}
-		let $ = _();
-		function Fe(e) {
-			!M.value && e && (N.value.includes(e.value) || m(() => $.value && !M.value && ($.value.highlightedElement = null)));
+		let $ = v();
+		function Re(e) {
+			!N.value && e && (P.value.includes(e.value) || h(() => $.value && !N.value && ($.value.highlightedElement = null)));
 		}
-		let Ie = {
+		let ze = {
 			md: "min-h-9 pr-2.5 pl-3 text-sm",
 			sm: "h-7 pr-1.5 pl-2 text-13"
 		};
-		return (e, a) => (g(), o(x(fe), {
-			open: A.value,
-			"onUpdate:open": a[2] ||= (e) => e ? G(!1) : K()
+		return (t, o) => (_(), s(S(fe), {
+			open: j.value,
+			"onUpdate:open": o[2] ||= (e) => e ? K(!1) : q()
 		}, {
-			default: S(() => [d(x(le), {
+			default: C(() => [f(S(le), {
 				ref_key: "anchor",
 				ref: Q,
 				"as-child": ""
 			}, {
-				default: S(() => [y(e.$slots, "trigger", {
-					open: A.value,
-					selected: F.value,
-					toggle: q
-				}, () => [l("button", ee({
-					...x(Oe),
-					...Te.value
+				default: C(() => [b(t.$slots, "trigger", {
+					open: j.value,
+					selected: I.value,
+					toggle: J
+				}, () => [u("button", ee({
+					...S(Ae),
+					...De.value
 				}, {
-					"aria-expanded": A.value,
+					"aria-expanded": j.value,
 					"aria-haspopup": "listbox",
-					"aria-invalid": x(U) ? "true" : void 0,
-					class: ["group inline-flex items-center justify-between gap-1.5 rounded-(--sui-radius-button) border bg-sui-surface text-left text-sui-ink transition-[border-color,box-shadow] duration-150 focus-visible:border-sui-accent focus-visible:sui-ring-field disabled:pointer-events-none disabled:opacity-60", [Ie[f.size], x(U) ? "border-sui-danger-mid" : "border-sui-line-strong hover:border-sui-ink-muted"]],
-					disabled: f.disabled,
+					"aria-invalid": S(W) ? "true" : void 0,
+					class: ["group inline-flex items-center justify-between gap-1.5 rounded-(--sui-radius-button) border bg-sui-surface text-left text-sui-ink transition-[border-color,box-shadow] duration-150 focus-visible:border-sui-accent focus-visible:sui-ring-field disabled:pointer-events-none disabled:opacity-60", [ze[p.size], S(W) ? "border-sui-danger-mid" : "border-sui-line-strong hover:border-sui-ink-muted"]],
+					disabled: p.disabled,
 					type: "button",
-					onClick: q,
-					onKeydown: je
+					onClick: J,
+					onKeydown: Pe
 				}), [
-					O.value ? (g(), c("span", me, b(O.value) + ": ", 1)) : s("", !0),
-					F.value.length ? f.multiple ? (g(), c("span", ge, [(g(!0), c(i, null, v(F.value, (e) => (g(), o(r, {
+					k.value ? (_(), l("span", me, x(k.value) + ": ", 1)) : c("", !0),
+					I.value.length ? p.multiple ? (_(), l("span", ge, [(_(!0), l(a, null, y(I.value, (e) => (_(), s(i, {
 						key: e.value,
 						color: e.color ?? void 0,
+						icon: e.icon,
+						"icon-color": e.iconColor,
 						name: e.label
-					}, null, 8, ["color", "name"]))), 128))])) : F.value[0].color ? (g(), o(r, {
+					}, null, 8, [
+						"color",
+						"icon",
+						"icon-color",
+						"name"
+					]))), 128))])) : I.value[0].color ? (_(), s(i, {
 						key: 3,
-						color: F.value[0].color,
-						name: F.value[0].label
-					}, null, 8, ["color", "name"])) : (g(), c("span", _e, b(F.value[0].label), 1)) : (g(), c("span", he, b(f.placeholder), 1)),
-					a[3] ||= l("svg", {
+						color: I.value[0].color,
+						icon: I.value[0].icon,
+						"icon-color": I.value[0].iconColor,
+						name: I.value[0].label
+					}, null, 8, [
+						"color",
+						"icon",
+						"icon-color",
+						"name"
+					])) : I.value[0].icon ? (_(), l("span", _e, [f(e, {
+						class: "shrink-0",
+						color: I.value[0].iconColor ?? "ink-subtle",
+						name: I.value[0].icon
+					}, null, 8, ["color", "name"]), u("span", ve, x(I.value[0].label), 1)])) : (_(), l("span", ye, x(I.value[0].label), 1)) : (_(), l("span", he, x(p.placeholder), 1)),
+					o[3] ||= u("svg", {
 						"aria-hidden": "true",
 						class: "size-4 shrink-0 fill-none stroke-sui-ink-muted transition-transform duration-150 group-aria-expanded:rotate-180",
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round",
 						"stroke-width": "1.5",
 						viewBox: "0 0 16 16"
-					}, [l("path", { d: "M4.5 6.5 8 10l3.5-3.5" })], -1)
+					}, [u("path", { d: "M4.5 6.5 8 10l3.5-3.5" })], -1)
 				], 16, pe)])]),
 				_: 3
-			}, 512), d(x(de), null, {
-				default: S(() => [d(x(ue), {
-					align: f.align,
-					"aria-label": O.value ?? f.placeholder,
-					class: h(["z-[1100] overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-menu-in", I.value ? "min-w-[max(var(--reka-popover-trigger-width),15rem)]" : "min-w-(--reka-popover-trigger-width)"]),
-					side: f.side,
+			}, 512), f(S(de), null, {
+				default: C(() => [f(S(ue), {
+					align: p.align,
+					"aria-label": k.value ?? p.placeholder,
+					class: g(["z-[1100] overflow-hidden rounded-xl border border-sui-line-subtle bg-sui-surface text-sui-ink shadow-lg data-[state=open]:animate-sui-menu-in", L.value ? "min-w-[max(var(--reka-popover-trigger-width),15rem)]" : "min-w-(--reka-popover-trigger-width)"]),
+					side: p.side,
 					"side-offset": 4,
-					style: te(f.panelWidth ? { width: f.panelWidth } : void 0),
-					onCloseAutoFocus: Pe,
-					onOpenAutoFocus: Me,
-					onPointerDownOutside: Ne
+					style: te(p.panelWidth ? { width: p.panelWidth } : void 0),
+					onCloseAutoFocus: Le,
+					onOpenAutoFocus: Fe,
+					onPointerDownOutside: Ie
 				}, {
-					default: S(() => [d(x(se), {
+					default: C(() => [f(S(se), {
 						ref_key: "listbox",
 						ref: $,
 						"highlight-on-hover": !0,
-						"model-value": f.multiple ? N.value : N.value[0] ?? void 0,
-						multiple: f.multiple,
-						onHighlight: Fe,
-						onKeydown: Ae,
-						onPointermove: a[1] ||= (e) => M.value = !1
+						"model-value": p.multiple ? P.value : P.value[0] ?? void 0,
+						multiple: p.multiple,
+						onHighlight: Re,
+						onKeydown: Ne,
+						onPointermove: o[1] ||= (e) => N.value = !1
 					}, {
-						default: S(() => [I.value ? (g(), c("div", ve, [L.value ? (g(!0), c(i, { key: 0 }, v(F.value, (e) => (g(), o(r, {
+						default: C(() => [L.value ? (_(), l("div", be, [R.value ? (_(!0), l(a, { key: 0 }, y(I.value, (e) => (_(), s(i, {
 							key: e.value,
 							color: e.color ?? void 0,
+							icon: e.icon,
+							"icon-color": e.iconColor,
 							name: e.label,
 							removable: "",
-							"remove-label": f.removeLabel,
+							"remove-label": p.removeLabel,
 							onRemove: (t) => Z(e.value)
 						}, null, 8, [
 							"color",
+							"icon",
+							"icon-color",
 							"name",
 							"remove-label",
 							"onRemove"
-						]))), 128)) : s("", !0), d(x(oe), {
-							"aria-label": O.value ?? f.placeholder,
+						]))), 128)) : c("", !0), f(S(oe), {
+							"aria-label": k.value ?? p.placeholder,
 							class: "h-5 min-w-16 flex-1 rounded-none border-none bg-transparent p-0 text-13 text-sui-ink shadow-none outline-hidden placeholder:text-sui-ink-faint focus:border-none focus:shadow-none focus:ring-0 focus:outline-hidden",
 							"data-select-filter": "",
-							"model-value": j.value,
-							placeholder: L.value && F.value.length ? "" : f.searchPlaceholder,
-							"onUpdate:modelValue": W
+							"model-value": M.value,
+							placeholder: R.value && I.value.length ? "" : p.searchPlaceholder,
+							"onUpdate:modelValue": G
 						}, null, 8, [
 							"aria-label",
 							"model-value",
 							"placeholder"
-						])])) : s("", !0), f.loading ? (g(), c("div", ye, [d(n, { size: "sm" })])) : R.value.length || z.value ? (g(), o(x(ae), {
+						])])) : c("", !0), p.loading ? (_(), l("div", xe, [f(r, { size: "sm" })])) : z.value.length || B.value ? (_(), s(S(ae), {
 							key: 2,
-							"aria-label": O.value ?? f.placeholder,
+							"aria-label": k.value ?? p.placeholder,
 							class: "group/list max-h-60 overflow-auto p-1 outline-hidden",
-							"data-keyboard": M.value || void 0
+							"data-keyboard": N.value || void 0
 						}, {
-							default: S(() => [De.value ? (g(), o(x(ce), {
+							default: C(() => [ke.value ? (_(), s(S(ce), {
 								key: 0,
 								"estimate-size": 32,
-								options: R.value,
+								options: z.value,
 								"text-content": (e) => e.label
 							}, {
-								default: S(({ option: n }) => [d(x(C), {
-									class: h(w),
-									disabled: n.disabled,
-									value: n.value,
-									onSelect: (e) => X(e, n)
+								default: C(({ option: r }) => [f(S(w), {
+									class: g(T),
+									disabled: r.disabled,
+									value: r.value,
+									onSelect: (e) => X(e, r)
 								}, {
-									default: S(() => [l("span", be, [y(e.$slots, "option", { option: n }, () => [n.color ? (g(), o(r, {
+									default: C(() => [u("span", Se, [b(t.$slots, "option", { option: r }, () => [r.color ? (_(), s(i, {
+										key: 0,
+										color: r.color,
+										icon: r.icon,
+										"icon-color": r.iconColor,
+										name: r.label
+									}, null, 8, [
+										"color",
+										"icon",
+										"icon-color",
+										"name"
+									])) : (_(), l(a, { key: 1 }, [r.icon ? (_(), s(e, {
 										key: 0,
-										color: n.color,
-										name: n.label
-									}, null, 8, ["color", "name"])) : (g(), c(i, { key: 1 }, [u(b(n.label), 1)], 64))])]), N.value.includes(n.value) ? (g(), o(t, { key: 0 })) : s("", !0)]),
+										class: "shrink-0",
+										color: r.iconColor ?? "ink-subtle",
+										name: r.icon
+									}, null, 8, ["color", "name"])) : c("", !0), d(x(r.label), 1)], 64))])]), P.value.includes(r.value) ? (_(), s(n, { key: 0 })) : c("", !0)]),
 									_: 2
 								}, 1032, [
 									"disabled",
@@ -288,38 +326,50 @@ var pe = [
 									"onSelect"
 								])]),
 								_: 3
-							}, 8, ["options", "text-content"])) : (g(!0), c(i, { key: 1 }, v(R.value, (n) => (g(), o(x(C), {
-								key: n.value,
-								class: h(w),
-								disabled: n.disabled,
-								value: n.value,
-								onSelect: (e) => X(e, n)
+							}, 8, ["options", "text-content"])) : (_(!0), l(a, { key: 1 }, y(z.value, (r) => (_(), s(S(w), {
+								key: r.value,
+								class: g(T),
+								disabled: r.disabled,
+								value: r.value,
+								onSelect: (e) => X(e, r)
 							}, {
-								default: S(() => [l("span", xe, [y(e.$slots, "option", { option: n }, () => [n.color ? (g(), o(r, {
+								default: C(() => [u("span", Ce, [b(t.$slots, "option", { option: r }, () => [r.color ? (_(), s(i, {
+									key: 0,
+									color: r.color,
+									icon: r.icon,
+									"icon-color": r.iconColor,
+									name: r.label
+								}, null, 8, [
+									"color",
+									"icon",
+									"icon-color",
+									"name"
+								])) : (_(), l(a, { key: 1 }, [r.icon ? (_(), s(e, {
 									key: 0,
-									color: n.color,
-									name: n.label
-								}, null, 8, ["color", "name"])) : (g(), c(i, { key: 1 }, [u(b(n.label), 1)], 64))])]), N.value.includes(n.value) ? (g(), o(t, { key: 0 })) : s("", !0)]),
+									class: "shrink-0",
+									color: r.iconColor ?? "ink-subtle",
+									name: r.icon
+								}, null, 8, ["color", "name"])) : c("", !0), d(x(r.label), 1)], 64))])]), P.value.includes(r.value) ? (_(), s(n, { key: 0 })) : c("", !0)]),
 								_: 2
 							}, 1032, [
 								"disabled",
 								"value",
 								"onSelect"
-							]))), 128)), z.value ? (g(), o(x(C), {
+							]))), 128)), B.value ? (_(), s(S(w), {
 								key: 2,
-								class: h(w),
-								value: H,
-								onSelect: a[0] ||= (e) => X(e, H)
+								class: g(T),
+								value: U,
+								onSelect: o[0] ||= (e) => X(e, U)
 							}, {
-								default: S(() => [l("span", Se, [u(b(f.createLabel) + " ", 1), f.createColored ? (g(), o(r, {
+								default: C(() => [u("span", we, [d(x(p.createLabel) + " ", 1), p.createColored ? (_(), s(i, {
 									key: 0,
-									color: V.value,
-									name: j.value.trim()
-								}, null, 8, ["color", "name"])) : (g(), c("strong", Ce, "“" + b(j.value.trim()) + "”", 1))])]),
+									color: H.value,
+									name: M.value.trim()
+								}, null, 8, ["color", "name"])) : (_(), l("strong", Te, "“" + x(M.value.trim()) + "”", 1))])]),
 								_: 1
-							})) : s("", !0)]),
+							})) : c("", !0)]),
 							_: 3
-						}, 8, ["aria-label", "data-keyboard"])) : (g(), c("div", we, b(f.emptyLabel), 1))]),
+						}, 8, ["aria-label", "data-keyboard"])) : (_(), l("div", Ee, x(p.emptyLabel), 1))]),
 						_: 3
 					}, 8, ["model-value", "multiple"])]),
 					_: 3
@@ -337,6 +387,6 @@ var pe = [
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };
 
 //# sourceMappingURL=Select.vue_vue_type_script_setup_true_lang.js.map