xmlui 0.11.4 → 0.11.7

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

@@ -1,237 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_2 = require("react");
-const react_slider_1 = require("@radix-ui/react-slider");
-const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const classnames_1 = __importDefault(require("classnames"));
-const TooltipNative_1 = require("../Tooltip/TooltipNative");
-const lodash_es_1 = require("lodash-es");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-exports.defaultProps = {
-    step: 1,
-    min: 0,
-    max: 10,
-    enabled: true,
-    validationStatus: "none",
-    tabIndex: -1,
-    showValues: true,
-    valueFormat: (value) => value.toString(),
-    minStepsBetweenThumbs: 1,
-};
-const parseValue = (val, defaultVal) => {
-    if (typeof val === "number") {
-        return val;
-    }
-    else if (typeof val === "string") {
-        const parsed = parseFloat(val);
-        if (!(0, lodash_es_1.isNaN)(parsed)) {
-            return parsed;
-        }
-    }
-    return defaultVal;
-};
-// Helper function to ensure value is properly formatted
-const formatValue = (val, defaultVal = 0, minVal, maxVal) => {
-    const clampValue = (value) => {
-        if (minVal !== undefined && value < minVal)
-            return minVal;
-        if (maxVal !== undefined && value > maxVal)
-            return maxVal;
-        return value;
-    };
-    if (val === undefined) {
-        return [clampValue(defaultVal)];
-    }
-    if (typeof val === "number") {
-        return [clampValue(val)];
-    }
-    if (Array.isArray(val) && val.length > 0) {
-        return val.map(clampValue);
-    }
-    return [clampValue(defaultVal)];
-};
-exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
-    var { id, style, className, step = exports.defaultProps.step, min = exports.defaultProps.min, max = exports.defaultProps.max, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value, autoFocus, readOnly, tabIndex = exports.defaultProps.tabIndex, required, validationStatus = exports.defaultProps.validationStatus, initialValue, minStepsBetweenThumbs = exports.defaultProps.minStepsBetweenThumbs, rangeStyle, thumbStyle, showValues = exports.defaultProps.showValues, valueFormat = exports.defaultProps.valueFormat } = _a, rest = __rest(_a, ["id", "style", "className", "step", "min", "max", "inverted", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "value", "autoFocus", "readOnly", "tabIndex", "required", "validationStatus", "initialValue", "minStepsBetweenThumbs", "rangeStyle", "thumbStyle", "showValues", "valueFormat"]);
-    const inputRef = (0, react_1.useRef)(null);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(inputRef, forwardedRef) : inputRef;
-    const tooltipRef = (0, react_1.useRef)(null);
-    const thumbsRef = (0, react_1.useRef)([]);
-    min = parseValue(min, exports.defaultProps.min);
-    max = parseValue(max, exports.defaultProps.max);
-    // Initialize localValue properly
-    const [localValue, setLocalValue] = react_1.default.useState(() => formatValue(value || initialValue, min, min, max));
-    const [showTooltip, setShowTooltip] = react_1.default.useState(false);
-    const onShowTooltip = (0, react_1.useCallback)(() => setShowTooltip(true), []);
-    const onHideTooltip = (0, react_1.useCallback)(() => setShowTooltip(false), []);
-    // Process initialValue on mount
-    (0, react_1.useEffect)(() => {
-        let initialVal = min;
-        if (typeof initialValue === "string") {
-            try {
-                // Try to parse as JSON first (for arrays)
-                const parsed = JSON.parse(initialValue);
-                initialVal = parsed;
-            }
-            catch (e) {
-                // If not JSON, try to parse as number
-                const num = parseFloat(initialValue);
-                if (!(0, lodash_es_1.isNaN)(num)) {
-                    initialVal = num;
-                }
-            }
-        }
-        else if (typeof initialValue === "number") {
-            initialVal = initialValue;
-        }
-        else if (initialValue !== undefined) {
-            initialVal = initialValue;
-        }
-        // Format the value properly - single call to formatValue with bounds checking
-        const formattedValue = formatValue(initialVal, min, min, max);
-        setLocalValue(formattedValue);
-        // Notify parent component
-        if (updateState) {
-            updateState({
-                value: formattedValue.length === 1 ? formattedValue[0] : formattedValue,
-            }, { initial: true });
-        }
-    }, [initialValue, min, max, updateState]);
-    // Sync with external value changes
-    (0, react_1.useEffect)(() => {
-        if (value !== undefined) {
-            const formattedValue = formatValue(value, min, min, max);
-            setLocalValue(formattedValue);
-        }
-    }, [value, min, max]);
-    const updateValue = (0, react_1.useCallback)((value) => {
-        if (updateState) {
-            updateState({ value });
-        }
-        // Call onDidChange without extra arguments to maintain type compatibility
-        onDidChange(value);
-    }, [onDidChange, updateState]);
-    const onInputChange = (0, react_1.useCallback)((value) => {
-        if (readOnly) {
-            return;
-        }
-        setLocalValue(value);
-        // 👇 Force the DOM element to reflect the latest value synchronously
-        if (inputRef.current) {
-            inputRef.current.value = value;
-        }
-        if (value.length > 1) {
-            updateValue(value); // calls updateState + onDidChange
-        }
-        else if (value.length === 1) {
-            updateValue(value[0]);
-        }
-    }, [updateValue, readOnly]);
-    // Component APIs
-    const handleOnFocus = (0, react_1.useCallback)((ev) => {
-        onShowTooltip();
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
-    }, [onFocus, onShowTooltip]);
-    const handleOnBlur = (0, react_1.useCallback)((ev) => {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
-    }, [onBlur]);
-    const focus = (0, react_1.useCallback)(() => {
-        var _a;
-        // Focus the first available thumb
-        const firstThumb = thumbsRef.current.find(thumb => thumb !== null);
-        if (firstThumb) {
-            firstThumb.focus();
-        }
-        else {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, []);
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        if (readOnly || !enabled) {
-            return;
-        }
-        const formattedValue = formatValue(newValue, min, min, max);
-        const valueToUpdate = formattedValue.length === 1 ? formattedValue[0] : formattedValue;
-        updateValue(valueToUpdate);
-    });
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            focus,
-            setValue,
-        });
-    }, [focus, registerComponentApi, setValue]);
-    // Ensure we always have at least one thumb
-    const displayValue = localValue.length > 0 ? localValue : formatValue(undefined, min, min, max);
-    // Clean up thumbs ref array when number of thumbs changes
-    (0, react_1.useEffect)(() => {
-        thumbsRef.current = thumbsRef.current.slice(0, displayValue.length);
-    }, [displayValue.length]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, style: style, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderContainer, className), "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { ref: inputRef, minStepsBetweenThumbs: minStepsBetweenThumbs, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRoot, {
-                [Slider_module_scss_1.default.disabled]: !enabled,
-                [Slider_module_scss_1.default.readOnly]: readOnly,
-            }), max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, onMouseOver: onShowTooltip, onMouseLeave: onHideTooltip, onPointerDown: onShowTooltip, value: displayValue, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { "data-track": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
-                        [Slider_module_scss_1.default.disabled]: !enabled,
-                        [Slider_module_scss_1.default.readOnly]: readOnly,
-                        [Slider_module_scss_1.default.error]: validationStatus === "error",
-                        [Slider_module_scss_1.default.warning]: validationStatus === "warning",
-                        [Slider_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { "data-range": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
-                            [Slider_module_scss_1.default.disabled]: !enabled,
-                        }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: (el) => {
-                            thumbsRef.current[index] = el;
-                        }, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
-                            [Slider_module_scss_1.default.disabled]: !enabled,
-                        }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus && index === 0 }) }, index)))] }) })));
-});
-exports.Slider.displayName = "Slider";

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SlotHolder = exports.SlotMd = void 0;
-const metadata_helpers_1 = require("../metadata-helpers");
-const renderers_1 = require("../../components-core/renderers");
-const COMP = "Slot";
-exports.SlotMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "Placeholder in a reusable component. " +
-        "Signs the slot where the component's injected children should be rendered.",
-    props: {
-        name: (0, metadata_helpers_1.d)(`This optional property defines the name of the slot.`),
-    },
-    allowArbitraryProps: true,
-    opaque: true
-});
-exports.SlotHolder = (0, renderers_1.createPropHolderComponent)(COMP, exports.SlotMd);

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

@@ -1,368 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders children content in default slot", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Custom>
-        <Button label="Create" />
-        <Button label="Edit" />
-        <Button label="Delete" />
-      </Custom>
-    `, {
-            components: [
-                `
-        <Component name="Custom">
-          <Card>
-            <H3>Use these actions</H3>
-            <HStack>
-              <Slot />
-            </HStack>
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify all passed children are rendered in the slot
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Create" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Edit" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Delete" })).toBeVisible();
-        // Verify they are within the card structure from the component
-        yield (0, fixtures_1.expect)(page.getByText("Use these actions")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders default content when no children provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ActionBar />`, {
-            components: [
-                `
-        <Component name="ActionBar">
-          <Card>
-            <H3>Use these actions</H3>
-            <HStack>
-              <Slot>
-                <Button label="Default" />
-              </Slot>
-            </HStack>
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify default content is rendered when no children provided
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Default" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Use these actions")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("overrides default content with provided children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <ActionBar>
-        <Button label="Custom Button" />
-      </ActionBar>
-    `, {
-            components: [
-                `
-        <Component name="ActionBar">
-          <Card>
-            <H3>Use these actions</H3>
-            <HStack>
-              <Slot>
-                <Button label="Default" />
-              </Slot>
-            </HStack>
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify provided children override default content
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Custom Button" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Default" })).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with named slots using property template syntax", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <ActionBar>
-        <property name="headerTemplate">
-          <H2>Click one of these actions</H2>
-        </property>
-        <property name="footerTemplate">
-          <Text>Footer content goes here</Text>
-        </property>
-        <Button label="Create" />
-        <Button label="Edit" />
-        <Button label="Delete" />
-      </ActionBar>
-    `, {
-            components: [
-                `
-        <Component name="ActionBar">
-          <Card>
-            <Slot name="headerTemplate">
-              <H3>Use these actions</H3>
-            </Slot>
-            <HStack>
-              <Slot>
-                <Button label="Default" />
-              </Slot>
-            </HStack>
-            <Slot name="footerTemplate" />
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify named slots render their provided content
-        yield (0, fixtures_1.expect)(page.getByRole("heading", { name: "Click one of these actions" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Footer content goes here")).toBeVisible();
-        // Verify default header is not shown (overridden by headerTemplate)
-        yield (0, fixtures_1.expect)(page.getByRole("heading", { name: "Use these actions" })).not.toBeVisible();
-        // Verify default slot content (buttons)
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Create" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Edit" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Delete" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders default content for named slots when no template provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <ActionBar>
-        <Button label="Main Button" />
-      </ActionBar>
-    `, {
-            components: [
-                `
-        <Component name="ActionBar">
-          <Card>
-            <Slot name="headerTemplate">
-              <H3>Default header</H3>
-            </Slot>
-            <HStack>
-              <Slot />
-            </HStack>
-            <Slot name="footerTemplate">
-              <Text>Default footer</Text>
-            </Slot>
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify default content for named slots is rendered
-        yield (0, fixtures_1.expect)(page.getByRole("heading", { name: "Default header" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Default footer")).toBeVisible();
-        // Verify main slot content
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Main Button" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("supports template properties with context variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <ActionBar header="Action Bar Example">
-        <property name="headerTemplate">
-          <Text variant="title">{$processedHeader}</Text>
-        </property>
-        <Button label="Create" />
-        <Button label="Edit" />
-        <Button label="Delete" />
-      </ActionBar>
-    `, {
-            components: [
-                `
-        <Component name="ActionBar">
-          <Card var.transformedHeader="*** {$props.header.toUpperCase()} ***">
-            <Slot name="headerTemplate" processedHeader="{transformedHeader}">
-              <H3>{transformedHeader}</H3>
-            </Slot>
-            <HStack>
-              <Slot>
-                <Button label="Default" />
-              </Slot>
-            </HStack>
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify template property is processed and passed to slot template
-        yield (0, fixtures_1.expect)(page.getByText("*** ACTION BAR EXAMPLE ***")).toBeVisible();
-        // Verify main slot content
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Create" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Edit" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Delete" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with multiple context variables in template properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <DataDisplay>
-        <property name="contentTemplate">
-          <Text>{$title}: {$value}</Text>
-        </property>
-      </DataDisplay>
-    `, {
-            components: [
-                `
-        <Component name="DataDisplay">
-          <Slot name="contentTemplate" title="Score" value="{42}">
-            <Text>No data available</Text>
-          </Slot>
-        </Component>
-        `
-            ]
-        });
-        // Verify multiple context variables work
-        yield (0, fixtures_1.expect)(page.getByText("Score: 42")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("No data available")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("supports complex nested content in slots", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <CustomCard>
-        <property name="headerTemplate">
-          <HStack>
-            <Icon name="star" />
-            <Text fontWeight="bold">Custom Header</Text>
-          </HStack>
-        </property>
-        <VStack>
-          <Text>Line 1</Text>
-          <Text>Line 2</Text>
-          <Button label="Action" />
-        </VStack>
-      </CustomCard>
-    `, {
-            components: [
-                `
-        <Component name="CustomCard">
-          <Card>
-            <Slot name="headerTemplate">
-              <H3>Default Header</H3>
-            </Slot>
-            <ContentSeparator />
-            <Slot />
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify complex nested content renders correctly
-        yield (0, fixtures_1.expect)(page.getByText("Custom Header")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Line 1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Line 2")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Action" })).toBeVisible();
-        // Verify default header is not shown
-        yield (0, fixtures_1.expect)(page.getByRole("heading", { name: "Default Header" })).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("maintains proper rendering order with multiple slots", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <MultiSlotComponent>
-        <property name="topTemplate">
-          <Text testId="top">Top Content</Text>
-        </property>
-        <property name="bottomTemplate">
-          <Text testId="bottom">Bottom Content</Text>
-        </property>
-        <Text testId="middle">Middle Content</Text>
-      </MultiSlotComponent>
-    `, {
-            components: [
-                `
-        <Component name="MultiSlotComponent">
-          <VStack>
-            <Slot name="topTemplate" />
-            <Slot />
-            <Slot name="bottomTemplate" />
-          </VStack>
-        </Component>
-        `
-            ]
-        });
-        // Verify all content is rendered
-        yield (0, fixtures_1.expect)(page.getByTestId("top")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("middle")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("bottom")).toBeVisible();
-        // Verify rendering order by checking positions
-        const topElement = page.getByTestId("top");
-        const middleElement = page.getByTestId("middle");
-        const bottomElement = page.getByTestId("bottom");
-        const topBox = yield topElement.boundingBox();
-        const middleBox = yield middleElement.boundingBox();
-        const bottomBox = yield bottomElement.boundingBox();
-        (0, fixtures_1.expect)(topBox === null || topBox === void 0 ? void 0 : topBox.y).toBeLessThan((middleBox === null || middleBox === void 0 ? void 0 : middleBox.y) || 0);
-        (0, fixtures_1.expect)(middleBox === null || middleBox === void 0 ? void 0 : middleBox.y).toBeLessThan((bottomBox === null || bottomBox === void 0 ? void 0 : bottomBox.y) || 0);
-    }));
-    (0, fixtures_1.test)("works with dynamic context in template properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <ContextComponent>
-        <property name="messageTemplate">
-          <Text>{$message}</Text>
-        </property>
-      </ContextComponent>
-    `, {
-            components: [
-                `
-        <Component name="ContextComponent" var.currentMessage="Initial Message">
-          <VStack>
-            <Button label="Update Message" onClick="currentMessage = 'Updated Message'" />
-            <Slot name="messageTemplate" message="{currentMessage}">
-              <Text>No message</Text>
-            </Slot>
-          </VStack>
-        </Component>
-        `
-            ]
-        });
-        // Verify initial context value
-        yield (0, fixtures_1.expect)(page.getByText("Initial Message")).toBeVisible();
-        // Update the context and verify template updates
-        yield page.getByRole("button", { name: "Update Message" }).click();
-        yield (0, fixtures_1.expect)(page.getByText("Updated Message")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Initial Message")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles empty slots gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <EmptySlotComponent>
-      </EmptySlotComponent>
-    `, {
-            components: [
-                `
-        <Component name="EmptySlotComponent">
-          <Card>
-            <Text>Before slot</Text>
-            <Slot />
-            <Text>After slot</Text>
-          </Card>
-        </Component>
-        `
-            ]
-        });
-        // Verify component renders without errors when slot is empty
-        yield (0, fixtures_1.expect)(page.getByText("Before slot")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("After slot")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("supports slot with no default content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <MinimalComponent>
-        <Text>Provided content</Text>
-      </MinimalComponent>
-    `, {
-            components: [
-                `
-        <Component name="MinimalComponent">
-          <VStack>
-            <Text>Component content</Text>
-            <Slot name="contentTemplate" />
-            <Slot />
-          </VStack>
-        </Component>
-        `
-            ]
-        });
-        // Verify provided content renders in default slot
-        yield (0, fixtures_1.expect)(page.getByText("Provided content")).toBeVisible();
-        // Verify component structure renders without errors
-        yield (0, fixtures_1.expect)(page.getByText("Component content")).toBeVisible();
-    }));
-});

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

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SlotItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const hooks_1 = require("../components-core/utils/hooks");
-const constants_1 = require("../components-core/constants");
-/**
- * This React component wraps the slot content defined in a parent component into a container.
- * This container may contain context values pushed from a compound component back to
- * the parent.
- */
-exports.SlotItem = (0, react_1.memo)(({ node, renderChild, layoutContext, slotProps = constants_1.EMPTY_OBJECT }) => {
-    const shallowMemoedSlotProps = (0, hooks_1.useShallowCompareMemoize)(slotProps);
-    // --- Transform all Slot properties into context values so that they can be 
-    // --- used in the slot content (in the parent component)
-    const nodeWithItem = (0, react_1.useMemo)(() => {
-        const templateProps = {};
-        Object.entries(shallowMemoedSlotProps).forEach(([key, value]) => {
-            templateProps["$" + key] = value;
-        });
-        // --- Create a container for the slot content with the cotext values
-        return {
-            type: "Container",
-            contextVars: templateProps,
-            children: Array.isArray(node) ? node : [node],
-        };
-    }, [node, shallowMemoedSlotProps]);
-    // --- Render the slot content
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(nodeWithItem, layoutContext) });
-});
-exports.SlotItem.displayName = "SlotItem";