xmlui 0.11.4 → 0.11.7

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

@@ -1,205 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Splitter = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const utils_1 = require("../Splitter/utils");
-exports.defaultProps = {
-    initialPrimarySize: "50%",
-    minPrimarySize: "0%",
-    maxPrimarySize: "100%",
-    orientation: "vertical",
-    swapped: false,
-    floating: false,
-};
-const Splitter = (_a) => {
-    var { initialPrimarySize = exports.defaultProps.initialPrimarySize, minPrimarySize = exports.defaultProps.minPrimarySize, maxPrimarySize = exports.defaultProps.maxPrimarySize, orientation = exports.defaultProps.orientation, children, style, className, swapped = exports.defaultProps.swapped, floating = exports.defaultProps.floating, splitterTemplate, resize = constants_1.noop, visibleChildCount } = _a, rest = __rest(_a, ["initialPrimarySize", "minPrimarySize", "maxPrimarySize", "orientation", "children", "style", "className", "swapped", "floating", "splitterTemplate", "resize", "visibleChildCount"]);
-    const [sizePercentage, setSizePercentage] = (0, react_1.useState)(50);
-    const [containerSize, setContainerSize] = (0, react_1.useState)(100);
-    const [splitter, setSplitter] = (0, react_1.useState)(null);
-    const [resizerVisible, setResizerVisible] = (0, react_1.useState)(false);
-    const [resizer, setResizer] = (0, react_1.useState)(null);
-    const [floatingResizer, setFloatingResizer] = (0, react_1.useState)(null);
-    const resizerElement = (0, react_1.useMemo)(() => (floating ? floatingResizer : resizer), [floating, resizer, floatingResizer]);
-    // Calculate actual size in pixels from percentage
-    const size = (0, react_1.useMemo)(() => {
-        return (sizePercentage / 100) * containerSize;
-    }, [sizePercentage, containerSize]);
-    // Since the XMLUI renderer now pre-filters children, we can use them directly
-    const childrenArray = react_1.default.Children.toArray(children);
-    const actualChildCount = childrenArray.length;
-    const effectiveChildCount = visibleChildCount !== null && visibleChildCount !== void 0 ? visibleChildCount : actualChildCount;
-    const isMultiPanel = effectiveChildCount > 1;
-    // ResizeObserver to track container size changes
-    (0, react_1.useEffect)(() => {
-        if (!splitter)
-            return;
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                const newContainerSize = orientation === "horizontal"
-                    ? entry.contentRect.width
-                    : entry.contentRect.height;
-                setContainerSize(newContainerSize);
-            }
-        });
-        resizeObserver.observe(splitter);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [splitter, orientation]);
-    // Initialize container size and primary panel percentage
-    (0, react_1.useEffect)(() => {
-        if (splitter) {
-            const newContainerSize = orientation === "horizontal"
-                ? splitter.getBoundingClientRect().width
-                : splitter.getBoundingClientRect().height;
-            setContainerSize(newContainerSize);
-            // Parse initial size and convert to percentage
-            const initialParsedSize = (0, utils_1.parseSize)(initialPrimarySize, newContainerSize);
-            const initialPercentage = (0, utils_1.toPercentage)(initialParsedSize, newContainerSize);
-            setSizePercentage(initialPercentage);
-            if (resize) {
-                const actualPrimarySize = (initialPercentage / 100) * newContainerSize;
-                resize([actualPrimarySize, newContainerSize - actualPrimarySize]);
-            }
-        }
-    }, [initialPrimarySize, orientation, resize, splitter, swapped]);
-    (0, react_1.useEffect)(() => {
-        const handleMouseMove = (event) => {
-            if (splitter && resizerElement && containerSize > 0) {
-                const newSize = orientation === "horizontal"
-                    ? Math.min(Math.max(event.clientX - splitter.getBoundingClientRect().left, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize))
-                    : Math.min(Math.max(event.clientY - splitter.getBoundingClientRect().top, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize));
-                const newPercentage = (0, utils_1.toPercentage)(newSize, containerSize);
-                setSizePercentage(newPercentage);
-                if (resize) {
-                    resize([
-                        newPercentage,
-                        100 - newPercentage,
-                    ]);
-                }
-            }
-        };
-        const handleMouseUp = () => {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-        };
-        const handleMouseDown = () => {
-            document.addEventListener("mousemove", handleMouseMove);
-            document.addEventListener("mouseup", handleMouseUp);
-        };
-        if (resizerElement) {
-            resizerElement.addEventListener("mousedown", handleMouseDown);
-        }
-        return () => {
-            if (resizerElement) {
-                resizerElement.removeEventListener("mousedown", handleMouseDown);
-            }
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-        };
-    }, [minPrimarySize, maxPrimarySize, orientation, resize, floating, resizerElement, splitter, containerSize]);
-    (0, react_1.useEffect)(() => {
-        const watchResizer = (event) => {
-            const cursorPosition = orientation === "horizontal" ? event.clientX : event.clientY;
-            if (splitter) {
-                const paneStart = orientation === "horizontal"
-                    ? splitter.getBoundingClientRect().left
-                    : splitter.getBoundingClientRect().top;
-                const resizerPosition = paneStart + size;
-                // Check if the cursor is near the resizer (within 20 pixels)
-                if (cursorPosition > resizerPosition - 20 && cursorPosition < resizerPosition + 20) {
-                    setResizerVisible(true);
-                }
-                else {
-                    setResizerVisible(false);
-                }
-            }
-        };
-        if (splitter) {
-            splitter.addEventListener("mousemove", watchResizer);
-            splitter.addEventListener("mouseleave", () => setResizerVisible(false));
-        }
-        return () => {
-            if (splitter) {
-                splitter.removeEventListener("mouseleave", () => setResizerVisible(false));
-                splitter.removeEventListener("mousemove", watchResizer);
-            }
-        };
-    }, [size, orientation, splitter]);
-    (0, react_1.useEffect)(() => {
-        if (floatingResizer) {
-            floatingResizer.style.opacity = resizerVisible ? "1" : "0";
-        }
-    }, [floatingResizer, resizerVisible]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: (s) => setSplitter(s), className: (0, classnames_1.default)(Splitter_module_scss_1.default.splitter, {
-            [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
-            [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
-        }, className), style: style, children: isMultiPanel ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: !swapped ? { flexBasis: size } : {}, className: (0, classnames_1.default)({
-                        [Splitter_module_scss_1.default.primaryPanel]: !swapped,
-                        [Splitter_module_scss_1.default.secondaryPanel]: swapped,
-                    }), children: childrenArray[0] }), !floating && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Splitter_module_scss_1.default.resizer, {
-                        [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
-                        [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
-                    }), ref: (r) => setResizer(r), children: splitterTemplate })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({
-                        [Splitter_module_scss_1.default.primaryPanel]: swapped,
-                        [Splitter_module_scss_1.default.secondaryPanel]: !swapped,
-                    }), style: swapped ? { flexBasis: size } : {}, children: childrenArray[1] }), floating && ((0, jsx_runtime_1.jsx)("div", { ref: (fr) => setFloatingResizer(fr), className: (0, classnames_1.default)(Splitter_module_scss_1.default.floatingResizer, {
-                        [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
-                        [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
-                    }), style: {
-                        top: orientation === "horizontal" ? 0 : size,
-                        left: orientation === "horizontal" ? size : 0,
-                    }, children: splitterTemplate }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[0]) && ((0, jsx_runtime_1.jsx)("div", { className: Splitter_module_scss_1.default.panel, children: childrenArray[0] })) })) })));
-};
-exports.Splitter = Splitter;

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

@@ -1,104 +0,0 @@
-"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");
-    }));
-});

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

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toPercentage = exports.parseSize = void 0;
-const parseSize = (size, containerSize) => {
-    if (size.endsWith('px')) {
-        const pixels = parseInt(size, 10);
-        // If negative, calculate from the end: containerSize - abs(pixels)
-        return pixels < 0 ? containerSize + pixels : pixels;
-    }
-    else if (size.endsWith('%')) {
-        const percentage = parseInt(size, 10);
-        // If negative, calculate from the end: 100% - abs(percentage)
-        const actualPercentage = percentage < 0 ? 100 + percentage : percentage;
-        return (actualPercentage / 100) * containerSize;
-    }
-    throw new Error('Invalid size format. Use px or %.');
-};
-exports.parseSize = parseSize;
-const toPercentage = (size, containerSize) => {
-    return (size / containerSize) * 100;
-};
-exports.toPercentage = toPercentage;

package/dist/scripts/src/components/Stack/CHStack.spec.js

@@ -1,86 +0,0 @@
-"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 fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders items horizontally and centers them", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <CHStack testId="chstack" width="200px" height="200px" backgroundColor="lightgray">
-        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
-        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
-        <Stack testId="item3" height="32px" width="32px" backgroundColor="green" />
-      </CHStack>
-    `);
-        const chstack = page.getByTestId("chstack");
-        const item1 = page.getByTestId("item1");
-        const item2 = page.getByTestId("item2");
-        const item3 = page.getByTestId("item3");
-        yield (0, fixtures_1.expect)(chstack).toBeVisible();
-        yield (0, fixtures_1.expect)(item1).toBeVisible();
-        yield (0, fixtures_1.expect)(item2).toBeVisible();
-        yield (0, fixtures_1.expect)(item3).toBeVisible();
-        // Get bounding boxes to verify horizontal layout and centering
-        const chstackBox = yield chstack.boundingBox();
-        const item1Box = yield item1.boundingBox();
-        const item2Box = yield item2.boundingBox();
-        const item3Box = yield item3.boundingBox();
-        // Verify items are stacked horizontally (item2 should be to the right of item1, item3 to the right of item2)
-        (0, fixtures_1.expect)(item2Box.x).toBeGreaterThan(item1Box.x + item1Box.width - 1); // -1 for floating point tolerance
-        (0, fixtures_1.expect)(item3Box.x).toBeGreaterThan(item2Box.x + item2Box.width - 1); // -1 for floating point tolerance
-        // Verify items are vertically centered within the container
-        const chstackCenterY = chstackBox.y + chstackBox.height / 2;
-        const item1CenterY = item1Box.y + item1Box.height / 2;
-        const item2CenterY = item2Box.y + item2Box.height / 2;
-        const item3CenterY = item3Box.y + item3Box.height / 2;
-        (0, fixtures_1.expect)(Math.abs(item1CenterY - chstackCenterY)).toBeLessThan(1);
-        (0, fixtures_1.expect)(Math.abs(item2CenterY - chstackCenterY)).toBeLessThan(1);
-        (0, fixtures_1.expect)(Math.abs(item3CenterY - chstackCenterY)).toBeLessThan(1);
-        // Verify the entire content is horizontally centered within the container
-        const allItemsLeftX = item1Box.x;
-        const allItemsRightX = item3Box.x + item3Box.width;
-        const allItemsWidth = allItemsRightX - allItemsLeftX;
-        const chstackCenterX = chstackBox.x + chstackBox.width / 2;
-        const contentCenterX = allItemsLeftX + allItemsWidth / 2;
-        (0, fixtures_1.expect)(Math.abs(contentCenterX - chstackCenterX)).toBeLessThan(1);
-    }));
-    (0, fixtures_1.test)("renders empty CHStack", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<CHStack testId="chstack"></CHStack>`);
-        const chstack = page.getByTestId("chstack");
-        yield (0, fixtures_1.expect)(chstack).toBeAttached();
-        yield (0, fixtures_1.expect)(chstack).toBeEmpty();
-    }));
-    (0, fixtures_1.test)("ignores orientation property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <CHStack testId="chstack" orientation="vertical" width="200px" height="100px" backgroundColor="lightgray">
-        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
-        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
-      </CHStack>
-    `);
-        const chstack = page.getByTestId("chstack");
-        const item1 = page.getByTestId("item1");
-        const item2 = page.getByTestId("item2");
-        yield (0, fixtures_1.expect)(item1).toBeVisible();
-        yield (0, fixtures_1.expect)(item2).toBeVisible();
-        // Get bounding boxes to verify still renders horizontally and centered despite orientation="vertical"
-        const chstackBox = yield chstack.boundingBox();
-        const item1Box = yield item1.boundingBox();
-        const item2Box = yield item2.boundingBox();
-        // Verify items are still stacked horizontally (orientation prop should be ignored)
-        (0, fixtures_1.expect)(item2Box.x).toBeGreaterThan(item1Box.x + item1Box.width - 1);
-        // Verify items are still vertically centered
-        const chstackCenterY = chstackBox.y + chstackBox.height / 2;
-        const item1CenterY = item1Box.y + item1Box.height / 2;
-        (0, fixtures_1.expect)(Math.abs(item1CenterY - chstackCenterY)).toBeLessThan(1);
-    }));
-});

package/dist/scripts/src/components/Stack/CVStack.spec.js

@@ -1,86 +0,0 @@
-"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 fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders items vertically and centers them", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <CVStack testId="cvstack" width="200px" height="200px" backgroundColor="lightgray">
-        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
-        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
-        <Stack testId="item3" height="32px" width="32px" backgroundColor="green" />
-      </CVStack>
-    `);
-        const cvstack = page.getByTestId("cvstack");
-        const item1 = page.getByTestId("item1");
-        const item2 = page.getByTestId("item2");
-        const item3 = page.getByTestId("item3");
-        yield (0, fixtures_1.expect)(cvstack).toBeVisible();
-        yield (0, fixtures_1.expect)(item1).toBeVisible();
-        yield (0, fixtures_1.expect)(item2).toBeVisible();
-        yield (0, fixtures_1.expect)(item3).toBeVisible();
-        // Get bounding boxes to verify vertical layout and centering
-        const cvstackBox = yield cvstack.boundingBox();
-        const item1Box = yield item1.boundingBox();
-        const item2Box = yield item2.boundingBox();
-        const item3Box = yield item3.boundingBox();
-        // Verify items are stacked vertically (item2 should be below item1, item3 below item2)
-        (0, fixtures_1.expect)(item2Box.y).toBeGreaterThan(item1Box.y + item1Box.height - 1); // -1 for floating point tolerance
-        (0, fixtures_1.expect)(item3Box.y).toBeGreaterThan(item2Box.y + item2Box.height - 1); // -1 for floating point tolerance
-        // Verify items are horizontally centered within the container
-        const cvstackCenterX = cvstackBox.x + cvstackBox.width / 2;
-        const item1CenterX = item1Box.x + item1Box.width / 2;
-        const item2CenterX = item2Box.x + item2Box.width / 2;
-        const item3CenterX = item3Box.x + item3Box.width / 2;
-        (0, fixtures_1.expect)(Math.abs(item1CenterX - cvstackCenterX)).toBeLessThan(1);
-        (0, fixtures_1.expect)(Math.abs(item2CenterX - cvstackCenterX)).toBeLessThan(1);
-        (0, fixtures_1.expect)(Math.abs(item3CenterX - cvstackCenterX)).toBeLessThan(1);
-        // Verify the entire content is vertically centered within the container
-        const allItemsTopY = item1Box.y;
-        const allItemsBottomY = item3Box.y + item3Box.height;
-        const allItemsHeight = allItemsBottomY - allItemsTopY;
-        const cvstackCenterY = cvstackBox.y + cvstackBox.height / 2;
-        const contentCenterY = allItemsTopY + allItemsHeight / 2;
-        (0, fixtures_1.expect)(Math.abs(contentCenterY - cvstackCenterY)).toBeLessThan(1);
-    }));
-    (0, fixtures_1.test)("renders empty CVStack", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<CVStack testId="cvstack"></CVStack>`);
-        const cvstack = page.getByTestId("cvstack");
-        yield (0, fixtures_1.expect)(cvstack).toBeAttached();
-        yield (0, fixtures_1.expect)(cvstack).toBeEmpty();
-    }));
-    (0, fixtures_1.test)("ignores orientation property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <CVStack testId="cvstack" orientation="horizontal" width="200px" height="100px" backgroundColor="lightgray">
-        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
-        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
-      </CVStack>
-    `);
-        const cvstack = page.getByTestId("cvstack");
-        const item1 = page.getByTestId("item1");
-        const item2 = page.getByTestId("item2");
-        yield (0, fixtures_1.expect)(item1).toBeVisible();
-        yield (0, fixtures_1.expect)(item2).toBeVisible();
-        // Get bounding boxes to verify still renders vertically and centered despite orientation="horizontal"
-        const cvstackBox = yield cvstack.boundingBox();
-        const item1Box = yield item1.boundingBox();
-        const item2Box = yield item2.boundingBox();
-        // Verify items are still stacked vertically (orientation prop should be ignored)
-        (0, fixtures_1.expect)(item2Box.y).toBeGreaterThan(item1Box.y + item1Box.height - 1);
-        // Verify items are still horizontally centered
-        const cvstackCenterX = cvstackBox.x + cvstackBox.width / 2;
-        const item1CenterX = item1Box.x + item1Box.width / 2;
-        (0, fixtures_1.expect)(Math.abs(item1CenterX - cvstackCenterX)).toBeLessThan(1);
-    }));
-});

package/dist/scripts/src/components/Stack/HStack.spec.js

@@ -1,67 +0,0 @@
-"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 fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders items horizontally", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <HStack testId="hstack">
-        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
-        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
-        <Stack testId="item3" height="32px" width="32px" backgroundColor="green" />
-      </HStack>
-    `);
-        const hstack = page.getByTestId("hstack");
-        const item1 = page.getByTestId("item1");
-        const item2 = page.getByTestId("item2");
-        const item3 = page.getByTestId("item3");
-        yield (0, fixtures_1.expect)(hstack).toBeVisible();
-        yield (0, fixtures_1.expect)(item1).toBeVisible();
-        yield (0, fixtures_1.expect)(item2).toBeVisible();
-        yield (0, fixtures_1.expect)(item3).toBeVisible();
-        // Get bounding boxes to verify horizontal layout
-        const item1Box = yield item1.boundingBox();
-        const item2Box = yield item2.boundingBox();
-        const item3Box = yield item3.boundingBox();
-        // Verify items are stacked horizontally (item2 should be to the right of item1, item3 to the right of item2)
-        (0, fixtures_1.expect)(item2Box.x).toBeGreaterThan(item1Box.x + item1Box.width - 1); // -1 for floating point tolerance
-        (0, fixtures_1.expect)(item3Box.x).toBeGreaterThan(item2Box.x + item2Box.width - 1); // -1 for floating point tolerance
-        // Verify items are vertically aligned (should start at roughly the same y position)
-        (0, fixtures_1.expect)(Math.abs(item1Box.y - item2Box.y)).toBeLessThan(1);
-        (0, fixtures_1.expect)(Math.abs(item2Box.y - item3Box.y)).toBeLessThan(1);
-    }));
-    (0, fixtures_1.test)("renders empty HStack", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<HStack testId="hstack"></HStack>`);
-        const hstack = page.getByTestId("hstack");
-        yield (0, fixtures_1.expect)(hstack).toBeAttached();
-        yield (0, fixtures_1.expect)(hstack).toBeEmpty();
-    }));
-    (0, fixtures_1.test)("ignores orientation property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <HStack testId="hstack" orientation="vertical">
-        <Stack testId="item1" height="32px" width="32px" backgroundColor="red" />
-        <Stack testId="item2" height="32px" width="32px" backgroundColor="blue" />
-      </HStack>
-    `);
-        const item1 = page.getByTestId("item1");
-        const item2 = page.getByTestId("item2");
-        yield (0, fixtures_1.expect)(item1).toBeVisible();
-        yield (0, fixtures_1.expect)(item2).toBeVisible();
-        // Get bounding boxes to verify still renders horizontally despite orientation="vertical"
-        const item1Box = yield item1.boundingBox();
-        const item2Box = yield item2.boundingBox();
-        // Verify items are still stacked horizontally (orientation prop should be ignored)
-        (0, fixtures_1.expect)(item2Box.x).toBeGreaterThan(item1Box.x + item1Box.width - 1);
-    }));
-});