savor-ui 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [0.4.1](https://gitee.com/mach552/savor-ui/compare/v0.4.0...v0.4.1) (2026-06-17)
+
+
+### Bug Fixes
+
+* **input:** 调整一些样式问题 ([be7305f](https://gitee.com/mach552/savor-ui/commits/be7305ffc837a94f32bd8e971a0cf89e68d63cea))
+* **table:** 修复空状态下整体滚动问题 ([df4c6c8](https://gitee.com/mach552/savor-ui/commits/df4c6c8cc409ee6d9d7159dd523f0ea385ff2f06))
+* **table:** 修复宽高属性无效问题 ([834917b](https://gitee.com/mach552/savor-ui/commits/834917bb908eaf70b1293afdae0cb4779520e4c6))
+* **table:** 修复fixed列没有选中样式问题 ([7cd3def](https://gitee.com/mach552/savor-ui/commits/7cd3defe6eeb77426e8d59e8796b25e73ecc40f1))
+* **transition:** 修复传递无效属性问题 ([b06508c](https://gitee.com/mach552/savor-ui/commits/b06508c06085d183d1e515cf4365a4406e6045bf))
+
 # [0.4.0](https://gitee.com/mach552/savor-ui/compare/v0.3.3...v0.4.0) (2026-06-17)
 
 

package/dist/es/components/src/table/table.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -8,9 +8,9 @@ import o from "./col-group.vue.mjs";
 import { tableContextKey as s } from "./types.mjs";
 import c from "./table-body.vue.mjs";
 import l from "./table-header.vue.mjs";
-import { computed as u, createComponent as d, createForSlots as f, createIf as p, createSlot as m, defineVaporComponent as h, mergeModels as g, provide as _, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, template as C, unref as w, useModel as T, watch as ee } from "vue";
+import { computed as u, createComponent as d, createForSlots as f, createIf as p, createSlot as m, defineVaporComponent as h, mergeModels as g, provide as _, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, template as C, unref as w, useModel as T, watch as E } from "vue";
 //#region ../components/src/table/table.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>", 1), O = /*@__PURE__*/ h({
+var D = C("<table table-layout=fixed></table>"), ee = C("<div>"), O = C("<div>", 1), k = /*@__PURE__*/ h({
 	name: "STable",
 	__name: "table",
 	props: /*@__PURE__*/ g({
@@ -18,7 +18,7 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 		columns: { default: () => [] },
 		height: {},
 		maxHeight: {},
-		width: {},
+		width: { default: "100%" },
 		border: {},
 		stripe: { type: Boolean },
 		size: { default: "medium" },
@@ -39,36 +39,36 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 		"checkAll",
 		"expandedRow"
 	], ["update:checked", "update:selected"]),
-	setup(h, { expose: g, emit: C, slots: O }) {
-		let k = h, A = C, j = r("table"), M = T(h, "checked"), N = T(h, "selected"), ne = (e, t, n) => {
-			M.value = n, A("checkRow", e, t, n);
-		}, re = (e, t) => {
-			N.value = e, A("selectRow", e, t);
-		}, ie = (e) => {
-			M.value = [...e], A("checkAll", e);
-		}, ae = u(() => {
+	setup(h, { expose: g, emit: C, slots: k }) {
+		let A = h, j = C, M = r("table"), N = T(h, "checked"), P = T(h, "selected"), te = (e, t, n) => {
+			N.value = n, j("checkRow", e, t, n);
+		}, ne = (e, t) => {
+			P.value = e, j("selectRow", e, t);
+		}, re = (e) => {
+			N.value = [...e], j("checkAll", e);
+		}, ie = u(() => {
 			let e = [];
-			if (!k.border || k.border.length === 0) return e;
-			for (let t of k.border) e.push(j.m(`border-${t}`));
+			if (!A.border || A.border.length === 0) return e;
+			for (let t of A.border) e.push(M.m(`border-${t}`));
 			return e;
-		}), P = v(0), F = v(!0), I = v(!1), L = 0, R = () => `col_${L++}`, z = (e) => ({
+		}), F = v(0), I = v(!0), L = v(!1), R = 0, z = () => `col_${R++}`, B = (e) => ({
 			...e,
-			id: R(),
+			id: z(),
 			fixedOffset: void 0,
 			colSpan: 1,
 			rowSpan: 1,
 			isColumnGroup: !1,
 			level: 1,
 			field: e.field ?? "",
-			children: e.children ? e.children.map(z) : void 0
-		}), B = u(() => k.columns.map(z)), V = u(() => {
+			children: e.children ? e.children.map(B) : void 0
+		}), V = u(() => A.columns.map(B)), H = u(() => {
 			let e = [], t = (n) => {
 				n.forEach((n) => {
 					n.children && n.children.length ? t(n.children) : e.push(n);
 				});
 			};
-			return t(B.value), H(e), e;
-		}), H = (e) => {
+			return t(V.value), U(e), e;
+		}), U = (e) => {
 			let n = 0;
 			e.forEach((e) => {
 				if (e.fixed === "left") {
@@ -86,7 +86,7 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 					r += e;
 				}
 			}
-		}, U = (e) => {
+		}, W = (e) => {
 			let t = 1, n = (e, r) => {
 				if (r && (e.level = r.level + 1, t < e.level && (t = e.level)), e.children && e.children.length) {
 					let t = 0;
@@ -108,18 +108,15 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 			return a(e), i.forEach((e) => {
 				!e.children || !e.children.length ? e.rowSpan = t - e.level + 1 : e.rowSpan = 1, r[e.level - 1].push(e);
 			}), r;
-		}, W = u(() => U(B.value)), G = u(() => {
+		}, G = u(() => W(V.value)), K = u(() => {
 			let t = {};
-			return k.width && (t.width = e(k.width)), t;
-		}), K = u(() => {
-			let t = {};
-			return k.height && (t.height = e(k.height), t.overflowY = "auto"), k.maxHeight && (t.maxHeight = e(k.maxHeight), t.overflowY = "auto"), t;
+			return A.width && (t.width = e(A.width)), A.data.length === 0 && (t.position = "sticky", t.top = "0"), t;
 		}), q = (e) => {
 			let t = e.target;
-			F.value = t.scrollLeft === 0, I.value = t.scrollLeft + t.clientWidth >= t.scrollWidth - 1;
+			I.value = t.scrollLeft === 0, L.value = t.scrollLeft + t.clientWidth >= t.scrollWidth - 1;
 		}, J = v({}), Y = v([]), X = (e) => e.map((e) => {
 			let t = { ...e };
-			t._id || (k.rowKey && t[k.rowKey] !== void 0 ? t._id = String(t[k.rowKey]) : t.id === void 0 ? t._id = n(8) : t._id = String(t.id));
+			t._id || (A.rowKey && t[A.rowKey] !== void 0 ? t._id = String(t[A.rowKey]) : t.id === void 0 ? t._id = n(8) : t._id = String(t.id));
 			let r = t.children;
 			return Array.isArray(r) && r.length > 0 && (t.children = X(r)), t;
 		}), Z = (e, t = 0, n = !0) => {
@@ -134,68 +131,73 @@ var te = C("<table table-layout=fixed></table>"), E = C("<div>"), D = C("<div>",
 				};
 				n && r.push(c), o && r.push(...Z(a, t + 1, n && s));
 			}), r;
-		}, Q = u(() => Z(Y.value)), oe = (e, t) => {
-			J.value[e._id] = !J.value[e._id], A("expandedRow", e, t, Y.value.filter((e) => J.value[e._id]));
+		}, Q = u(() => Z(Y.value)), ae = (e, t) => {
+			J.value[e._id] = !J.value[e._id], j("expandedRow", e, t, Y.value.filter((e) => J.value[e._id]));
 		};
-		ee(() => k.data, (e) => {
+		E(() => A.data, (e) => {
 			Y.value = X(e);
 		}, {
 			deep: !0,
 			immediate: !0
 		}), _(s, {
-			props: k,
-			originColumns: B,
-			flatColumns: V,
-			columnRows: W,
-			isScrollAtLeft: F,
-			isScrollAtRight: I,
-			headerHeight: P,
-			checked: M,
-			selected: N
+			props: A,
+			originColumns: V,
+			flatColumns: H,
+			columnRows: G,
+			isScrollAtLeft: I,
+			isScrollAtRight: L,
+			headerHeight: F,
+			checked: N,
+			selected: P
 		}), g({
 			clearSelect: () => {
-				M.value = [], N.value = {};
+				N.value = [], P.value = {};
 			},
 			selectAll: () => {
-				M.value = [...Q.value];
+				N.value = [...Q.value];
 			}
 		});
-		let $ = D();
+		let $ = O();
 		return y(() => {
-			let e = w(j);
+			let t = w(M), n = w(e);
 			b($, [
-				e.b(),
-				e.m(h.size),
-				...ae.value
-			]);
+				t.b(),
+				t.m(h.size),
+				...ie.value
+			]), S($, {
+				height: n(h.height),
+				width: n(h.width),
+				maxHeight: n(h.maxHeight)
+			});
 		}), x($, null, 0), d(w(i), {
-			height: () => K.value.height,
-			"max-height": () => K.value.maxHeight,
-			"offset-top": () => P.value,
+			height: () => h.height ? "100%" : "",
+			width: () => h.width ? "100%" : "",
+			"max-height": () => h.maxHeight ? w(e)(h.maxHeight) : "",
+			"offset-top": () => F.value,
 			always: () => h.scrollAlways,
 			native: () => h.nativeScrollbar,
 			onScroll: () => q
 		}, () => {
-			let e = te();
+			let e = D();
 			return y(() => {
-				b(e, [w(j).e("inner")]), S(e, G.value);
-			}), x(e, null, 0), d(o, { columns: () => V.value }), x(e, null, 1), d(l, {
+				b(e, [w(M).e("inner")]), S(e, K.value);
+			}), x(e, null, 0), d(o, { columns: () => H.value }), x(e, null, 1), d(l, {
 				data: () => Q.value,
-				onCheckAll: () => ie
+				onCheckAll: () => re
 			}), x(e, null, 2), d(c, {
 				data: () => Q.value,
-				onCheckRow: () => ne,
-				onSelectRow: () => re,
-				onExpandedRow: () => oe
-			}, { $: [() => f(O, (e, t) => ({
+				onCheckRow: () => te,
+				onSelectRow: () => ne,
+				onExpandedRow: () => ae
+			}, { $: [() => f(k, (e, t) => ({
 				name: t,
 				fn: (e) => m(() => t, { $: [() => e] }, null, 4)
 			}))] }), [e, p(() => !h.data.length, () => {
-				let e = E();
-				return y(() => b(e, [w(j).e("empty")])), x(e, null, 0), m("empty", null, () => d(w(a))), e;
+				let e = ee();
+				return y(() => b(e, [w(M).e("empty")])), x(e, null, 0), m("empty", null, () => d(w(a))), e;
 			}, null, 129)];
 		}), $;
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };

package/dist/es/components/src/transition/transition-height.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -4,7 +4,7 @@ var a = /*@__PURE__*/ r({
 	__name: "transition-height",
 	props: {
 		appear: { type: Boolean },
-		mode: {}
+		mode: { default: "in-out" }
 	},
 	emits: [
 		"beforeEnter",

package/dist/es/components/src/transition/transition-opacity.d.ts

@@ -1,6 +1,9 @@
 import { PublicProps, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & __VLS_PrettifyLocal<{
+        appear?: boolean;
+        mode?: "in-out" | "out-in" | "default";
+    } & {
         onAfterLeave?: ((el: HTMLElement) => any) | undefined;
         onBeforeEnter?: ((el: HTMLElement) => any) | undefined;
         onEnter?: ((el: HTMLElement) => any) | undefined;

package/dist/es/components/src/transition/transition-opacity.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -2,6 +2,10 @@ import { VaporTransition as e, createComponent as t, createSlot as n, defineVapo
 //#region ../components/src/transition/transition-opacity.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var a = /*@__PURE__*/ r({
 	__name: "transition-opacity",
+	props: {
+		appear: { type: Boolean },
+		mode: { default: "in-out" }
+	},
 	emits: [
 		"beforeEnter",
 		"enter",
@@ -29,7 +33,10 @@ var a = /*@__PURE__*/ r({
 		};
 		return t(e, {
 			name: "opacity-fade",
-			$: [() => i(s)]
+			$: [() => i(s), {
+				mode: () => r.mode,
+				appear: () => r.appear
+			}]
 		}, () => n("default", null, null, 4), !0);
 	}
 });

package/dist/es/components/src/transition/transition-scale.d.ts

@@ -1,6 +1,9 @@
 import { PublicProps, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & __VLS_PrettifyLocal<{
+        appear?: boolean;
+        mode?: "in-out" | "out-in" | "default";
+    } & {
         onAfterLeave?: ((el: HTMLElement) => any) | undefined;
         onBeforeEnter?: ((el: HTMLElement) => any) | undefined;
         onEnter?: ((el: HTMLElement) => any) | undefined;

package/dist/es/components/src/transition/transition-scale.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -2,6 +2,10 @@ import { VaporTransition as e, createComponent as t, createSlot as n, defineVapo
 //#region ../components/src/transition/transition-scale.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var a = /*@__PURE__*/ r({
 	__name: "transition-scale",
+	props: {
+		appear: { type: Boolean },
+		mode: { default: "in-out" }
+	},
 	emits: [
 		"beforeEnter",
 		"enter",
@@ -33,7 +37,10 @@ var a = /*@__PURE__*/ r({
 		};
 		return t(e, {
 			name: "scale-fade",
-			$: [() => i(s)]
+			$: [() => i(s), {
+				mode: () => r.mode,
+				appear: () => r.appear
+			}]
 		}, () => n("default", null, null, 4), !0);
 	}
 });

package/dist/es/components/src/transition/transition-side.d.ts

@@ -2,6 +2,8 @@ import { PublicProps, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & __VLS_PrettifyLocal<{
         placement?: "left" | "right" | "top" | "bottom";
+        appear?: boolean;
+        mode?: "in-out" | "out-in" | "default";
     } & {
         onAfterLeave?: ((el: HTMLElement) => any) | undefined;
         onBeforeEnter?: ((el: HTMLElement) => any) | undefined;

package/dist/es/components/src/transition/transition-side.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -2,7 +2,11 @@ import { VaporTransition as e, createComponent as t, createIf as n, createSlot a
 //#region ../components/src/transition/transition-side.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var o = /*@__PURE__*/ i({
 	__name: "transition-side",
-	props: { placement: {} },
+	props: {
+		placement: { default: "left" },
+		appear: { type: Boolean },
+		mode: { default: "in-out" }
+	},
 	emits: [
 		"beforeEnter",
 		"enter",
@@ -30,16 +34,28 @@ var o = /*@__PURE__*/ i({
 		};
 		return n(() => i.placement === "left", () => t(e, {
 			name: "side-left-fade",
-			$: [() => a(c)]
+			$: [() => a(c), {
+				mode: () => i.mode,
+				appear: () => i.appear
+			}]
 		}, () => r("default", null, null, 4), !0), () => n(() => i.placement === "right", () => t(e, {
 			name: "side-right-fade",
-			$: [() => a(c)]
+			$: [() => a(c), {
+				mode: () => i.mode,
+				appear: () => i.appear
+			}]
 		}, () => r("default", null, null, 4), !0), () => n(() => i.placement === "top", () => t(e, {
 			name: "side-top-fade",
-			$: [() => a(c)]
+			$: [() => a(c), {
+				mode: () => i.mode,
+				appear: () => i.appear
+			}]
 		}, () => r("default", null, null, 4), !0), () => n(() => i.placement === "bottom", () => t(e, {
 			name: "side-bottom-fade",
-			$: [() => a(c)]
+			$: [() => a(c), {
+				mode: () => i.mode,
+				appear: () => i.appear
+			}]
 		}, () => r("default", null, null, 4), !0)), 773), 517), 261);
 	}
 });

package/dist/es/components/src/transition/transition-width.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -4,7 +4,7 @@ var a = /*@__PURE__*/ r({
 	__name: "transition-width",
 	props: {
 		appear: { type: Boolean },
-		mode: {}
+		mode: { default: "in-out" }
 	},
 	emits: [
 		"beforeEnter",

package/dist/es/components/src/transition/transition.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -23,24 +23,45 @@ var u = /*@__PURE__*/ c({
 		"afterLeave"
 	],
 	setup(c, { emit: u }) {
-		let d = c, f = u, p = {
+		let d = u, f = {
 			beforeEnter: (e) => {
-				f("beforeEnter", e);
+				d("beforeEnter", e);
 			},
 			enter: (e) => {
-				f("enter", e);
+				d("enter", e);
 			},
 			afterEnter: (e) => {
-				f("afterEnter", e);
+				d("afterEnter", e);
 			},
 			leave: (e) => {
-				f("leave", e);
+				d("leave", e);
 			},
 			afterLeave: (e) => {
-				f("afterLeave", e);
+				d("afterLeave", e);
 			}
 		};
-		return o(() => c.type === "height", () => a(e, { $: [() => d, () => l(p)] }, () => s("default", null, null, 4), !0), () => o(() => c.type === "width", () => a(i, { $: [() => d, () => l(p)] }, () => s("default", null, null, 4), !0), () => o(() => c.type === "opacity", () => a(t, { $: [() => d, () => l(p)] }, () => s("default", null, null, 4), !0), () => o(() => c.type === "scale", () => a(n, { $: [() => d, () => l(p)] }, () => s("default", null, null, 4), !0), () => o(() => c.type === "side", () => a(r, { $: [() => d, () => l(p)] }, () => s("default", null, null, 4), !0)), 1029), 773), 517), 261);
+		return o(() => c.type === "height", () => a(e, {
+			appear: () => c.appear,
+			mode: () => c.mode,
+			$: [() => l(f)]
+		}, () => s("default", null, null, 4), !0), () => o(() => c.type === "width", () => a(i, {
+			appear: () => c.appear,
+			mode: () => c.mode,
+			$: [() => l(f)]
+		}, () => s("default", null, null, 4), !0), () => o(() => c.type === "opacity", () => a(t, {
+			appear: () => c.appear,
+			mode: () => c.mode,
+			$: [() => l(f)]
+		}, () => s("default", null, null, 4), !0), () => o(() => c.type === "scale", () => a(n, {
+			appear: () => c.appear,
+			mode: () => c.mode,
+			$: [() => l(f)]
+		}, () => s("default", null, null, 4), !0), () => o(() => c.type === "side", () => a(r, {
+			appear: () => c.appear,
+			mode: () => c.mode,
+			placement: () => c.placement,
+			$: [() => l(f)]
+		}, () => s("default", null, null, 4), !0)), 1029), 773), 517), 261);
 	}
 });
 //#endregion

package/dist/es/theme/components/input-number.scss

@@ -108,10 +108,10 @@
     cursor: pointer;
     user-select: none;
     &:hover {
-      background-color: getCssVar("color", "fill-3");
+      background-color: getCssVar("color", "fill-2");
     }
     &:active {
-      background-color: getCssVar("color", "fill-2");
+      background-color: getCssVar("color", "fill-4");
     }
   }
   @include e(suffix) {

package/dist/es/theme/components/input-tag.scss

@@ -143,10 +143,10 @@
     cursor: pointer;
     user-select: none;
     &:hover {
-      background-color: getCssVar("color", "fill-3");
+      background-color: getCssVar("color", "fill-2");
     }
     &:active {
-      background-color: getCssVar("color", "fill-2");
+      background-color: getCssVar("color", "fill-4");
     }
   }
   @include e(suffix) {

package/dist/es/theme/components/input.scss

@@ -45,14 +45,14 @@
           border-color: getCssVar("color", "danger-6");
         }
         @include when(filled) {
-          background-color: getCssVar("color", "error-1");
-          border-color: getCssVar("color", "error-1");
+          background-color: getCssVar("color", "danger-1");
+          border-color: getCssVar("color", "danger-1");
           &:hover {
-            background-color: getCssVar("color", "error-2");
+            background-color: getCssVar("color", "danger-2");
           }
           &:focus-within {
             background-color: getCssVar("color", "bg-2");
-            border-color: getCssVar("color", "error-5");
+            border-color: getCssVar("color", "danger-5");
           }
         }
       }
@@ -94,6 +94,7 @@
   }
   @include e(input) {
     flex-grow: 1;
+    width: 0;
     font-size: inherit;
     padding: 0;
     outline: none;
@@ -120,10 +121,10 @@
     cursor: pointer;
     user-select: none;
     &:hover {
-      background-color: getCssVar("color", "fill-3");
+      background-color: getCssVar("color", "fill-2");
     }
     &:active {
-      background-color: getCssVar("color", "fill-2");
+      background-color: getCssVar("color", "fill-4");
     }
   }
   @include e(eye) {

package/dist/es/theme/components/table.scss

@@ -3,13 +3,12 @@
 
 @include b(table) {
   position: relative;
-  width: 100%;
   font-size: 14px;
   background-color: getCssVar("color", "bg-2");
   box-sizing: border-box;
+  overflow: hidden;
 
   @include e(inner) {
-    width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     display: table;
@@ -118,12 +117,24 @@
     }
     @include when(selected) {
       background-color: getCssVar("color", "fill-2");
+      @include be(table, body-cell) {
+        background-color: getCssVar("color", "fill-2");
+        @include m(fixed) {
+          background-color: getCssVar("color", "fill-2");
+        }
+      }
     }
     @include when(selection) {
       cursor: pointer;
     }
     @include when(stripe) {
       background-color: getCssVar("color", "fill-1");
+      @include be(table, body-cell) {
+        background-color: getCssVar("color", "fill-1");
+        @include m(fixed) {
+          background-color: getCssVar("color", "fill-1");
+        }
+      }
     }
   }
 
@@ -229,11 +240,12 @@
   }
 
   @include e(empty) {
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 32px 0;
-    color: #909399;
+    color: getCssVar("color", "text-2");
     font-size: 14px;
   }
 

package/dist/es/theme/components/textarea.scss

@@ -113,7 +113,10 @@
     justify-content: center;
     cursor: pointer;
     &:hover {
-      background-color: getCssVar("color", "fill-3");
+      background-color: getCssVar("color", "fill-2");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-4");
     }
   }
 

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "savor-ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "savor-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A Vue3 Components Library",
   "keywords": [
     "component library",