@rotki/ui-library 2.12.1 → 2.13.0

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

@@ -1,7 +1,4 @@
-import { getRootAttrs, getNonRootAttrs, getTextToken } from "../../../utils/helpers.js";
-import { defineComponent, mergeModels, useCssVars, unref, computed, useModel, useSlots, toRefs, ref, toRef, watch, nextTick, createBlock, openBlock, mergeProps, isRef, withCtx, createElementVNode, createElementBlock, createCommentVNode, withKeys, withModifiers, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, normalizeStyle, normalizeProps, guardReactiveProps, createVNode } from "vue";
-import { useFocusWithin, useFocus, syncRef, isDefined } from "@vueuse/core";
-import { logicAnd, logicOr } from "@vueuse/math";
+import { defineComponent, useCssVars, unref, useModel, useSlots, useTemplateRef, toRef, ref, computed, watch, openBlock, createBlock, mergeProps, isRef, withCtx, createElementVNode, createElementBlock, withKeys, withModifiers, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, normalizeStyle, createCommentVNode, normalizeProps, guardReactiveProps, createVNode, mergeModels, nextTick } from "vue";
 import RuiButton from "../../buttons/button/RuiButton.vue.js";
 import RuiChip from "../../chips/RuiChip.vue.js";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
@@ -12,9 +9,12 @@ import { useAutoCompleteFocus } from "../../../composables/forms/auto-complete/f
 import { useAutoCompleteKeyboardNavigation } from "../../../composables/forms/auto-complete/keyboard-navigation.js";
 import { useAutoCompleteSearch } from "../../../composables/forms/auto-complete/search.js";
 import { useAutoCompleteValue } from "../../../composables/forms/auto-complete/value.js";
+import { useLabelWithQuote } from "../../../composables/forms/use-label-with-quote.js";
+import { getRootAttrs, getNonRootAttrs, getTextToken } from "../../../utils/helpers.js";
 import { isEqual } from "../../../utils/is-equal.js";
+import { useFocusWithin, useFocus, isDefined } from "@vueuse/core";
 import { get, set } from "@vueuse/shared";
-const _hoisted_1 = ["data-error", "tabindex"];
+const _hoisted_1 = ["aria-expanded", "aria-disabled", "aria-readonly", "aria-required", "aria-busy", "data-error", "tabindex"];
 const _hoisted_2 = {
   key: 0,
   class: "text-rui-error"
@@ -23,7 +23,8 @@ const _hoisted_3 = { class: "flex" };
 const _hoisted_4 = ["disabled", "value", "placeholder", "aria-invalid"];
 const _hoisted_5 = {
   key: 0,
-  class: "p-4"
+  class: "p-4",
+  "data-id": "no-data"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -33,23 +34,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiAutoComplete",
   props: /* @__PURE__ */ mergeModels({
     options: { default: () => [] },
-    keyAttr: { default: void 0 },
-    textAttr: { default: void 0 },
+    keyAttr: {},
+    textAttr: {},
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
     readOnly: { type: Boolean, default: false },
     dense: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false },
     label: { default: "Select" },
-    menuOptions: { default: void 0 },
+    menuOptions: {},
     labelClass: {},
     menuClass: {},
-    itemClass: {},
-    prependWidth: { default: 0 },
-    appendWidth: { default: 0 },
-    itemHeight: { default: void 0 },
+    prependWidth: {},
+    appendWidth: {},
+    itemHeight: {},
     variant: { default: "default" },
-    hint: { default: void 0 },
+    hint: {},
     errorMessages: { default: () => [] },
     successMessages: { default: () => [] },
     hideDetails: { type: Boolean, default: false },
@@ -58,7 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     noFilter: { type: Boolean, default: false },
     hideNoData: { type: Boolean, default: false },
     noDataText: { default: "No data available" },
-    filter: {},
+    filter: { type: Function },
     hideSelected: { type: Boolean, default: false },
     placeholder: { default: "" },
     returnObject: { type: Boolean, default: false },
@@ -76,26 +76,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue", "update:searchInput"],
   setup(__props, { expose: __expose }) {
     useCssVars((_ctx) => ({
-      "v12e602de": unref(labelWithQuote)
+      "v14605086": unref(labelWithQuote)
     }));
     const modelValue = useModel(__props, "modelValue");
     const searchInputModel = useModel(__props, "searchInput");
-    const props = __props;
     const slots = useSlots();
-    const { dense, disabled, options } = toRefs(props);
     const { getText, getIdentifier } = useDropdownOptionProperty({
-      keyAttr: props.keyAttr,
-      textAttr: props.textAttr
+      keyAttr: __props.keyAttr,
+      textAttr: __props.textAttr
     });
-    const textInput = ref();
-    const activator = ref();
-    const menuRef = ref();
-    const menuWrapperRef = ref();
+    const textInput = useTemplateRef("textInput");
+    const activator = useTemplateRef("activator");
+    const menuRef = useTemplateRef("menuRef");
+    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 renderedOptions = ref([]);
     const {
       internalSearch,
       filteredOptions,
@@ -103,46 +100,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateInternalSearch,
       textValueToProperValue
     } = useAutoCompleteSearch(
-      options,
+      toRef(() => __props.options),
       searchInputModel,
       {
-        keyAttr: toRef(props, "keyAttr"),
-        textAttr: toRef(props, "textAttr"),
-        noFilter: toRef(props, "noFilter"),
-        filter: toRef(props, "filter"),
-        customValue: toRef(props, "customValue"),
-        hideCustomValue: toRef(props, "hideCustomValue"),
-        returnObject: toRef(props, "returnObject")
+        keyAttr: toRef(() => __props.keyAttr),
+        textAttr: toRef(() => __props.textAttr),
+        noFilter: toRef(() => __props.noFilter),
+        filter: toRef(() => __props.filter),
+        customValue: toRef(() => __props.customValue),
+        hideCustomValue: toRef(() => __props.hideCustomValue),
+        returnObject: toRef(() => __props.returnObject)
       }
     );
+    const isOpen = ref(false);
     const multiple = computed(() => Array.isArray(get(modelValue)));
-    const shouldApplyValueAsSearch = computed(() => !(slots.selection || get(multiple) || props.chips));
-    const tempIsOpen = ref(false);
-    const {
-      value,
-      setSelected
-    } = useAutoCompleteValue(
+    const shouldApplyValueAsSearch = computed(
+      () => !(slots.selection || get(multiple) || __props.chips)
+    );
+    const { value, setSelected } = useAutoCompleteValue(
       modelValue,
-      options,
+      toRef(() => __props.options),
       {
-        keyAttr: toRef(props, "keyAttr"),
-        returnObject: toRef(props, "returnObject"),
-        customValue: toRef(props, "customValue")
+        keyAttr: toRef(() => __props.keyAttr),
+        returnObject: toRef(() => __props.returnObject),
+        customValue: toRef(() => __props.customValue)
       },
       {
         getIdentifier,
         getText,
         textValueToProperValue,
         shouldApplyValueAsSearch,
-        isOpen: tempIsOpen,
+        isOpen,
+        multiple,
         updateInternalSearch
       }
     );
+    const resolvedItemHeight = __props.itemHeight ?? (__props.dense ? 30 : 48);
     const {
       containerProps,
       wrapperProps,
       renderedData,
-      isOpen,
       menuWidth,
       isActiveItem,
       itemIndexInValue,
@@ -151,18 +148,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       applyHighlighted,
       optionsWithSelectedHidden
     } = useDropdownMenu({
-      itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),
-      keyAttr: props.keyAttr,
-      textAttr: props.textAttr,
+      itemHeight: resolvedItemHeight,
+      keyAttr: __props.keyAttr,
+      textAttr: __props.textAttr,
       options: filteredOptions,
-      dense,
+      dense: toRef(() => __props.dense),
       value,
       menuRef,
       setValue,
-      autoSelectFirst: props.autoSelectFirst,
-      hideSelected: props.hideSelected
+      autoSelectFirst: __props.autoSelectFirst,
+      hideSelected: __props.hideSelected,
+      isOpen,
+      getText,
+      getIdentifier
     });
-    syncRef(isOpen, tempIsOpen);
     const {
       focusedValueIndex,
       moveSelectedValueHighlight,
@@ -172,7 +171,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setValueFocus
     } = useAutoCompleteKeyboardNavigation(
       {
-        customValue: toRef(props, "customValue"),
+        chips: toRef(() => __props.chips),
+        customValue: toRef(() => __props.customValue),
         multiple
       },
       {
@@ -180,10 +180,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         applyHighlighted,
         clear,
         filteredOptions,
+        getText,
         highlightedIndex,
         internalSearch,
         isOpen,
-        options,
+        removeValue: (item) => {
+          setValue(item);
+        },
         searchInputFocused,
         setSearchAsValue,
         value
@@ -197,14 +200,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setInputFocus: focusSetInputFocus
     } = useAutoCompleteFocus(
       {
-        customValue: toRef(props, "customValue"),
-        disabled,
+        customValue: toRef(() => __props.customValue),
+        disabled: toRef(() => __props.disabled),
         shouldApplyValueAsSearch
       },
       {
         activatorFocused,
         activatorFocusedWithin,
-        filteredOptions,
         focusedValueIndex,
         internalSearch,
         isOpen,
@@ -216,46 +218,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         updateInternalSearch
       }
     );
+    const menuMinHeight = computed(
+      () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight
+    );
     const valueSet = computed(() => get(value).length > 0);
-    const labelWithQuote = computed(() => {
-      if (!props.label)
-        return '"\\200B"';
-      const asterisk = props.required ? "﹡" : "";
-      return `'  ${props.label}${asterisk}  '`;
-    });
+    const labelWithQuote = useLabelWithQuote(() => __props.label, () => __props.required);
     const usedPlaceholder = computed(() => {
       if (get(searchInputFocused)) {
-        return props.placeholder;
+        return __props.placeholder;
       }
       return "";
     });
-    const menuMinHeight = ref(0);
-    watch(renderedData, async () => {
-      await nextTick();
-      const renderedOptionsData = get(renderedOptions).slice(0, Math.min(5, get(renderedData).length));
-      let height = 0;
-      for (const item of renderedOptionsData) {
-        if (item.$el) {
-          height += item.$el.offsetHeight;
-        }
-      }
-      set(menuMinHeight, height);
-    }, { immediate: true });
-    const outlined = computed(() => props.variant === "outlined");
-    const float = logicAnd(
-      logicOr(
-        isOpen,
-        valueSet,
-        searchInputFocused
-      ),
-      outlined
-    );
+    const outlined = computed(() => __props.variant === "outlined");
+    const float = computed(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(outlined));
     const virtualContainerProps = computed(() => ({
       style: containerProps.style,
       ref: containerProps.ref
     }));
     function updateSearchInput(event) {
-      const value2 = event.target.value;
+      const target = event.target;
+      if (!(target instanceof HTMLInputElement))
+        return;
+      const value2 = target.value;
       set(isOpen, true);
       updateInternalSearch(value2);
       set(justOpened, false);
@@ -277,8 +261,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         if (get(shouldApplyValueAsSearch))
           updateInternalSearch(getText(val));
-        else
-          updateInternalSearch();
+        else updateInternalSearch();
         set(value, [val]);
       }
       if (!isMultiple) {
@@ -312,10 +295,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "data-value": getIdentifier(item),
         "onKeydown": (event) => {
           const { key } = event;
-          if (["Backspace", "Delete"].includes(key))
+          if (["Backspace", "Delete"].includes(key)) {
+            event.stopPropagation();
+            event.preventDefault();
             setValue(item);
+          }
         },
-        "onClick.stop": () => {
+        "onClick": (e) => {
+          e.stopPropagation();
           setValueFocus(index);
         },
         "onClick:close": () => {
@@ -327,19 +314,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       set(searchInputFocused, true);
       get(textInput)?.setSelectionRange?.(start, end);
     }
-    watch(options, (curr, old) => {
-      if (curr === old || props.customValue)
-        return;
-      if (isEqual(curr, old))
-        return;
-      setSelected(get(value));
-    });
     function arrowClicked(event) {
       if (get(isOpen)) {
         set(isOpen, false);
         event.stopPropagation();
       }
     }
+    watch(() => __props.options, (curr, old) => {
+      if (curr === old || __props.customValue)
+        return;
+      if (isEqual(curr, old))
+        return;
+      setSelected(get(value));
+    });
     __expose({
       focus: focusSetInputFocus,
       setSelectionRange
@@ -351,65 +338,67 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: _ctx.$style.wrapper,
         "disable-auto-focus": ""
       }, {
-        ...("getRootAttrs" in _ctx ? _ctx.getRootAttrs : unref(getRootAttrs))(_ctx.$attrs),
+        ...unref(getRootAttrs)(_ctx.$attrs),
         placement: "bottom-start",
         closeOnContentClick: false,
         fullWidth: true,
         persistOnActivatorClick: true,
         ...__props.menuOptions,
         menuClass: [
-          { hidden: unref(optionsWithSelectedHidden).length === 0 && __props.customValue && !unref(slots)["no-data"] },
+          { hidden: unref(optionsWithSelectedHidden).length === 0 && __props.customValue && !slots["no-data"] },
           __props.menuOptions?.menuClass
         ],
         errorMessages: __props.errorMessages,
         successMessages: __props.successMessages,
         hint: __props.hint,
-        dense: unref(dense),
+        dense: __props.dense,
         showDetails: !__props.hideDetails,
-        disabled: unref(disabled)
+        disabled: __props.disabled
       }), {
         activator: withCtx(({ attrs, open, hasError, hasSuccess }) => [
-          renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ disabled: unref(disabled), value: unref(value), variant: __props.variant, readOnly: __props.readOnly, attrs, open, hasError, hasSuccess })), () => [
-            createElementVNode("div", mergeProps(
-              {
-                ref_key: "activator",
-                ref: activator,
-                class: ["group", [
-                  _ctx.$style.activator,
-                  __props.labelClass,
-                  {
-                    [_ctx.$style.disabled]: unref(disabled),
-                    [_ctx.$style.readonly]: __props.readOnly,
-                    [_ctx.$style.outlined]: unref(outlined),
-                    [_ctx.$style.dense]: unref(dense),
-                    [_ctx.$style.float]: unref(float),
-                    [_ctx.$style.opened]: open,
-                    [_ctx.$style["with-value"]]: unref(valueSet),
-                    [_ctx.$style["with-error"]]: hasError,
-                    [_ctx.$style["with-success"]]: hasSuccess && !hasError
-                  }
-                ]]
-              },
-              {
-                ...("getNonRootAttrs" in _ctx ? _ctx.getNonRootAttrs : unref(getNonRootAttrs))(_ctx.$attrs, ["onClick", "class"]),
-                ...__props.readOnly ? {} : attrs
-              },
-              {
-                "data-id": "activator",
-                "data-error": hasError ? "" : void 0,
-                tabindex: unref(disabled) || __props.readOnly ? -1 : 0,
-                onClick: _cache[5] || (_cache[5] = ($event) => unref(focusSetInputFocus)()),
-                onFocus: _cache[6] || (_cache[6] = ($event) => unref(focusOnActivatorFocused)()),
-                onKeydown: [
-                  _cache[7] || (_cache[7] = withKeys(($event) => unref(onEnter)($event), ["enter"])),
-                  _cache[8] || (_cache[8] = withKeys(($event) => unref(onTab)($event), ["tab"])),
-                  _cache[9] || (_cache[9] = withKeys(($event) => unref(moveSelectedValueHighlight)($event, false), ["left"])),
-                  _cache[10] || (_cache[10] = withKeys(($event) => unref(moveSelectedValueHighlight)($event, true), ["right"])),
-                  _cache[11] || (_cache[11] = withKeys(withModifiers(($event) => unref(moveHighlight)(true), ["prevent"]), ["up"])),
-                  _cache[12] || (_cache[12] = withKeys(withModifiers(($event) => unref(moveHighlight)(false), ["prevent"]), ["down"]))
-                ]
-              }
-            ), [
+          renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ disabled: __props.disabled, value: unref(value), variant: __props.variant, readOnly: __props.readOnly, attrs, open, hasError, hasSuccess })), () => [
+            createElementVNode("div", mergeProps({
+              ref_key: "activator",
+              ref: activator,
+              class: ["group", [
+                _ctx.$style.activator,
+                __props.labelClass,
+                {
+                  [_ctx.$style.disabled]: __props.disabled,
+                  [_ctx.$style.readonly]: __props.readOnly,
+                  [_ctx.$style.outlined]: unref(outlined),
+                  [_ctx.$style.dense]: __props.dense,
+                  [_ctx.$style.float]: unref(float),
+                  [_ctx.$style.opened]: open,
+                  [_ctx.$style["with-value"]]: unref(valueSet),
+                  [_ctx.$style["with-error"]]: hasError,
+                  [_ctx.$style["with-success"]]: hasSuccess && !hasError
+                }
+              ]]
+            }, {
+              ...unref(getNonRootAttrs)(_ctx.$attrs, ["onClick", "class"]),
+              ...__props.readOnly ? {} : 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",
+              "data-error": hasError ? "" : void 0,
+              tabindex: __props.disabled || __props.readOnly ? -1 : 0,
+              onClick: _cache[5] || (_cache[5] = ($event) => unref(focusSetInputFocus)()),
+              onFocus: _cache[6] || (_cache[6] = ($event) => unref(focusOnActivatorFocused)()),
+              onKeydown: [
+                _cache[7] || (_cache[7] = withKeys(($event) => unref(onEnter)($event), ["enter"])),
+                _cache[8] || (_cache[8] = withKeys(($event) => unref(onTab)($event), ["tab"])),
+                _cache[9] || (_cache[9] = withKeys(($event) => unref(moveSelectedValueHighlight)($event, false), ["left"])),
+                _cache[10] || (_cache[10] = withKeys(($event) => unref(moveSelectedValueHighlight)($event, true), ["right"])),
+                _cache[11] || (_cache[11] = withKeys(withModifiers(($event) => unref(moveHighlight)(true), ["prevent"]), ["up"])),
+                _cache[12] || (_cache[12] = withKeys(withModifiers(($event) => unref(moveHighlight)(false), ["prevent"]), ["down"]))
+              ]
+            }), [
               unref(outlined) || !unref(valueSet) && !unref(searchInputFocused) ? (openBlock(), createElementBlock("span", {
                 key: 0,
                 class: normalizeClass([
@@ -435,9 +424,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     __props.chips ? (openBlock(), createBlock(RuiChip, mergeProps({
                       key: unref(getTextToken)(unref(getIdentifier)(item)),
                       tabindex: "-1",
-                      size: unref(dense) ? "sm" : "md",
+                      size: __props.dense ? "sm" : "md",
                       closeable: "",
-                      class: { "leading-3": unref(dense) },
+                      class: { "leading-3": __props.dense },
                       clickable: ""
                     }, { ref_for: true }, chipAttrs(item, i)), {
                       default: withCtx(() => [
@@ -449,12 +438,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ])
                       ]),
                       _: 2
-                    }, 1040, ["size", "class"])) : unref(multiple) || !unref(searchInputFocused) && (unref(slots)["selection.prepend"] || unref(slots).selection) ? (openBlock(), createElementBlock("div", {
+                    }, 1040, ["size", "class"])) : unref(multiple) || !unref(searchInputFocused) && (slots["selection.prepend"] || slots.selection) ? (openBlock(), createElementBlock("div", {
                       key: 1,
                       class: normalizeClass(__props.hideSelectionWrapper ? "contents" : "flex")
                     }, [
                       renderSlot(_ctx.$slots, "selection.prepend", mergeProps({ index: i }, { ref_for: true }, { item })),
-                      unref(multiple) || unref(slots).selection ? renderSlot(_ctx.$slots, "selection", mergeProps({
+                      unref(multiple) || slots.selection ? renderSlot(_ctx.$slots, "selection", mergeProps({
                         key: 0,
                         index: i
                       }, { ref_for: true }, { item, chipAttrs: chipAttrs(item, i) }), () => [
@@ -466,27 +455,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("input", {
                   ref_key: "textInput",
                   ref: textInput,
-                  disabled: unref(disabled),
+                  disabled: __props.disabled,
                   value: unref(internalSearch),
                   class: normalizeClass(["bg-transparent outline-none", [unref(focusInputClass), { hidden: __props.hideSearchInput }]]),
                   type: "text",
                   placeholder: unref(usedPlaceholder),
                   "aria-invalid": 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_4)
               ], 2),
-              __props.clearable && unref(valueSet) && !unref(disabled) ? (openBlock(), createBlock(RuiButton, {
+              __props.clearable && unref(valueSet) && !__props.disabled ? (openBlock(), createBlock(RuiButton, {
                 key: 1,
                 variant: "text",
                 icon: "",
                 size: "sm",
                 tabindex: "-1",
                 color: "error",
-                class: normalizeClass(["group-hover:!visible", [_ctx.$style.clear, unref(focusAnyFocused) && "!visible", {
-                  "mr-2": !unref(dense)
-                }]]),
+                "data-id": "clear",
+                class: normalizeClass(["group-hover:!visible", [
+                  _ctx.$style.clear,
+                  unref(focusAnyFocused) && "!visible",
+                  {
+                    "mr-2": !__props.dense
+                  }
+                ]]),
                 onClick: _cache[3] || (_cache[3] = withModifiers(($event) => clear(), ["stop", "prevent"]))
               }, {
                 default: withCtx(() => [
@@ -503,7 +498,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 createVNode(RuiIcon, {
                   class: normalizeClass([_ctx.$style.icon, { "rotate-180": open }]),
-                  size: unref(dense) ? 16 : 24,
+                  size: __props.dense ? 16 : 24,
                   name: "lu-chevron-down"
                 }, null, 8, ["class", "size"])
               ], 2),
@@ -548,12 +543,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }), [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedData), ({ item, _index }) => {
                   return openBlock(), createBlock(RuiButton, {
-                    ref_for: true,
-                    ref_key: "renderedOptions",
-                    ref: renderedOptions,
                     key: unref(getIdentifier)(item)?.toString(),
                     active: unref(isActiveItem)(item),
-                    size: unref(dense) ? "sm" : void 0,
+                    "aria-selected": unref(isActiveItem)(item),
+                    size: __props.dense ? "sm" : void 0,
                     tabindex: "0",
                     variant: "list",
                     class: normalizeClass({
@@ -565,18 +558,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onMousedown: ($event) => highlightedIndex.value = _index
                   }, {
                     prepend: withCtx(() => [
-                      renderSlot(_ctx.$slots, "item.prepend", mergeProps({ ref_for: true }, { disabled: unref(disabled), item, active: unref(isActiveItem)(item) }))
+                      renderSlot(_ctx.$slots, "item.prepend", mergeProps({ ref_for: true }, { disabled: __props.disabled, item, active: unref(isActiveItem)(item) }))
                     ]),
                     append: withCtx(() => [
-                      renderSlot(_ctx.$slots, "item.append", mergeProps({ ref_for: true }, { disabled: unref(disabled), item, active: unref(isActiveItem)(item) }))
+                      renderSlot(_ctx.$slots, "item.append", mergeProps({ ref_for: true }, { disabled: __props.disabled, item, active: unref(isActiveItem)(item) }))
                     ]),
                     default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { disabled: unref(disabled), item, active: unref(isActiveItem)(item) }), () => [
+                      renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { disabled: __props.disabled, item, active: unref(isActiveItem)(item) }), () => [
                         createTextVNode(toDisplayString(unref(getText)(item)), 1)
                       ])
                     ]),
                     _: 2
-                  }, 1032, ["active", "size", "class", "onClick", "onMousedown"]);
+                  }, 1032, ["active", "aria-selected", "size", "class", "onClick", "onMousedown"]);
                 }), 128))
               ], 16)
             ], 16)) : !__props.hideNoData ? (openBlock(), createElementBlock("div", {