@feugene/granularity 0.13.0 → 0.18.0

package/dist/components/GrSelect/chunks/GrSelect-DAdu044K.js

@@ -0,0 +1,1373 @@
+import { a as useGrComponentProp, c as useGrThemeAttrs, o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as usePortalTarget } from "../../../chunks/usePortalTarget-RyzEgNTb.js";
+import { vClickOutside } from "../../../directives/clickOutside.js";
+import { r as isComposingEvent } from "../../../chunks/keyboard-DE2yhz_b.js";
+import { useFloating } from "../../../composables/useFloating.js";
+import { useDismissible } from "../../../composables/useDismissible.js";
+import { useVirtualList } from "../../../composables/useVirtualList.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
+import { useComboboxNavigation } from "../../../composables/useComboboxNavigation.js";
+import { a as resolveSelectedOptions, i as normalizeOptionQuery, n as matchesOptionQuery } from "../../../chunks/optionFilter-DYw9XPPx.js";
+import { t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
+import { t as GrBadge_default } from "../../GrBadge/chunks/GrBadge-B1tgqfGQ.js";
+import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-2wd7Crs0.js";
+import { c as grSelectNativeClass, d as grSelectTriggerClass, i as grSelectLinkNativeLabelClass, l as grSelectOptionClass, n as defaultBaseClass, p as linkBaseClass, s as grSelectLinkNativeOverlayClass, u as grSelectPanelClasses } from "../../../chunks/grSelectStyles-eTz4uPMP.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import '../styles.css';//#region src/components/GrSelect/composables/useSelectPanelItems.ts
+function useSelectPanelItems(options) {
+	const panelItems = computed(() => {
+		const q = options.allowCustomValue() || options.filterable() ? normalizeOptionQuery(options.query()) : "";
+		const items = [];
+		if (options.allowCustomValue() && !options.multiple() && options.modelSingle.value !== "" && !options.hasModelInOptions.value) {
+			const value = options.modelSingle.value;
+			const custom = {
+				value,
+				label: String(value)
+			};
+			if (matchesOptionQuery(custom, q)) items.push({
+				kind: "option",
+				option: custom,
+				key: `__custom__${String(custom.value)}`
+			});
+		}
+		options.optionsResolved.value.forEach((item, index) => {
+			if (options.isOptionGroup(item)) {
+				const matched = item.options.filter((o) => matchesOptionQuery(o, q));
+				if (!matched.length) return;
+				const groupKey = `__group__${index}`;
+				items.push({
+					kind: "group",
+					label: item.label,
+					key: groupKey
+				});
+				for (const option of matched) items.push({
+					kind: "option",
+					option,
+					key: `${index}:${String(option.value)}`,
+					groupKey
+				});
+				return;
+			}
+			if (matchesOptionQuery(item, q)) items.push({
+				kind: "option",
+				option: item,
+				key: `${index}:${String(item.value)}`
+			});
+		});
+		return items;
+	});
+	return {
+		panelItems,
+		panelRows: computed(() => {
+			const rows = [];
+			let currentGroup;
+			panelItems.value.forEach((item, index) => {
+				if (item.kind === "group") {
+					currentGroup = {
+						kind: "group",
+						label: item.label,
+						key: item.key,
+						options: []
+					};
+					rows.push(currentGroup);
+					return;
+				}
+				const row = {
+					option: item.option,
+					key: item.key,
+					index
+				};
+				if (item.groupKey && currentGroup && currentGroup.key === item.groupKey) {
+					currentGroup.options.push(row);
+					return;
+				}
+				currentGroup = void 0;
+				rows.push({
+					kind: "option",
+					...row
+				});
+			});
+			return rows;
+		}),
+		canAddCustom: computed(() => {
+			if (!options.allowCustomValue()) return false;
+			if (!options.isPanelView()) return false;
+			const v = options.query().trim();
+			if (!v) return false;
+			if (options.multiple()) {
+				if (options.selectedValues.value.some((selected) => options.sameValue(selected, v))) return false;
+				return !options.flatOptions.value.some((o) => options.sameValue(o.value, v));
+			}
+			if (options.sameValue(v, options.modelSingle.value)) return false;
+			return !options.flatOptions.value.some((o) => options.sameValue(o.value, v));
+		})
+	};
+}
+//#endregion
+//#region src/components/GrSelect/composables/useSelectNavigation.ts
+/** Буфер typeahead живёт ровно столько: дальше набранное перестаёт быть словом. */
+var TYPEAHEAD_RESET_MS = 600;
+function useSelectNavigation(options) {
+	const navigableItems = computed(() => {
+		const items = options.canAddCustom.value ? [{ kind: "add" }] : [];
+		options.panelItems.value.forEach((item, index) => {
+			if (item.kind === "option" && !item.option.disabled) items.push({
+				kind: "option",
+				value: item.option.value,
+				index
+			});
+		});
+		return items;
+	});
+	const addOptionDomId = computed(() => `${options.listboxId}-add`);
+	/** Прокрутка к активному: у виртуализации окно, затем доводка `scrollIntoView`. */
+	async function scrollActiveIntoView(item) {
+		if (options.virtualEnabled.value) options.scrollVirtualToIndex(item.kind === "add" ? 0 : item.index + options.addOffset.value);
+		await nextTick();
+		const id = item.kind === "add" ? addOptionDomId.value : options.optionDomId(item.index);
+		document.getElementById(id)?.scrollIntoView?.({ block: "nearest" });
+	}
+	const { activeIndex, activeItem, activeDescendantId, setActive, init: initActiveIndex, reset: resetActive, handleNavigationKeys } = useComboboxNavigation({
+		items: () => navigableItems.value,
+		open: () => options.open.value,
+		idOf: (item) => item.kind === "add" ? addOptionDomId.value : options.optionDomId(item.index),
+		initialIndex: () => navigableItems.value.findIndex((item) => item.kind === "option" && options.isSelected(item.value)),
+		scrollTo: (item) => scrollActiveIntoView(item)
+	});
+	const activeValue = computed(() => activeItem.value?.kind === "option" ? activeItem.value.value : void 0);
+	/** Navigable-индекс по позиции в `panelItems`: O(1) на hover вместо O(n). */
+	const navigableIndexByPanelIndex = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		navigableItems.value.forEach((item, navIndex) => {
+			if (item.kind === "option") map.set(item.index, navIndex);
+		});
+		return map;
+	});
+	function onOptionHover(panelIndex) {
+		const next = navigableIndexByPanelIndex.value.get(panelIndex);
+		if (next !== void 0 && next !== activeIndex.value) activeIndex.value = next;
+	}
+	/**
+	* `aria-activedescendant` работает только на элементе, который держит фокус.
+	* С полем поиска фокус уходит в него, поэтому связка с активной опцией живёт
+	* там же; на триггере она осталась бы немой.
+	*/
+	const triggerActiveDescendant = computed(() => options.showSearchInput.value ? void 0 : activeDescendantId.value);
+	const searchActiveDescendant = computed(() => options.showSearchInput.value ? activeDescendantId.value : void 0);
+	let typeaheadBuffer = "";
+	let typeaheadTimer = null;
+	function typeahead(char) {
+		const lower = char.toLowerCase();
+		typeaheadBuffer = typeaheadBuffer.length === 1 && typeaheadBuffer === lower ? lower : typeaheadBuffer + lower;
+		if (typeaheadTimer) clearTimeout(typeaheadTimer);
+		typeaheadTimer = setTimeout(() => {
+			typeaheadBuffer = "";
+		}, TYPEAHEAD_RESET_MS);
+		const items = navigableItems.value;
+		const from = activeIndex.value;
+		for (let step = 1; step <= items.length; step += 1) {
+			const idx = (from + step + items.length) % items.length;
+			const item = items[idx];
+			if (item.kind !== "option") continue;
+			if (options.flatOptions.value.find((o) => options.sameValue(o.value, item.value))?.label.toLowerCase().startsWith(typeaheadBuffer)) {
+				setActive(idx);
+				return;
+			}
+		}
+	}
+	function onComboKeydown(event) {
+		if (isComposingEvent(event)) return;
+		if (options.locked.value) return;
+		if (!options.open.value) {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Enter",
+				" "
+			].includes(event.key)) {
+				event.preventDefault();
+				options.openDropdown();
+			}
+			return;
+		}
+		if (handleNavigationKeys(event)) return;
+		switch (event.key) {
+			case "Enter": {
+				event.preventDefault();
+				const item = activeItem.value;
+				if (item?.kind === "add") options.addCustom();
+				else if (item?.kind === "option") options.toggleValue(item.value);
+				else if (options.canAddCustom.value) options.addCustom();
+				break;
+			}
+			case "Tab":
+				options.closeDropdown();
+				break;
+			default: if (!options.showSearchInput.value && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead(event.key);
+		}
+	}
+	onBeforeUnmount(() => {
+		if (typeaheadTimer) clearTimeout(typeaheadTimer);
+	});
+	return {
+		navigableItems,
+		activeIndex,
+		activeItem,
+		addOptionDomId,
+		activeValue,
+		activeDescendantId,
+		triggerActiveDescendant,
+		searchActiveDescendant,
+		onOptionHover,
+		onComboKeydown,
+		initActiveIndex,
+		resetActive
+	};
+}
+//#endregion
+//#region src/components/GrSelect/composables/useSelectVirtualization.ts
+/**
+* Виртуализация панели `GrSelect`.
+*
+* Набор — `[«Add …»?] + panelItems`, то есть заголовки групп идут в нём наравне
+* с опциями: на экране они занимают такую же строку. Вложенную структуру групп
+* рендер пересобирает уже из окна.
+*/
+/** Оценки высоты строк: опция крупнее заголовка группы. Уточняются замером. */
+var OPTION_SIZE_ESTIMATE = 36;
+var GROUP_LABEL_SIZE_ESTIMATE = 28;
+function useSelectVirtualization(options) {
+	const virtualEnabled = computed(() => options.enabled());
+	const addOffset = computed(() => options.canAddCustom.value ? 1 : 0);
+	const virtualCount = computed(() => options.panelItems.value.length + addOffset.value);
+	const virtualizer = useVirtualList({
+		container: options.listboxEl,
+		count: () => virtualEnabled.value ? virtualCount.value : 0,
+		source: () => options.panelItems.value,
+		itemSize: (index) => {
+			return options.panelItems.value[index - addOffset.value]?.kind === "group" ? GROUP_LABEL_SIZE_ESTIMATE : OPTION_SIZE_ESTIMATE;
+		},
+		viewportSize: () => options.maxHeight()
+	});
+	/**
+	* Позиция и размер набора для каждой опции.
+	*
+	* Набор — не весь список: опция внутри `role="group"` принадлежит набору своей
+	* группы, и `aria-posinset` отсчитывается от неё. Опции вне групп вместе с
+	* кнопкой «Add …» образуют набор уровня listbox'а.
+	*/
+	const optionSets = computed(() => {
+		const sizes = /* @__PURE__ */ new Map();
+		const positions = /* @__PURE__ */ new Map();
+		const ROOT = "__root__";
+		let rootCount = options.canAddCustom.value ? 1 : 0;
+		options.panelItems.value.forEach((item, index) => {
+			if (item.kind === "group") return;
+			const setKey = item.groupKey ?? ROOT;
+			const next = (sizes.get(setKey) ?? (setKey === ROOT ? rootCount : 0)) + 1;
+			sizes.set(setKey, next);
+			positions.set(index, {
+				setKey,
+				posInSet: next
+			});
+			if (setKey === ROOT) rootCount = next;
+		});
+		if (options.canAddCustom.value && !sizes.has(ROOT)) sizes.set(ROOT, rootCount);
+		return {
+			sizes,
+			positions,
+			ROOT
+		};
+	});
+	/** ARIA набора: объявляем только при виртуализации — иначе набор виден по DOM. */
+	function optionSetProps(index) {
+		if (!virtualEnabled.value) return void 0;
+		const position = optionSets.value.positions.get(index);
+		if (!position) return void 0;
+		return {
+			"aria-setsize": optionSets.value.sizes.get(position.setKey) ?? 1,
+			"aria-posinset": position.posInSet
+		};
+	}
+	/** ARIA для кнопки «Add …»: она первая в наборе уровня listbox'а. */
+	const addOptionSetProps = computed(() => {
+		if (!virtualEnabled.value) return void 0;
+		return {
+			"aria-setsize": optionSets.value.sizes.get(optionSets.value.ROOT) ?? 1,
+			"aria-posinset": 1
+		};
+	});
+	/** Метка группы по её ключу: окно может начаться ниже заголовка. */
+	const groupLabels = computed(() => {
+		const labels = /* @__PURE__ */ new Map();
+		for (const item of options.panelItems.value) if (item.kind === "group") labels.set(item.key, item.label);
+		return labels;
+	});
+	return {
+		virtualEnabled,
+		addOffset,
+		scrollToIndex: (index) => virtualizer.scrollToIndex(index),
+		measure: (index, el) => virtualizer.measure(index, el),
+		optionSetProps,
+		addOptionSetProps,
+		showAddOption: computed(() => {
+			if (!options.canAddCustom.value) return false;
+			return !virtualEnabled.value || virtualizer.range.value.start === 0;
+		}),
+		renderedPanelRows: computed(() => {
+			if (!virtualEnabled.value) return options.panelRows.value;
+			const items = options.panelItems.value;
+			const { start, end } = virtualizer.range.value;
+			const from = Math.max(0, start - addOffset.value);
+			const to = Math.min(items.length, Math.max(0, end - addOffset.value));
+			const rows = [];
+			let currentGroup;
+			for (let index = from; index < to; index++) {
+				const item = items[index];
+				if (item.kind === "group") {
+					currentGroup = {
+						kind: "group",
+						label: item.label,
+						key: item.key,
+						options: [],
+						labelVisible: true,
+						labelIndex: index
+					};
+					rows.push(currentGroup);
+					continue;
+				}
+				const row = {
+					option: item.option,
+					key: item.key,
+					index
+				};
+				if (item.groupKey) {
+					if (!currentGroup || currentGroup.key !== item.groupKey) {
+						currentGroup = {
+							kind: "group",
+							label: groupLabels.value.get(item.groupKey) ?? "",
+							key: item.groupKey,
+							options: [],
+							labelVisible: false
+						};
+						rows.push(currentGroup);
+					}
+					currentGroup.options.push(row);
+					continue;
+				}
+				currentGroup = void 0;
+				rows.push({
+					kind: "option",
+					...row
+				});
+			}
+			return rows;
+		}),
+		listboxStyle: computed(() => {
+			const base = { maxHeight: `${options.maxHeight()}px` };
+			if (!virtualEnabled.value) return base;
+			return {
+				...base,
+				...virtualizer.spacerStyle.value
+			};
+		})
+	};
+}
+//#endregion
+//#region src/components/GrSelect/selectValue.ts
+/**
+* Сравнение значений `GrSelect` — чистая арифметика без Vue и без пропов.
+*
+* Вынесено отдельным модулем, потому что от состояния компонента здесь не
+* зависит ничего: только само значение и имя поля-идентификатора. Тестируется
+* напрямую, без монтирования.
+*/
+/**
+* Ключ значения: для объектов — поле `valueKey`, иначе само значение строкой.
+* Через него идут все сравнения — `===` для объектов означал бы сравнение
+* ссылок, а модель обычно приходит снаружи отдельной копией.
+*/
+function selectValueKey(value, valueKey) {
+	if (value !== null && typeof value === "object") {
+		const own = valueKey ? value[valueKey] : void 0;
+		return String(own ?? JSON.stringify(value));
+	}
+	return String(value);
+}
+/**
+* `0` — валидное значение, поэтому «пусто» проверяется явно, а не через falsy:
+* прежняя проверка `if (!value)` теряла ноль вместе с пустой строкой.
+*/
+function isEmptySelectValue(value) {
+	return value === void 0 || value === null || value === "";
+}
+/** Модель к массиву: скаляр становится набором из одного, пустое — пустым. */
+function toSelectArray(value) {
+	if (Array.isArray(value)) return value;
+	if (isEmptySelectValue(value)) return [];
+	return [value];
+}
+//#endregion
+//#region src/components/GrSelect/composables/useSelectValues.ts
+function useSelectValues(options) {
+	const optionsResolved = computed(() => options.options() ?? []);
+	function isOptionGroup(item) {
+		return Array.isArray(item.options);
+	}
+	const flatOptions = computed(() => {
+		const result = [];
+		for (const item of optionsResolved.value) if (isOptionGroup(item)) result.push(...item.options);
+		else result.push(item);
+		return result;
+	});
+	function keyOf(value) {
+		return selectValueKey(value, options.valueKey());
+	}
+	function sameValue(a, b) {
+		return keyOf(a) === keyOf(b);
+	}
+	const modelSingle = computed(() => {
+		const model = options.modelValue();
+		const raw = Array.isArray(model) ? model[0] : model;
+		return isEmptySelectValue(raw) ? "" : raw;
+	});
+	const modelMultiple = computed(() => toSelectArray(options.modelValue()));
+	const selectedValues = computed(() => {
+		if (options.multiple()) return modelMultiple.value;
+		return isEmptySelectValue(modelSingle.value) ? [] : [modelSingle.value];
+	});
+	const hasSelection = computed(() => selectedValues.value.length > 0);
+	/**
+	* Нативный `<select>` хранит в `option.value` строку, поэтому значение,
+	* вернувшееся из DOM, нужно восстановить в исходный тип. Карта строится по
+	* опциям: ключ значения — ключ карты, само значение — результат.
+	*/
+	const valueByDomKey = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const option of flatOptions.value) map.set(keyOf(option.value), option.value);
+		return map;
+	});
+	function fromDomValue(raw) {
+		const known = valueByDomKey.value.get(raw);
+		if (known !== void 0) return known;
+		return raw;
+	}
+	const selectedOptions = computed(() => resolveSelectedOptions(selectedValues.value, flatOptions.value, keyOf));
+	const hasModelInOptions = computed(() => {
+		if (options.multiple()) return false;
+		return flatOptions.value.some((o) => sameValue(o.value, modelSingle.value));
+	});
+	const displayLabel = computed(() => {
+		if (options.multiple()) {
+			if (!selectedValues.value.length) return "";
+			return selectedValues.value.map((v) => flatOptions.value.find((o) => sameValue(o.value, v))?.label ?? keyOf(v)).join(", ");
+		}
+		return flatOptions.value.find((o) => sameValue(o.value, modelSingle.value))?.label ?? String(modelSingle.value);
+	});
+	return {
+		optionsResolved,
+		flatOptions,
+		isOptionGroup,
+		keyOf,
+		sameValue,
+		modelSingle,
+		modelMultiple,
+		selectedValues,
+		hasSelection,
+		fromDomValue,
+		selectedOptions,
+		hasModelInOptions,
+		displayLabel,
+		displayText: computed(() => {
+			if (hasSelection.value) return displayLabel.value;
+			return options.placeholder() ?? "";
+		})
+	};
+}
+//#endregion
+//#region src/components/GrSelect/GrSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"name",
+	"multiple",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-readonly"
+];
+var _hoisted_2 = ["selected"];
+var _hoisted_3 = ["value", "selected"];
+var _hoisted_4 = ["label"];
+var _hoisted_5 = [
+	"value",
+	"selected",
+	"disabled"
+];
+var _hoisted_6 = [
+	"value",
+	"selected",
+	"disabled"
+];
+var _hoisted_7 = {
+	key: 1,
+	"data-testid": "gr-select-chevron",
+	class: "absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
+};
+var _hoisted_8 = ["name", "value"];
+var _hoisted_9 = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-readonly",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-expanded",
+	"aria-busy"
+];
+var _hoisted_10 = { class: "min-w-0 flex-1" };
+var _hoisted_11 = {
+	key: 2,
+	class: "shrink-0 h-4 w-6",
+	"aria-hidden": "true"
+};
+var _hoisted_12 = { class: "inline-flex max-w-full items-center gap-1 align-middle" };
+var _hoisted_13 = { class: "truncate" };
+var _hoisted_14 = ["aria-label", "onClick"];
+var _hoisted_15 = ["disabled", "aria-label"];
+var _hoisted_16 = {
+	key: 0,
+	class: "p-2 border-b border-[var(--gr-brd)]"
+};
+var _hoisted_17 = {
+	key: 1,
+	"data-gr-select-loading": "",
+	class: "flex items-center justify-center gap-2 px-3 py-4 text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]",
+	role: "status",
+	"aria-live": "polite"
+};
+var _hoisted_18 = [
+	"id",
+	"data-gr-virtual",
+	"aria-multiselectable"
+];
+var _hoisted_19 = ["id"];
+var _hoisted_20 = ["aria-labelledby", "aria-label"];
+var _hoisted_21 = ["id"];
+var _hoisted_22 = [
+	"id",
+	"disabled",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMousemove"
+];
+var _hoisted_23 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_24 = { class: "truncate" };
+var _hoisted_25 = [
+	"id",
+	"disabled",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMousemove"
+];
+var _hoisted_26 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_27 = { class: "truncate" };
+var _hoisted_28 = {
+	key: 3,
+	"data-gr-select-empty": "",
+	class: "px-3 py-4 text-center text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]",
+	role: "status",
+	"aria-live": "polite"
+};
+//#endregion
+//#region src/components/GrSelect/GrSelect.vue
+var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "GrSelect",
+	props: {
+		modelValue: {},
+		options: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		state: { default: "default" },
+		valueKey: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		view: { default: "default" },
+		size: { default: void 0 },
+		placeholder: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		tagTone: { default: "neutral" },
+		tagDark: {
+			type: Boolean,
+			default: false
+		},
+		tagSize: { default: "sm" },
+		tagRadius: { default: "round" },
+		optionsView: { default: "native" },
+		allowCustomValue: {
+			type: Boolean,
+			default: false
+		},
+		filterable: {
+			type: Boolean,
+			default: false
+		},
+		filterPlaceholder: { default: void 0 },
+		search: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: { default: void 0 },
+		noResultsText: { default: void 0 },
+		tags: {
+			type: Boolean,
+			default: false
+		},
+		customValuePlaceholder: { default: void 0 },
+		dropdownMaxHeight: { default: 280 },
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		maxTagCount: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		clearLabel: { default: void 0 },
+		variant: { default: void 0 },
+		underline: { default: void 0 },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		name: { default: void 0 },
+		prefixMinWidth: { default: void 0 },
+		prefixMaxWidth: { default: void 0 },
+		suffixMinWidth: { default: void 0 },
+		suffixMaxWidth: { default: void 0 },
+		prefixFixed: {
+			type: Boolean,
+			default: false
+		},
+		suffixFixed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear",
+		"update:open",
+		"visibleChange",
+		"update:search",
+		"focus",
+		"blur",
+		"search"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrSelect" });
+		const resolvedVariant = useGrComponentProp("GrSelect", "variant", () => props.variant, "primary");
+		const resolvedUnderline = useGrComponentProp("GrSelect", "underline", () => props.underline, "auto");
+		const resolvedClearable = useGrComponentProp("GrSelect", "clearable", () => props.clearable, false);
+		const { t } = useGranularityTranslations();
+		const resolvedCustomValuePlaceholder = computed(() => {
+			return props.customValuePlaceholder ?? t("gr.select.customValuePlaceholder", "Add value…");
+		});
+		const resolvedClearLabel = computed(() => props.clearLabel ?? t("gr.common.clear", "Clear"));
+		const resolvedFilterPlaceholder = computed(() => props.filterPlaceholder ?? t("gr.select.searchPlaceholder", "Search…"));
+		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.select.loading", "Loading…"));
+		const resolvedNoResultsText = computed(() => props.noResultsText ?? t("gr.select.noResults", "No results"));
+		const resolvedSearchPlaceholder = computed(() => props.allowCustomValue ? resolvedCustomValuePlaceholder.value : resolvedFilterPlaceholder.value);
+		const baseClassName = computed(() => props.view === "link" ? linkBaseClass : defaultBaseClass);
+		const rootClass = computed(() => props.view === "link" ? "relative inline-block align-baseline" : "relative w-full");
+		const emit = __emit;
+		const field = useGrFormFieldContext();
+		const resolvedId = computed(() => field?.id.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		const nativeSelectEl = ref(null);
+		const triggerButtonEl = ref(null);
+		function focus() {
+			(nativeSelectEl.value ?? triggerButtonEl.value)?.focus();
+		}
+		function blur() {
+			(nativeSelectEl.value ?? triggerButtonEl.value)?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		const describedBy = computed(() => field?.describedById.value);
+		const { optionsResolved, flatOptions, isOptionGroup, keyOf, sameValue, modelSingle, selectedValues, hasSelection, fromDomValue, selectedOptions, hasModelInOptions, displayLabel, displayText } = useSelectValues({
+			modelValue: () => props.modelValue,
+			options: () => props.options,
+			multiple: () => props.multiple,
+			valueKey: () => props.valueKey,
+			placeholder: () => props.placeholder
+		});
+		const ADDON_MIN_WIDTH_BY_SIZE = {
+			xs: "2rem",
+			sm: "2.25rem",
+			md: "2.5rem",
+			lg: "3rem"
+		};
+		/**
+		* Триггер панельного режима — флекс-строка, поэтому аддоны встают её соседями,
+		* а не поверх поля: резервировать место паддингом не нужно.
+		*/
+		const { hasPrefix, hasSuffix, prefixEl, suffixEl, prefixLen, prefixStyle, suffixStyle } = useControlAddons(() => props, {
+			defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],
+			paddingX: () => "0px"
+		});
+		const effectiveOptionsView = computed(() => {
+			if (props.view === "link" && props.multiple && props.optionsView === "native") return "panel";
+			if ((props.filterable || props.loading || props.tags) && props.optionsView === "native") return "panel";
+			return props.optionsView;
+		});
+		const showSearchInput = computed(() => (props.filterable || props.allowCustomValue) && effectiveOptionsView.value === "panel");
+		const showTags = computed(() => props.multiple && props.tags && effectiveOptionsView.value === "panel");
+		const nativeCustomOptionVisible = computed(() => {
+			if (!props.allowCustomValue) return false;
+			if (effectiveOptionsView.value !== "native") return false;
+			if (props.multiple) return false;
+			if (!props.options) return false;
+			if (modelSingle.value === "") return false;
+			return !hasModelInOptions.value;
+		});
+		/**
+		* Текст поиска: контролируемый `search` сильнее внутреннего состояния. Каждое
+		* изменение уходит наружу — без этого `loading` не с чем было связать.
+		*/
+		const internalSearch = ref("");
+		const customValue = computed({
+			get: () => props.search ?? internalSearch.value,
+			set: (next) => {
+				internalSearch.value = next;
+				emit("update:search", next);
+				emit("search", next);
+			}
+		});
+		const { open, setOpen } = useControlledOpen(() => props.open, (next) => emit("update:open", next));
+		const rootEl = ref(null);
+		const panelEl = ref(null);
+		const listboxEl = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event),
+			containers: () => [panelEl.value]
+		});
+		const customInputRef = ref(null);
+		const clickOutsideExclude = [() => panelEl.value];
+		const { floatingStyle, update: updateFloatingPosition } = useFloating(rootEl, panelEl, open, {
+			placement: "bottom-start",
+			matchWidth: () => props.view === "link" ? "min" : true,
+			zIndexVar: "--gr-z-dropdown"
+		});
+		function closeDropdown() {
+			setOpen(false);
+		}
+		const locked = computed(() => isDisabled.value || isReadonly.value);
+		function toggleDropdown() {
+			if (locked.value) return;
+			setOpen(!open.value);
+		}
+		useDismissible(open, closeDropdown);
+		watch(() => props.view, () => {
+			if (open.value) updateFloatingPosition();
+		});
+		const panelClasses = computed(() => {
+			return grSelectPanelClasses;
+		});
+		const { panelItems, panelRows, canAddCustom } = useSelectPanelItems({
+			optionsResolved,
+			flatOptions,
+			isOptionGroup,
+			modelSingle,
+			selectedValues,
+			hasModelInOptions,
+			sameValue,
+			query: () => customValue.value,
+			allowCustomValue: () => props.allowCustomValue,
+			filterable: () => props.filterable,
+			multiple: () => props.multiple,
+			isPanelView: () => effectiveOptionsView.value === "panel"
+		});
+		function emitValue(value) {
+			if (isReadonly.value) return;
+			emit("update:modelValue", value);
+			emit("change", value);
+		}
+		function isSelected(value) {
+			return selectedValues.value.some((selected) => sameValue(selected, value));
+		}
+		function isOptionDisabled(value) {
+			return flatOptions.value.find((o) => sameValue(o.value, value))?.disabled === true;
+		}
+		function selectValue(value) {
+			emitValue(value);
+			if (props.closeOnSelect) closeDropdown();
+		}
+		function toggleValue(value) {
+			if (isOptionDisabled(value)) return;
+			if (!props.multiple) {
+				selectValue(value);
+				return;
+			}
+			const next = selectedValues.value.slice();
+			const idx = next.findIndex((selected) => sameValue(selected, value));
+			if (idx >= 0) next.splice(idx, 1);
+			else next.push(value);
+			emitValue(next);
+			if (props.closeOnSelect) closeDropdown();
+		}
+		function addCustom() {
+			const v = customValue.value.trim();
+			if (!v) return;
+			toggleValue(v);
+		}
+		function removeValue(value) {
+			if (locked.value) return;
+			if (!props.multiple) return;
+			emitValue(selectedValues.value.filter((v) => !sameValue(v, value)));
+		}
+		const visibleTagOptions = computed(() => {
+			const limit = props.maxTagCount;
+			if (limit === void 0 || limit < 0) return selectedOptions.value;
+			return selectedOptions.value.slice(0, limit);
+		});
+		const hiddenTagCount = computed(() => selectedOptions.value.length - visibleTagOptions.value.length);
+		function tagRemoveLabel(option) {
+			return t("gr.select.removeTag", "Remove {label}", { label: option.label });
+		}
+		const listboxId = useId();
+		/**
+		* Id опции строится от позиции в списке: значение с пробелом дало бы невалидный
+		* `id`, а `aria-activedescendant` — два токена вместо одной ссылки.
+		*/
+		function optionDomId(index) {
+			return `${listboxId}-opt-${index}`;
+		}
+		/** Заголовок группы читается вместе с опцией — через `aria-describedby`. */
+		function groupLabelId(groupKey) {
+			return `${listboxId}-${groupKey}`;
+		}
+		const { virtualEnabled, addOffset, scrollToIndex: scrollVirtualToIndex, measure: measureVirtualRow, optionSetProps, addOptionSetProps, showAddOption, renderedPanelRows, listboxStyle } = useSelectVirtualization({
+			panelItems,
+			panelRows,
+			canAddCustom,
+			listboxEl,
+			enabled: () => props.virtual && effectiveOptionsView.value === "panel",
+			maxHeight: () => props.dropdownMaxHeight
+		});
+		/** При `loading` списка в DOM нет — ссылаться на него нельзя. */
+		const listboxIdIfRendered = computed(() => open.value && !props.loading ? listboxId : void 0);
+		function openDropdown() {
+			if (locked.value || open.value) return;
+			setOpen(true);
+		}
+		const { activeIndex, activeItem, activeValue, addOptionDomId, triggerActiveDescendant, searchActiveDescendant, onOptionHover, onComboKeydown, initActiveIndex, resetActive } = useSelectNavigation({
+			panelItems,
+			flatOptions,
+			canAddCustom,
+			sameValue,
+			isSelected,
+			open,
+			locked,
+			showSearchInput,
+			virtualEnabled,
+			addOffset,
+			listboxId,
+			optionDomId,
+			scrollVirtualToIndex,
+			openDropdown,
+			closeDropdown,
+			addCustom,
+			toggleValue
+		});
+		watch(open, (isOpen) => emit("visibleChange", isOpen));
+		watch(open, async (isOpen, wasOpen) => {
+			if (!isOpen) {
+				internalSearch.value = "";
+				resetActive();
+				if (wasOpen) {
+					const active = document.activeElement;
+					if (active instanceof HTMLElement && panelEl.value?.contains(active)) focus();
+				}
+				return;
+			}
+			initActiveIndex();
+			if (showSearchInput.value) {
+				await nextTick();
+				customInputRef.value?.focus();
+			}
+		}, { immediate: true });
+		const showNativeChevron = computed(() => {
+			return effectiveOptionsView.value === "native" && props.view !== "link" && !props.multiple;
+		});
+		const nativeClearOptionVisible = computed(() => {
+			if (!resolvedClearable.value) return false;
+			if (effectiveOptionsView.value !== "native") return false;
+			if (props.multiple) return false;
+			if (!props.options) return true;
+			return !flatOptions.value.some((o) => isEmptySelectValue(o.value));
+		});
+		const panelClearVisible = computed(() => {
+			if (!resolvedClearable.value) return false;
+			if (effectiveOptionsView.value !== "panel") return false;
+			if (props.view === "link") return false;
+			return hasSelection.value;
+		});
+		const nativeClassName = computed(() => {
+			return grSelectNativeClass({
+				view: props.view,
+				size: resolvedSize.value,
+				disabled: isDisabled.value,
+				variant: resolvedVariant.value,
+				underline: resolvedUnderline.value,
+				showNativeChevron: showNativeChevron.value,
+				state: props.state,
+				invalid: isInvalid.value
+			});
+		});
+		/**
+		* `view="link"` в native-режиме: ширина обёртки должна определяться выбранной опцией,
+		* а не самой длинной (как делает браузер по умолчанию). Поэтому рендерим прозрачный
+		* `<select>`-overlay поверх видимого `<span>` с меткой — overlay принимает клики/клавиатуру,
+		* span задаёт ширину компонента в закрытом состоянии.
+		*/
+		const isLinkNative = computed(() => props.view === "link" && effectiveOptionsView.value === "native");
+		const linkNativeLabelClassName = computed(() => grSelectLinkNativeLabelClass({
+			size: resolvedSize.value,
+			variant: resolvedVariant.value,
+			underline: resolvedUnderline.value,
+			disabled: isDisabled.value
+		}));
+		const linkNativeDisplayText = computed(() => {
+			return displayText.value || props.placeholder || "\xA0";
+		});
+		const triggerClassName = computed(() => {
+			return grSelectTriggerClass({
+				view: props.view,
+				optionsView: effectiveOptionsView.value,
+				size: resolvedSize.value,
+				disabled: isDisabled.value,
+				variant: resolvedVariant.value,
+				underline: resolvedUnderline.value,
+				state: props.state,
+				invalid: isInvalid.value
+			});
+		});
+		function onChange(e) {
+			const el = e.target;
+			if (isReadonly.value) {
+				if (props.multiple) for (const option of el.options) option.selected = isSelected(fromDomValue(option.value));
+				else el.value = modelSingle.value === "" ? "" : keyOf(modelSingle.value);
+				return;
+			}
+			if (props.multiple) {
+				emit("update:modelValue", Array.from(el.selectedOptions, (o) => fromDomValue(o.value)));
+				return;
+			}
+			emit("update:modelValue", el.value === "" ? "" : fromDomValue(el.value));
+		}
+		function clearSelection() {
+			if (locked.value) return;
+			emitValue(props.multiple ? [] : "");
+			emit("clear");
+		}
+		const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget();
+		const themeAttrs = useGrThemeAttrs();
+		return (_ctx, _cache) => {
+			return effectiveOptionsView.value === "native" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"data-gr-select": "",
+				class: normalizeClass(rootClass.value),
+				onFocusin: _cache[0] || (_cache[0] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[1] || (_cache[1] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [
+				createElementVNode("select", {
+					id: resolvedId.value,
+					ref_key: "nativeSelectEl",
+					ref: nativeSelectEl,
+					"data-gr-select-native": "",
+					name: __props.name,
+					multiple: __props.multiple,
+					disabled: unref(isDisabled),
+					"aria-label": __props.ariaLabel,
+					"aria-invalid": unref(isInvalid) ? "true" : void 0,
+					"aria-describedby": describedBy.value,
+					"aria-required": unref(isRequired) ? "true" : void 0,
+					"aria-readonly": unref(isReadonly) ? "true" : void 0,
+					class: normalizeClass(isLinkNative.value ? unref(grSelectLinkNativeOverlayClass) : [baseClassName.value, nativeClassName.value]),
+					onChange
+				}, [nativeClearOptionVisible.value ? (openBlock(), createElementBlock("option", {
+					key: 0,
+					value: "",
+					selected: !__props.multiple && unref(modelSingle) === ""
+				}, toDisplayString(__props.placeholder || unref(t)("gr.select.clearOption", "None")), 9, _hoisted_2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", {}, () => [nativeCustomOptionVisible.value ? (openBlock(), createElementBlock("option", {
+					key: 0,
+					value: unref(keyOf)(unref(modelSingle)),
+					selected: !__props.multiple
+				}, toDisplayString(unref(modelSingle)), 9, _hoisted_3)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(optionsResolved), (item, index) => {
+					return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isOptionGroup)(item) ? (openBlock(), createElementBlock("optgroup", {
+						key: 0,
+						label: item.label
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.options, (opt) => {
+						return openBlock(), createElementBlock("option", {
+							key: `${index}:${unref(keyOf)(opt.value)}`,
+							value: unref(keyOf)(opt.value),
+							selected: isSelected(opt.value),
+							disabled: opt.disabled
+						}, toDisplayString(opt.label), 9, _hoisted_5);
+					}), 128))], 8, _hoisted_4)) : (openBlock(), createElementBlock("option", {
+						key: 1,
+						value: unref(keyOf)(item.value),
+						selected: isSelected(item.value),
+						disabled: item.disabled
+					}, toDisplayString(item.label), 9, _hoisted_6))], 64);
+				}), 128))], true)], 42, _hoisted_1),
+				isLinkNative.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-gr-select-link-label": "",
+					"aria-hidden": "true",
+					class: normalizeClass(linkNativeLabelClassName.value)
+				}, toDisplayString(linkNativeDisplayText.value), 3)) : createCommentVNode("", true),
+				showNativeChevron.value ? (openBlock(), createElementBlock("span", _hoisted_7, [..._cache[8] || (_cache[8] = [createElementVNode("span", {
+					class: "i-lucide-chevron-down block h-4 w-4",
+					"aria-hidden": "true"
+				}, null, -1)])])) : createCommentVNode("", true)
+			], 34)) : withDirectives((openBlock(), createElementBlock("div", {
+				key: 1,
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-select": "",
+				class: normalizeClass(rootClass.value)
+			}, [
+				__props.name ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(selectedValues), (value) => {
+					return openBlock(), createElementBlock("input", {
+						key: `hidden-${unref(keyOf)(value)}`,
+						type: "hidden",
+						name: __props.name,
+						value: unref(keyOf)(value)
+					}, null, 8, _hoisted_8);
+				}), 128)) : createCommentVNode("", true),
+				createElementVNode("button", {
+					id: resolvedId.value,
+					ref_key: "triggerButtonEl",
+					ref: triggerButtonEl,
+					"data-testid": "gr-select-trigger",
+					"data-gr-select-trigger": "",
+					type: "button",
+					disabled: unref(isDisabled),
+					"aria-label": __props.ariaLabel,
+					"aria-invalid": unref(isInvalid) ? "true" : void 0,
+					"aria-describedby": describedBy.value,
+					"aria-required": unref(isRequired) ? "true" : void 0,
+					"aria-readonly": unref(isReadonly) ? "true" : void 0,
+					role: "combobox",
+					"aria-haspopup": "listbox",
+					"aria-controls": listboxIdIfRendered.value,
+					"aria-activedescendant": unref(triggerActiveDescendant),
+					"aria-expanded": unref(open) ? "true" : "false",
+					"aria-busy": __props.loading ? "true" : void 0,
+					class: normalizeClass([baseClassName.value, triggerClassName.value]),
+					onClick: toggleDropdown,
+					onKeydown: _cache[2] || (_cache[2] = (...args) => unref(onComboKeydown) && unref(onComboKeydown)(...args))
+				}, [
+					unref(hasPrefix) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						ref_key: "prefixEl",
+						ref: prefixEl,
+						"data-gr-select-prefix": "",
+						class: "shrink-0 inline-flex items-center justify-center text-[var(--gr-muted-fg)] select-none truncate",
+						style: normalizeStyle(unref(prefixStyle)),
+						"aria-hidden": "true"
+					}, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)], 4)) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_10, [renderSlot(_ctx.$slots, "value", {
+						selectedOptions: unref(selectedOptions),
+						selectedValues: unref(selectedValues),
+						displayLabel: unref(displayLabel),
+						placeholder: __props.placeholder,
+						hasSelection: unref(hasSelection)
+					}, () => [createElementVNode("span", { class: normalizeClass(["block truncate", !unref(hasSelection) ? "text-[var(--gr-muted-fg)]" : ""]) }, toDisplayString(showTags.value && unref(hasSelection) ? "" : unref(displayText)), 3)], true)]),
+					unref(hasSuffix) ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						ref_key: "suffixEl",
+						ref: suffixEl,
+						"data-gr-select-suffix": "",
+						class: "shrink-0 inline-flex items-center justify-center text-[var(--gr-muted-fg)] select-none truncate",
+						style: normalizeStyle(unref(suffixStyle)),
+						"aria-hidden": "true"
+					}, [renderSlot(_ctx.$slots, "suffix", {}, void 0, true)], 4)) : createCommentVNode("", true),
+					panelClearVisible.value ? (openBlock(), createElementBlock("span", _hoisted_11)) : createCommentVNode("", true),
+					_cache[9] || (_cache[9] = createElementVNode("span", {
+						"data-testid": "gr-select-chevron",
+						class: "shrink-0 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
+					}, [createElementVNode("span", {
+						class: "i-lucide-chevron-down block h-4 w-4",
+						"aria-hidden": "true"
+					})], -1))
+				], 42, _hoisted_9),
+				showTags.value && unref(hasSelection) ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					"data-gr-select-tags": "",
+					class: "pointer-events-none absolute inset-y-0 left-0 flex max-w-[calc(100%-4rem)] flex-wrap items-center gap-1 px-3 py-1.5",
+					style: normalizeStyle({ left: unref(hasPrefix) ? unref(prefixLen) : void 0 })
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleTagOptions.value, (opt) => {
+					return openBlock(), createBlock(GrBadge_default, {
+						key: unref(keyOf)(opt.value),
+						"data-gr-select-tag": "",
+						class: "pointer-events-auto",
+						tone: __props.tagTone,
+						dark: __props.tagDark,
+						size: __props.tagSize,
+						radius: __props.tagRadius
+					}, {
+						default: withCtx(() => [createElementVNode("span", _hoisted_12, [createElementVNode("span", _hoisted_13, toDisplayString(opt.label), 1), !unref(isDisabled) && !unref(isReadonly) ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							"data-gr-select-tag-remove": "",
+							type: "button",
+							"aria-label": tagRemoveLabel(opt),
+							class: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[var(--gr-radius-xs)] text-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]",
+							onClick: withModifiers(($event) => removeValue(opt.value), ["stop"])
+						}, [..._cache[10] || (_cache[10] = [createElementVNode("span", {
+							class: "i-lucide-x block h-3 w-3",
+							"aria-hidden": "true"
+						}, null, -1)])], 8, _hoisted_14)) : createCommentVNode("", true)])]),
+						_: 2
+					}, 1032, [
+						"tone",
+						"dark",
+						"size",
+						"radius"
+					]);
+				}), 128)), hiddenTagCount.value > 0 ? (openBlock(), createBlock(GrBadge_default, {
+					key: 0,
+					"data-gr-select-tag-rest": "",
+					class: "pointer-events-auto",
+					tone: __props.tagTone,
+					dark: __props.tagDark,
+					size: __props.tagSize,
+					radius: __props.tagRadius
+				}, {
+					default: withCtx(() => [createTextVNode(" +" + toDisplayString(hiddenTagCount.value), 1)]),
+					_: 1
+				}, 8, [
+					"tone",
+					"dark",
+					"size",
+					"radius"
+				])) : createCommentVNode("", true)], 4)) : createCommentVNode("", true),
+				panelClearVisible.value ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					"data-testid": "gr-select-clear",
+					"data-gr-select-clear": "",
+					type: "button",
+					class: "absolute top-1/2 right-8 h-6 w-6 -translate-y-1/2 inline-flex items-center justify-center rounded-[var(--gr-radius-md)] text-[var(--gr-muted-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]",
+					disabled: unref(isDisabled),
+					"aria-label": resolvedClearLabel.value,
+					onClick: withModifiers(clearSelection, ["stop"])
+				}, [..._cache[11] || (_cache[11] = [createElementVNode("span", {
+					class: "i-lucide-x inline-block h-4 w-4",
+					"aria-hidden": "true"
+				}, null, -1)])], 8, _hoisted_15)) : createCommentVNode("", true),
+				(openBlock(), createBlock(Teleport, {
+					to: unref(portalTarget),
+					disabled: !unref(teleportEnabled)
+				}, [createVNode(Transition, {
+					"enter-active-class": "transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]",
+					"enter-from-class": "transform opacity-0 scale-95",
+					"enter-to-class": "transform opacity-100 scale-100",
+					"leave-active-class": "transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]",
+					"leave-from-class": "transform opacity-100 scale-100",
+					"leave-to-class": "transform opacity-0 scale-95"
+				}, {
+					default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
+						ref_key: "panelEl",
+						ref: panelEl,
+						"data-testid": "gr-select-panel"
+					}, unref(themeAttrs), {
+						"data-gr-select-panel": "",
+						"data-gr-overlay-root": "",
+						style: unref(floatingStyle)
+					}), [createElementVNode("div", { class: normalizeClass(panelClasses.value) }, [
+						showSearchInput.value ? (openBlock(), createElementBlock("div", _hoisted_16, [createVNode(GrInput_default, {
+							ref_key: "customInputRef",
+							ref: customInputRef,
+							modelValue: customValue.value,
+							"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => customValue.value = $event),
+							"data-testid": "gr-select-custom-input",
+							"data-gr-select-search": "",
+							type: "text",
+							role: "combobox",
+							"aria-haspopup": "listbox",
+							"aria-expanded": unref(open) ? "true" : "false",
+							"aria-controls": listboxIdIfRendered.value,
+							"aria-activedescendant": unref(searchActiveDescendant),
+							placeholder: resolvedSearchPlaceholder.value,
+							loading: __props.loading,
+							size: "sm",
+							onKeydown: unref(onComboKeydown)
+						}, null, 8, [
+							"modelValue",
+							"aria-expanded",
+							"aria-controls",
+							"aria-activedescendant",
+							"placeholder",
+							"loading",
+							"onKeydown"
+						])])) : createCommentVNode("", true),
+						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_17, [renderSlot(_ctx.$slots, "loading", {}, () => [_cache[12] || (_cache[12] = createElementVNode("span", {
+							class: "i-lucide-loader-circle block h-4 w-4 animate-spin",
+							"aria-hidden": "true"
+						}, null, -1)), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)], true)])) : (openBlock(), createElementBlock("div", {
+							key: 2,
+							id: unref(listboxId),
+							ref_key: "listboxEl",
+							ref: listboxEl,
+							"data-gr-select-listbox": "",
+							"data-gr-virtual": unref(virtualEnabled) ? "" : void 0,
+							class: normalizeClass(["p-1 overflow-auto", unref(virtualEnabled) ? "flex flex-col" : ""]),
+							style: normalizeStyle(unref(listboxStyle)),
+							role: "listbox",
+							"aria-multiselectable": __props.multiple ? "true" : void 0
+						}, [unref(showAddOption) ? (openBlock(), createElementBlock("button", mergeProps({
+							key: 0,
+							id: unref(addOptionDomId),
+							"data-testid": "gr-select-add-option",
+							"data-gr-select-add-option": "",
+							type: "button",
+							role: "option",
+							"aria-selected": "false",
+							tabindex: "-1"
+						}, unref(addOptionSetProps), {
+							class: unref(grSelectOptionClass)({
+								view: __props.view,
+								disabled: false,
+								active: unref(activeItem)?.kind === "add"
+							}),
+							onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
+							onClick: addCustom,
+							onMousemove: _cache[5] || (_cache[5] = ($event) => activeIndex.value = 0)
+						}), toDisplayString(unref(t)("gr.select.addOption", "Add \"{value}\"", { value: customValue.value.trim() })), 17, _hoisted_19)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedPanelRows), (row) => {
+							return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.kind === "group" ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								"data-gr-select-group": "",
+								role: "group",
+								class: normalizeClass(unref(virtualEnabled) ? "flex flex-col" : ""),
+								"aria-labelledby": unref(virtualEnabled) ? void 0 : groupLabelId(row.key),
+								"aria-label": unref(virtualEnabled) ? row.label : void 0
+							}, [row.labelVisible !== false ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								id: groupLabelId(row.key),
+								ref_for: true,
+								ref: (el) => unref(virtualEnabled) && row.labelIndex !== void 0 && unref(measureVirtualRow)(row.labelIndex + unref(addOffset), el),
+								"data-gr-select-group-label": "",
+								role: "presentation",
+								class: normalizeClass(["px-3 pt-2 pb-1 text-[length:var(--gr-text-xs)] font-semibold uppercase tracking-wide text-[var(--gr-muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
+							}, toDisplayString(row.label), 11, _hoisted_21)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(row.options, (child) => {
+								return openBlock(), createElementBlock("button", mergeProps({
+									id: optionDomId(child.index),
+									key: child.key,
+									ref_for: true,
+									ref: (el) => unref(virtualEnabled) && unref(measureVirtualRow)(child.index + unref(addOffset), el),
+									"data-gr-select-option": "",
+									type: "button",
+									role: "option",
+									tabindex: "-1"
+								}, { ref_for: true }, unref(optionSetProps)(child.index), {
+									disabled: child.option.disabled,
+									"aria-selected": isSelected(child.option.value) ? "true" : "false",
+									"aria-disabled": child.option.disabled ? "true" : void 0,
+									class: unref(grSelectOptionClass)({
+										view: __props.view,
+										disabled: !!child.option.disabled,
+										active: unref(activeValue) === child.option.value
+									}),
+									onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
+									onClick: ($event) => toggleValue(child.option.value),
+									onMousemove: ($event) => unref(onOptionHover)(child.index)
+								}), [renderSlot(_ctx.$slots, "option", {
+									option: child.option,
+									selected: isSelected(child.option.value)
+								}, () => [createElementVNode("span", _hoisted_23, [createElementVNode("span", {
+									class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(child.option.value) ? "i-lucide-check text-[var(--gr-primary)]" : ""]),
+									"aria-hidden": "true"
+								}, null, 2), createElementVNode("span", _hoisted_24, toDisplayString(child.option.label), 1)])], true)], 16, _hoisted_22);
+							}), 128))], 10, _hoisted_20)) : (openBlock(), createElementBlock("button", mergeProps({
+								key: 1,
+								id: optionDomId(row.index),
+								ref_for: true,
+								ref: (el) => unref(virtualEnabled) && unref(measureVirtualRow)(row.index + unref(addOffset), el),
+								"data-gr-select-option": "",
+								type: "button",
+								role: "option",
+								tabindex: "-1"
+							}, { ref_for: true }, unref(optionSetProps)(row.index), {
+								disabled: row.option.disabled,
+								"aria-selected": isSelected(row.option.value) ? "true" : "false",
+								"aria-disabled": row.option.disabled ? "true" : void 0,
+								class: unref(grSelectOptionClass)({
+									view: __props.view,
+									disabled: !!row.option.disabled,
+									active: unref(activeValue) === row.option.value
+								}),
+								onMousedown: _cache[7] || (_cache[7] = withModifiers(() => {}, ["prevent"])),
+								onClick: ($event) => toggleValue(row.option.value),
+								onMousemove: ($event) => unref(onOptionHover)(row.index)
+							}), [renderSlot(_ctx.$slots, "option", {
+								option: row.option,
+								selected: isSelected(row.option.value)
+							}, () => [createElementVNode("span", _hoisted_26, [createElementVNode("span", {
+								class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(row.option.value) ? "i-lucide-check text-[var(--gr-primary)]" : ""]),
+								"aria-hidden": "true"
+							}, null, 2), createElementVNode("span", _hoisted_27, toDisplayString(row.option.label), 1)])], true)], 16, _hoisted_25))], 64);
+						}), 128))], 14, _hoisted_18)),
+						!__props.loading && !unref(panelItems).length && !unref(canAddCustom) ? (openBlock(), createElementBlock("div", _hoisted_28, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedNoResultsText.value), 1)], true)])) : createCommentVNode("", true)
+					], 2)], 16), [[vShow, unref(open)]])]),
+					_: 3
+				})], 8, ["to", "disabled"]))
+			], 2)), [[unref(vClickOutside), {
+				handler: closeDropdown,
+				enabled: unref(open),
+				exclude: clickOutsideExclude
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-6566dcb5"]]);
+//#endregion
+export { GrSelect_default as t };