xmlui 0.11.3 → 0.11.4

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.11.3",
+    "version": "0.11.4",
     "sideEffects": false,
     "type": "module",
     "scripts": {

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

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 // =============================================================================
 // BASIC FUNCTIONALITY TESTS
@@ -431,3 +432,115 @@ const fixtures_1 = require("../../testing/fixtures");
     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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`fontSize-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-AutoComplete${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(`<AutoComplete testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-AutoComplete${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)");
+        }));
+    });
+    (0, fixtures_1.test)("applies correct textColor to placeholder", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<AutoComplete testId="test" placeholder="Search..." />`, {
+            testThemeVars: { "textColor-placeholder-AutoComplete": "rgb(0, 0, 0)" },
+        });
+        const placeholderColor = yield page.evaluate(() => {
+            const input = document.querySelector("input");
+            return window.getComputedStyle(input, "::placeholder").color;
+        });
+        (0, fixtures_1.expect)(placeholderColor).toBe("rgb(0, 0, 0)");
+    }));
+    fixtures_1.test.fixme("applies correct fontSize to placeholder", component_test_helpers_1.SKIP_REASON.UNSURE("Does AutoComplete applies the correct css for the placeholder?"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<AutoComplete testId="test" placeholder="Search..." />`, {
+            testThemeVars: { "fontSize-placeholder-AutoComplete--default": "20px" },
+        });
+        const placeholderFontSize = yield page.evaluate(() => {
+            const input = document.querySelector("input");
+            return window.getComputedStyle(input, "::placeholder").fontSize;
+        });
+        (0, fixtures_1.expect)(placeholderFontSize).toBe("20px");
+    }));
+});

package/dist/scripts/src/components/Charts/LabelList/LabelList.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.labelListComponentRenderer = exports.LabelListMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LabelListNative_module_scss_1 = __importDefault(require("./LabelListNative.module.scss"));
+const LabelList_module_scss_1 = __importDefault(require("./LabelList.module.scss"));
 const LabelListNative_1 = require("./LabelListNative");
 const abstractions_1 = require("../utils/abstractions");
 const themeVars_1 = require("../../../components-core/theming/themeVars");
@@ -30,7 +30,7 @@ exports.LabelListMd = (0, metadata_helpers_1.createMetadata)({
             defaultValue: LabelListNative_1.defaultProps.position,
         },
     },
-    themeVars: (0, themeVars_1.parseScssVar)(LabelListNative_module_scss_1.default.themeVars),
+    themeVars: (0, themeVars_1.parseScssVar)(LabelList_module_scss_1.default.themeVars),
     defaultThemeVars: {
         "textColor-LabelList": "$textColor-primary",
     },

package/dist/scripts/src/components/Charts/LabelList/LabelListNative.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabelList = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LabelListNative_module_scss_1 = __importDefault(require("./LabelListNative.module.scss"));
+const LabelList_module_scss_1 = __importDefault(require("./LabelList.module.scss"));
 const react_1 = require("react");
 const recharts_1 = require("recharts");
 const ChartProvider_1 = require("../utils/ChartProvider");
@@ -16,7 +16,7 @@ exports.defaultProps = {
 const LabelList = ({ position = exports.defaultProps.position, nameKey: key, style, className }) => {
     const { nameKey } = (0, ChartProvider_1.useChart)();
     const { setLabelList } = (0, ChartProvider_1.useLabelList)();
-    const content = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: position, className: (0, classnames_1.default)(LabelListNative_module_scss_1.default.labelList, className), dataKey: key || nameKey, stroke: "none", style: style }, "labelList")), [key, nameKey, position, style, className]);
+    const content = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: position, className: (0, classnames_1.default)(LabelList_module_scss_1.default.labelList, className), dataKey: key || nameKey, stroke: "none", style: style }, "labelList")), [key, nameKey, position, style, className]);
     (0, react_1.useEffect)(() => {
         setLabelList(content);
     }, [content, setLabelList]);

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

@@ -61,12 +61,12 @@ exports.CheckboxMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
-        [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
-        [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
-        [`borderColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
-        [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
-        [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
+        [`borderColor-checked-${COMP}--error`]: `$borderColor-${COMP}--error`,
+        [`backgroundColor-checked-${COMP}--error`]: `$borderColor-${COMP}--error`,
+        [`borderColor-checked-${COMP}--warning`]: `$borderColor-${COMP}--warning`,
+        [`backgroundColor-checked-${COMP}--warning`]: `$borderColor-${COMP}--warning`,
+        [`borderColor-checked-${COMP}--success`]: `$borderColor-${COMP}--success`,
+        [`backgroundColor-checked-${COMP}--success`]: `$borderColor-${COMP}--success`,
         [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
         [`borderColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-checked-${COMP}`]: "$color-primary-500",

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

@@ -811,60 +811,6 @@ fixtures_1.test.describe("Theme Vars", () => {
         });
         yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
     }));
-    (0, fixtures_1.test)("valid borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="valid" />`, {
-            testThemeVars: {
-                "borderColor-Checkbox-success": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("valid backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="valid" />`, {
-            testThemeVars: {
-                "backgroundColor-Checkbox-success": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("warning borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="warning" />`, {
-            testThemeVars: {
-                "borderColor-Checkbox-warning": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("warning backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="warning" />`, {
-            testThemeVars: {
-                "backgroundColor-Checkbox-warning": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("error borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="error" />`, {
-            testThemeVars: {
-                "borderColor-Checkbox-error": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("error backgroundColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="error" />`, {
-            testThemeVars: {
-                "backgroundColor-Checkbox-error": EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-    }));
     (0, fixtures_1.test)("borderRadius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const CUSTOM_BORDER_RADIUS = "10px";
         yield initTestBed(`<Checkbox />`, {
@@ -919,51 +865,36 @@ 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, page }) {
-        const validationLevel = "error";
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="${validationLevel}" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-                [`borderColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)(`validationStatus=warning correctly displayed`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const validationLevel = "warning";
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="${validationLevel}" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-                [`borderColor-Checkbox-${validationLevel}`]: EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)(`validationStatus=valid correctly displayed`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="valid" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-success`]: EXPECTED_COLOR,
-                [`borderColor-Checkbox-success`]: EXPECTED_COLOR,
-            },
-        });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("background-color", EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).toHaveCSS("border-color", EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const validationLevel = "invalid";
-        const NOT_EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`<Checkbox validationStatus="${validationLevel}" />`, {
-            testThemeVars: {
-                [`backgroundColor-Checkbox-${validationLevel}`]: NOT_EXPECTED_COLOR,
-                [`borderColor-Checkbox-${validationLevel}`]: NOT_EXPECTED_COLOR,
-            },
+    [
+        { 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(`<Checkbox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-Checkbox${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(`<Checkbox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-Checkbox${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 backgroundColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Checkbox testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-Checkbox${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 borderColor on hover`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Checkbox testId="test" />`, {
+            testThemeVars: { [`borderColor-Checkbox--default--hover`]: "rgb(0, 0, 0)" },
         });
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toHaveCSS("background-color", NOT_EXPECTED_COLOR);
-        yield (0, fixtures_1.expect)(page.getByRole("checkbox")).not.toHaveCSS("border-color", NOT_EXPECTED_COLOR);
+        yield page.getByTestId("test").hover();
+        yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
     }));
 });

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

@@ -100,20 +100,63 @@ const fixtures_1 = require("../../testing/fixtures");
 // =============================================================================
 // VISUAL STATE TESTS
 // =============================================================================
-(0, fixtures_1.test)("component shows different validation states correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    // Error state
-    yield initTestBed(`<ColorPicker validationStatus="error" />`, {});
-    let colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveClass(/error/);
-    // Warning state
-    yield initTestBed(`<ColorPicker validationStatus="warning" />`, {});
-    colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveClass(/warning/);
-    // Valid state
-    yield initTestBed(`<ColorPicker validationStatus="valid" />`, {});
-    colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveClass(/valid/);
-}));
+fixtures_1.test.describe("Validation", () => {
+    [
+        { 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(`<ColorPicker testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-ColorPicker${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(`<ColorPicker testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-ColorPicker${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(`<ColorPicker testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-ColorPicker${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(`<ColorPicker testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-ColorPicker${variant.value}`]: "dashed" },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
+        }));
+        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-ColorPicker${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 borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-ColorPicker${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 boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-ColorPicker${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)("component applies backgroundColor-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
     yield initTestBed(`<ColorPicker />`, {
         testThemeVars: {

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

@@ -279,23 +279,94 @@ fixtures_1.test.describe("initialValue property", () => {
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("30");
     }));
 });
-fixtures_1.test.describe("validationStatus property", () => {
-    (0, fixtures_1.test)("applies valid status styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
-        yield initTestBed(`<DateInput testId="dateInput" validationStatus="valid" initialValue="05/25/2024" />`);
-        const driver = yield createDateInputDriver("dateInput");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        // Note: validation status may be applied via CSS classes rather than data attributes
-    }));
-    (0, fixtures_1.test)("applies warning status styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
-        yield initTestBed(`<DateInput testId="dateInput" validationStatus="warning" initialValue="05/25/2024" />`);
-        const driver = yield createDateInputDriver("dateInput");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("applies error status styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
-        yield initTestBed(`<DateInput testId="dateInput" validationStatus="error" initialValue="05/25/2024" />`);
-        const driver = yield createDateInputDriver("dateInput");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
+fixtures_1.test.describe("Validation", () => {
+    [
+        { 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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`fontSize-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`backgroundColor-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-DateInput${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(`<DateInput testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`textColor-DateInput${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)");
+        }));
+    });
 });
 fixtures_1.test.describe("autoFocus property", () => {
     (0, fixtures_1.test)("focuses component when autoFocus is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {

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)");