xmlui 0.10.19 → 0.10.21

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

@@ -199,6 +199,22 @@ fixtures_1.test.describe("Accessibility", () => {
 // VISUAL STATE TESTS
 // =============================================================================
 fixtures_1.test.describe("Visual States", () => {
+    (0, fixtures_1.test)("component width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel width="500px">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`);
+        const carousel = page.getByRole("region");
+        yield (0, fixtures_1.expect)(carousel).toHaveCSS("width", "500px");
+    }));
+    (0, fixtures_1.test)("component height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel height="500px">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`);
+        const carousel = page.getByRole("region");
+        yield (0, fixtures_1.expect)(carousel).toHaveCSS("height", "500px");
+    }));
     (0, fixtures_1.test)("component control background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`<Carousel controls="true">
         <CarouselItem>Slide 1</CarouselItem>
@@ -235,6 +251,204 @@ fixtures_1.test.describe("Visual States", () => {
         const indicator = page.getByRole("tab", { name: "Go to slide 1" });
         yield (0, fixtures_1.expect)(indicator).toHaveCSS("width", "20px");
     }));
+    (0, fixtures_1.test)("component control height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "height-control-Carousel": "50px",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield (0, fixtures_1.expect)(control).toHaveCSS("height", "50px");
+    }));
+    (0, fixtures_1.test)("component control width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "width-control-Carousel": "50px",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield (0, fixtures_1.expect)(control).toHaveCSS("width", "50px");
+    }));
+    (0, fixtures_1.test)("component control border radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "borderRadius-control-Carousel": "10px",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield (0, fixtures_1.expect)(control).toHaveCSS("border-radius", "10px");
+    }));
+    (0, fixtures_1.test)("component control hover background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "backgroundColor-control-hover-Carousel": "rgb(255, 165, 0)",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield control.hover();
+        yield (0, fixtures_1.expect)(control).toHaveCSS("background-color", "rgb(255, 165, 0)");
+    }));
+    (0, fixtures_1.test)("component control hover text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "textColor-control-hover-Carousel": "rgb(255, 255, 255)",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield control.hover();
+        yield (0, fixtures_1.expect)(control).toHaveCSS("color", "rgb(255, 255, 255)");
+    }));
+    (0, fixtures_1.test)("component control active background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "backgroundColor-control-active-Carousel": "rgb(0, 128, 0)",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield control.hover();
+        yield page.mouse.down();
+        yield (0, fixtures_1.expect)(control).toHaveCSS("background-color", "rgb(0, 128, 0)");
+    }));
+    (0, fixtures_1.test)("component control active text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "textColor-control-active-Carousel": "rgb(255, 255, 0)",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield control.hover();
+        yield page.mouse.down();
+        yield (0, fixtures_1.expect)(control).toHaveCSS("color", "rgb(255, 255, 0)");
+    }));
+    (0, fixtures_1.test)("component control disabled background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true" loop="false">
+        <CarouselItem>Slide 1</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "backgroundColor-control-disabled-Carousel": "rgb(200, 200, 200)",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield (0, fixtures_1.expect)(control).toHaveCSS("background-color", "rgb(200, 200, 200)");
+    }));
+    (0, fixtures_1.test)("component control disabled text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel controls="true" loop="false">
+        <CarouselItem>Slide 1</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "textColor-control-disabled-Carousel": "rgb(150, 150, 150)",
+            },
+        });
+        const control = page.getByRole("button", { name: "Next Slide" });
+        yield (0, fixtures_1.expect)(control).toHaveCSS("color", "rgb(150, 150, 150)");
+    }));
+    (0, fixtures_1.test)("component indicator height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel indicators="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "height-indicator-Carousel": "15px",
+            },
+        });
+        const indicator = page.getByRole("tab", { name: "Go to slide 1" });
+        yield (0, fixtures_1.expect)(indicator).toHaveCSS("height", "15px");
+    }));
+    (0, fixtures_1.test)("component indicator background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel indicators="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "backgroundColor-indicator-Carousel": "rgb(100, 100, 100)",
+            },
+        });
+        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
+        yield (0, fixtures_1.expect)(indicator).toHaveCSS("background-color", "rgb(100, 100, 100)");
+    }));
+    (0, fixtures_1.test)("component indicator text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel indicators="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "textColor-indicator-Carousel": "rgb(50, 50, 50)",
+            },
+        });
+        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
+        yield (0, fixtures_1.expect)(indicator).toHaveCSS("color", "rgb(50, 50, 50)");
+    }));
+    (0, fixtures_1.test)("component indicator hover background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel indicators="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "backgroundColor-indicator-hover-Carousel": "rgb(150, 150, 255)",
+            },
+        });
+        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
+        yield indicator.hover();
+        yield (0, fixtures_1.expect)(indicator).toHaveCSS("background-color", "rgb(150, 150, 255)");
+    }));
+    (0, fixtures_1.test)("component indicator hover text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel indicators="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "textColor-indicator-hover-Carousel": "rgb(255, 100, 100)",
+            },
+        });
+        const indicator = page.getByRole("tab", { name: "Go to slide 2" });
+        yield indicator.hover();
+        yield (0, fixtures_1.expect)(indicator).toHaveCSS("color", "rgb(255, 100, 100)");
+    }));
+    (0, fixtures_1.test)("component indicator active background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel indicators="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "backgroundColor-indicator-active-Carousel": "rgb(0, 0, 255)",
+            },
+        });
+        const indicator = page.getByRole("tab", { name: "Go to slide 1" });
+        yield (0, fixtures_1.expect)(indicator).toHaveCSS("background-color", "rgb(0, 0, 255)");
+    }));
+    (0, fixtures_1.test)("component indicator active text color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Carousel indicators="true">
+        <CarouselItem>Slide 1</CarouselItem>
+        <CarouselItem>Slide 2</CarouselItem>
+      </Carousel>`, {
+            testThemeVars: {
+                "textColor-indicator-active-Carousel": "rgb(255, 255, 255)",
+            },
+        });
+        const indicator = page.getByRole("tab", { name: "Go to slide 1" });
+        yield (0, fixtures_1.expect)(indicator).toHaveCSS("color", "rgb(255, 255, 255)");
+    }));
 });
 // =============================================================================
 // EDGE CASE TESTS

package/dist/scripts/src/components/CodeBlock/CodeBlockNative.js

@@ -38,7 +38,7 @@ function CodeBlock(_a) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(CodeBlock_module_scss_1.default.codeBlock, "global-codeBlock"), style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: [children, meta.copy !== false && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", className: CodeBlock_module_scss_1.default.copyButton, icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
                                 if (!textToCopy)
                                     return;
-                                navigator.clipboard.writeText(textToCopy);
+                                void navigator.clipboard.writeText(textToCopy);
                                 react_hot_toast_1.default.success("Code copied!");
                             } }) }))] })] }));
 }

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

@@ -36,6 +36,8 @@ exports.ContentSeparatorMd = (0, metadata_helpers_1.createMetadata)({
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$color-surface-200",
         [`size-${COMP}`]: "1px",
+        [`marginVertical-${COMP}`]: "0",
+        [`marginHorizontal-${COMP}`]: "0",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -154,6 +154,199 @@ fixtures_1.test.describe("Visual States & Themes", () => {
     }));
 });
 // =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("applies basic theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "backgroundColor-ContentSeparator": "rgb(255, 0, 0)",
+                "size-ContentSeparator": "5px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("background-color", "rgb(255, 0, 0)");
+        const height = yield driver.getComputedHeight();
+        (0, fixtures_1.expect)(height).toBe('5px');
+    }));
+    (0, fixtures_1.test)("applies vertical margin theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "10px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "10px");
+    }));
+    (0, fixtures_1.test)("applies horizontal margin theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "15px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "15px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "15px");
+    }));
+    (0, fixtures_1.test)("specific margin-top overrides vertical margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+                "marginTop-ContentSeparator": "20px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Specific margin-top should override vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "20px");
+        // Bottom should still use vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "10px");
+    }));
+    (0, fixtures_1.test)("specific margin-bottom overrides vertical margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+                "marginBottom-ContentSeparator": "25px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Top should use vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "10px");
+        // Specific margin-bottom should override vertical margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "25px");
+    }));
+    (0, fixtures_1.test)("specific margin-left overrides horizontal margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "15px",
+                "marginLeft-ContentSeparator": "30px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Specific margin-left should override horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "30px");
+        // Right should still use horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "15px");
+    }));
+    (0, fixtures_1.test)("specific margin-right overrides horizontal margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "15px",
+                "marginRight-ContentSeparator": "35px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Left should use horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "15px");
+        // Specific margin-right should override horizontal margin
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "35px");
+    }));
+    (0, fixtures_1.test)("all specific margins override general margins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "10px",
+                "marginHorizontal-ContentSeparator": "15px",
+                "marginTop-ContentSeparator": "5px",
+                "marginBottom-ContentSeparator": "8px",
+                "marginLeft-ContentSeparator": "12px",
+                "marginRight-ContentSeparator": "18px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // All specific margins should be used instead of general ones
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "5px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "8px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "12px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "18px");
+    }));
+    (0, fixtures_1.test)("fallback to vertical margin when specific margins not defined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "20px",
+                // No specific marginTop or marginBottom defined
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Should fall back to vertical margin values
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "20px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "20px");
+    }));
+    (0, fixtures_1.test)("fallback to horizontal margin when specific margins not defined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginHorizontal-ContentSeparator": "25px",
+                // No specific marginLeft or marginRight defined
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Should fall back to horizontal margin values
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "25px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "25px");
+    }));
+    (0, fixtures_1.test)("handles zero margin values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginTop-ContentSeparator": "0px",
+                "marginBottom-ContentSeparator": "0px",
+                "marginLeft-ContentSeparator": "0px",
+                "marginRight-ContentSeparator": "0px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "0px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "0px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "0px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "0px");
+    }));
+    (0, fixtures_1.test)("handles negative margin values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginTop-ContentSeparator": "-5px",
+                "marginLeft-ContentSeparator": "-10px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "-5px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "-10px");
+    }));
+    (0, fixtures_1.test)("handles different unit types for margins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginTop-ContentSeparator": "1rem",
+                "marginBottom-ContentSeparator": "2em",
+                "marginLeft-ContentSeparator": "10px",
+                "marginRight-ContentSeparator": "10px",
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        // Browser computes rem/em to px values, so we check that margins are applied (not zero)
+        const marginTop = yield driver.separator.evaluate((el) => window.getComputedStyle(el).marginTop);
+        const marginBottom = yield driver.separator.evaluate((el) => window.getComputedStyle(el).marginBottom);
+        // rem and em should resolve to non-zero pixel values
+        (0, fixtures_1.expect)(parseFloat(marginTop)).toBeGreaterThan(0);
+        (0, fixtures_1.expect)(parseFloat(marginBottom)).toBeGreaterThan(0);
+        // px values should be exact
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "10px");
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "10px");
+    }));
+    (0, fixtures_1.test)("mixed general and specific margins work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
+        yield initTestBed(`<ContentSeparator />`, {
+            testThemeVars: {
+                "marginVertical-ContentSeparator": "8px",
+                "marginHorizontal-ContentSeparator": "12px",
+                "marginTop-ContentSeparator": "16px", // Override top
+                "marginRight-ContentSeparator": "20px", // Override right
+                // marginBottom and marginLeft should use general values
+            },
+        });
+        const driver = yield createContentSeparatorDriver();
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "16px"); // Specific
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "8px"); // Fallback to vertical
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "12px"); // Fallback to horizontal
+        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "20px"); // Specific
+    }));
+});
+// =============================================================================
 // EDGE CASE TESTS
 // =============================================================================
 fixtures_1.test.describe("Edge Cases", () => {

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

@@ -492,7 +492,7 @@ fixtures_1.test.describe("User Interactions", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
-        driver.dayInput.fill("18");
+        yield driver.dayInput.fill("18");
         yield driver.clearButton.click();
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
@@ -504,7 +504,7 @@ fixtures_1.test.describe("User Interactions", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
-        driver.dayInput.fill("18");
+        yield driver.dayInput.fill("18");
         yield driver.clearButton.click();
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
@@ -805,8 +805,8 @@ fixtures_1.test.describe("Accessibility", () => {
 fixtures_1.test.describe("Theme Variables", () => {
     (0, fixtures_1.test)("component renders with theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
         yield initTestBed(`
-      <DateInput 
-        testId="dateInput" 
+      <DateInput
+        testId="dateInput"
         style="--color-divider: red; --width-input: 100px; --backgroundColor-input-invalid: rgb(255, 200, 200);"
       />
     `);
@@ -818,8 +818,8 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
     (0, fixtures_1.test)("component renders with clearable and theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`
-      <DateInput 
-        testId="dateInput" 
+      <DateInput
+        testId="dateInput"
         clearable="{true}"
         style="--padding-button: 15px; --outlineColor-button--focused: green;"
       />

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

@@ -419,7 +419,6 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
         }
     }, [day, month, year]);
     // Component API registration
-    (0, react_2.useImperativeHandle)(ref, () => dateInputRef.current);
     (0, react_2.useEffect)(() => {
         if (registerComponentApi) {
             registerComponentApi({

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

@@ -141,7 +141,7 @@ const fixtures_1 = require("../../testing/fixtures");
     yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-haspopup", "menu");
     yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-expanded", "false");
     yield driver.open();
-    page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
+    yield page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
     yield page.getByRole("menu").waitFor();
 }));
 (0, fixtures_1.test)("is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
@@ -151,10 +151,10 @@ const fixtures_1 = require("../../testing/fixtures");
     </DropdownMenu>
   `);
     const btn = page.getByRole("button");
-    page.keyboard.press("Tab");
+    yield page.keyboard.press("Tab");
     yield (0, fixtures_1.expect)(btn).toBeFocused();
     // Open with Enter
-    page.keyboard.press("Enter");
+    yield page.keyboard.press("Enter");
     yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
     // Navigate and select with keyboard
     yield page.keyboard.press("ArrowDown");

package/dist/scripts/src/components/FileUploadDropZone/FileUploadDropZoneNative.js

@@ -32,15 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -81,7 +72,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
     const accept = acceptedFileTypes
         ? acceptedFileTypes.split(",").reduce((acc, type) => (Object.assign(Object.assign({}, acc), { [type.trim()]: [] })), {})
         : undefined;
-    const onDrop = (0, react_1.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
+    const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
         if (!acceptedFiles.length) {
             return;
         }
@@ -89,7 +80,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
             value: acceptedFiles,
         });
         onUpload === null || onUpload === void 0 ? void 0 : onUpload(acceptedFiles);
-    }), [onUpload, updateState]);
+    }, [onUpload, updateState]);
     const { getRootProps, getInputProps, isDragActive, open, inputRef, isDragAccept } = useDropzone({
         onDrop,
         noClick: true,
@@ -97,7 +88,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
         noDragEventsBubbling: true,
         disabled,
         accept,
-        maxFiles
+        maxFiles,
     });
     const doOpen = (0, misc_1.useEvent)(() => {
         open();
@@ -139,5 +130,5 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
     }, [doOpen, registerComponentApi, uid]);
     const _b = getRootProps(Object.assign(Object.assign({}, rest), { style, className: (0, classnames_1.default)(FileUploadDropZone_module_scss_1.default.wrapper, className), onPaste: handleOnPaste })), { ref } = _b, rootProps = __rest(_b, ["ref"]);
     const rootRef = (0, component_utils_1.getComposedRef)(ref, forwardedRef);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, { "data-drop-enabled": !disabled, ref: rootRef, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children, (isDragActive && isDragAccept) && ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadDropZone_module_scss_1.default.dropPlaceholder, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "upload" }), text] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, { "data-drop-enabled": !disabled, ref: rootRef, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children, isDragActive && isDragAccept && ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadDropZone_module_scss_1.default.dropPlaceholder, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "upload" }), text] }))] })));
 });