xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -1,142 +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.TextBox = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const TextBox_module_scss_1 = __importDefault(require("./TextBox.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const InputAdornment_1 = require("../Input/InputAdornment");
-const parts_1 = require("../../components-core/parts");
-exports.defaultProps = {
-    type: "text",
-    value: "",
-    initialValue: "",
-    enabled: true,
-    validationStatus: "none",
-    onDidChange: constants_1.noop,
-    onFocus: constants_1.noop,
-    onBlur: constants_1.noop,
-    onKeyDown: constants_1.noop,
-    updateState: constants_1.noop,
-    passwordVisibleIcon: "eye",
-    passwordHiddenIcon: "eye-off",
-};
-exports.TextBox = (0, react_1.forwardRef)(function TextBox(_a, ref) {
-    var { id, type = exports.defaultProps.type, value = exports.defaultProps.value, updateState = exports.defaultProps.updateState, initialValue = exports.defaultProps.initialValue, style, className, maxLength, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onKeyDown = exports.defaultProps.onKeyDown, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, required, showPasswordToggle, passwordVisibleIcon = exports.defaultProps.passwordVisibleIcon, passwordHiddenIcon = exports.defaultProps.passwordHiddenIcon } = _a, rest = __rest(_a, ["id", "type", "value", "updateState", "initialValue", "style", "className", "maxLength", "enabled", "placeholder", "validationStatus", "onDidChange", "onFocus", "onBlur", "onKeyDown", "registerComponentApi", "startText", "startIcon", "endText", "endIcon", "gap", "autoFocus", "readOnly", "tabIndex", "required", "showPasswordToggle", "passwordVisibleIcon", "passwordHiddenIcon"]);
-    const inputRef = (0, react_2.useRef)(null);
-    // State to control password visibility
-    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
-    // Determine the actual input type based on the password visibility toggle
-    const actualType = type === "password" && showPassword ? "text" : type;
-    // Toggle password visibility
-    const togglePasswordVisibility = (0, react_2.useCallback)(() => {
-        setShowPassword((prev) => !prev);
-    }, []);
-    (0, react_2.useEffect)(() => {
-        if (autoFocus) {
-            setTimeout(() => {
-                var _a;
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }, [autoFocus, inputRef]);
-    // --- NOTE: This is a workaround for the jumping caret issue.
-    // --- Local state can sync up values that can get set asynchronously outside the component.
-    const [localValue, setLocalValue] = react_2.default.useState(value);
-    (0, react_2.useEffect)(() => {
-        setLocalValue(value);
-    }, [value]);
-    // --- End NOTE
-    // --- Initialize the related field with the input's initial value
-    (0, react_2.useEffect)(() => {
-        updateState({ value: initialValue }, { initial: true });
-    }, [initialValue, updateState]);
-    const updateValue = (0, react_2.useCallback)((value) => {
-        setLocalValue(value);
-        updateState({ value });
-        onDidChange(value);
-    }, [onDidChange, updateState]);
-    // --- Handle the value change events for this input
-    const onInputChange = (0, react_2.useCallback)((event) => {
-        updateValue(event.target.value);
-    }, [updateValue]);
-    // --- Manage obtaining and losing the focus
-    const handleOnFocus = (0, react_2.useCallback)(() => {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    }, [onFocus]);
-    const handleOnBlur = (0, react_2.useCallback)(() => {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
-    const focus = (0, react_2.useCallback)(() => {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        updateValue(newValue);
-    });
-    (0, react_2.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            focus,
-            setValue,
-        });
-    }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, TextBox_module_scss_1.default.inputRoot, {
-            [TextBox_module_scss_1.default.disabled]: !enabled,
-            [TextBox_module_scss_1.default.readOnly]: readOnly,
-            [TextBox_module_scss_1.default.error]: validationStatus === "error",
-            [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
-            [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-        }), tabIndex: -1, onFocus: focus, style: Object.assign(Object.assign({}, style), { gap }), children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, "data-part-id": parts_1.PART_INPUT, type: actualType, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, {
-                    [TextBox_module_scss_1.default.readOnly]: readOnly,
-                }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), type === "password" && showPasswordToggle ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment, TextBox_module_scss_1.default.passwordToggle), onClick: togglePasswordVisibility })) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment }))] })));
-});

package/dist/scripts/src/components/Theme/NotificationToast.js

@@ -1,64 +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.NotificationToast = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const react_hot_toast_1 = __importStar(require("react-hot-toast"));
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const TOASTER_CONTAINER_STYLE = {
-    top: 40,
-    right: 40,
-    bottom: 40,
-    left: 40,
-    position: "absolute",
-    overflowY: "hidden",
-};
-let toasterMounted = false;
-const NotificationToast = ({ toastDuration }) => {
-    const [shouldRender, setShouldRender] = (0, react_1.useState)(false);
-    const { root } = (0, ThemeContext_1.useTheme)();
-    (0, react_1.useEffect)(() => {
-        if (!toasterMounted) {
-            toasterMounted = true;
-            setShouldRender(true);
-        }
-    }, []);
-    if (!shouldRender)
-        return null;
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }), root);
-};
-exports.NotificationToast = NotificationToast;

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

@@ -1,47 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeComponentRenderer = exports.ThemeMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const ThemeNative_1 = require("./ThemeNative");
-const COMP = "Theme";
-exports.ThemeMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Theme` creates styling contexts to customize the appearance of nested " +
-        "components without using CSS.",
-    allowArbitraryProps: true,
-    props: {
-        themeId: (0, metadata_helpers_1.d)(`This property specifies which theme to use by setting the theme's id.`),
-        tone: {
-            description: "This property allows the setting of the current theme's tone.",
-            availableValues: ["light", "dark"],
-            valueType: "string",
-            defaultValue: "light",
-        },
-        root: (0, metadata_helpers_1.d)(`This property indicates whether the component is at the root of the application.`, undefined, "boolean", ThemeNative_1.defaultProps.root),
-        applyIf: (0, metadata_helpers_1.d)(`This property controls whether the theme wrapper is applied. When true (default), the theme wraps the children. When false, children are rendered unwrapped.`, undefined, "boolean", true),
-    },
-    opaque: true,
-});
-exports.themeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ThemeMd, ({ node, extractValue, renderChild, layoutContext, appContext }) => {
-    var _a, _b;
-    const _c = node.props, { tone } = _c, restProps = __rest(_c, ["tone"]);
-    const toastDuration = (_b = (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.notifications) === null || _b === void 0 ? void 0 : _b.duration;
-    let themeTone = extractValue.asOptionalString(tone);
-    if (themeTone && themeTone !== "dark") {
-        themeTone = "light";
-    }
-    return ((0, jsx_runtime_1.jsx)(ThemeNative_1.Theme, { id: extractValue.asOptionalString(node.props.themeId), isRoot: extractValue.asOptionalBoolean(node.props.root), applyIf: extractValue.asOptionalBoolean(node.props.applyIf), layoutContext: layoutContext, renderChild: renderChild, tone: themeTone, toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
-});

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

@@ -1,390 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-const PAGE_WIDTH = 1200;
-const PAGE_HEIGHT = 500;
-fixtures_1.test.use({ viewport: { width: PAGE_WIDTH, height: PAGE_HEIGHT } });
-(0, fixtures_1.test)("Themed NavPanel", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const EXPECTED_COLOR = "rgb(23, 35, 43)";
-    yield initTestBed(`
-    <App layout="vertical">
-      <Theme tone="dark">
-        <NavPanel testId="nav-panel">
-          <NavLink to="/something">Something</NavLink>
-        </NavPanel>
-      </Theme>
-    </App>
-  `, {
-        themes: [
-            {
-                id: "test",
-                extends: "light",
-                tones: {
-                    dark: {
-                        themeVars: {
-                            "background-color": EXPECTED_COLOR,
-                        },
-                    },
-                },
-            },
-        ],
-        defaultTheme: "test",
-    });
-    const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("nav-panel"), "background-color");
-    const boundingRect = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("nav-panel"));
-    (0, fixtures_1.expect)(boundingRect.top).toBe(0);
-    (0, fixtures_1.expect)(boundingRect.height).toBe(PAGE_HEIGHT);
-    (0, fixtures_1.expect)(boundingRect.bottom).toBe(PAGE_HEIGHT);
-    (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
-}));
-(0, fixtures_1.test)("Themed AppHeader", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const EXPECTED_COLOR = "rgb(28, 43, 53)";
-    yield initTestBed(`
-    <App layout="vertical" scrollWholePage="false">
-      <Theme tone="dark">
-        <AppHeader testId="app-header"/>
-      </Theme>
-    </App>
-  `, {
-        themes: [
-            {
-                id: "test",
-                extends: "light",
-                tones: {
-                    dark: {
-                        themeVars: {
-                            "background-color": EXPECTED_COLOR,
-                        },
-                    },
-                },
-            },
-        ],
-        defaultTheme: "test",
-    });
-    const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("app-header"), "background-color");
-    const boundingRect = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("app-header"));
-    (0, fixtures_1.expect)(boundingRect.top).toBe(0);
-    (0, fixtures_1.expect)(boundingRect.width).toBe(PAGE_WIDTH);
-    (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
-}));
-(0, fixtures_1.test)("Themed Footer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const EXPECTED_COLOR = "rgb(28, 43, 53)";
-    yield initTestBed(`
-    <App scrollWholePage="false">
-      <Theme tone="dark">
-        <Footer testId="app-footer"/>
-      </Theme>
-    </App>
-  `, {
-        themes: [
-            {
-                id: "test",
-                extends: "light",
-                tones: {
-                    dark: {
-                        themeVars: {
-                            "background-color": EXPECTED_COLOR,
-                        },
-                    },
-                },
-            },
-        ],
-        defaultTheme: "test",
-    });
-    const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("app-footer"), "background-color");
-    const boundingRect = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("app-footer"));
-    (0, fixtures_1.expect)(boundingRect.left).toBe(0);
-    (0, fixtures_1.expect)(boundingRect.bottom).toEqualWithTolerance(PAGE_HEIGHT, 0.01);
-    (0, fixtures_1.expect)(boundingRect.width).toEqualWithTolerance(PAGE_WIDTH, 0.01);
-    (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
-}));
-(0, fixtures_1.test)("Themed H1 regression", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <App>
-      <Theme textColor-H1="rgb(255, 0, 0)" textColor-H2="rgb(0, 255, 0)">
-          <H1 testId="red">Should be red</H1>
-          <H2 testId="green">Should be green</H2>
-      </Theme>
-    </App>
-  `);
-    const { color: h1Color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("red"), "color");
-    const { color: h2Color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("green"), "color");
-    (0, fixtures_1.expect)(h1Color).toBe("rgb(255, 0, 0)");
-    (0, fixtures_1.expect)(h2Color).toBe("rgb(0, 255, 0)");
-}));
-// =============================================================================
-// APPLYIF PROPERTY TESTS
-// =============================================================================
-fixtures_1.test.describe("applyIf Property", () => {
-    (0, fixtures_1.test)("applies theme when applyIf is true (default)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const EXPECTED_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="${EXPECTED_COLOR}" applyIf="true">
-          <Button testId="themed-button">Themed Button</Button>
-        </Theme>
-      </App>
-    `);
-        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("themed-button"), "background-color");
-        (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("applies theme when applyIf is omitted (defaults to true)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const EXPECTED_COLOR = "rgb(0, 255, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="${EXPECTED_COLOR}">
-          <Button testId="themed-button">Themed Button</Button>
-        </Theme>
-      </App>
-    `);
-        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("themed-button"), "background-color");
-        (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
-    }));
-    (0, fixtures_1.test)("does not apply theme when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const THEME_COLOR = "rgb(255, 0, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="${THEME_COLOR}" applyIf="false">
-          <Button testId="unthemed-button">Unthemed Button</Button>
-        </Theme>
-      </App>
-    `);
-        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("unthemed-button"), "background-color");
-        // Should not have the theme color when applyIf is false
-        (0, fixtures_1.expect)(backgroundColor).not.toBe(THEME_COLOR);
-    }));
-    (0, fixtures_1.test)("renders children without theme wrapper when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <App>
-        <Theme tone="dark" applyIf="false">
-          <Button testId="button">Button Text</Button>
-          <H1 testId="header">Header Text</H1>
-        </Theme>
-      </App>
-    `);
-        // Children should still be rendered and visible
-        yield (0, fixtures_1.expect)(page.getByTestId("button")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("header")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("button")).toHaveText("Button Text");
-        yield (0, fixtures_1.expect)(page.getByTestId("header")).toHaveText("Header Text");
-    }));
-    (0, fixtures_1.test)("supports dynamic applyIf with binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const { testStateDriver } = yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState === true}">
-          <Button testId="conditional-button" onClick="testState = testState === true ? false : true">Toggle Theme</Button>
-        </Theme>
-      </App>
-    `);
-        // Initially testState is null, expression evaluates to false
-        const initialBackground = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("conditional-button"), "background-color");
-        (0, fixtures_1.expect)(initialBackground.backgroundColor).not.toBe("rgb(255, 0, 0)");
-        // Click to make testState true, theme should be applied
-        yield page.getByTestId("conditional-button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
-        const appliedBackground = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("conditional-button"), "background-color");
-        (0, fixtures_1.expect)(appliedBackground.backgroundColor).toBe("rgb(255, 0, 0)");
-        // Click again to make testState false, theme should not be applied
-        yield page.getByTestId("conditional-button").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
-        const removedBackground = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("conditional-button"), "background-color");
-        (0, fixtures_1.expect)(removedBackground.backgroundColor).not.toBe("rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("handles nested themes with different applyIf values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const OUTER_COLOR = "rgb(255, 0, 0)";
-        const INNER_COLOR = "rgb(0, 255, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="${OUTER_COLOR}" applyIf="true">
-          <Button testId="outer-themed">Outer Themed</Button>
-          <Theme backgroundColor-Button="${INNER_COLOR}" applyIf="false">
-            <Button testId="inner-unthemed">Inner Unthemed</Button>
-          </Theme>
-        </Theme>
-      </App>
-    `);
-        // Outer button should have outer theme applied
-        const { backgroundColor: outerBg } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("outer-themed"), "background-color");
-        (0, fixtures_1.expect)(outerBg).toBe(OUTER_COLOR);
-        // Inner button should inherit outer theme (inner theme not applied due to applyIf=false)
-        const { backgroundColor: innerBg } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("inner-unthemed"), "background-color");
-        (0, fixtures_1.expect)(innerBg).toBe(OUTER_COLOR); // Should inherit from outer theme
-    }));
-    (0, fixtures_1.test)("applies multiple theme variables when applyIf is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const BG_COLOR = "rgb(255, 0, 0)";
-        const TEXT_COLOR = "rgb(0, 255, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme 
-          backgroundColor-Button="${BG_COLOR}" 
-          textColor-Button="${TEXT_COLOR}"
-          applyIf="true"
-        >
-          <Button testId="multi-themed">Multi Themed</Button>
-        </Theme>
-      </App>
-    `);
-        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("multi-themed"), "background-color");
-        const { color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("multi-themed"), "color");
-        (0, fixtures_1.expect)(backgroundColor).toBe(BG_COLOR);
-        (0, fixtures_1.expect)(color).toBe(TEXT_COLOR);
-    }));
-    (0, fixtures_1.test)("does not apply any theme variables when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const BG_COLOR = "rgb(255, 0, 0)";
-        const TEXT_COLOR = "rgb(0, 255, 0)";
-        yield initTestBed(`
-      <App>
-        <Theme 
-          backgroundColor-Button="${BG_COLOR}" 
-          textColor-Button="${TEXT_COLOR}"
-          applyIf="false"
-        >
-          <Button testId="no-theme">No Theme</Button>
-        </Theme>
-      </App>
-    `);
-        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("no-theme"), "background-color");
-        const { color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("no-theme"), "color");
-        (0, fixtures_1.expect)(backgroundColor).not.toBe(BG_COLOR);
-        (0, fixtures_1.expect)(color).not.toBe(TEXT_COLOR);
-    }));
-});
-// =============================================================================
-// APPLYIF EDGE CASES
-// =============================================================================
-fixtures_1.test.describe("applyIf Edge Cases", () => {
-    (0, fixtures_1.test)("handles null applyIf value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const { testStateDriver } = yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState === 'apply'}">
-          <Button testId="null-apply" onClick="testState = testState === 'apply' ? null : 'apply'">Button</Button>
-        </Theme>
-      </App>
-    `);
-        // Initially testState is null, expression evaluates to false
-        const initialBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("null-apply"), "background-color");
-        (0, fixtures_1.expect)(initialBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
-        // Button should still be visible
-        yield (0, fixtures_1.expect)(page.getByTestId("null-apply")).toBeVisible();
-        // Click to set testState to 'apply', theme should be applied
-        yield page.getByTestId("null-apply").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("apply");
-        const appliedBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("null-apply"), "background-color");
-        (0, fixtures_1.expect)(appliedBg.backgroundColor).toBe("rgb(255, 0, 0)");
-        // Click again to set testState to null, theme should not be applied
-        yield page.getByTestId("null-apply").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
-        const removedBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("null-apply"), "background-color");
-        (0, fixtures_1.expect)(removedBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("handles undefined applyIf value (defaults to true)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const { testStateDriver } = yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState > 10 ? true : undefined}">
-          <Button testId="undefined-apply" onClick="testState = testState == null ? 5 : testState + 10">Button</Button>
-        </Theme>
-      </App>
-    `);
-        // Initially testState is null, expression evaluates to undefined (should use default true)
-        const initialBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("undefined-apply"), "background-color");
-        (0, fixtures_1.expect)(initialBg.backgroundColor).toBe("rgb(255, 0, 0)"); // undefined should default to true
-        // Button should still be visible
-        yield (0, fixtures_1.expect)(page.getByTestId("undefined-apply")).toBeVisible();
-        // Click to set testState to 5, expression evaluates to undefined (should use default true)
-        yield page.getByTestId("undefined-apply").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(5);
-        const afterFirstClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("undefined-apply"), "background-color");
-        (0, fixtures_1.expect)(afterFirstClickBg.backgroundColor).toBe("rgb(255, 0, 0)"); // undefined should default to true
-        // Click again to set testState to 15, expression evaluates to true (explicit true)
-        yield page.getByTestId("undefined-apply").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(15);
-        const afterSecondClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("undefined-apply"), "background-color");
-        (0, fixtures_1.expect)(afterSecondClickBg.backgroundColor).toBe("rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("handles string 'false' as truthy value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="false">
-          <Button testId="string-false">Button</Button>
-        </Theme>
-      </App>
-    `);
-        // String "false" should be treated as boolean false, so theme should not be applied
-        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("string-false"), "background-color");
-        (0, fixtures_1.expect)(backgroundColor).not.toBe("rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("handles numeric values correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const THEME_COLOR = "rgb(255, 0, 0)";
-        // Test with 0 (falsy)
-        yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="${THEME_COLOR}" applyIf="{0}">
-          <Button testId="zero-apply">Button Zero</Button>
-        </Theme>
-      </App>
-    `);
-        const { backgroundColor: zeroBg } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("zero-apply"), "background-color");
-        (0, fixtures_1.expect)(zeroBg).not.toBe(THEME_COLOR);
-    }));
-    (0, fixtures_1.test)("works with complex conditional expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const { testStateDriver } = yield initTestBed(`
-      <App>
-        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState > 5}">
-          <Button testId="complex-condition" onClick="testState = testState == null ? 1 : testState + 3">
-            Increment by 3
-          </Button>
-        </Theme>
-      </App>
-    `);
-        // Initially testState is null, condition should be false
-        const initialBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
-        (0, fixtures_1.expect)(initialBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
-        // Click once: testState becomes 1 (1 > 5 is false)
-        yield page.getByTestId("complex-condition").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(1);
-        const firstClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
-        (0, fixtures_1.expect)(firstClickBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
-        // Click again: testState becomes 4 (4 > 5 is false)
-        yield page.getByTestId("complex-condition").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(4);
-        const secondClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
-        (0, fixtures_1.expect)(secondClickBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
-        // Click again: testState becomes 7 (7 > 5 is true, theme should apply)
-        yield page.getByTestId("complex-condition").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(7);
-        const thirdClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
-        (0, fixtures_1.expect)(thirdClickBg.backgroundColor).toBe("rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("preserves children structure when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <App>
-        <Theme applyIf="false">
-          <VStack testId="container">
-            <Button testId="first-button">First</Button>
-            <H1 testId="header">Header</H1>
-            <Button testId="second-button">Second</Button>
-          </VStack>
-        </Theme>
-      </App>
-    `);
-        // All children should be present and in correct order
-        yield (0, fixtures_1.expect)(page.getByTestId("container")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("first-button")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("header")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("second-button")).toBeVisible();
-        // Check text content is preserved
-        yield (0, fixtures_1.expect)(page.getByTestId("first-button")).toHaveText("First");
-        yield (0, fixtures_1.expect)(page.getByTestId("header")).toHaveText("Header");
-        yield (0, fixtures_1.expect)(page.getByTestId("second-button")).toHaveText("Second");
-    }));
-});