niuma-ui 2.0.2 → 2.0.4

package/dist/components/label/src/RsLabel.impl.js

@@ -1,6 +1,13 @@
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString } from "vue";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import { useRsFormContext } from "../../form/src/form-utils.js";
+import { resolveRsLabelFor, resolveRsLabelHintId, showRsLabelOptional } from "./label-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/label/src/RsLabel.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["for"];
+var _hoisted_1 = [
+	"id",
+	"for",
+	"aria-disabled"
+];
 var _hoisted_2 = { class: "rs-label__text" };
 var _hoisted_3 = {
 	key: 0,
@@ -8,18 +15,37 @@ var _hoisted_3 = {
 	"aria-hidden": "true"
 };
 var _hoisted_4 = {
-	key: 0,
-	class: "rs-label__hint"
+	key: 1,
+	class: "rs-label__sr"
+};
+var _hoisted_5 = {
+	key: 2,
+	class: "rs-label__optional"
 };
+var _hoisted_6 = {
+	key: 3,
+	class: "rs-label__colon",
+	"aria-hidden": "true"
+};
+var _hoisted_7 = ["id"];
 var RsLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsLabel",
 	__name: "RsLabel",
 	props: {
 		forId: {},
+		htmlFor: {},
+		for: {},
+		id: {},
 		required: {
 			type: Boolean,
 			default: false
 		},
+		optional: {
+			type: Boolean,
+			default: false
+		},
 		hint: {},
+		hintId: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -27,17 +53,44 @@ var RsLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		nowrap: {
 			type: Boolean,
 			default: false
+		},
+		colon: {
+			type: Boolean,
+			default: false
 		}
 	},
 	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const { t } = useRsI18n();
+		const formContext = useRsFormContext();
+		const autoHintId = useId();
+		const controlId = computed(() => resolveRsLabelFor(props.htmlFor, props.forId, props.for));
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const hasHint = computed(() => Boolean(slots.hint || props.hint));
+		const resolvedHintId = computed(() => resolveRsLabelHintId(props.hintId, autoHintId, hasHint.value));
+		const showOptional = computed(() => showRsLabelOptional(props.required, props.optional));
+		const rootClass = computed(() => ["rs-label", {
+			"rs-label--disabled": resolvedDisabled.value,
+			"rs-label--nowrap": props.nowrap
+		}]);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("label", {
-				class: normalizeClass(["rs-label", {
-					"rs-label--disabled": __props.disabled,
-					"rs-label--nowrap": __props.nowrap
-				}]),
-				for: __props.forId
-			}, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)]), __props.hint ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)], 10, _hoisted_1);
+				id: __props.id,
+				class: normalizeClass(rootClass.value),
+				for: controlId.value,
+				"aria-disabled": resolvedDisabled.value ? "true" : void 0
+			}, [createElementVNode("span", _hoisted_2, [
+				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				__props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true),
+				__props.required ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(t)("label.required")), 1)) : createCommentVNode("", true),
+				showOptional.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(t)("label.optional")), 1)) : createCommentVNode("", true),
+				__props.colon ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(t)("label.colon")), 1)) : createCommentVNode("", true)
+			]), hasHint.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				id: resolvedHintId.value,
+				class: "rs-label__hint"
+			}, [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(__props.hint), 1)], true)], 8, _hoisted_7)) : createCommentVNode("", true)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/label/src/RsLabel.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsLabel_vue_vue_type_script_setup_true_lang_default from "./RsLabel.impl.js";
 
 //#region src/components/label/src/RsLabel.vue
-var RsLabel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsLabel_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e4daa758"]]);
+var RsLabel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsLabel_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-dc8b2069"]]);
 //#endregion
 export { RsLabel_default as default };

package/dist/components/label/src/label-utils.d.ts

@@ -0,0 +1,6 @@
+/** 解析写入原生 label[for] 的控件 id。htmlFor / forId / for 是别名。 */
+export declare function resolveRsLabelFor(htmlFor?: string, forId?: string, nativeFor?: string): string | undefined;
+/** 有 hint 时才给说明分配 id，供控件 aria-describedby。 */
+export declare function resolveRsLabelHintId(hintId: string | undefined, autoId: string, hasHint: boolean): string | undefined;
+/** 必填优先；optional 只在非必填时展示。 */
+export declare function showRsLabelOptional(required: boolean, optional: boolean): boolean;

package/dist/components/label/src/label-utils.js

@@ -0,0 +1,16 @@
+//#region src/components/label/src/label-utils.ts
+/** 解析写入原生 label[for] 的控件 id。htmlFor / forId / for 是别名。 */
+function resolveRsLabelFor(htmlFor, forId, nativeFor) {
+	return htmlFor || forId || nativeFor || void 0;
+}
+/** 有 hint 时才给说明分配 id，供控件 aria-describedby。 */
+function resolveRsLabelHintId(hintId, autoId, hasHint) {
+	if (!hasHint) return void 0;
+	return hintId || autoId;
+}
+/** 必填优先；optional 只在非必填时展示。 */
+function showRsLabelOptional(required, optional) {
+	return optional && !required;
+}
+//#endregion
+export { resolveRsLabelFor, resolveRsLabelHintId, showRsLabelOptional };

package/dist/components/link/index.d.ts

@@ -1 +1,2 @@
 export { default as RsLink } from './src/RsLink.js';
+export type { RsLinkTone, RsLinkUnderline } from './src/link-utils';

package/dist/components/link/src/RsLink.css

@@ -1,45 +1,86 @@
 
-.rs-link {
-  color: var(--rs-primary);
-  font-size: var(--rs-font-size-sm);
+.rs-link[data-v-78d8e4b3] {
+  display: inline;
+  color: var(--rs-link-tone, var(--rs-primary));
+  font-size: inherit;
   font-weight: var(--rs-font-weight-medium);
   line-height: var(--rs-line-height-tight);
   text-underline-offset: 0.18em;
   text-decoration-thickness: 1px;
+  cursor: pointer;
   transition:
     color var(--rs-transition-fast),
     text-decoration-color var(--rs-transition-fast);
 }
-.rs-link:visited {
-  color: var(--rs-primary);
+.rs-link--has-icon[data-v-78d8e4b3] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
 }
-.rs-link:hover {
-  color: var(--rs-primary-hover);
+.rs-link[data-v-78d8e4b3]:visited {
+  color: var(--rs-link-tone, var(--rs-primary));
 }
-.rs-link:active {
-  color: var(--rs-primary-hover);
+.rs-link[data-v-78d8e4b3]:hover,
+.rs-link[data-v-78d8e4b3]:active {
+  color: var(--rs-link-tone-hover, var(--rs-primary-hover));
 }
-.rs-link:focus-visible {
+.rs-link[data-v-78d8e4b3]:focus-visible {
   outline: none;
   border-radius: var(--rs-radius-xs);
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-link--underline-always {
+.rs-link--underline-always[data-v-78d8e4b3] {
   text-decoration: underline;
 }
-.rs-link--underline-hover {
+.rs-link--underline-hover[data-v-78d8e4b3] {
   text-decoration: none;
 }
-.rs-link--underline-hover:hover,
-.rs-link--underline-hover:focus-visible {
+.rs-link--underline-hover[data-v-78d8e4b3]:hover,
+.rs-link--underline-hover[data-v-78d8e4b3]:focus-visible {
   text-decoration: underline;
 }
-.rs-link--underline-none {
+.rs-link--underline-none[data-v-78d8e4b3],
+.rs-link--underline-none[data-v-78d8e4b3]:hover,
+.rs-link--underline-none[data-v-78d8e4b3]:focus-visible {
   text-decoration: none;
 }
-.rs-link--disabled {
+.rs-link--tone-primary[data-v-78d8e4b3] {
+  --rs-link-tone: var(--rs-primary);
+  --rs-link-tone-hover: var(--rs-primary-hover);
+}
+.rs-link--tone-neutral[data-v-78d8e4b3] {
+  --rs-link-tone: var(--rs-text);
+  --rs-link-tone-hover: var(--rs-primary);
+}
+.rs-link--tone-success[data-v-78d8e4b3] {
+  --rs-link-tone: var(--rs-success, #18a058);
+  --rs-link-tone-hover: var(--rs-success, #18a058);
+}
+.rs-link--tone-warning[data-v-78d8e4b3] {
+  --rs-link-tone: var(--rs-warning, #f0a020);
+  --rs-link-tone-hover: var(--rs-warning, #f0a020);
+}
+.rs-link--tone-danger[data-v-78d8e4b3] {
+  --rs-link-tone: var(--rs-danger);
+  --rs-link-tone-hover: var(--rs-danger);
+}
+.rs-link--tone-info[data-v-78d8e4b3] {
+  --rs-link-tone: var(--rs-info, #2080f0);
+  --rs-link-tone-hover: var(--rs-info, #2080f0);
+}
+.rs-link__icon[data-v-78d8e4b3] {
+  color: inherit;
+}
+.rs-link--disabled[data-v-78d8e4b3],
+.rs-link--disabled[data-v-78d8e4b3]:visited,
+.rs-link--disabled[data-v-78d8e4b3]:hover,
+.rs-link--disabled[data-v-78d8e4b3]:active {
   color: var(--rs-muted);
   cursor: not-allowed;
   text-decoration: none;
-  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-link[data-v-78d8e4b3] {
+    transition: none;
+}
 }

package/dist/components/link/src/RsLink.d.ts

@@ -1,19 +1,27 @@
+import { type RsLinkTone, type RsLinkUnderline } from './link-utils';
+export type { RsLinkTone, RsLinkUnderline };
 type __VLS_Props = {
     href: string;
     target?: '_self' | '_blank' | '_parent' | '_top' | (string & {});
     rel?: string;
     disabled?: boolean;
-    underline?: 'always' | 'hover' | 'none';
+    underline?: RsLinkUnderline;
+    /** 语义色。默认 primary。不要用业务 CSS 改颜色。 */
+    tone?: RsLinkTone;
+    /** 前缀图标，Lucide kebab-case。装饰性，名称走默认插槽。 */
+    icon?: string;
 };
-declare var __VLS_10: {};
+declare var __VLS_6: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: string;
     disabled: boolean;
     target: "_self" | "_blank" | "_parent" | "_top" | (string & {});
     rel: string;
-    underline: "always" | "hover" | "none";
+    tone: RsLinkTone;
+    underline: RsLinkUnderline;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/link/src/RsLink.impl.js

@@ -1,7 +1,16 @@
-import { Primitive } from "../../_shared/src/reka.js";
-import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { mergeRsLinkRel, resolveRsLinkTone } from "./link-utils.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
 //#region src/components/link/src/RsLink.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"href",
+	"target",
+	"rel",
+	"aria-disabled",
+	"tabindex"
+];
 var RsLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsLink",
 	__name: "RsLink",
 	props: {
 		href: {},
@@ -11,47 +20,39 @@ var RsLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			type: Boolean,
 			default: false
 		},
-		underline: { default: "hover" }
+		underline: { default: "hover" },
+		tone: { default: void 0 },
+		icon: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
-		const mergedRel = computed(() => {
-			const relParts = (props.rel ?? "").split(/\s+/).map((item) => item.trim()).filter(Boolean);
-			if (props.target === "_blank") {
-				if (!relParts.includes("noopener")) relParts.push("noopener");
-				if (!relParts.includes("noreferrer")) relParts.push("noreferrer");
-			}
-			return relParts.length > 0 ? relParts.join(" ") : void 0;
-		});
+		const resolvedTone = computed(() => resolveRsLinkTone(props.tone));
+		const mergedRel = computed(() => mergeRsLinkRel(props.rel, props.target));
 		function onClick(event) {
 			if (!props.disabled) return;
 			event.preventDefault();
 			event.stopPropagation();
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Primitive), {
-				as: "a",
+			return openBlock(), createElementBlock("a", {
 				href: __props.disabled ? void 0 : __props.href,
 				target: __props.disabled ? void 0 : __props.target,
 				rel: __props.disabled ? void 0 : mergedRel.value,
 				class: normalizeClass(["rs-link", {
 					"rs-link--disabled": __props.disabled,
-					[`rs-link--underline-${__props.underline}`]: true
+					"rs-link--has-icon": Boolean(__props.icon),
+					[`rs-link--underline-${__props.underline}`]: true,
+					[`rs-link--tone-${resolvedTone.value}`]: true
 				}]),
 				"aria-disabled": __props.disabled ? "true" : void 0,
 				tabindex: __props.disabled ? -1 : void 0,
 				onClick
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"href",
-				"target",
-				"rel",
-				"class",
-				"aria-disabled",
-				"tabindex"
-			]);
+			}, [__props.icon ? (openBlock(), createBlock(RsIcon_default, {
+				key: 0,
+				class: "rs-link__icon",
+				name: __props.icon,
+				size: "1em"
+			}, null, 8, ["name"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/link/src/RsLink.js

@@ -1,7 +1,8 @@
 import './RsLink.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsLink_vue_vue_type_script_setup_true_lang_default from "./RsLink.impl.js";
 
 //#region src/components/link/src/RsLink.vue
-var RsLink_default = RsLink_vue_vue_type_script_setup_true_lang_default;
+var RsLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsLink_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-78d8e4b3"]]);
 //#endregion
 export { RsLink_default as default };

package/dist/components/link/src/link-utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * RsLink 语义色（色相）。链接没有形态轴，默认 primary。
+ * 操作按钮请用 RsButton variant="link"，不要用本组件冒充按钮。
+ */
+export type RsLinkTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export type RsLinkUnderline = 'always' | 'hover' | 'none';
+export declare function resolveRsLinkTone(tone?: RsLinkTone): RsLinkTone;
+/** `_blank` 时补上 noopener / noreferrer，并保留调用方已有 rel。 */
+export declare function mergeRsLinkRel(rel: string | undefined, target: string | undefined): string | undefined;

package/dist/components/link/src/link-utils.js

@@ -0,0 +1,15 @@
+//#region src/components/link/src/link-utils.ts
+function resolveRsLinkTone(tone) {
+	return tone ?? "primary";
+}
+/** `_blank` 时补上 noopener / noreferrer，并保留调用方已有 rel。 */
+function mergeRsLinkRel(rel, target) {
+	const parts = (rel ?? "").split(/\s+/).map((item) => item.trim()).filter(Boolean);
+	if (target === "_blank") {
+		if (!parts.includes("noopener")) parts.push("noopener");
+		if (!parts.includes("noreferrer")) parts.push("noreferrer");
+	}
+	return parts.length > 0 ? parts.join(" ") : void 0;
+}
+//#endregion
+export { mergeRsLinkRel, resolveRsLinkTone };

package/dist/components/loading/src/RsLoading.d.ts

@@ -12,12 +12,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: RsLoadingVariant;
+    overlay: boolean;
     size: RsLoadingSize;
+    block: boolean;
     tone: RsLoadingTone;
     loading: boolean;
-    block: boolean;
     showLabel: boolean;
-    overlay: boolean;
     skeletonLines: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/mentions/index.d.ts

@@ -1,2 +1,3 @@
 export { default as RsMentions } from './src/RsMentions.js';
-export type { RsMentionActive, RsMentionCaretBox, RsMentionOption, RsMentionPopupBox, } from './src/mentions-utils';
+export type { RsMentionsExpose, RsMentionsInstance, } from './src/RsMentions.js';
+export type { RsMentionActive, RsMentionCaretBox, RsMentionFilterOption, RsMentionOption, RsMentionOptionInput, RsMentionPopupBox, } from './src/mentions-utils';

package/dist/components/mentions/src/RsMentions.css

@@ -1,19 +1,135 @@
 
-.rs-mentions[data-v-3b6a5d22] {
+.rs-mentions[data-v-c5c1f2dc] {
   position: relative;
+  display: inline-block;
   width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  color-scheme: inherit;
 }
-.rs-mentions__input[data-v-3b6a5d22] {
+.rs-mentions__input[data-v-c5c1f2dc] {
   box-sizing: border-box;
   width: 100%;
   min-height: calc(var(--rs-control-height-md) * 2);
   padding: var(--rs-space-sm) var(--rs-space-md);
   border: 1px solid var(--rs-input-border, var(--rs-border));
-  border-radius: var(--rs-radius-sm);
+  border-radius: var(--rs-select-radius, var(--rs-radius-sm));
   background: var(--rs-input-bg);
   color: var(--rs-text);
   font-family: inherit;
   font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
   resize: vertical;
   outline: none;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-mentions--ssm .rs-mentions__input[data-v-c5c1f2dc] {
+  min-height: calc(var(--rs-control-height-ssm) * 2);
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-mentions--sm .rs-mentions__input[data-v-c5c1f2dc] {
+  min-height: calc(var(--rs-control-height-sm) * 2);
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-mentions--lg .rs-mentions__input[data-v-c5c1f2dc] {
+  min-height: calc(var(--rs-control-height-lg) * 2);
+  padding: var(--rs-space-md) var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+.rs-mentions--clearable .rs-mentions__input[data-v-c5c1f2dc] {
+  padding-inline-end: calc(var(--rs-space-md) + 1.25rem);
+}
+.rs-mentions__input[data-v-c5c1f2dc]::placeholder {
+  color: var(--rs-placeholder);
+}
+.rs-mentions__input[data-v-c5c1f2dc]:hover:not(:disabled):not(:read-only) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-mentions__input[data-v-c5c1f2dc]:focus {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-mentions__input[data-v-c5c1f2dc]:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+  resize: none;
+}
+.rs-mentions__input[data-v-c5c1f2dc]:read-only:not(:disabled) {
+  cursor: default;
+}
+.rs-mentions__clear[data-v-c5c1f2dc] {
+  position: absolute;
+  top: var(--rs-space-sm);
+  inset-inline-end: var(--rs-space-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rs-radius-xs);
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: pointer;
+}
+.rs-mentions__clear[data-v-c5c1f2dc]:hover {
+  color: var(--rs-text);
+  background: var(--rs-item-hover);
+}
+.rs-mentions__list[data-v-c5c1f2dc] {
+  position: fixed;
+  z-index: calc(var(--rs-z-modal) + 2);
+  box-sizing: border-box;
+  min-width: 10rem;
+  max-width: min(24rem, calc(100vw - 1rem));
+  max-height: 12rem;
+  margin: 0;
+  padding: var(--rs-space-xs);
+  overflow: auto;
+  border: 1px solid var(--rs-dialog-border, var(--rs-border));
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow-lg);
+  color: var(--rs-text);
+  font: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  list-style: none;
+  outline: none;
+  color-scheme: inherit;
+}
+.rs-mentions__item[data-v-c5c1f2dc] {
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  border-radius: var(--rs-radius-sm);
+  color: var(--rs-text);
+  background: transparent;
+  cursor: pointer;
+}
+.rs-mentions__item--active[data-v-c5c1f2dc],
+.rs-mentions__item[data-v-c5c1f2dc]:hover:not(.rs-mentions__item--disabled):not(.rs-mentions__item--empty) {
+  background: var(--rs-item-hover);
+}
+.rs-mentions__item--disabled[data-v-c5c1f2dc],
+.rs-mentions__item--empty[data-v-c5c1f2dc] {
+  color: var(--rs-muted);
+  cursor: default;
+}
+.rs-mentions__item--disabled[data-v-c5c1f2dc] {
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-mentions__input[data-v-c5c1f2dc] {
+    transition: none;
+}
 }

package/dist/components/mentions/src/RsMentions.d.ts

@@ -1,32 +1,84 @@
 import type { RsComponentSize } from '../../../theme/types';
-import { type RsMentionOption } from './mentions-utils';
+import { type RsMentionFilterOption, type RsMentionOption, type RsMentionOptionInput } from './mentions-utils';
+/**
+ * RsMentions 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsMentions>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsMentionsExpose {
+    focus: () => void;
+    blur: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsMentionsInstance = RsMentionsExpose & {
+    $el: HTMLElement;
+};
+export type { RsMentionFilterOption, RsMentionOption, RsMentionOptionInput };
 type __VLS_Props = {
-    options?: readonly RsMentionOption[];
+    options?: ReadonlyArray<RsMentionOptionInput>;
     prefix?: string | string[];
     split?: string;
     rows?: number;
     placeholder?: string;
     disabled?: boolean;
+    readonly?: boolean;
     size?: RsComponentSize;
+    allowClear?: boolean;
+    filterOption?: RsMentionFilterOption;
+    debounce?: number;
+    emptyText?: string;
+    /** 远程搜索进行中。列表空时显示 loadingText。 */
+    loading?: boolean;
+    loadingText?: string;
+    id?: string;
+    name?: string;
+    /** 无障碍名称。旁边已有可见 label 时可省略。 */
+    ariaLabel?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_12: {}, __VLS_14: {
+    option: RsMentionOption;
+    active: boolean;
+};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_12) => any;
+} & {
+    option?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsMentionsExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     search: (query: string) => any;
     select: (value: string) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    clear: () => any;
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((value: string) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     split: string;
     disabled: boolean;
-    options: readonly RsMentionOption[];
+    loading: boolean;
+    readonly: boolean;
+    allowClear: boolean;
+    options: ReadonlyArray<RsMentionOptionInput>;
     prefix: string | string[];
     rows: number;
+    emptyText: string;
+    filterOption: RsMentionFilterOption;
+    debounce: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};