morya-ui 0.3.8 → 0.4.0

package/dist/splitter/index.js

@@ -1,31 +1,31 @@
 import { a as e, n as t, t as n } from "../useComponentAttrs-e-5QAjdw.js";
-import { n as r } from "../locale-xavS6-Hw.js";
+import { n as r } from "../locale-Dnk0UIie.js";
 import "./style.js";
-import { Comment as i, Fragment as a, Text as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as ee, createElementVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as te, openBlock as h, ref as g, renderSlot as _, resolveDynamicComponent as v, unref as y, useAttrs as ne, useSlots as re, watch as b } from "vue";
+import { Comment as i, Fragment as a, Text as ee, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as te, openBlock as h, ref as g, renderSlot as _, resolveDynamicComponent as v, unref as y, useAttrs as b, useSlots as ne, watch as x } from "vue";
 //#region src/components/Splitter/size.ts
-function x(e, t = "percent") {
+function S(e, t = "percent") {
 	return e == null ? t : typeof e == "string" ? "px" : e <= 1 ? "ratio" : "percent";
 }
-function S(e, t, n) {
+function C(e, t, n) {
 	if (typeof e == "string") {
 		let t = Number.parseFloat(e);
 		return Number.isFinite(t) ? t : 0;
 	}
 	return n === "ratio" ? e * t : e / 100 * t;
 }
-function ie(e, t, n) {
+function re(e, t, n) {
 	return t <= 0 ? n === "px" ? "0px" : 0 : n === "px" ? `${Math.round(e)}px` : Number(n === "ratio" ? (e / t).toFixed(4) : (e / t * 100).toFixed(1));
 }
-function ae(e, t) {
+function w(e, t) {
 	return t === "px" || typeof e == "string" ? typeof e == "string" ? e : `${e}px` : t === "ratio" ? `${e * 100}%` : `${e}%`;
 }
-function C(e, t, n, r) {
+function ie(e, t, n, r) {
 	let i = Math.min(n, r);
 	return Math.min(i, Math.max(Math.min(t, i), e));
 }
 //#endregion
 //#region src/components/Splitter/Splitter.vue?vue&type=script&setup=true&lang.ts
-var w = [
+var ae = [
 	"tabindex",
 	"aria-orientation",
 	"aria-valuenow",
@@ -43,6 +43,7 @@ var w = [
 		size: {},
 		defaultSize: { default: 50 },
 		min: {},
+		min2: {},
 		max: {},
 		disabled: {
 			type: Boolean,
@@ -64,20 +65,20 @@ var w = [
 		"drag-end"
 	],
 	setup(d, { emit: T }) {
-		let E = d, D = T, oe = ne(), { rootAttrs: se } = e(oe, () => E.pt), O = r(), k = re(), A = g(null), j = g(!1), M = s(() => E.layout ?? E.direction ?? "horizontal"), N = s(() => M.value === "vertical"), P = s(() => E.size !== void 0), F = s(() => x(E.size ?? E.defaultSize, "percent")), I = s(() => E.min === void 0 ? F.value === "ratio" ? .1 : F.value === "px" ? "40px" : 10 : E.min), L = s(() => {
+		let E = d, D = T, oe = b(), { rootAttrs: se } = e(oe, () => E.pt), O = r(), k = ne(), A = g(null), j = g(!1), M = o(() => E.layout ?? E.direction ?? "horizontal"), N = o(() => M.value === "vertical"), P = o(() => E.size !== void 0), F = o(() => S(E.size ?? E.defaultSize, "percent")), I = o(() => E.min === void 0 ? F.value === "ratio" ? .1 : F.value === "px" ? "40px" : 10 : E.min), L = o(() => {
 			if (E.max !== void 0) return E.max;
 			if (F.value === "ratio") return .9;
 			if (F.value !== "px") return 90;
-		}), R = g(E.defaultSize), z = s(() => P.value ? E.size : R.value);
-		b(() => E.size, (e) => {
+		}), R = g(E.defaultSize), z = o(() => P.value ? E.size : R.value);
+		x(() => E.size, (e) => {
 			e !== void 0 && !j.value && (R.value = e);
-		}), b(() => E.defaultSize, (e) => {
+		}), x(() => E.defaultSize, (e) => {
 			P.value || (R.value = e);
 		});
 		let B = 0, V = 0, H = 0, U = 0, W = null;
 		function G(e) {
 			let t = [];
-			for (let n of e) if (n.type !== i && !(n.type === o && !String(n.children ?? "").trim())) {
+			for (let n of e) if (n.type !== i && !(n.type === ee && !String(n.children ?? "").trim())) {
 				if (n.type === a && Array.isArray(n.children)) {
 					t.push(...G(n.children));
 					continue;
@@ -86,10 +87,10 @@ var w = [
 			}
 			return t;
 		}
-		let K = s(() => {
+		let K = o(() => {
 			let e = G(k.default?.() ?? []);
 			return [e[0] ?? null, e[1] ?? null];
-		}), ce = s(() => !!(k["resize-trigger"] || k.gutter));
+		}), ce = o(() => !!(k["resize-trigger"] || k.gutter));
 		function q() {
 			let e = A.value;
 			if (!e) return 0;
@@ -99,10 +100,24 @@ var w = [
 		function J(e) {
 			return typeof e == "string" || e == null ? void 0 : e;
 		}
-		let le = s(() => ({
-			flex: `0 0 ${ae(z.value, F.value)}`,
-			...J(E.pane1Style)
-		})), ue = s(() => J(E.pane2Style)), de = s(() => t({
+		let le = o(() => {
+			let e = {
+				flex: `0 0 ${w(z.value, F.value)}`,
+				...J(E.pane1Style)
+			};
+			if (E.min != null) {
+				let t = w(E.min, S(E.min, F.value));
+				N.value ? e.minHeight = t : e.minWidth = t;
+			}
+			return e;
+		}), ue = o(() => {
+			let e = { ...J(E.pane2Style) };
+			if (E.min2 != null) {
+				let t = w(E.min2, S(E.min2, F.value));
+				N.value ? e.minHeight = t : e.minWidth = t;
+			}
+			return e;
+		}), de = o(() => t({
 			class: n("m-splitter__gutter", { "m-splitter__gutter--slotted": ce.value }, E.resizeTriggerClass),
 			style: E.resizeTriggerStyle
 		}, E.pt?.gutter));
@@ -112,8 +127,12 @@ var w = [
 		function Y(e, t) {
 			let n = F.value;
 			if (t <= 0) return;
-			let r = S(I.value, t, x(I.value, n)), i = L.value;
-			fe(ie(C(e, r, i === void 0 && n === "px" ? t : S(i ?? (n === "ratio" ? 1 : 100), t, x(i ?? 100, n)), t), t, n));
+			let r = C(I.value, t, S(I.value, n)), i = L.value, a = i === void 0 && n === "px" ? t : C(i ?? (n === "ratio" ? 1 : 100), t, S(i ?? 100, n));
+			if (E.min2 !== void 0) {
+				let e = C(E.min2, t, S(E.min2, n));
+				a = Math.min(a, Math.max(0, t - e));
+			}
+			fe(re(ie(e, r, a, t), t, n));
 		}
 		function pe() {
 			U = 0;
@@ -139,13 +158,13 @@ var w = [
 			Z(e);
 		}
 		function $(e) {
-			E.disabled || "button" in e && e.button > 0 || A.value && (e.preventDefault(), H = q(), !(H <= 0) && (B = N.value ? e.clientY : e.clientX, V = S(z.value, H, F.value), j.value = !0, document.body.style.cursor = N.value ? "row-resize" : "col-resize", document.body.style.userSelect = "none", D("drag-start", e), window.addEventListener("mousemove", X, !0), window.addEventListener("mouseup", Q, !0), window.addEventListener("pointermove", X, !0), window.addEventListener("pointerup", Q, !0)));
+			E.disabled || "button" in e && e.button > 0 || A.value && (e.preventDefault(), H = q(), !(H <= 0) && (B = N.value ? e.clientY : e.clientX, V = C(z.value, H, F.value), j.value = !0, document.body.style.cursor = N.value ? "row-resize" : "col-resize", document.body.style.userSelect = "none", D("drag-start", e), window.addEventListener("mousemove", X, !0), window.addEventListener("mouseup", Q, !0), window.addEventListener("pointermove", X, !0), window.addEventListener("pointerup", Q, !0)));
 		}
 		function me(e) {
 			if (E.disabled) return;
 			let t = F.value, n = q();
 			n <= 0 && t !== "px" && (n = 100);
-			let r = S(z.value, n, t), i = e.shiftKey ? n * .05 : n * .01, a = (t) => {
+			let r = C(z.value, n, t), i = e.shiftKey ? n * .05 : n * .01, a = (t) => {
 				e.preventDefault(), Y(r + t, n);
 			};
 			if (N.value) {
@@ -154,19 +173,23 @@ var w = [
 			}
 			e.key === "ArrowLeft" ? a(-i) : e.key === "ArrowRight" && a(i);
 		}
-		let he = s(() => {
+		let he = o(() => {
 			let e = F.value, t = z.value;
 			return e === "px" && typeof t == "string" ? Math.round(Number.parseFloat(t)) : e === "ratio" && typeof t == "number" ? Math.round(t * 100) : typeof t == "number" ? Math.round(t) : 0;
-		}), ge = s(() => {
+		}), ge = o(() => {
 			let e = I.value;
 			return typeof e == "string" ? Math.round(Number.parseFloat(e)) : F.value === "ratio" ? Math.round(e * 100) : Math.round(e);
-		}), _e = s(() => {
-			let e = L.value;
-			if (e !== void 0) return typeof e == "string" ? Math.round(Number.parseFloat(e)) : F.value === "ratio" ? Math.round(e * 100) : Math.round(e);
+		}), _e = o(() => {
+			let e = L.value, t = e === void 0 ? 100 : typeof e == "string" ? Math.round(Number.parseFloat(e)) : F.value === "ratio" ? Math.round(e * 100) : Math.round(e);
+			if (E.min2 !== void 0) {
+				let e = E.min2, n = typeof e == "string" ? void 0 : F.value === "ratio" ? Math.round(e * 100) : Math.round(e);
+				n != null && (t = Math.min(t, 100 - n));
+			}
+			return t;
 		});
 		return te(() => {
 			Z();
-		}), (e, t) => (h(), ee("div", f({
+		}), (e, t) => (h(), l("div", f({
 			ref_key: "root",
 			ref: A
 		}, y(se), {
@@ -179,7 +202,7 @@ var w = [
 			u("div", {
 				class: p(["m-splitter__panel", d.pane1Class]),
 				style: m(le.value)
-			}, [y(k).panel1 ? _(e.$slots, "panel1", {}, void 0, void 0, 0) : y(k)[1] ? _(e.$slots, "1", {}, void 0, void 0, 1) : K.value[0] ? (h(), c(v(K.value[0]), { key: 2 })) : l("", !0)], 6),
+			}, [y(k).panel1 ? _(e.$slots, "panel1", {}, void 0, void 0, 0) : y(k)[1] ? _(e.$slots, "1", {}, void 0, void 0, 1) : K.value[0] ? (h(), s(v(K.value[0]), { key: 2 })) : c("", !0)], 6),
 			u("div", f(de.value, {
 				role: "separator",
 				tabindex: d.disabled ? -1 : 0,
@@ -192,11 +215,11 @@ var w = [
 				onPointerdown: $,
 				onMousedown: $,
 				onKeydown: me
-			}), [y(k)["resize-trigger"] ? _(e.$slots, "resize-trigger", {}, void 0, void 0, 0) : _(e.$slots, "gutter", {}, void 0, void 0, 1)], 16, w),
+			}), [y(k)["resize-trigger"] ? _(e.$slots, "resize-trigger", {}, void 0, void 0, 0) : _(e.$slots, "gutter", {}, void 0, void 0, 1)], 16, ae),
 			u("div", {
 				class: p(["m-splitter__panel m-splitter__panel--fill", d.pane2Class]),
 				style: m(ue.value)
-			}, [y(k).panel2 ? _(e.$slots, "panel2", {}, void 0, void 0, 0) : y(k)[2] ? _(e.$slots, "2", {}, void 0, void 0, 1) : K.value[1] ? (h(), c(v(K.value[1]), { key: 2 })) : l("", !0)], 6)
+			}, [y(k).panel2 ? _(e.$slots, "panel2", {}, void 0, void 0, 0) : y(k)[2] ? _(e.$slots, "2", {}, void 0, void 0, 1) : K.value[1] ? (h(), s(v(K.value[1]), { key: 2 })) : c("", !0)], 6)
 		], 16));
 	}
 });

package/dist/splitter/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,