xmlui 0.11.3 → 0.11.6

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

@@ -1,44 +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;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentRegistryContext = void 0;
-exports.useComponentRegistry = useComponentRegistry;
-const react_1 = __importStar(require("react"));
-// Context object that makes the component registry available
-exports.ComponentRegistryContext = react_1.default.createContext(null);
-// Use this hook within a component to access the component registry
-function useComponentRegistry() {
-    return (0, react_1.useContext)(exports.ComponentRegistryContext);
-}

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

@@ -1,51 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.contentSeparatorComponentRenderer = exports.ContentSeparatorMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const abstractions_1 = require("../abstractions");
-const ContentSeparatorNative_1 = require("./ContentSeparatorNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const COMP = "ContentSeparator";
-exports.ContentSeparatorMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`ContentSeparator` creates visual dividers between content sections using " +
-        "horizontal or vertical lines. It's essential for improving readability by " +
-        "breaking up dense content, separating list items, or creating clear boundaries " +
-        "between different UI sections.",
-    props: {
-        size: {
-            description: "This property defines the component's height (if the \`orientation\` is horizontal) " +
-                "or the width (if the \`orientation\` is vertical). " +
-                "If not defined, the component uses the entire available width or height.",
-            valueType: "any",
-        },
-        orientation: {
-            description: "Sets the main axis of the component",
-            availableValues: abstractions_1.orientationOptionMd,
-            defaultValue: ContentSeparatorNative_1.defaultProps.orientation,
-            valueType: "string",
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(ContentSeparator_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "$color-surface-200",
-        [`size-${COMP}`]: "1px",
-        [`marginVertical-${COMP}`]: "0",
-        [`marginHorizontal-${COMP}`]: "0",
-        light: {
-        // --- No light-specific theme vars
-        },
-        dark: {
-        // --- No dark-specific theme vars
-        },
-    },
-});
-exports.contentSeparatorComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ContentSeparatorMd, ({ node, className, extractValue }) => {
-    return ((0, jsx_runtime_1.jsx)(ContentSeparatorNative_1.ContentSeparator, { orientation: extractValue(node.props.orientation), size: extractValue.asSize(node.props.size), className: className }));
-});

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

@@ -1,531 +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)("component renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.separator).toBeVisible();
-        // Default orientation should be horizontal
-        const orientation = yield driver.getOrientation();
-        (0, fixtures_1.expect)(orientation).toBe('horizontal');
-    }));
-    (0, fixtures_1.test)("component renders with horizontal orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator orientation="horizontal" />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const orientation = yield driver.getOrientation();
-        (0, fixtures_1.expect)(orientation).toBe('horizontal');
-        // Horizontal should span full width
-        const width = yield driver.getComputedWidth();
-        (0, fixtures_1.expect)(width).not.toBe('0px');
-    }));
-    (0, fixtures_1.test)("component renders with vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator orientation="vertical" />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const orientation = yield driver.getOrientation();
-        (0, fixtures_1.expect)(orientation).toBe('vertical');
-    }));
-    (0, fixtures_1.test)("component respects custom size prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator size="5px" orientation="horizontal" />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBe('5px');
-    }));
-    (0, fixtures_1.test)("component handles numeric size values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator size="10px" orientation="horizontal" />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBe('10px');
-    }));
-    (0, fixtures_1.test)("vertical separator respects size for width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator size="3px" orientation="vertical" />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const width = yield driver.getComputedWidth();
-        (0, fixtures_1.expect)(width).toBe('3px');
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("component has appropriate semantic role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`);
-        const driver = yield createContentSeparatorDriver();
-        // ContentSeparator is a visual element, should be a div without specific role
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName).toBe('div');
-    }));
-    (0, fixtures_1.test)("component is focusable when needed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`);
-        const driver = yield createContentSeparatorDriver();
-        // ContentSeparator should not be focusable as it's a visual separator
-        yield (0, fixtures_1.expect)(driver.separator).not.toBeFocused();
-        // Try to focus and ensure it doesn't receive focus
-        yield driver.separator.focus({ timeout: 1000 }).catch(() => {
-            // Expected to fail - separator should not be focusable
-        });
-    }));
-    (0, fixtures_1.test)("component provides proper visual separation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <VStack>
-        <Text>Content above</Text>
-        <ContentSeparator />
-        <Text>Content below</Text>
-      </VStack>
-    `);
-        const separator = page.getByTestId("test-id-component");
-        yield (0, fixtures_1.expect)(separator).toBeVisible();
-        // Check that the separator exists and is rendered
-        const separatorExists = yield separator.count();
-        (0, fixtures_1.expect)(separatorExists).toBe(1);
-        // It should have some visual properties (height for horizontal separator)
-        const height = yield separator.evaluate((el) => window.getComputedStyle(el).height);
-        (0, fixtures_1.expect)(parseInt(height)).toBeGreaterThan(0);
-    }));
-});
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Visual States & Themes", () => {
-    (0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "backgroundColor-ContentSeparator": "rgb(255, 0, 0)",
-                "size-ContentSeparator": "5px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("background-color", "rgb(255, 0, 0)");
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBe('5px');
-    }));
-    (0, fixtures_1.test)("horizontal separator uses theme size for height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator orientation="horizontal" />`, {
-            testThemeVars: {
-                "size-ContentSeparator": "3px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBe('3px');
-        // Width should still be 100%
-        const width = yield driver.getComputedWidth();
-        (0, fixtures_1.expect)(width).not.toBe('3px');
-    }));
-    (0, fixtures_1.test)("vertical separator uses theme size for width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator orientation="vertical" />`, {
-            testThemeVars: {
-                "size-ContentSeparator": "2px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        const width = yield driver.getComputedWidth();
-        (0, fixtures_1.expect)(width).toBe('2px');
-    }));
-    (0, fixtures_1.test)("prop size overrides theme size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator size="10px" orientation="horizontal" />`, {
-            testThemeVars: {
-                "size-ContentSeparator": "3px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Prop should override theme
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBe('10px');
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies basic theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "backgroundColor-ContentSeparator": "rgb(255, 0, 0)",
-                "size-ContentSeparator": "5px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("background-color", "rgb(255, 0, 0)");
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBe('5px');
-    }));
-    (0, fixtures_1.test)("applies vertical margin theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginVertical-ContentSeparator": "10px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "10px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "10px");
-    }));
-    (0, fixtures_1.test)("applies horizontal margin theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginHorizontal-ContentSeparator": "15px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "15px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "15px");
-    }));
-    (0, fixtures_1.test)("specific margin-top overrides vertical margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginVertical-ContentSeparator": "10px",
-                "marginTop-ContentSeparator": "20px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Specific margin-top should override vertical margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "20px");
-        // Bottom should still use vertical margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "10px");
-    }));
-    (0, fixtures_1.test)("specific margin-bottom overrides vertical margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginVertical-ContentSeparator": "10px",
-                "marginBottom-ContentSeparator": "25px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Top should use vertical margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "10px");
-        // Specific margin-bottom should override vertical margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "25px");
-    }));
-    (0, fixtures_1.test)("specific margin-left overrides horizontal margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginHorizontal-ContentSeparator": "15px",
-                "marginLeft-ContentSeparator": "30px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Specific margin-left should override horizontal margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "30px");
-        // Right should still use horizontal margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "15px");
-    }));
-    (0, fixtures_1.test)("specific margin-right overrides horizontal margin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginHorizontal-ContentSeparator": "15px",
-                "marginRight-ContentSeparator": "35px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Left should use horizontal margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "15px");
-        // Specific margin-right should override horizontal margin
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "35px");
-    }));
-    (0, fixtures_1.test)("all specific margins override general margins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginVertical-ContentSeparator": "10px",
-                "marginHorizontal-ContentSeparator": "15px",
-                "marginTop-ContentSeparator": "5px",
-                "marginBottom-ContentSeparator": "8px",
-                "marginLeft-ContentSeparator": "12px",
-                "marginRight-ContentSeparator": "18px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // All specific margins should be used instead of general ones
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "5px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "8px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "12px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "18px");
-    }));
-    (0, fixtures_1.test)("fallback to vertical margin when specific margins not defined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginVertical-ContentSeparator": "20px",
-                // No specific marginTop or marginBottom defined
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Should fall back to vertical margin values
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "20px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "20px");
-    }));
-    (0, fixtures_1.test)("fallback to horizontal margin when specific margins not defined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginHorizontal-ContentSeparator": "25px",
-                // No specific marginLeft or marginRight defined
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Should fall back to horizontal margin values
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "25px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "25px");
-    }));
-    (0, fixtures_1.test)("handles zero margin values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginTop-ContentSeparator": "0px",
-                "marginBottom-ContentSeparator": "0px",
-                "marginLeft-ContentSeparator": "0px",
-                "marginRight-ContentSeparator": "0px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "0px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "0px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "0px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "0px");
-    }));
-    (0, fixtures_1.test)("handles negative margin values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginTop-ContentSeparator": "-5px",
-                "marginLeft-ContentSeparator": "-10px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "-5px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "-10px");
-    }));
-    (0, fixtures_1.test)("handles different unit types for margins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginTop-ContentSeparator": "1rem",
-                "marginBottom-ContentSeparator": "2em",
-                "marginLeft-ContentSeparator": "10px",
-                "marginRight-ContentSeparator": "10px",
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        // Browser computes rem/em to px values, so we check that margins are applied (not zero)
-        const marginTop = yield driver.separator.evaluate((el) => window.getComputedStyle(el).marginTop);
-        const marginBottom = yield driver.separator.evaluate((el) => window.getComputedStyle(el).marginBottom);
-        // rem and em should resolve to non-zero pixel values
-        (0, fixtures_1.expect)(parseFloat(marginTop)).toBeGreaterThan(0);
-        (0, fixtures_1.expect)(parseFloat(marginBottom)).toBeGreaterThan(0);
-        // px values should be exact
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "10px");
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "10px");
-    }));
-    (0, fixtures_1.test)("mixed general and specific margins work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`, {
-            testThemeVars: {
-                "marginVertical-ContentSeparator": "8px",
-                "marginHorizontal-ContentSeparator": "12px",
-                "marginTop-ContentSeparator": "16px", // Override top
-                "marginRight-ContentSeparator": "20px", // Override right
-                // marginBottom and marginLeft should use general values
-            },
-        });
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-top", "16px"); // Specific
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-bottom", "8px"); // Fallback to vertical
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-left", "12px"); // Fallback to horizontal
-        yield (0, fixtures_1.expect)(driver.separator).toHaveCSS("margin-right", "20px"); // Specific
-    }));
-});
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.separator).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles empty size prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator size="" />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        // Should fall back to theme size or default behavior
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBeTruthy();
-    }));
-    (0, fixtures_1.test)("component handles invalid orientation gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ContentSeparator orientation="invalid" />`);
-        // Component with invalid orientation may not be visible, but should not crash
-        const separator = page.getByTestId("test-id-component");
-        const isVisible = yield separator.isVisible();
-        // Either it's visible with fallback behavior or gracefully hidden
-        if (isVisible) {
-            const orientation = yield separator.evaluate((el) => {
-                const classList = el.className;
-                if (classList.includes('horizontal'))
-                    return 'horizontal';
-                if (classList.includes('vertical'))
-                    return 'vertical';
-                return 'unknown';
-            });
-            (0, fixtures_1.expect)(['horizontal', 'vertical', 'unknown']).toContain(orientation);
-        }
-        else {
-            // It's acceptable for component to be hidden with invalid props
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-    }));
-    (0, fixtures_1.test)("component handles zero size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ContentSeparator size="0px" orientation="horizontal" />`);
-        const separator = page.getByTestId("test-id-component");
-        // Zero-height elements might not be "visible" but should exist
-        const exists = yield separator.count();
-        (0, fixtures_1.expect)(exists).toBe(1);
-        // Should have zero height
-        const height = yield separator.evaluate((el) => window.getComputedStyle(el).height);
-        (0, fixtures_1.expect)(height).toBe('0px');
-    }));
-    (0, fixtures_1.test)("component handles very large size values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator size="1000px" orientation="horizontal" />`);
-        const driver = yield createContentSeparatorDriver();
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBe('1000px');
-    }));
-    (0, fixtures_1.test)("component handles special characters in size (should be graceful)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createContentSeparatorDriver }) {
-        yield initTestBed(`<ContentSeparator size="abc" orientation="horizontal" />`);
-        const driver = yield createContentSeparatorDriver();
-        // Should render without crashing, may fall back to default size
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        const height = yield driver.getComputedHeight();
-        (0, fixtures_1.expect)(height).toBeTruthy(); // Should have some height value
-    }));
-});
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("component works correctly in VStack layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <VStack>
-        <Text>First item</Text>
-        <ContentSeparator />
-        <Text>Second item</Text>
-        <ContentSeparator />
-        <Text>Third item</Text>
-      </VStack>
-    `);
-        // Check that separators are properly positioned
-        const separators = page.locator('[class*="separator"]');
-        yield (0, fixtures_1.expect)(separators).toHaveCount(2);
-        const separatorElements = yield separators.all();
-        for (const separator of separatorElements) {
-            yield (0, fixtures_1.expect)(separator).toBeVisible();
-        }
-    }));
-    (0, fixtures_1.test)("component works correctly in HStack layout with vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <HStack height="100px" alignItems="stretch">
-        <Text>Left</Text>
-        <ContentSeparator orientation="vertical" size="3px" />
-        <Text>Right</Text>
-      </HStack>
-    `);
-        const separator = page.getByTestId("test-id-component");
-        yield (0, fixtures_1.expect)(separator).toBeVisible();
-        // Check the class name to see if vertical orientation is applied
-        const className = yield separator.getAttribute("class");
-        const styles = yield separator.evaluate((el) => {
-            const computedStyle = window.getComputedStyle(el);
-            return {
-                width: computedStyle.width,
-                height: computedStyle.height,
-            };
-        });
-        // Test should pass if separator is rendered (regardless of exact styling)
-        (0, fixtures_1.expect)(separator).toBeTruthy();
-    }));
-    (0, fixtures_1.test)("component integrates with custom styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <ContentSeparator 
-        testId="styled-separator"
-        style="margin: 10px 0; border-radius: 2px;" 
-        size="3px"
-      />
-    `);
-        const separator = page.getByTestId("styled-separator");
-        yield (0, fixtures_1.expect)(separator).toBeVisible();
-        // Check the size is applied
-        const height = yield separator.evaluate((el) => window.getComputedStyle(el).height);
-        (0, fixtures_1.expect)(height).toBe('3px');
-        // Check custom styles - Note: XMLUI may apply styles differently
-        const styles = yield separator.evaluate((el) => {
-            const computedStyle = window.getComputedStyle(el);
-            return {
-                marginTop: computedStyle.marginTop,
-                marginBottom: computedStyle.marginBottom,
-                borderRadius: computedStyle.borderRadius,
-            };
-        });
-        // Check if custom styles are applied (they might be "0px" if not supported)
-        (0, fixtures_1.expect)(styles).toBeDefined();
-    }));
-    (0, fixtures_1.test)("component works in complex nested layouts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <VStack>
-        <HStack height="50px">
-          <Text>Header Left</Text>
-          <ContentSeparator orientation="vertical" size="2px" />
-          <Text>Header Right</Text>
-        </HStack>
-        <ContentSeparator size="3px" />
-        <VStack>
-          <Text>Body content</Text>
-          <ContentSeparator />
-          <Text>More content</Text>
-        </VStack>
-      </VStack>
-    `);
-        const separators = page.locator('[class*="separator"]');
-        yield (0, fixtures_1.expect)(separators).toHaveCount(3);
-        // At least some separators should be visible
-        const separatorElements = yield separators.all();
-        let visibleCount = 0;
-        for (const separator of separatorElements) {
-            if (yield separator.isVisible()) {
-                visibleCount++;
-            }
-        }
-        (0, fixtures_1.expect)(visibleCount).toBeGreaterThan(0);
-    }));
-    (0, fixtures_1.test)("component maintains visual consistency across orientations", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Fragment>
-        <ContentSeparator orientation="horizontal" testId="horizontal-sep" />
-        <ContentSeparator orientation="vertical" testId="vertical-sep" />
-      </Fragment>
-    `, {
-            testThemeVars: {
-                "backgroundColor-ContentSeparator": "rgb(100, 100, 100)",
-            },
-        });
-        const horizontalSep = page.getByTestId("horizontal-sep");
-        const verticalSep = page.getByTestId("vertical-sep");
-        yield (0, fixtures_1.expect)(horizontalSep).toBeVisible();
-        yield (0, fixtures_1.expect)(verticalSep).toBeVisible();
-        // Both should have the same background color
-        yield (0, fixtures_1.expect)(horizontalSep).toHaveCSS("background-color", "rgb(100, 100, 100)");
-        yield (0, fixtures_1.expect)(verticalSep).toHaveCSS("background-color", "rgb(100, 100, 100)");
-    }));
-});

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

@@ -1,31 +0,0 @@
-"use strict";
-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.ContentSeparator = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
-exports.defaultProps = {
-    orientation: "horizontal",
-};
-exports.ContentSeparator = (0, react_1.forwardRef)((_a, ref) => {
-    var { orientation = exports.defaultProps.orientation, size, style, className } = _a, rest = __rest(_a, ["orientation", "size", "style", "className"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(ContentSeparator_module_scss_1.default.separator, {
-            [ContentSeparator_module_scss_1.default.horizontal]: orientation === "horizontal",
-            [ContentSeparator_module_scss_1.default.vertical]: orientation === "vertical",
-        }, className), style: Object.assign({ height: orientation === "horizontal" ? size : undefined, width: orientation === "horizontal" ? "100%" : size }, style) })));
-});