@rotki/ui-library 2.27.0 → 3.0.0-beta.2

package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,6 @@
+import { useLabelPlacement } from "../../../composables/defaults/field.js";
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useFocus, useFocusWithin } from "../../../vendor/@vueuse/core/dist/index.js";
 import { cn } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiProgress_default from "../../progress/RuiProgress.js";
@@ -5,48 +8,59 @@ import RuiButton_default from "../../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import { Placement } from "../../../composables/floating.js";
 import RuiMenu_default from "../../overlays/menu/RuiMenu.js";
+import RuiFieldLabel_default from "../field-label/RuiFieldLabel.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
 import { autoCompleteStyles } from "./auto-complete-styles.js";
 import RuiAutoCompleteOptionList_default from "./RuiAutoCompleteOptionList.js";
 import RuiAutoCompleteSelection_default from "./RuiAutoCompleteSelection.js";
-import { useDropdownMenu, useDropdownOptionProperty } from "../../../composables/dropdown-menu.js";
+import { activatorHandlers } from "../../overlays/menu/activator-handlers.js";
+import { getOptionHeight, useDropdownMenu, useDropdownOptionProperty } from "../../../composables/dropdown-menu.js";
+import { useAutoCompleteChips } from "../../../composables/forms/auto-complete/chips.js";
+import { splitAriaAttrs, useAutoCompleteCombobox } from "../../../composables/forms/auto-complete/combobox.js";
 import { useAutoCompleteFocus } from "../../../composables/forms/auto-complete/focus.js";
 import { useAutoCompleteKeyboardNavigation } from "../../../composables/forms/auto-complete/keyboard-navigation.js";
 import { useAutoCompleteSearch } from "../../../composables/forms/auto-complete/search.js";
+import { useAutoCompleteSelection } from "../../../composables/forms/auto-complete/selection.js";
 import { useAutoCompleteValue } from "../../../composables/forms/auto-complete/value.js";
-import { isEqual } from "../../../utils/is-equal.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
-import { useFocus, useFocusWithin } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, withCtx, withKeys, withModifiers } from "vue";
 //#region src/components/forms/auto-complete/RuiAutoComplete.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"aria-expanded",
-	"aria-disabled",
-	"aria-readonly",
-	"aria-required",
-	"aria-busy",
-	"aria-invalid",
-	"tabindex"
-];
-var _hoisted_2 = {
+var _hoisted_1 = {
 	key: 0,
+	"data-id": "resting-placeholder",
+	class: "truncate text-rui-text-secondary pointer-events-none"
+};
+var _hoisted_2 = {
+	key: 1,
 	"data-id": "placeholder",
 	class: "flex-1 min-w-0 pointer-events-none"
 };
 var _hoisted_3 = [
 	"disabled",
+	"readonly",
 	"value",
 	"placeholder",
+	"tabindex",
+	"aria-labelledby",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-readonly",
+	"aria-required",
+	"aria-busy",
 	"aria-invalid"
 ];
 var _hoisted_4 = {
+	class: "sr-only",
+	"aria-live": "polite"
+};
+var _hoisted_5 = {
 	key: 0,
 	class: "p-4",
 	"data-id": "no-data"
 };
-var _hoisted_5 = {
+var _hoisted_6 = {
 	key: 2,
-	class: "bg-white dark:bg-rui-grey-900 border-t border-black/[0.12] dark:border-white/[0.12] pr-[var(--rui-scrollbar-gutter,15px)] -mb-2",
+	class: "bg-rui-menu border-t border-rui-divider pr-(--rui-scrollbar-gutter,15px) -mb-2",
 	"data-id": "footer"
 };
 var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -78,14 +92,17 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			default: false
 		},
 		label: { default: "Select" },
+		labelPlacement: { default: () => void 0 },
 		menuOptions: {},
 		classNames: {},
-		labelClass: {},
-		menuClass: {},
+		prependIcon: {},
+		hideArrow: {
+			type: Boolean,
+			default: false
+		},
 		prependWidth: {},
 		appendWidth: {},
 		itemHeight: {},
-		variant: { default: "default" },
 		hint: {},
 		errorMessages: { default: () => [] },
 		successMessages: { default: () => [] },
@@ -140,8 +157,8 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			type: Boolean,
 			default: false
 		},
-		groupBy: { type: Function },
-		itemDisabled: { type: Function },
+		groupBy: { type: [String, Function] },
+		itemDisabled: { type: [String, Function] },
 		searchIncludesGroupLabel: {
 			type: Boolean,
 			default: false
@@ -165,13 +182,12 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const activator = useTemplateRef("activator");
 		const menuRef = shallowRef(null);
 		function setMenuRef(element) {
-			set$1(menuRef, element instanceof HTMLElement ? element : null);
+			set(menuRef, element instanceof HTMLElement ? element : null);
 		}
 		const menuWrapperRef = useTemplateRef("menuWrapperRef");
 		const { focused: activatorFocusedWithin } = useFocusWithin(activator);
 		const { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);
 		const { focused: searchInputFocused } = useFocus(textInput);
-		const { focused: activatorFocused } = useFocus(activator);
 		const { internalSearch, filteredOptions, justOpened, updateInternalSearch, textValueToProperValue } = useAutoCompleteSearch(() => __props.options, searchInputModel, {
 			keyAttr: () => __props.keyAttr,
 			textAttr: () => __props.textAttr,
@@ -185,9 +201,9 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		});
 		const isOpen = ref(false);
 		const isHovered = ref(false);
-		const multiple = computed(() => Array.isArray(get$1(modelValue)));
-		const shouldApplyValueAsSearch = computed(() => !(slots.selection || get$1(multiple) || __props.chips));
-		const { resolveIn, value, setSelected } = useAutoCompleteValue(modelValue, () => __props.options, {
+		const multiple = computed(() => Array.isArray(get(modelValue)));
+		const shouldApplyValueAsSearch = computed(() => !(slots.selection || get(multiple) || __props.chips));
+		const { value } = useAutoCompleteValue(modelValue, () => __props.options, {
 			keyAttr: () => __props.keyAttr,
 			returnObject: () => __props.returnObject,
 			customValue: () => __props.customValue
@@ -200,7 +216,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			multiple,
 			updateInternalSearch
 		});
-		const resolvedItemHeight = __props.itemHeight ?? (__props.dense ? 30 : 48);
+		const resolvedItemHeight = __props.itemHeight ?? getOptionHeight(__props.dense);
 		const { containerProps, wrapperProps, renderedData, menuWidth, isActiveItem, itemIndexInValue, modelHighlightedIndex, moveHighlight, applyHighlighted, optionsWithSelectedHidden, modelUserNavigated, groupedOptions, isGrouped, isItemDisabled } = useDropdownMenu({
 			itemHeight: resolvedItemHeight,
 			keyAttr: __props.keyAttr,
@@ -209,7 +225,9 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			dense: () => __props.dense,
 			value,
 			menuRef,
-			setValue,
+			setValue: (item) => {
+				setValue(item);
+			},
 			autoSelectFirst: __props.autoSelectFirst,
 			hideSelected: __props.hideSelected,
 			isOpen,
@@ -220,14 +238,14 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			prependWidth: __props.prependWidth,
 			appendWidth: __props.appendWidth
 		});
-		const { focusedValueIndex, moveSelectedValueHighlight, onEnter, onInputDeletePressed, onTab, setValueFocus } = useAutoCompleteKeyboardNavigation({
+		const { focusedValueIndex, moveSelectedValueHighlight, onEnter, onInputDeletePressed, onInputKeydown, onTab, setValueFocus } = useAutoCompleteKeyboardNavigation({
 			chips: () => __props.chips,
 			customValue: () => __props.customValue,
 			multiple
 		}, {
 			activator,
 			applyHighlighted,
-			clear,
+			clear: () => clear(),
 			filteredOptions,
 			getText,
 			highlightedIndex: modelHighlightedIndex,
@@ -237,16 +255,29 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				setValue(item);
 			},
 			searchInputFocused,
-			setSearchAsValue,
+			setSearchAsValue: () => setSearchAsValue(),
+			updateInternalSearch,
 			userNavigated: modelUserNavigated,
 			value
 		});
-		const { anyFocused: focusAnyFocused, inputClass: focusInputClass, onActivatorFocused: focusOnActivatorFocused, onInputFocused: focusOnInputFocused, setInputFocus: focusSetInputFocus } = useAutoCompleteFocus({
+		const { chipAttrs, selectChip } = useAutoCompleteChips({
+			focusInput: () => get(textInput)?.focus(),
+			getIdentifier,
+			setValue: (item) => {
+				setValue(item);
+			},
+			setValueFocus
+		});
+		/** The selected chip's text, read out by the live region so the selection is heard, not only seen. */
+		const selectedChipAnnouncement = computed(() => {
+			const item = get(value)[get(focusedValueIndex)];
+			return __props.chips && item !== void 0 ? `${getText(item) ?? ""}, press Backspace to remove` : "";
+		});
+		const { anyFocused: focusAnyFocused, editing, inputClass: focusInputClass, onInputFocused: focusOnInputFocused, onSettledKeydown, setInputFocus: focusSetInputFocus, settleOnInput, unsettle } = useAutoCompleteFocus({
 			customValue: () => __props.customValue,
 			disabled: () => __props.disabled,
 			shouldApplyValueAsSearch
 		}, {
-			activatorFocused,
 			activatorFocusedWithin,
 			focusedValueIndex,
 			internalSearch,
@@ -254,140 +285,79 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			justOpened,
 			menuWrapperFocusedWithin,
 			searchInputFocused,
-			setSearchAsValue,
+			setSearchAsValue: () => setSearchAsValue(),
 			textInput,
 			updateInternalSearch
 		});
-		const menuMinHeight = computed(() => Math.min(5, get$1(optionsWithSelectedHidden).length) * resolvedItemHeight);
+		const { clear, setSearchAsValue, setValue } = useAutoCompleteSelection({
+			getText,
+			internalSearch,
+			isOpen,
+			itemIndexInValue,
+			multiple,
+			resetModel: () => set(modelValue, Array.isArray(get(modelValue)) ? [] : void 0),
+			searchInputFocused,
+			settleOnInput,
+			shouldApplyValueAsSearch,
+			textValueToProperValue,
+			updateInternalSearch,
+			value
+		});
+		const menuMinHeight = computed(() => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight);
 		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
-		const valueSet = computed(() => get$1(value).length > 0);
-		/**
-		* True while the consumer's `#placeholder` slot holds the resting content
-		* area, where the resting label would overlap it and so hides instead.
-		*/
-		const placeholderSlotActive = computed(() => Boolean(slots.placeholder) && !get$1(valueSet) && !get$1(searchInputFocused));
+		const valueSet = computed(() => get(value).length > 0);
 		const usedPlaceholder = computed(() => {
-			if (get$1(searchInputFocused)) return __props.placeholder;
+			if (get(editing)) return __props.placeholder;
 			return "";
 		});
-		const outlined = computed(() => __props.variant === "outlined");
-		const float = computed(() => (get$1(isOpen) || get$1(valueSet) || get$1(searchInputFocused)) && get$1(outlined));
-		const legendText = computed(() => {
-			if (!get$1(float) || !__props.label) return "";
-			return __props.required ? `${__props.label} ﹡` : __props.label;
-		});
+		const labelId = useId();
+		const placement = useLabelPlacement(() => __props.labelPlacement);
+		const { activeDescendant, optionIdPrefix } = useAutoCompleteCombobox(isOpen, modelHighlightedIndex);
+		const restingPlaceholder = computed(() => !!__props.placeholder && !get(valueSet) && !get(editing) && !slots.placeholder);
 		const ui = computed(() => autoCompleteStyles({
-			filled: __props.variant === "filled",
-			outlined: get$1(outlined),
-			float: get$1(float),
-			showLabel: !!get$1(legendText),
-			opened: get$1(isOpen),
-			hovered: get$1(isHovered),
+			opened: get(isOpen),
+			hovered: get(isHovered),
 			dense: __props.dense,
 			disabled: __props.disabled,
 			readonly: __props.readOnly,
-			hasError: get$1(hasError),
-			hasSuccess: get$1(hasSuccess) && !get$1(hasError)
+			hasError: get(hasError),
+			hasSuccess: get(hasSuccess) && !get(hasError)
 		}));
 		const highlightedClass = autoCompleteStyles({}).highlighted();
 		function updateSearchInput(event) {
 			const target = event.target;
 			if (!(target instanceof HTMLInputElement)) return;
 			const value = target.value;
-			set$1(isOpen, true);
+			unsettle();
+			set(isOpen, true);
 			updateInternalSearch(value);
-			set$1(justOpened, false);
-		}
-		async function setValue(val, skipRefocused = false) {
-			const isMultiple = get$1(multiple);
-			if (isMultiple) {
-				const newValue = [...get$1(value)];
-				const indexInValue = itemIndexInValue(val);
-				if (indexInValue === -1) {
-					updateInternalSearch();
-					newValue.push(val);
-				} else newValue.splice(indexInValue, 1);
-				set$1(value, newValue);
-			} else {
-				if (get$1(shouldApplyValueAsSearch)) updateInternalSearch(getText(val));
-				else updateInternalSearch();
-				set$1(value, [val]);
-			}
-			if (!isMultiple) {
-				if (!skipRefocused) {
-					set$1(activatorFocused, true);
-					get$1(activator)?.focus();
-					await nextTick(() => {
-						set$1(isOpen, false);
-					});
-				} else set$1(isOpen, false);
-			} else if (!skipRefocused) set$1(searchInputFocused, true);
+			set(justOpened, false);
 		}
-		function setSearchAsValue() {
-			const searchToBeValue = get$1(internalSearch);
-			if (!searchToBeValue) return;
-			setValue(textValueToProperValue(searchToBeValue), true);
-		}
-		function clear() {
-			updateInternalSearch();
-			set$1(modelValue, Array.isArray(get$1(modelValue)) ? [] : void 0);
-		}
-		function chipAttrs(item, index) {
-			return {
-				"data-index": index,
-				"data-value": getIdentifier(item),
-				"onKeydown": (event) => {
-					const { key } = event;
-					if (["Backspace", "Delete"].includes(key)) {
-						event.stopPropagation();
-						event.preventDefault();
-						if (event.altKey && __props.customValue) {
-							const text = getText(item) ?? "";
-							setValue(item);
-							updateInternalSearch(text);
-						} else setValue(item);
-					}
-				},
-				"onClick": (e) => {
-					e.stopPropagation();
-					setValueFocus(index);
-				},
-				"onClick:close": () => {
-					setValue(item);
-				}
-			};
+		/**
+		* Moves the highlight through the options, which also leaves the picked-value display for a search.
+		*
+		* @param up - whether to move towards the first option
+		*/
+		function onArrow(up) {
+			unsettle();
+			moveHighlight(up);
 		}
 		function setSelectionRange(start, end) {
-			set$1(searchInputFocused, true);
-			get$1(textInput)?.setSelectionRange?.(start, end);
+			set(searchInputFocused, true);
+			get(textInput)?.setSelectionRange?.(start, end);
 		}
 		function arrowClicked(event) {
-			if (get$1(isOpen)) {
-				set$1(isOpen, false);
+			if (get(isOpen)) {
+				set(isOpen, false);
 				event.stopPropagation();
 			}
 		}
 		function openMenu() {
-			set$1(isOpen, true);
+			set(isOpen, true);
 		}
 		function closeMenu() {
-			set$1(isOpen, false);
-		}
-		/**
-		* Reconciles the selection against a new set of options, comparing by
-		* reference before by value so an unchanged list costs nothing.
-		*
-		* Only a selection the previous options could resolve is reconciled: a value
-		* that was already unresolvable is one the consumer set before its options
-		* arrived, since an async list starts empty, and clearing it here would
-		* discard a legitimate value.
-		*/
-		function onOptionsChanged(curr, old) {
-			if (curr === old || __props.customValue || isEqual(curr, old)) return;
-			if (!get$1(multiple) && resolveIn(old).length === 0) return;
-			setSelected(get$1(value));
+			set(isOpen, false);
 		}
-		watch(() => __props.options, onOptionsChanged);
 		const menuFloatingOptions = computed(() => ({
 			placement: Placement.bottomStart,
 			...__props.menuOptions?.options
@@ -407,23 +377,27 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				...__props.menuOptions
 			}, {
 				class: unref(ui).wrapper({ class: unref(cn)(_ctx.$attrs.class) }),
+				"class-names": {
+					...__props.menuOptions?.classNames,
+					details: ["px-0", unref(cn)(__props.menuOptions?.classNames?.details) ?? ""],
+					menu: [{ hidden: unref(optionsWithSelectedHidden).length === 0 && __props.customValue && !slots["no-data"] }, unref(cn)(__props.menuOptions?.classNames?.menu) ?? ""]
+				},
 				options: unref(menuFloatingOptions),
 				"close-on-content-click": false,
 				"full-width": "",
 				"persist-on-activator-click": "",
-				"menu-class": [{ hidden: unref(optionsWithSelectedHidden).length === 0 && __props.customValue && !slots["no-data"] }, __props.menuOptions?.menuClass],
 				"error-messages": __props.errorMessages,
 				"success-messages": __props.successMessages,
 				hint: __props.hint,
 				dense: __props.dense,
 				"show-details": !__props.hideDetails,
 				disabled: __props.disabled,
-				"disable-auto-focus": ""
-			}), {
+				"disable-auto-focus": "",
+				role: "listbox"
+			}), createSlots({
 				activator: withCtx(({ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }) => [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
 					disabled: __props.disabled,
 					value: unref(value),
-					variant: __props.variant,
 					readOnly: __props.readOnly,
 					attrs,
 					open,
@@ -432,47 +406,40 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				})), () => [createElementVNode("div", mergeProps({
 					ref_key: "activator",
 					ref: activator,
-					class: unref(ui).activator({ class: unref(cn)(__props.classNames?.label) ?? __props.labelClass })
+					class: unref(ui).activator({ class: unref(cn)([__props.hideArrow && "pr-3", __props.classNames?.label]) })
 				}, {
-					...unref(getNonRootAttrs)(_ctx.$attrs, ["onClick", "class"]),
-					...__props.readOnly ? {} : attrs
+					...unref(splitAriaAttrs)(unref(getNonRootAttrs)(_ctx.$attrs, ["onClick", "class"]), false),
+					...__props.readOnly ? {} : unref(activatorHandlers)(attrs)
 				}, {
-					role: "combobox",
-					"aria-expanded": open,
-					"aria-disabled": __props.disabled || void 0,
-					"aria-readonly": __props.readOnly || void 0,
-					"aria-required": __props.required || void 0,
-					"aria-busy": __props.loading || void 0,
 					"data-id": "activator",
-					"aria-invalid": unref(hasError),
-					tabindex: __props.disabled || __props.readOnly ? -1 : 0,
-					onMouseenter: _cache[5] || (_cache[5] = ($event) => isHovered.value = true),
-					onMouseleave: _cache[6] || (_cache[6] = ($event) => isHovered.value = false),
-					onClick: _cache[7] || (_cache[7] = ($event) => unref(focusSetInputFocus)()),
-					onFocus: _cache[8] || (_cache[8] = ($event) => unref(focusOnActivatorFocused)()),
+					onMouseenter: _cache[6] || (_cache[6] = ($event) => isHovered.value = true),
+					onMouseleave: _cache[7] || (_cache[7] = ($event) => isHovered.value = false),
+					onClick: _cache[8] || (_cache[8] = ($event) => unref(focusSetInputFocus)()),
 					onKeydown: [
 						_cache[9] || (_cache[9] = withKeys(($event) => unref(onEnter)($event), ["enter"])),
 						_cache[10] || (_cache[10] = withKeys(($event) => unref(onTab)($event), ["tab"])),
 						_cache[11] || (_cache[11] = withKeys(($event) => unref(moveSelectedValueHighlight)($event, false), ["left"])),
 						_cache[12] || (_cache[12] = withKeys(($event) => unref(moveSelectedValueHighlight)($event, true), ["right"])),
-						_cache[13] || (_cache[13] = withKeys(withModifiers(($event) => unref(moveHighlight)(true), ["prevent"]), ["up"])),
-						_cache[14] || (_cache[14] = withKeys(withModifiers(($event) => unref(moveHighlight)(false), ["prevent"]), ["down"])),
+						_cache[13] || (_cache[13] = withKeys(withModifiers(($event) => onArrow(true), ["prevent"]), ["up"])),
+						_cache[14] || (_cache[14] = withKeys(withModifiers(($event) => onArrow(false), ["prevent"]), ["down"])),
 						_cache[15] || (_cache[15] = withKeys(withModifiers(($event) => modelHighlightedIndex.value = 0, ["prevent"]), ["home"])),
 						_cache[16] || (_cache[16] = withKeys(withModifiers(($event) => modelHighlightedIndex.value = unref(optionsWithSelectedHidden).length - 1, ["prevent"]), ["end"]))
 					]
 				}), [
-					(unref(outlined) || !unref(valueSet) && !unref(searchInputFocused)) && !unref(placeholderSlotActive) ? (openBlock(), createElementBlock("span", {
+					__props.prependIcon ? (openBlock(), createElementBlock("span", {
 						key: 0,
-						class: normalizeClass([unref(ui).label(), { "pr-2": !unref(valueSet) && !open && unref(outlined) }])
-					}, [renderSlot(_ctx.$slots, "activator.label", normalizeProps(guardReactiveProps({ value: unref(value) })), () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(unref(ui).required())
-					}, " ﹡ ", 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+						class: normalizeClass(unref(ui).prepend()),
+						"data-id": "prepend"
+					}, [createVNode(RuiIcon_default, {
+						name: __props.prependIcon,
+						size: __props.dense ? 16 : 18
+					}, null, 8, ["name", "size"])], 2)) : createCommentVNode("", true),
 					createElementVNode("div", {
 						"data-id": "value",
 						class: normalizeClass(unref(ui).value())
 					}, [
-						!unref(valueSet) && !unref(searchInputFocused) && slots.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "placeholder", normalizeProps(guardReactiveProps({
+						unref(restingPlaceholder) ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true),
+						!unref(valueSet) && !unref(editing) && slots.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "placeholder", normalizeProps(guardReactiveProps({
 							disabled: __props.disabled,
 							readOnly: __props.readOnly
 						})))])) : createCommentVNode("", true),
@@ -481,11 +448,13 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							chips: __props.chips,
 							dense: __props.dense,
 							multiple: unref(multiple),
-							"search-input-focused": unref(searchInputFocused),
+							"search-input-focused": unref(editing),
 							"hide-selection-wrapper": __props.hideSelectionWrapper,
 							"get-identifier": unref(getIdentifier),
 							"get-text": unref(getText),
-							"chip-attrs": chipAttrs
+							"chip-attrs": unref(chipAttrs),
+							"selected-index": unref(focusedValueIndex),
+							"select-chip": unref(selectChip)
 						}, createSlots({ _: 2 }, [slots["selection.prepend"] ? {
 							name: "prepend",
 							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "selection.prepend", normalizeProps(guardReactiveProps(slotProps)))]),
@@ -502,63 +471,81 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							"search-input-focused",
 							"hide-selection-wrapper",
 							"get-identifier",
-							"get-text"
+							"get-text",
+							"chip-attrs",
+							"selected-index",
+							"select-chip"
 						]),
-						createElementVNode("input", {
+						createElementVNode("input", mergeProps({
 							ref_key: "textInput",
 							ref: textInput,
 							disabled: __props.disabled,
+							readonly: __props.readOnly || __props.hideSearchInput,
 							value: unref(internalSearch),
-							class: normalizeClass(["bg-transparent outline-none", [unref(focusInputClass), { hidden: __props.hideSearchInput }]]),
+							class: ["bg-transparent outline-hidden", __props.hideSearchInput ? "w-0 h-0 min-w-0 opacity-0" : unref(focusInputClass)],
 							type: "text",
 							placeholder: unref(usedPlaceholder),
+							role: "combobox",
+							tabindex: __props.readOnly ? -1 : void 0,
+							"aria-labelledby": __props.label ? unref(labelId) : void 0,
+							"aria-expanded": open,
+							"aria-haspopup": "listbox",
+							"aria-controls": attrs["aria-controls"],
+							"aria-activedescendant": unref(activeDescendant),
+							"aria-readonly": __props.readOnly || void 0,
+							"aria-required": __props.required || void 0,
+							"aria-busy": __props.loading || void 0,
 							"aria-invalid": unref(hasError),
 							"aria-autocomplete": "list",
-							onKeydown: _cache[0] || (_cache[0] = withKeys(($event) => unref(onInputDeletePressed)(), ["delete"])),
-							onInput: _cache[1] || (_cache[1] = withModifiers(($event) => updateSearchInput($event), ["stop"])),
-							onFocus: _cache[2] || (_cache[2] = ($event) => unref(focusOnInputFocused)())
-						}, null, 42, _hoisted_3)
+							"data-id": "search-input"
+						}, unref(splitAriaAttrs)(unref(getNonRootAttrs)(_ctx.$attrs, ["onClick", "class"]), true), {
+							onKeydown: [_cache[0] || (_cache[0] = ($event) => {
+								unref(onSettledKeydown)($event);
+								unref(onInputKeydown)($event);
+							}), _cache[1] || (_cache[1] = withKeys(($event) => unref(onInputDeletePressed)($event), ["delete"]))],
+							onInput: _cache[2] || (_cache[2] = withModifiers(($event) => updateSearchInput($event), ["stop"])),
+							onFocus: _cache[3] || (_cache[3] = ($event) => unref(focusOnInputFocused)())
+						}), null, 16, _hoisted_3),
+						createElementVNode("span", _hoisted_4, toDisplayString(unref(selectedChipAnnouncement)), 1)
 					], 2),
-					__props.clearable && unref(valueSet) && !__props.disabled ? (openBlock(), createBlock(RuiButton_default, {
+					__props.clearable && unref(valueSet) && !__props.disabled && !__props.readOnly ? (openBlock(), createBlock(RuiButton_default, {
 						key: 1,
 						variant: "text",
 						icon: "",
 						size: "sm",
 						tabindex: "-1",
-						color: "error",
 						"data-id": "clear",
+						"aria-label": "Clear",
 						class: normalizeClass([
 							unref(ui).clear(),
-							unref(focusAnyFocused) && "!visible",
+							unref(focusAnyFocused) && "visible!",
 							{ "mr-2": !__props.dense }
 						]),
-						onClick: _cache[3] || (_cache[3] = withModifiers(($event) => clear(), ["stop", "prevent"]))
+						onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(clear)(), ["stop", "prevent"]))
 					}, {
 						default: withCtx(() => [createVNode(RuiIcon_default, {
 							name: "lu-x",
-							size: "18"
+							size: "16"
 						})]),
 						_: 1
 					}, 8, ["class"])) : createCommentVNode("", true),
-					createElementVNode("span", {
+					!__props.hideArrow ? (openBlock(), createElementBlock("span", {
+						key: 2,
 						class: normalizeClass(unref(ui).iconWrapper()),
-						onClick: _cache[4] || (_cache[4] = ($event) => arrowClicked($event))
+						onClick: _cache[5] || (_cache[5] = ($event) => arrowClicked($event))
 					}, [createVNode(RuiIcon_default, {
 						class: normalizeClass(unref(ui).icon()),
-						size: __props.dense ? 16 : 24,
+						size: __props.dense ? 16 : 20,
 						name: "lu-chevron-down"
-					}, null, 8, ["class", "size"])], 2),
+					}, null, 8, ["class", "size"])], 2)) : createCommentVNode("", true),
 					__props.loading ? (openBlock(), createBlock(RuiProgress_default, {
-						key: 2,
+						key: 3,
 						class: normalizeClass(unref(ui).progress()),
 						color: "primary",
-						thickness: "3",
+						thickness: "2",
 						variant: "indeterminate"
 					}, null, 8, ["class"])) : createCommentVNode("", true)
-				], 16, _hoisted_1), unref(outlined) ? (openBlock(), createElementBlock("fieldset", {
-					key: 0,
-					class: normalizeClass(unref(ui).fieldset())
-				}, [createElementVNode("legend", { class: normalizeClass(unref(ui).legend()) }, toDisplayString(unref(legendText)), 3)], 2)) : createCommentVNode("", true)])]),
+				], 16), createElementVNode("fieldset", { class: normalizeClass(unref(ui).fieldset()) }, null, 2)])]),
 				default: withCtx(({ width }) => [createElementVNode("div", {
 					ref_key: "menuWrapperRef",
 					ref: menuWrapperRef
@@ -574,7 +561,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"highlighted-index": unref(modelHighlightedIndex),
 					"highlighted-class": unref(highlightedClass),
 					dense: __props.dense,
-					"menu-class": unref(ui).menu({ class: unref(cn)(__props.classNames?.menu) ?? __props.menuClass }),
+					"menu-class": unref(ui).menu({ class: unref(cn)(__props.classNames?.menu) }),
 					"menu-style": {
 						width: `${width}px`,
 						minWidth: unref(menuWidth),
@@ -584,7 +571,8 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"get-text": unref(getText),
 					"is-active-item": unref(isActiveItem),
 					"is-item-disabled": unref(isItemDisabled),
-					onSelect: _cache[17] || (_cache[17] = ($event) => setValue($event)),
+					"option-id-prefix": unref(optionIdPrefix),
+					onSelect: _cache[17] || (_cache[17] = ($event) => unref(setValue)($event)),
 					onMoveHighlight: _cache[18] || (_cache[18] = ($event) => unref(moveHighlight)($event))
 				}, createSlots({ _: 2 }, [
 					slots["group-header"] ? {
@@ -622,21 +610,38 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"get-identifier",
 					"get-text",
 					"is-active-item",
-					"is-item-disabled"
+					"is-item-disabled",
+					"option-id-prefix"
 				])) : !__props.hideNoData ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					style: normalizeStyle({
 						width: `${width}px`,
 						minWidth: unref(menuWidth)
 					}),
-					class: normalizeClass(__props.classNames?.menu ?? __props.menuClass)
-				}, [renderSlot(_ctx.$slots, "no-data", {}, () => [!__props.customValue ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(__props.noDataText), 1)) : createCommentVNode("", true)])], 6)) : createCommentVNode("", true), slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]),
-				_: 3
-			}, 16, [
+					class: normalizeClass(__props.classNames?.menu)
+				}, [renderSlot(_ctx.$slots, "no-data", {}, () => [!__props.customValue ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.noDataText), 1)) : createCommentVNode("", true)])], 6)) : createCommentVNode("", true), slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]),
+				_: 2
+			}, [__props.label ? {
+				name: "label",
+				fn: withCtx(() => [createVNode(RuiFieldLabel_default, {
+					id: unref(labelId),
+					text: __props.label,
+					hidden: unref(placement) === "hidden",
+					required: __props.required,
+					disabled: __props.disabled
+				}, null, 8, [
+					"id",
+					"text",
+					"hidden",
+					"required",
+					"disabled"
+				])]),
+				key: "0"
+			} : void 0]), 1040, [
 				"modelValue",
 				"class",
+				"class-names",
 				"options",
-				"menu-class",
 				"error-messages",
 				"success-messages",
 				"hint",