fixed data-on-color, data-off-color for rating

Author: olton

examples/rating.html

@@ -22,7 +22,7 @@ <h1>Rating test page</h1>
         <input data-role="rating" data-stars="10">
         <input data-role="rating" data-value="3">
         <input data-role="rating" data-value="3" data-message="(3856)">
-        <input data-role="rating" data-value="3" data-star-color="pink" data-stared-color="cyan">
+        <input data-role="rating" data-value="3" data-off-color="var(--color-light-red)" data-on-color="red">
     </div>
 
 </div>

lib/metro.js

@@ -8,7 +8,7 @@
  ╚═╝     ╚═╝╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝      ╚═════╝ ╚═╝                                                             
 
  * Metro UI v5.1.19 Components Library  (https://metroui.org.ua)
- * Build: 10.09.2025, 11:49:58
+ * Build: 20.09.2025, 12:03:47
  * Copyright 2012-2025 by Serhii Pimenov
  * Licensed under MIT
  */
@@ -11497,7 +11497,7 @@
   (($7) => {
     "use strict";
     globalThis["__version__"] = "5.1.19";
-    globalThis["__build_time__"] = "10.09.2025, 11:49:58";
+    globalThis["__build_time__"] = "20.09.2025, 12:03:47";
     const meta_init = $7.meta("metro:init").attr("content");
     const meta_cloak = $7.meta("metro:cloak").attr("content");
     const meta_cloak_duration = $7.meta("metro:cloak_duration").attr("content");
@@ -11844,7 +11844,7 @@
     const normalizeComponentName2 = (name2) => typeof name2 !== "string" ? void 0 : name2.replace(/-/g, "").toLowerCase();
     const Metro2 = {
       version: "5.1.19",
-      build_time: "10.09.2025, 11:49:58",
+      build_time: "20.09.2025, 12:03:47",
       buildNumber: 0,
       isTouchable: isTouch3,
       fullScreenEnabled: document.fullscreenEnabled,
@@ -36635,12 +36635,11 @@ ${err.message}`);
         }
         const result = $7("<span>").addClass("result").addClass(o2.clsResult).appendTo(rating);
         result.html(o2.message);
-        if (o2.offColor !== null && (o2.offColor.includes("var(") || Farbe.Routines.isColor(o2.offColor))) {
+        if (o2.offColor) {
+          rating.cssVar("rating-off-color", o2.offColor);
         }
-        if (o2.onColor !== null && (o2.onColor.includes("var(") || Farbe.Routines.isColor(o2.onColor))) {
-          Metro2.utils.addCssRule(sheet, `#${id} .stars:hover li`, `color: ${o2.onColor};`);
-          Metro2.utils.addCssRule(sheet, `#${id} .stars li.on`, `color: ${o2.onColor};`);
-          Metro2.utils.addCssRule(sheet, `#${id} .stars li.half::after`, `color: ${o2.onColor};`);
+        if (o2.onColor) {
+          rating.cssVar("rating-on-color", o2.onColor);
         }
         if (o2.title !== null) {
           const title = $7("<span>").addClass("title").addClass(o2.clsTitle).html(o2.title);

lib/metro.js.map

@@ -112,14 +112,12 @@
             const result = $("<span>").addClass("result").addClass(o.clsResult).appendTo(rating);
             result.html(o.message);
 
-            if (o.offColor !== null && (o.offColor.includes("var(") || Farbe.Routines.isColor(o.offColor))) {
-                // nothing current
+            if (o.offColor) {
+                rating.cssVar("rating-off-color", o.offColor);
             }
 
-            if (o.onColor !== null && (o.onColor.includes("var(") || Farbe.Routines.isColor(o.onColor))) {
-                Metro.utils.addCssRule(sheet, `#${id} .stars:hover li`, `color: ${o.onColor};`);
-                Metro.utils.addCssRule(sheet, `#${id} .stars li.on`, `color: ${o.onColor};`);
-                Metro.utils.addCssRule(sheet, `#${id} .stars li.half::after`, `color: ${o.onColor};`);
+            if (o.onColor) {
+                rating.cssVar("rating-on-color", o.onColor);
             }
 
             if (o.title !== null) {