xmlui 0.11.2 → 0.11.4

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.11.2",
+    "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/BarChart/BarChartNative.js

@@ -119,7 +119,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
                     payloadArray.push({
                         label: dataKey,
                         value: originalPayload[dataKey],
-                        color: colorValues[index] || colorValues[0]
+                        color: colorValues[index] || colorValues[0],
                     });
                 }
             });
@@ -247,7 +247,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
     const customTooltipRenderer = (0, react_1.useCallback)((props) => {
         const tooltipContent = safeTooltipRenderer(props);
         return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => {
-                if (el && el !== tooltipElement) {
+                if (el) {
                     setTooltipElement(el);
                 }
             }, children: tooltipContent }));
@@ -260,7 +260,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             height: miniMode || hideX ? 0 : xAxisHeight,
             tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
             tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
-            domain: [0, (dataMax) => dataMax * 1.05],
+            domain: [0, (dataMax) => Math.ceil((dataMax * 1.05) / 10) * 10],
         }
         : {
             type: "category",
@@ -293,7 +293,13 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             tickCount: yTickCount,
             tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
             width: miniMode || hideY ? 0 : yAxisWidth,
-            domain: [0, (dataMax) => dataMax * 1.1],
+            domain: [
+                0,
+                (dataMax) => {
+                    const roundedMax = Math.ceil((dataMax * 1.05) / 10) * 10;
+                    return roundedMax;
+                },
+            ],
         };
     return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: validData
                     .map((d) => d[nameKey])

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/Charts/LineChart/LineChartNative.js

@@ -181,7 +181,7 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
                     ? safeData
                         .map((d) => d === null || d === void 0 ? void 0 : d[nameKey])
                         .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx)))
-                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, domain: [(dataMin) => dataMin * 0.95, (dataMax) => dataMax * 1.05] }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, domain: [0, (dataMax) => Math.ceil((dataMax * 1.05) / 10) * 10] }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
                                     bottom: 0,
                                     left: 0,
                                     right: 0,

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, }) {