morya-ui 0.3.7 → 0.4.0

package/dist/drawer/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,
@@ -1393,7 +1433,7 @@
 }
 
 .m-drawer__header {
-    border-bottom: var(--m-border-width) solid var(--m-color-border);
+    border-bottom: var(--m-border-width) solid var(--m-color-split);
 }
 
 .m-drawer__header h2 {
@@ -1447,7 +1487,7 @@
 }
 
 .m-drawer__footer {
-    border-top: var(--m-border-width) solid var(--m-color-border);
+    border-top: var(--m-border-width) solid var(--m-color-split);
     gap: var(--m-space-2);
     width: 100%;
 }

package/dist/dropdown/index.js

@@ -1,15 +1,15 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../useMotionTransition-tW0yeJsy.js";
-import { n as r, t as i } from "../overlay-oR-5MDuE.js";
-import { t as a } from "../overlayPlacement-qwEJPVS4.js";
-import { t as o } from "../useFloatingViewportSync-wLLKIGUA.js";
+import { n as t, t as n } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-qwEJPVS4.js";
+import { t as i } from "../useFloatingViewportSync-wLLKIGUA.js";
+import { t as a } from "../useMotionTransition-S2rlviyZ.js";
+import { t as o } from "../Icon-od9Ob-Ay.js";
 import { t as s } from "../Scrollbar-DTeJ8P5b.js";
 import { t as c } from "../icon-COrt_N8A.js";
 import { t as l } from "../key-CaQYVkjh.js";
-import { t as u } from "../FlyoutSubmenu-C_OrDaPN.js";
-import { c as d } from "../config-De8ueCY-.js";
-import { n as f } from "../locale-xavS6-Hw.js";
+import { t as u } from "../FlyoutSubmenu-C1RfFRzH.js";
+import { c as d } from "../config-COgrsSV2.js";
+import { n as f } from "../locale-Dnk0UIie.js";
 import "./style.js";
 import { Fragment as p, Teleport as m, Transition as h, computed as g, createBlock as ee, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, defineComponent as C, mergeProps as w, nextTick as te, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useAttrs as ne, watch as re, withCtx as P } from "vue";
 //#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
@@ -47,14 +47,14 @@ var F = {
 		"submenuEnter",
 		"submenuLeave"
 	],
-	setup(e, { emit: n }) {
-		let r = n, i = k(null), a = k(null), o;
+	setup(e, { emit: t }) {
+		let n = t, r = k(null), i = k(null), a;
 		function d() {
-			o && clearTimeout(o), o = void 0;
+			a && clearTimeout(a), a = void 0;
 		}
 		function f() {
-			d(), o = setTimeout(() => {
-				i.value = null, a.value = null;
+			d(), a = setTimeout(() => {
+				r.value = null, i.value = null;
 			}, 150);
 		}
 		function m(e) {
@@ -69,57 +69,57 @@ var F = {
 		function C(e) {
 			return c(e.icon);
 		}
-		function w(e, t, n) {
-			if (e.disabled || m(e) || h(e) || (d(), r("highlight", e.value), !e.items?.length)) return;
-			i.value = g(e, t);
-			let o = n.currentTarget;
-			a.value = o?.querySelector(".m-dropdown__item--parent") ?? o;
+		function w(e, t, a) {
+			if (e.disabled || m(e) || h(e) || (d(), n("highlight", e.value), !e.items?.length)) return;
+			r.value = g(e, t);
+			let o = a.currentTarget;
+			i.value = o?.querySelector(".m-dropdown__item--parent") ?? o;
 		}
 		function te() {
 			f();
 		}
 		function E() {
-			d(), r("submenuEnter");
+			d(), n("submenuEnter");
 		}
 		function D() {
-			f(), r("submenuLeave");
+			f(), n("submenuLeave");
 		}
-		return (n, r) => (O(!0), v(p, null, A(e.items, (o, c) => (O(), v(p, { key: g(o, c) }, [m(o) ? (O(), v("div", F)) : h(o) ? (O(), v("div", I, [y("div", L, M(o.label), 1), o.items?.length ? (O(), ee(W, {
+		return (t, n) => (O(!0), v(p, null, A(e.items, (a, c) => (O(), v(p, { key: g(a, c) }, [m(a) ? (O(), v("div", F)) : h(a) ? (O(), v("div", I, [y("div", L, M(a.label), 1), a.items?.length ? (O(), ee(W, {
 			key: 0,
-			items: o.items,
+			items: a.items,
 			"highlighted-value": e.highlightedValue,
-			onSelect: r[0] ||= (e) => n.$emit("select", e),
-			onHighlight: r[1] ||= (e) => n.$emit("highlight", e),
+			onSelect: n[0] ||= (e) => t.$emit("select", e),
+			onHighlight: n[1] ||= (e) => t.$emit("highlight", e),
 			onSubmenuEnter: E,
 			onSubmenuLeave: D
-		}, b({ _: 2 }, [n.$slots.item ? {
+		}, b({ _: 2 }, [t.$slots.item ? {
 			name: "item",
-			fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+			fn: P(({ item: e }) => [j(t.$slots, "item", { item: e })]),
 			key: "0"
-		} : void 0]), 1032, ["items", "highlighted-value"])) : _("", !0)])) : o.items?.length ? (O(), v("div", {
+		} : void 0]), 1032, ["items", "highlighted-value"])) : _("", !0)])) : a.items?.length ? (O(), v("div", {
 			key: 2,
 			class: "m-dropdown__submenu-wrap",
-			onMouseenter: (e) => w(o, c, e),
+			onMouseenter: (e) => w(a, c, e),
 			onMouseleave: te
 		}, [y("button", {
 			type: "button",
-			class: T(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
+			class: T(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
 			role: "menuitem",
-			disabled: o.disabled,
+			disabled: a.disabled,
 			"aria-haspopup": !0
 		}, [
-			C(o) ? (O(), v("span", B, [S(t, {
-				name: C(o),
+			C(a) ? (O(), v("span", B, [S(o, {
+				name: C(a),
 				size: "sm"
 			}, null, 8, ["name"])])) : _("", !0),
-			j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)]),
-			y("span", V, [S(t, {
+			j(t.$slots, "item", { item: a }, () => [x(M(a.label), 1)]),
+			y("span", V, [S(o, {
 				name: "chevron-right",
 				size: "sm"
 			})])
 		], 10, z), S(u, {
-			open: i.value === g(o, c),
-			anchor: i.value === g(o, c) ? a.value : null,
+			open: r.value === g(a, c),
+			anchor: r.value === g(a, c) ? i.value : null,
 			"panel-class": "m-dropdown__submenu",
 			onEnter: E,
 			onLeave: D
@@ -131,15 +131,15 @@ var F = {
 				"view-class": "m-dropdown__submenu-view"
 			}, {
 				default: P(() => [S(W, {
-					items: o.items,
+					items: a.items,
 					"highlighted-value": e.highlightedValue,
-					onSelect: r[2] ||= (e) => n.$emit("select", e),
-					onHighlight: r[3] ||= (e) => n.$emit("highlight", e),
+					onSelect: n[2] ||= (e) => t.$emit("select", e),
+					onHighlight: n[3] ||= (e) => t.$emit("highlight", e),
 					onSubmenuEnter: E,
 					onSubmenuLeave: D
-				}, b({ _: 2 }, [n.$slots.item ? {
+				}, b({ _: 2 }, [t.$slots.item ? {
 					name: "item",
-					fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+					fn: P(({ item: e }) => [j(t.$slots, "item", { item: e })]),
 					key: "0"
 				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 2
@@ -148,17 +148,21 @@ var F = {
 		}, 1032, ["open", "anchor"])], 40, R)) : (O(), v("button", {
 			key: 3,
 			type: "button",
-			class: T(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
+			class: T(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
 			role: "menuitem",
-			disabled: o.disabled,
-			onMouseenter: (e) => !o.disabled && n.$emit("highlight", o.value),
-			onClick: (e) => n.$emit("select", o)
-		}, [C(o) ? (O(), v("span", U, [S(t, {
-			name: C(o),
+			disabled: a.disabled,
+			onMouseenter: (e) => !a.disabled && t.$emit("highlight", a.value),
+			onClick: (e) => t.$emit("select", a)
+		}, [C(a) ? (O(), v("span", U, [S(o, {
+			name: C(a),
 			size: "sm"
-		}, null, 8, ["name"])])) : _("", !0), j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)])], 42, H))], 64))), 128));
+		}, null, 8, ["name"])])) : _("", !0), j(t.$slots, "item", { item: a }, () => [x(M(a.label), 1)])], 42, H))], 64))), 128));
 	}
-}), ie = ["aria-expanded"], G = /* @__PURE__ */ C({
+}), ie = [
+	"tabindex",
+	"aria-expanded",
+	"aria-disabled"
+], G = /* @__PURE__ */ C({
 	inheritAttrs: !1,
 	__name: "Dropdown",
 	props: {
@@ -175,6 +179,10 @@ var F = {
 		trigger: { default: "click" },
 		showDelay: { default: 0 },
 		hideDelay: { default: 200 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
 		teleport: {
 			type: Boolean,
 			default: !0
@@ -187,28 +195,28 @@ var F = {
 		}
 	},
 	emits: ["update:modelValue", "select"],
-	setup(t, { emit: c }) {
-		let l = t, u = c, p = ne(), { rootAttrs: C } = e(p, () => l.pt), A = d(), { transitionName: F, transitionCss: I } = n({
+	setup(o, { emit: c }) {
+		let l = o, u = c, p = ne(), { rootAttrs: C } = e(p, () => l.pt), A = d(), { transitionName: F, transitionCss: I } = a({
 			role: "popup",
 			local: () => l.transition,
 			componentName: "Dropdown",
 			fallback: "scale-fade"
-		}), L = f(), R = k(null), z = k(null), B = k(null), V = k({}), H = k(-1), U = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), G = g(() => U.value[H.value]?.value), K, q, J = g(() => r(l, A.value.appendTo)), Y = g(() => i(l, A.value.appendTo));
+		}), L = f(), R = k(null), z = k(null), B = k(null), V = k({}), H = k(-1), U = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), G = g(() => U.value[H.value]?.value), K, q, J = g(() => t(l, A.value.appendTo)), Y = g(() => n(l, A.value.appendTo));
 		function ae() {
 			H.value = U.value.length ? 0 : -1;
 		}
 		function X() {
 			if (!Y.value || !z.value) return;
 			let e = z.value.getBoundingClientRect();
-			V.value = a(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+			V.value = r(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
 		}
 		function Z(e) {
-			u("update:modelValue", e), e && (ae(), te(() => {
+			l.disabled && e || (u("update:modelValue", e), e && (ae(), te(() => {
 				X(), B.value?.focus({ preventScroll: !0 });
-			}));
+			})));
 		}
 		function oe() {
-			Z(!l.modelValue);
+			l.disabled || Z(!l.modelValue);
 		}
 		function se() {
 			l.modelValue && X();
@@ -220,7 +228,7 @@ var F = {
 			K && clearTimeout(K), q && clearTimeout(q), K = void 0, q = void 0;
 		}
 		function le() {
-			l.trigger === "hover" && (Q(), K = setTimeout(Z, l.showDelay, !0));
+			l.disabled || l.trigger !== "hover" || (Q(), K = setTimeout(Z, l.showDelay, !0));
 		}
 		function ue() {
 			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
@@ -249,27 +257,31 @@ var F = {
 			}
 		}
 		function me(e) {
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || Z(!0));
+			l.disabled || (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || Z(!0));
 		}
+		re(() => l.disabled, (e) => {
+			e && l.modelValue && Z(!1);
+		});
 		function $(e) {
 			l.modelValue && R.value && !R.value.contains(e.target) && !B.value?.contains(e.target) && Z(!1);
 		}
 		return re(() => l.modelValue, (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), o(() => l.modelValue && Y.value, se), D(() => {
+		}, { immediate: !0 }), i(() => l.modelValue && Y.value, se), D(() => {
 			document.removeEventListener("click", $), Q();
-		}), (e, n) => (O(), v("div", w({
+		}), (e, t) => (O(), v("div", w({
 			ref_key: "root",
 			ref: R
-		}, N(C), { class: "m-dropdown" }), [y("span", {
+		}, N(C), { class: ["m-dropdown", { "m-dropdown--disabled": o.disabled }] }), [y("span", {
 			ref_key: "trigger",
 			ref: z,
 			class: "m-dropdown__trigger",
 			role: "button",
-			tabindex: "0",
-			"aria-expanded": t.modelValue,
+			tabindex: o.disabled ? -1 : 0,
+			"aria-expanded": o.modelValue,
+			"aria-disabled": o.disabled || void 0,
 			"aria-haspopup": "menu",
-			onClick: n[0] ||= (e) => l.trigger === "click" && oe(),
+			onClick: t[0] ||= (e) => l.trigger === "click" && oe(),
 			onMouseenter: le,
 			onMouseleave: ue,
 			onKeydown: me
@@ -280,11 +292,11 @@ var F = {
 			name: N(F),
 			css: N(I)
 		}, {
-			default: P(() => [t.modelValue ? (O(), v("div", {
+			default: P(() => [o.modelValue ? (O(), v("div", {
 				key: 0,
 				ref_key: "menu",
 				ref: B,
-				class: T(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": Y.value }]]),
+				class: T(["m-dropdown__menu", [`m-dropdown__menu--${o.placement}`, { "m-dropdown__menu--teleported": Y.value }]]),
 				style: E(Y.value ? V.value : void 0),
 				role: "menu",
 				tabindex: "-1",
@@ -298,10 +310,10 @@ var F = {
 				"view-class": "m-dropdown__scroll-view"
 			}, {
 				default: P(() => [S(W, {
-					items: t.items,
+					items: o.items,
 					"highlighted-value": G.value,
 					onSelect: ce,
-					onHighlight: n[1] ||= (e) => H.value = U.value.findIndex((t) => t.value === e),
+					onHighlight: t[1] ||= (e) => H.value = U.value.findIndex((t) => t.value === e),
 					onSubmenuEnter: de,
 					onSubmenuLeave: fe
 				}, b({ _: 2 }, [e.$slots.item ? {