@feugene/granularity 0.10.0 → 0.12.0

package/dist/components/GrSelect/chunks/{GrSelect-DSz7jvUb.js → GrSelect-BVCmitqa.js}

@@ -1,32 +1,48 @@
-import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-D_7jowK2.js";
-import { t as GrInput_default } from "../../GrInput/chunks/GrInput-gwFQ1sk4.js";
+import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-DoV7Ca2m.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-B8dd3JaA.js";
 import { vClickOutside } from "../../../directives/clickOutside.js";
-import { t as useFloating } from "../../../chunks/useFloating-CLtbU7eD.js";
-import { a as grSelectPanelClasses, i as grSelectNativeClass, n as grSelectLinkNativeLabelClass, o as grSelectTriggerClass, r as grSelectLinkNativeOverlayClass, s as linkBaseClass, t as defaultBaseClass } from "../../../chunks/grSelectStyles-AjWWl007.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { t as useFloating } from "../../../chunks/useFloating-DtM6TyE4.js";
+import { t as useEscapeToClose } from "../../../chunks/useEscapeToClose-C2t_S1gh.js";
+import { a as grSelectPanelClasses, i as grSelectNativeClass, n as grSelectLinkNativeLabelClass, o as grSelectTriggerClass, r as grSelectLinkNativeOverlayClass, s as linkBaseClass, t as defaultBaseClass } from "../../../chunks/grSelectStyles-CLK5hRd3.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 //#region src/components/GrSelect/GrSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
-	"value",
+	"id",
 	"multiple",
 	"disabled",
-	"aria-label"
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required"
 ];
-var _hoisted_2 = {
-	key: 0,
-	value: ""
-};
-var _hoisted_3 = ["value"];
+var _hoisted_2 = ["selected"];
+var _hoisted_3 = ["value", "selected"];
 var _hoisted_4 = ["label"];
-var _hoisted_5 = ["value"];
-var _hoisted_6 = ["value"];
+var _hoisted_5 = [
+	"value",
+	"selected",
+	"disabled"
+];
+var _hoisted_6 = [
+	"value",
+	"selected",
+	"disabled"
+];
 var _hoisted_7 = {
 	key: 1,
-	"data-testid": "ds-select-chevron",
-	class: "absolute top-1/2 -translate-y-1/2 right-3 text-[var(--muted-fg)] pointer-events-none"
+	"data-testid": "gr-select-chevron",
+	class: "absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--muted-fg)] pointer-events-none"
 };
 var _hoisted_8 = [
+	"id",
 	"disabled",
 	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-controls",
+	"aria-activedescendant",
 	"aria-expanded"
 ];
 var _hoisted_9 = { class: "min-w-0 flex-1" };
@@ -37,16 +53,23 @@ var _hoisted_10 = {
 };
 var _hoisted_11 = {
 	key: 1,
-	"data-testid": "ds-select-chevron",
-	class: "shrink-0 text-[var(--muted-fg)] pointer-events-none"
+	"data-testid": "gr-select-chevron",
+	class: "shrink-0 flex items-center text-[var(--muted-fg)] pointer-events-none"
 };
 var _hoisted_12 = ["disabled", "aria-label"];
 var _hoisted_13 = {
 	key: 0,
 	class: "p-2 border-b border-[var(--brd)]"
 };
-var _hoisted_14 = ["aria-multiselectable"];
-var _hoisted_15 = ["aria-selected", "onClick"];
+var _hoisted_14 = ["id", "aria-multiselectable"];
+var _hoisted_15 = [
+	"id",
+	"disabled",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMousemove"
+];
 var _hoisted_16 = { class: "flex items-center gap-2 min-w-0" };
 var _hoisted_17 = { class: "truncate" };
 //#endregion
@@ -98,6 +121,11 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		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 isInvalid = computed(() => Boolean(field?.invalid.value));
+		const describedBy = computed(() => field?.describedById.value);
+		const isRequired = computed(() => Boolean(field?.required.value));
 		const optionsResolved = computed(() => props.options ?? []);
 		function isOptionGroup(item) {
 			return Array.isArray(item.options);
@@ -144,9 +172,13 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			if (hasSelection.value) return displayLabel.value;
 			return props.placeholder ?? "";
 		});
+		const effectiveOptionsView = computed(() => {
+			if (props.view === "link" && props.multiple && props.optionsView === "native") return "panel";
+			return props.optionsView;
+		});
 		const nativeCustomOptionVisible = computed(() => {
 			if (!props.allowCustomValue) return false;
-			if (props.optionsView !== "native") return false;
+			if (effectiveOptionsView.value !== "native") return false;
 			if (props.multiple) return false;
 			if (!props.options) return false;
 			if (modelSingle.value === "") return false;
@@ -170,29 +202,10 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			if (props.disabled) return;
 			open.value = !open.value;
 		}
-		function closeOnEscape(e) {
-			if (e.key === "Escape") closeDropdown();
-		}
+		useEscapeToClose(open, closeDropdown);
 		watch(() => props.view, () => {
 			if (open.value) updateFloatingPosition();
 		});
-		watch(open, async (isOpen) => {
-			if (typeof document === "undefined") return;
-			document.removeEventListener("keydown", closeOnEscape);
-			if (isOpen) document.addEventListener("keydown", closeOnEscape);
-			if (!isOpen) {
-				customValue.value = "";
-				return;
-			}
-			if (props.allowCustomValue) {
-				await nextTick();
-				customInputRef.value?.focus();
-			}
-		}, { immediate: true });
-		onUnmounted(() => {
-			if (typeof document === "undefined") return;
-			document.removeEventListener("keydown", closeOnEscape);
-		});
 		const panelClasses = computed(() => {
 			return grSelectPanelClasses;
 		});
@@ -230,21 +243,21 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 					for (const option of matched) items.push({
 						kind: "option",
 						option,
-						key: option.value
+						key: `${index}:${option.value}`
 					});
 					return;
 				}
 				if (matchesQuery(item, q)) items.push({
 					kind: "option",
 					option: item,
-					key: item.value
+					key: `${index}:${item.value}`
 				});
 			});
 			return items;
 		});
 		const canAddCustom = computed(() => {
 			if (!props.allowCustomValue) return false;
-			if (props.optionsView !== "panel") return false;
+			if (effectiveOptionsView.value !== "panel") return false;
 			const v = customValue.value.trim();
 			if (!v) return false;
 			if (props.multiple) {
@@ -260,11 +273,15 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		function isSelected(value) {
 			return selectedValues.value.includes(value);
 		}
+		function isOptionDisabled(value) {
+			return flatOptions.value.find((o) => 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;
@@ -281,19 +298,117 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			if (!v) return;
 			toggleValue(v);
 		}
+		const listboxId = useId();
+		const activeIndex = ref(-1);
+		function optionDomId(value) {
+			return `${listboxId}-opt-${value}`;
+		}
+		const navigableValues = computed(() => panelItems.value.filter((item) => item.kind === "option" && !item.option.disabled).map((item) => item.option.value));
+		const activeValue = computed(() => activeIndex.value >= 0 ? navigableValues.value[activeIndex.value] : void 0);
+		const activeDescendantId = computed(() => open.value && activeValue.value !== void 0 ? optionDomId(activeValue.value) : void 0);
+		function clampActive(index) {
+			const len = navigableValues.value.length;
+			if (len === 0) return -1;
+			return (index % len + len) % len;
+		}
+		async function scrollActiveIntoView() {
+			await nextTick();
+			const value = activeValue.value;
+			if (value === void 0) return;
+			document.getElementById(optionDomId(value))?.scrollIntoView?.({ block: "nearest" });
+		}
+		function setActive(index) {
+			activeIndex.value = clampActive(index);
+			scrollActiveIntoView();
+		}
+		function initActiveIndex() {
+			const selectedIdx = navigableValues.value.findIndex((v) => isSelected(v));
+			activeIndex.value = selectedIdx >= 0 ? selectedIdx : navigableValues.value.length ? 0 : -1;
+		}
+		function openDropdown() {
+			if (props.disabled || open.value) return;
+			open.value = true;
+		}
+		let typeaheadBuffer = "";
+		let typeaheadTimer = null;
+		function typeahead(char) {
+			typeaheadBuffer += char.toLowerCase();
+			if (typeaheadTimer) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeaheadBuffer = "";
+			}, 600);
+			const idx = navigableValues.value.findIndex((v) => {
+				return flatOptions.value.find((o) => o.value === v)?.label.toLowerCase().startsWith(typeaheadBuffer);
+			});
+			if (idx >= 0) setActive(idx);
+		}
+		function onComboKeydown(event) {
+			if (props.disabled) return;
+			if (!open.value) {
+				if ([
+					"ArrowDown",
+					"ArrowUp",
+					"Enter",
+					" "
+				].includes(event.key)) {
+					event.preventDefault();
+					openDropdown();
+				}
+				return;
+			}
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					setActive(activeIndex.value + 1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					setActive(activeIndex.value - 1);
+					break;
+				case "Home":
+					event.preventDefault();
+					setActive(0);
+					break;
+				case "End":
+					event.preventDefault();
+					setActive(navigableValues.value.length - 1);
+					break;
+				case "Enter":
+					event.preventDefault();
+					if (props.allowCustomValue && canAddCustom.value) addCustom();
+					else if (activeValue.value !== void 0) toggleValue(activeValue.value);
+					break;
+				case "Tab":
+					closeDropdown();
+					break;
+				default: if (!props.allowCustomValue && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead(event.key);
+			}
+		}
+		watch(open, async (isOpen) => {
+			if (!isOpen) {
+				customValue.value = "";
+				activeIndex.value = -1;
+				return;
+			}
+			initActiveIndex();
+			if (props.allowCustomValue) {
+				await nextTick();
+				customInputRef.value?.focus();
+			}
+		}, { immediate: true });
 		const showNativeChevron = computed(() => {
-			return props.optionsView === "native" && props.view !== "link" && !props.multiple;
+			return effectiveOptionsView.value === "native" && props.view !== "link" && !props.multiple;
 		});
 		const nativeClearOptionVisible = computed(() => {
 			if (!props.clearable) return false;
-			if (props.optionsView !== "native") return false;
+			if (effectiveOptionsView.value !== "native") return false;
 			if (props.multiple) return false;
 			if (!props.options) return true;
 			return !flatOptions.value.some((o) => o.value === "");
 		});
 		const panelClearVisible = computed(() => {
 			if (!props.clearable) return false;
-			if (props.optionsView !== "panel") return false;
+			if (effectiveOptionsView.value !== "panel") return false;
 			if (props.view === "link") return false;
 			return hasSelection.value;
 		});
@@ -313,7 +428,7 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		* `<select>`-overlay поверх видимого `<span>` с меткой — overlay принимает клики/клавиатуру,
 		* span задаёт ширину компонента в закрытом состоянии.
 		*/
-		const isLinkNative = computed(() => props.view === "link" && props.optionsView === "native");
+		const isLinkNative = computed(() => props.view === "link" && effectiveOptionsView.value === "native");
 		const linkNativeLabelClassName = computed(() => grSelectLinkNativeLabelClass({
 			size: props.size,
 			variant: props.variant,
@@ -326,7 +441,7 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		const triggerClassName = computed(() => {
 			return grSelectTriggerClass({
 				view: props.view,
-				optionsView: props.optionsView,
+				optionsView: effectiveOptionsView.value,
 				size: props.size,
 				disabled: props.disabled,
 				variant: props.variant,
@@ -336,7 +451,8 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 		function onChange(e) {
 			const el = e.target;
 			if (props.multiple) {
-				emit("update:modelValue", Array.from(el.selectedOptions, (o) => o.value));
+				const values = Array.from(el.selectedOptions, (o) => o.value);
+				emit("update:modelValue", values);
 				return;
 			}
 			emit("update:modelValue", el.value);
@@ -346,64 +462,83 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 			emitValue(props.multiple ? [] : "");
 		}
 		return (_ctx, _cache) => {
-			return __props.optionsView === "native" ? (openBlock(), createElementBlock("div", {
+			return effectiveOptionsView.value === "native" ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				"data-ds-select": "",
+				"data-gr-select": "",
 				class: normalizeClass(rootClass.value)
 			}, [
 				createElementVNode("select", {
-					"data-ds-select-native": "",
-					value: __props.multiple ? modelMultiple.value : modelSingle.value,
+					id: resolvedId.value,
+					"data-gr-select-native": "",
 					multiple: __props.multiple,
 					disabled: __props.disabled,
 					"aria-label": __props.ariaLabel,
+					"aria-invalid": isInvalid.value ? "true" : void 0,
+					"aria-describedby": describedBy.value,
+					"aria-required": isRequired.value ? "true" : void 0,
 					class: normalizeClass(isLinkNative.value ? unref(grSelectLinkNativeOverlayClass) : [baseClassName.value, nativeClassName.value]),
 					onChange
-				}, [nativeClearOptionVisible.value ? (openBlock(), createElementBlock("option", _hoisted_2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", {}, () => [nativeCustomOptionVisible.value ? (openBlock(), createElementBlock("option", {
+				}, [nativeClearOptionVisible.value ? (openBlock(), createElementBlock("option", {
+					key: 0,
+					value: "",
+					selected: !__props.multiple && modelSingle.value === ""
+				}, 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: modelSingle.value
+					value: modelSingle.value,
+					selected: !__props.multiple
 				}, toDisplayString(modelSingle.value), 9, _hoisted_3)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(optionsResolved.value, (item, index) => {
 					return openBlock(), createElementBlock(Fragment, { key: index }, [isOptionGroup(item) ? (openBlock(), createElementBlock("optgroup", {
 						key: 0,
 						label: item.label
 					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.options, (opt) => {
 						return openBlock(), createElementBlock("option", {
-							key: opt.value,
-							value: opt.value
+							key: `${index}:${opt.value}`,
+							value: opt.value,
+							selected: __props.multiple ? modelMultiple.value.includes(opt.value) : modelSingle.value === opt.value,
+							disabled: opt.disabled
 						}, toDisplayString(opt.label), 9, _hoisted_5);
 					}), 128))], 8, _hoisted_4)) : (openBlock(), createElementBlock("option", {
 						key: 1,
-						value: item.value
+						value: item.value,
+						selected: __props.multiple ? modelMultiple.value.includes(item.value) : modelSingle.value === item.value,
+						disabled: item.disabled
 					}, toDisplayString(item.label), 9, _hoisted_6))], 64);
 				}), 128))])], 42, _hoisted_1),
 				isLinkNative.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					"data-ds-select-link-label": "",
+					"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[1] || (_cache[1] = [createElementVNode("span", {
-					class: "i-lucide-chevron-down inline-block h-4 w-4",
+					class: "i-lucide-chevron-down block h-4 w-4",
 					"aria-hidden": "true"
 				}, null, -1)])])) : createCommentVNode("", true)
 			], 2)) : withDirectives((openBlock(), createElementBlock("div", {
 				key: 1,
 				ref_key: "rootEl",
 				ref: rootEl,
-				"data-ds-select": "",
+				"data-gr-select": "",
 				class: normalizeClass(rootClass.value)
 			}, [
 				createElementVNode("button", {
-					"data-testid": "ds-select-trigger",
-					"data-ds-select-trigger": "",
+					id: resolvedId.value,
+					"data-testid": "gr-select-trigger",
+					"data-gr-select-trigger": "",
 					type: "button",
 					disabled: __props.disabled,
 					"aria-label": __props.ariaLabel,
+					"aria-invalid": isInvalid.value ? "true" : void 0,
+					"aria-describedby": describedBy.value,
+					"aria-required": isRequired.value ? "true" : void 0,
 					role: "combobox",
-					"aria-readonly": "true",
+					"aria-haspopup": "listbox",
+					"aria-controls": open.value ? unref(listboxId) : void 0,
+					"aria-activedescendant": activeDescendantId.value,
 					"aria-expanded": open.value ? "true" : "false",
 					class: normalizeClass([baseClassName.value, triggerClassName.value]),
-					onClick: toggleDropdown
+					onClick: toggleDropdown,
+					onKeydown: onComboKeydown
 				}, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "value", {
 					selectedOptions: selectedOptions.value,
 					selectedValues: selectedValues.value,
@@ -411,13 +546,13 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 					placeholder: __props.placeholder,
 					hasSelection: hasSelection.value
 				}, () => [createElementVNode("span", { class: normalizeClass(["block truncate", !hasSelection.value ? "text-[var(--muted-fg)]" : ""]) }, toDisplayString(displayText.value), 3)])]), panelClearVisible.value ? (openBlock(), createElementBlock("span", _hoisted_10)) : (openBlock(), createElementBlock("span", _hoisted_11, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
-					class: "i-lucide-chevron-down inline-block h-4 w-4",
+					class: "i-lucide-chevron-down block h-4 w-4",
 					"aria-hidden": "true"
-				}, null, -1)])]))], 10, _hoisted_8),
+				}, null, -1)])]))], 42, _hoisted_8),
 				panelClearVisible.value ? (openBlock(), createElementBlock("button", {
 					key: 0,
-					"data-testid": "ds-select-clear",
-					"data-ds-select-clear": "",
+					"data-testid": "gr-select-clear",
+					"data-gr-select-clear": "",
 					type: "button",
 					class: "absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-md text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--muted)_25%,transparent)] disabled:opacity-50",
 					disabled: __props.disabled,
@@ -438,57 +573,62 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [withDirectives(createElementVNode("div", {
 						ref_key: "panelEl",
 						ref: panelEl,
-						"data-testid": "ds-select-panel",
-						"data-ds-select-panel": "",
+						"data-testid": "gr-select-panel",
+						"data-gr-select-panel": "",
 						style: normalizeStyle(unref(floatingStyle))
 					}, [createElementVNode("div", { class: normalizeClass(panelClasses.value) }, [__props.allowCustomValue ? (openBlock(), createElementBlock("div", _hoisted_13, [createVNode(GrInput_default, {
 						ref_key: "customInputRef",
 						ref: customInputRef,
 						modelValue: customValue.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customValue.value = $event),
-						"data-testid": "ds-select-custom-input",
+						"data-testid": "gr-select-custom-input",
 						type: "text",
 						placeholder: resolvedCustomValuePlaceholder.value,
 						size: "sm",
-						onKeydown: withKeys(withModifiers(addCustom, ["prevent"]), ["enter"])
-					}, null, 8, [
-						"modelValue",
-						"placeholder",
-						"onKeydown"
-					])])) : createCommentVNode("", true), createElementVNode("div", {
-						"data-ds-select-listbox": "",
+						onKeydown: onComboKeydown
+					}, null, 8, ["modelValue", "placeholder"])])) : createCommentVNode("", true), createElementVNode("div", {
+						id: unref(listboxId),
+						"data-gr-select-listbox": "",
 						class: "p-1 overflow-auto",
 						style: normalizeStyle({ maxHeight: `${__props.dropdownMaxHeight}px` }),
 						role: "listbox",
 						"aria-multiselectable": __props.multiple ? "true" : void 0
 					}, [canAddCustom.value ? (openBlock(), createElementBlock("button", {
 						key: 0,
-						"data-testid": "ds-select-add-option",
-						"data-ds-select-add-option": "",
+						"data-testid": "gr-select-add-option",
+						"data-gr-select-add-option": "",
 						type: "button",
 						class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full"]]),
 						onClick: addCustom
 					}, toDisplayString(unref(t)("gr.select.addOption", "Add \"{value}\"", { value: customValue.value.trim() })), 3)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(panelItems.value, (item) => {
 						return openBlock(), createElementBlock(Fragment, { key: item.key }, [item.kind === "group" ? (openBlock(), createElementBlock("div", {
 							key: 0,
-							"data-ds-select-group-label": "",
+							"data-gr-select-group-label": "",
 							role: "presentation",
 							class: normalizeClass(["px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
 						}, toDisplayString(item.label), 3)) : (openBlock(), createElementBlock("button", {
 							key: 1,
-							"data-ds-select-option": "",
+							id: optionDomId(item.option.value),
+							"data-gr-select-option": "",
 							type: "button",
 							role: "option",
+							disabled: item.option.disabled,
 							"aria-selected": isSelected(item.option.value) ? "true" : "false",
-							class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full"]]),
-							onClick: ($event) => toggleValue(item.option.value)
+							"aria-disabled": item.option.disabled ? "true" : void 0,
+							class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px]", [
+								__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full",
+								item.option.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]",
+								activeValue.value === item.option.value && !item.option.disabled ? "bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]" : ""
+							]]),
+							onClick: ($event) => toggleValue(item.option.value),
+							onMousemove: ($event) => activeIndex.value = navigableValues.value.indexOf(item.option.value)
 						}, [renderSlot(_ctx.$slots, "option", {
 							option: item.option,
 							selected: isSelected(item.option.value)
 						}, () => [createElementVNode("span", _hoisted_16, [createElementVNode("span", {
 							class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(item.option.value) ? "i-lucide-check text-[var(--primary)]" : ""]),
 							"aria-hidden": "true"
-						}, null, 2), createElementVNode("span", _hoisted_17, toDisplayString(item.option.label), 1)])])], 10, _hoisted_15))], 64);
+						}, null, 2), createElementVNode("span", _hoisted_17, toDisplayString(item.option.label), 1)])])], 42, _hoisted_15))], 64);
 					}), 128))], 12, _hoisted_14)], 2)], 4), [[vShow, open.value]])]),
 					_: 3
 				})]))