@element-plus/nightly 0.0.20260308 → 0.0.20260310

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20260308 */
+/*! Element Plus v0.0.20260310 */
 
 (function(global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('vue')) :
@@ -10462,7 +10462,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 
 //#endregion
 //#region ../../packages/element-plus/version.ts
-	const version$1 = "0.0.20260308";
+	const version$1 = "0.0.20260310";
 
 //#endregion
 //#region ../../packages/element-plus/make-installer.ts
@@ -13852,6 +13852,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			});
 			(0, vue.watch)(() => props.disabled, (disabled) => {
 				if (disabled && open.value) open.value = false;
+				if (!disabled && isBoolean(props.visible)) open.value = props.visible;
 			});
 			const isFocusInsideContent = (event) => {
 				return contentRef.value?.isFocusInsideContent(event);
@@ -16207,14 +16208,14 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	};
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@3.6.1/node_modules/@ctrl/tinycolor/dist/module/util.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.0/node_modules/@ctrl/tinycolor/dist/module/util.js
 /**
 	* Take input from [0, n] and return it as [0, 1]
 	* @hidden
 	*/
 	function bound01(n, max) {
 		if (isOnePointZero(n)) n = "100%";
-		var isPercent = isPercentage(n);
+		const isPercent = isPercentage(n);
 		n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
 		if (isPercent) n = parseInt(String(n * max), 10) / 100;
 		if (Math.abs(n - max) < 1e-6) return 1;
@@ -16258,7 +16259,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	* @hidden
 	*/
 	function convertToPercentage(n) {
-		if (n <= 1) return "".concat(Number(n) * 100, "%");
+		if (Number(n) <= 1) return `${Number(n) * 100}%`;
 		return n;
 	}
 	/**
@@ -16270,7 +16271,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	}
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@3.6.1/node_modules/@ctrl/tinycolor/dist/module/conversion.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.0/node_modules/@ctrl/tinycolor/dist/module/conversion.js
 /**
 	* Handle bounds / percentage checking to conform to CSS color spec
 	* <http://www.w3.org/TR/css3-color/>
@@ -16293,16 +16294,16 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		r = bound01(r, 255);
 		g = bound01(g, 255);
 		b = bound01(b, 255);
-		var max = Math.max(r, g, b);
-		var min = Math.min(r, g, b);
-		var h = 0;
-		var s = 0;
-		var l = (max + min) / 2;
+		const max = Math.max(r, g, b);
+		const min = Math.min(r, g, b);
+		let h = 0;
+		let s = 0;
+		const l = (max + min) / 2;
 		if (max === min) {
 			s = 0;
 			h = 0;
 		} else {
-			var d = max - min;
+			const d = max - min;
 			s = l > .5 ? d / (2 - max - min) : d / (max + min);
 			switch (max) {
 				case r:
@@ -16339,9 +16340,9 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	* *Returns:* { r, g, b } in the set [0, 255]
 	*/
 	function hslToRgb(h, s, l) {
-		var r;
-		var g;
-		var b;
+		let r;
+		let g;
+		let b;
 		h = bound01(h, 360);
 		s = bound01(s, 100);
 		l = bound01(l, 100);
@@ -16350,8 +16351,8 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			b = l;
 			r = l;
 		} else {
-			var q = l < .5 ? l * (1 + s) : l + s - l * s;
-			var p = 2 * l - q;
+			const q = l < .5 ? l * (1 + s) : l + s - l * s;
+			const p = 2 * l - q;
 			r = hue2rgb(p, q, h + 1 / 3);
 			g = hue2rgb(p, q, h);
 			b = hue2rgb(p, q, h - 1 / 3);
@@ -16372,12 +16373,12 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		r = bound01(r, 255);
 		g = bound01(g, 255);
 		b = bound01(b, 255);
-		var max = Math.max(r, g, b);
-		var min = Math.min(r, g, b);
-		var h = 0;
-		var v = max;
-		var d = max - min;
-		var s = max === 0 ? 0 : d / max;
+		const max = Math.max(r, g, b);
+		const min = Math.min(r, g, b);
+		let h = 0;
+		const v = max;
+		const d = max - min;
+		const s = max === 0 ? 0 : d / max;
 		if (max === min) h = 0;
 		else {
 			switch (max) {
@@ -16410,13 +16411,13 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		h = bound01(h, 360) * 6;
 		s = bound01(s, 100);
 		v = bound01(v, 100);
-		var i = Math.floor(h);
-		var f = h - i;
-		var p = v * (1 - s);
-		var q = v * (1 - f * s);
-		var t = v * (1 - (1 - f) * s);
-		var mod = i % 6;
-		var r = [
+		const i = Math.floor(h);
+		const f = h - i;
+		const p = v * (1 - s);
+		const q = v * (1 - f * s);
+		const t = v * (1 - (1 - f) * s);
+		const mod = i % 6;
+		const r = [
 			v,
 			q,
 			p,
@@ -16424,7 +16425,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			t,
 			v
 		][mod];
-		var g = [
+		const g = [
 			t,
 			v,
 			v,
@@ -16432,7 +16433,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			p,
 			p
 		][mod];
-		var b = [
+		const b = [
 			p,
 			p,
 			t,
@@ -16449,11 +16450,11 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	/**
 	* Converts an RGB color to hex
 	*
-	* Assumes r, g, and b are contained in the set [0, 255]
-	* Returns a 3 or 6 character hex
+	* *Assumes:* r, g, and b are contained in the set [0, 255]
+	* *Returns:* a 3 or 6 character hex
 	*/
 	function rgbToHex(r, g, b, allow3Char) {
-		var hex = [
+		const hex = [
 			pad2(Math.round(r).toString(16)),
 			pad2(Math.round(g).toString(16)),
 			pad2(Math.round(b).toString(16))
@@ -16464,11 +16465,11 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	/**
 	* Converts an RGBA color plus alpha transparency to hex
 	*
-	* Assumes r, g, b are contained in the set [0, 255] and
-	* a in [0, 1]. Returns a 4 or 8 character rgba hex
+	* *Assumes:* r, g, b are contained in the set [0, 255] and a in [0, 1]
+	* *Returns:* a 4 or 8 character rgba hex
 	*/
 	function rgbaToHex(r, g, b, a, allow4Char) {
-		var hex = [
+		const hex = [
 			pad2(Math.round(r).toString(16)),
 			pad2(Math.round(g).toString(16)),
 			pad2(Math.round(b).toString(16)),
@@ -16477,6 +16478,43 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
 		return hex.join("");
 	}
+	/**
+	* Converts CMYK to RBG
+	* Assumes c, m, y, k are in the set [0, 100]
+	*/
+	function cmykToRgb(c, m, y, k) {
+		const cConv = c / 100;
+		const mConv = m / 100;
+		const yConv = y / 100;
+		const kConv = k / 100;
+		return {
+			r: 255 * (1 - cConv) * (1 - kConv),
+			g: 255 * (1 - mConv) * (1 - kConv),
+			b: 255 * (1 - yConv) * (1 - kConv)
+		};
+	}
+	function rgbToCmyk(r, g, b) {
+		let c = 1 - r / 255;
+		let m = 1 - g / 255;
+		let y = 1 - b / 255;
+		let k = Math.min(c, m, y);
+		if (k === 1) {
+			c = 0;
+			m = 0;
+			y = 0;
+		} else {
+			c = (c - k) / (1 - k) * 100;
+			m = (m - k) / (1 - k) * 100;
+			y = (y - k) / (1 - k) * 100;
+		}
+		k *= 100;
+		return {
+			c: Math.round(c),
+			m: Math.round(m),
+			y: Math.round(y),
+			k: Math.round(k)
+		};
+	}
 	/** Converts a decimal to a hex value */
 	function convertDecimalToHex(d) {
 		return Math.round(parseFloat(d) * 255).toString(16);
@@ -16498,11 +16536,11 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	}
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@3.6.1/node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.0/node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
 /**
 	* @hidden
 	*/
-	var names = {
+	const names = {
 		aliceblue: "#f0f8ff",
 		antiquewhite: "#faebd7",
 		aqua: "#00ffff",
@@ -16654,7 +16692,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	};
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@3.6.1/node_modules/@ctrl/tinycolor/dist/module/format-input.js
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.0/node_modules/@ctrl/tinycolor/dist/module/format-input.js
 /**
 	* Given a string or object, convert that input to RGB
 	*
@@ -16671,20 +16709,21 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	* "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
 	* "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
 	* "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+	* "cmyk(0, 20, 0, 0)" or "cmyk 0 20 0 0"
 	* ```
 	*/
 	function inputToRGB(color) {
-		var rgb = {
+		let rgb = {
 			r: 0,
 			g: 0,
 			b: 0
 		};
-		var a = 1;
-		var s = null;
-		var v = null;
-		var l = null;
-		var ok = false;
-		var format = false;
+		let a = 1;
+		let s = null;
+		let v = null;
+		let l = null;
+		let ok = false;
+		let format = false;
 		if (typeof color === "string") color = stringInputToObject(color);
 		if (typeof color === "object") {
 			if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
@@ -16703,6 +16742,10 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				rgb = hslToRgb(color.h, s, l);
 				ok = true;
 				format = "hsl";
+			} else if (isValidCSSUnit(color.c) && isValidCSSUnit(color.m) && isValidCSSUnit(color.y) && isValidCSSUnit(color.k)) {
+				rgb = cmykToRgb(color.c, color.m, color.y, color.k);
+				ok = true;
+				format = "cmyk";
 			}
 			if (Object.prototype.hasOwnProperty.call(color, "a")) a = color.a;
 		}
@@ -16716,10 +16759,10 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			a
 		};
 	}
-	var CSS_UNIT = "(?:".concat("[-\\+]?\\d*\\.\\d+%?", ")|(?:").concat("[-\\+]?\\d+%?", ")");
-	var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
-	var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
-	var matchers = {
+	const CSS_UNIT = "(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)";
+	const PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?";
+	const PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?";
+	const matchers = {
 		CSS_UNIT: new RegExp(CSS_UNIT),
 		rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
 		rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
@@ -16727,6 +16770,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 		hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
 		hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
 		hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+		cmyk: new RegExp("cmyk" + PERMISSIVE_MATCH4),
 		hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
 		hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
 		hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
@@ -16734,12 +16778,12 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	};
 	/**
 	* Permissive string parsing.  Take in a number of formats, and output an object
-	* based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
+	* based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` or `{c, m, y, k}` or `{c, m, y, k, a}`
 	*/
 	function stringInputToObject(color) {
 		color = color.trim().toLowerCase();
 		if (color.length === 0) return false;
-		var named = false;
+		let named = false;
 		if (names[color]) {
 			color = names[color];
 			named = true;
@@ -16750,7 +16794,7 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			a: 0,
 			format: "name"
 		};
-		var match = matchers.rgb.exec(color);
+		let match = matchers.rgb.exec(color);
 		if (match) return {
 			r: match[1],
 			g: match[2],
@@ -16789,6 +16833,13 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			v: match[3],
 			a: match[4]
 		};
+		match = matchers.cmyk.exec(color);
+		if (match) return {
+			c: match[1],
+			m: match[2],
+			y: match[3],
+			k: match[4]
+		};
 		match = matchers.hex8.exec(color);
 		if (match) return {
 			r: parseIntFromHex(match[1]),
@@ -16826,57 +16877,55 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 	* (see `matchers` above for definition).
 	*/
 	function isValidCSSUnit(color) {
-		return Boolean(matchers.CSS_UNIT.exec(String(color)));
+		if (typeof color === "number") return !Number.isNaN(color);
+		return matchers.CSS_UNIT.test(color);
 	}
 
 //#endregion
-//#region ../../node_modules/.pnpm/@ctrl+tinycolor@3.6.1/node_modules/@ctrl/tinycolor/dist/module/index.js
-	var TinyColor = function() {
-		function TinyColor(color, opts) {
-			if (color === void 0) color = "";
-			if (opts === void 0) opts = {};
-			var _a;
+//#region ../../node_modules/.pnpm/@ctrl+tinycolor@4.2.0/node_modules/@ctrl/tinycolor/dist/module/index.js
+	var TinyColor = class TinyColor {
+		constructor(color = "", opts = {}) {
 			if (color instanceof TinyColor) return color;
 			if (typeof color === "number") color = numberInputToObject(color);
 			this.originalInput = color;
-			var rgb = inputToRGB(color);
+			const rgb = inputToRGB(color);
 			this.originalInput = color;
 			this.r = rgb.r;
 			this.g = rgb.g;
 			this.b = rgb.b;
 			this.a = rgb.a;
 			this.roundA = Math.round(100 * this.a) / 100;
-			this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
+			this.format = opts.format ?? rgb.format;
 			this.gradientType = opts.gradientType;
 			if (this.r < 1) this.r = Math.round(this.r);
 			if (this.g < 1) this.g = Math.round(this.g);
 			if (this.b < 1) this.b = Math.round(this.b);
 			this.isValid = rgb.ok;
 		}
-		TinyColor.prototype.isDark = function() {
+		isDark() {
 			return this.getBrightness() < 128;
-		};
-		TinyColor.prototype.isLight = function() {
+		}
+		isLight() {
 			return !this.isDark();
-		};
+		}
 		/**
 		* Returns the perceived brightness of the color, from 0-255.
 		*/
-		TinyColor.prototype.getBrightness = function() {
-			var rgb = this.toRgb();
+		getBrightness() {
+			const rgb = this.toRgb();
 			return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
-		};
+		}
 		/**
 		* Returns the perceived luminance of a color, from 0-1.
 		*/
-		TinyColor.prototype.getLuminance = function() {
-			var rgb = this.toRgb();
-			var R;
-			var G;
-			var B;
-			var RsRGB = rgb.r / 255;
-			var GsRGB = rgb.g / 255;
-			var BsRGB = rgb.b / 255;
+		getLuminance() {
+			const rgb = this.toRgb();
+			let R;
+			let G;
+			let B;
+			const RsRGB = rgb.r / 255;
+			const GsRGB = rgb.g / 255;
+			const BsRGB = rgb.b / 255;
 			if (RsRGB <= .03928) R = RsRGB / 12.92;
 			else R = Math.pow((RsRGB + .055) / 1.055, 2.4);
 			if (GsRGB <= .03928) G = GsRGB / 12.92;
@@ -16884,177 +16933,173 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			if (BsRGB <= .03928) B = BsRGB / 12.92;
 			else B = Math.pow((BsRGB + .055) / 1.055, 2.4);
 			return .2126 * R + .7152 * G + .0722 * B;
-		};
+		}
 		/**
 		* Returns the alpha value of a color, from 0-1.
 		*/
-		TinyColor.prototype.getAlpha = function() {
+		getAlpha() {
 			return this.a;
-		};
+		}
 		/**
 		* Sets the alpha value on the current color.
 		*
 		* @param alpha - The new alpha value. The accepted range is 0-1.
 		*/
-		TinyColor.prototype.setAlpha = function(alpha) {
+		setAlpha(alpha) {
 			this.a = boundAlpha(alpha);
 			this.roundA = Math.round(100 * this.a) / 100;
 			return this;
-		};
+		}
 		/**
 		* Returns whether the color is monochrome.
 		*/
-		TinyColor.prototype.isMonochrome = function() {
-			return this.toHsl().s === 0;
-		};
+		isMonochrome() {
+			const { s } = this.toHsl();
+			return s === 0;
+		}
 		/**
 		* Returns the object as a HSVA object.
 		*/
-		TinyColor.prototype.toHsv = function() {
-			var hsv = rgbToHsv(this.r, this.g, this.b);
+		toHsv() {
+			const hsv = rgbToHsv(this.r, this.g, this.b);
 			return {
 				h: hsv.h * 360,
 				s: hsv.s,
 				v: hsv.v,
 				a: this.a
 			};
-		};
+		}
 		/**
 		* Returns the hsva values interpolated into a string with the following format:
 		* "hsva(xxx, xxx, xxx, xx)".
 		*/
-		TinyColor.prototype.toHsvString = function() {
-			var hsv = rgbToHsv(this.r, this.g, this.b);
-			var h = Math.round(hsv.h * 360);
-			var s = Math.round(hsv.s * 100);
-			var v = Math.round(hsv.v * 100);
-			return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
-		};
+		toHsvString() {
+			const hsv = rgbToHsv(this.r, this.g, this.b);
+			const h = Math.round(hsv.h * 360);
+			const s = Math.round(hsv.s * 100);
+			const v = Math.round(hsv.v * 100);
+			return this.a === 1 ? `hsv(${h}, ${s}%, ${v}%)` : `hsva(${h}, ${s}%, ${v}%, ${this.roundA})`;
+		}
 		/**
 		* Returns the object as a HSLA object.
 		*/
-		TinyColor.prototype.toHsl = function() {
-			var hsl = rgbToHsl(this.r, this.g, this.b);
+		toHsl() {
+			const hsl = rgbToHsl(this.r, this.g, this.b);
 			return {
 				h: hsl.h * 360,
 				s: hsl.s,
 				l: hsl.l,
 				a: this.a
 			};
-		};
+		}
 		/**
 		* Returns the hsla values interpolated into a string with the following format:
 		* "hsla(xxx, xxx, xxx, xx)".
 		*/
-		TinyColor.prototype.toHslString = function() {
-			var hsl = rgbToHsl(this.r, this.g, this.b);
-			var h = Math.round(hsl.h * 360);
-			var s = Math.round(hsl.s * 100);
-			var l = Math.round(hsl.l * 100);
-			return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
-		};
+		toHslString() {
+			const hsl = rgbToHsl(this.r, this.g, this.b);
+			const h = Math.round(hsl.h * 360);
+			const s = Math.round(hsl.s * 100);
+			const l = Math.round(hsl.l * 100);
+			return this.a === 1 ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${this.roundA})`;
+		}
 		/**
 		* Returns the hex value of the color.
 		* @param allow3Char will shorten hex value to 3 char if possible
 		*/
-		TinyColor.prototype.toHex = function(allow3Char) {
-			if (allow3Char === void 0) allow3Char = false;
+		toHex(allow3Char = false) {
 			return rgbToHex(this.r, this.g, this.b, allow3Char);
-		};
+		}
 		/**
 		* Returns the hex value of the color -with a # prefixed.
 		* @param allow3Char will shorten hex value to 3 char if possible
 		*/
-		TinyColor.prototype.toHexString = function(allow3Char) {
-			if (allow3Char === void 0) allow3Char = false;
+		toHexString(allow3Char = false) {
 			return "#" + this.toHex(allow3Char);
-		};
+		}
 		/**
 		* Returns the hex 8 value of the color.
 		* @param allow4Char will shorten hex value to 4 char if possible
 		*/
-		TinyColor.prototype.toHex8 = function(allow4Char) {
-			if (allow4Char === void 0) allow4Char = false;
+		toHex8(allow4Char = false) {
 			return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
-		};
+		}
 		/**
 		* Returns the hex 8 value of the color -with a # prefixed.
 		* @param allow4Char will shorten hex value to 4 char if possible
 		*/
-		TinyColor.prototype.toHex8String = function(allow4Char) {
-			if (allow4Char === void 0) allow4Char = false;
+		toHex8String(allow4Char = false) {
 			return "#" + this.toHex8(allow4Char);
-		};
+		}
 		/**
 		* Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
 		* @param allowShortChar will shorten hex value to 3 or 4 char if possible
 		*/
-		TinyColor.prototype.toHexShortString = function(allowShortChar) {
-			if (allowShortChar === void 0) allowShortChar = false;
+		toHexShortString(allowShortChar = false) {
 			return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
-		};
+		}
 		/**
 		* Returns the object as a RGBA object.
 		*/
-		TinyColor.prototype.toRgb = function() {
+		toRgb() {
 			return {
 				r: Math.round(this.r),
 				g: Math.round(this.g),
 				b: Math.round(this.b),
 				a: this.a
 			};
-		};
+		}
 		/**
 		* Returns the RGBA values interpolated into a string with the following format:
 		* "RGBA(xxx, xxx, xxx, xx)".
 		*/
-		TinyColor.prototype.toRgbString = function() {
-			var r = Math.round(this.r);
-			var g = Math.round(this.g);
-			var b = Math.round(this.b);
-			return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
-		};
+		toRgbString() {
+			const r = Math.round(this.r);
+			const g = Math.round(this.g);
+			const b = Math.round(this.b);
+			return this.a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${this.roundA})`;
+		}
 		/**
 		* Returns the object as a RGBA object.
 		*/
-		TinyColor.prototype.toPercentageRgb = function() {
-			var fmt = function(x) {
-				return "".concat(Math.round(bound01(x, 255) * 100), "%");
-			};
+		toPercentageRgb() {
+			const fmt = (x) => `${Math.round(bound01(x, 255) * 100)}%`;
 			return {
 				r: fmt(this.r),
 				g: fmt(this.g),
 				b: fmt(this.b),
 				a: this.a
 			};
-		};
+		}
 		/**
 		* Returns the RGBA relative values interpolated into a string
 		*/
-		TinyColor.prototype.toPercentageRgbString = function() {
-			var rnd = function(x) {
-				return Math.round(bound01(x, 255) * 100);
-			};
-			return this.a === 1 ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)") : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
-		};
+		toPercentageRgbString() {
+			const rnd = (x) => Math.round(bound01(x, 255) * 100);
+			return this.a === 1 ? `rgb(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%)` : `rgba(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%, ${this.roundA})`;
+		}
+		toCmyk() {
+			return { ...rgbToCmyk(this.r, this.g, this.b) };
+		}
+		toCmykString() {
+			const { c, m, y, k } = rgbToCmyk(this.r, this.g, this.b);
+			return `cmyk(${c}, ${m}, ${y}, ${k})`;
+		}
 		/**
 		* The 'real' name of the color -if there is one.
 		*/
-		TinyColor.prototype.toName = function() {
+		toName() {
 			if (this.a === 0) return "transparent";
 			if (this.a < 1) return false;
-			var hex = "#" + rgbToHex(this.r, this.g, this.b, false);
-			for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
-				var _b = _a[_i], key = _b[0];
-				if (hex === _b[1]) return key;
-			}
+			const hex = "#" + rgbToHex(this.r, this.g, this.b, false);
+			for (const [key, value] of Object.entries(names)) if (hex === value) return key;
 			return false;
-		};
-		TinyColor.prototype.toString = function(format) {
-			var formatSet = Boolean(format);
-			format = format !== null && format !== void 0 ? format : this.format;
-			var formattedString = false;
-			var hasAlpha = this.a < 1 && this.a >= 0;
+		}
+		toString(format) {
+			const formatSet = Boolean(format);
+			format = format ?? this.format;
+			let formattedString = false;
+			const hasAlpha = this.a < 1 && this.a >= 0;
 			if (!formatSet && hasAlpha && (format.startsWith("hex") || format === "name")) {
 				if (format === "name" && this.a === 0) return this.toName();
 				return this.toRgbString();
@@ -17068,151 +17113,141 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 			if (format === "name") formattedString = this.toName();
 			if (format === "hsl") formattedString = this.toHslString();
 			if (format === "hsv") formattedString = this.toHsvString();
+			if (format === "cmyk") formattedString = this.toCmykString();
 			return formattedString || this.toHexString();
-		};
-		TinyColor.prototype.toNumber = function() {
+		}
+		toNumber() {
 			return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
-		};
-		TinyColor.prototype.clone = function() {
+		}
+		clone() {
 			return new TinyColor(this.toString());
-		};
+		}
 		/**
 		* Lighten the color a given amount. Providing 100 will always return white.
 		* @param amount - valid between 1-100
 		*/
-		TinyColor.prototype.lighten = function(amount) {
-			if (amount === void 0) amount = 10;
-			var hsl = this.toHsl();
+		lighten(amount = 10) {
+			const hsl = this.toHsl();
 			hsl.l += amount / 100;
 			hsl.l = clamp01(hsl.l);
 			return new TinyColor(hsl);
-		};
+		}
 		/**
 		* Brighten the color a given amount, from 0 to 100.
 		* @param amount - valid between 1-100
 		*/
-		TinyColor.prototype.brighten = function(amount) {
-			if (amount === void 0) amount = 10;
-			var rgb = this.toRgb();
+		brighten(amount = 10) {
+			const rgb = this.toRgb();
 			rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
 			rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
 			rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
 			return new TinyColor(rgb);
-		};
+		}
 		/**
 		* Darken the color a given amount, from 0 to 100.
 		* Providing 100 will always return black.
 		* @param amount - valid between 1-100
 		*/
-		TinyColor.prototype.darken = function(amount) {
-			if (amount === void 0) amount = 10;
-			var hsl = this.toHsl();
+		darken(amount = 10) {
+			const hsl = this.toHsl();
 			hsl.l -= amount / 100;
 			hsl.l = clamp01(hsl.l);
 			return new TinyColor(hsl);
-		};
+		}
 		/**
 		* Mix the color with pure white, from 0 to 100.
 		* Providing 0 will do nothing, providing 100 will always return white.
 		* @param amount - valid between 1-100
 		*/
-		TinyColor.prototype.tint = function(amount) {
-			if (amount === void 0) amount = 10;
+		tint(amount = 10) {
 			return this.mix("white", amount);
-		};
+		}
 		/**
 		* Mix the color with pure black, from 0 to 100.
 		* Providing 0 will do nothing, providing 100 will always return black.
 		* @param amount - valid between 1-100
 		*/
-		TinyColor.prototype.shade = function(amount) {
-			if (amount === void 0) amount = 10;
+		shade(amount = 10) {
 			return this.mix("black", amount);
-		};
+		}
 		/**
 		* Desaturate the color a given amount, from 0 to 100.
 		* Providing 100 will is the same as calling greyscale
 		* @param amount - valid between 1-100
 		*/
-		TinyColor.prototype.desaturate = function(amount) {
-			if (amount === void 0) amount = 10;
-			var hsl = this.toHsl();
+		desaturate(amount = 10) {
+			const hsl = this.toHsl();
 			hsl.s -= amount / 100;
 			hsl.s = clamp01(hsl.s);
 			return new TinyColor(hsl);
-		};
+		}
 		/**
 		* Saturate the color a given amount, from 0 to 100.
 		* @param amount - valid between 1-100
 		*/
-		TinyColor.prototype.saturate = function(amount) {
-			if (amount === void 0) amount = 10;
-			var hsl = this.toHsl();
+		saturate(amount = 10) {
+			const hsl = this.toHsl();
 			hsl.s += amount / 100;
 			hsl.s = clamp01(hsl.s);
 			return new TinyColor(hsl);
-		};
+		}
 		/**
 		* Completely desaturates a color into greyscale.
 		* Same as calling `desaturate(100)`
 		*/
-		TinyColor.prototype.greyscale = function() {
+		greyscale() {
 			return this.desaturate(100);
-		};
+		}
 		/**
 		* Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
 		* Values outside of this range will be wrapped into this range.
 		*/
-		TinyColor.prototype.spin = function(amount) {
-			var hsl = this.toHsl();
-			var hue = (hsl.h + amount) % 360;
+		spin(amount) {
+			const hsl = this.toHsl();
+			const hue = (hsl.h + amount) % 360;
 			hsl.h = hue < 0 ? 360 + hue : hue;
 			return new TinyColor(hsl);
-		};
+		}
 		/**
 		* Mix the current color a given amount with another color, from 0 to 100.
 		* 0 means no mixing (return current color).
 		*/
-		TinyColor.prototype.mix = function(color, amount) {
-			if (amount === void 0) amount = 50;
-			var rgb1 = this.toRgb();
-			var rgb2 = new TinyColor(color).toRgb();
-			var p = amount / 100;
+		mix(color, amount = 50) {
+			const rgb1 = this.toRgb();
+			const rgb2 = new TinyColor(color).toRgb();
+			const p = amount / 100;
 			return new TinyColor({
 				r: (rgb2.r - rgb1.r) * p + rgb1.r,
 				g: (rgb2.g - rgb1.g) * p + rgb1.g,
 				b: (rgb2.b - rgb1.b) * p + rgb1.b,
 				a: (rgb2.a - rgb1.a) * p + rgb1.a
 			});
-		};
-		TinyColor.prototype.analogous = function(results, slices) {
-			if (results === void 0) results = 6;
-			if (slices === void 0) slices = 30;
-			var hsl = this.toHsl();
-			var part = 360 / slices;
-			var ret = [this];
+		}
+		analogous(results = 6, slices = 30) {
+			const hsl = this.toHsl();
+			const part = 360 / slices;
+			const ret = [this];
 			for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
 				hsl.h = (hsl.h + part) % 360;
 				ret.push(new TinyColor(hsl));
 			}
 			return ret;
-		};
+		}
 		/**
 		* taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
 		*/
-		TinyColor.prototype.complement = function() {
-			var hsl = this.toHsl();
+		complement() {
+			const hsl = this.toHsl();
 			hsl.h = (hsl.h + 180) % 360;
 			return new TinyColor(hsl);
-		};
-		TinyColor.prototype.monochromatic = function(results) {
-			if (results === void 0) results = 6;
-			var hsv = this.toHsv();
-			var h = hsv.h;
-			var s = hsv.s;
-			var v = hsv.v;
-			var res = [];
-			var modification = 1 / results;
+		}
+		monochromatic(results = 6) {
+			const hsv = this.toHsv();
+			const { h } = hsv;
+			const { s } = hsv;
+			let { v } = hsv;
+			const res = [];
+			const modification = 1 / results;
 			while (results--) {
 				res.push(new TinyColor({
 					h,
@@ -17222,10 +17257,10 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 				v = (v + modification) % 1;
 			}
 			return res;
-		};
-		TinyColor.prototype.splitcomplement = function() {
-			var hsl = this.toHsl();
-			var h = hsl.h;
+		}
+		splitcomplement() {
+			const hsl = this.toHsl();
+			const { h } = hsl;
 			return [
 				this,
 				new TinyColor({
@@ -17239,57 +17274,62 @@ usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
 					l: hsl.l
 				})
 			];
-		};
+		}
 		/**
 		* Compute how the color would appear on a background
 		*/
-		TinyColor.prototype.onBackground = function(background) {
-			var fg = this.toRgb();
-			var bg = new TinyColor(background).toRgb();
-			var alpha = fg.a + bg.a * (1 - fg.a);
+		onBackground(background) {
+			const fg = this.toRgb();
+			const bg = new TinyColor(background).toRgb();
+			const alpha = fg.a + bg.a * (1 - fg.a);
 			return new TinyColor({
 				r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
 				g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
 				b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
 				a: alpha
 			});
-		};
+		}
 		/**
 		* Alias for `polyad(3)`
 		*/
-		TinyColor.prototype.triad = function() {
+		triad() {
 			return this.polyad(3);
-		};
+		}
 		/**
 		* Alias for `polyad(4)`
 		*/
-		TinyColor.prototype.tetrad = function() {
+		tetrad() {
 			return this.polyad(4);
-		};
+		}
 		/**
 		* Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
 		* monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
 		*/
-		TinyColor.prototype.polyad = function(n) {
-			var hsl = this.toHsl();
-			var h = hsl.h;
-			var result = [this];
-			var increment = 360 / n;
-			for (var i = 1; i < n; i++) result.push(new TinyColor({
+		polyad(n) {
+			const hsl = this.toHsl();
+			const { h } = hsl;
+			const result = [this];
+			const increment = 360 / n;
+			for (let i = 1; i < n; i++) result.push(new TinyColor({
 				h: (h + i * increment) % 360,
 				s: hsl.s,
 				l: hsl.l
 			}));
 			return result;
-		};
+		}
 		/**
 		* compare color vs current color
 		*/
-		TinyColor.prototype.equals = function(color) {
-			return this.toRgbString() === new TinyColor(color).toRgbString();
-		};
-		return TinyColor;
-	}();
+		equals(color) {
+			const comparedColor = new TinyColor(color);
+			/**
+			* RGB and CMYK do not have the same color gamut, so a CMYK conversion will never be 100%.
+			* This means we need to compare CMYK to CMYK to ensure accuracy of the equals function.
+			*/
+			if (this.format === "cmyk" || comparedColor.format === "cmyk") return this.toCmykString() === comparedColor.toCmykString();
+			return this.toRgbString() === comparedColor.toRgbString();
+		}
+	};
 
 //#endregion
 //#region ../../packages/components/button/src/button-custom.ts
@@ -41282,7 +41322,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 			default: 100
 		},
 		step: {
-			type: Number,
+			type: definePropType([Number, String]),
 			default: 1
 		},
 		showInput: Boolean,
@@ -41376,7 +41416,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 //#endregion
 //#region ../../packages/components/slider/src/composables/use-marks.ts
 	const useMarks = (props) => {
-		return (0, vue.computed)(() => {
+		const markList = (0, vue.computed)(() => {
 			if (!props.marks) return [];
 			return Object.keys(props.marks).map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map((point) => ({
 				point,
@@ -41384,6 +41424,19 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 				mark: props.marks[point]
 			}));
 		});
+		(0, vue.watchEffect)(() => {
+			if (props.step === "mark" && !props.marks) /* @__PURE__ */ debugWarn("ElSlider", "marks prop must be provided when step is mark");
+			if (props.marks) {
+				const keys = Object.keys(props.marks);
+				const validPoints = markList.value.map((m) => m.point);
+				const invalidKeys = keys.filter((key) => {
+					const parsed = Number.parseFloat(key);
+					return Number.isNaN(parsed) || !validPoints.includes(parsed);
+				});
+				if (invalidKeys.length > 0) /* @__PURE__ */ debugWarn("ElSlider", `Some marks keys are invalid (not a number or out of [min, max]): [${invalidKeys.map((k) => `'${k}'`).join(", ")}] and will be ignored.`);
+			}
+		});
+		return markList;
 	};
 
 //#endregion
@@ -41527,7 +41580,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 		};
 	};
 	const useSliderButton = (props, initData, emit) => {
-		const { disabled, min, max, step, showTooltip, persistent, precision, sliderSize, formatTooltip, emitChange, resetSize, updateDragging } = (0, vue.inject)(sliderContextKey);
+		const { disabled, min, max, step, showTooltip, persistent, precision, sliderSize, formatTooltip, emitChange, resetSize, updateDragging, markList } = (0, vue.inject)(sliderContextKey);
 		const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
 		const button = (0, vue.ref)();
 		const currentPosition = (0, vue.computed)(() => {
@@ -41536,6 +41589,9 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 		const wrapperStyle = (0, vue.computed)(() => {
 			return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
 		});
+		const shouldMoveToMark = (0, vue.computed)(() => {
+			return step.value === "mark" && markList.value.length > 0;
+		});
 		const handleMouseEnter = () => {
 			initData.hovering = true;
 			displayTooltip();
@@ -41561,17 +41617,49 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 			setPosition(initData.newPosition);
 			emitChange();
 		};
+		const moveToMark = (amount) => {
+			if (disabled.value || !markList.value.length) return;
+			const current = props.modelValue;
+			const epsilon = Number.EPSILON;
+			const stride = Math.abs(amount);
+			let target;
+			if (amount > 0) {
+				const startIndex = markList.value.findIndex((m) => m.point > current + epsilon);
+				if (startIndex !== -1) {
+					const targetIndex = Math.min(startIndex + stride - 1, markList.value.length - 1);
+					target = markList.value[targetIndex].point;
+				}
+			} else {
+				let startIndex = -1;
+				for (let i = markList.value.length - 1; i >= 0; i--) if (markList.value[i].point < current - epsilon) {
+					startIndex = i;
+					break;
+				}
+				if (startIndex !== -1) {
+					const targetIndex = Math.max(startIndex - (stride - 1), 0);
+					target = markList.value[targetIndex].point;
+				}
+			}
+			if (target !== void 0 && target !== current) {
+				setPosition((target - min.value) / (max.value - min.value) * 100);
+				emitChange();
+			}
+		};
 		const onLeftKeyDown = () => {
-			incrementPosition(-step.value);
+			if (shouldMoveToMark.value) moveToMark(-1);
+			else if (isNumber(step.value)) incrementPosition(-step.value);
 		};
 		const onRightKeyDown = () => {
-			incrementPosition(step.value);
+			if (shouldMoveToMark.value) moveToMark(1);
+			else if (isNumber(step.value)) incrementPosition(step.value);
 		};
 		const onPageDownKeyDown = () => {
-			incrementPosition(-step.value * 4);
+			if (shouldMoveToMark.value) moveToMark(-4);
+			else if (isNumber(step.value)) incrementPosition(-step.value * 4);
 		};
 		const onPageUpKeyDown = () => {
-			incrementPosition(step.value * 4);
+			if (shouldMoveToMark.value) moveToMark(4);
+			else if (isNumber(step.value)) incrementPosition(step.value * 4);
 		};
 		const onHomeKeyDown = () => {
 			if (disabled.value) return;
@@ -41673,17 +41761,23 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 		const setPosition = async (newPosition) => {
 			if (newPosition === null || Number.isNaN(+newPosition)) return;
 			newPosition = clamp$1(newPosition, 0, 100);
-			const fullSteps = Math.floor((max.value - min.value) / step.value);
-			const fullRangePercentage = fullSteps * step.value / (max.value - min.value) * 100;
-			const threshold = fullRangePercentage + (100 - fullRangePercentage) / 2;
 			let value;
-			if (newPosition < fullRangePercentage) {
-				const valueBetween = fullRangePercentage / fullSteps;
-				const steps = Math.round(newPosition / valueBetween);
-				value = min.value + steps * step.value;
-			} else if (newPosition < threshold) value = min.value + fullSteps * step.value;
-			else value = max.value;
-			value = Number.parseFloat(value.toFixed(precision.value));
+			if (step.value === "mark") if (markList.value.length === 0) value = newPosition <= 50 ? min.value : max.value;
+			else value = markList.value.reduce((prev, curr) => {
+				return Math.abs(curr.position - newPosition) < Math.abs(prev.position - newPosition) ? curr : prev;
+			}).point;
+			else {
+				const fullSteps = Math.floor((max.value - min.value) / step.value);
+				const fullRangePercentage = fullSteps * step.value / (max.value - min.value) * 100;
+				const threshold = fullRangePercentage + (100 - fullRangePercentage) / 2;
+				if (newPosition < fullRangePercentage) {
+					const valueBetween = fullRangePercentage / fullSteps;
+					const steps = Math.round(newPosition / valueBetween);
+					value = min.value + steps * step.value;
+				} else if (newPosition < threshold) value = min.value + fullSteps * step.value;
+				else value = max.value;
+				value = Number.parseFloat(value.toFixed(precision.value));
+			}
 			if (value !== props.modelValue) emit(UPDATE_MODEL_EVENT, value);
 			if (!initData.dragging && props.modelValue !== initData.oldValue) initData.oldValue = props.modelValue;
 			await (0, vue.nextTick)();
@@ -41716,8 +41810,8 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 	const useStops = (props, initData, minValue, maxValue) => {
 		const stops = (0, vue.computed)(() => {
 			if (!props.showStops || props.min > props.max) return [];
-			if (props.step === 0) {
-				/* @__PURE__ */ debugWarn("ElSlider", "step should not be 0.");
+			if (props.step === "mark" || props.step === 0) {
+				if (props.step === 0) /* @__PURE__ */ debugWarn("ElSlider", "step should not be 0.");
 				return [];
 			}
 			const stopCount = Math.ceil((props.max - props.min) / props.step);
@@ -41943,6 +42037,9 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 			const { inputId, isLabeledByFormItem } = useFormItemInputId(props, { formItemContext: elFormItem });
 			const sliderWrapperSize = useFormSize();
 			const sliderInputSize = (0, vue.computed)(() => props.inputSize || sliderWrapperSize.value);
+			const renderInput = (0, vue.computed)(() => {
+				return props.showInput && !props.range && props.step !== "mark";
+			});
 			const groupLabel = (0, vue.computed)(() => {
 				return props.ariaLabel || t("el.slider.defaultLabel", {
 					min: props.min,
@@ -41966,15 +42063,19 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 				ns.b(),
 				ns.m(sliderWrapperSize.value),
 				ns.is("vertical", props.vertical),
-				{ [ns.m("with-input")]: props.showInput }
+				{ [ns.m("with-input")]: renderInput.value }
 			]);
 			const markList = useMarks(props);
 			useWatch(props, initData, minValue, maxValue, emit, elFormItem);
+			const sliderInputStep = (0, vue.computed)(() => {
+				return isNumber(props.step) ? props.step : 1;
+			});
 			const precision = (0, vue.computed)(() => {
+				const stepValue = isNumber(props.step) ? props.step : 1;
 				const precisions = [
 					props.min,
 					props.max,
-					props.step
+					stepValue
 				].map((item) => {
 					const decimal = `${item}`.split(".")[1];
 					return decimal ? decimal.length : 0;
@@ -41993,6 +42094,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 				sliderSize,
 				disabled: sliderDisabled,
 				precision,
+				markList,
 				emitChange,
 				resetSize,
 				updateDragging
@@ -42012,7 +42114,7 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 					ref: slider,
 					class: (0, vue.normalizeClass)([
 						(0, vue.unref)(ns).e("runway"),
-						{ "show-input": _ctx.showInput && !_ctx.range },
+						{ "show-input": renderInput.value },
 						(0, vue.unref)(ns).is("disabled", (0, vue.unref)(sliderDisabled))
 					]),
 					style: (0, vue.normalizeStyle)((0, vue.unref)(runwayStyle)),
@@ -42113,12 +42215,12 @@ var import_advancedFormat = /* @__PURE__ */ __toESM(require_advancedFormat());
 							"onMousedown"
 						]);
 					}), 128))], 2)], 64)) : (0, vue.createCommentVNode)("v-if", true)
-				], 38), _ctx.showInput && !_ctx.range ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ElInputNumber), {
+				], 38), renderInput.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ElInputNumber), {
 					key: 0,
 					ref: "input",
 					"model-value": (0, vue.unref)(firstValue),
 					class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("input")),
-					step: _ctx.step,
+					step: sliderInputStep.value,
 					disabled: (0, vue.unref)(sliderDisabled),
 					controls: _ctx.showInputControls,
 					min: _ctx.min,