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

package/dist/components/forms/category-picker/RuiCategoryPicker.vue.d.ts

@@ -1,7 +1,7 @@
 import type { KeyOfType } from '../../../composables/dropdown-menu.js';
 import type { VueClassValue } from '../../../types/class-value';
-import { type CategoryPickerVariant } from './category-picker-styles.js';
 import { type DialogProps } from '../../overlays/dialog/RuiDialog.vue';
+import { type LabelPlacement } from '../../../composables/defaults/field.js';
 export interface RuiCategoryPickerClassNames {
     root?: VueClassValue;
     rail?: VueClassValue;
@@ -42,8 +42,8 @@ export interface RuiCategoryPickerProps<TValue, TItem> {
     dense?: boolean;
     clearable?: boolean;
     loading?: boolean;
-    /** Trigger field style: underline (`default`), `outlined`, or `filled`. */
-    variant?: CategoryPickerVariant;
+    /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */
+    labelPlacement?: LabelPlacement;
     /** Marks the trigger field as required (renders the asterisk). */
     required?: boolean;
     /** Validation errors rendered under the trigger field. */
@@ -85,9 +85,6 @@ declare const __VLS_export: <TValue, TItem>(__VLS_props: NonNullable<Awaited<typ
             item: TItem | undefined;
             text: string | undefined;
         }) => any;
-        'activator.label'?: (props: {
-            item: TItem | undefined;
-        }) => any;
         selection?: (props: {
             item: TItem;
         }) => any;

package/dist/components/forms/category-picker/RuiCategoryPicker.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 { breakpointsTailwind, useBreakpoints, useFocus } 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";
@@ -6,16 +9,16 @@ import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { Placement } from "../../../composables/floating.js";
 import RuiMenu_default from "../../overlays/menu/RuiMenu.js";
+import RuiFieldLabel_default from "../field-label/RuiFieldLabel.js";
 import RuiTextField_default from "../text-field/RuiTextField.js";
 import { activatorHandlers } from "../../overlays/menu/activator-handlers.js";
 import { categoryPickerActivatorStyles, categoryPickerStyles } from "./category-picker-styles.js";
 import RuiDialog_default from "../../overlays/dialog/RuiDialog.js";
 import { useCategoryPicker } from "../../../composables/forms/category-picker/use-category-picker.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { breakpointsTailwind, useBreakpoints, useFocus } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/forms/category-picker/RuiCategoryPicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"aria-labelledby",
 	"aria-controls",
 	"aria-expanded",
 	"aria-disabled",
@@ -29,7 +32,8 @@ var _hoisted_2 = [
 	"placeholder",
 	"readonly",
 	"disabled",
-	"aria-invalid"
+	"aria-invalid",
+	"aria-labelledby"
 ];
 var _hoisted_3 = ["id"];
 var _hoisted_4 = ["aria-label", "aria-activedescendant"];
@@ -84,7 +88,7 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			type: Boolean,
 			default: false
 		},
-		variant: { default: "outlined" },
+		labelPlacement: { default: () => void 0 },
 		required: {
 			type: Boolean,
 			default: false
@@ -140,13 +144,13 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			showAll: () => __props.showAll,
 			textAttr: __props.textAttr
 		});
-		const isMobile = computed(() => get$1(breakpoints.smaller(__props.mobileBreakpoint)));
-		const mode = computed(() => get$1(isMobile) ? "drill" : "twoPane");
+		const isMobile = computed(() => get(breakpoints.smaller(__props.mobileBreakpoint)));
+		const mode = computed(() => get(isMobile) ? "drill" : "twoPane");
 		/**
 		* Desktop anchors an outside-click popover under the field (RuiMenu); narrow
 		* width shows a full-width bottom sheet (RuiDialog).
 		*/
-		const shell = computed(() => get$1(isMobile) ? RuiDialog_default : RuiMenu_default);
+		const shell = computed(() => get(isMobile) ? RuiDialog_default : RuiMenu_default);
 		/**
 		* The bottom sheet's props. Each shell is given only its own props, so the
 		* other component's never leak through as attributes.
@@ -169,11 +173,8 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		*/
 		function menuShellProps() {
 			return {
-				anchorEl: get$1(fieldRef) ?? void 0,
-				classNames: {
-					content: "py-0",
-					menu: "z-[9999]"
-				},
+				anchorEl: get(fieldRef) ?? void 0,
+				classNames: { content: "py-0" },
 				closeOnContentClick: false,
 				disableAutoFocus: true,
 				fullWidth: true,
@@ -185,53 +186,45 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				persistOnActivatorClick: true
 			};
 		}
-		const shellProps = computed(() => get$1(isMobile) ? dialogShellProps() : menuShellProps());
+		const shellProps = computed(() => get(isMobile) ? dialogShellProps() : menuShellProps());
 		const ui = computed(() => categoryPickerStyles({
 			dense: __props.dense,
-			mode: get$1(mode)
+			mode: get(mode)
 		}));
 		const selectedItem = computed(() => {
-			const value = get$1(modelValue);
+			const value = get(modelValue);
 			if (value === void 0) return void 0;
 			return __props.items.find((item) => getIdentifier(item) === value);
 		});
 		const selectedText = computed(() => {
-			const selected = get$1(selectedItem);
+			const selected = get(selectedItem);
 			return selected ? getText(selected) : void 0;
 		});
-		const outlined = computed(() => __props.variant === "outlined");
+		const placement = useLabelPlacement(() => __props.labelPlacement);
 		/**
 		* Desktop lets the user type in the field itself (no separate search box);
 		* narrow width keeps a read-only trigger that opens the sheet's own search.
 		*/
-		const canType = computed(() => __props.searchable && !get$1(isMobile) && !__props.readOnly && !__props.disabled);
-		const isTyping = computed(() => get$1(isOpen) && get$1(canType));
-		const float = computed(() => (get$1(isOpen) || get$1(selectedItem) !== void 0 || get$1(focused)) && get$1(outlined));
-		const legendText = computed(() => {
-			if (!get$1(float) || !__props.label) return "";
-			return __props.required ? `${__props.label} ﹡` : __props.label;
-		});
+		const canType = computed(() => __props.searchable && !get(isMobile) && !__props.readOnly && !__props.disabled);
+		const isTyping = computed(() => get(isOpen) && get(canType));
 		/**
 		* Drives both the clear button itself and the room the selection overlay has
 		* to leave for it, so the two can never disagree.
 		*/
-		const showClear = computed(() => __props.clearable && get$1(selectedItem) !== void 0 && !__props.disabled && !__props.readOnly);
+		const showClear = computed(() => __props.clearable && get(selectedItem) !== void 0 && !__props.disabled && !__props.readOnly);
 		const activatorUi = computed(() => categoryPickerActivatorStyles({
 			dense: __props.dense,
 			disabled: __props.disabled,
-			filled: __props.variant === "filled",
-			float: get$1(float),
-			hasError: get$1(hasError),
-			hasSuccess: get$1(hasSuccess) && !get$1(hasError),
-			hovered: get$1(isHovered),
-			opened: get$1(isOpen),
-			outlined: get$1(outlined),
+			hasError: get(hasError),
+			hasSuccess: get(hasSuccess) && !get(hasError),
+			hovered: get(isHovered),
+			opened: get(isOpen),
 			readonly: __props.readOnly,
-			withClear: get$1(showClear)
+			withClear: get(showClear)
 		}));
-		const activeRailIndex = computed(() => get$1(railEntries).findIndex((entry) => entry.category === get$1(activeCategory)));
-		const showRail = computed(() => get$1(mode) === "twoPane" || get$1(drillStep) === "category");
-		const showDetail = computed(() => get$1(mode) === "twoPane" || get$1(drillStep) === "detail");
+		const activeRailIndex = computed(() => get(railEntries).findIndex((entry) => entry.category === get(activeCategory)));
+		const showRail = computed(() => get(mode) === "twoPane" || get(drillStep) === "category");
+		const showDetail = computed(() => get(mode) === "twoPane" || get(drillStep) === "detail");
 		function clamp(value, max) {
 			if (value < 0) return 0;
 			if (value > max) return max;
@@ -239,29 +232,29 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		}
 		function open() {
 			if (__props.disabled) return;
-			set$1(isOpen, true);
+			set(isOpen, true);
 		}
 		function close() {
-			set$1(isOpen, false);
+			set(isOpen, false);
 		}
 		function onInput(event) {
 			const target = event.target;
 			if (!(target instanceof HTMLInputElement)) return;
-			set$1(searchInput, target.value);
-			if (!get$1(isOpen)) open();
+			set(searchInput, target.value);
+			if (!get(isOpen)) open();
 		}
 		function selectItem(item) {
 			if (__props.readOnly) return;
-			set$1(modelValue, getIdentifier(item));
+			set(modelValue, getIdentifier(item));
 			emit("select", item);
 			close();
 		}
 		function clearSelection() {
-			set$1(modelValue, void 0);
+			set(modelValue, void 0);
 		}
 		function onCategoryClick(category) {
 			setActiveCategory(category);
-			if (get$1(mode) === "drill") set$1(drillStep, "detail");
+			if (get(mode) === "drill") set(drillStep, "detail");
 			else focusPane("detail");
 		}
 		/**
@@ -270,30 +263,30 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		* scrolls the page behind to reveal the pane.
 		*/
 		function focusPane(pane) {
-			set$1(focusedPane, pane);
+			set(focusedPane, pane);
 			nextTick(() => {
-				(pane === "rail" ? get$1(railRef) : get$1(detailRef))?.focus({ preventScroll: true });
+				(pane === "rail" ? get(railRef) : get(detailRef))?.focus({ preventScroll: true });
 			});
 		}
 		function moveRail(direction) {
-			const entries = get$1(railEntries);
+			const entries = get(railEntries);
 			if (entries.length === 0) return;
-			const next = clamp(get$1(activeRailIndex) + direction, entries.length - 1);
+			const next = clamp(get(activeRailIndex) + direction, entries.length - 1);
 			setActiveCategory(entries[next]?.category ?? null);
 		}
 		function moveItem(direction) {
-			const total = get$1(detailItems).length;
+			const total = get(detailItems).length;
 			if (total === 0) return;
-			set$1(highlightedItemIndex, clamp(get$1(highlightedItemIndex) + direction, total - 1));
+			set(highlightedItemIndex, clamp(get(highlightedItemIndex) + direction, total - 1));
 		}
 		function enterDetail() {
-			if (get$1(detailItems).length === 0) return;
+			if (get(detailItems).length === 0) return;
 			resetHighlightToSelection();
-			if (get$1(mode) === "drill") set$1(drillStep, "detail");
+			if (get(mode) === "drill") set(drillStep, "detail");
 			focusPane("detail");
 		}
 		function selectHighlighted() {
-			const item = get$1(detailItems)[get$1(highlightedItemIndex)];
+			const item = get(detailItems)[get(highlightedItemIndex)];
 			if (item !== void 0) selectItem(item);
 		}
 		/**
@@ -302,16 +295,16 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		* the input. Does nothing when the field is empty.
 		*/
 		function selectTopResult() {
-			if (!get$1(searchInput).trim()) return;
-			const item = get$1(detailItems)[0];
+			if (!get(searchInput).trim()) return;
+			const item = get(detailItems)[0];
 			if (item !== void 0) selectItem(item);
 		}
 		function resetHighlightToSelection() {
-			const index = get$1(detailItems).findIndex((item) => isSelected(item));
-			set$1(highlightedItemIndex, index >= 0 ? index : 0);
+			const index = get(detailItems).findIndex((item) => isSelected(item));
+			set(highlightedItemIndex, index >= 0 ? index : 0);
 		}
 		function backToRail() {
-			if (get$1(mode) === "drill") set$1(drillStep, "category");
+			if (get(mode) === "drill") set(drillStep, "category");
 			else focusPane("rail");
 		}
 		function scrollActiveDescendantIntoView(container, id) {
@@ -324,10 +317,10 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 			resetHighlightToSelection();
 		});
 		watch(highlightedItemIndex, (index) => {
-			scrollActiveDescendantIntoView(get$1(detailRef), `${baseId}-opt-${index}`);
+			scrollActiveDescendantIntoView(get(detailRef), `${baseId}-opt-${index}`);
 		});
 		watch(activeRailIndex, (index) => {
-			if (index >= 0) scrollActiveDescendantIntoView(get$1(railRef), `${baseId}-cat-${index}`);
+			if (index >= 0) scrollActiveDescendantIntoView(get(railRef), `${baseId}-cat-${index}`);
 		});
 		/**
 		* Opening takes focus where the user types next: desktop is a combobox, so
@@ -339,13 +332,13 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		function onOpenChanged(value) {
 			if (value) {
 				syncActiveToSelection();
-				set$1(focusedPane, "rail");
-				set$1(drillStep, "category");
+				set(focusedPane, "rail");
+				set(drillStep, "category");
 				resetHighlightToSelection();
-				nextTick(() => (get$1(canType) ? get$1(activatorRef) : get$1(railRef))?.focus({ preventScroll: true }));
+				nextTick(() => (get(canType) ? get(activatorRef) : get(railRef))?.focus({ preventScroll: true }));
 			} else {
-				set$1(searchInput, "");
-				nextTick(() => get$1(activatorRef)?.focus({ preventScroll: true }));
+				set(searchInput, "");
+				nextTick(() => get(activatorRef)?.focus({ preventScroll: true }));
 			}
 		}
 		watch(isOpen, onOpenChanged);
@@ -363,97 +356,105 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 					item: unref(selectedItem),
 					open,
 					text: unref(selectedText)
-				})), () => [createElementVNode("div", { class: normalizeClass(unref(activatorUi).wrapper()) }, [createElementVNode("div", mergeProps({
-					ref_key: "fieldRef",
-					ref: fieldRef,
-					role: "combobox",
-					"data-id": "activator",
-					class: unref(activatorUi).activator(),
-					"aria-haspopup": "dialog",
-					"aria-controls": unref(isOpen) ? `${unref(baseId)}-panel` : void 0,
-					"aria-expanded": unref(isOpen),
-					"aria-disabled": __props.disabled || void 0,
-					"aria-readonly": __props.readOnly || !unref(canType) || void 0,
-					"aria-required": __props.required || void 0,
-					"aria-invalid": unref(hasError) || void 0,
-					"aria-busy": __props.loading || void 0
-				}, __props.readOnly ? {} : unref(activatorHandlers)(attrs), {
-					onMouseenter: _cache[5] || (_cache[5] = ($event) => isHovered.value = true),
-					onMouseleave: _cache[6] || (_cache[6] = ($event) => isHovered.value = false)
-				}), [
-					unref(outlined) || !unref(selectedItem) && !unref(isTyping) ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(unref(activatorUi).label())
-					}, [renderSlot(_ctx.$slots, "activator.label", normalizeProps(guardReactiveProps({ item: unref(selectedItem) })), () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", {
+				})), () => [createElementVNode("div", { class: normalizeClass(unref(activatorUi).wrapper()) }, [
+					__props.label ? (openBlock(), createBlock(RuiFieldLabel_default, {
 						key: 0,
-						class: normalizeClass(unref(activatorUi).required())
-					}, " ﹡ ", 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
-					unref(selectedItem) && !unref(isTyping) && _ctx.$slots.selection ? (openBlock(), createElementBlock("span", {
-						key: 1,
-						"data-id": "selection",
-						class: normalizeClass(unref(activatorUi).selection())
-					}, [renderSlot(_ctx.$slots, "selection.prepend", normalizeProps(guardReactiveProps({ item: unref(selectedItem) }))), renderSlot(_ctx.$slots, "selection", normalizeProps(guardReactiveProps({ item: unref(selectedItem) })))], 2)) : createCommentVNode("", true),
-					createElementVNode("input", {
-						ref_key: "activatorRef",
-						ref: activatorRef,
-						"data-id": "search-input",
-						value: unref(isTyping) ? searchInput.value : _ctx.$slots.selection && unref(selectedItem) ? "" : unref(selectedText) ?? "",
-						placeholder: unref(isTyping) ? __props.placeholder : "",
-						readonly: !unref(canType),
-						disabled: __props.disabled,
+						id: `${unref(baseId)}-label`,
+						text: __props.label,
+						hidden: unref(placement) === "hidden",
+						required: __props.required,
+						disabled: __props.disabled
+					}, null, 8, [
+						"id",
+						"text",
+						"hidden",
+						"required",
+						"disabled"
+					])) : createCommentVNode("", true),
+					createElementVNode("div", mergeProps({
+						ref_key: "fieldRef",
+						ref: fieldRef,
+						role: "combobox",
+						"data-id": "activator",
+						class: unref(activatorUi).activator(),
+						"aria-labelledby": __props.label ? `${unref(baseId)}-label` : void 0,
+						"aria-haspopup": "dialog",
+						"aria-controls": unref(isOpen) ? `${unref(baseId)}-panel` : void 0,
+						"aria-expanded": unref(isOpen),
+						"aria-disabled": __props.disabled || void 0,
+						"aria-readonly": __props.readOnly || !unref(canType) || void 0,
+						"aria-required": __props.required || void 0,
 						"aria-invalid": unref(hasError) || void 0,
-						class: normalizeClass(["bg-transparent outline-none", [unref(activatorUi).value(), !unref(canType) && "cursor-pointer"]]),
-						onInput: _cache[0] || (_cache[0] = ($event) => onInput($event)),
-						onKeydown: [
-							_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => focusPane("rail"), ["prevent"]), ["down"])),
-							_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => selectTopResult(), ["prevent"]), ["enter"])),
-							_cache[3] || (_cache[3] = withKeys(($event) => close(), ["esc"]))
-						]
-					}, null, 42, _hoisted_2),
-					unref(showClear) ? (openBlock(), createElementBlock("span", {
-						key: 2,
-						"data-id": "clear",
-						class: normalizeClass([
-							unref(activatorUi).clear(),
-							unref(focused) && "!visible",
-							{ "mr-2": !__props.dense }
-						]),
-						onClick: _cache[4] || (_cache[4] = withModifiers(($event) => clearSelection(), ["stop", "prevent"]))
-					}, [createVNode(RuiIcon_default, {
-						color: "error",
-						name: "lu-x",
-						size: "18"
-					})], 2)) : createCommentVNode("", true),
-					createElementVNode("span", {
-						"data-id": "chevron",
-						class: normalizeClass(unref(activatorUi).iconWrapper())
-					}, [createVNode(RuiIcon_default, {
-						class: normalizeClass(unref(activatorUi).icon()),
-						size: __props.dense ? 16 : 24,
-						name: "lu-chevron-down"
-					}, null, 8, ["class", "size"])], 2),
-					__props.loading ? (openBlock(), createBlock(RuiProgress_default, {
-						key: 3,
-						class: normalizeClass(unref(activatorUi).progress()),
-						color: "primary",
-						thickness: "3",
-						variant: "indeterminate"
-					}, null, 8, ["class"])) : createCommentVNode("", true),
-					unref(outlined) ? (openBlock(), createElementBlock("fieldset", {
-						key: 4,
-						class: normalizeClass(unref(activatorUi).fieldset())
-					}, [createElementVNode("legend", { class: normalizeClass(unref(activatorUi).legend()) }, toDisplayString(unref(legendText)), 3)], 2)) : createCommentVNode("", true)
-				], 16, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
-					key: 0,
-					class: "px-3 pt-1",
-					"error-messages": __props.errorMessages,
-					"success-messages": __props.successMessages,
-					hint: __props.hint
-				}, null, 8, [
-					"error-messages",
-					"success-messages",
-					"hint"
-				])) : createCommentVNode("", true)], 2)])]),
+						"aria-busy": __props.loading || void 0
+					}, __props.readOnly ? {} : unref(activatorHandlers)(attrs), {
+						onMouseenter: _cache[5] || (_cache[5] = ($event) => isHovered.value = true),
+						onMouseleave: _cache[6] || (_cache[6] = ($event) => isHovered.value = false)
+					}), [
+						unref(selectedItem) && !unref(isTyping) && _ctx.$slots.selection ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							"data-id": "selection",
+							class: normalizeClass(unref(activatorUi).selection())
+						}, [renderSlot(_ctx.$slots, "selection.prepend", normalizeProps(guardReactiveProps({ item: unref(selectedItem) }))), renderSlot(_ctx.$slots, "selection", normalizeProps(guardReactiveProps({ item: unref(selectedItem) })))], 2)) : createCommentVNode("", true),
+						createElementVNode("input", {
+							ref_key: "activatorRef",
+							ref: activatorRef,
+							"data-id": "search-input",
+							value: unref(isTyping) ? searchInput.value : _ctx.$slots.selection && unref(selectedItem) ? "" : unref(selectedText) ?? "",
+							placeholder: unref(isTyping) ? __props.placeholder : "",
+							readonly: !unref(canType),
+							disabled: __props.disabled,
+							"aria-invalid": unref(hasError) || void 0,
+							"aria-labelledby": __props.label ? `${unref(baseId)}-label` : void 0,
+							class: normalizeClass(["bg-transparent outline-hidden", [unref(activatorUi).value(), !unref(canType) && "cursor-pointer"]]),
+							onInput: _cache[0] || (_cache[0] = ($event) => onInput($event)),
+							onKeydown: [
+								_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => focusPane("rail"), ["prevent"]), ["down"])),
+								_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => selectTopResult(), ["prevent"]), ["enter"])),
+								_cache[3] || (_cache[3] = withKeys(($event) => close(), ["esc"]))
+							]
+						}, null, 42, _hoisted_2),
+						unref(showClear) ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							"data-id": "clear",
+							class: normalizeClass([
+								unref(activatorUi).clear(),
+								unref(focused) && "visible!",
+								{ "mr-2": !__props.dense }
+							]),
+							onClick: _cache[4] || (_cache[4] = withModifiers(($event) => clearSelection(), ["stop", "prevent"]))
+						}, [createVNode(RuiIcon_default, {
+							name: "lu-x",
+							size: "16"
+						})], 2)) : createCommentVNode("", true),
+						createElementVNode("span", {
+							"data-id": "chevron",
+							class: normalizeClass(unref(activatorUi).iconWrapper())
+						}, [createVNode(RuiIcon_default, {
+							class: normalizeClass(unref(activatorUi).icon()),
+							size: __props.dense ? 16 : 20,
+							name: "lu-chevron-down"
+						}, null, 8, ["class", "size"])], 2),
+						__props.loading ? (openBlock(), createBlock(RuiProgress_default, {
+							key: 2,
+							class: normalizeClass(unref(activatorUi).progress()),
+							color: "primary",
+							thickness: "3",
+							variant: "indeterminate"
+						}, null, 8, ["class"])) : createCommentVNode("", true),
+						createElementVNode("fieldset", { class: normalizeClass(unref(activatorUi).fieldset()) }, null, 2)
+					], 16, _hoisted_1),
+					!__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+						key: 1,
+						class: "pt-1",
+						"error-messages": __props.errorMessages,
+						"success-messages": __props.successMessages,
+						hint: __props.hint
+					}, null, 8, [
+						"error-messages",
+						"success-messages",
+						"hint"
+					])) : createCommentVNode("", true)
+				], 2)])]),
 				default: withCtx(() => [createElementVNode("div", {
 					id: `${unref(baseId)}-panel`,
 					class: normalizeClass(unref(ui).root({ class: unref(cn)(__props.classNames?.root) })),
@@ -469,7 +470,6 @@ var RuiCategoryPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						class: normalizeClass(unref(cn)(__props.classNames?.search)),
 						placeholder: __props.placeholder,
 						dense: __props.dense,
-						variant: "outlined",
 						"prepend-icon": "lu-search",
 						"hide-details": "",
 						clearable: "",