xmlui 0.11.1 → 0.11.3

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.11.1",
+    "version": "0.11.3",
     "sideEffects": false,
     "type": "module",
     "scripts": {
@@ -99,7 +99,6 @@
         "remark-gfm": "^4.0.1",
         "sass": "1.55.0",
         "scroll-into-view-if-needed": "^3.1.0",
-        "ts-node": "10.9.1",
         "turndown": "^7.2.0",
         "unist-util-visit": "^5.0.0",
         "use-context-selector": "1.4.1",
@@ -108,7 +107,8 @@
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-textdocument": "^1.0.11",
-        "yargs": "17.7.2"
+        "yargs": "17.7.2",
+        "tsx": "4.20.6"
     },
     "devDependencies": {
         "@babel/core": "7.19.6",
@@ -145,7 +145,6 @@
         "rollup-plugin-visualizer": "5.8.3",
         "serve": "14.2.0",
         "terser": "^5.44.0",
-        "tsx": "4.20.6",
         "typescript": "5.7.3",
         "vite": "5.4.19",
         "vite-plugin-dts": "4.5.0",

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -119,7 +119,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
                     payloadArray.push({
                         label: dataKey,
                         value: originalPayload[dataKey],
-                        color: colorValues[index] || colorValues[0]
+                        color: colorValues[index] || colorValues[0],
                     });
                 }
             });
@@ -247,7 +247,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
     const customTooltipRenderer = (0, react_1.useCallback)((props) => {
         const tooltipContent = safeTooltipRenderer(props);
         return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => {
-                if (el && el !== tooltipElement) {
+                if (el) {
                     setTooltipElement(el);
                 }
             }, children: tooltipContent }));
@@ -260,7 +260,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             height: miniMode || hideX ? 0 : xAxisHeight,
             tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
             tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
-            domain: [0, (dataMax) => dataMax * 1.05],
+            domain: [0, (dataMax) => Math.ceil((dataMax * 1.05) / 10) * 10],
         }
         : {
             type: "category",
@@ -293,7 +293,13 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             tickCount: yTickCount,
             tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
             width: miniMode || hideY ? 0 : yAxisWidth,
-            domain: [0, (dataMax) => dataMax * 1.1],
+            domain: [
+                0,
+                (dataMax) => {
+                    const roundedMax = Math.ceil((dataMax * 1.05) / 10) * 10;
+                    return roundedMax;
+                },
+            ],
         };
     return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: validData
                     .map((d) => d[nameKey])

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -181,7 +181,7 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
                     ? safeData
                         .map((d) => d === null || d === void 0 ? void 0 : d[nameKey])
                         .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx)))
-                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, domain: [(dataMin) => dataMin * 0.95, (dataMax) => dataMax * 1.05] }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, domain: [0, (dataMax) => Math.ceil((dataMax * 1.05) / 10) * 10] }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
                                     bottom: 0,
                                     left: 0,
                                     right: 0,

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

@@ -40,7 +40,8 @@ const baseSplitterMd = (0, metadata_helpers_1.createMetadata)({
         },
         maxPrimarySize: {
             description: `This property sets the maximum size the primary section can have. The unit of the size ` +
-                `value is in pixels or percentages.`,
+                `value is in pixels or percentages. Negative values are supported and calculate from the ` +
+                `end of the container (e.g., "-20%" means "80% of container", "-100px" means "container size - 100px").`,
             valueType: "string",
             defaultValue: SplitterNative_1.defaultProps.maxPrimarySize,
         },

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

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
+const utils_1 = require("./utils");
 // =============================================================================
 // BASIC FUNCTIONALITY TESTS
 // =============================================================================
@@ -282,6 +283,54 @@ fixtures_1.test.describe("Basic Functionality", () => {
             const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
             (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance
         }));
+        (0, fixtures_1.test)("negative maxPrimarySize in pixels constrains from end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="-100px" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Try to drag resizer far to the right
+            yield driver.dragResizer(350, 0);
+            // Primary should not be larger than 400 - 100 = 300px
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
+        }));
+        (0, fixtures_1.test)("negative maxPrimarySize in percentage constrains from end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="200px" width="400px" orientation="horizontal" maxPrimarySize="-25%" testId="splitter">
+          <Stack backgroundColor="lightblue" height="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" height="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Try to drag resizer far to the right
+            yield driver.dragResizer(350, 0);
+            // Primary should not be larger than 75% of 400px = 300px
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.width).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
+        }));
+        (0, fixtures_1.test)("negative maxPrimarySize works in vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
+            yield initTestBed(`
+        <Splitter height="400px" width="200px" orientation="vertical" maxPrimarySize="-100px" testId="splitter">
+          <Stack backgroundColor="lightblue" width="100%" testId="primary"/>
+          <Stack backgroundColor="darksalmon" width="100%" testId="secondary"/>
+        </Splitter>
+      `);
+            const splitter = page.getByTestId("splitter");
+            const primary = page.getByTestId("primary");
+            const driver = yield createSplitterDriver(splitter);
+            // Try to drag resizer far down
+            yield driver.dragResizer(0, 350);
+            // Primary should not be larger than 400 - 100 = 300px height
+            const bounds = yield (0, component_test_helpers_1.getBounds)(primary);
+            (0, fixtures_1.expect)(bounds.height).toBeLessThanOrEqual(310); // Allow small tolerance for 300px max
+        }));
     });
     fixtures_1.test.describe("resize event", () => {
         (0, fixtures_1.test)("fires resize event when dragging", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSplitterDriver }) {
@@ -541,3 +590,42 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         yield (0, fixtures_1.expect)(page.getByTestId("secondary")).toBeVisible();
     }));
 });
+// =============================================================================
+// UTILITY FUNCTION TESTS
+// =============================================================================
+fixtures_1.test.describe("Utility Functions", () => {
+    fixtures_1.test.describe("parseSize", () => {
+        (0, fixtures_1.test)("parses positive pixel values", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("100px", 400)).toBe(100);
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("200px", 400)).toBe(200);
+        });
+        (0, fixtures_1.test)("parses positive percentage values", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("50%", 400)).toBe(200);
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("25%", 400)).toBe(100);
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("100%", 400)).toBe(400);
+        });
+        (0, fixtures_1.test)("parses negative pixel values (calculated from end)", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-100px", 400)).toBe(300); // 400 - 100
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-50px", 400)).toBe(350); // 400 - 50
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-200px", 600)).toBe(400); // 600 - 200
+        });
+        (0, fixtures_1.test)("parses negative percentage values (calculated from end)", () => {
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-20%", 400)).toBe(320); // 80% of 400
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-50%", 400)).toBe(200); // 50% of 400
+            (0, fixtures_1.expect)((0, utils_1.parseSize)("-10%", 600)).toBe(540); // 90% of 600
+        });
+        (0, fixtures_1.test)("throws error for invalid format", () => {
+            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("100", 400)).toThrow("Invalid size format. Use px or %.");
+            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("100em", 400)).toThrow("Invalid size format. Use px or %.");
+            (0, fixtures_1.expect)(() => (0, utils_1.parseSize)("invalid", 400)).toThrow("Invalid size format. Use px or %.");
+        });
+    });
+    fixtures_1.test.describe("toPercentage", () => {
+        (0, fixtures_1.test)("converts pixel size to percentage", () => {
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(200, 400)).toBe(50);
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(100, 400)).toBe(25);
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(400, 400)).toBe(100);
+            (0, fixtures_1.expect)((0, utils_1.toPercentage)(0, 400)).toBe(0);
+        });
+    });
+});

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

@@ -65,41 +65,65 @@ exports.defaultProps = {
 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);
+    const [sizePercentage, setSizePercentage] = (0, react_1.useState)(50); // Store as percentage
+    const [containerSize, setContainerSize] = (0, react_1.useState)(0);
     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]);
+    // 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),
+                    initialPercentage,
+                    100 - initialPercentage,
                 ]);
             }
         }
     }, [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 +146,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;

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/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)",
         },