xmlui 0.11.2 → 0.11.4

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

@@ -90,11 +90,11 @@ exports.SliderMd = (0, metadata_helpers_1.createMetadata)({
         [`boxShadow-thumb-${COMP}--hover`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
         [`backgroundColor-thumb-${COMP}--active`]: "$color-primary-400",
         [`boxShadow-thumb-${COMP}--active`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
-        [`borderRadius-${COMP}-default`]: "$borderRadius",
-        [`borderColor-${COMP}-default`]: "transparent",
-        [`borderWidth-${COMP}-default`]: "0",
-        [`borderStyle-${COMP}-default`]: "solid",
-        [`boxShadow-${COMP}-default`]: "none",
+        [`borderRadius-${COMP}--default`]: "$borderRadius",
+        [`borderColor-${COMP}--default`]: "transparent",
+        [`borderWidth-${COMP}--default`]: "0",
+        [`borderStyle-${COMP}--default`]: "solid",
+        [`boxShadow-${COMP}--default`]: "none",
         light: {
             [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-300",
             [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-400",

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

@@ -531,41 +531,75 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
 });
 // =============================================================================
-// VALIDATION STATUS TESTS
+// VALIDATION TESTS
 // =============================================================================
 fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)(`validationStatus=error applies correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider validationStatus="error" />`, {
-            testThemeVars: {
-                [`borderColor-Slider-error`]: "rgb(255, 0, 0)",
-            },
-        });
-        const sliderTrack = page.locator("[data-track]");
-        yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(255, 0, 0)");
-    }));
-    // NOTE: warning color is not applied correctly
-    fixtures_1.test.fixme(`validationStatus=warning applies correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider validationStatus="warning" />`, {
-            testThemeVars: {
-                [`borderColor-Slider-warning`]: "rgb(255, 165, 0)",
-            },
-        });
-        const sliderTrack = page.locator("[data-track]");
-        yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(218, 127, 0)");
-    }));
-    (0, fixtures_1.test)(`validationStatus=valid applies correctly`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Slider validationStatus="valid" />`, {
-            testThemeVars: {
-                [`borderColor-Slider-success`]: "rgb(0, 255, 0)",
-            },
-        });
-        const sliderTrack = page.locator("[data-track]");
-        yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(0, 255, 0)");
-    }));
     (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<Slider validationStatus="invalid" />`);
         yield (0, fixtures_1.expect)(page.getByRole("slider")).toBeVisible();
     }));
+    [
+        { value: "--default", prop: "" },
+        { value: "--warning", prop: 'validationStatus="warning"' },
+        { value: "--error", prop: 'validationStatus="error"' },
+        { value: "--success", prop: 'validationStatus="valid"' },
+    ].forEach((variant) => {
+        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Slider ${variant.prop} />`, {
+                testThemeVars: { [`borderRadius-Slider${variant.value}`]: "12px" },
+            });
+            const sliderTrack = page.locator("[data-track]");
+            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-radius", "12px");
+        }));
+        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Slider ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-Slider${variant.value}`]: "rgb(255, 0, 0)" },
+            });
+            const sliderTrack = page.locator("[data-track]");
+            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(255, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Slider testId="test" ${variant.prop} />`, {
+                testThemeVars: { [`borderWidth-Slider${variant.value}`]: "1px" },
+            });
+            const sliderTrack = page.locator("[data-track]");
+            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-width", "1px");
+        }));
+        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Slider ${variant.prop} />`, {
+                testThemeVars: { [`borderStyle-Slider${variant.value}`]: "dashed" },
+            });
+            const sliderTrack = page.locator("[data-track]");
+            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-style", "dashed");
+        }));
+        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Slider ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-Slider${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                },
+            });
+            const sliderTrack = page.locator("[data-track]");
+            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
+        }));
+        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Slider ${variant.prop} />`, {
+                testThemeVars: { [`borderColor-Slider${variant.value}--hover`]: "rgb(0, 0, 0)" },
+            });
+            const sliderTrack = page.locator("[data-track]");
+            yield sliderTrack.hover();
+            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("border-color", "rgb(0, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Slider ${variant.prop} />`, {
+                testThemeVars: {
+                    [`boxShadow-Slider${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                },
+            });
+            const sliderTrack = page.locator("[data-track]");
+            yield sliderTrack.hover();
+            yield (0, fixtures_1.expect)(sliderTrack).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
+        }));
+    });
 });
 // =============================================================================
 // EDGE CASE TESTS

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

@@ -1,10 +1,44 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hSplitterComponentRenderer = exports.vSplitterComponentRenderer = exports.splitterComponentRenderer = exports.VSplitterMd = exports.HSplitterMd = exports.SplitterMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
 const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const misc_1 = require("../../components-core/utils/misc");
@@ -17,7 +51,10 @@ const baseSplitterMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`Splitter` component divides a container into two resizable sections. These " +
         "are are identified by their names: primary and secondary. They have a " +
-        "draggable bar between them.",
+        "draggable bar between them. When only a single child is visible (due to " +
+        "conditional rendering with `when` attributes), the splitter bar is not " +
+        "displayed and the single panel stretches to fill the entire viewport of " +
+        "the splitter container.",
     props: {
         swapped: {
             description: `This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +
@@ -40,7 +77,8 @@ const baseSplitterMd = (0, metadata_helpers_1.createMetadata)({
         },
         maxPrimarySize: {
             description: `This property sets the maximum size the primary section can have. The unit of the size ` +
-                `value is in pixels or percentages.`,
+                `value is in pixels or percentages. Negative values are supported and calculate from the ` +
+                `end of the container (e.g., "-20%" means "80% of container", "-100px" means "container size - 100px").`,
             valueType: "string",
             defaultValue: SplitterNative_1.defaultProps.maxPrimarySize,
         },
@@ -80,7 +118,19 @@ function renderSplitter(_a) {
     if (!(0, misc_1.isComponentDefChildren)(node.children)) {
         throw new EngineError_1.NotAComponentDefError();
     }
-    return ((0, jsx_runtime_1.jsx)(SplitterNative_1.Splitter, { className: className, swapped: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.swapped), orientation: orientation, splitterTemplate: renderChild((_d = node.props) === null || _d === void 0 ? void 0 : _d.splitterTemplate), initialPrimarySize: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.initialPrimarySize), minPrimarySize: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.minPrimarySize), maxPrimarySize: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.maxPrimarySize), floating: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.floating), resize: lookupEventHandler("resize"), children: renderChild(node.children) }));
+    // Let XMLUI handle the conditional rendering, then count the non-null results
+    const renderedChildren = (0, react_1.useMemo)(() => {
+        if (!Array.isArray(node.children)) {
+            const rendered = renderChild(node.children);
+            return rendered ? [rendered] : [];
+        }
+        return node.children
+            .map((child, index) => renderChild(child))
+            .filter(child => child !== null && child !== undefined)
+            .map((child, index) => react_1.default.cloneElement(child, { key: index }));
+    }, [node.children, renderChild]);
+    const visibleChildCount = renderedChildren.length;
+    return ((0, jsx_runtime_1.jsx)(SplitterNative_1.Splitter, { className: className, swapped: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.swapped), orientation: orientation, splitterTemplate: renderChild((_d = node.props) === null || _d === void 0 ? void 0 : _d.splitterTemplate), initialPrimarySize: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.initialPrimarySize), minPrimarySize: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.minPrimarySize), maxPrimarySize: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.maxPrimarySize), floating: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.floating), resize: lookupEventHandler("resize"), visibleChildCount: visibleChildCount, children: renderedChildren }));
 }
 exports.splitterComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SplitterMd, ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
     return renderSplitter({

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

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
+const utils_1 = require("./utils");
 // =============================================================================
 // BASIC FUNCTIONALITY TESTS
 // =============================================================================
@@ -35,6 +36,203 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
         yield (0, fixtures_1.expect)(page.getByTestId("single-child")).toBeVisible();
     }));
+    fixtures_1.test.describe("conditional rendering behavior", () => {
+        (0, fixtures_1.test)("hides resizer and stretches single panel when second child has when=false", (_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">Primary</Stack>
+          <Stack when="{false}" backgroundColor="darksalmon" height="100%" testId="secondary">Secondary</Stack>
+        </Splitter>
+      `);
+            // Primary panel should be visible
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            // Secondary panel should not be visible (filtered out by when=false)
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).not.toBeVisible();
+            // Resizer should not be visible when only one child is rendered
+            const resizer = page.locator('[class*="resizer"]');
+            const isResizerVisible = yield resizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isResizerVisible).toBe(false);
+            // Primary panel should stretch to fill the entire splitter container
+            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);
+            // Allow small tolerance for borders/padding
+            const tolerance = 5;
+            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - splitterBounds.width)).toBeLessThan(tolerance);
+            (0, fixtures_1.expect)(Math.abs(primaryBounds.height - splitterBounds.height)).toBeLessThan(tolerance);
+        }));
+        (0, fixtures_1.test)("hides resizer and stretches single panel when first child has when=false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" testId="splitter">
+          <Stack when="{false}" backgroundColor="lightblue" height="100%" testId="primary">Primary</Stack>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary">Secondary</Stack>
+        </Splitter>
+      `);
+            // Primary panel should not be visible (filtered out by when=false)
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).not.toBeVisible();
+            // Secondary panel should be visible
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+            // Resizer should not be visible when only one child is rendered
+            const resizer = page.locator('[class*="resizer"]');
+            const isResizerVisible = yield resizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isResizerVisible).toBe(false);
+            // Secondary panel should stretch to fill the entire splitter container
+            const splitter = page.getByTestId("splitter");
+            const secondary = page.getByTestId("secondary");
+            const splitterBounds = yield (0, component_test_helpers_1.getBounds)(splitter);
+            const secondaryBounds = yield (0, component_test_helpers_1.getBounds)(secondary);
+            // Allow small tolerance for borders/padding
+            const tolerance = 5;
+            (0, fixtures_1.expect)(Math.abs(secondaryBounds.width - splitterBounds.width)).toBeLessThan(tolerance);
+            (0, fixtures_1.expect)(Math.abs(secondaryBounds.height - splitterBounds.height)).toBeLessThan(tolerance);
+        }));
+        (0, fixtures_1.test)("shows resizer when both children are visible", (_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">Primary</Stack>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary">Secondary</Stack>
+        </Splitter>
+      `);
+            // Both panels should be visible
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+            // Resizer should be visible when both children are rendered
+            const resizer = page.locator('[class*="resizer"]');
+            yield (0, fixtures_1.expect)(resizer).toBeVisible();
+        }));
+        (0, fixtures_1.test)("dynamically updates when child visibility changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment var.showSecondary="{true}">
+          <Splitter height="200px" width="400px" testId="splitter">
+            <Stack backgroundColor="lightblue" height="100%" testId="primary">Primary</Stack>
+            <Stack when="{showSecondary}" backgroundColor="darksalmon" height="100%" testId="secondary">Secondary</Stack>
+          </Splitter>
+          <Button testId="toggle" onClick="showSecondary = !showSecondary">Toggle Secondary</Button>
+        </Fragment>
+      `);
+            // Initially both panels should be visible
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+            // Resizer should be visible
+            const resizer = page.locator('[class*="resizer"]');
+            yield (0, fixtures_1.expect)(resizer).toBeVisible();
+            // Click toggle to hide secondary panel
+            yield page.getByTestId("toggle").click();
+            // Primary should still be visible, secondary should be hidden
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).not.toBeVisible();
+            // Resizer should now be hidden
+            const isResizerVisible = yield resizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isResizerVisible).toBe(false);
+            // Primary panel should stretch to fill container
+            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 tolerance = 5;
+            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - splitterBounds.width)).toBeLessThan(tolerance);
+            // Click toggle again to show secondary panel
+            yield page.getByTestId("toggle").click();
+            // Both panels should be visible again
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+            // Resizer should be visible again
+            yield (0, fixtures_1.expect)(resizer).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles when condition with complex expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Fragment var.count="{0}">
+          <Splitter height="200px" width="400px" testId="splitter">
+            <Stack backgroundColor="lightblue" height="100%" testId="primary">Primary</Stack>
+            <Stack when="{count > 5}" backgroundColor="darksalmon" height="100%" testId="secondary">Secondary</Stack>
+          </Splitter>
+          <Button testId="increment" onClick="count = count + 1">Increment</Button>
+          <Text testId="count-display">{count}</Text>
+        </Fragment>
+      `);
+            // Initially only primary should be visible (count = 0, which is not > 5)
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).not.toBeVisible();
+            // Resizer should be hidden
+            const resizer = page.locator('[class*="resizer"]');
+            const isResizerVisible1 = yield resizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isResizerVisible1).toBe(false);
+            // Click increment 6 times to make count > 5
+            for (let i = 0; i < 6; i++) {
+                yield page.getByTestId("increment").click();
+            }
+            yield (0, fixtures_1.expect)(page.getByTestId("count-display")).toHaveText("6");
+            // Now both panels should be visible
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
+            // Resizer should be visible
+            yield (0, fixtures_1.expect)(resizer).toBeVisible();
+        }));
+        (0, fixtures_1.test)("works with multiple conditionally hidden children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" testId="splitter">
+          <Stack when="{false}" backgroundColor="lightblue" height="100%" testId="child1">Child 1</Stack>
+          <Stack when="{false}" backgroundColor="darksalmon" height="100%" testId="child2">Child 2</Stack>
+          <Stack backgroundColor="lightgreen" height="100%" testId="child3">Child 3</Stack>
+        </Splitter>
+      `);
+            // Only child3 should be visible
+            yield (0, fixtures_1.expect)(page.getByTestId("child1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("child2")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("child3")).toBeVisible();
+            // Resizer should be hidden (only one visible child)
+            const resizer = page.locator('[class*="resizer"]');
+            const isResizerVisible = yield resizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isResizerVisible).toBe(false);
+            // Child3 should stretch to fill container
+            const splitter = page.getByTestId("splitter");
+            const child3 = page.getByTestId("child3");
+            const splitterBounds = yield (0, component_test_helpers_1.getBounds)(splitter);
+            const child3Bounds = yield (0, component_test_helpers_1.getBounds)(child3);
+            const tolerance = 5;
+            (0, fixtures_1.expect)(Math.abs(child3Bounds.width - splitterBounds.width)).toBeLessThan(tolerance);
+        }));
+        (0, fixtures_1.test)("handles all children being conditionally hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" testId="splitter">
+          <Stack when="{false}" backgroundColor="lightblue" height="100%" testId="child1">Child 1</Stack>
+          <Stack when="{false}" backgroundColor="darksalmon" height="100%" testId="child2">Child 2</Stack>
+        </Splitter>
+      `);
+            // No children should be visible
+            yield (0, fixtures_1.expect)(page.getByTestId("child1")).not.toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("child2")).not.toBeVisible();
+            // Splitter should still be visible but empty
+            yield (0, fixtures_1.expect)(page.getByTestId("splitter")).toBeVisible();
+            // Resizer should not be visible
+            const resizer = page.locator('[class*="resizer"]');
+            const isResizerVisible = yield resizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isResizerVisible).toBe(false);
+        }));
+        (0, fixtures_1.test)("works with different orientations", (_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">Primary</Stack>
+          <Stack when="{false}" backgroundColor="darksalmon" height="100%" testId="secondary">Secondary</Stack>
+        </Splitter>
+      `);
+            // Primary should be visible, secondary should not
+            yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
+            yield (0, fixtures_1.expect)(page.getByTestId("secondary")).not.toBeVisible();
+            // Resizer should be hidden
+            const resizer = page.locator('[class*="resizer"]');
+            const isResizerVisible = yield resizer.isVisible().catch(() => false);
+            (0, fixtures_1.expect)(isResizerVisible).toBe(false);
+            // Primary should stretch horizontally to fill container
+            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 tolerance = 5;
+            (0, fixtures_1.expect)(Math.abs(primaryBounds.width - splitterBounds.width)).toBeLessThan(tolerance);
+        }));
+    });
     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(`
@@ -282,6 +480,54 @@ fixtures_1.test.describe("Basic Functionality", () => {
             const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
             (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance
         }));
+        (0, fixtures_1.test)("negative maxPrimarySize in pixels constrains from end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="-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 right
+            yield driver.dragResizer(350, 0);
+            // Primary should not be larger than 400 - 100 = 300px
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
+        }));
+        (0, fixtures_1.test)("negative maxPrimarySize in percentage constrains from end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="-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 driver = yield createSplitterDriver(splitter);
+            // Try to drag resizer far to the right
+            yield driver.dragResizer(350, 0);
+            // Primary should not be larger than 75% of 400px = 300px
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
+        }));
+        (0, fixtures_1.test)("negative maxPrimarySize works in vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="400px" width="200px" orientation="vertical" maxPrimarySize="-100px" testId="splitter">
+          <Stack backgroundColor="lightblue" width="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" width="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Try to drag resizer far down
+            yield driver.dragResizer(0, 350);
+            // Primary should not be larger than 400 - 100 = 300px height
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.height).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
+        }));
     });
     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 }) {
@@ -540,4 +786,71 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         yield (0, fixtures_1.expect)(page.getByTestId("primary")).toBeVisible();
         yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
     }));
+    (0, fixtures_1.test)("conditional rendering works with different child component types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Splitter height="200px" width="400px" testId="splitter">
+        <VStack when="{false}" backgroundColor="lightblue" height="100%" testId="vstack">
+          <Text>VStack Content</Text>
+        </VStack>
+        <Text backgroundColor="darksalmon" height="100%" testId="text">Just Text</Text>
+        <Fragment when="{false}" testId="fragment">
+          <Stack backgroundColor="lightgreen" height="100%">Fragment Content</Stack>
+        </Fragment>
+      </Splitter>
+    `);
+        // Only the Text component should be visible
+        yield (0, fixtures_1.expect)(page.getByTestId("vstack")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("fragment")).not.toBeVisible();
+        // Resizer should be hidden since only one child is visible
+        const resizer = page.locator('[class*="resizer"]');
+        const isResizerVisible = yield resizer.isVisible().catch(() => false);
+        (0, fixtures_1.expect)(isResizerVisible).toBe(false);
+        // Text component should stretch to fill container
+        const splitter = page.getByTestId("splitter");
+        const text = page.getByTestId("text");
+        const splitterBounds = yield (0, component_test_helpers_1.getBounds)(splitter);
+        const textBounds = yield (0, component_test_helpers_1.getBounds)(text);
+        const tolerance = 5;
+        (0, fixtures_1.expect)(Math.abs(textBounds.width - splitterBounds.width)).toBeLessThan(tolerance);
+    }));
+});
+// =============================================================================
+// UTILITY FUNCTION TESTS
+// =============================================================================
+fixtures_1.test.describe("Utility Functions", () => {
+    fixtures_1.test.describe("parseSize", () => {
+        (0, fixtures_1.test)("parses positive pixel values", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("100px", 400)).toBe(100);
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("200px", 400)).toBe(200);
+        });
+        (0, fixtures_1.test)("parses positive percentage values", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("50%", 400)).toBe(200);
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("25%", 400)).toBe(100);
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("100%", 400)).toBe(400);
+        });
+        (0, fixtures_1.test)("parses negative pixel values (calculated from end)", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-100px", 400)).toBe(300); // 400 - 100
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-50px", 400)).toBe(350); // 400 - 50
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-200px", 600)).toBe(400); // 600 - 200
+        });
+        (0, fixtures_1.test)("parses negative percentage values (calculated from end)", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-20%", 400)).toBe(320); // 80% of 400
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-50%", 400)).toBe(200); // 50% of 400
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-10%", 600)).toBe(540); // 90% of 600
+        });
+        (0, fixtures_1.test)("throws error for invalid format", () => {
+            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("100", 400)).toThrow("Invalid size format. Use px or %.");
+            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("100em", 400)).toThrow("Invalid size format. Use px or %.");
+            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("invalid", 400)).toThrow("Invalid size format. Use px or %.");
+        });
+    });
+    fixtures_1.test.describe("toPercentage", () => {
+        (0, fixtures_1.test)("converts pixel size to percentage", () => {
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(200, 400)).toBe(50);
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(100, 400)).toBe(25);
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(400, 400)).toBe(100);
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(0, 400)).toBe(0);
+        });
+    });
 });