xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,543 @@
+"use strict";
+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());
+    });
+};
+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
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with basic setup", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Splitter height="200px" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </Splitter>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with single child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Splitter height="200px" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="single-child"/>
+      </Splitter>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("single-child")).toBeVisible();
+    }));
+    fixtures_1.test.describe("orientation property", () => {
+        (0, fixtures_1.test)("orientation='horizontal' arranges sections left to right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const primary = page.getByTestId("primary");
+            const secondary = page.getByTestId("secondary");
+            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+            // In horizontal orientation, primary should be to the left of secondary
+            (0, fixtures_1.expect)(primaryBounds.right).toBeLessThanOrEqual(secondaryBounds.left + 10); // Allow for small overlap due to resizer
+        }));
+        (0, fixtures_1.test)("orientation='vertical' arranges sections top to bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const primary = page.getByTestId("primary");
+            const secondary = page.getByTestId("secondary");
+            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+            // In vertical orientation, primary should be above secondary
+            (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10); // Allow for small overlap due to resizer
+        }));
+        (0, fixtures_1.test)("defaults to vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const primary = page.getByTestId("primary");
+            const secondary = page.getByTestId("secondary");
+            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+            // Default should be vertical (primary above secondary)
+            (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10);
+        }));
+    });
+    fixtures_1.test.describe("swapped property", () => {
+        [
+            { swapped: false, orientation: "horizontal", description: "primary left, secondary right" },
+            { swapped: true, orientation: "horizontal", description: "secondary left, primary right" },
+            { swapped: false, orientation: "vertical", description: "primary top, secondary bottom" },
+            { swapped: true, orientation: "vertical", description: "secondary top, primary bottom" },
+        ].forEach(({ swapped, orientation, description }) => {
+            (0, fixtures_1.test)(`swapped=${swapped} with orientation=${orientation} renders ${description}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+                yield initTestBed(`
+          <Splitter height="200px" width="400px" orientation="${orientation}" swapped="${swapped}" testId="splitter">
+            <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+            <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+          </Splitter>
+        `);
+                const primary = page.getByTestId("primary");
+                const secondary = page.getByTestId("secondary");
+                const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+                const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+                if (orientation === "horizontal") {
+                    if (swapped) {
+                        // Secondary should be to the left of primary
+                        (0, fixtures_1.expect)(secondaryBounds.right).toBeLessThanOrEqual(primaryBounds.left + 10);
+                    }
+                    else {
+                        // Primary should be to the left of secondary
+                        (0, fixtures_1.expect)(primaryBounds.right).toBeLessThanOrEqual(secondaryBounds.left + 10);
+                    }
+                }
+                else {
+                    if (swapped) {
+                        // Secondary should be above primary
+                        (0, fixtures_1.expect)(secondaryBounds.bottom).toBeLessThanOrEqual(primaryBounds.top + 10);
+                    }
+                    else {
+                        // Primary should be above secondary
+                        (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10);
+                    }
+                }
+            }));
+        });
+    });
+    fixtures_1.test.describe("initialPrimarySize property", () => {
+        (0, fixtures_1.test)("sets initial size with percentage", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" initialPrimarySize="25%" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const splitterBounds = yield (0, component_test_helpers_1.getBounds)(splitter);
+            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            const expectedWidth = splitterBounds.width * 0.25;
+            const tolerance = 10; // Allow some tolerance for rounding/margins
+            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - expectedWidth)).toBeLessThan(tolerance);
+        }));
+        (0, fixtures_1.test)("sets initial size with pixels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" initialPrimarySize="100px" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const primary = page.getByTestId("primary");
+            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            const tolerance = 10;
+            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - 100)).toBeLessThan(tolerance);
+        }));
+        (0, fixtures_1.test)("defaults to 50%", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const splitterBounds = yield (0, component_test_helpers_1.getBounds)(splitter);
+            const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            const expectedWidth = splitterBounds.width * 0.5;
+            const tolerance = 15; // Allow some tolerance for default behavior
+            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - expectedWidth)).toBeLessThan(tolerance);
+        }));
+    });
+    fixtures_1.test.describe("floating property", () => {
+        (0, fixtures_1.test)("floating=false shows resizer permanently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" floating="false" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const driver = yield createSplitterDriver(splitter);
+            const resizer = yield driver.getResizer();
+            yield (0, fixtures_1.expect)(resizer).toBeVisible();
+        }));
+        (0, fixtures_1.test)("floating=true hides resizer until hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" floating="true" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            // When floating=true, the regular resizer should not be visible
+            const regularResizer = splitter.locator('[class*="resizer"]:not([class*="floating"])');
+            const isRegularResizerVisible = yield regularResizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isRegularResizerVisible).toBe(false);
+            // The floating resizer should exist but be initially hidden (opacity 0)
+            const floatingResizer = splitter.locator('[class*="floating"]');
+            if ((yield floatingResizer.count()) > 0) {
+                const initialOpacity = yield floatingResizer.evaluate(el => window.getComputedStyle(el).opacity);
+                (0, fixtures_1.expect)(parseFloat(initialOpacity)).toBe(0);
+            }
+        }));
+    });
+    fixtures_1.test.describe("splitterTemplate property", () => {
+        (0, fixtures_1.test)("renders custom splitter template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" testId="splitter">
+          <property name="splitterTemplate">
+            <ContentSeparator backgroundColor="green" height="4px" testId="custom-separator"/>
+          </property>
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            yield (0, fixtures_1.expect)(page.getByTestId("custom-separator")).toBeVisible();
+        }));
+    });
+    fixtures_1.test.describe("resize functionality", () => {
+        (0, fixtures_1.test)("drag resizer changes panel sizes in horizontal orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Get initial size
+            const initialBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            // Drag resizer to the right by 50 pixels
+            yield driver.dragResizer(50, 0);
+            // Get new size and verify it changed
+            const newBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(newBounds.width).toBeGreaterThan(initialBounds.width + 30); // Allow some tolerance
+        }));
+        (0, fixtures_1.test)("drag resizer changes panel sizes in vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Get initial size
+            const initialBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            // Drag resizer down by 30 pixels
+            yield driver.dragResizer(0, 30);
+            // Get new size and verify it changed
+            const newBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(newBounds.height).toBeGreaterThan(initialBounds.height + 15); // Allow some tolerance
+        }));
+    });
+    fixtures_1.test.describe("size constraint properties", () => {
+        (0, fixtures_1.test)("minPrimarySize constrains minimum size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" minPrimarySize="100px" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Try to drag resizer far to the left
+            yield driver.dragResizer(-300, 0);
+            // Primary should not be smaller than minimum
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.width).toBeGreaterThanOrEqual(90); // Allow small tolerance
+        }));
+        (0, fixtures_1.test)("maxPrimarySize constrains maximum size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="300px" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Try to drag resizer far to the right
+            yield driver.dragResizer(300, 0);
+            // Primary should not be larger than maximum
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance
+        }));
+    });
+    fixtures_1.test.describe("resize event", () => {
+        (0, fixtures_1.test)("fires resize event when dragging", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" onResize="arg => testState = arg" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const driver = yield createSplitterDriver(splitter);
+            // Drag resizer
+            yield driver.dragResizer(50, 0);
+            // Verify resize event was called with array of percentages
+            yield fixtures_1.expect.poll(testStateDriver.testState).toBeDefined();
+            const resizeData = yield testStateDriver.testState();
+            (0, fixtures_1.expect)(Array.isArray(resizeData)).toBe(true);
+            (0, fixtures_1.expect)(resizeData).toHaveLength(2);
+            (0, fixtures_1.expect)(typeof resizeData[0]).toBe("number");
+            (0, fixtures_1.expect)(typeof resizeData[1]).toBe("number");
+        }));
+    });
+    fixtures_1.test.describe("edge cases", () => {
+        (0, fixtures_1.test)("handles null properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter 
+          height="200px" 
+          initialPrimarySize="50px" 
+          minPrimarySize="10px" 
+          maxPrimarySize="180px"
+          testId="splitter"
+        >
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles undefined properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter 
+          height="200px" 
+          width="400px"
+          testId="splitter"
+        >
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles invalid size values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter 
+          height="200px" 
+          width="400px"
+          initialPrimarySize="50%" 
+          testId="splitter"
+        >
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles object values for string properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter 
+          height="200px" 
+          width="400px"
+          orientation="horizontal" 
+          initialPrimarySize="50%"
+          testId="splitter"
+        >
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+        }));
+    });
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("resizer has appropriate cursor styles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `);
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        const resizer = yield driver.getResizer();
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "ew-resize");
+    }));
+    (0, fixtures_1.test)("vertical resizer has appropriate cursor style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `);
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        const resizer = yield driver.getResizer();
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "ns-resize");
+    }));
+    (0, fixtures_1.test)("splitter prevents text selection during drag", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `);
+        const splitter = page.getByTestId("splitter");
+        yield (0, fixtures_1.expect)(splitter).toHaveCSS("user-select", "none");
+    }));
+});
+// =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("applies backgroundColor-resizer-Splitter theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `, {
+            testThemeVars: { "backgroundColor-resizer-Splitter": "rgb(255, 0, 0)" },
+        });
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        const resizer = yield driver.getResizer();
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("background-color", "rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("applies thickness-resizer-Splitter theme variable for horizontal", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `, {
+            testThemeVars: { "thickness-resizer-Splitter": "10px" },
+        });
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        const resizer = yield driver.getResizer();
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("width", "10px");
+    }));
+    (0, fixtures_1.test)("applies thickness-resizer-Splitter theme variable for vertical", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `, {
+            testThemeVars: { "thickness-resizer-Splitter": "10px" },
+        });
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        const resizer = yield driver.getResizer();
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("height", "10px");
+    }));
+    (0, fixtures_1.test)("applies cursor-resizer-horizontal-Splitter theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `, {
+            testThemeVars: { "cursor-resizer-horizontal-Splitter": "col-resize" },
+        });
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        const resizer = yield driver.getResizer();
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "col-resize");
+    }));
+    (0, fixtures_1.test)("applies cursor-resizer-vertical-Splitter theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" orientation="vertical" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </Splitter>
+    `, {
+            testThemeVars: { "cursor-resizer-vertical-Splitter": "row-resize" },
+        });
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        const resizer = yield driver.getResizer();
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "row-resize");
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles very small container dimensions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Splitter height="20px" width="20px" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </Splitter>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+        // Secondary might be hidden in very small containers due to space constraints
+        const secondary = page.getByTestId("secondary");
+        const isSecondaryVisible = yield secondary.isVisible();
+        if (isSecondaryVisible) {
+            yield (0, fixtures_1.expect)(secondary).toBeVisible();
+        }
+    }));
+    (0, fixtures_1.test)("handles very large initial size values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" initialPrimarySize="90%" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </Splitter>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+        // Secondary might be very small but should still be visible
+        const secondary = page.getByTestId("secondary");
+        const isSecondaryVisible = yield secondary.isVisible();
+        if (isSecondaryVisible) {
+            yield (0, fixtures_1.expect)(secondary).toBeVisible();
+        }
+    }));
+    (0, fixtures_1.test)("handles rapid resize operations", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" orientation="horizontal" testId="splitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </Splitter>
+    `);
+        const splitter = page.getByTestId("splitter");
+        const driver = yield createSplitterDriver(splitter);
+        // Perform multiple rapid drag operations
+        yield driver.dragResizer(20, 0);
+        yield driver.dragResizer(-30, 0);
+        yield driver.dragResizer(40, 0);
+        yield driver.dragResizer(-10, 0);
+        // Should still be functional
+        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+    }));
+});

package/dist/scripts/src/components/Splitter/VSplitter.spec.js

@@ -0,0 +1,104 @@
+"use strict";
+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());
+    });
+};
+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
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with basic setup", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VSplitter height="200px" width="400px" testId="vsplitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </VSplitter>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("vsplitter")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("defaults to vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VSplitter height="200px" width="400px" testId="vsplitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </VSplitter>
+    `);
+        const primary = page.getByTestId("primary");
+        const secondary = page.getByTestId("secondary");
+        const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+        const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+        // In vertical orientation, primary should be above secondary
+        (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10); // Allow for small overlap due to resizer
+    }));
+    (0, fixtures_1.test)("ignores orientation property when explicitly set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VSplitter height="200px" width="400px" orientation="horizontal" testId="vsplitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </VSplitter>
+    `);
+        const primary = page.getByTestId("primary");
+        const secondary = page.getByTestId("secondary");
+        const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+        const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+        // Even with orientation="horizontal", VSplitter should still be vertical
+        // Primary should be above secondary, NOT to the left of it
+        (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10);
+    }));
+    (0, fixtures_1.test)("works with swapped property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VSplitter height="200px" width="400px" swapped="true" testId="vsplitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </VSplitter>
+    `);
+        const primary = page.getByTestId("primary");
+        const secondary = page.getByTestId("secondary");
+        const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+        const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+        // With swapped=true, secondary should be above primary
+        (0, fixtures_1.expect)(secondaryBounds.bottom).toBeLessThanOrEqual(primaryBounds.top + 10);
+    }));
+    (0, fixtures_1.test)("maintains vertical orientation even with invalid orientation values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VSplitter height="200px" width="400px" orientation="invalid-value" testId="vsplitter">
+        <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+        <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+      </VSplitter>
+    `);
+        const primary = page.getByTestId("primary");
+        const secondary = page.getByTestId("secondary");
+        const primaryBounds = yield (0, component_test_helpers_1.getBounds)(primary);
+        const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+        // Should still be vertical regardless of invalid orientation value
+        (0, fixtures_1.expect)(primaryBounds.bottom).toBeLessThanOrEqual(secondaryBounds.top + 10);
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("resizer has vertical cursor style", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+        yield initTestBed(`
+      <VSplitter height="200px" width="400px" testId="vsplitter">
+        <Stack backgroundColor="lightblue" height="100%"/>
+        <Stack backgroundColor="darksalmon" height="100%"/>
+      </VSplitter>
+    `);
+        const vsplitter = page.getByTestId("vsplitter");
+        const driver = yield createSplitterDriver(vsplitter);
+        const resizer = yield driver.getResizer();
+        // VSplitter should always use vertical cursor (ns-resize)
+        yield (0, fixtures_1.expect)(resizer).toHaveCSS("cursor", "ns-resize");
+    }));
+});