niuma-ui 1.2.6 → 1.2.9

package/dist/components/RsSelect.css

@@ -1,12 +1,12 @@
 
-.rs-select[data-v-48ee70c4] {
+.rs-select[data-v-956c54dc] {
   display: inline-flex;
   width: 100%;
   max-width: 100%;
   vertical-align: middle;
   box-sizing: border-box;
 }
-.rs-select__trigger[data-v-48ee70c4] {
+.rs-select__trigger[data-v-956c54dc] {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -31,13 +31,13 @@
     box-shadow var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-select--multiple .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
   min-height: var(--rs-control-height-md);
   height: auto;
   padding-top: var(--rs-space-xs);
   padding-bottom: var(--rs-space-xs);
 }
-.rs-select--block[data-v-48ee70c4] {
+.rs-select--block[data-v-956c54dc] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -46,41 +46,56 @@
   align-self: stretch;
   box-sizing: border-box;
 }
-.rs-select--block .rs-select__anchor[data-v-48ee70c4],
-.rs-select--block .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--block .rs-select__anchor[data-v-956c54dc],
+.rs-select--block .rs-select__trigger[data-v-956c54dc] {
   width: 100%;
 }
-.rs-select--ssm .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--ssm .rs-select__trigger[data-v-956c54dc] {
   height: var(--rs-control-height-ssm);
   min-height: var(--rs-control-height-ssm);
   padding: 0 var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
 }
-.rs-select--ssm.rs-select--multiple .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--ssm.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
   min-height: var(--rs-control-height-ssm);
 }
-.rs-select--sm .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--sm .rs-select__trigger[data-v-956c54dc] {
   height: var(--rs-control-height-sm);
   min-height: var(--rs-control-height-sm);
   padding: 0 var(--rs-space-sm);
   font-size: var(--rs-font-size-xs);
 }
-.rs-select--sm.rs-select--multiple .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--sm.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
   min-height: var(--rs-control-height-sm);
 }
-.rs-select--lg .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--lg .rs-select__trigger[data-v-956c54dc] {
   height: var(--rs-control-height-lg);
   min-height: var(--rs-control-height-lg);
   padding: 0 var(--rs-space-lg);
   font-size: var(--rs-font-size-base);
 }
-.rs-select--lg.rs-select--multiple .rs-select__trigger[data-v-48ee70c4] {
+.rs-select--lg.rs-select--multiple .rs-select__trigger[data-v-956c54dc] {
   min-height: var(--rs-control-height-lg);
 }
-.rs-select__trigger[data-v-48ee70c4]:hover:not([data-disabled]) {
+.rs-select--filled .rs-select__trigger[data-v-956c54dc] {
+  border-color: transparent;
+  background: var(--rs-surface-hover);
+}
+.rs-select--borderless .rs-select__trigger[data-v-956c54dc] {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.rs-select__mark[data-v-956c54dc] {
+  padding: 0;
+  background: color-mix(in srgb, var(--rs-primary) 22%, transparent);
+  color: inherit;
+  font-weight: var(--rs-font-weight-medium);
+}
+.rs-select__trigger[data-v-956c54dc]:hover:not([data-disabled]) {
   border-color: var(--rs-input-border-hover, var(--rs-border));
 }
-.rs-select__trigger[data-v-48ee70c4]:focus-visible {
+.rs-select__trigger[data-v-956c54dc]:focus-visible {
   outline: none;
   border-color: var(--rs-focus-border, var(--rs-primary));
   background: var(--rs-input-bg);
@@ -88,32 +103,32 @@
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-select__trigger[data-disabled][data-v-48ee70c4] {
+.rs-select__trigger[data-disabled][data-v-956c54dc] {
   opacity: 0.38;
   cursor: not-allowed;
   background: var(--rs-surface-hover);
 }
-.rs-select__trigger--invalid[data-v-48ee70c4] {
+.rs-select__trigger--invalid[data-v-956c54dc] {
   border-color: var(--rs-danger);
 }
-.rs-select__trigger--invalid[data-v-48ee70c4]:focus-visible {
+.rs-select__trigger--invalid[data-v-956c54dc]:focus-visible {
   border-color: var(--rs-danger);
   box-shadow:
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px)
       color-mix(in srgb, var(--rs-danger) 14%, transparent);
 }
-.rs-select__trigger--warning[data-v-48ee70c4] {
+.rs-select__trigger--warning[data-v-956c54dc] {
   border-color: var(--rs-warning, #d97706);
 }
-.rs-select__trigger--warning[data-v-48ee70c4]:focus-visible {
+.rs-select__trigger--warning[data-v-956c54dc]:focus-visible {
   border-color: var(--rs-warning, #d97706);
   box-shadow:
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px)
       color-mix(in srgb, var(--rs-warning, #d97706) 14%, transparent);
 }
-.rs-select__value[data-v-48ee70c4] {
+.rs-select__value[data-v-956c54dc] {
   flex: 1;
   min-width: 0;
   text-align: left;
@@ -121,7 +136,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-select__value--multiple[data-v-48ee70c4] {
+.rs-select__value--multiple[data-v-956c54dc] {
   display: flex;
   flex-wrap: nowrap;
   gap: var(--rs-space-xs);
@@ -129,28 +144,28 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.rs-select__prefix[data-v-48ee70c4] {
+.rs-select__prefix[data-v-956c54dc] {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--rs-muted);
 }
-.rs-select__tag--rest[data-v-48ee70c4] {
+.rs-select__tag--rest[data-v-956c54dc] {
   padding-right: 0.5rem;
   color: var(--rs-muted);
   background: var(--rs-surface-hover);
   border-color: var(--rs-border);
 }
-.rs-select__placeholder[data-v-48ee70c4] {
+.rs-select__placeholder[data-v-956c54dc] {
   color: var(--rs-placeholder);
 }
-.rs-select__single-label[data-v-48ee70c4] {
+.rs-select__single-label[data-v-956c54dc] {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-select__tag[data-v-48ee70c4] {
+.rs-select__tag[data-v-956c54dc] {
   display: inline-flex;
   align-items: center;
   gap: 0.125rem;
@@ -164,12 +179,12 @@
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-tight);
 }
-.rs-select__tag-label[data-v-48ee70c4] {
+.rs-select__tag-label[data-v-956c54dc] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-select__tag-remove[data-v-48ee70c4] {
+.rs-select__tag-remove[data-v-956c54dc] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -185,17 +200,17 @@
     color var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-select__tag-remove[data-v-48ee70c4]:hover {
+.rs-select__tag-remove[data-v-956c54dc]:hover {
   color: var(--rs-on-primary-container);
   background: color-mix(in srgb, var(--rs-primary) 16%, transparent);
 }
-.rs-select__actions[data-v-48ee70c4] {
+.rs-select__actions[data-v-956c54dc] {
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-xs);
   flex-shrink: 0;
 }
-.rs-select__clear[data-v-48ee70c4] {
+.rs-select__clear[data-v-956c54dc] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -211,23 +226,23 @@
     color var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-select__clear[data-v-48ee70c4]:hover {
+.rs-select__clear[data-v-956c54dc]:hover {
   color: var(--rs-text);
   background: var(--rs-item-hover);
 }
-.rs-select__suffix[data-v-48ee70c4] {
+.rs-select__suffix[data-v-956c54dc] {
   display: inline-flex;
   align-items: center;
 }
-.rs-select__icon[data-v-48ee70c4] {
+.rs-select__icon[data-v-956c54dc] {
   color: var(--rs-muted);
   flex-shrink: 0;
   transition: transform var(--rs-transition-fast);
 }
-.rs-select__trigger[data-state='open'] .rs-select__icon[data-v-48ee70c4] {
+.rs-select__trigger[data-state='open'] .rs-select__icon[data-v-956c54dc] {
   transform: rotate(180deg);
 }
-.rs-select__item--create .rs-select__item-label[data-v-48ee70c4] {
+.rs-select__item--create .rs-select__item-label[data-v-956c54dc] {
   color: var(--rs-primary);
   font-weight: var(--rs-font-weight-medium);
 }

package/dist/components/RsSelect.d.ts

@@ -1,6 +1,6 @@
 import type { RsComponentSize, RsRadius } from '../theme/types';
 import { type RsFormRuleTrigger } from './form-rules';
-import { type RsSelectFieldNames, type RsSelectFilterOption, type RsSelectFilterSort, type RsSelectGetPopupContainer, type RsSelectOption, type RsSelectOptionFilterProp, type RsSelectOptionsInput, type RsSelectPlacement, type RsSelectResolvedModel, type RsSelectStatus, type RsSelectValue } from './select-utils';
+import { type RsSelectFieldNames, type RsSelectFilterOption, type RsSelectFilterSort, type RsSelectGetPopupContainer, type RsSelectMaxTagCount, type RsSelectModelValue, type RsSelectOption, type RsSelectOptionFilterProp, type RsSelectOptionsInput, type RsSelectPlacement, type RsSelectStatus, type RsSelectVariant, type RsSelectValue } from './select-utils';
 declare const __VLS_export: <Value extends string | number = string, Multiple extends boolean = false, LabelInValue extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         options: RsSelectOptionsInput;
@@ -13,7 +13,8 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
          * 开启后若未显式关 searchable，将自动启用搜索框。
          */
         creatable?: boolean;
-        multiple?: Multiple;
+        /** 运行时必须是 boolean；写成泛型 Multiple 时 :multiple="true" 可能进 attrs，Combobox 会按单选。 */
+        multiple?: boolean;
         required?: boolean;
         name?: string;
         clearable?: boolean;
@@ -39,10 +40,21 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
          */
         filterOption?: RsSelectFilterOption | boolean;
         optionFilterProp?: RsSelectOptionFilterProp;
-        maxTagCount?: number;
+        maxTagCount?: RsSelectMaxTagCount;
+        /** 远程 @search 防抖毫秒 */
+        debounce?: number;
+        /** 对齐 Ant 5；不影响面板内搜索 / 创建 */
+        variant?: RsSelectVariant;
+        autoFocus?: boolean;
+        dropdownStyle?: Record<string, string>;
+        classNames?: {
+            popup?: string;
+            trigger?: string;
+        };
         maxTagPlaceholder?: string | ((omitted: number) => string);
         multipleLimit?: number;
-        labelInValue?: LabelInValue;
+        /** 与 multiple 相同：不能写成泛型 LabelInValue，否则 withDefaults 的 false 过不了 InferDefault。 */
+        labelInValue?: boolean;
         filterSort?: RsSelectFilterSort;
         maxTagTextLength?: number;
         maxTagTooltip?: boolean;
@@ -65,16 +77,24 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
         /** 下拉挂载容器，对齐 Ant getPopupContainer */
         getPopupContainer?: RsSelectGetPopupContainer;
     } & {
-        modelValue?: RsSelectResolvedModel<Value, Multiple, LabelInValue>;
+        /**
+         * multiple / labelInValue 是运行时 boolean，不能从 prop 推断字面量。
+         * v-model 收完整联合，模板传入 string / number / 数组 / labeled 即可。
+         */
+        modelValue?: RsSelectModelValue;
         open?: boolean;
         searchValue?: string;
     }) & {
         onSearch?: ((query: string) => any) | undefined;
         onSelect?: ((value: RsSelectValue, option?: RsSelectOption | undefined) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
         onClear?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: RsSelectResolvedModel<Value, Multiple, LabelInValue>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: RsSelectModelValue) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onDeselect?: ((value: RsSelectValue, option?: RsSelectOption | undefined) => any) | undefined;
+        onDropdownVisibleChange?: ((open: boolean) => any) | undefined;
+        onPopupScroll?: ((event: Event) => any) | undefined;
         "onUpdate:searchValue"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -135,7 +155,7 @@ declare const __VLS_export: <Value extends string | number = string, Multiple ex
     } & {
         footer?: (props: {}) => any;
     };
-    emit: (((evt: "search", query: string) => void) & ((evt: "select", value: RsSelectValue, option?: RsSelectOption | undefined) => void) & ((evt: "clear") => void) & ((evt: "deselect", value: RsSelectValue, option?: RsSelectOption | undefined) => void)) & (((event: "update:modelValue", value: RsSelectResolvedModel<Value, Multiple, LabelInValue>) => void) & ((event: "update:open", value: boolean) => void) & ((event: "update:searchValue", value: string) => void));
+    emit: (((evt: "search", query: string) => void) & ((evt: "select", value: RsSelectValue, option?: RsSelectOption | undefined) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "clear") => void) & ((evt: "deselect", value: RsSelectValue, option?: RsSelectOption | undefined) => void) & ((evt: "dropdownVisibleChange", open: boolean) => void) & ((evt: "popupScroll", event: Event) => void)) & (((event: "update:modelValue", value: RsSelectModelValue) => void) & ((event: "update:open", value: boolean) => void) & ((event: "update:searchValue", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/RsSelect.impl.js

@@ -6,9 +6,9 @@ import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormIt
 import { useResolvedRsComponentSize } from "./resolve-size.js";
 import { rsRadiusCss, useResolvedRsRadius } from "./resolve-radius.js";
 import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ComboboxViewport, ComboboxVirtualizer } from "./reka.js";
-import { isSelectOptionGroup, toComboboxValue } from "./select-utils.js";
+import { isSelectOptionGroup, splitSelectLabelHighlight, toComboboxValue } from "./select-utils.js";
 import { useRsSelect } from "./use-rs-select.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useModel, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useModel, watch, withCtx, withModifiers } from "vue";
 //#region src/components/RsSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -53,9 +53,21 @@ var _hoisted_15 = {
 	class: "rs-select__status"
 };
 var _hoisted_16 = { class: "rs-select__item-label" };
-var _hoisted_17 = { class: "rs-select__item-label" };
+var _hoisted_17 = {
+	key: 0,
+	class: "rs-select__mark"
+};
 var _hoisted_18 = { class: "rs-select__item-label" };
 var _hoisted_19 = { class: "rs-select__item-label" };
+var _hoisted_20 = {
+	key: 0,
+	class: "rs-select__mark"
+};
+var _hoisted_21 = { class: "rs-select__item-label" };
+var _hoisted_22 = {
+	key: 0,
+	class: "rs-select__mark"
+};
 var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "RsSelect",
@@ -75,7 +87,10 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			type: Boolean,
 			default: false
 		},
-		multiple: {},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
 		required: {
 			type: Boolean,
 			default: false
@@ -119,9 +134,20 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		},
 		optionFilterProp: { default: "label" },
 		maxTagCount: {},
+		debounce: { default: 0 },
+		variant: { default: "outlined" },
+		autoFocus: {
+			type: Boolean,
+			default: false
+		},
+		dropdownStyle: {},
+		classNames: {},
 		maxTagPlaceholder: {},
 		multipleLimit: {},
-		labelInValue: {},
+		labelInValue: {
+			type: Boolean,
+			default: false
+		},
 		filterSort: {},
 		maxTagTextLength: {},
 		maxTagTooltip: {
@@ -163,13 +189,21 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		"search",
 		"select",
 		"deselect",
-		"clear"
+		"clear",
+		"focus",
+		"blur",
+		"dropdownVisibleChange",
+		"popupScroll"
 	], [
 		"update:modelValue",
 		"update:open",
 		"update:searchValue"
 	]),
 	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* multiple / labelInValue 是运行时 boolean，不能从 prop 推断字面量。
+		* v-model 收完整联合，模板传入 string / number / 数组 / labeled 即可。
+		*/
 		const model = useModel(__props, "modelValue");
 		const open = useModel(__props, "open");
 		const searchQuery = useModel(__props, "searchValue");
@@ -184,7 +218,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			name: props.name
 		}));
 		const anchorRef = ref(null);
-		const { resolvedPlaceholder, resolvedSearchPlaceholder, resolvedEmptyText, resolvedLoadingText, isSearchable, labelMap, useVirtual, useManualFilter, displayOptions, createValue, canCreate, createOptionLabel, virtualValues, selectedValues, hasValue, visibleTagTokens, omittedTagCount, omittedTagLabel, omittedTagTitle, singleDisplayLabel, comboboxModel, tokenLabel, truncateTagLabel, optionFromToken, optionOrCreate, isOptionLimited, isTokenDisabled, restoreTokenValue, onSearchKeydown, onClear, removeTag, setValue, resetSearch } = useRsSelect(props, model, open, searchQuery, emit, t);
+		const { resolvedPlaceholder, resolvedSearchPlaceholder, resolvedEmptyText, resolvedLoadingText, isMultiple, isSearchable, labelMap, useVirtual, useManualFilter, displayOptions, createValue, canCreate, createOptionLabel, virtualValues, selectedValues, hasValue, visibleTagTokens, omittedTagCount, omittedTagLabel, omittedTagTitle, singleDisplayLabel, comboboxModel, tokenLabel, truncateTagLabel, optionFromToken, optionOrCreate, isOptionLimited, isTokenDisabled, restoreTokenValue, onSearchKeydown, onClear, removeTag, setValue, resetSearch } = useRsSelect(props, model, open, searchQuery, emit, t);
 		const resolvedDisabled = computed(() => props.disabled || formContext?.disabled.value || false);
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
 		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
@@ -242,21 +276,84 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			clearValidation,
 			validate: runValidate
 		});
+		watch(open, (isOpen) => {
+			emit("dropdownVisibleChange", isOpen);
+		});
+		onMounted(() => {
+			if (!props.autoFocus) return;
+			const el = anchorRef.value;
+			const node = el instanceof HTMLElement ? el : el?.$el;
+			((node instanceof HTMLElement ? node : void 0)?.querySelector?.(".rs-select__trigger"))?.focus();
+		});
+		const responsiveTagCap = ref(null);
+		let tagResize;
+		function measureResponsiveTags() {
+			if (props.maxTagCount !== "responsive" || !isMultiple.value) {
+				responsiveTagCap.value = null;
+				return;
+			}
+			const el = anchorRef.value;
+			const node = el instanceof HTMLElement ? el : el?.$el;
+			const trigger = (node instanceof HTMLElement ? node : void 0)?.querySelector?.(".rs-select__value--multiple");
+			if (!trigger) return;
+			const budget = trigger.clientWidth - 48;
+			if (budget <= 0) return;
+			const tags = Array.from(trigger.querySelectorAll(".rs-select__tag"));
+			if (!tags.length) {
+				responsiveTagCap.value = selectedValues.value.length;
+				return;
+			}
+			let used = 0;
+			let fit = 0;
+			for (const tag of tags) {
+				if (tag.classList.contains("rs-select__tag--rest")) continue;
+				const next = used + tag.offsetWidth + 4;
+				if (next > budget && fit > 0) break;
+				used = next;
+				fit += 1;
+			}
+			responsiveTagCap.value = Math.max(1, fit);
+		}
+		onMounted(() => {
+			if (typeof ResizeObserver === "undefined") return;
+			tagResize = new ResizeObserver(() => measureResponsiveTags());
+			nextTick(() => {
+				const el = anchorRef.value;
+				const node = el instanceof HTMLElement ? el : el?.$el;
+				if (node instanceof HTMLElement) tagResize?.observe(node);
+				measureResponsiveTags();
+			});
+		});
+		onUnmounted(() => tagResize?.disconnect());
+		watch(() => [
+			selectedValues.value.join("\0"),
+			props.maxTagCount,
+			isMultiple.value
+		], () => void nextTick(measureResponsiveTags));
+		const shownTagTokens = computed(() => {
+			if (props.maxTagCount !== "responsive" || responsiveTagCap.value == null) return visibleTagTokens.value;
+			return selectedValues.value.slice(0, responsiveTagCap.value);
+		});
+		const shownOmittedCount = computed(() => props.maxTagCount === "responsive" ? Math.max(0, selectedValues.value.length - shownTagTokens.value.length) : omittedTagCount.value);
+		function highlightParts(label) {
+			return splitSelectLabelHighlight(label, isSearchable.value ? searchQuery.value : "");
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxRoot), {
 				modelValue: unref(comboboxModel),
-				"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => isRef(comboboxModel) ? comboboxModel.value = $event : null),
+				"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isRef(comboboxModel) ? comboboxModel.value = $event : null),
 				open: open.value,
-				"onUpdate:open": _cache[7] || (_cache[7] = ($event) => open.value = $event),
+				"onUpdate:open": _cache[10] || (_cache[10] = ($event) => open.value = $event),
 				class: normalizeClass(["rs-select", {
-					"rs-select--multiple": __props.multiple,
+					"rs-select--multiple": unref(isMultiple),
 					"rs-select--searchable": unref(isSearchable),
 					"rs-select--creatable": __props.creatable,
 					"rs-select--block": __props.block,
-					[`rs-select--${unref(resolvedSize)}`]: true
+					[`rs-select--${unref(resolvedSize)}`]: true,
+					[`rs-select--${__props.variant}`]: true
 				}]),
 				style: normalizeStyle(rootStyle.value),
-				multiple: __props.multiple,
+				multiple: unref(isMultiple),
 				disabled: resolvedDisabled.value,
 				"ignore-filter": unref(useManualFilter),
 				"reset-search-term-on-select": __props.autoClearSearchValue,
@@ -269,15 +366,17 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				}, {
 					default: withCtx(() => [createVNode(unref(ComboboxTrigger), mergeProps(unref(attrs), {
 						id: __props.id,
-						class: ["rs-select__trigger", {
+						class: ["rs-select__trigger", [__props.classNames?.trigger, {
 							"rs-select__trigger--invalid": isInvalid.value,
 							"rs-select__trigger--warning": isWarning.value
-						}],
-						"aria-invalid": isInvalid.value || void 0
+						}]],
+						"aria-invalid": isInvalid.value || void 0,
+						onFocus: _cache[3] || (_cache[3] = ($event) => emit("focus", $event)),
+						onBlur: _cache[4] || (_cache[4] = ($event) => emit("blur", $event))
 					}), {
 						default: withCtx(() => [
 							_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)])) : createCommentVNode("", true),
-							__props.multiple ? (openBlock(), createElementBlock("span", _hoisted_2, [unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleTagTokens), (value) => {
+							unref(isMultiple) ? (openBlock(), createElementBlock("span", _hoisted_2, [unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(shownTagTokens.value, (value) => {
 								return openBlock(), createElementBlock("span", {
 									key: value,
 									class: "rs-select__tag"
@@ -295,11 +394,11 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 									name: "x",
 									size: 12
 								})], 40, _hoisted_4)], true)]);
-							}), 128)), unref(omittedTagCount) > 0 ? (openBlock(), createElementBlock("span", {
+							}), 128)), shownOmittedCount.value > 0 ? (openBlock(), createElementBlock("span", {
 								key: 0,
 								class: "rs-select__tag rs-select__tag--rest",
 								title: unref(omittedTagTitle)
-							}, [renderSlot(_ctx.$slots, "maxTagPlaceholder", { omitted: unref(omittedTagCount) }, () => [createTextVNode(toDisplayString(unref(omittedTagLabel)), 1)], true)], 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_7, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])),
+							}, [renderSlot(_ctx.$slots, "maxTagPlaceholder", { omitted: shownOmittedCount.value }, () => [createTextVNode(toDisplayString(typeof __props.maxTagPlaceholder === "function" ? __props.maxTagPlaceholder(shownOmittedCount.value) : unref(omittedTagLabel)), 1)], true)], 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_7, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])),
 							createElementVNode("span", _hoisted_10, [__props.clearable && unref(hasValue) && !resolvedDisabled.value ? (openBlock(), createElementBlock("button", {
 								key: 0,
 								type: "button",
@@ -325,8 +424,15 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					_: 3
 				}, 512), createVNode(unref(ComboboxPortal), { to: portalTo.value }, {
 					default: withCtx(() => [createVNode(unref(ComboboxContent), {
-						class: normalizeClass(["rs-select__content", [__props.popupClassName, { "rs-select__content--match-trigger": __props.matchTriggerWidth }]]),
-						style: normalizeStyle({ "--rs-select-list-height": `${__props.listHeight}px` }),
+						class: normalizeClass(["rs-select__content", [
+							__props.popupClassName,
+							__props.classNames?.popup,
+							{ "rs-select__content--match-trigger": __props.matchTriggerWidth }
+						]]),
+						style: normalizeStyle({
+							"--rs-select-list-height": `${__props.listHeight}px`,
+							...__props.dropdownStyle
+						}),
 						align: "start",
 						side: __props.placement,
 						"side-offset": 4,
@@ -336,7 +442,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 								key: 0,
 								class: "rs-select__panel-header",
-								onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"]))
+								onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
 							}, [renderSlot(_ctx.$slots, "header", {}, void 0, true)], 32)) : createCommentVNode("", true),
 							unref(isSearchable) ? (openBlock(), createElementBlock("div", _hoisted_13, [createElementVNode("div", _hoisted_14, [createVNode(RsIcon_default, {
 								name: "search",
@@ -345,7 +451,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								"aria-hidden": "true"
 							}), createVNode(unref(ComboboxInput), {
 								modelValue: searchQuery.value,
-								"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => searchQuery.value = $event),
+								"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => searchQuery.value = $event),
 								class: "rs-select__search",
 								placeholder: unref(resolvedSearchPlaceholder),
 								"auto-focus": "",
@@ -363,7 +469,10 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(resolvedEmptyText)), 1)], true)]),
 								_: 3
 							})) : createCommentVNode("", true),
-							createVNode(unref(ComboboxViewport), { class: "rs-select__viewport" }, {
+							createVNode(unref(ComboboxViewport), {
+								class: "rs-select__viewport",
+								onScroll: _cache[7] || (_cache[7] = ($event) => emit("popupScroll", $event))
+							}, {
 								default: withCtx(() => [unref(useVirtual) ? (openBlock(), createBlock(unref(ComboboxVirtualizer), {
 									key: 0,
 									options: unref(virtualValues),
@@ -380,7 +489,9 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 										default: withCtx(() => [createElementVNode("span", _hoisted_16, [renderSlot(_ctx.$slots, "option", {
 											option: unref(optionOrCreate)(String(option)),
 											selected: unref(selectedValues).includes(String(option))
-										}, () => [createTextVNode(toDisplayString(unref(canCreate) && String(option) === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(String(option)) ?? String(option)), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+										}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(unref(canCreate) && String(option) === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(String(option)) ?? String(option)), (part, i) => {
+											return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_17, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+										}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 											default: withCtx(() => [createVNode(RsIcon_default, {
 												name: "check",
 												size: 14
@@ -402,7 +513,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 									"text-value": unref(createValue),
 									class: "rs-select__item rs-select__item--create"
 								}, {
-									default: withCtx(() => [createElementVNode("span", _hoisted_17, toDisplayString(unref(createOptionLabel)), 1), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+									default: withCtx(() => [createElementVNode("span", _hoisted_18, toDisplayString(unref(createOptionLabel)), 1), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 										default: withCtx(() => [createVNode(RsIcon_default, {
 											name: "check",
 											size: 14
@@ -427,10 +538,12 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 												class: "rs-select__item",
 												title: opt.title
 											}, {
-												default: withCtx(() => [createElementVNode("span", _hoisted_18, [renderSlot(_ctx.$slots, "option", {
+												default: withCtx(() => [createElementVNode("span", _hoisted_19, [renderSlot(_ctx.$slots, "option", {
 													option: opt,
 													selected: unref(selectedValues).includes(unref(toComboboxValue)(opt.value))
-												}, () => [createTextVNode(toDisplayString(opt.label), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+												}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(opt.label), (part, i) => {
+													return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_20, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+												}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 													default: withCtx(() => [createVNode(RsIcon_default, {
 														name: "check",
 														size: 14
@@ -454,10 +567,12 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 										class: "rs-select__item",
 										title: entry.title
 									}, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_19, [renderSlot(_ctx.$slots, "option", {
+										default: withCtx(() => [createElementVNode("span", _hoisted_21, [renderSlot(_ctx.$slots, "option", {
 											option: entry,
 											selected: unref(selectedValues).includes(unref(toComboboxValue)(entry.value))
-										}, () => [createTextVNode(toDisplayString(entry.label), 1)], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
+										}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(entry.label), (part, i) => {
+											return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_22, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+										}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
 											default: withCtx(() => [createVNode(RsIcon_default, {
 												name: "check",
 												size: 14
@@ -477,7 +592,7 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
 								key: 4,
 								class: "rs-select__panel-footer",
-								onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
+								onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"]))
 							}, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 32)) : createCommentVNode("", true)
 						], true)]),
 						_: 3

package/dist/components/RsSelect.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import RsSelect_vue_vue_type_script_setup_true_lang_default from "./RsSelect.impl.js";
 
 //#region src/components/RsSelect.vue
-var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-48ee70c4"]]);
+var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-956c54dc"]]);
 //#endregion
 export { RsSelect_default as default };