@indielayer/ui 1.18.1 → 2.0.0

package/lib/components/select/Select.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,548 @@
+import { injectInputGroupKey as e } from "../../composables/keys.js";
+import { useColors as t } from "../../composables/useColors.js";
+import { useTheme as n } from "../../composables/useTheme.js";
+import { optionalBooleanProp as r } from "../../common/props.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+import a from "../icon/Icon.js";
+import { checkIcon as ee, closeIcon as te, selectIcon as ne } from "../../common/icons.js";
+import { useInteractive as re } from "../../composables/useInteractive.js";
+import ie from "../spinner/Spinner.js";
+import { useInputtable as o } from "../../composables/useInputtable.js";
+import ae from "../inputFooter/InputFooter.js";
+import { useThrottleFn as oe } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { useEventListener as se, useResizeObserver as ce } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import le from "../label/Label.js";
+import ue from "../input/Input.js";
+import de from "../menu/MenuItem.js";
+import s from "../popover/Popover.js";
+import c from "../popover/PopoverContainer.js";
+import { useVirtualList as fe } from "../../composables/useVirtualList.js";
+import pe from "../tag/Tag.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as me, createTextVNode as h, createVNode as g, defineComponent as _, inject as he, mergeModels as v, mergeProps as y, nextTick as b, normalizeClass as x, normalizeStyle as ge, onUnmounted as _e, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, toHandlers as ve, unref as D, useModel as ye, vModelSelect as be, watch as O, withCtx as k, withDirectives as xe, withModifiers as Se } from "vue";
+//#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
+var Ce = { class: "relative" }, we = {
+	key: 0,
+	class: "text-secondary-400 dark:text-secondary-500"
+}, Te = { key: 1 }, Ee = {
+	key: 0,
+	class: "flex items-center"
+}, De = {
+	key: 0,
+	class: "mr-2 shrink-0"
+}, Oe = { class: "flex-1 truncate" }, ke = {
+	key: 1,
+	class: "ml-1 shrink-0"
+}, Ae = {
+	key: 0,
+	class: "flex items-center"
+}, je = {
+	key: 0,
+	class: "mr-2 shrink-0"
+}, Me = { class: "flex-1 truncate" }, Ne = {
+	key: 1,
+	class: "ml-1 shrink-0"
+}, Pe = {
+	key: 0,
+	class: "text-secondary-400 dark:text-secondary-500"
+}, Fe = { key: 1 }, Ie = {
+	key: 0,
+	class: "p-2 text-center text-secondary-400"
+}, Le = {
+	key: 0,
+	class: "flex items-center"
+}, Re = {
+	key: 0,
+	class: "mr-2 shrink-0"
+}, ze = { class: "flex-1 truncate" }, Be = {
+	key: 1,
+	class: "ml-1 shrink-0"
+}, Ve = [
+	"id",
+	"name",
+	"disabled",
+	"multiple",
+	"readonly"
+], He = ["value", "disabled"], A = {
+	...t.props("secondary"),
+	...i.props(),
+	...re.props(),
+	...o.props(),
+	placeholder: String,
+	options: Array,
+	multiple: r(),
+	multipleCheckbox: r(),
+	truncate: r(),
+	flat: r(),
+	native: r(),
+	filterable: r(),
+	clearable: r(),
+	filterPlaceholder: {
+		type: String,
+		default: "Filter by..."
+	},
+	filterablePrefix: r(),
+	filterableSuffix: r(),
+	hideSelectedOptionSlots: r(),
+	virtualList: r(),
+	virtualListOffsetTop: Number,
+	virtualListOffsetBottom: Number,
+	virtualListItemHeight: {
+		type: Number,
+		default: 33
+	},
+	virtualListOverscan: {
+		type: Number,
+		default: 10
+	},
+	placement: String
+}, j = /* @__PURE__ */ _({
+	name: "XSelect",
+	validators: { ...i.validators() },
+	props: /* @__PURE__ */ v(A, {
+		filter: { default: "" },
+		filterModifiers: {}
+	}),
+	emits: /* @__PURE__ */ v([
+		...o.emits(),
+		"close",
+		"open"
+	], ["update:filter"]),
+	setup(t, { expose: r, emit: i }) {
+		let _ = t, v = i, A = u(() => _.multiple || _.multipleCheckbox), j = C(null), M = C(null), N = C(null), P = C(null), F = C(null), I = C(), L = ye(t, "filter"), R = C(null), Ue = he(e, {
+			registerChild: () => {},
+			unregisterChild: () => {},
+			registerInput: () => {},
+			unregisterInput: () => {},
+			getPosition: () => "only",
+			childOrder: u(() => []),
+			isInsideInputGroup: !1,
+			groupProps: {}
+		}), z = u(() => _.disabled || _.loading || _.readonly || !!Ue.groupProps?.disabled), We = u(() => !_.loading && !_.readonly && !_.disabled && _.clearable && !W(B.value)), B = u({
+			get() {
+				return A.value ? _.modelValue ? Array.isArray(_.modelValue) ? _.modelValue : [_.modelValue] : [] : _.modelValue;
+			},
+			set(e) {
+				v("update:modelValue", e);
+			}
+		}), Ge = u(() => _.options ? new Map(_.options.map((e) => [e.value, e])) : /* @__PURE__ */ new Map()), Ke = u(() => _.options ? new Map(_.options.map((e) => [e, {
+			label: e.label.toLowerCase(),
+			prefix: _.filterablePrefix && e.prefix ? e.prefix.toLowerCase() : void 0,
+			suffix: _.filterableSuffix && e.suffix ? e.suffix.toLowerCase() : void 0
+		}])) : /* @__PURE__ */ new Map());
+		function qe(e, t) {
+			let n = Ke.value.get(e);
+			return n ? n.label.includes(t) || n.prefix?.includes(t) || n.suffix?.includes(t) : !1;
+		}
+		let V = u(() => {
+			if (!_.options || _.options.length === 0) return [];
+			let e = L.value.toLowerCase(), t = L.value !== "", n = new Set(A.value && Array.isArray(B.value) ? B.value : []), r = A.value ? null : B.value;
+			return _.options.filter((n) => !t || qe(n, e)).map((e) => {
+				let t = A.value ? n.has(e.value) : e.value === r;
+				return {
+					value: e.value,
+					label: e.label,
+					active: t,
+					prefix: e.prefix,
+					suffix: e.suffix,
+					disabled: e.disabled,
+					iconRight: !_.multipleCheckbox && t ? ee : void 0,
+					keepOpenOnClick: e.keepOpenOnClick,
+					onClick: () => nt(e.value)
+				};
+			});
+		}), Je = u(() => V.value.filter((e) => !e.disabled)), { list: Ye, scrollTo: Xe, containerProps: Ze, wrapperProps: Qe } = fe(V, {
+			disabled: !_.virtualList,
+			itemHeight: _.virtualListItemHeight,
+			topOffset: _.virtualListOffsetTop || 0,
+			bottomOffset: _.virtualListOffsetBottom || 0,
+			overscan: _.virtualListOverscan
+		}), H = u(() => P.value?.isOpen), $e = u(() => !!D(H.value));
+		O(L, (e) => {
+			e && (I.value = void 0, U(-1));
+		}), O(H, (e) => {
+			e ? (et(), (A.value || I.value === void 0) && U(-1), setTimeout(() => {
+				requestAnimationFrame(() => {
+					tt(I.value || 0), _.filterable && R.value?.focus();
+				});
+			}, 50), v("open")) : (_.filterable && (L.value = ""), v("close"));
+		});
+		function et() {
+			if (A.value) {
+				if (Array.isArray(B.value) && B.value.length > 0) {
+					let e = V.value.findIndex((e) => e.value === B.value[0]);
+					e !== -1 && (I.value = e);
+				}
+			} else {
+				let e = V.value.findIndex((e) => e.value === B.value);
+				e !== -1 && (I.value = e);
+			}
+		}
+		function tt(e) {
+			_.virtualList ? Xe(e) : N.value && N.value[e]?.$el.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+		O(I, (e) => {
+			e !== void 0 && N.value && tt(e);
+		});
+		function U(e, t = "down") {
+			if (!Je.value || Je.value.length === 0) {
+				I.value = void 0;
+				return;
+			}
+			e === void 0 && (e = t === "down" ? -1 : 1);
+			let n = V.value.length, r = 0;
+			if (t === "down") {
+				let t = e + 1;
+				for (t > n - 1 && (t = 0); V.value[t].disabled;) if (++t > n - 1 && (t = 0), ++r >= n) {
+					I.value = void 0;
+					return;
+				}
+				I.value = t;
+			} else {
+				let t = e - 1;
+				for (t < 0 && (t = n - 1); V.value[t].disabled;) if (--t < 0 && (t = n - 1), ++r >= n) {
+					I.value = void 0;
+					return;
+				}
+				I.value = t;
+			}
+		}
+		function nt(e) {
+			let t = G(e);
+			if (!(!t || t.disabled)) if (t.onClick) t.onClick();
+			else {
+				if (A.value) {
+					if (Array.isArray(B.value)) {
+						let t = B.value.indexOf(e);
+						t === -1 ? B.value.push(e) : B.value.splice(t, 1);
+					} else B.value = [e];
+					v("update:modelValue", B.value), _.filterable && setTimeout(() => {
+						R.value?.focus();
+					});
+				} else B.value = e;
+				_.native || b(() => {
+					ut(), M.value?.$el.focus();
+				});
+			}
+		}
+		function W(e) {
+			return !!(e == null || e === "" || Array.isArray(e) && e.length === 0 || !Array.isArray(e) && typeof e == "object" && Object.keys(e).length === 0);
+		}
+		function rt(e, t) {
+			if (e.stopPropagation(), z.value || !Array.isArray(B.value)) return;
+			let n = B.value.indexOf(t);
+			n !== -1 && (B.value.splice(n, 1), v("update:modelValue", B.value));
+		}
+		function G(e) {
+			if (!Array.isArray(e)) return Ge.value.get(e);
+		}
+		function K(e) {
+			let t = G(e);
+			return t ? t.label?.toString() : e?.toString();
+		}
+		function q(e) {
+			return {
+				value: e?.toString() || "",
+				label: e?.toString() || ""
+			};
+		}
+		let { focus: it, blur: at } = re(j), { errorInternal: ot, hideFooterInternal: st, hideLabelInternal: ct, inputListeners: lt, reset: J, validate: ut, setError: dt, isFocused: ft, isInsideForm: pt, isInsideInputGroup: mt, inputGroupPosition: ht } = o(_, {
+			focus: it,
+			emit: v,
+			withListeners: !0
+		}), gt = u(() => Ue.groupProps?.size ?? _.size), _t = u(() => ct.value ? void 0 : _.label), vt = u(() => ({
+			..._,
+			size: gt.value,
+			disabled: z.value
+		})), yt = u(() => {
+			let { focus: e, blur: t } = D(lt);
+			return {
+				focus: e,
+				blur: t
+			};
+		}), Y = null;
+		O([ft, H], ([e, t]) => {
+			e || t ? Y ||= se(document, "keydown", bt) : Y &&= (Y(), null);
+		}, { immediate: !0 }), _e(() => {
+			Y && Y();
+		});
+		function bt(e) {
+			if (V.value.length !== 0) if (e.code === "ArrowDown") {
+				if (e.preventDefault(), !H.value) {
+					P.value?.show();
+					return;
+				}
+				U(I.value, "down");
+			} else if (e.code === "ArrowUp") {
+				if (e.preventDefault(), !H.value) {
+					P.value?.show();
+					return;
+				}
+				U(I.value, "up");
+			} else if (e.code === "Enter" || e.code === "Space") {
+				if (e.code === "Space" && _.filterable) return;
+				if (e.preventDefault(), e.stopPropagation(), !H.value) {
+					P.value?.show();
+					return;
+				}
+				if (I.value !== void 0 && V.value[I.value]) {
+					let e = V.value[I.value];
+					nt(e.value), !e.keepOpenOnClick && (!A.value || _.multipleCheckbox) && P.value?.hide();
+				}
+			} else e.code === "Tab" && H.value && (e.preventDefault(), P.value?.hide(), _.native || b(() => {
+				M.value?.$el.focus();
+			}));
+		}
+		let X = C(null), xt = C(null), Z = C(!1), Q = C(0), St = oe(() => {
+			A.value && _.truncate && b(() => {
+				let e = Ct();
+				e < B.value.length ? (Z.value = !0, Q.value = B.value.length - e) : (Z.value = !1, Q.value = 0);
+			});
+		}, 100, !0);
+		ce(X, () => {
+			St();
+		});
+		function Ct() {
+			if (!X.value) return 0;
+			let e = X.value.querySelectorAll(".x-tag"), t = Array.from(e), n = 0, r = 1, i = X.value.offsetWidth - 30;
+			for (let e = 0; e < t.length; e++) {
+				let a = t[e];
+				a.style.display = "flex", n += a.offsetWidth, e > 0 && (n < i ? r++ : a.style.display = "none");
+			}
+			return r;
+		}
+		O(B, (e) => {
+			St();
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		let { styles: wt, classes: $, className: Tt } = n("Select", {}, vt, {
+			errorInternal: ot,
+			isInsideInputGroup: mt,
+			inputGroupPosition: ht,
+			isPopoverOpen: $e
+		});
+		return r({
+			focus: it,
+			blur: at,
+			reset: J,
+			validate: ut,
+			setError: dt,
+			filterRef: R
+		}), (e, t) => (S(), d(le, y({
+			ref_key: "labelRef",
+			ref: M,
+			tabindex: "0",
+			class: ["group", [D(Tt), D($).wrapper]],
+			style: D(wt),
+			disabled: z.value,
+			required: e.required,
+			"is-inside-form": D(pt),
+			"is-inside-input-group": D(mt),
+			label: _t.value,
+			tooltip: e.tooltip
+		}, ve(yt.value)), {
+			default: k(() => [m("div", Ce, [
+				e.native && !A.value ? (S(), p("div", {
+					key: 0,
+					class: x(D($).box),
+					onClick: t[0] ||= (e) => j.value?.click()
+				}, [W(B.value) ? (S(), p(l, { key: 1 }, [e.placeholder ? (S(), p("div", we, E(e.placeholder), 1)) : (S(), p("div", Te, "\xA0"))], 64)) : (S(), p(l, { key: 0 }, [h(E(K(B.value)), 1)], 64))], 2)) : (S(), p(l, { key: 1 }, [g(s, {
+					ref_key: "popoverRef",
+					ref: P,
+					disabled: z.value,
+					placement: e.placement
+				}, {
+					content: k(() => [g(c, { class: x(D($).content) }, {
+						default: k(() => [
+							T(e.$slots, "content-header", {}, () => [e.filterable ? (S(), p("div", {
+								key: 0,
+								class: x(D($).search)
+							}, [g(ue, {
+								ref_key: "filterRef",
+								ref: R,
+								modelValue: L.value,
+								"onUpdate:modelValue": t[2] ||= (e) => L.value = e,
+								placeholder: e.filterPlaceholder,
+								"skip-form-registry": "",
+								"data-1p-ignore": "",
+								size: "sm"
+							}, null, 8, ["modelValue", "placeholder"])], 2)) : f("", !0)]),
+							m("div", y(D(Ze), { class: D($).contentBody }), [m("div", y(D(Qe), { class: "space-y-0.5" }), [(S(!0), p(l, null, w(D(Ye), (t) => (S(), d(de, {
+								key: t.index,
+								ref_for: !0,
+								ref_key: "itemsRef",
+								ref: N,
+								item: t.data,
+								size: e.size,
+								disabled: t.data.disabled,
+								selected: t.index === I.value,
+								checkbox: e.multipleCheckbox && !t.data.keepOpenOnClick,
+								color: e.color,
+								filled: "",
+								onClick: () => !t.data.keepOpenOnClick && (!A.value || e.multipleCheckbox) && P.value?.hide()
+							}, me({
+								default: k(() => [T(e.$slots, "label", { item: t.data })]),
+								_: 2
+							}, [e.$slots.prefix || t.data.prefix ? {
+								name: "prefix",
+								fn: k(() => [T(e.$slots, "prefix", { item: t.data }, () => [h(E(t.data.prefix), 1)])]),
+								key: "0"
+							} : void 0, e.$slots.suffix || t.data.suffix ? {
+								name: "suffix",
+								fn: k(() => [T(e.$slots, "suffix", { item: t.data }, () => [h(E(t.data.suffix), 1)])]),
+								key: "1"
+							} : void 0]), 1032, [
+								"item",
+								"size",
+								"disabled",
+								"selected",
+								"checkbox",
+								"color",
+								"onClick"
+							]))), 128))], 16), D(Ye).length === 0 ? (S(), p("div", Ie, " No options ")) : f("", !0)], 16),
+							T(e.$slots, "content-footer")
+						]),
+						_: 3
+					}, 8, ["class"])]),
+					default: k(() => [T(e.$slots, "input", {
+						popover: P.value,
+						selected: B.value,
+						disabled: z.value,
+						label: K(B.value)
+					}, () => [m("div", { class: x([D($).box]) }, [A.value && Array.isArray(B.value) && B.value.length > 0 ? (S(), p("div", {
+						key: 0,
+						ref_key: "tagsRef",
+						ref: X,
+						class: x(["flex gap-1 relative", {
+							"flex-wrap": !e.truncate,
+							"overflow-hidden": e.truncate
+						}])
+					}, [(S(!0), p(l, null, w(B.value, (t, n) => (S(), d(pe, {
+						key: t,
+						size: "xs",
+						removable: "",
+						outlined: !(z.value || G(t)?.disabled),
+						disabled: z.value || G(t)?.disabled,
+						style: ge({ "max-width": n === 0 && F.value ? `calc(100% - ${F.value.offsetWidth + 6 + "px"})` : void 0 }),
+						onRemove: (e) => {
+							rt(e, t);
+						}
+					}, {
+						default: k(() => [e.hideSelectedOptionSlots ? (S(), p(l, { key: 1 }, [h(E(K(t)), 1)], 64)) : (S(), p("div", Ee, [
+							e.$slots.prefix || G(t)?.prefix ? (S(), p("span", De, [T(e.$slots, "prefix", { item: G(t) || q(t) }, () => [h(E(G(t)?.prefix), 1)])])) : f("", !0),
+							m("span", Oe, E(K(t)), 1),
+							e.$slots.suffix || G(t)?.suffix ? (S(), p("span", ke, [T(e.$slots, "suffix", { item: G(t) || q(t) }, () => [h(E(G(t)?.suffix), 1)])])) : f("", !0)
+						]))]),
+						_: 2
+					}, 1032, [
+						"outlined",
+						"disabled",
+						"style",
+						"onRemove"
+					]))), 128)), Z.value ? (S(), p("div", {
+						key: 0,
+						ref_key: "hiddenTagsCounterRef",
+						ref: F,
+						class: x(D($).truncateCounter),
+						onClick: t[1] ||= Se((e) => xt.value?.toggle(), ["stop"])
+					}, "+" + E(Q.value), 3)) : f("", !0)], 2)) : !A.value && !W(B.value) && K(B.value) !== "" ? (S(), p(l, { key: 1 }, [e.hideSelectedOptionSlots ? (S(), p(l, { key: 1 }, [h(E(K(B.value)), 1)], 64)) : (S(), p("div", Ae, [
+						e.$slots.prefix || G(B.value)?.prefix ? (S(), p("span", je, [T(e.$slots, "prefix", { item: G(B.value) || q(B.value) }, () => [h(E(G(B.value)?.prefix), 1)])])) : f("", !0),
+						m("span", Me, E(K(B.value)), 1),
+						e.$slots.suffix || G(B.value)?.suffix ? (S(), p("span", Ne, [T(e.$slots, "suffix", { item: G(B.value) || q(B.value) }, () => [h(E(G(B.value)?.suffix), 1)])])) : f("", !0)
+					]))], 64)) : (S(), p(l, { key: 2 }, [e.placeholder ? (S(), p("div", Pe, E(e.placeholder), 1)) : (S(), p("div", Fe, "\xA0"))], 64))], 2)])]),
+					_: 3
+				}, 8, ["disabled", "placement"]), A.value && e.truncate && Z.value ? (S(), d(s, {
+					key: 0,
+					ref_key: "multipleHiddenRef",
+					ref: xt,
+					"popper-show-triggers": [],
+					"popper-hide-triggers": [],
+					class: "inline-block !absolute right-0",
+					placement: "auto-start"
+				}, {
+					content: k(() => [g(c, { class: "p-2 flex gap-2 flex-wrap" }, {
+						default: k(() => [(S(!0), p(l, null, w(B.value?.slice(B.value.length - Q.value), (t) => (S(), d(pe, {
+							key: t,
+							size: "xs",
+							removable: "",
+							outlined: !(z.value || G(t)?.disabled),
+							disabled: z.value || G(t)?.disabled,
+							onRemove: (e) => {
+								rt(e, t);
+							}
+						}, {
+							default: k(() => [e.hideSelectedOptionSlots ? (S(), p(l, { key: 1 }, [h(E(K(t)), 1)], 64)) : (S(), p("div", Le, [
+								e.$slots.prefix || G(t)?.prefix ? (S(), p("span", Re, [T(e.$slots, "prefix", { item: G(t) || q(t) }, () => [h(E(G(t)?.prefix), 1)])])) : f("", !0),
+								m("span", ze, E(K(t)), 1),
+								e.$slots.suffix || G(t)?.suffix ? (S(), p("span", Be, [T(e.$slots, "suffix", { item: G(t) || q(t) }, () => [h(E(G(t)?.suffix), 1)])])) : f("", !0)
+							]))]),
+							_: 2
+						}, 1032, [
+							"outlined",
+							"disabled",
+							"onRemove"
+						]))), 128))]),
+						_: 3
+					})]),
+					_: 3
+				}, 512)) : f("", !0)], 64)),
+				xe(m("select", y({
+					id: e.id,
+					ref_key: "elRef",
+					ref: j,
+					"onUpdate:modelValue": t[3] ||= (e) => B.value = e,
+					tabindex: "-1",
+					class: e.native && !A.value ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
+					name: e.name,
+					disabled: e.disabled || e.loading,
+					multiple: A.value,
+					readonly: e.readonly
+				}, ve(D(lt), !0)), [e.native ? (S(!0), p(l, { key: 0 }, w(e.options, (e, t) => (S(), p("option", {
+					key: t,
+					value: e.value,
+					disabled: e.disabled
+				}, E(e.label), 9, He))), 128)) : f("", !0)], 16, Ve), [[be, B.value]]),
+				We.value ? (S(), p("button", {
+					key: 2,
+					type: "button",
+					"aria-label": "Clean value",
+					class: x(D($).clearButton),
+					onClick: t[4] ||= (...e) => D(J) && D(J)(...e)
+				}, [g(a, {
+					icon: D(te),
+					class: x([D($).icon, "cursor-pointer"])
+				}, null, 8, ["icon", "class"])], 2)) : f("", !0),
+				e.$slots.input ? f("", !0) : (S(), p("div", {
+					key: 3,
+					class: x(D($).iconWrapper)
+				}, [e.loading ? (S(), d(ie, {
+					key: 0,
+					size: e.size
+				}, null, 8, ["size"])) : T(e.$slots, "icon", { key: 1 }, () => [g(a, {
+					icon: D(ne),
+					class: x(D($).icon)
+				}, null, 8, ["icon", "class"])])], 2))
+			]), D(st) ? f("", !0) : (S(), d(ae, {
+				key: 0,
+				error: D(ot),
+				helper: e.helper
+			}, null, 8, ["error", "helper"]))]),
+			_: 3
+		}, 16, [
+			"style",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"is-inside-input-group",
+			"label",
+			"class",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { j as default };

package/lib/components/select/theme/Select.base.theme.js

@@ -1,26 +1,27 @@
-const s = {
-  classes: {
-    wrapper: "",
-    box: ({ props: e, data: t }) => {
-      const r = ["w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
-      return !t.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-1.5 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), t.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), !e.multiple && !e.multipleCheckbox && r.push("truncate"), e.clearable ? r.push("pr-14") : r.push("pr-8"), r;
-    },
-    truncateCounter: "absolute right-0 cursor-pointer hover:bg-secondary-200 bg-secondary-100 text-secondary-800 rounded px-1 py-0.5 text-xs",
-    content: "p-1",
-    search: "p-1 mb-0.5",
-    contentBody: "overflow-y-auto max-h-64 min-w-[280px]",
-    iconWrapper: "absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none",
-    clearButton: "absolute top-1/2 -translate-y-1/2 right-5 flex items-center p-2",
-    icon: ({ props: e }) => {
-      const t = [];
-      return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" || e.size === "xl" ? t.push("h-5 w-5") : t.push("h-4 w-4"), e.disabled ? t.push("text-secondary-300 dark:text-secondary-500") : t.push("text-secondary-500 dark:text-secondary-400"), t;
-    }
-  },
-  styles: ({ colors: e, css: t }) => {
-    const r = e.getPalette("primary");
-    return t.get("border", r[500]);
-  }
-}, o = s;
-export {
-  o as default
+import { inputGroupRadiusClasses as e } from "../../../common/inputGroupRadius.js";
+//#region src/components/select/theme/Select.base.theme.ts
+var t = {
+	classes: {
+		wrapper: "",
+		box: ({ props: t, data: n }) => {
+			let r = ["w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out shadow-xs"];
+			return n.isInsideInputGroup ? r.push(...e(n.inputGroupPosition)) : r.push("rounded-md"), !n.errorInternal && !t.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), t.size === "xs" ? r.push("px-2 py-1 text-xs") : t.size === "sm" ? r.push("px-2 py-1.5 text-sm") : t.size === "lg" ? r.push("px-4 py-3 text-lg") : t.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), t.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), n.errorInternal ? (r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500"), n.isPopoverOpen && r.push("outline-error-500!")) : t.disabled || (r.push("group-focus:outline-[color:var(--x-select-border)]"), n.isPopoverOpen && r.push("outline-[color:var(--x-select-border)]!")), !t.multiple && !t.multipleCheckbox && r.push("truncate"), t.clearable ? r.push("pr-14") : r.push("pr-8"), r;
+		},
+		truncateCounter: "absolute right-0 cursor-pointer hover:bg-secondary-200 bg-secondary-100 text-secondary-800 rounded px-1 py-0.5 text-xs",
+		content: "p-1",
+		search: "p-1 mb-0.5",
+		contentBody: "overflow-y-auto max-h-64 min-w-[280px]",
+		iconWrapper: "absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none",
+		clearButton: "absolute top-1/2 -translate-y-1/2 right-5 flex items-center p-2",
+		icon: ({ props: e }) => {
+			let t = [];
+			return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" || e.size === "xl" ? t.push("h-5 w-5") : t.push("h-4 w-4"), e.disabled ? t.push("text-secondary-300 dark:text-secondary-500") : t.push("text-secondary-500 dark:text-secondary-400"), t;
+		}
+	},
+	styles: ({ colors: e, css: t }) => {
+		let n = e.getPalette("primary");
+		return t.get("border", n[500]);
+	}
 };
+//#endregion
+export { t as default };

package/lib/components/select/theme/Select.carbon.theme.js

@@ -1,24 +1,24 @@
-const o = {
-  classes: {
-    wrapper: "",
-    box: ({ props: e, data: s }) => {
-      const r = ["w-full border-b text-sm px-4 border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
-      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" || e.size === "sm" ? r.push("py-1.5") : e.size === "lg" || e.size === "xl" ? r.push("py-3.5") : r.push("py-2.5"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-secondary-900 text-secondary-700") : r.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
-    },
-    content: "p-1",
-    search: "p-1 mb-0.5",
-    contentBody: "overflow-y-auto max-h-64",
-    iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
-    icon: ({ props: e }) => {
-      const s = ["h-5 w-5"];
-      return e.disabled ? s.push("text-secondary-300 dark:text-secondary-500") : s.push("text-secondary-500 dark:text-secondary-400"), s;
-    }
-  },
-  styles: ({ colors: e, css: s }) => {
-    const r = e.getPalette("primary");
-    return s.get("border", r[500]);
-  }
-}, t = o;
-export {
-  t as default
+//#region src/components/select/theme/Select.carbon.theme.ts
+var e = {
+	classes: {
+		wrapper: "",
+		box: ({ props: e, data: t }) => {
+			let n = ["w-full border-b text-sm px-4 border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
+			return !t.errorInternal && !e.disabled && n.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" || e.size === "sm" ? n.push("py-1.5") : e.size === "lg" || e.size === "xl" ? n.push("py-3.5") : n.push("py-2.5"), e.disabled ? n.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : e.readonly ? n.push("bg-white dark:bg-secondary-900 text-secondary-700") : n.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), t.errorInternal ? (n.push("border-error-500 dark:border-error-400 group-focus:outline-error-500"), t.isPopoverOpen && n.push("outline-error-500!")) : e.disabled || (n.push("group-focus:outline-[color:var(--x-select-border)]"), t.isPopoverOpen && n.push("outline-[color:var(--x-select-border)]!")), n;
+		},
+		content: "p-1",
+		search: "p-1 mb-0.5",
+		contentBody: "overflow-y-auto max-h-64",
+		iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
+		icon: ({ props: e }) => {
+			let t = ["h-5 w-5"];
+			return e.disabled ? t.push("text-secondary-300 dark:text-secondary-500") : t.push("text-secondary-500 dark:text-secondary-400"), t;
+		}
+	},
+	styles: ({ colors: e, css: t }) => {
+		let n = e.getPalette("primary");
+		return t.get("border", n[500]);
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/skeleton/Skeleton.js

@@ -0,0 +1,5 @@
+import e from "./Skeleton.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/skeleton/Skeleton.vue
+var t = e;
+//#endregion
+export { t as default };