morya-ui 0.3.7 → 0.4.0

package/dist/mega-menu/style.css

@@ -1,60 +1,79 @@
 :root {
-    --m-color-primary: #2563eb;
-    --m-color-primary-hover: #1d4ed8;
+    /* Default morya palette (--m-* token names) */
+    --m-color-primary: #1677ff;
+    --m-color-primary-hover: #4096ff;
+    --m-color-primary-active: #0958d9;
     --m-color-surface: #ffffff;
-    --m-color-text: #0f172a;
-    --m-color-text-muted: #64748b;
-    --m-color-border: #e2e8f0;
-    --m-color-focus-ring: #2563eb;
-    /* Naive-inspired control sizing (tiny omitted; medium = default) */
-    --m-control-height-small: 28px;
-    --m-control-height-medium: 34px;
+    --m-color-text: rgba(0, 0, 0, 0.88);
+    --m-color-text-muted: rgba(0, 0, 0, 0.45);
+    --m-color-border: #d9d9d9;
+    --m-color-split: #f0f0f0;
+    --m-color-focus-ring: #1677ff;
+    /* Control sizing: medium control height 32px */
+    --m-control-height-small: 24px;
+    --m-control-height-medium: 32px;
     --m-control-height-large: 40px;
     --m-control-font-small: 14px;
     --m-control-font-medium: 14px;
     --m-control-font-large: 15px;
     --m-control-padding-x-small: 10px;
-    --m-control-padding-x-medium: 12px;
-    --m-control-padding-x-large: 14px;
+    --m-control-padding-x-medium: 15px;
+    --m-control-padding-x-large: 16px;
 
-    --m-radius-control: 3px;
+    --m-radius-control: 6px;
     --m-border-width: 1px;
     --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 20%, transparent);
+        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
     --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 20%, transparent);
-    --m-color-success: #159570;
-    --m-color-info: #2563eb;
-    --m-color-warning: #d97706;
+        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
+    --m-focus-shadow-warning: 0 0 0 2px
+        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-color-success: #52c41a;
+    --m-color-info: #1677ff;
+    --m-color-warning: #faad14;
     --m-color-warn: var(--m-color-warning);
     --m-color-help: #9333ea;
-    --m-color-danger: #dc2626;
-    --m-color-contrast: #0f172a;
+    --m-color-danger: #ff4d4f;
+    --m-color-contrast: rgba(0, 0, 0, 0.88);
     --m-color-contrast-fg: #ffffff;
-    --m-color-contrast-hover: #1e293b;
-    --m-color-contrast-active: #020617;
+    --m-color-contrast-hover: #1f1f1f;
+    --m-color-contrast-active: #141414;
     --m-color-on-emphasis: #ffffff;
-    --m-overlay-scrim: rgb(15 23 42 / 0.55);
-    --m-shadow-sm: 0 0 6px rgba(0, 0, 0, 0.12);
-    --m-shadow-md: 0 0 12px rgba(0, 0, 0, 0.12);
-    --m-shadow-lg: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
-    --m-shadow-raised: 0 0.25rem 0.75rem
-        color-mix(in srgb, var(--m-color-text) 14%, transparent);
-    --m-shadow-sticky: 4px 0 8px
-        color-mix(in srgb, var(--m-color-text) 6%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px
-        color-mix(in srgb, var(--m-color-text) 6%, transparent);
+    --m-color-on-primary: var(--m-color-on-emphasis);
+    --m-overlay-scrim: rgb(0 0 0 / 0.45);
+    --m-shadow-sm:
+        0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 6px -1px rgb(0 0 0 / 0.02),
+        0 2px 4px 0 rgb(0 0 0 / 0.02);
+    --m-shadow-md:
+        0 6px 16px 0 rgb(0 0 0 / 0.08), 0 3px 6px -4px rgb(0 0 0 / 0.12),
+        0 9px 28px 8px rgb(0 0 0 / 0.05);
+    --m-shadow-lg:
+        0 6px 16px 0 rgb(0 0 0 / 0.08), 0 3px 6px -4px rgb(0 0 0 / 0.12),
+        0 9px 28px 8px rgb(0 0 0 / 0.05);
+    --m-shadow-raised:
+        0 1px 2px -2px rgb(0 0 0 / 0.16), 0 3px 6px 0 rgb(0 0 0 / 0.12),
+        0 5px 12px 4px rgb(0 0 0 / 0.09);
+    --m-shadow-sticky: 6px 0 16px -8px rgb(0 0 0 / 0.08);
+    --m-shadow-sticky-end: -6px 0 16px -8px rgb(0 0 0 / 0.08);
 
     /* Typography scale (component text, not control-height fonts) */
     --m-font-size-xs: 0.75rem;
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    --m-line-height-sm: 1.6667;
+    --m-line-height-md: 1.5714;
+    --m-line-height-lg: 1.5;
     /* Display scale (page titles, KPI figures) */
     --m-font-size-xl: 1.25rem;
     --m-font-size-2xl: 1.5rem;
     --m-font-size-3xl: 1.75rem;
     --m-opacity-disabled: 0.55;
+    --m-color-text-disabled: rgba(0, 0, 0, 0.25);
+    --m-color-bg-disabled: rgba(0, 0, 0, 0.04);
+    --m-font-weight: 400;
+    --m-font-weight-medium: 500;
+    --m-font-weight-strong: 600;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
     --m-z-overlay: var(--m-z-base);
@@ -63,6 +82,7 @@
     --m-z-tooltip: calc(var(--m-z-base) + 60);
     --m-z-toast: calc(var(--m-z-base) + 100);
     --m-z-popper: 40;
+    --m-z-sticky: 10;
 
     /* Affix hitbox tracks control height so small/compact shells do not overflow */
     --m-control-affix-size: calc(
@@ -73,7 +93,7 @@
     --m-meter-track-height: var(--m-space-5);
     --m-tree-toggler-size: var(--m-checkbox-control-size);
     --m-nav-rail-width: 12.5rem;
-    --m-nav-rail-collapsed-width: 4rem;
+    --m-nav-rail-collapsed-width: 5rem;
     --m-layout-header-height: calc(
         var(--m-control-height-medium) + 2 * var(--m-space-3)
     );
@@ -89,15 +109,19 @@
     --m-space-8: 2rem;
     --m-radius-sm: 0.25rem;
     --m-radius-md: 0.5rem;
-    --m-radius-lg: 0.75rem;
+    --m-radius-lg: 0.5rem;
     --m-radius-full: 9999px;
-    --m-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --m-radius-pill: var(--m-radius-full);
+    --m-font-sans:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol", "Noto Color Emoji";
     --m-motion-fast: 150ms;
     --m-motion-normal: 250ms;
-    --m-motion-ease: cubic-bezier(0.2, 0, 0, 1);
-    --m-motion-enter: 180ms;
-    --m-motion-exit: 130ms;
-    --m-motion-distance: 1rem;
+    --m-motion-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --m-motion-enter: 200ms;
+    --m-motion-exit: 150ms;
+    --m-motion-distance: 0.5rem;
     --m-motion-spin: 1s;
     --m-motion-spin-dash: 1.5s;
     --m-motion-spin-fast: 0.8s;
@@ -135,7 +159,7 @@
     /* Table */
     --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
     --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 3.5%, var(--m-color-surface));
-    --m-table-border-color: var(--m-color-border);
+    --m-table-border-color: var(--m-color-split);
     --m-table-header-bg: var(--m-color-fill-light);
     --m-table-header-text: var(--m-color-text);
     --m-table-text: var(--m-color-text);
@@ -243,7 +267,7 @@
     --m-control-affix-gap: 2rem;
     --m-checkbox-control-size: 1rem;
     --m-nav-rail-width: 15rem;
-    --m-nav-rail-collapsed-width: 3.25rem;
+    --m-nav-rail-collapsed-width: 4rem;
     --m-space-1: 0.2rem;
     --m-space-2: 0.4rem;
     --m-space-3: 0.6rem;
@@ -272,7 +296,7 @@
     --m-control-affix-gap: 2.65rem;
     --m-checkbox-control-size: 1.25rem;
     --m-nav-rail-width: 18rem;
-    --m-nav-rail-collapsed-width: 4.5rem;
+    --m-nav-rail-collapsed-width: 5.5rem;
     --m-space-1: 0.3rem;
     --m-space-2: 0.6rem;
     --m-space-3: 0.9rem;
@@ -312,40 +336,52 @@
 }
 
 [data-theme="dark"] {
-    --m-color-primary: #60a5fa;
-    --m-color-primary-hover: #93c5fd;
-    --m-color-surface: #0f172a;
-    --m-color-text: #f8fafc;
-    --m-color-text-muted: #94a3b8;
-    --m-color-border: #334155;
-    --m-color-focus-ring: #93c5fd;
+    /* Dark theme solids on dark surfaces (readable mid tones) */
+    --m-color-primary: #1668dc;
+    --m-color-primary-hover: #3c89e8;
+    --m-color-primary-active: #1554ad;
+    --m-color-surface: #141414;
+    --m-color-text: rgba(255, 255, 255, 0.85);
+    --m-color-text-muted: rgba(255, 255, 255, 0.45);
+    --m-color-text-disabled: rgba(255, 255, 255, 0.3);
+    --m-color-bg-disabled: rgba(255, 255, 255, 0.08);
+    --m-color-border: #424242;
+    --m-color-split: #303030;
+    --m-color-focus-ring: #3c89e8;
     --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 28%, transparent);
+        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
     --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 28%, transparent);
+        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
+    --m-focus-shadow-warning: 0 0 0 2px
+        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
-    --m-color-success: #0f766e;
-    --m-color-info: #1d4ed8;
-    --m-color-warning: #b45309;
+    --m-color-success: #49aa19;
+    --m-color-info: #1668dc;
+    --m-color-warning: #d89614;
     --m-color-warn: var(--m-color-warning);
     --m-color-help: #7e22ce;
-    --m-color-danger: #dc2626;
-    --m-color-contrast: #f8fafc;
-    --m-color-contrast-fg: #0f172a;
-    --m-color-contrast-hover: #e2e8f0;
-    --m-color-contrast-active: #cbd5e1;
-    --m-overlay-scrim: rgb(2 6 23 / 0.72);
-    --m-shadow-sm: 0 0 6px rgba(0, 0, 0, 0.12);
-    --m-shadow-md: 0 0 12px rgba(0, 0, 0, 0.12);
-    --m-shadow-lg: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
-    --m-shadow-raised: 0 0.25rem 0.75rem
-        color-mix(in srgb, var(--m-color-text) 22%, transparent);
-    --m-shadow-sticky: 4px 0 8px
-        color-mix(in srgb, #000 35%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px
-        color-mix(in srgb, #000 35%, transparent);
-
-    --m-table-border-color: color-mix(in srgb, var(--m-color-border) 88%, var(--m-color-text));
+    --m-color-danger: #dc4446;
+    --m-color-contrast: rgba(255, 255, 255, 0.85);
+    --m-color-contrast-fg: #141414;
+    --m-color-contrast-hover: #f5f5f5;
+    --m-color-contrast-active: #d9d9d9;
+    --m-overlay-scrim: rgb(0 0 0 / 0.65);
+    --m-shadow-sm:
+        0 1px 2px 0 rgb(0 0 0 / 0.16), 0 1px 6px -1px rgb(0 0 0 / 0.12),
+        0 2px 4px 0 rgb(0 0 0 / 0.08);
+    --m-shadow-md:
+        0 6px 16px 0 rgb(0 0 0 / 0.32), 0 3px 6px -4px rgb(0 0 0 / 0.48),
+        0 9px 28px 8px rgb(0 0 0 / 0.2);
+    --m-shadow-lg:
+        0 6px 16px 0 rgb(0 0 0 / 0.32), 0 3px 6px -4px rgb(0 0 0 / 0.48),
+        0 9px 28px 8px rgb(0 0 0 / 0.2);
+    --m-shadow-raised:
+        0 1px 2px -2px rgb(0 0 0 / 0.64), 0 3px 6px 0 rgb(0 0 0 / 0.48),
+        0 5px 12px 4px rgb(0 0 0 / 0.36);
+    --m-shadow-sticky: 6px 0 16px -8px rgb(0 0 0 / 0.45);
+    --m-shadow-sticky-end: -6px 0 16px -8px rgb(0 0 0 / 0.45);
+
+    --m-table-border-color: var(--m-color-split);
     --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 10%, var(--m-color-surface));
     --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
     --m-table-header-bg: var(--m-color-fill-light);
@@ -440,16 +476,18 @@
     box-sizing: border-box;
 }
 
-.m-button:disabled,
 .m-input:disabled,
+.m-textarea:disabled,
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
 .m-inputcolor__text:disabled,
 .m-inputcolor__swatch:disabled,
 .m-inputtags--disabled {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-input-field__control--prefixed .m-input:disabled,
@@ -735,16 +773,16 @@
     display: inline-flex;
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
-    /* 避免绝对定位 input 挂到上层 MScrollbar，聚焦时把滚动容器拽回顶部 */
+    /* 与输入框圆角保持一致，配合 MScrollbar 使用 */
     position: relative;
 }
 
 .m-checkbox--disabled,
 .m-radio--disabled,
 .m-switch--disabled {
-    color: var(--m-color-text-muted);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-checkbox--invalid .m-checkbox__control,
@@ -827,7 +865,7 @@
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
     font-size: var(--m-font-size-md);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .m-textarea-field__help,
@@ -865,8 +903,10 @@
 .m-textarea:disabled,
 .m-select:disabled,
 .m-select--disabled {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-inputgroup > .m-input,
@@ -1041,7 +1081,7 @@
 .m-picklist__item--selected {
     background: color-mix(in srgb, var(--m-color-primary) 14%, var(--m-color-surface));
     color: var(--m-color-primary);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .m-carousel__nav,

package/dist/mentions/index.js

@@ -0,0 +1,258 @@
+import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../useMId-BXFYayPP.js";
+import { t as n } from "../Icon-od9Ob-Ay.js";
+import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
+import { n as i } from "../context-CIx8fy-I.js";
+import { t as a } from "../ProgressSpinner-B_OJG_0l.js";
+import { i as ee, o as te, s as o } from "../config-COgrsSV2.js";
+import { n as s } from "../locale-Dnk0UIie.js";
+import "./style.js";
+import { Fragment as ne, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, inject as m, mergeProps as h, nextTick as g, normalizeClass as _, openBlock as v, ref as y, renderList as re, toDisplayString as b, unref as x, useAttrs as S, watch as C, withModifiers as w } from "vue";
+//#region src/components/Mentions/mentionUtils.ts
+function ie(e) {
+	return e === void 0 ? ["@"] : Array.isArray(e) ? e : [e];
+}
+function ae(e, t, n, r) {
+	let i = e.slice(0, t), a = null;
+	for (let e of n) {
+		let t = i.lastIndexOf(e);
+		if (t === -1 || t > 0 && !/\s/.test(i[t - 1])) continue;
+		let n = i.slice(t + e.length);
+		r && n.includes(r) || /^\S*$/.test(n) && (!a || t > a.start) && (a = {
+			prefix: e,
+			query: n,
+			start: t
+		});
+	}
+	return a;
+}
+function oe(e) {
+	return typeof e == "string" ? {
+		value: e,
+		label: e
+	} : {
+		value: e.value,
+		label: e.label ?? e.value
+	};
+}
+function T(e, t) {
+	let n = t.toLowerCase();
+	return n ? e.filter((e) => e.value.toLowerCase().includes(n) || e.label.toLowerCase().includes(n)) : e;
+}
+//#endregion
+//#region src/components/Mentions/Mentions.vue?vue&type=script&setup=true&lang.ts
+var se = [
+	"id",
+	"value",
+	"rows",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-expanded",
+	"aria-busy",
+	"aria-controls",
+	"aria-autocomplete"
+], ce = ["aria-label"], le = ["id"], E = ["id"], D = ["aria-selected", "onMousedown"], O = { class: "m-mentions__option-value" }, ue = {
+	key: 0,
+	class: "m-mentions__option-label"
+}, de = {
+	key: 3,
+	class: "m-mentions__empty",
+	role: "status"
+}, fe = ["id"], k = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	__name: "Mentions",
+	props: {
+		pt: {},
+		modelValue: { default: "" },
+		options: { default: () => [] },
+		prefix: { default: "@" },
+		split: { default: " " },
+		rows: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		status: {},
+		errorMessage: {},
+		helpText: {},
+		id: {},
+		size: {},
+		variant: {},
+		fluid: {
+			type: Boolean,
+			default: !1
+		},
+		emptyMessage: {},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		allowClear: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"focus",
+		"blur",
+		"change",
+		"select"
+	],
+	setup(p, { emit: k }) {
+		let A = p, j = k, M = S(), { rootAttrs: N, controlAttrs: P } = e(M, () => A.pt), F = ee("Mentions"), I = m(i, null), L = s(), R = y(null), z = t("m-mentions"), B = c(() => A.id ?? z), V = y(!1), H = y(0), U = c(() => A.invalid || A.status === "error" || !!A.errorMessage), pe = c(() => A.status === "warning" && !U.value), me = te("Mentions", () => A.size ?? I?.value.size), he = o("Mentions", () => A.variant), ge = c(() => A.fluid ?? F.value.fluid ?? !1), _e = c(() => A.rows ?? F.value.rows ?? 3), W = c(() => (A.clearable ?? A.allowClear ?? F.value.clearable ?? F.value.allowClear ?? !1) && !!A.modelValue && !A.disabled && !A.readonly), G = c(() => V.value && !!q.value), ve = c(() => ie(A.prefix)), K = c(() => A.split ?? " "), ye = c(() => A.options.map(oe)), q = c(() => ae(A.modelValue ?? "", H.value, ve.value, K.value)), J = c(() => q.value ? T(ye.value, q.value.query) : []), be = c(() => A.emptyMessage ?? L.value.emptyOptions), Y = c(() => A.errorMessage || A.helpText), xe = c(() => !!A.errorMessage || U.value && !!A.helpText), Se = c(() => Y.value ? `${B.value}-help` : void 0), Ce = c(() => [
+			"m-mentions",
+			`m-mentions--${me.value}`,
+			{
+				"m-mentions--disabled": A.disabled,
+				"m-mentions--open": V.value,
+				"m-mentions--clearable": W.value,
+				"m-mentions--loading": A.loading,
+				"m-mentions--fluid": ge.value,
+				"m-mentions--invalid": U.value,
+				"m-mentions--warning": pe.value
+			}
+		]), we = c(() => ["m-mentions__textarea", { "m-mentions__textarea--filled": he.value === "filled" }]), X = c(() => `${B.value}-suggestions`), Z = r({
+			itemCount: () => J.value.length,
+			orientation: "vertical",
+			enabled: () => V.value && J.value.length > 0,
+			onActivate: (e) => {
+				let t = J.value[e];
+				t && $(t);
+			},
+			onEscape: () => {
+				V.value = !1, Z.reset();
+			}
+		});
+		C(J, (e) => {
+			if (A.loading) {
+				V.value = !!q.value;
+				return;
+			}
+			V.value = !!(q.value && e.length > 0), V.value ? e.length && Z.moveFirst() : Z.reset();
+		}), C(() => A.loading, (e) => {
+			e && q.value && (V.value = !0);
+		});
+		function Q() {
+			H.value = R.value?.selectionStart ?? 0;
+		}
+		function Te(e) {
+			let t = e.target;
+			H.value = t.selectionStart ?? t.value.length, j("update:modelValue", t.value), q.value && J.value.length ? V.value = !0 : V.value = !1;
+		}
+		function $(e) {
+			let t = q.value;
+			if (!t) return;
+			let n = A.modelValue ?? "", r = `${t.prefix}${e.value}${K.value}`, i = n.slice(0, t.start) + r + n.slice(H.value);
+			j("update:modelValue", i), j("select", e), V.value = !1, Z.reset();
+			let a = t.start + r.length;
+			g(() => {
+				let e = R.value;
+				e && (e.focus(), e.setSelectionRange(a, a), H.value = a);
+			});
+		}
+		function Ee(e) {
+			!V.value || !J.value.length || (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Escape") && (Z.onKeydown(e), e.key === "Enter" && e.preventDefault());
+		}
+		function De(e) {
+			let t = J.value[e];
+			t && $(t);
+		}
+		function Oe(e) {
+			Q(), j("focus", e);
+		}
+		function ke(e) {
+			window.setTimeout(() => {
+				V.value = !1, Z.reset();
+			}, 120), j("blur", e);
+		}
+		function Ae(e) {
+			j("change", e.target.value);
+		}
+		function je() {
+			A.disabled || A.readonly || (j("update:modelValue", ""), V.value = !1, Z.reset(), g(() => R.value?.focus()));
+		}
+		return (e, t) => (v(), u("div", h(x(N), { class: Ce.value }), [d("div", { class: _(["m-mentions__control", { "m-mentions__control--clearable": W.value }]) }, [
+			d("textarea", h(x(P), {
+				id: B.value,
+				ref_key: "textareaRef",
+				ref: R,
+				class: we.value,
+				value: p.modelValue,
+				rows: _e.value,
+				placeholder: p.placeholder,
+				disabled: p.disabled,
+				readonly: p.readonly,
+				"aria-invalid": U.value || void 0,
+				"aria-describedby": Se.value,
+				"aria-expanded": G.value,
+				"aria-busy": p.loading || void 0,
+				"aria-controls": G.value ? X.value : void 0,
+				"aria-autocomplete": V.value ? "list" : void 0,
+				role: "combobox",
+				autocomplete: "off",
+				onInput: Te,
+				onKeydown: Ee,
+				onKeyup: Q,
+				onClick: Q,
+				onFocus: Oe,
+				onBlur: ke,
+				onChange: Ae
+			}), null, 16, se),
+			W.value ? (v(), u("button", {
+				key: 0,
+				type: "button",
+				class: "m-mentions__clear",
+				"aria-label": x(L).clearInput,
+				onMousedown: t[0] ||= w(() => {}, ["prevent"]),
+				onClick: je
+			}, [f(n, {
+				name: "close",
+				size: "sm"
+			})], 40, ce)) : l("", !0),
+			G.value && p.loading ? (v(), u("div", {
+				key: 1,
+				id: X.value,
+				class: "m-mentions__dropdown m-mentions__dropdown--loading",
+				role: "listbox",
+				"aria-busy": "true",
+				"aria-label": "Suggestions"
+			}, [f(a, { size: "small" })], 8, le)) : G.value && J.value.length ? (v(), u("ul", {
+				key: 2,
+				id: X.value,
+				class: "m-mentions__dropdown",
+				role: "listbox",
+				"aria-label": "Suggestions"
+			}, [(v(!0), u(ne, null, re(J.value, (e, t) => (v(), u("li", {
+				key: e.value,
+				role: "option",
+				class: _(["m-mentions__option", { "m-mentions__option--active": x(Z).activeIndex.value === t }]),
+				"aria-selected": x(Z).activeIndex.value === t,
+				onMousedown: w((e) => De(t), ["prevent"])
+			}, [d("span", O, b(e.value), 1), e.label === e.value ? l("", !0) : (v(), u("span", ue, b(e.label), 1))], 42, D))), 128))], 8, E)) : G.value && q.value && !p.loading && !J.value.length ? (v(), u("p", de, b(be.value), 1)) : l("", !0)
+		], 2), Y.value ? (v(), u("p", {
+			key: 0,
+			id: `${B.value}-help`,
+			class: _(["m-mentions__feedback", { "m-mentions__feedback--error": xe.value }]),
+			role: "alert"
+		}, b(Y.value), 11, fe)) : l("", !0)], 16));
+	}
+});
+//#endregion
+export { k as MMentions };