xmlui 0.11.2 → 0.11.4

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

@@ -63,43 +63,69 @@ exports.defaultProps = {
     floating: false,
 };
 const Splitter = (_a) => {
-    var _b;
-    var { initialPrimarySize = exports.defaultProps.initialPrimarySize, minPrimarySize = exports.defaultProps.minPrimarySize, maxPrimarySize = exports.defaultProps.maxPrimarySize, orientation = exports.defaultProps.orientation, children, style, className, swapped = exports.defaultProps.swapped, floating = exports.defaultProps.floating, splitterTemplate, resize = constants_1.noop } = _a, rest = __rest(_a, ["initialPrimarySize", "minPrimarySize", "maxPrimarySize", "orientation", "children", "style", "className", "swapped", "floating", "splitterTemplate", "resize"]);
-    const [size, setSize] = (0, react_1.useState)(0);
+    var { initialPrimarySize = exports.defaultProps.initialPrimarySize, minPrimarySize = exports.defaultProps.minPrimarySize, maxPrimarySize = exports.defaultProps.maxPrimarySize, orientation = exports.defaultProps.orientation, children, style, className, swapped = exports.defaultProps.swapped, floating = exports.defaultProps.floating, splitterTemplate, resize = constants_1.noop, visibleChildCount } = _a, rest = __rest(_a, ["initialPrimarySize", "minPrimarySize", "maxPrimarySize", "orientation", "children", "style", "className", "swapped", "floating", "splitterTemplate", "resize", "visibleChildCount"]);
+    const [sizePercentage, setSizePercentage] = (0, react_1.useState)(50);
+    const [containerSize, setContainerSize] = (0, react_1.useState)(100);
     const [splitter, setSplitter] = (0, react_1.useState)(null);
     const [resizerVisible, setResizerVisible] = (0, react_1.useState)(false);
     const [resizer, setResizer] = (0, react_1.useState)(null);
     const [floatingResizer, setFloatingResizer] = (0, react_1.useState)(null);
     const resizerElement = (0, react_1.useMemo)(() => (floating ? floatingResizer : resizer), [floating, resizer, floatingResizer]);
+    // Calculate actual size in pixels from percentage
+    const size = (0, react_1.useMemo)(() => {
+        return (sizePercentage / 100) * containerSize;
+    }, [sizePercentage, containerSize]);
+    // Since the XMLUI renderer now pre-filters children, we can use them directly
+    const childrenArray = react_1.default.Children.toArray(children);
+    const actualChildCount = childrenArray.length;
+    const effectiveChildCount = visibleChildCount !== null && visibleChildCount !== void 0 ? visibleChildCount : actualChildCount;
+    const isMultiPanel = effectiveChildCount > 1;
+    // ResizeObserver to track container size changes
+    (0, react_1.useEffect)(() => {
+        if (!splitter)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const newContainerSize = orientation === "horizontal"
+                    ? entry.contentRect.width
+                    : entry.contentRect.height;
+                setContainerSize(newContainerSize);
+            }
+        });
+        resizeObserver.observe(splitter);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [splitter, orientation]);
+    // Initialize container size and primary panel percentage
     (0, react_1.useEffect)(() => {
         if (splitter) {
-            const containerSize = orientation === "horizontal"
+            const newContainerSize = orientation === "horizontal"
                 ? splitter.getBoundingClientRect().width
                 : splitter.getBoundingClientRect().height;
-            const initialParsedSize = (0, utils_1.parseSize)(initialPrimarySize, containerSize);
-            setSize(initialParsedSize);
+            setContainerSize(newContainerSize);
+            // Parse initial size and convert to percentage
+            const initialParsedSize = (0, utils_1.parseSize)(initialPrimarySize, newContainerSize);
+            const initialPercentage = (0, utils_1.toPercentage)(initialParsedSize, newContainerSize);
+            setSizePercentage(initialPercentage);
             if (resize) {
-                resize([
-                    (0, utils_1.toPercentage)(initialParsedSize, containerSize),
-                    (0, utils_1.toPercentage)(containerSize - initialParsedSize, containerSize),
-                ]);
+                const actualPrimarySize = (initialPercentage / 100) * newContainerSize;
+                resize([actualPrimarySize, newContainerSize - actualPrimarySize]);
             }
         }
     }, [initialPrimarySize, orientation, resize, splitter, swapped]);
     (0, react_1.useEffect)(() => {
         const handleMouseMove = (event) => {
-            if (splitter && resizerElement) {
-                const containerSize = orientation === "horizontal"
-                    ? splitter.getBoundingClientRect().width
-                    : splitter.getBoundingClientRect().height;
+            if (splitter && resizerElement && containerSize > 0) {
                 const newSize = orientation === "horizontal"
                     ? Math.min(Math.max(event.clientX - splitter.getBoundingClientRect().left, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize))
                     : Math.min(Math.max(event.clientY - splitter.getBoundingClientRect().top, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize));
-                setSize(newSize);
+                const newPercentage = (0, utils_1.toPercentage)(newSize, containerSize);
+                setSizePercentage(newPercentage);
                 if (resize) {
                     resize([
-                        (0, utils_1.toPercentage)(newSize, containerSize),
-                        (0, utils_1.toPercentage)(containerSize - newSize, containerSize),
+                        newPercentage,
+                        100 - newPercentage,
                     ]);
                 }
             }
@@ -122,7 +148,7 @@ const Splitter = (_a) => {
             document.removeEventListener("mousemove", handleMouseMove);
             document.removeEventListener("mouseup", handleMouseUp);
         };
-    }, [minPrimarySize, maxPrimarySize, orientation, resize, floating, resizerElement, splitter]);
+    }, [minPrimarySize, maxPrimarySize, orientation, resize, floating, resizerElement, splitter, containerSize]);
     (0, react_1.useEffect)(() => {
         const watchResizer = (event) => {
             const cursorPosition = orientation === "horizontal" ? event.clientX : event.clientY;
@@ -159,21 +185,21 @@ const Splitter = (_a) => {
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: (s) => setSplitter(s), className: (0, classnames_1.default)(Splitter_module_scss_1.default.splitter, {
             [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
             [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
-        }, className), style: style, children: react_1.default.Children.count(children) > 1 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: !swapped ? { flexBasis: size } : {}, className: (0, classnames_1.default)({
+        }, className), style: style, children: isMultiPanel ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: !swapped ? { flexBasis: size } : {}, className: (0, classnames_1.default)({
                         [Splitter_module_scss_1.default.primaryPanel]: !swapped,
                         [Splitter_module_scss_1.default.secondaryPanel]: swapped,
-                    }), children: react_1.default.Children.toArray(children)[0] }), !floating && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Splitter_module_scss_1.default.resizer, {
+                    }), children: childrenArray[0] }), !floating && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Splitter_module_scss_1.default.resizer, {
                         [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
                         [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
                     }), ref: (r) => setResizer(r), children: splitterTemplate })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({
                         [Splitter_module_scss_1.default.primaryPanel]: swapped,
                         [Splitter_module_scss_1.default.secondaryPanel]: !swapped,
-                    }), style: swapped ? { flexBasis: size } : {}, children: react_1.default.Children.toArray(children)[1] }), floating && ((0, jsx_runtime_1.jsx)("div", { ref: (fr) => setFloatingResizer(fr), className: (0, classnames_1.default)(Splitter_module_scss_1.default.floatingResizer, {
+                    }), style: swapped ? { flexBasis: size } : {}, children: childrenArray[1] }), floating && ((0, jsx_runtime_1.jsx)("div", { ref: (fr) => setFloatingResizer(fr), className: (0, classnames_1.default)(Splitter_module_scss_1.default.floatingResizer, {
                         [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
                         [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
                     }), style: {
                         top: orientation === "horizontal" ? 0 : size,
                         left: orientation === "horizontal" ? size : 0,
-                    }, children: splitterTemplate }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_b = react_1.default.Children.toArray(children)) === null || _b === void 0 ? void 0 : _b[0]) && ((0, jsx_runtime_1.jsx)("div", { className: Splitter_module_scss_1.default.panel, children: react_1.default.Children.toArray(children)[0] })) })) })));
+                    }, children: splitterTemplate }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[0]) && ((0, jsx_runtime_1.jsx)("div", { className: Splitter_module_scss_1.default.panel, children: childrenArray[0] })) })) })));
 };
 exports.Splitter = Splitter;

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

@@ -3,10 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.toPercentage = exports.parseSize = void 0;
 const parseSize = (size, containerSize) => {
     if (size.endsWith('px')) {
-        return parseInt(size, 10);
+        const pixels = parseInt(size, 10);
+        // If negative, calculate from the end: containerSize - abs(pixels)
+        return pixels < 0 ? containerSize + pixels : pixels;
     }
     else if (size.endsWith('%')) {
-        return (parseInt(size, 10) / 100) * containerSize;
+        const percentage = parseInt(size, 10);
+        // If negative, calculate from the end: 100% - abs(percentage)
+        const actualPercentage = percentage < 0 ? 100 + percentage : percentage;
+        return (actualPercentage / 100) * containerSize;
     }
     throw new Error('Invalid size format. Use px or %.');
 };

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

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

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

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

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

@@ -107,15 +107,20 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`borderStyle-${COMP}`]: "solid",
         [`fontSize-${COMP}`]: "$fontSize-sm",
         [`borderWidth-${COMP}`]: "$space-0",
-        [`lineHeight-${COMP}-codefence`]: "1.5",
-        [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
-        [`textTransform-${COMP}-abbr`]: "uppercase",
-        [`fontSize-${COMP}-secondary`]: "$fontSize-sm",
-        [`fontStyle-${COMP}-cite`]: "italic",
         [`textColor-${COMP}`]: "$textColor-primary",
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
+        [`fontSize-${COMP}-secondary`]: "$fontSize-sm",
+        [`textColor-${COMP}-secondary`]: "$textColor-secondary",
+        [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
+        [`textTransform-${COMP}-abbr`]: "uppercase",
+        [`fontStyle-${COMP}-cite`]: "italic",
         [`fontSize-${COMP}-codefence`]: "$fontSize-code",
+        [`fontFamily-${COMP}-codefence`]: "$fontFamily-monospace",
+        [`paddingHorizontal-${COMP}-codefence`]: "$space-4",
+        [`paddingVertical-${COMP}-codefence`]: "$space-3",
+        [`textColor-${COMP}-codefence`]: "$color-surface-900",
+        [`lineHeight-${COMP}-codefence`]: "1.5",
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-code`]: "$fontSize-sm",
         [`borderWidth-${COMP}-code`]: "1px",
@@ -123,6 +128,8 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`borderRadius-${COMP}-code`]: "4px",
         [`paddingHorizontal-${COMP}-code`]: "$space-0_5",
         [`paddingBottom-${COMP}-code`]: "2px",
+        [`backgroundColor-${COMP}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
+        [`borderColor-${COMP}-code`]: "$color-surface-100",
         [`textDecorationLine-${COMP}-deleted`]: "line-through",
         [`textDecorationLine-${COMP}-inserted`]: "underline",
         [`fontFamily-${COMP}-keyboard`]: "$fontFamily-monospace",
@@ -130,6 +137,8 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`fontWeight-${COMP}-keyboard`]: "$fontWeight-bold",
         [`borderWidth-${COMP}-keyboard`]: "1px",
         [`paddingHorizontal-${COMP}-keyboard`]: "$space-1",
+        [`backgroundColor-${COMP}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
+        [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
         [`fontFamily-${COMP}-sample`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-sample`]: "$fontSize-sm",
         [`fontSize-${COMP}-sup`]: "$fontSize-xs",
@@ -144,28 +153,20 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`fontSize-${COMP}-small`]: "$fontSize-sm",
         [`letterSpacing-${COMP}-caption`]: "0.05rem",
         [`fontSize-${COMP}-placeholder`]: "$fontSize-xs",
-        [`fontFamily-${COMP}-codefence`]: "$fontFamily-monospace",
-        [`paddingHorizontal-${COMP}-codefence`]: "$space-4",
-        [`paddingVertical-${COMP}-codefence`]: "$space-3",
+        [`textColor-${COMP}-placeholder`]: "$color-surface-500",
         [`paddingVertical-${COMP}-paragraph`]: "$space-1",
         [`fontSize-${COMP}-subheading`]: "$fontSize-H6",
         [`fontWeight-${COMP}-subheading`]: "$fontWeight-bold",
         [`letterSpacing-${COMP}-subheading`]: "0.04em",
         [`textTransform-${COMP}-subheading`]: "uppercase",
+        [`textColor-${COMP}-subheading`]: "$textColor-secondary",
         [`marginTop-${COMP}-tableheading`]: "$space-1",
         [`marginBottom-${COMP}-tableheading`]: "$space-4",
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
         [`fontSize-${COMP}-tableheading`]: "$fontSize-H6",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
-        [`backgroundColor-${COMP}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
-        [`borderColor-${COMP}-code`]: "$color-surface-100",
-        [`backgroundColor-${COMP}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
-        [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
+        [`fontWeight-${COMP}-strong`]: "$fontWeight-bold",
         [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
-        [`textColor-${COMP}-placeholder`]: "$color-surface-500",
-        [`textColor-${COMP}-codefence`]: "$color-surface-900",
-        [`textColor-${COMP}-subheading`]: "$textColor-secondary",
-        [`textColor-${COMP}-secondary`]: "$textColor-secondary",
         dark: {
             [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)",
         },

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

@@ -1061,6 +1061,290 @@ fixtures_1.test.describe("Theme Variables", () => {
         const component = (yield createTextDriver()).component;
         yield (0, fixtures_1.expect)(component).toHaveCSS("line-break", EXPECTED);
     }));
+    // =============================================================================
+    // PREDEFINED VARIANT TESTS
+    // =============================================================================
+    (0, fixtures_1.test)("variant='secondary' applies secondary theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextDriver, }) {
+        yield initTestBed(`
+      <Theme fontSize-Text-secondary="14px" textColor-Text-secondary="rgb(100, 100, 100)">
+        <Text variant="secondary" testId="text">Secondary text</Text>
+      </Theme>
+    `);
+        const component = (yield createTextDriver("text")).component;
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("color", "rgb(100, 100, 100)");
+    }));
+    (0, fixtures_1.test)("variant='abbr' applies abbreviation theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontWeight-Text-abbr="700" textTransform-Text-abbr="uppercase">
+        <Text variant="abbr" testId="text">HTML</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("text-transform", "uppercase");
+    }));
+    (0, fixtures_1.test)("variant='cite' applies citation theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontStyle-Text-cite="italic">
+        <Text variant="cite" testId="text">Citation</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-style", "italic");
+    }));
+    (0, fixtures_1.test)("variant='code' applies inline code theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme 
+        fontFamily-Text-code="monospace"
+        fontSize-Text-code="14px"
+        borderWidth-Text-code="1px"
+        borderStyle-Text-code="solid"
+        borderRadius-Text-code="4px"
+        paddingHorizontal-Text-code="4px"
+        paddingBottom-Text-code="2px"
+        backgroundColor-Text-code="rgb(240, 240, 240)"
+        borderColor-Text-code="rgb(200, 200, 200)"
+      >
+        <Text variant="code" testId="text">code</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-width", "1px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-style", "solid");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-radius", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", "2px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("background-color", "rgb(240, 240, 240)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-color", "rgb(200, 200, 200)");
+    }));
+    (0, fixtures_1.test)("variant='deleted' applies deleted text theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme textDecorationLine-Text-deleted="line-through">
+        <Text variant="deleted" testId="text">Deleted text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-line", "line-through");
+    }));
+    (0, fixtures_1.test)("variant='inserted' applies inserted text theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <Theme textDecorationLine-Text-inserted="underline">
+        <Text variant="inserted" testId="text">Inserted text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("text-decoration-line", "underline");
+    }));
+    (0, fixtures_1.test)("variant='keyboard' applies keyboard theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme 
+        fontFamily-Text-keyboard="monospace"
+        fontSize-Text-keyboard="14px"
+        fontWeight-Text-keyboard="700"
+        borderWidth-Text-keyboard="1px"
+        paddingHorizontal-Text-keyboard="4px"
+        backgroundColor-Text-keyboard="rgb(245, 245, 245)"
+        borderColor-Text-keyboard="rgb(180, 180, 180)"
+      >
+        <Text variant="keyboard" testId="text">Ctrl+C</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-width", "1px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("background-color", "rgb(245, 245, 245)");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("border-color", "rgb(180, 180, 180)");
+    }));
+    (0, fixtures_1.test)("variant='sample' applies sample theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme 
+        fontFamily-Text-sample="monospace"
+        fontSize-Text-sample="14px"
+      >
+        <Text variant="sample" testId="text">Sample output</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
+    }));
+    (0, fixtures_1.test)("variant='sup' applies superscript theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme 
+        fontSize-Text-sup="12px"
+        verticalAlignment-Text-sup="super"
+      >
+        <Text variant="sup" testId="text">2</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "12px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("vertical-align", "super");
+    }));
+    (0, fixtures_1.test)("variant='sub' applies subscript theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme 
+        fontSize-Text-sub="12px"
+        verticalAlignment-Text-sub="sub"
+      >
+        <Text variant="sub" testId="text">2</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "12px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("vertical-align", "sub");
+    }));
+    (0, fixtures_1.test)("variant='var' applies variable theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontStyle-Text-var="italic">
+        <Text variant="var" testId="text">variable</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-style", "italic");
+    }));
+    (0, fixtures_1.test)("variant='em' applies emphasis theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontStyle-Text-em="italic">
+        <Text variant="em" testId="text">Emphasized</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-style", "italic");
+    }));
+    (0, fixtures_1.test)("variant='mono' applies monospace theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontFamily-Text-mono="monospace">
+        <Text variant="mono" testId="text">Monospace text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-family", "monospace");
+    }));
+    (0, fixtures_1.test)("variant='title' applies title theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontSize-Text-title="32px">
+        <Text variant="title" testId="text">Main Title</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "32px");
+    }));
+    (0, fixtures_1.test)("variant='subtitle' applies subtitle theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontSize-Text-subtitle="24px">
+        <Text variant="subtitle" testId="text">Subtitle</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "24px");
+    }));
+    (0, fixtures_1.test)("variant='small' applies small text theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontSize-Text-small="14px">
+        <Text variant="small" testId="text">Small text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "14px");
+    }));
+    (0, fixtures_1.test)("variant='caption' applies caption theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme letterSpacing-Text-caption="0.8px">
+        <Text variant="caption" testId="text">Caption text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("letter-spacing", "0.8px");
+    }));
+    (0, fixtures_1.test)("variant='placeholder' applies placeholder theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <Theme 
+        fontSize-Text-placeholder="12px"
+        textColor-Text-placeholder="rgb(150, 150, 150)"
+      >
+        <Text variant="placeholder" testId="text">Placeholder text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "12px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("color", "rgb(150, 150, 150)");
+    }));
+    (0, fixtures_1.test)("variant='paragraph' applies paragraph theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme paddingVertical-Text-paragraph="4px">
+        <Text variant="paragraph" testId="text">Paragraph text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-top", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-bottom", "4px");
+    }));
+    (0, fixtures_1.test)("variant='subheading' applies subheading theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme 
+        fontSize-Text-subheading="18px"
+        fontWeight-Text-subheading="700"
+        letterSpacing-Text-subheading="0.8px"
+        textTransform-Text-subheading="uppercase"
+        textColor-Text-subheading="rgb(80, 80, 80)"
+      >
+        <Text variant="subheading" testId="text">Subheading</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "18px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("letter-spacing", "0.8px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("text-transform", "uppercase");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("color", "rgb(80, 80, 80)");
+    }));
+    (0, fixtures_1.test)("variant='tableheading' applies table heading theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <Theme 
+        marginTop-Text-tableheading="4px"
+        marginBottom-Text-tableheading="16px"
+        paddingHorizontal-Text-tableheading="4px"
+        fontSize-Text-tableheading="18px"
+        fontWeight-Text-tableheading="700"
+      >
+        <Text variant="tableheading" testId="text">Table Header</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("margin-top", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("margin-bottom", "16px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-left", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("padding-right", "4px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-size", "18px");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
+    }));
+    (0, fixtures_1.test)("variant='strong' applies strong theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme fontWeight-Text-strong="700">
+        <Text variant="strong" testId="text">Strong text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("font-weight", "700");
+    }));
+    (0, fixtures_1.test)("variant='marked' applies marked theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Theme backgroundColor-Text-marked="rgb(255, 255, 0)">
+        <Text variant="marked" testId="text">Highlighted text</Text>
+      </Theme>
+    `);
+        const component = page.getByTestId("text");
+        yield (0, fixtures_1.expect)(component).toHaveCSS("background-color", "rgb(255, 255, 0)");
+    }));
 });
 // =============================================================================
 // CUSTOM VARIANT TESTS