xmlui 0.9.65 → 0.9.67

package/dist/scripts/src/components/Charts/PieChart/PieChart.js

@@ -13,10 +13,10 @@ const renderers_1 = require("../../../components-core/renderers");
 const metadata_helpers_1 = require("../../metadata-helpers");
 const COMP = "PieChart";
 exports.PieChartMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "`PieChart` visualizes proportional data as circular segments; each slice " +
         "represents a percentage of the whole. Note that the height of the component or " +
         "its parent needs to be set explicitly.",
-    status: "experimental",
     docFolder: "Charts/PieChart",
     props: {
         data: {

package/dist/scripts/src/components/Charts/PieChart/PieChartNative.js

@@ -41,10 +41,10 @@ exports.PieChart = PieChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const recharts_1 = require("recharts");
 const PieChartNative_module_scss_1 = __importDefault(require("./PieChartNative.module.scss"));
-const xmlui_1 = require("xmlui");
 const react_1 = require("react");
 const ChartProvider_1 = __importStar(require("../utils/ChartProvider"));
 const TooltipContent_1 = require("../Tooltip/TooltipContent");
+const ThemeContext_1 = require("../../../components-core/theming/ThemeContext");
 exports.defaultProps = {
     showLabel: true,
     showLabelList: false,
@@ -74,7 +74,7 @@ const renderActiveShape = (props) => {
     return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 10, startAngle: startAngle, endAngle: endAngle, fill: fill }), (0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, startAngle: startAngle, endAngle: endAngle, innerRadius: outerRadius + 6, outerRadius: outerRadius + 10, fill: fill })] }));
 };
 function PieChart({ data, dataKey, nameKey, style, showLabel = exports.defaultProps.showLabel, showLabelList = exports.defaultProps.showLabelList, labelListPosition = exports.defaultProps.labelListPosition, innerRadius = exports.defaultProps.innerRadius, children, outerRadius = "60%", showLegend = exports.defaultProps.showLegend, }) {
-    const { getThemeVar } = (0, xmlui_1.useTheme)();
+    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const colorValues = (0, react_1.useMemo)(() => {
         return [
             getThemeVar("color-primary-500"),

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

@@ -31,9 +31,7 @@ exports.CheckboxMd = (0, metadata_helpers_1.createMetadata)({
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(Toggle_1.defaultProps.validationStatus),
         description: (0, metadata_helpers_1.dInternal)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
             `of the ${COMP} besides its label.`),
-        inputTemplate: {
-            description: "This property is used to define a custom checkbox input template",
-        },
+        inputTemplate: (0, metadata_helpers_1.dComponent)("This property is used to define a custom checkbox input template"),
     },
     childrenAsTemplate: "inputTemplate",
     events: {

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

@@ -12,8 +12,8 @@ const CodeBlockNative_1 = require("./CodeBlockNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "CodeBlock";
 exports.CodeBlockMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: `The \`${COMP}\` component displays code with optional syntax highlighting and meta information.`,
-    status: "in progress",
     props: {},
     themeVars: (0, themeVars_1.parseScssVar)(CodeBlock_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -28,6 +28,8 @@ exports.CodeBlockMd = (0, metadata_helpers_1.createMetadata)({
         "borderRadius-CodeBlock": "$space-2",
         "boxShadow-CodeBlock": "none",
         "height-CodeBlock": "fit-content",
+        "paddingVertical-content-CodeBlock": "0",
+        "paddingHorizontal-content-CodeBlock": "0",
         dark: {
             "backgroundColor-CodeBlock-header": "$color-surface-200",
             "backgroundColor-CodeBlock": "$color-surface-50",

package/dist/scripts/src/components/CodeBlock/CodeBlockNative.js

@@ -5,8 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultProps = void 0;
 exports.CodeBlock = CodeBlock;
-exports.isBrowser = isBrowser;
-exports.decodeValue = decodeValue;
 exports.markdownCodeBlockParser = markdownCodeBlockParser;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
@@ -30,27 +28,6 @@ function CodeBlock({ children, meta, textToCopy, style }) {
                                 react_hot_toast_1.default.success("Code copied!");
                             } }) })] })] }));
 }
-/*
- * Check if global object window is defined
- */
-function isBrowser() {
-    return typeof window !== 'undefined';
-}
-/*
- * Decode base64 value, returns string
- * @Params: string
- */
-function decodeValue(value) {
-    if (!value) {
-        return null;
-    }
-    const valueToString = value.toString();
-    if (isBrowser()) {
-        return window.btoa(valueToString);
-    }
-    const buff = Buffer.from(valueToString, 'ascii');
-    return buff.toString('base64');
-}
 function markdownCodeBlockParser() {
     return function transformer(tree) {
         (0, unist_util_visit_1.visit)(tree, "code", visitor);
@@ -89,7 +66,7 @@ function markdownCodeBlockParser() {
             }
             if (item.startsWith("/") && item.endsWith("/")) {
                 const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data];
-                const newItemBase64 = decodeValue(item.substring(1, item.length - 1));
+                const newItemBase64 = (0, highlight_code_1.encodeToBase64)(item.substring(1, item.length - 1));
                 if (!unparsedSubstrings) {
                     acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = newItemBase64;
                 }
@@ -100,7 +77,7 @@ function markdownCodeBlockParser() {
             }
             if (item.startsWith("!/") && item.endsWith("/")) {
                 const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data];
-                const newItemBase64 = decodeValue(item.substring(2, item.length - 1));
+                const newItemBase64 = (0, highlight_code_1.encodeToBase64)(item.substring(2, item.length - 1));
                 if (!unparsedSubstrings) {
                     acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data] = newItemBase64;
                 }

package/dist/scripts/src/components/CodeBlock/highlight-code.js

@@ -12,22 +12,38 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeHighlighterMetaKeysData = exports.CodeHighlighterMetaKeys = void 0;
-exports.encodeValue = encodeValue;
+exports.encodeToBase64 = encodeToBase64;
+exports.decodeFromBase64 = decodeFromBase64;
 exports.parseMetaAndHighlightCode = parseMetaAndHighlightCode;
+exports.transformCodeLines = transformCodeLines;
+exports.extractMetaFromChildren = extractMetaFromChildren;
 exports.isCodeHighlighter = isCodeHighlighter;
 const react_1 = require("react");
 const highlightRowsClass = "codeBlockHighlightRow";
 const highlightSubstringsClass = "codeBlockHighlightString";
 const highlightSubstringsEmphasisClass = "codeBlockHighlightStringEmphasis";
-/*
- * Encode string, returns base64 value
- * @Params: string
+/**
+ * Encode string to ASCII base64 value
  */
-function encodeValue(value) {
+function encodeToBase64(value) {
     if (!value) {
         return null;
     }
-    const valueToString = value.toString();
+    const valueToString = typeof value === "object" ? JSON.stringify(value) : value.toString();
+    if (typeof window !== 'undefined') {
+        return window.btoa(valueToString);
+    }
+    const buff = Buffer.from(valueToString, 'ascii');
+    return buff.toString('base64');
+}
+/**
+ * Decode base64 value to string
+ */
+function decodeFromBase64(value) {
+    if (!value) {
+        return null;
+    }
+    const valueToString = typeof value === "object" ? JSON.stringify(value) : value.toString();
     if (typeof window !== "undefined") {
         return window.atob(valueToString);
     }
@@ -43,8 +59,12 @@ function encodeValue(value) {
  * @returns CSS class names for the codefence and the HTML string with highlighted code tokens
  */
 function parseMetaAndHighlightCode(node, codeHighlighter, themeTone) {
-    const codeStr = mapTextContent(node);
-    const meta = extractMetaFromChildren(node, exports.CodeHighlighterMetaKeysData, codeStr);
+    // parse
+    const rawCodeStr = getCodeStrFromNode(node);
+    const rawMeta = getCodeMetaFromNode(node, exports.CodeHighlighterMetaKeysData);
+    // map
+    const codeStr = transformCodeLines(rawCodeStr);
+    const meta = extractMetaFromChildren(rawMeta, codeStr);
     const { language } = meta, restMeta = __rest(meta, ["language"]);
     if (language && codeHighlighter.availableLangs.includes(language)) {
         // NOTE: Keep in mind, at this point, we are working with the markdown text
@@ -61,48 +81,19 @@ function parseMetaAndHighlightCode(node, codeHighlighter, themeTone) {
     }
     return null;
 }
-function mapTextContent(node) {
+function getCodeStrFromNode(node) {
     if (typeof node === "string") {
-        return transformCodeLines(node);
+        return node;
     }
     if ((0, react_1.isValidElement)(node) && node.props && node.props.children) {
         if (Array.isArray(node.props.children)) {
-            return node.props.children.map(mapTextContent).join("");
+            return node.props.children.map(getCodeStrFromNode).join("");
         }
-        return mapTextContent(node.props.children);
+        return getCodeStrFromNode(node.props.children);
     }
     return "";
-    // ---
-    function transformCodeLines(node) {
-        const splitNode = node.split(/\r?\n/);
-        for (let i = 0; i < splitNode.length; i++) {
-            // Backslash before a codefence indicates an escaped codefence
-            // -> don't render the backslash
-            if (splitNode[i].startsWith("\\```")) {
-                splitNode[i] = splitNode[i].replace("\\```", "```");
-            }
-        }
-        // Remove empty lines from start and end
-        let startTrimIdx = 0;
-        let endTrimIdx = splitNode.length - 1;
-        for (let i = 0; i < splitNode.length; i++) {
-            if (splitNode[i].trim() !== "") {
-                startTrimIdx = i;
-                break;
-            }
-        }
-        for (let i = splitNode.length - 1; i >= 0; i--) {
-            if (splitNode[i].trim() !== "") {
-                endTrimIdx = i;
-                break;
-            }
-        }
-        splitNode.splice(0, startTrimIdx);
-        splitNode.splice(endTrimIdx + 1);
-        return splitNode.join("\n");
-    }
 }
-function extractMetaFromChildren(node, keys, code = "") {
+function getCodeMetaFromNode(node, keys) {
     if (!node)
         return {};
     if (typeof node === "string")
@@ -117,27 +108,59 @@ function extractMetaFromChildren(node, keys, code = "") {
         node.props &&
         node.props.children &&
         typeof node.props.children === "string") {
-        const meta = Object.entries(node.props)
+        return Object.entries(node.props)
             .filter(([key, _]) => keys.includes(key))
             .reduce((acc, [key, value]) => {
             acc[key] = value;
             return acc;
         }, {});
-        return {
-            [exports.CodeHighlighterMetaKeys.language.prop]: meta[exports.CodeHighlighterMetaKeys.language.data],
-            [exports.CodeHighlighterMetaKeys.copy.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.copy.data]),
-            [exports.CodeHighlighterMetaKeys.filename.prop]: meta[exports.CodeHighlighterMetaKeys.filename.data],
-            // NOTE: Row numbers are disabled for now, because applying the highlight class removes the "numbered" class
-            /* [CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(
-              meta[CodeHighlighterMetaKeys.rowNumbers.data],
-            ), */
-            [exports.CodeHighlighterMetaKeys.highlightRows.prop]: parseRowHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightRows.data]),
-            [exports.CodeHighlighterMetaKeys.highlightSubstrings.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstrings.data]),
-            [exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data], true),
-        };
     }
     return {};
 }
+function transformCodeLines(node) {
+    const splitNode = node.split(/\r?\n/);
+    for (let i = 0; i < splitNode.length; i++) {
+        // Backslash before a codefence indicates an escaped codefence
+        // -> don't render the backslash
+        if (splitNode[i].startsWith("\\```")) {
+            splitNode[i] = splitNode[i].replace("\\```", "```");
+        }
+    }
+    // Remove empty lines from start and end
+    let startTrimIdx = 0;
+    let endTrimIdx = splitNode.length - 1;
+    for (let i = 0; i < splitNode.length; i++) {
+        if (splitNode[i].trim() !== "") {
+            startTrimIdx = i;
+            break;
+        }
+    }
+    for (let i = splitNode.length - 1; i >= 0; i--) {
+        if (splitNode[i].trim() !== "") {
+            endTrimIdx = i;
+            break;
+        }
+    }
+    splitNode.splice(0, startTrimIdx);
+    splitNode.splice(endTrimIdx + 1);
+    return splitNode.join("\n");
+}
+function extractMetaFromChildren(meta, code = "") {
+    if (!meta)
+        return {};
+    return {
+        // NOTE: Row numbers are disabled for now, because applying the highlight class removes the "numbered" class
+        /* [CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(
+          meta[CodeHighlighterMetaKeys.rowNumbers.data],
+        ), */
+        [exports.CodeHighlighterMetaKeys.language.prop]: meta[exports.CodeHighlighterMetaKeys.language.data],
+        [exports.CodeHighlighterMetaKeys.copy.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.copy.data]),
+        [exports.CodeHighlighterMetaKeys.filename.prop]: meta[exports.CodeHighlighterMetaKeys.filename.data],
+        [exports.CodeHighlighterMetaKeys.highlightRows.prop]: parseRowHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightRows.data]),
+        [exports.CodeHighlighterMetaKeys.highlightSubstrings.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstrings.data]),
+        [exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data], true),
+    };
+}
 function parseBoolean(str) {
     if (str === "true")
         return true;
@@ -156,22 +179,28 @@ function parseRowHighlights(code, str) {
         .map((item) => {
         item = item.trim();
         const split = item.split("-");
-        let start = 0;
-        let end = 0;
+        let start = -1;
+        let end = -1;
         if (split.length === 0)
             return { start, end, properties: { class: highlightRowsClass } };
+        if (split.length > 2)
+            return { start, end, properties: { class: highlightRowsClass } };
+        if (split[0] === "")
+            return { start, end, properties: { class: highlightRowsClass } };
+        if (split[1] === "")
+            return { start, end, properties: { class: highlightRowsClass } };
+        start = 0;
+        end = 0;
         // Start Index
-        const startIdx = parseAndValidate(split[0]) - 1;
-        if (startIdx > 0) {
-            start = getLineStartIndex(startIdx);
-        }
+        const startIdx = validate(parse(split[0]));
+        start = getLineLengthIndex(startIdx);
         // End Index
-        const endIdx = split.length === 1 ? startIdx : parseAndValidate(split[1]) - 1;
+        const endIdx = split.length === 1 ? startIdx : validate(parse(split[1]));
         let endLineLength = 0;
         if (endIdx >= 0 && codeLines[endIdx] !== undefined) {
             endLineLength = codeLines[endIdx].length;
         }
-        end = getLineStartIndex(endIdx) + endLineLength;
+        end = getLineLengthIndex(endIdx) + endLineLength;
         return { start, end, properties: { class: highlightRowsClass } };
     })
         .filter((item) => {
@@ -181,17 +210,21 @@ function parseRowHighlights(code, str) {
             return false;
         return true;
     });
-    function parseAndValidate(value) {
+    function parse(value) {
         const parsed = parseInt(value, 10);
         if (Number.isNaN(parsed))
             return -1;
-        if (parsed <= 0)
-            return -1;
-        if (parsed > codeLines.length)
+        return parsed;
+    }
+    function validate(parsed) {
+        // correct for 0-indexed array
+        parsed -= 1;
+        // check bounds
+        if (parsed < 0 || parsed >= codeLines.length)
             return -1;
         return parsed;
     }
-    function getLineStartIndex(lineNumber) {
+    function getLineLengthIndex(lineNumber) {
         if (lineNumber < 0)
             return -1;
         if (lineNumber === 0)
@@ -215,7 +248,7 @@ function parseSubstringHighlights(code, str, emphasized = false) {
         return [];
     return str
         .split(" ")
-        .map((item) => encodeValue(item))
+        .map((item) => decodeFromBase64(item))
         .filter((item) => item.trim() !== "")
         .reduce((acc, item) => acc.concat(findAllNonOverlappingSubstrings(code, item)), []);
     function findAllNonOverlappingSubstrings(str, code) {

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

@@ -12,6 +12,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const COMP = "ColorPicker";
 exports.ColorPickerMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.",
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),

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

@@ -7,6 +7,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const ColumnNative_1 = require("./ColumnNative");
 const COMP = "Column";
 exports.ColumnMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Column` defines the structure and behavior of individual table columns " +
         "within a [`Table`](/components/Table) component. Each Column controls data " +
         "binding, header display, sorting capabilities, sizing, and can contain any " +

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

@@ -13,6 +13,7 @@ const ContentSeparatorNative_1 = require("./ContentSeparatorNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "ContentSeparator";
 exports.ContentSeparatorMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`ContentSeparator` creates visual dividers between content sections using " +
         "horizontal or vertical lines. It's essential for improving readability by " +
         "breaking up dense content, separating list items, or creating clear boundaries " +

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

@@ -14,6 +14,7 @@ const IconNative_1 = require("../Icon/IconNative");
 const DropdownMenuNative_1 = require("./DropdownMenuNative");
 const DDMCOMP = "DropdownMenu";
 exports.DropdownMenuMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`DropdownMenu` provides a space-efficient way to present multiple options or " +
         "actions through a collapsible interface. When clicked, the trigger button reveals " +
         "a menu that can include items, separators, and nested submenus, making it ideal " +
@@ -80,6 +81,7 @@ exports.dropdownMenuComponentRenderer = (0, renderers_1.createComponentRenderer)
 });
 const MICOMP = "MenuItem";
 exports.MenuItemMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`MenuItem` represents individual clickable items within dropdown menus and other " +
         "menu components. Each menu item can display text, icons, and respond to clicks " +
         "with either navigation or custom actions, making it the building block for " +
@@ -146,6 +148,7 @@ exports.menuItemRenderer = (0, renderers_1.createComponentRenderer)(MICOMP, expo
 });
 const SMCOMP = "SubMenuItem";
 exports.SubMenuItemMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`SubMenuItem` creates hierarchical menu structures by acting as both a menu " +
         "item and a container for nested menu items. When clicked or hovered, it reveals " +
         "a submenu containing additional [MenuItem](/components/MenuItem), " +
@@ -164,6 +167,7 @@ exports.subMenuItemRenderer = (0, renderers_1.createComponentRenderer)(SMCOMP, e
 });
 const MSEP = "MenuSeparator";
 exports.MenuSeparatorMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`MenuSeparator` displays a separator line between menu items to group related " +
         "menu options within `DropdownMenu`.",
     docFolder: DDMCOMP,

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

@@ -13,6 +13,7 @@ const metadata_helpers_1 = require("../../components/metadata-helpers");
 const ExpandableItemNative_1 = require("./ExpandableItemNative");
 const COMP = "ExpandableItem";
 exports.ExpandableItemMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`ExpandableItem` creates expandable/collapsible section, similar to the HTML " +
         "details disclosure element. When the user clicks on the `summary` the content " +
         "expands or collapses.",

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

@@ -12,6 +12,7 @@ const FileUploadDropZoneNative_1 = require("./FileUploadDropZoneNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "FileUploadDropZone";
 exports.FileUploadDropZoneMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`FileUploadDropZone` enables users to upload files by dragging and dropping " +
         "files from their local file system onto a designated area within the UI.",
     props: {

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

@@ -14,6 +14,7 @@ const FlowLayoutNative_1 = require("./FlowLayoutNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "FlowLayout";
 exports.FlowLayoutMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`FlowLayout` positions content in rows with automatic wrapping. When items " +
         "exceed the available horizontal space, they automatically wrap to a new line.",
     props: {

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

@@ -12,6 +12,7 @@ const FooterNative_1 = require("./FooterNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Footer";
 exports.FooterMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Footer` provides a designated area at the bottom of your application for " +
         "footer content such as branding, copyright notices, or utility controls like " +
         "theme toggles.",

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

@@ -157,9 +157,7 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
             availableValues: filteredValidationSeverityValues,
             defaultValue: "error",
         },
-        inputTemplate: {
-            description: "This property is used to define a custom input template.",
-        },
+        inputTemplate: (0, metadata_helpers_1.dComponent)("This property is used to define a custom input template."),
         gap: {
             description: "This property defines the gap between the adornments and the input area.",
             valueType: "string",

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

@@ -44,6 +44,7 @@ const OMIT_FROM_TOC_DESC = {
     defaultValue: HeadingNative_1.defaultProps.omitFromToc,
 };
 exports.HeadingMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Heading` displays hierarchical text headings with semantic importance levels " +
         "from H1 to H6, following HTML heading standards. It provides text overflow " +
         "handling, anchor link generation, and integrates with " +
@@ -85,6 +86,7 @@ exports.HeadingMd = (0, metadata_helpers_1.createMetadata)({
 });
 const H1 = "H1";
 exports.H1Md = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: LEVEL_DESC(1),
     specializedFrom: COMP,
     props: {
@@ -110,6 +112,7 @@ exports.H1Md = (0, metadata_helpers_1.createMetadata)({
 });
 const H2 = "H2";
 exports.H2Md = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: LEVEL_DESC(2),
     specializedFrom: COMP,
     props: {
@@ -134,6 +137,7 @@ exports.H2Md = (0, metadata_helpers_1.createMetadata)({
 });
 const H3 = "H3";
 exports.H3Md = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: LEVEL_DESC(3),
     specializedFrom: COMP,
     props: {
@@ -158,6 +162,7 @@ exports.H3Md = (0, metadata_helpers_1.createMetadata)({
 });
 const H4 = "H4";
 exports.H4Md = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: LEVEL_DESC(4),
     specializedFrom: COMP,
     props: {
@@ -182,6 +187,7 @@ exports.H4Md = (0, metadata_helpers_1.createMetadata)({
 });
 const H5 = "H5";
 exports.H5Md = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: LEVEL_DESC(5),
     specializedFrom: COMP,
     props: {
@@ -206,6 +212,7 @@ exports.H5Md = (0, metadata_helpers_1.createMetadata)({
 });
 const H6 = "H6";
 exports.H6Md = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: LEVEL_DESC(6),
     specializedFrom: COMP,
     props: {

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

@@ -12,9 +12,9 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const HelloWorldNative_1 = require("./HelloWorldNative");
 const COMP = "HelloWorld";
 exports.HelloWorldMd = (0, metadata_helpers_1.createMetadata)({
+    status: "experimental",
     description: "`HelloWorld` is a demonstration component that shows basic XMLUI patterns. " +
         "It displays a customizable greeting message with an interactive click counter.",
-    status: "experimental",
     props: {
         id: {
             description: "The unique identifier for the component.",