@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system180.js

@@ -1,465 +0,0 @@
-import { BCommonSize as e } from "./design-system3.js";
-import { useComponentId as t } from "./design-system10.js";
-import { BSelectMode as n, BSelectPlacement as r, BSelectStatus as i, BSelectVariant as a } from "./design-system179.js";
-import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as ee, defineComponent as d, mergeModels as f, mergeProps as te, nextTick as p, normalizeClass as m, normalizeStyle as ne, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as re, useCssVars as ie, useModel as ae, watch as x, withModifiers as S } from "vue";
-//#region src/components/BSelect/BSelect.vue?vue&type=script&setup=true&lang.ts
-var oe = [
-	"tabindex",
-	"aria-expanded",
-	"aria-controls",
-	"aria-activedescendant",
-	"aria-label",
-	"aria-disabled"
-], se = { class: "b:truncate" }, ce = ["aria-label", "onClick"], le = [
-	"value",
-	"placeholder",
-	"disabled",
-	"aria-label"
-], ue = {
-	key: 0,
-	class: "b-select__value b:flex-1 b:truncate b:text-[color:var(--b-select-color)]"
-}, de = {
-	key: 1,
-	class: "b-select__placeholder b:flex-1 b:truncate b:text-[var(--b-select-placeholder-color)]"
-}, fe = [
-	"value",
-	"disabled",
-	"aria-label"
-], pe = {
-	key: 3,
-	class: "b-select__loading b:ml-1 b:flex b:shrink-0 b:animate-spin b:items-center b:text-zinc-400",
-	"aria-hidden": "true"
-}, me = [
-	"id",
-	"aria-multiselectable",
-	"aria-label"
-], he = {
-	key: 0,
-	class: "b:p-1"
-}, ge = [
-	"id",
-	"data-active",
-	"aria-selected",
-	"aria-disabled",
-	"onMousedown",
-	"onMouseenter"
-], _e = { class: "b:flex b:items-center b:justify-between" }, ve = {
-	key: 0,
-	class: "b:ml-2 b:h-3 b:w-3 b:text-[var(--b-select-active-border-color)]",
-	viewBox: "0 0 12 12",
-	fill: "none",
-	"aria-hidden": "true"
-}, ye = {
-	key: 1,
-	class: "b-select__empty b:px-4 b:py-6 b:text-center b:text-sm b:text-zinc-400"
-}, C = /* @__PURE__ */ d({
-	inheritAttrs: !1,
-	__name: "BSelect",
-	props: /* @__PURE__ */ f({
-		options: { default: () => [] },
-		size: { default: () => e.Medium },
-		variant: { default: () => a.Outlined },
-		disabled: { type: Boolean },
-		status: {},
-		placeholder: {},
-		mode: {},
-		defaultActiveFirstOption: {
-			type: Boolean,
-			default: !0
-		},
-		allowClear: {
-			type: Boolean,
-			default: !1
-		},
-		open: { type: Boolean },
-		defaultOpen: { type: Boolean },
-		showSearch: {
-			type: Boolean,
-			default: !1
-		},
-		popupMatchSelectWidth: {
-			type: [Boolean, Number],
-			default: !0
-		},
-		listHeight: { default: 256 },
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		maxTagCount: {},
-		maxCount: {},
-		placement: { default: () => r.BottomLeft },
-		notFoundContent: { default: "No data" },
-		fieldNames: {},
-		filterOption: {
-			type: [Boolean, Function],
-			default: !0
-		},
-		tokenSeparators: {},
-		labelInValue: { type: Boolean }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ f([
-		"change",
-		"select",
-		"deselect",
-		"focus",
-		"blur",
-		"clear",
-		"openChange",
-		"search",
-		"popupScroll",
-		"inputKeyDown"
-	], ["update:modelValue"]),
-	setup(r, { expose: d, emit: f }) {
-		ie((e) => ({ a174b70c: be.value }));
-		let C = re(), w = f, T = ae(r, "modelValue"), { componentUID: E } = t(), be = s(() => `--b-select-anchor-${E.value}`), D = s(() => `b-select-listbox-${E.value}`), O = g(null), k = g(null), A = g(null), j = g(!1), M = g(-1), N = g(""), xe = s(() => r.fieldNames?.label ?? "label"), P = s(() => r.fieldNames?.value ?? "value"), Se = s(() => r.fieldNames?.options ?? "options"), F = s(() => r.mode === n.Multiple || r.mode === n.Tags ? !0 : r.showSearch), I = (e) => {
-			let t = e, n = t[xe.value], r = t[P.value];
-			return String(n ?? r ?? "");
-		}, L = (e) => e[P.value], R = s(() => {
-			let e = [];
-			for (let t of r.options) {
-				let n = t[Se.value];
-				if (n && Array.isArray(n)) for (let t of n) e.push(t);
-				else e.push(t);
-			}
-			return e;
-		}), z = s(() => {
-			if (!N.value || !F.value || r.filterOption === !1) return R.value;
-			if (typeof r.filterOption == "function") return R.value.filter((e) => r.filterOption(N.value, e));
-			let e = N.value.toLowerCase();
-			return R.value.filter((t) => I(t).toLowerCase().includes(e));
-		}), B = s(() => T.value == null ? [] : Array.isArray(T.value) ? T.value : [T.value]), V = s(() => B.value.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean)), H = s(() => U.value || V.value.length === 0 ? "" : I(V.value[0])), U = s(() => r.mode === n.Multiple || r.mode === n.Tags), Ce = s(() => r.maxTagCount == null || r.maxTagCount === "responsive" ? V.value : V.value.slice(0, r.maxTagCount)), W = s(() => r.maxTagCount == null || r.maxTagCount === "responsive" ? 0 : Math.max(0, V.value.length - r.maxTagCount)), G = (e) => B.value.includes(L(e)), K = () => {
-			j.value || A.value?.showPopover();
-		}, q = () => {
-			j.value && A.value?.hidePopover();
-		}, we = ({ newState: e }) => {
-			let t = e === "open";
-			j.value = t, w("openChange", t), t ? (r.defaultActiveFirstOption && z.value.length > 0 && (M.value = 0), p(() => {
-				F.value && k.value?.focus();
-			})) : (M.value = -1, N.value = "");
-		}, Te = (e) => {
-			if (e.disabled) return;
-			let t = L(e);
-			T.value = t, w("select", t, e), w("change", t, e), q(), p(() => O.value?.focus());
-		}, J = (e) => {
-			if (e.disabled) return;
-			let t = L(e), n = B.value.slice();
-			if (n.includes(t)) {
-				let r = n.filter((e) => e !== t);
-				T.value = r, w("deselect", t, e), w("change", r, r.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean));
-			} else {
-				if (r.maxCount != null && n.length >= r.maxCount) return;
-				let i = [...n, t];
-				T.value = i, w("select", t, e), w("change", i, i.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean));
-			}
-			N.value = "", p(() => k.value?.focus());
-		}, Y = (e) => {
-			U.value ? J(e) : Te(e);
-		}, X = (e) => {
-			let t = R.value.find((t) => L(t) === e), n = B.value.filter((t) => t !== e);
-			T.value = n, t && w("deselect", e, t), w("change", n, n.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean));
-		}, Ee = (e) => {
-			e.stopPropagation(), U.value ? T.value = [] : T.value = void 0, N.value = "", w("clear"), w("change", U.value ? [] : void 0, []);
-		}, De = () => {
-			r.disabled || (j.value ? q() : K());
-		}, Z = (e) => {
-			w("focus", e);
-		}, Q = (e) => {
-			let t = e.relatedTarget;
-			A.value?.contains(t) || O.value?.contains(t) || (w("blur", e), q());
-		}, Oe = (e) => {
-			let t = e.target;
-			if (N.value = t.value, w("search", t.value), r.mode === n.Tags && r.tokenSeparators) {
-				let e = r.tokenSeparators;
-				for (let n of e) if (t.value.includes(n)) {
-					let n = t.value.split(RegExp(`[${e.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")}]`));
-					for (let e of n) {
-						let t = e.trim();
-						if (t && !B.value.includes(t)) {
-							let e = R.value.find((e) => L(e) === t || I(e) === t);
-							if (e) J(e);
-							else {
-								let e = [...B.value.slice(), t];
-								T.value = e, w("select", t, {
-									value: t,
-									label: t
-								}), w("change", e, e.map((e) => R.value.find((t) => L(t) === e) ?? {
-									value: e,
-									label: String(e)
-								}));
-							}
-						}
-					}
-					N.value = "";
-					break;
-				}
-			}
-			j.value || K(), M.value = r.defaultActiveFirstOption ? 0 : -1;
-		}, $ = (e) => {
-			switch (w("inputKeyDown", e), e.key) {
-				case "ArrowDown": {
-					if (e.preventDefault(), !j.value) {
-						K();
-						return;
-					}
-					let t = z.value, n = M.value + 1;
-					for (let e = 0; e < t.length; e++) {
-						let r = (n + e) % t.length;
-						if (!t[r].disabled) {
-							M.value = r;
-							break;
-						}
-					}
-					break;
-				}
-				case "ArrowUp": {
-					if (e.preventDefault(), !j.value) {
-						K();
-						return;
-					}
-					let t = z.value, n = M.value - 1;
-					for (let e = 0; e < t.length; e++) {
-						let r = ((n - e) % t.length + t.length) % t.length;
-						if (!t[r].disabled) {
-							M.value = r;
-							break;
-						}
-					}
-					break;
-				}
-				case "Enter":
-					if (e.preventDefault(), j.value && M.value >= 0) {
-						let e = z.value[M.value];
-						e && !e.disabled && Y(e);
-					} else j.value || K();
-					break;
-				case " ":
-					if (!F.value || !N.value) {
-						if (e.preventDefault(), !j.value) K();
-						else if (M.value >= 0) {
-							let e = z.value[M.value];
-							e && !e.disabled && Y(e);
-						}
-					}
-					break;
-				case "Escape":
-					e.preventDefault(), q(), O.value?.focus();
-					break;
-				case "Backspace":
-					if (U.value && !N.value && B.value.length > 0) {
-						let e = B.value[B.value.length - 1];
-						X(e);
-					}
-					break;
-				case "Tab":
-					j.value && q();
-					break;
-			}
-		}, ke = (e) => {
-			w("popupScroll", e);
-		};
-		x(M, () => {
-			p(() => {
-				(A.value?.querySelector("[data-active=\"true\"]"))?.scrollIntoView({ block: "nearest" });
-			});
-		}), x(() => r.open, (e) => {
-			e === !0 && !j.value ? K() : e === !1 && j.value && q();
-		});
-		let Ae = s(() => !r.allowClear || r.disabled ? !1 : U.value ? B.value.length > 0 : T.value != null && T.value !== "");
-		return d({
-			focus: () => O.value?.focus(),
-			blur: () => O.value?.blur()
-		}), (t, n) => (h(), l("div", { class: m(["b-select b:relative b:inline-flex b:w-full", { "b-select--disabled": r.disabled }]) }, [u("div", te({
-			ref_key: "selectorRef",
-			ref: O
-		}, b(C), {
-			class: ["b-select__selector b:box-border b:flex b:w-full b:cursor-pointer b:items-center b:gap-1 b:transition-all b:outline-none", [
-				{
-					"b:min-h-6 b:px-2 b:text-sm": r.size === b(e).Small,
-					"b:min-h-8 b:px-3 b:text-sm": r.size === b(e).Medium,
-					"b:min-h-10 b:px-3 b:text-base": r.size === b(e).Large
-				},
-				{
-					"b:rounded-lg b:border-1 b:border-[var(--b-select-border-color)] b:bg-[var(--b-select-selector-bg)] b:hover:not-disabled:border-[var(--b-select-hover-border-color)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]": r.variant === b(a).Outlined,
-					"b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-select-filled-bg)] b:hover:not-disabled:bg-[var(--b-select-filled-bg)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:bg-[var(--b-select-selector-bg)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]": r.variant === b(a).Filled,
-					"b:rounded-lg b:border-1 b:border-transparent b:bg-transparent": r.variant === b(a).Borderless
-				},
-				{
-					"b:border-red-500! b:hover:not-disabled:border-red-400! b:focus:not-disabled:border-red-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]!": r.status === b(i).Error,
-					"b:border-yellow-500! b:hover:not-disabled:border-yellow-400! b:focus:not-disabled:border-yellow-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,215,5,0.1)]!": r.status === b(i).Warning
-				},
-				{ "b:cursor-not-allowed b:opacity-40": r.disabled },
-				{ "b-select__selector--open": j.value }
-			]],
-			tabindex: r.disabled ? -1 : 0,
-			role: "combobox",
-			"aria-expanded": j.value,
-			"aria-controls": j.value ? D.value : void 0,
-			"aria-activedescendant": j.value && M.value >= 0 ? `${D.value}-option-${M.value}` : void 0,
-			"aria-haspopup": "listbox",
-			"aria-label": r.placeholder ?? "Select",
-			"aria-disabled": r.disabled ?? !1,
-			onClick: De,
-			onFocus: Z,
-			onBlur: Q,
-			onKeydown: $
-		}), [
-			U.value ? (h(), l(o, { key: 0 }, [
-				(h(!0), l(o, null, _(Ce.value, (t) => (h(), l("span", {
-					key: L(t),
-					class: m(["b-select__tag b:inline-flex b:max-w-full b:items-center b:gap-0.5 b:rounded b:border-1 b:border-[var(--b-select-multiple-item-border-color)] b:bg-[var(--b-select-multiple-item-bg)] b:leading-none", [{
-						"b:h-4 b:px-1 b:text-xs": r.size === b(e).Small,
-						"b:h-6 b:px-1.5 b:text-xs": r.size === b(e).Medium,
-						"b:h-8 b:px-2 b:text-sm": r.size === b(e).Large
-					}]])
-				}, [u("span", se, y(I(t)), 1), u("button", {
-					type: "button",
-					class: "b-select__tag-close b:ml-0.5 b:flex b:h-3.5 b:w-3.5 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-transparent b:text-[10px] b:text-zinc-400 b:hover:bg-zinc-200 b:hover:text-zinc-600",
-					"aria-label": `Remove ${I(t)}`,
-					tabindex: "-1",
-					onClick: S((e) => X(L(t)), ["stop"]),
-					onMousedown: n[0] ||= S(() => {}, ["prevent"])
-				}, [...n[2] ||= [u("svg", {
-					"aria-hidden": "true",
-					width: "8",
-					height: "8",
-					viewBox: "0 0 8 8",
-					fill: "none"
-				}, [u("path", {
-					d: "M1 1l6 6M7 1L1 7",
-					stroke: "currentColor",
-					"stroke-width": "1.5",
-					"stroke-linecap": "round"
-				})], -1)]], 40, ce)], 2))), 128)),
-				W.value > 0 ? (h(), l("span", {
-					key: 0,
-					class: m(["b-select__tag b-select__tag--count b:relative b:z-1 b:inline-flex b:shrink-0 b:items-center b:rounded b:bg-[var(--b-select-multiple-count-bg)] b:px-1.5 b:text-xs b:leading-none b:text-[var(--b-select-multiple-count-color)]", [{
-						"b:h-4": r.size === b(e).Small,
-						"b:h-6": r.size === b(e).Medium,
-						"b:h-8": r.size === b(e).Large
-					}]])
-				}, " +" + y(W.value), 3)) : c("", !0),
-				u("input", {
-					ref_key: "searchInputRef",
-					ref: k,
-					class: "b-select__search b:min-w-4 b:flex-1 b:border-none b:bg-transparent b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]",
-					value: N.value,
-					placeholder: B.value.length === 0 ? r.placeholder : void 0,
-					disabled: r.disabled,
-					"aria-label": r.placeholder ?? "Search options",
-					autocomplete: "off",
-					onInput: Oe,
-					onKeydown: $,
-					onFocus: Z,
-					onBlur: Q
-				}, null, 40, le)
-			], 64)) : (h(), l(o, { key: 1 }, [H.value && !N.value ? (h(), l("span", ue, [v(t.$slots, "selectedLabel", { option: V.value[0] }, () => [ee(y(H.value), 1)], !0)])) : !N.value && !H.value ? (h(), l("span", de, y(r.placeholder), 1)) : c("", !0), F.value ? (h(), l("input", {
-				key: 2,
-				ref_key: "searchInputRef",
-				ref: k,
-				class: m(["b-select__search b:absolute b:inset-0 b:w-full b:border-none b:bg-transparent b:px-3 b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]", { "b:opacity-0": !j.value }]),
-				value: N.value,
-				disabled: r.disabled,
-				"aria-label": r.placeholder ?? "Search options",
-				autocomplete: "off",
-				tabindex: "-1",
-				onInput: Oe,
-				onKeydown: $
-			}, null, 42, fe)) : c("", !0)], 64)),
-			Ae.value ? (h(), l("button", {
-				key: 2,
-				type: "button",
-				class: "b-select__clear b:z-1 b:flex b:h-4 b:w-4 b:shrink-0 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-select-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600",
-				"aria-label": "Clear selection",
-				tabindex: "-1",
-				onClick: Ee,
-				onMousedown: n[1] ||= S(() => {}, ["prevent"])
-			}, [...n[3] ||= [u("svg", {
-				"aria-hidden": "true",
-				width: "8",
-				height: "8",
-				viewBox: "0 0 8 8",
-				fill: "none"
-			}, [u("path", {
-				d: "M1 1l6 6M7 1L1 7",
-				stroke: "currentColor",
-				"stroke-width": "1.5",
-				"stroke-linecap": "round"
-			})], -1)]], 32)) : c("", !0),
-			u("span", {
-				class: m(["b-select__arrow b:ml-auto b:flex b:shrink-0 b:items-center b:text-zinc-400 b:transition-transform b:duration-200", { "b:rotate-180": j.value }]),
-				"aria-hidden": "true"
-			}, [...n[4] ||= [u("svg", {
-				width: "12",
-				height: "12",
-				viewBox: "0 0 12 12",
-				fill: "none"
-			}, [u("path", {
-				d: "M2.5 4.5L6 8L9.5 4.5",
-				stroke: "currentColor",
-				"stroke-width": "1.5",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round"
-			})], -1)]], 2),
-			r.loading ? (h(), l("span", pe, [...n[5] ||= [u("svg", {
-				width: "14",
-				height: "14",
-				viewBox: "0 0 14 14",
-				fill: "none"
-			}, [u("circle", {
-				cx: "7",
-				cy: "7",
-				r: "5.5",
-				stroke: "currentColor",
-				"stroke-width": "1.5",
-				"stroke-dasharray": "24",
-				"stroke-linecap": "round"
-			})], -1)]])) : c("", !0)
-		], 16, oe), u("div", {
-			ref_key: "menuRef",
-			ref: A,
-			id: D.value,
-			class: m(["b-select__dropdown b:overflow-auto b:rounded-lg b:bg-[var(--b-select-selector-bg)] b:shadow-lg", { "b:w-[anchor-size(width)]": r.popupMatchSelectWidth === !0 }]),
-			style: ne([typeof r.popupMatchSelectWidth == "number" ? { width: `${r.popupMatchSelectWidth}px` } : void 0, { maxHeight: `${r.listHeight}px` }]),
-			popover: "",
-			role: "listbox",
-			"aria-multiselectable": U.value || void 0,
-			"aria-label": r.placeholder ?? "Options",
-			onToggle: we,
-			onScroll: ke
-		}, [z.value.length > 0 ? (h(), l("div", he, [(h(!0), l(o, null, _(z.value, (e, r) => (h(), l("div", {
-			key: L(e),
-			id: `${D.value}-option-${r}`,
-			class: m(["b-select__option b:cursor-pointer b:rounded-md b:px-[var(--b-select-option-padding-x)] b:py-[var(--b-select-option-padding-y)] b:text-[length:var(--b-select-option-font-size)] b:leading-[var(--b-select-option-line-height)] b:transition-colors", [{
-				"b:bg-[var(--b-select-option-active-bg)]": r === M.value && !e.disabled,
-				"b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)] b:text-[color:var(--b-select-option-selected-color)]": G(e) && r !== M.value,
-				"b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)]": G(e) && r === M.value,
-				"b:cursor-not-allowed b:opacity-40": e.disabled,
-				"b:hover:bg-[var(--b-select-option-active-bg)]": !e.disabled && r !== M.value && !G(e)
-			}]]),
-			"data-active": r === M.value,
-			"aria-selected": G(e),
-			"aria-disabled": e.disabled ?? !1,
-			role: "option",
-			onMousedown: S((t) => Y(e), ["prevent"]),
-			onMouseenter: (e) => M.value = r
-		}, [v(t.$slots, "option", {
-			option: e,
-			index: r,
-			selected: G(e)
-		}, () => [u("span", _e, [u("span", null, y(I(e)), 1), U.value && G(e) ? (h(), l("svg", ve, [...n[6] ||= [u("path", {
-			d: "M2 6L5 9L10 3",
-			stroke: "currentColor",
-			"stroke-width": "1.5",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round"
-		}, null, -1)]])) : c("", !0)])], !0)], 42, ge))), 128))])) : r.notFoundContent === null ? c("", !0) : (h(), l("div", ye, y(r.notFoundContent), 1))], 46, me)], 2));
-	}
-});
-//#endregion
-export { C as default };
-
-//# sourceMappingURL=design-system180.js.map

package/dist/design-system180.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system180.js","names":[],"sources":["../src/components/BSelect/BSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\nimport {\n  BSelectMode,\n  BSelectPlacement,\n  BSelectStatus,\n  BSelectVariant,\n  type BSelectFieldNames,\n  type BSelectOption,\n} from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BSelectVariant.Outlined,\n  defaultActiveFirstOption = true,\n  allowClear = false,\n  popupMatchSelectWidth = true,\n  showSearch = false,\n  listHeight = 256,\n  loading = false,\n  maxTagCount,\n  maxCount,\n  placement: _placement = BSelectPlacement.BottomLeft,\n  filterOption = true,\n  notFoundContent = 'No data',\n  fieldNames,\n  placeholder,\n  mode,\n  tokenSeparators,\n  disabled,\n  status,\n  open,\n} = defineProps<{\n  /** Data source options array. */\n  options?: BSelectOption[];\n  /** Size of the selector. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BSelectVariant}`;\n  /** Whether the component is disabled. */\n  disabled?: boolean;\n  /** Validation status. */\n  status?: `${BSelectStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Selection mode: multiple or tags. */\n  mode?: `${BSelectMode}`;\n  /** Whether to activate the first option by default. */\n  defaultActiveFirstOption?: boolean;\n  /** Show clear button. */\n  allowClear?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether to show search input. Automatically true in multiple/tags mode. */\n  showSearch?: boolean;\n  /** Whether dropdown width matches selector width. */\n  popupMatchSelectWidth?: boolean | number;\n  /** Max height of popup list in px. */\n  listHeight?: number;\n  /** Loading state. */\n  loading?: boolean;\n  /** Max tag count visible (multiple/tags mode). */\n  maxTagCount?: number | 'responsive';\n  /** Max selected items (multiple/tags mode). */\n  maxCount?: number;\n  /** Dropdown placement. */\n  placement?: `${BSelectPlacement}`;\n  /** Content shown when no options match. Set to null to hide. */\n  notFoundContent?: string | null;\n  /** Customize field names mapping. */\n  fieldNames?: BSelectFieldNames;\n  /** Filter options by input. true uses default, function for custom. */\n  filterOption?: boolean | ((inputValue: string, option: BSelectOption) => boolean);\n  /** Separators for tags mode to auto-tokenize. */\n  tokenSeparators?: string[];\n  /** Whether the selected option label is included in value. */\n  labelInValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: string | number | (string | number)[], option: BSelectOption | BSelectOption[]];\n  /** Fired when an option is selected. */\n  select: [value: string | number, option: BSelectOption];\n  /** Fired when an option is deselected (multiple/tags). */\n  deselect: [value: string | number, option: BSelectOption];\n  /** Fired on focus. */\n  focus: [event: FocusEvent];\n  /** Fired on blur. */\n  blur: [event: FocusEvent];\n  /** Fired when clear button is clicked. */\n  clear: [];\n  /** Fired when dropdown opens/closes. */\n  openChange: [open: boolean];\n  /** Fired when searching (multiple/tags mode). */\n  search: [value: string];\n  /** Fired on dropdown scroll. */\n  popupScroll: [event: Event];\n  /** Fired on input keydown. */\n  inputKeyDown: [event: KeyboardEvent];\n}>();\n\nconst model = defineModel<string | number | (string | number)[] | null | undefined>();\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-select-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-select-listbox-${componentUID.value}`);\n\nconst selectorRef = ref<HTMLElement | null>(null);\nconst searchInputRef = ref<HTMLInputElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst searchValue = ref('');\n\nconst labelField = computed(() => fieldNames?.label ?? 'label');\nconst valueField = computed(() => fieldNames?.value ?? 'value');\nconst optionsField = computed(() => fieldNames?.options ?? 'options');\n\nconst isSearchable = computed(() => {\n  if (mode === BSelectMode.Multiple || mode === BSelectMode.Tags) return true;\n  return showSearch;\n});\n\nconst getOptionLabel = (opt: BSelectOption): string => {\n  const record = opt as unknown as Record<string, unknown>;\n  const label = record[labelField.value];\n  const value = record[valueField.value];\n  return String(label ?? value ?? '');\n};\n\nconst getOptionValue = (opt: BSelectOption): string | number => {\n  const record = opt as unknown as Record<string, unknown>;\n  return record[valueField.value] as string | number;\n};\n\nconst flatOptions = computed((): BSelectOption[] => {\n  const result: BSelectOption[] = [];\n  for (const opt of options) {\n    const record = opt as unknown as Record<string, unknown>;\n    const nested = record[optionsField.value] as BSelectOption[] | undefined;\n    if (nested && Array.isArray(nested)) {\n      for (const child of nested) {\n        result.push(child);\n      }\n    } else {\n      result.push(opt);\n    }\n  }\n  return result;\n});\n\nconst filteredOptions = computed((): BSelectOption[] => {\n  if (!searchValue.value || !isSearchable.value) return flatOptions.value;\n  if (filterOption === false) return flatOptions.value;\n  if (typeof filterOption === 'function') {\n    return flatOptions.value.filter((opt) => filterOption(searchValue.value, opt));\n  }\n  const query = searchValue.value.toLowerCase();\n  return flatOptions.value.filter((opt) => {\n    return getOptionLabel(opt).toLowerCase().includes(query);\n  });\n});\n\nconst selectedValues = computed((): (string | number)[] => {\n  if (model.value == null) return [];\n  if (Array.isArray(model.value)) return model.value;\n  return [model.value];\n});\n\nconst selectedOptions = computed((): BSelectOption[] => {\n  return selectedValues.value\n    .map((v) => flatOptions.value.find((opt) => getOptionValue(opt) === v))\n    .filter(Boolean) as BSelectOption[];\n});\n\nconst displayLabel = computed((): string => {\n  if (isMultipleMode.value) return '';\n  if (selectedOptions.value.length === 0) return '';\n  return getOptionLabel(selectedOptions.value[0]);\n});\n\nconst isMultipleMode = computed(() => {\n  return mode === BSelectMode.Multiple || mode === BSelectMode.Tags;\n});\n\nconst visibleTags = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return selectedOptions.value;\n  return selectedOptions.value.slice(0, maxTagCount as number);\n});\n\nconst hiddenTagCount = computed(() => {\n  if (maxTagCount == null || maxTagCount === 'responsive') return 0;\n  return Math.max(0, selectedOptions.value.length - (maxTagCount as number));\n});\n\nconst isOptionSelected = (opt: BSelectOption): boolean => {\n  return selectedValues.value.includes(getOptionValue(opt));\n};\n\nconst openMenu = () => {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n};\n\nconst closeMenu = () => {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n};\n\nconst handleToggle = ({ newState }: ToggleEvent) => {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  emit('openChange', nowOpen);\n  if (nowOpen) {\n    if (defaultActiveFirstOption && filteredOptions.value.length > 0) {\n      activeIndex.value = 0;\n    }\n    nextTick(() => {\n      if (isSearchable.value) {\n        searchInputRef.value?.focus();\n      }\n    });\n  } else {\n    activeIndex.value = -1;\n    searchValue.value = '';\n  }\n};\n\nconst selectSingleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  model.value = val;\n  emit('select', val, opt);\n  emit('change', val, opt);\n  closeMenu();\n  nextTick(() => selectorRef.value?.focus());\n};\n\nconst selectMultipleOption = (opt: BSelectOption) => {\n  if (opt.disabled) return;\n  const val = getOptionValue(opt);\n  const current = selectedValues.value.slice();\n\n  if (current.includes(val)) {\n    const next = current.filter((v) => v !== val);\n    model.value = next;\n    emit('deselect', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  } else {\n    if (maxCount != null && current.length >= maxCount) return;\n    const next = [...current, val];\n    model.value = next;\n    emit('select', val, opt);\n    emit(\n      'change',\n      next,\n      next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n    );\n  }\n  searchValue.value = '';\n  nextTick(() => searchInputRef.value?.focus());\n};\n\nconst selectOption = (opt: BSelectOption) => {\n  if (isMultipleMode.value) {\n    selectMultipleOption(opt);\n  } else {\n    selectSingleOption(opt);\n  }\n};\n\nconst removeTag = (val: string | number) => {\n  const opt = flatOptions.value.find((o) => getOptionValue(o) === val);\n  const next = selectedValues.value.filter((v) => v !== val);\n  model.value = next;\n  if (opt) emit('deselect', val, opt);\n  emit(\n    'change',\n    next,\n    next.map((v) => flatOptions.value.find((o) => getOptionValue(o) === v)!).filter(Boolean),\n  );\n};\n\nconst handleClear = (e: Event) => {\n  e.stopPropagation();\n  if (isMultipleMode.value) {\n    model.value = [];\n  } else {\n    model.value = undefined;\n  }\n  searchValue.value = '';\n  emit('clear');\n  emit(\n    'change',\n    isMultipleMode.value ? [] : (undefined as unknown as string),\n    [] as unknown as BSelectOption,\n  );\n};\n\nconst handleSelectorClick = () => {\n  if (disabled) return;\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst handleSelectorFocus = (e: FocusEvent) => {\n  emit('focus', e);\n};\n\nconst handleSelectorBlur = (e: FocusEvent) => {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  if (selectorRef.value?.contains(related)) return;\n  emit('blur', e);\n  closeMenu();\n};\n\nconst handleSearchInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  searchValue.value = target.value;\n  emit('search', target.value);\n\n  if (mode === BSelectMode.Tags && tokenSeparators) {\n    const separators = tokenSeparators;\n    for (const sep of separators) {\n      if (target.value.includes(sep)) {\n        const parts = target.value.split(\n          new RegExp(\n            `[${separators.map((s) => s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')).join('')}]`,\n          ),\n        );\n        for (const part of parts) {\n          const trimmed = part.trim();\n          if (trimmed && !selectedValues.value.includes(trimmed)) {\n            const existing = flatOptions.value.find(\n              (o) => getOptionValue(o) === trimmed || getOptionLabel(o) === trimmed,\n            );\n            if (existing) {\n              selectMultipleOption(existing);\n            } else {\n              const current = selectedValues.value.slice();\n              const next = [...current, trimmed];\n              model.value = next;\n              emit('select', trimmed, { value: trimmed, label: trimmed });\n              emit(\n                'change',\n                next,\n                next.map(\n                  (v) =>\n                    flatOptions.value.find((o) => getOptionValue(o) === v) ?? {\n                      value: v,\n                      label: String(v),\n                    },\n                ),\n              );\n            }\n          }\n        }\n        searchValue.value = '';\n        break;\n      }\n    }\n  }\n\n  if (!isOpen.value) openMenu();\n  activeIndex.value = defaultActiveFirstOption ? 0 : -1;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  emit('inputKeyDown', e);\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const nextIdx = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (nextIdx + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      if (!isOpen.value) {\n        openMenu();\n        return;\n      }\n      const opts = filteredOptions.value;\n      const prevIdx = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prevIdx - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (isOpen.value && activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      } else if (!isOpen.value) {\n        openMenu();\n      }\n      break;\n    }\n    case ' ': {\n      if (!isSearchable.value || !searchValue.value) {\n        e.preventDefault();\n        if (!isOpen.value) {\n          openMenu();\n        } else if (activeIndex.value >= 0) {\n          const opt = filteredOptions.value[activeIndex.value];\n          if (opt && !opt.disabled) {\n            selectOption(opt);\n          }\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      closeMenu();\n      selectorRef.value?.focus();\n      break;\n    }\n    case 'Backspace': {\n      if (isMultipleMode.value && !searchValue.value && selectedValues.value.length > 0) {\n        const lastVal = selectedValues.value[selectedValues.value.length - 1];\n        removeTag(lastVal);\n      }\n      break;\n    }\n    case 'Tab': {\n      if (isOpen.value) {\n        closeMenu();\n      }\n      break;\n    }\n  }\n};\n\nconst handlePopupScroll = (e: Event) => {\n  emit('popupScroll', e);\n};\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(\n  () => open,\n  (val) => {\n    if (val === true && !isOpen.value) openMenu();\n    else if (val === false && isOpen.value) closeMenu();\n  },\n);\n\nconst showClear = computed(() => {\n  if (!allowClear || disabled) return false;\n  if (isMultipleMode.value) return selectedValues.value.length > 0;\n  return model.value != null && model.value !== '';\n});\n\ndefineExpose({\n  focus: () => selectorRef.value?.focus(),\n  blur: () => selectorRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-select b:relative b:inline-flex b:w-full\"\n    :class=\"{ 'b-select--disabled': disabled }\"\n  >\n    <!-- Selector trigger -->\n    <div\n      ref=\"selectorRef\"\n      v-bind=\"attrs\"\n      class=\"b-select__selector b:box-border b:flex b:w-full b:cursor-pointer b:items-center b:gap-1 b:transition-all b:outline-none\"\n      :class=\"[\n        {\n          'b:min-h-6 b:px-2 b:text-sm': size === BCommonSize.Small,\n          'b:min-h-8 b:px-3 b:text-sm': size === BCommonSize.Medium,\n          'b:min-h-10 b:px-3 b:text-base': size === BCommonSize.Large,\n        },\n        {\n          'b:rounded-lg b:border-1 b:border-[var(--b-select-border-color)] b:bg-[var(--b-select-selector-bg)] b:hover:not-disabled:border-[var(--b-select-hover-border-color)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Outlined,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-select-filled-bg)] b:hover:not-disabled:bg-[var(--b-select-filled-bg)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:bg-[var(--b-select-selector-bg)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]':\n            variant === BSelectVariant.Filled,\n          'b:rounded-lg b:border-1 b:border-transparent b:bg-transparent':\n            variant === BSelectVariant.Borderless,\n        },\n        {\n          'b:border-red-500! b:hover:not-disabled:border-red-400! b:focus:not-disabled:border-red-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]!':\n            status === BSelectStatus.Error,\n          'b:border-yellow-500! b:hover:not-disabled:border-yellow-400! b:focus:not-disabled:border-yellow-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,215,5,0.1)]!':\n            status === BSelectStatus.Warning,\n        },\n        {\n          'b:cursor-not-allowed b:opacity-40': disabled,\n        },\n        {\n          'b-select__selector--open': isOpen,\n        },\n      ]\"\n      :tabindex=\"disabled ? -1 : 0\"\n      role=\"combobox\"\n      :aria-expanded=\"isOpen\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      :aria-activedescendant=\"isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-label=\"placeholder ?? 'Select'\"\n      :aria-disabled=\"disabled ?? false\"\n      @click=\"handleSelectorClick\"\n      @focus=\"handleSelectorFocus\"\n      @blur=\"handleSelectorBlur\"\n      @keydown=\"handleKeyDown\"\n    >\n      <!-- Multiple mode: tags -->\n      <template v-if=\"isMultipleMode\">\n        <span\n          v-for=\"opt in visibleTags\"\n          :key=\"getOptionValue(opt)\"\n          class=\"b-select__tag b:inline-flex b:max-w-full b:items-center b:gap-0.5 b:rounded b:border-1 b:border-[var(--b-select-multiple-item-border-color)] b:bg-[var(--b-select-multiple-item-bg)] b:leading-none\"\n          :class=\"[\n            {\n              'b:h-4 b:px-1 b:text-xs': size === BCommonSize.Small,\n              'b:h-6 b:px-1.5 b:text-xs': size === BCommonSize.Medium,\n              'b:h-8 b:px-2 b:text-sm': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          <span class=\"b:truncate\">{{ getOptionLabel(opt) }}</span>\n          <button\n            type=\"button\"\n            class=\"b-select__tag-close b:ml-0.5 b:flex b:h-3.5 b:w-3.5 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-transparent b:text-[10px] b:text-zinc-400 b:hover:bg-zinc-200 b:hover:text-zinc-600\"\n            :aria-label=\"`Remove ${getOptionLabel(opt)}`\"\n            tabindex=\"-1\"\n            @click.stop=\"removeTag(getOptionValue(opt))\"\n            @mousedown.prevent\n          >\n            <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n          </button>\n        </span>\n        <span\n          v-if=\"hiddenTagCount > 0\"\n          class=\"b-select__tag b-select__tag--count b:relative b:z-1 b:inline-flex b:shrink-0 b:items-center b:rounded b:bg-[var(--b-select-multiple-count-bg)] b:px-1.5 b:text-xs b:leading-none b:text-[var(--b-select-multiple-count-color)]\"\n          :class=\"[\n            {\n              'b:h-4': size === BCommonSize.Small,\n              'b:h-6': size === BCommonSize.Medium,\n              'b:h-8': size === BCommonSize.Large,\n            },\n          ]\"\n        >\n          +{{ hiddenTagCount }}\n        </span>\n        <input\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:min-w-4 b:flex-1 b:border-none b:bg-transparent b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :value=\"searchValue\"\n          :placeholder=\"selectedValues.length === 0 ? placeholder : undefined\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n          @focus=\"handleSelectorFocus\"\n          @blur=\"handleSelectorBlur\"\n        />\n      </template>\n\n      <!-- Single mode -->\n      <template v-else>\n        <span\n          v-if=\"displayLabel && !searchValue\"\n          class=\"b-select__value b:flex-1 b:truncate b:text-[color:var(--b-select-color)]\"\n        >\n          <slot name=\"selectedLabel\" :option=\"selectedOptions[0]\">\n            {{ displayLabel }}\n          </slot>\n        </span>\n        <span\n          v-else-if=\"!searchValue && !displayLabel\"\n          class=\"b-select__placeholder b:flex-1 b:truncate b:text-[var(--b-select-placeholder-color)]\"\n        >\n          {{ placeholder }}\n        </span>\n        <input\n          v-if=\"isSearchable\"\n          ref=\"searchInputRef\"\n          class=\"b-select__search b:absolute b:inset-0 b:w-full b:border-none b:bg-transparent b:px-3 b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]\"\n          :class=\"{ 'b:opacity-0': !isOpen }\"\n          :value=\"searchValue\"\n          :disabled=\"disabled\"\n          :aria-label=\"placeholder ?? 'Search options'\"\n          autocomplete=\"off\"\n          tabindex=\"-1\"\n          @input=\"handleSearchInput\"\n          @keydown=\"handleKeyDown\"\n        />\n      </template>\n\n      <!-- Clear button -->\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        class=\"b-select__clear b:z-1 b:flex b:h-4 b:w-4 b:shrink-0 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-select-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600\"\n        aria-label=\"Clear selection\"\n        tabindex=\"-1\"\n        @click=\"handleClear\"\n        @mousedown.prevent\n      >\n        <svg aria-hidden=\"true\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"><path d=\"M1 1l6 6M7 1L1 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n      </button>\n\n      <!-- Suffix arrow -->\n      <span\n        class=\"b-select__arrow b:ml-auto b:flex b:shrink-0 b:items-center b:text-zinc-400 b:transition-transform b:duration-200\"\n        :class=\"{ 'b:rotate-180': isOpen }\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n          <path\n            d=\"M2.5 4.5L6 8L9.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </span>\n\n      <!-- Loading spinner -->\n      <span\n        v-if=\"loading\"\n        class=\"b-select__loading b:ml-1 b:flex b:shrink-0 b:animate-spin b:items-center b:text-zinc-400\"\n        aria-hidden=\"true\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n          <circle\n            cx=\"7\"\n            cy=\"7\"\n            r=\"5.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-dasharray=\"24\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </span>\n    </div>\n\n    <!-- Dropdown popup -->\n    <div\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-select__dropdown b:overflow-auto b:rounded-lg b:bg-[var(--b-select-selector-bg)] b:shadow-lg\"\n      :class=\"{ 'b:w-[anchor-size(width)]': popupMatchSelectWidth === true }\"\n      :style=\"[\n        typeof popupMatchSelectWidth === 'number'\n          ? { width: `${popupMatchSelectWidth}px` }\n          : undefined,\n        { maxHeight: `${listHeight}px` },\n      ]\"\n      popover\n      role=\"listbox\"\n      :aria-multiselectable=\"isMultipleMode || undefined\"\n      :aria-label=\"placeholder ?? 'Options'\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <!-- Options -->\n      <div v-if=\"filteredOptions.length > 0\" class=\"b:p-1\">\n        <template v-for=\"(opt, idx) in filteredOptions\" :key=\"getOptionValue(opt)\">\n          <div\n            :id=\"`${listboxId}-option-${idx}`\"\n            class=\"b-select__option b:cursor-pointer b:rounded-md b:px-[var(--b-select-option-padding-x)] b:py-[var(--b-select-option-padding-y)] b:text-[length:var(--b-select-option-font-size)] b:leading-[var(--b-select-option-line-height)] b:transition-colors\"\n            :class=\"[\n              {\n                'b:bg-[var(--b-select-option-active-bg)]': idx === activeIndex && !opt.disabled,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)] b:text-[color:var(--b-select-option-selected-color)]':\n                  isOptionSelected(opt) && idx !== activeIndex,\n                'b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)]':\n                  isOptionSelected(opt) && idx === activeIndex,\n                'b:cursor-not-allowed b:opacity-40': opt.disabled,\n                'b:hover:bg-[var(--b-select-option-active-bg)]':\n                  !opt.disabled && idx !== activeIndex && !isOptionSelected(opt),\n              },\n            ]\"\n            :data-active=\"idx === activeIndex\"\n            :aria-selected=\"isOptionSelected(opt)\"\n            :aria-disabled=\"opt.disabled ?? false\"\n            role=\"option\"\n            @mousedown.prevent=\"selectOption(opt)\"\n            @mouseenter=\"activeIndex = idx\"\n          >\n            <slot name=\"option\" :option=\"opt\" :index=\"idx\" :selected=\"isOptionSelected(opt)\">\n              <span class=\"b:flex b:items-center b:justify-between\">\n                <span>{{ getOptionLabel(opt) }}</span>\n                <svg\n                  v-if=\"isMultipleMode && isOptionSelected(opt)\"\n                  class=\"b:ml-2 b:h-3 b:w-3 b:text-[var(--b-select-active-border-color)]\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M2 6L5 9L10 3\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </slot>\n          </div>\n        </template>\n      </div>\n\n      <!-- Not found content -->\n      <div\n        v-else-if=\"notFoundContent !== null\"\n        class=\"b-select__empty b:px-4 b:py-6 b:text-center b:text-sm b:text-zinc-400\"\n      >\n        {{ notFoundContent }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-border-color: transparent;\n  --b-select-multiple-item-border-color-disabled: transparent;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-font-size: 14px;\n  --b-select-option-height: 32px;\n  --b-select-option-line-height: 1.5714;\n  --b-select-option-padding-x: 12px;\n  --b-select-option-padding-y: 5px;\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n  --b-select-option-selected-font-weight: 600;\n  --b-select-z-index-popup: 1050;\n}\n\n@media (prefers-color-scheme: dark) {\n  .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-count-bg: #353535;\n    --b-select-multiple-count-color: #e0e0e0;\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n[data-prefers-color='light'] .b-select {\n  --b-select-active-border-color: #1677ff;\n  --b-select-active-outline-color: rgba(5, 145, 255, 0.1);\n  --b-select-hover-border-color: #4096ff;\n  --b-select-border-color: #d9d9d9;\n  --b-select-color: rgba(0, 0, 0, 0.88);\n  --b-select-placeholder-color: #606870;\n  --b-select-clear-bg: #ffffff;\n  --b-select-selector-bg: #ffffff;\n  --b-select-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-select-multiple-item-bg: rgba(0, 0, 0, 0.06);\n  --b-select-multiple-count-bg: #f0f0f0;\n  --b-select-multiple-count-color: #1f1f1f;\n  --b-select-multiple-item-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-select-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-select-option-selected-bg: #e6f4ff;\n  --b-select-option-selected-color: rgba(0, 0, 0, 0.88);\n}\n\n[data-prefers-color='dark'] .b-select {\n  --b-select-active-border-color: #1668dc;\n  --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n  --b-select-hover-border-color: #3c89e8;\n  --b-select-border-color: #424242;\n  --b-select-color: rgba(255, 255, 255, 0.88);\n  --b-select-placeholder-color: #9ca3af;\n  --b-select-clear-bg: #1f1f1f;\n  --b-select-selector-bg: #1f1f1f;\n  --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n  --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-select-option-selected-bg: #111a2c;\n  --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-select {\n    --b-select-active-border-color: #1668dc;\n    --b-select-active-outline-color: rgba(22, 104, 220, 0.15);\n    --b-select-hover-border-color: #3c89e8;\n    --b-select-border-color: #424242;\n    --b-select-color: rgba(255, 255, 255, 0.88);\n    --b-select-placeholder-color: #9ca3af;\n    --b-select-clear-bg: #1f1f1f;\n    --b-select-selector-bg: #1f1f1f;\n    --b-select-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-select-multiple-item-bg: rgba(255, 255, 255, 0.1);\n    --b-select-multiple-item-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-select-multiple-selector-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-select-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-select-option-selected-bg: #111a2c;\n    --b-select-option-selected-color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n.b-select__selector {\n  anchor-name: v-bind('anchorName');\n}\n\n.b-select__dropdown {\n  position: absolute;\n  margin-top: 4px;\n  z-index: var(--b-select-z-index-popup);\n\n  position-anchor: v-bind('anchorName');\n  position-try-fallbacks: --b-select-top;\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n\n  transition:\n    display 0.2s,\n    opacity 0.2s;\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n}\n\n@position-try --b-select-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-select__dropdown {\n    transition: none;\n  }\n\n  .b-select__arrow {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system183.js

@@ -1,38 +0,0 @@
-import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a } from "vue";
-//#region src/components/BSkeleton/BSkeletonAvatar.vue?vue&type=script&setup=true&lang.ts
-var o = /* @__PURE__ */ n({
-	__name: "BSkeletonAvatar",
-	props: {
-		active: {
-			type: Boolean,
-			default: !1
-		},
-		shape: { default: "circle" },
-		size: { default: "default" }
-	},
-	setup(n) {
-		let o = e(() => {
-			if (typeof n.size == "number") return {
-				width: `${n.size}px`,
-				height: `${n.size}px`,
-				lineHeight: `${n.size}px`
-			};
-		}), s = e(() => [
-			"b-skeleton-element",
-			"b-skeleton-avatar",
-			`b-skeleton-avatar--${n.shape}`,
-			typeof n.size == "string" ? `b-skeleton-avatar--${n.size}` : null,
-			{ "b-skeleton-element--active": n.active }
-		]);
-		return (e, n) => (a(), t("span", {
-			class: r(s.value),
-			style: i(o.value),
-			role: "presentation",
-			"aria-hidden": "true"
-		}, null, 6));
-	}
-});
-//#endregion
-export { o as default };
-
-//# sourceMappingURL=design-system183.js.map

package/dist/design-system183.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system183.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonAvatarShape, BSkeletonAvatarSize } from './types';\n\nconst {\n  active = false,\n  shape = 'circle',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Avatar shape. @default 'circle' */\n  shape?: BSkeletonAvatarShape;\n  /** Avatar size: preset string or pixel number. @default 'default' */\n  size?: BSkeletonAvatarSize;\n}>();\n\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (typeof size === 'number') {\n    return { width: `${size}px`, height: `${size}px`, lineHeight: `${size}px` };\n  }\n  return undefined;\n});\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-avatar',\n  `b-skeleton-avatar--${shape}`,\n  typeof size === 'string' ? `b-skeleton-avatar--${size}` : null,\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" :style=\"sizeStyle\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-avatar {\n  display: inline-block;\n  vertical-align: top;\n  width: var(--b-skeleton-avatar-size-default);\n  height: var(--b-skeleton-avatar-size-default);\n  background: var(--b-skeleton-gradient-from-color);\n}\n\n.b-skeleton-avatar--small {\n  width: var(--b-skeleton-avatar-size-small);\n  height: var(--b-skeleton-avatar-size-small);\n}\n\n.b-skeleton-avatar--large {\n  width: var(--b-skeleton-avatar-size-large);\n  height: var(--b-skeleton-avatar-size-large);\n}\n\n.b-skeleton-avatar--circle {\n  border-radius: 50%;\n}\n\n.b-skeleton-avatar--square {\n  border-radius: var(--b-skeleton-border-radius);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAiBA,IAAM,IAAY,QAAmD;AACnE,OAAI,OAAO,EAAA,QAAS,SAClB,QAAO;IAAE,OAAO,GAAG,EAAA,KAAK;IAAK,QAAQ,GAAG,EAAA,KAAK;IAAK,YAAY,GAAG,EAAA,KAAK;IAAK;IAG7E,EAEI,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAA;GACtB,OAAO,EAAA,QAAS,WAAW,sBAAsB,EAAA,SAAS;GAC1D,EAAE,8BAA8B,EAAA,QAAQ;GACzC,CAAC;yBAIA,EAAmF,QAAA;GAA5E,OAAK,EAAE,EAAA,MAAO;GAAG,OAAK,EAAE,EAAA,MAAS;GAAE,MAAK;GAAe,eAAY"}