xmlui 0.11.2 → 0.11.4

package/dist/scripts/src/components/DatePicker/DatePicker.spec.js

@@ -200,9 +200,9 @@ const date_fns_1 = require("date-fns");
     // Error state
     yield initTestBed(`<DatePicker testId="datePicker" validationStatus="error" />`, {
         testThemeVars: {
-            "borderColor-DatePicker-error": "rgb(220, 38, 38)",
-            "backgroundColor-DatePicker-error": "rgb(254, 202, 202)",
-            "textColor-DatePicker-error": "rgb(127, 29, 29)",
+            "borderColor-DatePicker--error": "rgb(220, 38, 38)",
+            "backgroundColor-DatePicker--error": "rgb(254, 202, 202)",
+            "textColor-DatePicker--error": "rgb(127, 29, 29)",
         },
     });
     yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(220, 38, 38)");
@@ -213,9 +213,9 @@ const date_fns_1 = require("date-fns");
     // Warning state
     yield initTestBed(`<DatePicker testId="datePicker" validationStatus="warning" />`, {
         testThemeVars: {
-            "borderColor-DatePicker-warning": "rgb(255, 165, 0)",
-            "backgroundColor-DatePicker-warning": "rgb(255, 235, 156)",
-            "textColor-DatePicker-warning": "rgb(127, 29, 29)",
+            "borderColor-DatePicker--warning": "rgb(255, 165, 0)",
+            "backgroundColor-DatePicker--warning": "rgb(255, 235, 156)",
+            "textColor-DatePicker--warning": "rgb(127, 29, 29)",
         },
     });
     yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(255, 165, 0)");
@@ -226,9 +226,9 @@ const date_fns_1 = require("date-fns");
     // Valid state
     yield initTestBed(`<DatePicker testId="datePicker" validationStatus="valid" />`, {
         testThemeVars: {
-            "borderColor-DatePicker-success": "rgb(0, 128, 0)",
-            "backgroundColor-DatePicker-success": "rgb(220, 255, 220)",
-            "textColor-DatePicker-success": "rgb(0, 100, 0)",
+            "borderColor-DatePicker--success": "rgb(0, 128, 0)",
+            "backgroundColor-DatePicker--success": "rgb(220, 255, 220)",
+            "textColor-DatePicker--success": "rgb(0, 100, 0)",
         },
     });
     yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(0, 128, 0)");

package/dist/scripts/src/components/NumberBox/NumberBox.spec.js

@@ -517,25 +517,25 @@ fixtures_1.test.describe("Input Adornments", () => {
 fixtures_1.test.describe("Theme Variables", () => {
     (0, fixtures_1.test)("backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "backgroundColor-NumberBox-default": "rgb(255, 0, 0)" },
+            testThemeVars: { "backgroundColor-NumberBox--default": "rgb(255, 0, 0)" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 0, 0)");
     }));
     (0, fixtures_1.test)("borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderColor-NumberBox-default": "rgb(0, 255, 0)" },
+            testThemeVars: { "borderColor-NumberBox--default": "rgb(0, 255, 0)" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 255, 0)");
     }));
     (0, fixtures_1.test)("textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "textColor-NumberBox-default": "rgb(0, 0, 255)" },
+            testThemeVars: { "textColor-NumberBox--default": "rgb(0, 0, 255)" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(0, 0, 255)");
     }));
     (0, fixtures_1.test)("focus borderColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderColor-NumberBox-default--focus": "rgb(255, 255, 0)" },
+            testThemeVars: { "borderColor-NumberBox--default--focus": "rgb(255, 255, 0)" },
         });
         yield page.getByRole("textbox").focus();
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 255, 0)");
@@ -548,7 +548,7 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
     (0, fixtures_1.test)("borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderRadius-NumberBox-default": "10px" },
+            testThemeVars: { "borderRadius-NumberBox--default": "10px" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-radius", "10px");
     }));
@@ -561,59 +561,59 @@ fixtures_1.test.describe("Theme Variables", () => {
     // Additional variant mixin theme variable tests
     (0, fixtures_1.test)("borderWidth applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderWidth-NumberBox-default": "3px" },
+            testThemeVars: { "borderWidth-NumberBox--default": "3px" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-width", "3px");
     }));
     (0, fixtures_1.test)("borderStyle applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderStyle-NumberBox-default": "dashed" },
+            testThemeVars: { "borderStyle-NumberBox--default": "dashed" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-style", "dashed");
     }));
     (0, fixtures_1.test)("fontSize applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "fontSize-NumberBox-default": "18px" },
+            testThemeVars: { "fontSize-NumberBox--default": "18px" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("font-size", "18px");
     }));
     (0, fixtures_1.test)("boxShadow applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "boxShadow-NumberBox-default": "rgba(0, 0, 0, 0.2) 0px 2px 4px 0px" },
+            testThemeVars: { "boxShadow-NumberBox--default": "rgba(0, 0, 0, 0.2) 0px 2px 4px 0px" },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.2) 0px 2px 4px 0px");
     }));
     (0, fixtures_1.test)("hover borderColor applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "borderColor-NumberBox-default--hover": "rgb(255, 100, 100)" },
+            testThemeVars: { "borderColor-NumberBox--default--hover": "rgb(255, 100, 100)" },
         });
         yield page.getByTestId("input").hover();
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 100, 100)");
     }));
     (0, fixtures_1.test)("hover backgroundColor applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "backgroundColor-NumberBox-default--hover": "rgb(240, 240, 240)" },
+            testThemeVars: { "backgroundColor-NumberBox--default--hover": "rgb(240, 240, 240)" },
         });
         yield page.getByTestId("input").hover();
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(240, 240, 240)");
     }));
     (0, fixtures_1.test)("hover boxShadow applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "boxShadow-NumberBox-default--hover": "rgba(0, 0, 0, 0.3) 0px 4px 8px 0px" },
+            testThemeVars: { "boxShadow-NumberBox--default--hover": "rgba(0, 0, 0, 0.3) 0px 4px 8px 0px" },
         });
         yield page.getByTestId("input").hover();
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.3) 0px 4px 8px 0px");
     }));
     (0, fixtures_1.test)("hover textColor applies on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "textColor-NumberBox-default--hover": "rgb(50, 50, 50)" },
+            testThemeVars: { "textColor-NumberBox--default--hover": "rgb(50, 50, 50)" },
         });
         yield page.getByTestId("input").hover();
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(50, 50, 50)");
     }));
     (0, fixtures_1.test)("focus backgroundColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "backgroundColor-NumberBox-default--focus": "rgb(250, 250, 250)" },
+            testThemeVars: { "backgroundColor-NumberBox--default--focus": "rgb(250, 250, 250)" },
         });
         yield page.getByRole("textbox").focus();
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(250, 250, 250)");
@@ -621,7 +621,7 @@ fixtures_1.test.describe("Theme Variables", () => {
     (0, fixtures_1.test)("focus boxShadow applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
             testThemeVars: {
-                "boxShadow-NumberBox-default--focus": "rgba(0, 100, 255, 0.4) 0px 0px 0px 3px",
+                "boxShadow-NumberBox--default--focus": "rgba(0, 100, 255, 0.4) 0px 0px 0px 3px",
             },
         });
         yield page.getByRole("textbox").focus();
@@ -629,7 +629,7 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
     (0, fixtures_1.test)("focus textColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
-            testThemeVars: { "textColor-NumberBox-default--focus": "rgb(20, 20, 20)" },
+            testThemeVars: { "textColor-NumberBox--default--focus": "rgb(20, 20, 20)" },
         });
         yield page.getByRole("textbox").focus();
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(20, 20, 20)");
@@ -637,10 +637,10 @@ fixtures_1.test.describe("Theme Variables", () => {
     (0, fixtures_1.test)("focus outline properties apply on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" />`, {
             testThemeVars: {
-                "outlineWidth-NumberBox-default--focus": "2px",
-                "outlineColor-NumberBox-default--focus": "rgb(0, 123, 255)",
-                "outlineStyle-NumberBox-default--focus": "solid",
-                "outlineOffset-NumberBox-default--focus": "2px",
+                "outlineWidth-NumberBox--default--focus": "2px",
+                "outlineColor-NumberBox--default--focus": "rgb(0, 123, 255)",
+                "outlineStyle-NumberBox--default--focus": "solid",
+                "outlineOffset-NumberBox--default--focus": "2px",
             },
         });
         yield page.getByRole("textbox").focus();
@@ -651,7 +651,7 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
     (0, fixtures_1.test)("placeholder textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" placeholder="Enter number" />`, {
-            testThemeVars: { "textColor-placeholder-NumberBox-default": "rgb(150, 150, 150)" },
+            testThemeVars: { "textColor-placeholder-NumberBox--default": "rgb(150, 150, 150)" },
         });
         const input = page.getByRole("textbox");
         const placeholderColor = yield input.evaluate((el) => {
@@ -661,7 +661,7 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
     (0, fixtures_1.test)("placeholder fontSize applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" placeholder="Enter number" />`, {
-            testThemeVars: { "fontSize-placeholder-NumberBox-default": "14px" },
+            testThemeVars: { "fontSize-placeholder-NumberBox--default": "14px" },
         });
         const input = page.getByRole("textbox");
         const placeholderFontSize = yield input.evaluate((el) => {
@@ -687,82 +687,107 @@ fixtures_1.test.describe("Theme Variables", () => {
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(200, 200, 200)");
     }));
-    // Error variant theme variables
-    (0, fixtures_1.test)("error variant borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
-            testThemeVars: { "borderRadius-NumberBox-error": "8px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-radius", "8px");
-    }));
-    (0, fixtures_1.test)("error variant fontSize applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
-            testThemeVars: { "fontSize-NumberBox-error": "16px" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("font-size", "16px");
-    }));
-    (0, fixtures_1.test)("error variant backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
-            testThemeVars: { "backgroundColor-NumberBox-error": "rgb(255, 240, 240)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 240, 240)");
-    }));
-    (0, fixtures_1.test)("warning variant textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="warning" />`, {
-            testThemeVars: { "textColor-NumberBox-warning": "rgb(133, 100, 4)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(133, 100, 4)");
-    }));
-    (0, fixtures_1.test)("success variant backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="valid" />`, {
-            testThemeVars: { "backgroundColor-NumberBox-success": "rgb(240, 255, 240)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(240, 255, 240)");
-    }));
     (0, fixtures_1.test)("input text adornment colors apply correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" startText="$" endText="€" />`, {
-            testThemeVars: { "color-adornment-NumberBox-default": "rgb(0, 123, 255)" },
+            testThemeVars: { "color-adornment-NumberBox--default": "rgb(0, 123, 255)" },
         });
         yield (0, fixtures_1.expect)(page.getByText("$")).toHaveCSS("color", "rgb(0, 123, 255)");
         yield (0, fixtures_1.expect)(page.getByText("€")).toHaveCSS("color", "rgb(0, 123, 255)");
     }));
     (0, fixtures_1.test)("input icon adornment colors apply correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<NumberBox testId="input" startIcon="search" endIcon="search" />`, {
-            testThemeVars: { "color-adornment-NumberBox-default": "rgb(0, 123, 255)" },
+            testThemeVars: { "color-adornment-NumberBox--default": "rgb(0, 123, 255)" },
         });
         yield (0, fixtures_1.expect)(page.getByRole("img").first()).toHaveCSS("color", "rgb(0, 123, 255)");
         yield (0, fixtures_1.expect)(page.getByRole("img").nth(1)).toHaveCSS("color", "rgb(0, 123, 255)");
     }));
-});
-// =============================================================================
-// VALIDATION STATUS TESTS
-// =============================================================================
-fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)("error borderColor applies with error validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="error" />`, {
-            testThemeVars: { "borderColor-NumberBox-error": "rgb(255, 0, 0)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("warning borderColor applies with warning validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="warning" />`, {
-            testThemeVars: { "borderColor-NumberBox-warning": "rgb(255, 165, 0)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 165, 0)");
-    }));
-    (0, fixtures_1.test)("success borderColor applies with valid validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="valid" />`, {
-            testThemeVars: { "borderColor-NumberBox-success": "rgb(0, 128, 0)" },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 128, 0)");
-    }));
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<NumberBox testId="input" validationStatus="invalid-status" />`, {
-            testThemeVars: {
-                "borderColor-NumberBox": "rgb(0, 0, 0)",
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 0, 0)");
-    }));
+    [
+        { value: "--default", prop: "" },
+        { value: "--warning", prop: 'validationStatus="warning"' },
+        { value: "--error", prop: 'validationStatus="error"' },
+        { value: "--success", prop: 'validationStatus="valid"' },
+    ].forEach((variant) => {
+        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-NumberBox${variant.value}`]: "12px" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-radius", "12px");
+        }));
+        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-NumberBox${variant.value}`]: "rgb(255, 0, 0)" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-NumberBox${variant.value}`]: "1px" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-width", "1px");
+        }));
+        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-NumberBox${variant.value}`]: "dashed" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
+        }));
+        (0, fixtures_1.test)(`applies correct fontSize ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`fontSize-NumberBox${variant.value}`]: "14px" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("font-size", "14px");
+        }));
+        (0, fixtures_1.test)(`applies correct backgroundColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-NumberBox${variant.value}`]: "rgb(240, 240, 240)" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
+        }));
+        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-NumberBox${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
+        }));
+        (0, fixtures_1.test)(`applies correct textColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-NumberBox${variant.value}`]: "rgb(0, 0, 0)" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-NumberBox${variant.value}--hover`]: "rgb(0, 0, 0)" },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct backgroundColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-NumberBox${variant.value}--hover`]: "rgb(0, 0, 0)" },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(0, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-NumberBox${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
+        }));
+        (0, fixtures_1.test)(`applies correct textColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<NumberBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-NumberBox${variant.value}--hover`]: "rgb(0, 0, 0)" },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
+        }));
+    });
 });
 // =============================================================================
 // OTHER EDGE CASE TESTS

package/dist/scripts/src/components/RadioGroup/RadioGroup.js

@@ -42,13 +42,13 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
         [`gap-${RGOption}`]: "$space-1_5",
         [`borderWidth-${RGOption}`]: "1px",
         [`borderWidth-${RGOption}-validation`]: `2px`,
-        [`borderColor-${RGOption}-default`]: "$color-surface-500",
+        [`borderColor-${RGOption}--default`]: "$color-surface-500",
         [`borderColor-checked-${RGOption}`]: "$color-primary-500",
-        [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
-        [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
-        [`borderColor-${RGOption}-error`]: `$borderColor-Input-default--error`,
-        [`borderColor-${RGOption}-warning`]: `$borderColor-Input-default--warning`,
-        [`borderColor-${RGOption}-success`]: `$borderColor-Input-default--success`,
+        [`borderColor-${RGOption}--default--hover`]: "$color-surface-700",
+        [`borderColor-${RGOption}--default--active`]: "$color-primary-500",
+        [`borderColor-${RGOption}--error`]: `$borderColor-Input--error`,
+        [`borderColor-${RGOption}--warning`]: `$borderColor-Input--warning`,
+        [`borderColor-${RGOption}--success`]: `$borderColor-Input--success`,
         [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
         [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
         [`backgroundColor-checked-${RGOption}--disabled`]: `$textColor--disabled`,

package/dist/scripts/src/components/RadioGroup/RadioGroup.spec.js

@@ -314,39 +314,39 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
     }));
 });
-(0, fixtures_1.test)("validationStatus 'none' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("correct borderColor applied on validationStatus 'default'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
-    <RadioGroup validationStatus="none" initialValue="1">
+    <RadioGroup initialValue="1">
       <Option value="1">Option 1</Option>
       <Option value="2">Option 2</Option>
-    </RadioGroup>
-
-  `, {
+    </RadioGroup>`, {
         testThemeVars: {
+            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
             "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
         },
     });
     const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(80, 80, 80)");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
 }));
-(0, fixtures_1.test)("validationStatus 'error' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("correct borderColor applied on validationStatus 'error'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
-    <Theme
-      borderColor-RadioGroupOption-error="rgb(255, 32, 0)"
-      borderColor-checked-RadioGroupOption="rgb(80, 80, 80)"
-    >
-      <RadioGroup validationStatus="error" initialValue="1">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    </Theme>
-  `);
+    <RadioGroup validationStatus="error" initialValue="1">
+      <Option value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `, {
+        testThemeVars: {
+            "borderColor-RadioGroupOption--error": "rgb(255, 32, 0)",
+            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
+            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
+        },
+    });
     const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(255, 32, 0)");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(255, 32, 0)");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
 }));
-(0, fixtures_1.test)("validationStatus 'warning' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("correct borderColor applied on validationStatus 'warning'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
     <RadioGroup validationStatus="warning" initialValue="1">
       <Option value="1">Option 1</Option>
@@ -354,15 +354,16 @@ fixtures_1.test.describe("Basic Functionality", () => {
     </RadioGroup>
   `, {
         testThemeVars: {
-            "borderColor-RadioGroupOption-warning": "rgb(255, 180, 0)",
+            "borderColor-RadioGroupOption--warning": "rgb(255, 180, 0)",
+            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
             "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
         },
     });
     const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(255, 180, 0)");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(255, 180, 0)");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
 }));
-(0, fixtures_1.test)("validationStatus 'valid' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("correct borderColor applied on validationStatus 'valid'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
     <RadioGroup validationStatus="valid" initialValue="1">
       <Option value="1">Option 1</Option>
@@ -370,13 +371,14 @@ fixtures_1.test.describe("Basic Functionality", () => {
     </RadioGroup>
   `, {
         testThemeVars: {
-            "borderColor-RadioGroupOption-success": "rgb(0, 180, 0)",
+            "borderColor-RadioGroupOption--success": "rgb(0, 180, 0)",
+            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
             "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
         },
     });
     const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(0, 180, 0)");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(0, 180, 0)");
 }));
 (0, fixtures_1.test)("label is rendered if provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`

package/dist/scripts/src/components/RadioGroup/RadioItemNative.js

@@ -57,6 +57,6 @@ const UnwrappedRadioItem = ({ id, checked = exports.defaultProps.checked, value
     const onInputChange = (0, react_1.useCallback)((_) => {
         onDidChange(value);
     }, [onDidChange, value]);
-    return ((0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), id: id, value: (0, OptionNative_1.convertOptionValue)(value), checked: checked, disabled: disabled, onClick: onInputChange, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }));
+    return ((0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles, { [RadioGroup_module_scss_1.default.checked]: checked }), id: id, value: (0, OptionNative_1.convertOptionValue)(value), checked: checked, disabled: disabled, onClick: onInputChange, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }));
 };
 exports.UnwrappedRadioItem = UnwrappedRadioItem;

package/dist/scripts/src/components/Select/Select.js

@@ -114,7 +114,7 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
     const searchable = extractValue.asOptionalBoolean(node.props.searchable);
     const isControlled = node.props.value !== undefined;
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, className: className, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: isControlled ? undefined : updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), required: extractValue.asOptionalBoolean(node.props.required), valueRenderer: node.props.valueTemplate
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, className: className, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: isControlled ? undefined : updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: isControlled ? extractValue(node.props.value) : state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), required: extractValue.asOptionalBoolean(node.props.required), valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {
                         $itemContext: { removeItem },

package/dist/scripts/src/components/Select/Select.spec.js

@@ -669,3 +669,95 @@ fixtures_1.test.describe("Z-Index and Modal Layering", () => {
         yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Account" })).toBeVisible();
     }));
 });
+// =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    [
+        { value: "--default", prop: "" },
+        { value: "--warning", prop: 'validationStatus="warning"' },
+        { value: "--error", prop: 'validationStatus="error"' },
+        { value: "--success", prop: 'validationStatus="valid"' },
+    ].forEach((variant) => {
+        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-Select${variant.value}`]: "12px" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-radius", "12px");
+        }));
+        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-Select${variant.value}`]: "rgb(255, 0, 0)" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-Select${variant.value}`]: "1px" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-width", "1px");
+        }));
+        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-Select${variant.value}`]: "dashed" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
+        }));
+        (0, fixtures_1.test)(`applies correct fontSize ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`fontSize-Select${variant.value}`]: "14px" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("font-size", "14px");
+        }));
+        (0, fixtures_1.test)(`applies correct backgroundColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-Select${variant.value}`]: "rgb(240, 240, 240)" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
+        }));
+        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-Select${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
+        }));
+        (0, fixtures_1.test)(`applies correct textColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-Select${variant.value}`]: "rgb(0, 0, 0)" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-Select${variant.value}--hover`]: "rgb(0, 0, 0)" },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct backgroundColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-Select${variant.value}--hover`]: "rgb(0, 0, 0)" },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(0, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-Select${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
+        }));
+        (0, fixtures_1.test)(`applies correct textColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-Select${variant.value}--hover`]: "rgb(0, 0, 0)" },
+            });
+            yield page.getByTestId("test").hover();
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
+        }));
+    });
+});