xmlui 0.11.3 → 0.11.4

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 ` +
@@ -81,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

@@ -36,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(`
@@ -589,6 +786,34 @@ 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

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

@@ -63,10 +63,9 @@ exports.defaultProps = {
     floating: false,
 };
 const Splitter = (_a) => {
-    var _b;
-    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 } = _a, rest = __rest(_a, ["initialPrimarySize", "minPrimarySize", "maxPrimarySize", "orientation", "children", "style", "className", "swapped", "floating", "splitterTemplate", "resize"]);
-    const [sizePercentage, setSizePercentage] = (0, react_1.useState)(50); // Store as percentage
-    const [containerSize, setContainerSize] = (0, react_1.useState)(0);
+    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);
@@ -76,6 +75,11 @@ const Splitter = (_a) => {
     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)
@@ -105,10 +109,8 @@ const Splitter = (_a) => {
             const initialPercentage = (0, utils_1.toPercentage)(initialParsedSize, newContainerSize);
             setSizePercentage(initialPercentage);
             if (resize) {
-                resize([
-                    initialPercentage,
-                    100 - initialPercentage,
-                ]);
+                const actualPrimarySize = (initialPercentage / 100) * newContainerSize;
+                resize([actualPrimarySize, newContainerSize - actualPrimarySize]);
             }
         }
     }, [initialPrimarySize, orientation, resize, splitter, swapped]);
@@ -183,21 +185,21 @@ const Splitter = (_a) => {
     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: react_1.default.Children.count(children) > 1 ? ((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)({
+        }, 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: react_1.default.Children.toArray(children)[0] }), !floating && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Splitter_module_scss_1.default.resizer, {
+                    }), 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: react_1.default.Children.toArray(children)[1] }), floating && ((0, jsx_runtime_1.jsx)("div", { ref: (fr) => setFloatingResizer(fr), className: (0, classnames_1.default)(Splitter_module_scss_1.default.floatingResizer, {
+                    }), 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: ((_b = react_1.default.Children.toArray(children)) === null || _b === void 0 ? void 0 : _b[0]) && ((0, jsx_runtime_1.jsx)("div", { className: Splitter_module_scss_1.default.panel, children: react_1.default.Children.toArray(children)[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/Switch/Switch.js

@@ -55,12 +55,12 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
-        [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
-        [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
-        [`borderColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
-        [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
-        [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
+        [`borderColor-checked-${COMP}--error`]: `$borderColor-${COMP}--error`,
+        [`backgroundColor-checked-${COMP}--error`]: `$borderColor-${COMP}--error`,
+        [`borderColor-checked-${COMP}--warning`]: `$borderColor-${COMP}--warning`,
+        [`backgroundColor-checked-${COMP}--warning`]: `$borderColor-${COMP}--warning`,
+        [`borderColor-checked-${COMP}--success`]: `$borderColor-${COMP}--success`,
+        [`backgroundColor-checked-${COMP}--success`]: `$borderColor-${COMP}--success`,
         [`backgroundColor-${COMP}`]: "$color-surface-0",
         [`borderColor-${COMP}`]: "$color-surface-200",
         [`borderWidth-${COMP}`]: "1px",

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

@@ -689,33 +689,6 @@ fixtures_1.test.describe("Theme Vars", () => {
         const driver = yield createCheckboxDriver();
         yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(128, 128, 128)");
     }));
-    (0, fixtures_1.test)("valid borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
-        yield initTestBed(`<Switch validationStatus="valid" />`, {
-            testThemeVars: {
-                "borderColor-checked-Switch-success": "rgb(0, 255, 0)",
-            },
-        });
-        const driver = yield createCheckboxDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("warning borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
-        yield initTestBed(`<Switch validationStatus="warning" />`, {
-            testThemeVars: {
-                "borderColor-checked-Switch-warning": "rgb(255, 165, 0)",
-            },
-        });
-        const driver = yield createCheckboxDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("error borderColor", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
-        yield initTestBed(`<Switch validationStatus="error" />`, {
-            testThemeVars: {
-                "borderColor-checked-Switch-error": "rgb(255, 0, 0)",
-            },
-        });
-        const driver = yield createCheckboxDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    }));
     (0, fixtures_1.test)("outlineWidth on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver }) {
         yield initTestBed(`<Switch />`, {
             testThemeVars: {
@@ -738,29 +711,54 @@ fixtures_1.test.describe("Theme Vars", () => {
     }));
 });
 // =============================================================================
-// VALIDATION STATUS TESTS
+// VALIDATION TESTS
 // =============================================================================
 fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)("validationStatus=error correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
-        yield initTestBed(`<Switch validationStatus="error" />`);
-        const driver = yield createCheckboxDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveClass(/error/);
-    }));
-    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
-        yield initTestBed(`<Switch validationStatus="warning" />`);
-        const driver = yield createCheckboxDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveClass(/warning/);
-    }));
-    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
-        yield initTestBed(`<Switch validationStatus="valid" />`);
-        const driver = yield createCheckboxDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveClass(/valid/);
+    (0, fixtures_1.test)(`applies correct borderColor --default`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Switch testId="test" />`, {
+            testThemeVars: {
+                "borderColor-Switch": "rgb(255, 0, 0)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
     }));
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCheckboxDriver, }) {
-        yield initTestBed(`<Switch validationStatus="invalid-status" />`);
-        const driver = yield createCheckboxDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    (0, fixtures_1.test)(`applies correct backgroundColor when checked --default`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Switch testId="test" initialValue="true" />`, {
+            testThemeVars: {
+                "backgroundColor-checked-Switch": "rgb(240, 240, 240)",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
     }));
+    (0, fixtures_1.test)(`applies correct borderColor on hover`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Switch testId="test" />`, {
+            testThemeVars: { [`borderColor-Switch--default--hover`]: "rgb(0, 0, 0)" },
+        });
+        yield page.getByTestId("test").hover();
+        yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
+    }));
+    [
+        { value: "--warning", prop: 'validationStatus="warning"' },
+        { value: "--error", prop: 'validationStatus="error"' },
+        { value: "--success", prop: 'validationStatus="valid"' },
+    ].forEach((variant) => {
+        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<Switch testId="test" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`borderColor-Switch${variant.value === "--default" ? "" : variant.value}`]: "rgb(255, 0, 0)",
+                },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+        }));
+        (0, fixtures_1.test)(`applies correct backgroundColor when checked ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`<Switch testId="test" initialValue="true" ${variant.prop} />`, {
+                testThemeVars: {
+                    [`backgroundColor-checked-Switch${variant.value === "--default" ? "" : variant.value}`]: "rgb(240, 240, 240)",
+                },
+            });
+            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
+        }));
+    });
 });
 // =============================================================================
 // EDGE CASE TESTS