xmlui 0.11.2 → 0.11.4

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

@@ -384,8 +384,8 @@ fixtures_1.test.describe("Visual States", () => {
     (0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<TextArea testId="input" />`, {
             testThemeVars: {
-                "backgroundColor-TextArea-default": "rgb(255, 0, 0)",
-                "textColor-TextArea-default": "rgb(0, 255, 0)",
+                "backgroundColor-TextArea--default": "rgb(255, 0, 0)",
+                "textColor-TextArea--default": "rgb(0, 255, 0)",
             },
         });
         yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 0, 0)");
@@ -792,3 +792,95 @@ fixtures_1.test.describe("Regression", () => {
     const { width } = yield input.boundingBox();
     (0, fixtures_1.expect)(width).toBe(200);
 }));
+// =============================================================================
+// 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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`fontSize-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-TextArea${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(`<TextArea testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-TextArea${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)");
+        }));
+    });
+});

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

@@ -98,9 +98,11 @@ exports.TextBoxMd = (0, metadata_helpers_1.createMetadata)({
         "borderStyle-Input": "solid",
         "borderColor-Input--disabled": "$borderColor--disabled",
         "textColor-Input--disabled": "$textColor--disabled",
-        "borderColor-Input-error": "$borderColor-Input-default--error",
-        "borderColor-Input-warning": "$borderColor-Input-default--warning",
-        "borderColor-Input-success": "$borderColor-Input-default--success",
+        "borderColor-Input--default": "$borderColor-Input-default",
+        "borderColor-Input--default--hover": "$borderColor-Input-default--hover",
+        "borderColor-Input--error": "$borderColor-Input-default--error",
+        "borderColor-Input--warning": "$borderColor-Input-default--warning",
+        "borderColor-Input--success": "$borderColor-Input-default--success",
         "textColor-placeholder-Input": "$textColor-subtitle",
         "color-adornment-Input": "$textColor-subtitle",
         "outlineColor-Input--focus": "$outlineColor--focus",

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

@@ -513,33 +513,6 @@ fixtures_1.test.describe("Theme Vars", () => {
         const driver = yield createTextBoxDriver("input");
         yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(240, 240, 240)");
     }));
-    (0, fixtures_1.test)("error borderColor applies with error validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-error": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).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, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).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, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-success": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
-    }));
     (0, fixtures_1.test)("borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" />`, {
             testThemeVars: {
@@ -563,40 +536,13 @@ fixtures_1.test.describe("Theme Vars", () => {
 // VALIDATION STATUS TESTS
 // =============================================================================
 fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)("validationStatus=error correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-error": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 165, 0)");
-    }));
-    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
-            testThemeVars: {
-                "borderColor-TextBox-success": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createTextBoxDriver("input");
-        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
-    }));
     (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        yield initTestBed(`<TextBox testId="input" validationStatus="invalid-status" />`, {
+        yield initTestBed(`<TextBox testId="input" validationStatus="invalid" />`, {
             testThemeVars: {
-                "borderColor-TextBox": "rgb(0, 0, 0)",
-                "borderColor-TextBox-error": "rgb(255, 0, 0)",
-                "borderColor-TextBox-warning": "rgb(255, 165, 0)",
-                "borderColor-TextBox-success": "rgb(0, 255, 0)",
+                "borderColor-TextBox--default": "rgb(0, 0, 0)",
+                "borderColor-TextBox--error": "rgb(255, 0, 0)",
+                "borderColor-TextBox--warning": "rgb(255, 165, 0)",
+                "borderColor-TextBox--success": "rgb(0, 255, 0)",
             },
         });
         const driver = yield createTextBoxDriver("input");
@@ -605,6 +551,93 @@ fixtures_1.test.describe("Validation", () => {
         yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("border-color", "rgb(0, 255, 0)");
         yield (0, fixtures_1.expect)(driver.component).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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`fontSize-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-TextBox${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(`<TextBox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-TextBox${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)");
+        }));
+    });
 });
 // =============================================================================
 // EDGE CASE TESTS

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

@@ -365,28 +365,6 @@ fixtures_1.test.describe("Basic Functionality", () => {
             yield (0, fixtures_1.expect)(driver.hourInput).not.toHaveAttribute("required");
         }));
     });
-    fixtures_1.test.describe("validationStatus property", () => {
-        (0, fixtures_1.test)("displays valid status", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver }) {
-            yield initTestBed(`<TimeInput testId="timeInput" validationStatus="valid" initialValue="14:30" />`);
-            const driver = yield createTimeInputDriver("timeInput");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-        (0, fixtures_1.test)("displays warning status", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver }) {
-            yield initTestBed(`<TimeInput testId="timeInput" validationStatus="warning" initialValue="14:30" />`);
-            const driver = yield createTimeInputDriver("timeInput");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-        (0, fixtures_1.test)("displays error status", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver }) {
-            yield initTestBed(`<TimeInput testId="timeInput" validationStatus="error" initialValue="14:30" />`);
-            const driver = yield createTimeInputDriver("timeInput");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles null validationStatus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver }) {
-            yield initTestBed(`<TimeInput testId="timeInput" validationStatus="{null}" />`);
-            const driver = yield createTimeInputDriver("timeInput");
-            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        }));
-    });
     fixtures_1.test.describe("minTime and maxTime properties", () => {
         (0, fixtures_1.test)("accepts minTime constraint", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver }) {
             yield initTestBed(`<TimeInput testId="timeInput" minTime="10:00" initialValue="14:30" />`);
@@ -893,25 +871,123 @@ fixtures_1.test.describe("Accessibility", () => {
 fixtures_1.test.describe("Theme Variables", () => {
     (0, fixtures_1.test)("applies Input borderRadius theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver, }) {
         yield initTestBed(`<TimeInput testId="time-input" />`, {
-            testThemeVars: { "borderRadius-TimeInput-default": "10px" },
+            testThemeVars: { "borderRadius-TimeInput--default": "10px" },
         });
         const driver = yield createTimeInputDriver("time-input");
         yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", "10px");
     }));
     (0, fixtures_1.test)("applies Input borderColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver, }) {
         yield initTestBed(`<TimeInput testId="time-input" />`, {
-            testThemeVars: { "borderColor-TimeInput-default": "rgb(255, 0, 0)" },
+            testThemeVars: { "borderColor-TimeInput--default": "rgb(255, 0, 0)" },
         });
         const driver = yield createTimeInputDriver("time-input");
         yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
     }));
     (0, fixtures_1.test)("applies Input textColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver }) {
         yield initTestBed(`<TimeInput testId="time-input" />`, {
-            testThemeVars: { "textColor-TimeInput-default": "rgb(0, 0, 255)" },
+            testThemeVars: { "textColor-TimeInput--default": "rgb(0, 0, 255)" },
         });
         const driver = yield createTimeInputDriver("time-input");
         yield (0, fixtures_1.expect)(driver.component).toHaveCSS("color", "rgb(0, 0, 255)");
     }));
+    (0, fixtures_1.test)("handles invalid validationStatus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<TimeInput testId="timeInput" validationStatus="invalid" />`, {
+            testThemeVars: {
+                "borderColor-TimeInput--default": "rgb(0, 0, 0)",
+                "borderColor-TimeInput--error": "rgb(255, 0, 0)",
+                "borderColor-TimeInput--warning": "rgb(255, 165, 0)",
+                "borderColor-TimeInput--success": "rgb(0, 255, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("timeInput")).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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`fontSize-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-TimeInput${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(`<TimeInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-TimeInput${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-core/behaviors/CoreBehaviors.js

@@ -9,7 +9,6 @@ const TooltipNative_1 = require("../../components/Tooltip/TooltipNative");
 const StyleContext_1 = require("../theming/StyleContext");
 const layout_resolver_1 = require("../theming/layout-resolver");
 const parse_layout_props_1 = require("../theming/parse-layout-props");
-const abstractions_1 = require("../../components/abstractions");
 const BadgeNative_1 = require("../../components/Badge/BadgeNative");
 /**
  * Behavior for applying tooltips to components.
@@ -107,9 +106,11 @@ exports.variantBehavior = {
         }
         // Special handling for Button component
         if (node.type === "Button") {
-            // For Button, only attach if variant is NOT one of the predefined values
-            const variantStr = typeof variant === "string" ? variant : String(variant);
-            return !abstractions_1.buttonVariantValues.includes(variantStr);
+            // *** Temporarily disable for Button until we resolve conflicts with existing variants ***
+            return false;
+            // // For Button, only attach if variant is NOT one of the predefined values
+            // const variantStr = typeof variant === "string" ? variant : String(variant);
+            // return !buttonVariantValues.includes(variantStr as any);
         }
         // Special handling for Badge component
         if (node.type === "Badge") {

package/dist/scripts/src/language-server/services/common/syntax-node-utilities.js

@@ -6,30 +6,33 @@ exports.insideClosingTag = insideClosingTag;
 exports.visitAncestorsInChain = visitAncestorsInChain;
 exports.getFirstNodeFromAncestorChain = getFirstNodeFromAncestorChain;
 exports.getAllRelevantNodesFromAncestorChain = getAllRelevantNodesFromAncestorChain;
-exports.getTriviaNodes = getTriviaNodes;
 const xmlui_parser_1 = require("../../../parsers/xmlui-parser");
 function findTagNameNodeInStack(nodeStack) {
-    const elementNode = nodeStack.findLast(n => n.kind === xmlui_parser_1.SyntaxKind.ElementNode);
+    const elementNode = nodeStack.findLast((n) => n.kind === xmlui_parser_1.SyntaxKind.ElementNode);
     if (!elementNode) {
         return null;
     }
-    const tagNameNode = elementNode.children.find(n => n.kind === xmlui_parser_1.SyntaxKind.TagNameNode);
+    const tagNameNode = elementNode.children.find((n) => n.kind === xmlui_parser_1.SyntaxKind.TagNameNode);
     return tagNameNode;
 }
 function compNameForTagNameNode(tagNameNode, getText) {
     const colonIdx = tagNameNode.children.findIndex((n) => n.kind === xmlui_parser_1.SyntaxKind.Colon);
-    const hasNs = colonIdx === -1 ? false : tagNameNode.children.slice(0, colonIdx).findIndex((n) => n.kind === xmlui_parser_1.SyntaxKind.Identifier) !== -1;
+    const hasNs = colonIdx === -1
+        ? false
+        : tagNameNode
+            .children.slice(0, colonIdx)
+            .findIndex((n) => n.kind === xmlui_parser_1.SyntaxKind.Identifier) !== -1;
     if (hasNs) {
         return null;
     }
-    const nameNode = tagNameNode.children.findLast(c => c.kind === xmlui_parser_1.SyntaxKind.Identifier);
+    const nameNode = tagNameNode.children.findLast((c) => c.kind === xmlui_parser_1.SyntaxKind.Identifier);
     return getText(nameNode);
 }
 /**
-*
-* @param pathToElementNode nodes from the inner most node to the closest ElementNode
-* @returns
-*/
+ *
+ * @param pathToElementNode nodes from the inner most node to the closest ElementNode
+ * @returns
+ */
 function insideClosingTag(pathToElementNode) {
     if (pathToElementNode === null) {
         return false;
@@ -52,11 +55,11 @@ function insideClosingTag(pathToElementNode) {
     return false;
 }
 /**
-* Visits ancestors in the chain from the innermost to the outermost node.
-* @param chain The chain of nodes to visit.
-* @param predicate A function that takes a node and returns a boolean.
-* @returns An array of nodes from the innermost to the node that satisfies the predicate, or null if no such node is found.
-*/
+ * Visits ancestors in the chain from the innermost to the outermost node.
+ * @param chain The chain of nodes to visit.
+ * @param predicate A function that takes a node and returns a boolean.
+ * @returns An array of nodes from the innermost to the node that satisfies the predicate, or null if no such node is found.
+ */
 function visitAncestorsInChain(chain, predicate) {
     let currentIdx = -1;
     let current = chain.at(currentIdx);
@@ -101,9 +104,9 @@ function getAllRelevantNodesFromAncestorChain(chain, kind) {
     return relevantNodes;
 }
 /**
-*
-* @param node an ElementNode
-*/
+ *
+ * @param node an ElementNode
+ */
 function isPairedNode(node) {
     for (const c of node.children) {
         if (c.kind === xmlui_parser_1.SyntaxKind.CloseNodeStart) {
@@ -116,20 +119,9 @@ function isPairedNode(node) {
     return true;
 }
 /**
-*
-* @param node an ElementNode
-*/
+ *
+ * @param node an ElementNode
+ */
 function isSelfClosingNode(node) {
     return !isPairedNode(node);
 }
-function getTriviaNodes(node) {
-    if (node.pos === node.start) {
-        return [];
-    }
-    else if (node.triviaBefore) {
-        return node.triviaBefore;
-    }
-    else {
-        return getTriviaNodes(node.children[0]);
-    }
-}