eco-vue-js 0.27.3 → 0.28.0

package/dist/components/ActionsBar/WActionsBar.vue_vue_type_script_setup_true_lang.js

@@ -38,7 +38,7 @@ var WActionsBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref: "bar",
-				class: normalizeClass(["w-actions-bar sm-not:[--actions-bar-filter-width:calc(100vw-var(--w-actions-bar-width))] fixed right-(--w-right-margin,0px) top-0 grid grid-cols-[var(--actions-bar-filter-width-current,0)_var(--w-actions-bar-width)] grid-rows-[var(--header-height)_1fr] justify-end overflow-hidden transition-[grid-template-columns] duration-300 print:hidden", { "[--actions-bar-filter-width-current:var(--actions-bar-filter-width)]": isOpen.value && hasFilter.value }]),
+				class: normalizeClass(["w-actions-bar sm-not:[--actions-bar-filter-width:calc(100vw-var(--w-actions-bar-width))] fixed right-(--w-right-margin,0px) top-0 grid grid-cols-[var(--actions-bar-filter-width-current,0)_var(--w-actions-bar-width)] grid-rows-[var(--header-height)_1fr] justify-end overflow-hidden motion-safe:transition-[grid-template-columns] motion-safe:duration-300 print:hidden", { "[--actions-bar-filter-width-current:var(--actions-bar-filter-width)]": isOpen.value && hasFilter.value }]),
 				style: normalizeStyle({ zIndex: unref(40) })
 			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, toDisplayString(__props.textFilter ?? "Filters"), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filter), (slot, index) => {
 				return openBlock(), createBlock(resolveDynamicComponent(slot), { key: index });
@@ -48,7 +48,7 @@ var WActionsBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"aria-expanded": isOpen.value,
 				"aria-label": "Toggle filters",
 				onClick: toggle
-			}, [createVNode(unref(IconBack_default), { class: normalizeClass(["text-description square-4 transition-transform", { "transform-[rotateY(180deg)]": isOpen.value }]) }, null, 8, ["class"])], 8, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("div", null, [
+			}, [createVNode(unref(IconBack_default), { class: normalizeClass(["text-description square-4 motion-safe:transition-transform", { "transform-[rotateY(180deg)]": isOpen.value }]) }, null, 8, ["class"])], 8, _hoisted_5)) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createElementVNode("div", null, [
 				renderSlot(_ctx.$slots, "top"),
 				_ctx.$slots.top && (hasFilter.value || _ctx.$slots.bottom) ? (openBlock(), createElementBlock("div", _hoisted_7)) : createCommentVNode("", true),
 				hasFilter.value ? (openBlock(), createBlock(WButtonAction_default, {

package/dist/components/Button/WButtonAction.vue_vue_type_script_setup_true_lang.js

@@ -82,10 +82,10 @@ var WButtonAction_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						}, null, 8, ["count"])), [[vShow, __props.count > 0]]) : createCommentVNode("", true),
 						renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
 							key: 0,
-							class: normalizeClass(["square-6 w-svg-stroke-width-sm place-self-center transition-transform", { "group-hover:scale-120": !__props.disabled }])
+							class: normalizeClass(["square-6 w-svg-stroke-width-sm place-self-center motion-safe:transition-transform", { "group-hover:scale-120": !__props.disabled }])
 						}, null, 8, ["class"])) : createCommentVNode("", true)]),
 						!__props.disabled && !unref(isBackdrop) && !__props.loading ? (openBlock(), createBlock(WShine_default, { key: 1 })) : createCommentVNode("", true),
-						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "absolute inset-0 bg-linear-90 from-current/0 to-current/0 via-current animate-ticker" }, null, -1)])])) : createCommentVNode("", true)
+						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "absolute inset-0 bg-linear-90 from-current/0 to-current/0 via-current motion-safe:animate-ticker" }, null, -1)])])) : createCommentVNode("", true)
 					], 2)),
 					__props.titleText ? (openBlock(), createElementBlock("div", {
 						key: 2,

package/dist/components/Button/WButtonDropdown.vue_vue_type_script_setup_true_lang.js

@@ -62,7 +62,7 @@ var WButtonDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					join: "",
 					onClick: toggle
 				}, {
-					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-4 transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
+					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-4 motion-safe:transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
 					_: 1
 				}, 8, ["semantic-type", "disabled"])) : createCommentVNode("", true),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.$slots.button?.(), (item, index) => {
@@ -79,7 +79,7 @@ var WButtonDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					join: "",
 					onClick: toggle
 				}, {
-					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-[1em] transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
+					default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-[1em] motion-safe:transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
 					_: 1
 				}, 8, ["semantic-type", "disabled"])) : createCommentVNode("", true)
 			]), __props.tooltipText ? (openBlock(), createBlock(WTooltip_default, {

package/dist/components/Button/WButtonTab.vue_vue_type_script_setup_true_lang.js

@@ -52,7 +52,7 @@ var WButtonTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				}],
 				onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && _ctx.$emit("click", $event))
 			}), {
-				default: withCtx(() => [__props.indicator ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["text-surface rounded-full bg-inherit p-1 outline transition-[outline-width] duration-500", {
+				default: withCtx(() => [__props.indicator ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["text-surface rounded-full bg-inherit p-1 outline motion-safe:transition-[outline-width] motion-safe:duration-500", {
 					"tone-negative bg-tone-fill outline-tone/10": __props.hasError,
 					"tone-positive bg-tone-fill outline-tone/10": !__props.hasError && __props.hasValue && __props.showHasValue,
 					"bg-track-strong outline-track-strong/10": !__props.hasError && (!__props.showHasValue || !__props.hasValue),
@@ -124,8 +124,8 @@ var WButtonTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						_: 1
 					}),
 					createVNode(Transition, {
-						"enter-active-class": "transition-[scale,opacity] origin-center duration-300",
-						"leave-active-class": "transition-[scale,opacity] origin-center duration-300",
+						"enter-active-class": "motion-safe:transition-[scale,opacity] origin-center motion-safe:duration-300",
+						"leave-active-class": "motion-safe:transition-[scale,opacity] origin-center motion-safe:duration-300",
 						"enter-from-class": "scale-x-0 opacity-0",
 						"leave-to-class": "scale-x-0 opacity-0",
 						css: !__props.indicator

package/dist/components/Chart/WChartLine.vue_vue_type_script_setup_true_lang.js

@@ -240,12 +240,12 @@ var WChartLine_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 							d: minMaxAreaPath.value,
 							fill: "white",
 							"fill-opacity": "0.2",
-							class: "transition-[d]"
+							class: "motion-safe:transition-[d]"
 						}, null, 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : __props.hasArea && areaPath.value ? (openBlock(), createElementBlock("path", {
 							key: 1,
 							d: areaPath.value,
 							fill: `url(#${unref(gradientAreaId)})`,
-							class: "transition-[d]"
+							class: "motion-safe:transition-[d]"
 						}, null, 8, _hoisted_6)) : createCommentVNode("", true),
 						linePath.value ? (openBlock(), createElementBlock("path", {
 							key: 2,
@@ -256,7 +256,7 @@ var WChartLine_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 							stroke: "white",
 							"stroke-linejoin": "round",
 							"stroke-linecap": "round",
-							class: "transition-[d]"
+							class: "motion-safe:transition-[d]"
 						}, null, 8, _hoisted_7)) : createCommentVNode("", true),
 						_ctx.$slots.tooltip && hoveredData.value && tooltipRef.value?.isOpen ? (openBlock(), createElementBlock("g", _hoisted_8, [createElementVNode("circle", {
 							cx: hoveredData.value.x,

package/dist/components/Checkbox/WCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -89,8 +89,8 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				onKeypress: withKeys(withModifiers(toggle, ["stop", "prevent"]), ["enter"])
 			}, [
 				createVNode(Transition, {
-					"enter-active-class": "transition-[scale,opacity]",
-					"leave-active-class": "transition-[scale,opacity]",
+					"enter-active-class": "motion-safe:transition-[scale,opacity]",
+					"leave-active-class": "motion-safe:transition-[scale,opacity]",
 					"enter-from-class": __props.radio ? "opacity-0 scale-25!" : "opacity-0 scale-50!",
 					"leave-to-class": __props.radio ? "opacity-0 scale-25!" : "opacity-0 scale-50!",
 					css: !__props.lessTransitions
@@ -102,7 +102,7 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"rounded-[calc(0.25rem+1px)]": !__props.radio && !(__props.intermediate && __props.modelValue === null),
 						"tone-primary bg-tone-fill [.w-hover-checked:hover_&]:block!": !unref(isDisabled) && !unref(isSkeleton),
 						"bg-track": unref(isDisabled) || unref(isSkeleton),
-						"transition-[scale,opacity]": !__props.lessTransitions
+						"motion-safe:transition-[scale,opacity]": !__props.lessTransitions
 					}]) }, null, 2), [[vShow, __props.modelValue !== false && !__props.loading]])]),
 					_: 1
 				}, 8, [

package/dist/components/Counter/WCounter.vue_vue_type_script_setup_true_lang.js

@@ -25,7 +25,7 @@ var WCounter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex min-w-[1.25em] items-center justify-center rounded-full px-[0.375em] font-medium leading-tight", [{ "animate-shake": isShake.value }, unref(semanticTypeBgMap)[__props.semanticType]]]) }, toDisplayString(unref(numberCompactFormatter).format(__props.count)), 3);
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex min-w-[1.25em] items-center justify-center rounded-full px-[0.375em] font-medium leading-tight", [{ "motion-safe:animate-shake": isShake.value }, unref(semanticTypeBgMap)[__props.semanticType]]]) }, toDisplayString(unref(numberCompactFormatter).format(__props.count)), 3);
 		};
 	}
 });

package/dist/components/DatePicker/WDatePicker.vue_vue_type_script_setup_true_lang.js

@@ -121,8 +121,8 @@ var WDatePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"onClick:previous",
 				"onClick:next"
 			])]), createElementVNode("div", _hoisted_3, [createVNode(Transition, {
-				"enter-active-class": "transition-transform duration-250 w-full",
-				"leave-active-class": "transition-transform duration-250 w-full absolute top-0",
+				"enter-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full",
+				"leave-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full absolute top-0",
 				"enter-from-class": "translate-x-[calc(100%*var(--direction-factor))]",
 				"leave-to-class": "translate-x-[calc(100%*var(--direction-factor)*-1)]"
 			}, {

package/dist/components/DatePicker/WDatePickerSingle.vue_vue_type_script_setup_true_lang.js

@@ -75,8 +75,8 @@ var WDatePickerSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"onClick:previous",
 				"onClick:next"
 			])]), createElementVNode("div", _hoisted_2, [createVNode(Transition, {
-				"enter-active-class": "transition-transform duration-250 w-full",
-				"leave-active-class": "transition-transform duration-250 w-full absolute top-0",
+				"enter-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full",
+				"leave-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full absolute top-0",
 				"enter-from-class": "translate-x-[calc(100%*var(--direction-factor))]",
 				"leave-to-class": "translate-x-[calc(100%*var(--direction-factor)*-1)]"
 			}, {

package/dist/components/DatePicker/components/CalendarToggle.vue_vue_type_script_setup_true_lang.js

@@ -19,8 +19,8 @@ var CalendarToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabledPrevious && _ctx.$emit("click:previous"))
 				}, [createVNode(unref(IconArrow_default), { class: "-ml-1 rotate-90" })], 2),
 				createElementVNode("div", _hoisted_2, [createVNode(Transition, {
-					"enter-active-class": "transition-transform duration-250 w-full",
-					"leave-active-class": "transition-transform duration-250 w-full absolute top-0",
+					"enter-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full",
+					"leave-active-class": "motion-safe:transition-transform motion-safe:duration-250 w-full absolute top-0",
 					"enter-from-class": "translate-x-[calc(100%*var(--direction-factor))]",
 					"leave-to-class": "translate-x-[calc(100%*var(--direction-factor)*-1)]"
 				}, {

package/dist/components/Dismissable/WDismissable.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { Transition, createBlock, createCommentVNode, createElementBlock, create
 var _hoisted_1 = {
 	key: 0,
 	ref: "container",
-	class: "no-scrollbar snap-y snap-mandatory snap-always overflow-scroll overflow-y-auto overscroll-contain scroll-smooth"
+	class: "no-scrollbar snap-y snap-mandatory snap-always overflow-scroll overflow-y-auto overscroll-contain motion-safe:scroll-smooth"
 };
 var WDismissable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WDismissable",

package/dist/components/Expansion/WExpansion.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { KeepAlive, Transition, createBlock, createCommentVNode, createElementBl
 // src/components/Expansion/WExpansion.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "duration-(--expansion-duration,200ms)"
+	class: "motion-safe:duration-(--expansion-duration,200ms)"
 };
 var _hoisted_2 = { class: "grid grid-cols-1 [overflow:inherit]" };
 var WExpansion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -21,10 +21,10 @@ var WExpansion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Transition, {
-				"enter-active-class": "transition-[grid-template-rows] overflow-y-hidden grid",
+				"enter-active-class": "motion-safe:transition-[grid-template-rows] overflow-y-hidden grid",
 				"enter-from-class": "grid-rows-[0fr]",
 				"enter-to-class": "grid-rows-[1fr]",
-				"leave-active-class": "transition-[grid-template-rows] overflow-y-hidden grid",
+				"leave-active-class": "motion-safe:transition-[grid-template-rows] overflow-y-hidden grid",
 				"leave-from-class": "grid-rows-[1fr]",
 				"leave-to-class": "grid-rows-[0fr]",
 				onBeforeEnter: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:visible", true)),

package/dist/components/Expansion/WExpansionItem.vue_vue_type_script_setup_true_lang.js

@@ -51,7 +51,7 @@ var WExpansionItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 						default: withCtx(() => [__props.hasFlag ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true)]),
 						_: 1
 					})], 2)
-				]), createElementVNode("div", _hoisted_2, [createVNode(unref(IconArrow_default), { class: normalizeClass(["text-accent square-[1.25em] transition-transform", { "rotate-180": __props.isOpen }]) }, null, 8, ["class"])])]),
+				]), createElementVNode("div", _hoisted_2, [createVNode(unref(IconArrow_default), { class: normalizeClass(["text-accent square-[1.25em] motion-safe:transition-transform", { "rotate-180": __props.isOpen }]) }, null, 8, ["class"])])]),
 				_: 1
 			}, 40, ["aria-expanded", "class"])), createVNode(WExpansion_default, {
 				"is-open": __props.isOpen,

package/dist/components/FilePicker/components/FilePickerSvg.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ var FilePickerSvg_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				stroke: "currentColor",
 				"stroke-linecap": "round",
 				"stroke-dasharray": "4px 8px",
-				"rect-class": __props.animate ? "animate-border-march" : void 0
+				"rect-class": __props.animate ? "motion-safe:animate-border-march" : void 0
 			}, null, 8, ["rect-class"]);
 		};
 	}

package/dist/components/InfiniteList/components/InfiniteListPage.vue_vue_type_script_setup_true_lang.js

@@ -303,7 +303,7 @@ var InfiniteListPage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(slotList.value, (slot, slotIndex) => {
 					return openBlock(), createElementBlock("div", {
 						key: slot.key,
-						class: "grid w-full transition-[grid-template-rows] duration-300"
+						class: "grid w-full motion-safe:transition-[grid-template-rows] motion-safe:duration-300"
 					}, [createElementVNode("div", _hoisted_4, [createVNode(InfiniteListPageItem_default, {
 						ref_for: true,
 						ref: (item) => setItemRef(slot.key, item)

package/dist/components/Input/WInput.vue_vue_type_script_setup_true_lang.js

@@ -714,7 +714,7 @@ var WInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 							default: withCtx(() => [unref(asyncState).timeout.value ? (openBlock(), createElementBlock("div", _hoisted_8)) : createCommentVNode("", true)]),
 							_: 1
 						}), createVNode(Transition, {
-							"enter-active-class": "transition-[width] ease-linear rounded-sm duration-(--debounce-duration)",
+							"enter-active-class": "motion-safe:transition-[width] ease-linear rounded-sm motion-safe:duration-(--debounce-duration)",
 							"enter-from-class": "w-0",
 							"enter-to-class": "w-full",
 							"leave-active-class": "hidden"

package/dist/components/Input/WInputSuggest.vue_vue_type_script_setup_true_lang.js

@@ -243,7 +243,7 @@ var WInputSuggest_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 							disabled: unref(isDisabled),
 							onClick: ($event) => isOpen.value ? toggleScope.unclickable === false ? close() : blur() : focus()
 						}, {
-							default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 text-description transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
+							default: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 text-description motion-safe:transition-transform", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])]),
 							_: 1
 						}, 8, [
 							"expanded",

package/dist/components/List/WListHeaderItem.vue_vue_type_script_setup_true_lang.js

@@ -62,7 +62,7 @@ var WListHeaderItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						"enter-from-class": "opacity-0",
 						"leave-to-class": "opacity-0"
 					}, {
-						default: withCtx(() => [index.value !== -1 ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(IconBack_default), { class: normalizeClass(["square-3 transition-transform", {
+						default: withCtx(() => [index.value !== -1 ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(IconBack_default), { class: normalizeClass(["square-3 motion-safe:transition-transform", {
 							"rotate-90": __props.ordering[index.value]?.order === "ASC",
 							"-rotate-90": __props.ordering[index.value]?.order === "DESC"
 						}]) }, null, 8, ["class"]), __props.ordering.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(index.value + 1), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true)]),

package/dist/components/List/components/HeaderSortItem.vue_vue_type_script_setup_true_lang.js

@@ -45,7 +45,7 @@ var HeaderSortItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				}, {
 					default: withCtx(() => [index.value !== -1 ? (openBlock(), createBlock(unref(IconBack_default), {
 						key: 0,
-						class: normalizeClass(["square-4 transition-transform", {
+						class: normalizeClass(["square-4 motion-safe:transition-transform", {
 							"rotate-90": __props.ordering[index.value]?.order === "ASC",
 							"-rotate-90": __props.ordering[index.value]?.order === "DESC"
 						}])

package/dist/components/List/components/ListFilterChip.vue_vue_type_script_setup_true_lang.js

@@ -61,7 +61,7 @@ var ListFilterChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				badge.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(badge.value), 1)) : createCommentVNode("", true),
 				!hasValue.value ? (openBlock(), createBlock(unref(IconArrow_default), {
 					key: 3,
-					class: normalizeClass(["square-[1em] text-description shrink-0 transition-transform", { "rotate-180": __props.isOpen }])
+					class: normalizeClass(["square-[1em] text-description shrink-0 motion-safe:transition-transform", { "rotate-180": __props.isOpen }])
 				}, null, 8, ["class"])) : createCommentVNode("", true)
 			], 10, _hoisted_1), isRemovable.value ? (openBlock(), createElementBlock("button", {
 				key: 0,

package/dist/components/List/components/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -130,7 +130,7 @@ var ListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				}, [
 					__props.mobile ? (openBlock(), createElementBlock("div", {
 						key: 0,
-						class: normalizeClass(["tone-primary bg-tone-fill @sm:hidden pointer-events-none absolute left-0 top-0 h-full w-2 transition-[translate,opacity] duration-200", { "-translate-x-2 opacity-0": !__props.selected }])
+						class: normalizeClass(["tone-primary bg-tone-fill @sm:hidden pointer-events-none absolute left-0 top-0 h-full w-2 motion-safe:transition-[translate,opacity] motion-safe:duration-200", { "-translate-x-2 opacity-0": !__props.selected }])
 					}, null, 2)) : createCommentVNode("", true),
 					!__props.card ? (openBlock(), createElementBlock("div", {
 						key: 1,

package/dist/components/Modal/WModal.vue_vue_type_script_setup_true_lang.js

@@ -128,8 +128,8 @@ var WModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					_: 1
 				}),
 				createVNode(TransitionGroup, {
-					"enter-active-class": "transition-all duration-300",
-					"leave-active-class": "transition-all duration-300",
+					"enter-active-class": "motion-safe:transition-all motion-safe:duration-300",
+					"leave-active-class": "motion-safe:transition-all motion-safe:duration-300",
 					"enter-from-class": "translate-y-8 opacity-0",
 					"leave-to-class": "-translate-y-5 opacity-0"
 				}, {

package/dist/components/Nav/WNavBar.vue_vue_type_script_setup_true_lang.js

@@ -56,7 +56,7 @@ var WNavBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				}),
 				createElementVNode("nav", {
 					ref: "nav",
-					class: normalizeClass(["w-nav-bar fixed left-(--w-left-margin,0px) top-0 flex h-full flex-col overflow-hidden transition-[clip-path] duration-200 [clip-path:inset(-2rem)] print:hidden", [{ "xl-not:[clip-path:inset(-2rem_calc(100%+2rem)_-2rem_-2rem)]": !isOpen.value }, _ctx.$attrs.class]]),
+					class: normalizeClass(["w-nav-bar fixed left-(--w-left-margin,0px) top-0 flex h-full flex-col overflow-hidden motion-safe:transition-[clip-path] motion-safe:duration-200 [clip-path:inset(-2rem)] print:hidden", [{ "xl-not:[clip-path:inset(-2rem_calc(100%+2rem)_-2rem_-2rem)]": !isOpen.value }, _ctx.$attrs.class]]),
 					style: normalizeStyle({ zIndex: unref(30) })
 				}, [
 					_ctx.$slots.brand && __props.brandTo ? (openBlock(), createBlock(WRouterLink_default, {

package/dist/components/Nav/WNavItem.vue_vue_type_script_setup_true_lang.js

@@ -79,8 +79,8 @@ var WNavItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			}, {
 				default: withCtx(() => [
 					createVNode(Transition, {
-						"enter-active-class": "transition-transform duration-200",
-						"leave-active-class": "transition-transform duration-200",
+						"enter-active-class": "motion-safe:transition-transform motion-safe:duration-200",
+						"leave-active-class": "motion-safe:transition-transform motion-safe:duration-200",
 						"enter-from-class": "-translate-x-1",
 						"leave-to-class": "-translate-x-1"
 					}, {

package/dist/components/Nav/WNavItemExpand.vue_vue_type_script_setup_true_lang.js

@@ -87,7 +87,7 @@ var WNavItemExpand_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					"param-fields": __props.paramFields,
 					hovered: unref(isDropdownOpen) && !hasActive.value
 				}), createSlots({
-					right: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 transition-transform", { "-rotate-90": !hasActive.value && !__props.even }]) }, null, 8, ["class"])]),
+					right: withCtx(() => [createVNode(unref(IconArrow_default), { class: normalizeClass(["square-3 motion-safe:transition-transform", { "-rotate-90": !hasActive.value && !__props.even }]) }, null, 8, ["class"])]),
 					_: 2
 				}, [_ctx.$slots.icon ? {
 					name: "icon",

package/dist/components/Nav/WNavItemTransition.vue_vue_type_script_setup_true_lang.js

@@ -5,10 +5,10 @@ var WNavItemTransition_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(TransitionGroup, {
-				"enter-active-class": "transition-[grid-template-rows] overflow-hidden grid",
+				"enter-active-class": "motion-safe:transition-[grid-template-rows] overflow-hidden grid",
 				"enter-from-class": "grid-rows-[0fr]",
 				"enter-to-class": "grid-rows-[1fr]",
-				"leave-active-class": "transition-[grid-template-rows] overflow-hidden grid",
+				"leave-active-class": "motion-safe:transition-[grid-template-rows] overflow-hidden grid",
 				"leave-from-class": "grid-rows-[1fr]",
 				"leave-to-class": "grid-rows-[0fr]"
 			}, {

package/dist/components/Notify/WNotify.vue_vue_type_script_setup_true_lang.js

@@ -37,7 +37,7 @@ var WNotify_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterToastEntries), (item) => {
 					return openBlock(), createElementBlock("div", {
 						key: unref(getNotifyItemKey)(item),
-						class: normalizeClass(["grid transition-[translate,opacity,grid-template-rows] duration-300", isCenter.value ? "justify-center" : "justify-end"])
+						class: normalizeClass(["grid motion-safe:transition-[translate,opacity,grid-template-rows] motion-safe:duration-300", isCenter.value ? "justify-center" : "justify-end"])
 					}, [createElementVNode("div", _hoisted_1, [createVNode(NotifyCard_default, {
 						item,
 						"onClick:close": _cache[0] || (_cache[0] = (entry) => (entry.items ?? [entry]).forEach((value) => unref(hideToast)(value.id)))

package/dist/components/Notify/WNotifyCenter.vue_vue_type_script_setup_true_lang.js

@@ -80,7 +80,7 @@ var WNotifyCenter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActionEntries), (item) => {
 							return openBlock(), createElementBlock("div", {
 								key: unref(getNotifyItemKey)(item),
-								class: "grid transition-[transform,grid-template-rows] duration-300"
+								class: "grid motion-safe:transition-[transform,grid-template-rows] motion-safe:duration-300"
 							}, [createElementVNode("div", _hoisted_6, [createVNode(NotifyCard_default, {
 								item,
 								history: "",
@@ -110,7 +110,7 @@ var WNotifyCenter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifyCenterActivityEntries), (item) => {
 							return openBlock(), createElementBlock("div", {
 								key: unref(getNotifyItemKey)(item),
-								class: "grid transition-[transform,grid-template-rows] duration-300"
+								class: "grid motion-safe:transition-[transform,grid-template-rows] motion-safe:duration-300"
 							}, [createElementVNode("div", _hoisted_8, [createVNode(NotifyCard_default, {
 								item,
 								history: "",

package/dist/components/Progress/WProgress.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var WProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
-				class: "tone-primary bg-tone-fill h-full transition-[width]",
+				class: "tone-primary bg-tone-fill h-full motion-safe:transition-[width]",
 				style: normalizeStyle({ width: __props.modelValue + "%" })
 			}, null, 4)]);
 		};

package/dist/components/Progress/WProgressBar.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { Fragment, computed, createCommentVNode, createElementBlock, createEleme
 var _hoisted_1 = ["aria-valuenow", "aria-busy"];
 var _hoisted_2 = {
 	key: 0,
-	class: "animate-ticker absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent [--tiker-duration:1.6s]"
+	class: "motion-safe:animate-ticker absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent [--tiker-duration:1.6s]"
 };
 var _hoisted_3 = { class: "text-accent relative flex h-full items-center justify-center" };
 var _hoisted_4 = { class: "text-description relative flex h-full items-center justify-center gap-2 font-medium" };
@@ -30,16 +30,16 @@ var WProgressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				"aria-busy": __props.modelValue === null || __props.modelValue < 1
 			}, [__props.modelValue !== null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 				createElementVNode("div", {
-					class: normalizeClass(["absolute inset-y-0 left-0 overflow-hidden rounded-xl transition-[width] duration-500 ease-out", unref(progressBarClass)[__props.semanticType]]),
+					class: normalizeClass(["absolute inset-y-0 left-0 overflow-hidden rounded-xl motion-safe:transition-[width] motion-safe:duration-500 ease-out", unref(progressBarClass)[__props.semanticType]]),
 					style: normalizeStyle({ width: percent.value })
 				}, [__props.modelValue < 1 ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)], 6),
 				createElementVNode("div", _hoisted_3, toDisplayString(percent.value), 1),
 				createElementVNode("div", {
 					"aria-hidden": "true",
-					class: normalizeClass(["absolute inset-0 flex items-center justify-center transition-[clip-path] duration-500 ease-out", unref(progressBarTextClass)[__props.semanticType]]),
+					class: normalizeClass(["absolute inset-0 flex items-center justify-center motion-safe:transition-[clip-path] motion-safe:duration-500 ease-out", unref(progressBarTextClass)[__props.semanticType]]),
 					style: normalizeStyle({ clipPath: `inset(0 calc(100% - ${percent.value}) 0 0)` })
 				}, toDisplayString(percent.value), 7)
-			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(["animate-ticker absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]", unref(progressBarIndeterminateClass)[__props.semanticType]]) }, null, 2), createElementVNode("div", _hoisted_4, [createVNode(WSpinner_default, { class: "square-4" }), _cache[0] || (_cache[0] = createElementVNode("span", null, "In progress", -1))])], 64))], 8, _hoisted_1);
+			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(["motion-safe:animate-ticker absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]", unref(progressBarIndeterminateClass)[__props.semanticType]]) }, null, 2), createElementVNode("div", _hoisted_4, [createVNode(WSpinner_default, { class: "square-4" }), _cache[0] || (_cache[0] = createElementVNode("span", null, "In progress", -1))])], 64))], 8, _hoisted_1);
 		};
 	}
 });

package/dist/components/Progress/WProgressStriped.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { createElementBlock, createElementVNode, defineComponent, normalizeClass
 var _hoisted_1 = ["aria-valuenow", "aria-busy"];
 var _hoisted_2 = {
 	key: 0,
-	class: "animate-ticker tone-primary via-tone/60 absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]"
+	class: "motion-safe:animate-ticker tone-primary via-tone/60 absolute inset-0 bg-linear-to-r from-transparent to-transparent [--tiker-duration:1.4s]"
 };
 var WProgressStriped_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "WProgressStriped",
@@ -19,9 +19,9 @@ var WProgressStriped_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"aria-busy": __props.modelValue < 100
 			}, [__props.modelValue <= 0 ? (openBlock(), createElementBlock("div", _hoisted_2)) : (openBlock(), createElementBlock("div", {
 				key: 1,
-				class: "from-primary-dark to-primary relative h-full overflow-hidden rounded-full bg-linear-to-r transition-[width] duration-500 ease-out",
+				class: "from-primary-dark to-primary relative h-full overflow-hidden rounded-full bg-linear-to-r motion-safe:transition-[width] motion-safe:duration-500 ease-out",
 				style: normalizeStyle({ width: Math.min(__props.modelValue, 100) + "%" })
-			}, [createElementVNode("div", { class: normalizeClass(["absolute inset-0", __props.modelValue < 100 ? "animate-ticker bg-linear-to-r from-transparent via-white/40 to-transparent [--tiker-duration:1.6s]" : "bg-default/30 animate-pulse"]) }, null, 2)], 4))], 10, _hoisted_1);
+			}, [createElementVNode("div", { class: normalizeClass(["absolute inset-0", __props.modelValue < 100 ? "motion-safe:animate-ticker bg-linear-to-r from-transparent via-white/40 to-transparent [--tiker-duration:1.6s]" : "bg-default/30 motion-safe:animate-pulse"]) }, null, 2)], 4))], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/Skeleton/WSkeleton.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,7 @@ var WSkeleton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: "tone-primary bg-tone-soft w-skeleton w-skeleton-opacity-50 dark:w-skeleton-opacity-5 before:animate-ticker w-option-has-bg",
+				class: "tone-primary bg-tone-soft w-skeleton w-skeleton-opacity-50 dark:w-skeleton-opacity-5 motion-safe:before:animate-ticker w-option-has-bg",
 				style: normalizeStyle({ "--skeleton-width-internal": skeletonWidth.value + "%" })
 			}, [renderSlot(_ctx.$slots, "default")], 4);
 		};

package/dist/components/Slider/WSlider.vue_vue_type_script_setup_true_lang.js

@@ -102,7 +102,7 @@ var WSlider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"bg-track-strong": __props.disabled
 				}]),
 				style: normalizeStyle({ width: `${rangeScale(cursor.value ?? __props.modelValue) * 100}%` })
-			}, [createElementVNode("div", { class: normalizeClass(["square-4 relative right-0 -mr-2 rounded-full bg-inherit transition-transform", {
+			}, [createElementVNode("div", { class: normalizeClass(["square-4 relative right-0 -mr-2 rounded-full bg-inherit motion-safe:transition-transform", {
 				"scale-180": isMoveStarted.value,
 				"hover:scale-200": !__props.readonly && !isMoveStarted.value
 			}]) }, null, 2)], 6)], 512), createVNode(Transition, {

package/dist/components/Slider/WSliderRange.vue_vue_type_script_setup_true_lang.js

@@ -124,11 +124,11 @@ var WSliderRange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				})
 			}, [
 				!__props.disabled ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass(["square-4 absolute left-0 -ml-2 rounded-full bg-(--w-slider-from,var(--color-primary)) transition-transform", {
+				createElementVNode("div", { class: normalizeClass(["square-4 absolute left-0 -ml-2 rounded-full bg-(--w-slider-from,var(--color-primary)) motion-safe:transition-transform", {
 					"scale-180": isCursorFrom.value === true,
 					"hover:scale-200": !__props.readonly && isCursorFrom.value === null
 				}]) }, null, 2),
-				createElementVNode("div", { class: normalizeClass(["square-4 absolute right-0 -mr-2 rounded-full bg-(--w-slider-to,var(--color-primary)) transition-transform", {
+				createElementVNode("div", { class: normalizeClass(["square-4 absolute right-0 -mr-2 rounded-full bg-(--w-slider-to,var(--color-primary)) motion-safe:transition-transform", {
 					"scale-180": isCursorFrom.value === false,
 					"hover:scale-200": !__props.readonly && isCursorFrom.value === null
 				}]) }, null, 2)

package/dist/components/Spinner/WSpinner.vue.js

@@ -6,7 +6,7 @@ var _hoisted_1 = {
 	width: "20",
 	height: "20",
 	viewBox: "0 0 24 24",
-	class: "animate-spin"
+	class: "motion-safe:animate-spin"
 };
 function _sfc_render(_ctx, _cache) {
 	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("circle", {

package/dist/components/Tabs/WTabs.vue_vue_type_script_setup_true_lang.js

@@ -484,7 +484,7 @@ var WTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						]);
 					}), 128)) : defaultSlots.value.some((slot) => slot.children?.default) ? (openBlock(), createElementBlock("div", {
 						key: 1,
-						class: normalizeClass(["relative h-full transition-[min-height] duration-300", {
+						class: normalizeClass(["relative h-full motion-safe:transition-[min-height] motion-safe:duration-300", {
 							"[overflow-anchor:none]": isSwitching.value,
 							"surface-section-joined": !__props.side && __props.section && !joined,
 							"sm-not:snap-start sm-not:px-(--w-frame-padding,var(--inner-margin))": __props.side
@@ -494,8 +494,8 @@ var WTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 							"--direction-factor": isDirect.value ? "1" : "-1"
 						})
 					}, [createVNode(TransitionGroup, {
-						"enter-active-class": "transition-[translate,opacity] duration-250 w-full [overflow-anchor:none]",
-						"leave-active-class": "transition-[translate,opacity] duration-250 w-full absolute top-0 [overflow-anchor:none]",
+						"enter-active-class": "motion-safe:transition-[translate,opacity] motion-safe:duration-250 w-full [overflow-anchor:none]",
+						"leave-active-class": "motion-safe:transition-[translate,opacity] motion-safe:duration-250 w-full absolute top-0 [overflow-anchor:none]",
 						"enter-from-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor))]",
 						"leave-to-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0 absolute" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor)*-1)]",
 						onAfterEnter: _cache[1] || (_cache[1] = ($event) => isSwitching.value = false),

package/dist/components/TextOverflow/WTextOverflow.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,7 @@ var WTextOverflow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				onMouseenter: updateOverflow
 			}, [createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", {
 				ref: "element",
-				class: normalizeClass(["absolute inset-y-0 left-0", { "delay-300 group-hover/overflow:translate-x-(--text-overflow,0px) group-hover/overflow:transition-transform group-hover/overflow:duration-(--text-overflow-duration,150ms) group-hover/overflow:ease-linear": overflow.value }]),
+				class: normalizeClass(["absolute inset-y-0 left-0", { "delay-300 group-hover/overflow:translate-x-(--text-overflow,0px) motion-safe:group-hover/overflow:transition-transform motion-safe:group-hover/overflow:duration-(--text-overflow-duration,150ms) group-hover/overflow:ease-linear": overflow.value }]),
 				style: normalizeStyle(overflow.value ? {
 					"--text-overflow": `-${overflow.value}px`,
 					"--text-overflow-duration": `${overflow.value * 30}ms`

package/dist/components/Toggle/WToggle.vue_vue_type_script_setup_true_lang.js

@@ -111,7 +111,7 @@ var WToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [createElementVNode("div", { class: normalizeClass(["width-[calc(var(--w-input-height)+0.5rem)] p-0.75 h-full rounded-full bg-size-[200%_auto] bg-right", {
 				"bg-track": !value.value || __props.loading,
 				[unref(semanticTypeBackgroundMap)[unref(SemanticType).PRIMARY]]: value.value && !__props.loading
-			}]) }, [createElementVNode("div", _hoisted_3, [createElementVNode("div", { class: normalizeClass(["tone-primary text-tone scheme-light absolute z-10 flex aspect-square h-full items-center justify-center rounded-full bg-(--w-toggle-caret,#ffffff) shadow-md transition-[right]", {
+			}]) }, [createElementVNode("div", _hoisted_3, [createElementVNode("div", { class: normalizeClass(["tone-primary text-tone scheme-light absolute z-10 flex aspect-square h-full items-center justify-center rounded-full bg-(--w-toggle-caret,#ffffff) shadow-md motion-safe:transition-[right]", {
 				"right-[calc(100%-(var(--w-input-height)-0.75rem))]": value.value === false,
 				"right-[calc(50%-(var(--w-input-height)-0.75rem)/2)]": value.value === null,
 				"right-0": value.value === true,

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.27.3, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.28.0, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
 

package/eslint/plugin.js

@@ -1,7 +1,9 @@
+import motionCss from './processors/motion-css.js'
 import recommended from './recommended.js'
 import modalDeclaration from './rules/modal-declaration.js'
 import modalImportAsync from './rules/modal-import-async.js'
 import modalImport from './rules/modal-import.js'
+import motionSafe from './rules/motion-safe.js'
 import uiKitImports from './rules/ui-kit-imports.js'
 
 const plugin = {
@@ -9,9 +11,14 @@ const plugin = {
     'modal-declaration': modalDeclaration,
     'modal-import-async': modalImportAsync,
     'modal-import': modalImport,
+    'motion-safe': motionSafe,
     'ui-kit-imports': uiKitImports,
   },
 
+  processors: {
+    'motion-css': motionCss(),
+  },
+
   configs: {},
 }
 
@@ -41,10 +48,33 @@ const customRules = {
   },
 }
 
+const motionRules = (config = {}) => [
+  {
+    name: 'custom-rules/motion',
+    files: config.astro ? ['**/*.{ts,js,vue,astro}'] : ['**/*.{ts,js,vue}'],
+    plugins: {
+      'custom-rules': plugin,
+    },
+    rules: {
+      'custom-rules/motion-safe': ['warn'],
+    },
+  },
+  {
+    name: 'custom-rules/motion-css',
+    files: ['**/*.css'],
+    plugins: {
+      'custom-rules': plugin,
+    },
+    processor: 'custom-rules/motion-css',
+  },
+]
+
+plugin.configs.motion = motionRules
+
 plugin.configs.recommended = (config = {}) => [
   ...recommended(config),
 
-  ...config.noCustom ? [] : [customRules],
+  ...config.noCustom ? [] : [customRules, ...motionRules(config)],
 ]
 
 export default plugin

package/eslint/processors/motion-css.js

@@ -0,0 +1,42 @@
+import {checkCss} from '../rules/motion/css.js'
+
+const RULE_ID = 'custom-rules/motion-safe'
+const MESSAGE = 'runs under reduced motion. Put it inside `@media (prefers-reduced-motion: no-preference)` or `@variant motion-safe`; in `@apply`, prefix the class with `motion-safe:`.'
+
+/**
+ * Checks `.css` files for motion outside a reduced-motion query. It hands ESLint no code blocks, so no
+ * other rule runs on CSS: rules a consumer configures without `files` would otherwise crash on it.
+ */
+export default ({severity = 1, allow = []} = {}) => {
+  const pending = new Map()
+
+  return {
+    meta: {name: 'motion-css'},
+
+    preprocess(text, filename) {
+      const messages = []
+
+      checkCss(text, {ruleId: RULE_ID, allow}, ({start, end}, token) => {
+        messages.push({
+          ruleId: RULE_ID,
+          severity,
+          message: `\`${ token }\` ${ MESSAGE }`,
+          line: start.line,
+          column: start.column + 1,
+          endLine: end.line,
+          endColumn: end.column + 1,
+        })
+      })
+
+      pending.set(filename, messages)
+
+      return []
+    },
+
+    postprocess(_, filename) {
+      const messages = pending.get(filename) ?? []
+      pending.delete(filename)
+      return messages
+    },
+  }
+}

package/eslint/rules/motion/classes.js

@@ -0,0 +1,74 @@
+const MOTION = /^(?:transition(?:-(?:all|colors|opacity|shadow|transform|\[.+\]|\(.+\)))?|animate-(?!none$)[\w-[\]().,%/]+|scroll-smooth)$/
+// Class lists never hold sentence punctuation; UI copy such as "Status transition failed." does.
+const PROSE = /[`;?]|[.,:](?:\s|$)/
+const DURATION = /^duration-(?!0$|initial$)(?:\d+|\[.+\]|\(.+\))$/
+
+// Fading or recolouring is not motion, so it may still play when the OS asks for reduced motion.
+export const FADE_UTILITIES = ['transition-opacity', 'transition-colors', 'transition-shadow']
+export const FADE_PROPERTIES = [
+  'opacity',
+  'color',
+  'background-color',
+  'border-color',
+  'outline-color',
+  'text-decoration-color',
+  'fill',
+  'stroke',
+  'box-shadow',
+]
+
+const isFade = utility => {
+  if (FADE_UTILITIES.includes(utility)) return true
+
+  const properties = utility.match(/^transition-\[(.+)\]$/)?.[1].split(',')
+
+  return !!properties && properties.every(property => FADE_PROPERTIES.includes(property.trim()))
+}
+
+const splitVariants = token => {
+  const parts = []
+  let depth = 0
+  let start = 0
+
+  for (let i = 0; i < token.length; i++) {
+    const char = token[i]
+    if (char === '[' || char === '(') depth++
+    else if (char === ']' || char === ')') depth--
+    else if (char === ':' && depth === 0) {
+      parts.push(token.slice(start, i))
+      start = i + 1
+    }
+  }
+
+  parts.push(token.slice(start))
+
+  return parts
+}
+
+/**
+ * Returns `{token, duration}` for each class that would still animate under reduced motion. `duration` marks a
+ * `duration-*` class with no ungated transition property beside it: `transition-property` defaults to `all`, so on
+ * its own it transitions every property.
+ */
+export const findUngated = (value, allow) => {
+  if (PROSE.test(value)) return []
+
+  const tokens = value.split(/\s+/).filter(Boolean).map(token => {
+    const parts = splitVariants(token)
+    return {token, utility: parts.pop().replace(/^!|!$/g, ''), gated: parts.includes('motion-safe')}
+  })
+
+  if (tokens.some(({token}) => splitVariants(token).includes('motion-reduce'))) return []
+
+  const hasStillProperty = tokens.some(({utility, gated}) => !gated && (utility === 'transition-none' || isFade(utility)))
+  const found = []
+
+  for (const {token, utility, gated} of tokens) {
+    if (gated || allow.includes(utility)) continue
+
+    if (MOTION.test(utility) && !isFade(utility)) found.push({token, duration: false})
+    else if (DURATION.test(utility) && !hasStillProperty) found.push({token, duration: true})
+  }
+
+  return found
+}

package/eslint/rules/motion/css.js

@@ -0,0 +1,196 @@
+import {fork} from '@eslint/css-tree'
+import {tailwind4} from 'tailwind-csstree'
+
+import {FADE_PROPERTIES, findUngated} from './classes.js'
+
+const {parse, generate} = fork(tailwind4)
+
+const GATES = [
+  /prefers-reduced-motion:\s*(?:no-preference|reduce)/,
+]
+
+const isGate = atrule => {
+  const name = atrule.name.toLowerCase()
+  const prelude = atrule.prelude ? generate(atrule.prelude) : ''
+
+  if (name === 'media') return GATES.some(gate => gate.test(prelude))
+  if (name === 'variant') return /^motion-(?:safe|reduce)$/.test(prelude.trim())
+
+  return false
+}
+
+const unprefixed = property => property.toLowerCase().replace(/^-(?:webkit|moz|ms|o)-/, '')
+
+const splitTopLevel = value => {
+  const parts = []
+  let depth = 0
+  let start = 0
+
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i]
+    if (char === '(') depth++
+    else if (char === ')') depth--
+    else if (char === ',' && depth === 0) {
+      parts.push(value.slice(start, i).trim())
+      start = i + 1
+    }
+  }
+
+  parts.push(value.slice(start).trim())
+
+  return parts.filter(Boolean)
+}
+
+const RESET = /^(?:none|initial|unset|revert|revert-layer)$/i
+const ZERO = /^(?:0|0?\.0+|0+)(?:m?s)?$/
+
+const transitionedProperties = (property, value) => {
+  if (property === 'transition-property') return splitTopLevel(value)
+
+  return splitTopLevel(value).map(item => {
+    const words = item.split(/\s+/).filter(word => !/^[\d.]/.test(word) && !/\(/.test(word))
+    return words.find(word => !/^(?:ease|ease-in|ease-out|ease-in-out|linear|step-start|step-end|normal|allow-discrete)$/i.test(word)) ?? 'all'
+  })
+}
+
+/**
+ * Walks a parsed stylesheet and reports motion that is not inside a reduced-motion query.
+ * `report(node, token)` gets the offending declaration or `@apply` rule.
+ */
+export const checkStylesheet = (stylesheet, report, allow = []) => {
+  const checkDeclaration = (declaration, siblings) => {
+    const property = unprefixed(declaration.property)
+    const value = generate(declaration.value).trim()
+
+    if (property === 'scroll-behavior') {
+      if (value.toLowerCase() === 'smooth') report(declaration, 'scroll-behavior: smooth')
+      return
+    }
+
+    if (property === 'animation' || property === 'animation-name') {
+      if (!RESET.test(value)) report(declaration, `${ declaration.property }: ${ value }`)
+      return
+    }
+
+    if (property === 'transition' || property === 'transition-property') {
+      if (RESET.test(value)) return
+
+      const properties = transitionedProperties(property, value).map(item => item.toLowerCase())
+      if (properties.every(item => FADE_PROPERTIES.includes(item))) return
+
+      report(declaration, `${ declaration.property }: ${ value }`)
+      return
+    }
+
+    if (property === 'transition-duration') {
+      if (splitTopLevel(value).every(item => ZERO.test(item))) return
+      if (siblings.some(item => ['transition', 'transition-property'].includes(unprefixed(item.property)))) return
+
+      report(declaration, `${ declaration.property }: ${ value } (transitions all properties)`)
+    }
+  }
+
+  const visitChildren = (list, gated) => {
+    const nodes = Array.isArray(list) ? list : list?.toArray?.() ?? []
+    const declarations = nodes.filter(node => node.type === 'Declaration')
+
+    for (const node of nodes) {
+      if (node.type === 'Declaration') {
+        if (!gated) checkDeclaration(node, declarations)
+      } else {
+        visit(node, gated)
+      }
+    }
+  }
+
+  const visit = (node, gated) => {
+    switch (node.type) {
+      case 'StyleSheet':
+      case 'Block':
+        visitChildren(node.children, gated)
+        break
+      case 'Rule':
+        visit(node.block, gated)
+        break
+      case 'Atrule': {
+        const name = node.name.toLowerCase()
+
+        if (name === 'keyframes' || name.endsWith('-keyframes')) return
+
+        if (name === 'apply') {
+          if (gated || !node.prelude) return
+          for (const {token, duration} of findUngated(generate(node.prelude), allow)) {
+            report(node, duration ? `${ token } (transitions all properties)` : token)
+          }
+          return
+        }
+
+        if (node.block) visit(node.block, gated || isGate(node))
+        break
+      }
+    }
+  }
+
+  visit(stylesheet, false)
+}
+
+const STYLE_BLOCK = /<style\b([^>]*)>([\s\S]*?)<\/style\s*>/gi
+const SKIPPED_LANG = /\blang\s*=\s*["']?(?:scss|sass|less|stylus|styl)\b/i
+const DISABLE = /eslint-disable(-next-line|-line)?(?:\s+([^*]+?))?\s*$/
+
+const isDisabledBy = (comment, ruleId) => {
+  const match = comment.match(DISABLE)
+  if (!match) return null
+  const rules = match[2]?.split(',').map(item => item.trim()).filter(Boolean)
+  if (rules?.length && !rules.includes(ruleId)) return null
+  return match[1] ?? ''
+}
+
+/**
+ * Checks CSS text that starts at `startLine`/`startColumn` (1-based line, 0-based column) of its file.
+ * `/* eslint-disable *\/`, `/* eslint-disable-line <rule> *\/` and `/* eslint-disable-next-line <rule> *\/` work inside it.
+ */
+export const checkCss = (css, {startLine = 1, startColumn = 0, ruleId, allow = []}, report) => {
+  const disabledLines = new Set()
+  let disabledAll = false
+
+  const stylesheet = parse(css, {
+    positions: true,
+    onParseError: () => {},
+    onComment: (value, loc) => {
+      const kind = isDisabledBy(value.trim(), ruleId)
+      if (kind === null) return
+      if (kind === '') disabledAll = true
+      else if (kind === '-line') disabledLines.add(loc.start.line)
+      else disabledLines.add(loc.end.line + 1)
+    },
+  })
+
+  if (disabledAll) return
+
+  checkStylesheet(stylesheet, (node, token) => {
+    const {start, end} = node.loc
+    if (disabledLines.has(start.line)) return
+
+    const toLoc = point => ({
+      line: startLine + point.line - 1,
+      column: point.line === 1 ? startColumn + point.column - 1 : point.column - 1,
+    })
+
+    report({start: toLoc(start), end: toLoc(end)}, token)
+  }, allow)
+}
+
+/**
+ * Finds `<style>` blocks in a Vue or Astro file and checks each like a CSS file.
+ */
+export const checkStyleBlocks = (text, options, report) => {
+  for (const match of text.matchAll(STYLE_BLOCK)) {
+    if (SKIPPED_LANG.test(match[1])) continue
+
+    const offset = match.index + match[0].indexOf('>') + 1
+    const before = text.slice(0, offset).split('\n')
+
+    checkCss(match[2], {...options, startLine: before.length, startColumn: before.at(-1).length}, report)
+  }
+}

package/eslint/rules/motion-safe.js

@@ -0,0 +1,96 @@
+import {findUngated} from './motion/classes.js'
+import {checkStyleBlocks} from './motion/css.js'
+
+const CLASS_ATTRIBUTE = /^(?:class|className|class:list)$|-class$|Class$/
+
+const attributeName = node => {
+  const name = node.name
+  if (!name) return null
+  if (name.type === 'JSXNamespacedName') return `${ name.namespace.name }:${ name.name.name }`
+  return name.name ?? null
+}
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Require motion to be opted into with motion-safe: (classes) or a prefers-reduced-motion query (<style> blocks)',
+      recommended: true,
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: {type: 'string'},
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      ungated: '`{{token}}` runs under reduced motion. Prefix it with `motion-safe:`, or add a `motion-reduce:` fallback in the same class string.',
+      ungatedDuration: '`{{token}}` has no transition property beside it, so under reduced motion it transitions every property. Prefix it with `motion-safe:` like the transition it belongs to.',
+      ungatedCss: '`{{token}}` runs under reduced motion. Put it inside `@media (prefers-reduced-motion: no-preference)` or `@variant motion-safe`; in `@apply`, prefix the class with `motion-safe:`.',
+    },
+  },
+
+  create(context) {
+    const allow = context.options[0]?.allow ?? []
+
+    const check = (node, value) => {
+      if (typeof value !== 'string' || !value) return
+
+      for (const {token, duration} of findUngated(value, allow)) {
+        context.report({node, messageId: duration ? 'ungatedDuration' : 'ungated', data: {token}})
+      }
+    }
+
+    const isModuleSource = node => {
+      const parent = node.parent
+      return parent && (
+        parent.type === 'ImportDeclaration'
+        || parent.type === 'ExportNamedDeclaration'
+        || parent.type === 'ExportAllDeclaration'
+        || parent.type === 'ImportExpression'
+      )
+    }
+
+    const scriptVisitor = {
+      Literal(node) {
+        if (isModuleSource(node)) return
+        if (node.parent?.type === 'JSXAttribute' && !CLASS_ATTRIBUTE.test(attributeName(node.parent) ?? '')) return
+        check(node, node.value)
+      },
+      TemplateElement(node) {
+        check(node, node.value.cooked)
+      },
+    }
+
+    const templateVisitor = {
+      'VAttribute[directive=false]'(node) {
+        if (!CLASS_ATTRIBUTE.test(node.key.name)) return
+        check(node, node.value?.value)
+      },
+      Literal: scriptVisitor.Literal,
+      TemplateElement: scriptVisitor.TemplateElement,
+    }
+
+    if (/\.(?:vue|astro)$/.test(context.filename)) {
+      scriptVisitor['Program:exit'] = () => {
+        checkStyleBlocks(context.sourceCode.text, {ruleId: context.id, allow}, (loc, token) => {
+          context.report({loc, messageId: 'ungatedCss', data: {token}})
+        })
+      }
+    }
+
+    const parserServices = context.sourceCode.parserServices
+
+    if (parserServices?.defineTemplateBodyVisitor) {
+      return parserServices.defineTemplateBodyVisitor(templateVisitor, scriptVisitor)
+    }
+
+    return scriptVisitor
+  },
+}

package/package.json

@@ -4,9 +4,10 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.27.3",
+  "version": "0.28.0",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
+    "@eslint/css-tree": "4.1.2",
     "@stylistic/eslint-plugin": "5.10.0",
     "@tanstack/eslint-plugin-query": "5.105.0",
     "@vue/eslint-config-typescript": "14.9.0",
@@ -17,7 +18,8 @@
     "eslint-plugin-tailwindcss": "4.4.0",
     "eslint-plugin-template-security": "0.2.0",
     "eslint-plugin-unused-imports": "4.4.1",
-    "eslint-plugin-vue": "10.12.0"
+    "eslint-plugin-vue": "10.12.0",
+    "tailwind-csstree": "0.4.2"
   },
   "peerDependencies": {
     "@tanstack/vue-query": ">=5.92.9",

package/tailwind-base/css/markdown/blocks.css

@@ -75,7 +75,7 @@
   }
 
   .w-markdown summary svg {
-    @apply transition-transform self-center;
+    @apply motion-safe:transition-transform self-center;
   }
 
   .w-markdown details:open summary svg {

package/tailwind-base/css/reduced-motion.css

@@ -1,4 +1,10 @@
-/* Turns off animations, transitions and smooth scrolling when the user asks the OS for reduced motion. Transitions still run for a moment so `transitionend` and Vue's `after-enter`/`after-leave` fire. */
+/*
+ * Turns off animations, transitions and smooth scrolling when the user asks the OS for reduced motion.
+ * Animations still run for a moment so `animationend` fires; they only run where one is declared.
+ * Transitions get no duration at all: `transition-property` defaults to `all`, so any duration here would make every
+ * element transition each inherited change — a theme switch would start one per SVG node. Vue's `after-enter` and
+ * `after-leave` still fire, since Vue finds no transition and finishes at once.
+ */
 @layer base {
   @media (prefers-reduced-motion: reduce) {
     *,
@@ -8,7 +14,7 @@
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-delay: 0s !important;
-      transition-duration: 0.01ms !important;
+      transition-duration: 0s !important;
       scroll-behavior: auto !important;
     }
   }

package/tailwind-base/plugins/internal-classes.ts

@@ -167,7 +167,9 @@ const pluginDefault = plugin(function ({addBase, addUtilities, theme}) {
         height: '100%',
         'background-repeat': 'repeat',
         'background-size': '40px 40px',
-        animation: theme('animation.move-horizontal'),
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: theme('animation.move-horizontal'),
+        },
       },
       [DARK_SELECTOR]: {
         '&::before': {
@@ -208,7 +210,9 @@ const pluginDefault = plugin(function ({addBase, addUtilities, theme}) {
         width: '100%',
         height: '100%',
         'background-image': 'linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / var(--w-skeleton-opacity)), rgb(255 255 255 / 0))',
-        animation: theme('animation.ticker'),
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: theme('animation.ticker'),
+        },
       },
     },
   })

package/tailwind-base/plugins/w-hover-circle.ts

@@ -18,9 +18,11 @@ const pluginDefault = plugin(function ({addBase}) {
         'user-select': 'none',
         opacity: '0',
         transform: 'scaleX(0.5) scaleY(0.5)',
-        'transition-property': 'opacity, transform',
-        'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
-        'transition-duration': '200ms',
+        '@media (prefers-reduced-motion: no-preference)': {
+          'transition-property': 'opacity, transform',
+          'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+          'transition-duration': '200ms',
+        },
       },
 
       '&:hover::after, .w-hover-circle-trigger:hover &::after, &:focus::after, .w-hover-circle-trigger:focus &::after': {

package/tailwind-base/plugins/w-ripple.ts

@@ -48,7 +48,9 @@ const pluginRipple = plugin(function ({matchUtilities, addUtilities, addBase}) {
   const configRippleStatic = {
     'w-ripple-active:not(:active)': () => ({
       '&::before': {
-        animation: 'ripple-active infinite linear alternate 0.5s',
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: 'ripple-active infinite linear alternate 0.5s',
+        },
       },
     }),
   }