xmlui 0.10.19 → 0.10.21

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

@@ -1063,6 +1063,323 @@ fixtures_1.test.describe("Theme Variables", () => {
     }));
 });
 // =============================================================================
+// CUSTOM VARIANT TESTS
+// =============================================================================
+fixtures_1.test.describe("Custom Variants", () => {
+    (0, fixtures_1.test)("custom variant textColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 0, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme textColor-Text-customRed="${EXPECTED}">
+          <Text variant="customRed" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("color", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontFamily theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "monospace";
+        yield initTestBed(`
+      <App>
+        <Theme fontFamily-Text-customMono="${EXPECTED}">
+          <Text variant="customMono" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-family", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontSize theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "24px";
+        yield initTestBed(`
+      <App>
+        <Theme fontSize-Text-customLarge="${EXPECTED}">
+          <Text variant="customLarge" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-size", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "italic";
+        yield initTestBed(`
+      <App>
+        <Theme fontStyle-Text-customItalic="${EXPECTED}">
+          <Text variant="customItalic" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-style", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontWeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "700";
+        yield initTestBed(`
+      <App>
+        <Theme fontWeight-Text-customBold="bold">
+          <Text variant="customBold" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-weight", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant fontStretch theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "125%";
+        yield initTestBed(`
+      <App>
+        <Theme fontStretch-Text-customExpanded="expanded">
+          <Text variant="customExpanded" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("font-stretch", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationLine theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "underline";
+        yield initTestBed(`
+      <App>
+        <Theme textDecorationLine-Text-customUnderline="${EXPECTED}">
+          <Text variant="customUnderline" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-line", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 0, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customDeco="underline"
+          textDecorationColor-Text-customDeco="${EXPECTED}"
+        >
+          <Text variant="customDeco" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-color", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationStyle theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "wavy";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customWavy="underline"
+          textDecorationStyle-Text-customWavy="${EXPECTED}"
+        >
+          <Text variant="customWavy" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-style", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textDecorationThickness theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "3px";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customThick="underline"
+          textDecorationThickness-Text-customThick="${EXPECTED}"
+        >
+          <Text variant="customThick" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-decoration-thickness", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textUnderlineOffset theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "5px";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textDecorationLine-Text-customOffset="underline"
+          textUnderlineOffset-Text-customOffset="${EXPECTED}"
+        >
+          <Text variant="customOffset" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-underline-offset", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant lineHeight theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "32px";
+        yield initTestBed(`
+      <App>
+        <Theme lineHeight-Text-customLineHeight="${EXPECTED}">
+          <Text variant="customLineHeight" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("line-height", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant backgroundColor theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 255, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Text-customBg="${EXPECTED}">
+          <Text variant="customBg" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("background-color", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textTransform theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "uppercase";
+        yield initTestBed(`
+      <App>
+        <Theme textTransform-Text-customUpper="${EXPECTED}">
+          <Text variant="customUpper" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-transform", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant letterSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "5px";
+        yield initTestBed(`
+      <App>
+        <Theme letterSpacing-Text-customSpaced="${EXPECTED}">
+          <Text variant="customSpaced" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("letter-spacing", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant wordSpacing theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "10px";
+        yield initTestBed(`
+      <App>
+        <Theme wordSpacing-Text-customWordSpace="${EXPECTED}">
+          <Text variant="customWordSpace" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-spacing", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textShadow theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rgb(255, 0, 0) 2px 2px 4px";
+        yield initTestBed(`
+      <App>
+        <Theme textShadow-Text-customShadow="${EXPECTED}">
+          <Text variant="customShadow" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-shadow", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textIndent theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "20px";
+        yield initTestBed(`
+      <App>
+        <Theme textIndent-Text-customIndent="${EXPECTED}">
+          <Text variant="customIndent" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-indent", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textAlign theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "center";
+        yield initTestBed(`
+      <App>
+        <Theme textAlign-Text-customCenter="${EXPECTED}">
+          <Text variant="customCenter" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-align", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant textAlignLast theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "right";
+        yield initTestBed(`
+      <App>
+        <Theme textAlignLast-Text-customAlignLast="${EXPECTED}">
+          <Text variant="customAlignLast" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("text-align-last", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant wordBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "break-all";
+        yield initTestBed(`
+      <App>
+        <Theme wordBreak-Text-customBreak="${EXPECTED}">
+          <Text variant="customBreak" breakMode="'{undefined}'" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-break", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant wordWrap theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "break-word";
+        yield initTestBed(`
+      <App>
+        <Theme wordWrap-Text-customWrap="${EXPECTED}">
+          <Text variant="customWrap" breakMode="'{undefined}'" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("word-wrap", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant direction theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "rtl";
+        yield initTestBed(`
+      <App>
+        <Theme direction-Text-customRtl="${EXPECTED}">
+          <Text variant="customRtl" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("direction", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant writingMode theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "vertical-rl";
+        yield initTestBed(`
+      <App>
+        <Theme writingMode-Text-customVertical="${EXPECTED}">
+          <Text variant="customVertical" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("writing-mode", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant lineBreak theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const EXPECTED = "strict";
+        yield initTestBed(`
+      <App>
+        <Theme lineBreak-Text-customLineBreak="${EXPECTED}">
+          <Text variant="customLineBreak" testId="text">Hello Custom!</Text>
+        </Theme>
+      </App>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveCSS("line-break", EXPECTED);
+    }));
+    (0, fixtures_1.test)("custom variant with multiple theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <Theme 
+          textColor-Text-pinkElephant="rgb(255, 192, 203)" 
+          fontWeight-Text-pinkElephant="bold"
+          textColor-Text-greenDog="rgb(0, 128, 0)" 
+          fontStyle-Text-greenDog="italic"
+        >
+          <Text variant="pinkElephant" testId="pink">
+            Hello Pink Elephant!
+          </Text>
+          <Text variant="greenDog" testId="green">
+            Hello Green Dog!
+          </Text>
+        </Theme>
+      </App>
+    `);
+        const pinkText = page.getByTestId("pink");
+        const greenText = page.getByTestId("green");
+        yield (0, fixtures_1.expect)(pinkText).toHaveCSS("color", "rgb(255, 192, 203)");
+        yield (0, fixtures_1.expect)(pinkText).toHaveCSS("font-weight", "700");
+        yield (0, fixtures_1.expect)(greenText).toHaveCSS("color", "rgb(0, 128, 0)");
+        yield (0, fixtures_1.expect)(greenText).toHaveCSS("font-style", "italic");
+    }));
+});
+// =============================================================================
 // SMOKE TESTS (kept for compatibility)
 // =============================================================================
 fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {

package/dist/scripts/src/components/Text/TextNative.js

@@ -15,6 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = exports.defaultProps = void 0;
+exports.getCustomVariantCache = getCustomVariantCache;
+exports.setCustomVariantCache = setCustomVariantCache;
+exports.hasCustomVariantCache = hasCustomVariantCache;
+exports.clearCustomVariantCache = clearCustomVariantCache;
+exports.getCustomVariantCacheStats = getCustomVariantCacheStats;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
@@ -22,6 +27,54 @@ const classnames_1 = __importDefault(require("classnames"));
 const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const abstractions_1 = require("../abstractions");
+const StyleContext_1 = require("../../components-core/theming/StyleContext");
+const constants_1 = require("../../components-core/constants");
+const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
+/**
+ * Global cache that stores custom variant CSS styles.
+ * Key: variant value (string)
+ *
+ * This cache ensures the same variant value always generates the same CSS.
+ */
+const customVariantCache = new Map();
+/**
+ * Retrieves a cached custom variant entry if it exists.
+ */
+function getCustomVariantCache(variant) {
+    return customVariantCache.get(variant);
+}
+/**
+ * Stores a custom variant entry in the cache.
+ */
+function setCustomVariantCache(variant, entry) {
+    customVariantCache.set(variant, Object.assign(Object.assign({}, entry), { createdAt: Date.now() }));
+}
+/**
+ * Checks if a custom variant is already cached.
+ */
+function hasCustomVariantCache(variant) {
+    return customVariantCache.has(variant);
+}
+/**
+ * Clears the entire custom variant cache.
+ * Useful for testing or full app resets.
+ */
+function clearCustomVariantCache() {
+    customVariantCache.clear();
+}
+/**
+ * Gets cache statistics for debugging.
+ */
+function getCustomVariantCacheStats() {
+    return {
+        totalEntries: customVariantCache.size,
+        entries: Array.from(customVariantCache.entries()).map(([key, entry]) => ({
+            key,
+            className: entry.className,
+            createdAt: new Date(entry.createdAt).toISOString(),
+        })),
+    };
+}
 exports.defaultProps = {
     maxLines: 0,
     preserveLinebreaks: false,
@@ -57,6 +110,62 @@ exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
             return "div";
         return abstractions_1.TextVariantElement[variant];
     }, [variant]);
+    // Custom variant CSS generation
+    // Following React hook rules: hooks must be called unconditionally
+    // We always call useComponentStyle, passing empty object for known variants
+    const isCustomVariant = (0, react_1.useMemo)(() => {
+        return variant && !abstractions_1.TextVariantElement[variant];
+    }, [variant]);
+    // Always call useComponentStyle (React hook rule: no conditional hooks)
+    // For now, pass empty object; later this will contain assembled CSS properties
+    const variantSpec = (0, react_1.useMemo)(() => {
+        if (!isCustomVariant)
+            return constants_1.EMPTY_OBJECT;
+        const subject = `-Text-${variant}`;
+        const cssInput = {
+            color: (0, layout_resolver_1.toCssVar)(`$textColor${subject}`),
+            "font-family": (0, layout_resolver_1.toCssVar)(`$fontFamily${subject}`),
+            "font-size": (0, layout_resolver_1.toCssVar)(`$fontSize${subject}`),
+            "font-style": (0, layout_resolver_1.toCssVar)(`$fontStyle${subject}`),
+            "font-weight": (0, layout_resolver_1.toCssVar)(`$fontWeight${subject}`),
+            "font-stretch": (0, layout_resolver_1.toCssVar)(`$fontStretch${subject}`),
+            "text-decoration-line": (0, layout_resolver_1.toCssVar)(`$textDecorationLine${subject}`),
+            "text-decoration-color": (0, layout_resolver_1.toCssVar)(`$textDecorationColor${subject}`),
+            "text-decoration-style": (0, layout_resolver_1.toCssVar)(`$textDecorationStyle${subject}`),
+            "text-decoration-thickness": (0, layout_resolver_1.toCssVar)(`$textDecorationThickness${subject}`),
+            "text-underline-offset": (0, layout_resolver_1.toCssVar)(`$textUnderlineOffset${subject}`),
+            "line-height": (0, layout_resolver_1.toCssVar)(`$lineHeight${subject}`),
+            "background-color": (0, layout_resolver_1.toCssVar)(`$backgroundColor${subject}`),
+            "text-transform": (0, layout_resolver_1.toCssVar)(`$textTransform${subject}`),
+            "letter-spacing": (0, layout_resolver_1.toCssVar)(`$letterSpacing${subject}`),
+            "word-spacing": (0, layout_resolver_1.toCssVar)(`$wordSpacing${subject}`),
+            "text-shadow": (0, layout_resolver_1.toCssVar)(`$textShadow${subject}`),
+            "text-indent": (0, layout_resolver_1.toCssVar)(`$textIndent${subject}`),
+            "text-align": (0, layout_resolver_1.toCssVar)(`$textAlign${subject}`),
+            "text-align-last": (0, layout_resolver_1.toCssVar)(`$textAlignLast${subject}`),
+            "word-break": (0, layout_resolver_1.toCssVar)(`$wordBreak${subject}`),
+            "word-wrap": (0, layout_resolver_1.toCssVar)(`$wordWrap${subject}`),
+            direction: (0, layout_resolver_1.toCssVar)(`$direction${subject}`),
+            "writing-mode": (0, layout_resolver_1.toCssVar)(`$writingMode${subject}`),
+            "line-break": (0, layout_resolver_1.toCssVar)(`$lineBreak${subject}`),
+        };
+        return cssInput;
+    }, [isCustomVariant, variant]);
+    const customVariantClassName = (0, StyleContext_1.useComponentStyle)(variantSpec);
+    // Store custom variant in cache if it's a new custom variant
+    (0, react_1.useEffect)(() => {
+        if (isCustomVariant && variant && customVariantClassName) {
+            // Check if this variant is already cached
+            if (!hasCustomVariantCache(variant)) {
+                // TODO: When CSS generation is implemented, extract the actual CSS text
+                // For now, store placeholder information
+                setCustomVariantCache(variant, {
+                    className: customVariantClassName,
+                    cssText: "", // Will be populated when CSS generation is implemented
+                });
+            }
+        }
+    }, [isCustomVariant, variant, customVariantClassName]);
     // Determine overflow mode classes based on overflowMode and existing props
     const overflowClasses = (0, react_1.useMemo)(() => {
         const classes = {};
@@ -127,7 +236,9 @@ exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
         }
         return classes;
     }, [breakMode]);
-    return ((0, jsx_runtime_1.jsx)(Element, Object.assign({}, restVariantSpecificProps, { ref: ref, className: (0, classnames_1.default)(syntaxHighlightClasses, Text_module_scss_1.default.text, Text_module_scss_1.default[variant || "default"], Object.assign(Object.assign({ [Text_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks }, overflowClasses), breakClasses), className), style: Object.assign(Object.assign({}, style), (overflowMode === "ellipsis" || (!overflowMode && maxLines)
+    return ((0, jsx_runtime_1.jsx)(Element, Object.assign({}, restVariantSpecificProps, { ref: ref, className: (0, classnames_1.default)(syntaxHighlightClasses, Text_module_scss_1.default.text, 
+        // Use custom variant className if it's a custom variant, otherwise use predefined variant style
+        isCustomVariant ? customVariantClassName : Text_module_scss_1.default[variant || "default"], Object.assign(Object.assign({ [Text_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks }, overflowClasses), breakClasses), className), style: Object.assign(Object.assign({}, style), (overflowMode === "ellipsis" || (!overflowMode && maxLines)
             ? (0, css_utils_1.getMaxLinesStyle)(maxLines)
             : {})), children: children })));
 });

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

@@ -98,7 +98,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         const textarea = page.getByRole("textbox");
         yield textarea.fill("Some content");
         yield (0, fixtures_1.expect)(textarea).toHaveValue("Some content");
-        (0, fixtures_1.expect)(textarea).toHaveAttribute("placeholder", "Enter comments");
+        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("placeholder", "Enter comments");
     }));
     (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<TextArea maxLength="10" />`);
@@ -275,7 +275,7 @@ fixtures_1.test.describe("Accessibility", () => {
     }));
     (0, fixtures_1.test)("component is keyboard accessible when interactive", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextArea 
+      <TextArea
         label="Comments"
         onGotFocus="testState = 'keyboard-focused'"
       />
@@ -408,7 +408,7 @@ fixtures_1.test.describe("Visual States", () => {
             testThemeVars: {
                 "backgroundColor-TextArea--disabled": "rgb(255, 0, 0)",
                 "textColor-TextArea--disabled": "rgb(0, 255, 0)",
-                "borderColor-TextArea--disabled": "rgb(0, 0, 255)"
+                "borderColor-TextArea--disabled": "rgb(0, 0, 255)",
             },
         });
         const textarea = page.getByRole("textbox");
@@ -510,15 +510,15 @@ fixtures_1.test.describe("Edge Cases", () => {
         yield (0, fixtures_1.expect)(textarea).toBeVisible();
         yield (0, fixtures_1.expect)(textarea).toHaveValue(longValue);
     }));
-    (0, fixtures_1.test)("component handles invalid maxRows/minRows combinations with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles invalid maxRows/minRows combinations with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="2" minRows="5" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles zero maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles zero maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="0" minRows="0" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles negative maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles negative maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="{-1}" minRows="{-1}" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
@@ -529,7 +529,7 @@ fixtures_1.test.describe("Edge Cases", () => {
 fixtures_1.test.describe("Performance", () => {
     (0, fixtures_1.test)("component memoization prevents unnecessary re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextArea 
+      <TextArea
         label="Performance Test"
         onDidChange="testState = ++testState || 1"
       />
@@ -620,7 +620,7 @@ fixtures_1.test.describe("Integration", () => {
     (0, fixtures_1.test)("component works with event handling chain", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
-        <TextArea 
+        <TextArea
           onGotFocus="testState = 'focused'"
           onLostFocus="testState = 'blurred'"
           onDidChange="(value) => testState = 'changed: ' + value"

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

@@ -31,6 +31,7 @@ exports.ThemeMd = (0, metadata_helpers_1.createMetadata)({
             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,
 });
@@ -42,5 +43,5 @@ exports.themeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     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), layoutContext: layoutContext, renderChild: renderChild, tone: themeTone, toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
+    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 }));
 });