xmlui 0.9.51 → 0.9.53

package/dist/scripts/src/components/Link/LinkNative.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkNative = void 0;
+exports.LinkNative = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@remix-run/react");
@@ -22,8 +22,12 @@ const classnames_1 = __importDefault(require("classnames"));
 const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
 const component_utils_1 = require("../component-utils");
 const IconNative_1 = require("../Icon/IconNative");
+exports.defaultProps = {
+    active: false,
+    disabled: false,
+};
 exports.LinkNative = (0, react_1.forwardRef)(function LinkNative(props, forwardedRef) {
-    const _a = specifyTypes(props), { to, children, icon, active, onClick, target, disabled, style } = _a, anchorProps = __rest(_a, ["to", "children", "icon", "active", "onClick", "target", "disabled", "style"]);
+    const _a = specifyTypes(props), { to, children, icon, active = exports.defaultProps.active, onClick, target, disabled = exports.defaultProps.disabled, style } = _a, anchorProps = __rest(_a, ["to", "children", "icon", "active", "onClick", "target", "disabled", "style"]);
     const iconLink = !!icon && !children;
     const smartTo = (0, react_1.useMemo)(() => {
         return (0, component_utils_1.createUrlWithQueryParams)(to);

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

@@ -28,17 +28,18 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
             `When both \`items\` and \`data\` are used, \`items\` has priority.`),
         loading: (0, ComponentDefs_1.d)(`This property delays the rendering of children until it is set to \`false\`, or the ` +
             `component receives usable list items via the [\`data\`](#data) property.`),
-        limit: (0, ComponentDefs_1.d)(`This property limits the number of items displayed in the \`${COMP}\`.`),
+        limit: (0, ComponentDefs_1.d)(`This property limits the number of items displayed in the \`${COMP}\`. If not set, all items are displayed.`),
         scrollAnchor: {
             description: `This property pins the scroll position to a specified location of the list. Available values are shown below.`,
             availableValues: abstractions_1.scrollAnchoringValues,
             type: "string",
-            defaultValue: "top",
+            defaultValue: ListNative_1.defaultProps.scrollAnchor,
         },
-        groupBy: (0, ComponentDefs_1.d)(`This property sets which attribute of the data is used to group the list items. ` +
-            `If the attribute does not appear in the data, it will be ignored.`),
-        orderBy: (0, ComponentDefs_1.d)(`This property enables the ordering of list items by specifying an attribute in the data.`),
-        availableGroups: (0, ComponentDefs_1.d)(`This property is an array of group names that the \`${COMP}\` will display.`),
+        groupBy: (0, ComponentDefs_1.d)("This property sets which data item property is used to group the list items. If not set, " +
+            "no grouping is done."),
+        orderBy: (0, ComponentDefs_1.d)(`This optioanl property enables the ordering of list items by specifying an attribute in the data.`),
+        availableGroups: (0, ComponentDefs_1.d)(`This property is an array of group names that the \`${COMP}\` will display. ` +
+            "If not set, all groups in the data are displayed."),
         groupHeaderTemplate: (0, metadata_helpers_1.dComponent)(`Enables the customization of how the groups are displayed, similarly to the ` +
             `[\`itemTemplate\`](#itemtemplate). You can use the \`$item\` context variable to access ` +
             `an item group and map its individual attributes.`),
@@ -53,22 +54,22 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
         idKey: {
             description: "Denotes which attribute of an item acts as the ID or key of the item",
             type: "string",
-            defaultValue: "id",
+            defaultValue: ListNative_1.defaultProps.idKey,
         },
-        groupsInitiallyExpanded: (0, ComponentDefs_1.d)(`This Boolean property defines whether the list groups are initially expanded.`),
-        defaultGroups: (0, ComponentDefs_1.d)(`This property adds a list of default groups for the \`${COMP}\` and displays the group ` +
+        groupsInitiallyExpanded: (0, ComponentDefs_1.d)(`This Boolean property defines whether the list groups are initially expanded.`, undefined, "boolean", ListNative_1.defaultProps.groupsInitiallyExpanded),
+        defaultGroups: (0, ComponentDefs_1.d)(`This property adds an optional list of default groups for the \`${COMP}\` and displays the group ` +
             `headers in the specified order. If the data contains group headers not in this list, ` +
             `those headers are also displayed (after the ones in this list); however, their order ` +
             `is not deterministic.`),
         hideEmptyGroups: {
             description: "This boolean property indicates if empty groups should be hidden (no header and footer are displayed).",
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: ListNative_1.defaultProps.hideEmptyGroups,
         },
         borderCollapse: {
             description: "Collapse items borders",
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: ListNative_1.defaultProps.borderCollapse,
         },
     },
     childrenAsTemplate: "itemTemplate",

package/dist/scripts/src/components/List/ListNative.js

@@ -45,7 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListNative = exports.ListContext = void 0;
+exports.ListNative = exports.ListContext = exports.defaultProps = void 0;
 exports.useListData = useListData;
 exports.MemoizedSection = MemoizedSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -63,6 +63,14 @@ const misc_1 = require("../../components-core/utils/misc");
 const SpinnerNative_1 = require("../Spinner/SpinnerNative");
 const TextNative_1 = require("../Text/TextNative");
 const container_helpers_1 = require("../container-helpers");
+// Default props for List component
+exports.defaultProps = {
+    idKey: "id",
+    scrollAnchor: "top",
+    hideEmptyGroups: true,
+    borderCollapse: true,
+    groupsInitiallyExpanded: true,
+};
 exports.ListContext = react_1.default.createContext({
     isExpanded: (id) => false,
     toggleExpanded: (id, isExpanded) => { },
@@ -208,7 +216,7 @@ const useShift = (listData, idKey) => {
     }
     return shouldShift.current;
 };
-exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true, }, ref) {
+exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = exports.defaultProps.scrollAnchor, requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = exports.defaultProps.idKey, style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = exports.defaultProps.borderCollapse, }, ref) {
     var _a;
     const virtualizerRef = (0, react_1.useRef)(null);
     const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);

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

@@ -10,6 +10,13 @@ exports.LogoMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: `The \`${COMP}\` component represents a logo or a brand symbol. Usually, you use ` +
         `this component in the [\`AppHeader\`](./AppHeader.mdx#logotemplate).`,
+    props: {
+        alt: {
+            description: "Alternative text for the logo image for accessibility.",
+            type: "string",
+            defaultValue: LogoNative_1.defaultProps.alt,
+        }
+    }
 });
 exports.logoComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LogoMd, ({ node, layoutCss, extractValue }) => {
     return (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, { style: layoutCss });

package/dist/scripts/src/components/Logo/LogoNative.js

@@ -1,15 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Logo = void 0;
+exports.Logo = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ImageNative_1 = require("../Image/ImageNative");
 const AppHeaderNative_1 = require("../AppHeader/AppHeaderNative");
+// Default props for Logo component
+exports.defaultProps = {
+    alt: "Logo",
+};
 exports.Logo = (0, react_1.forwardRef)(function Logo({ style, }, forwardedRef) {
     const logoUrl = (0, AppHeaderNative_1.useLogoUrl)();
     if (!logoUrl) {
         return null;
     }
     //width auto for safari
-    return ((0, jsx_runtime_1.jsx)(ImageNative_1.Image, { ref: forwardedRef, src: logoUrl, alt: "Logo", style: Object.assign({ width: "auto", boxShadow: "none" }, style) }));
+    return ((0, jsx_runtime_1.jsx)(ImageNative_1.Image, { ref: forwardedRef, src: logoUrl, alt: exports.defaultProps.alt, style: Object.assign({ width: "auto", boxShadow: "none" }, style) }));
 });

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

@@ -18,7 +18,9 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` displays plain text styled using markdown syntax.`,
     themeVars: (0, themeVars_1.parseScssVar)(Markdown_module_scss_1.default.themeVars),
     props: {
-        content: (0, ComponentDefs_1.d)("This property sets the markdown content to display."),
+        content: (0, ComponentDefs_1.d)("This property sets the markdown content to display. Alternatively, you can nest " +
+            "the markdown content as a child in a CDATA section. In neither this property " +
+            "value nor any child is defined, empty content is displayed."),
         codeHighlighter: {
             description: "This property sets the code highlighter to use.",
             isInternal: true,
@@ -29,14 +31,13 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
                 "indent found at the start of the content lines is removed from the " +
                 "beginning of every line.",
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: MarkdownNative_1.defaultProps.removeIndents,
         },
         showHeadingAnchors: {
             description: "This boolean property specifies whether heading anchors should be " +
                 "displayed. If set to `true`, heading anchors will be displayed on hover " +
                 "next to headings.",
             valueType: "boolean",
-            defaultValue: false,
         },
     },
     defaultThemeVars: {
@@ -98,7 +99,7 @@ exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
             }
         });
     }
-    return ((0, jsx_runtime_1.jsx)(TransformedMarkdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, true), codeHighlighter: extractValue(node.props.codeHighlighter), extractValue: extractValue, showHeadingAnchors: extractValue.asOptionalBoolean(node.props.showHeadingAnchors, false), children: renderedChildren }));
+    return ((0, jsx_runtime_1.jsx)(TransformedMarkdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, true), codeHighlighter: extractValue(node.props.codeHighlighter), extractValue: extractValue, showHeadingAnchors: extractValue.asOptionalBoolean(node.props.showHeadingAnchors), children: renderedChildren }));
 });
 const TransformedMarkdown = ({ children, removeIndents, style, extractValue, codeHighlighter, showHeadingAnchors, }) => {
     const markdownContent = (0, react_1.useMemo)(() => {

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -47,7 +47,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Markdown = void 0;
+exports.Markdown = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
@@ -68,6 +68,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const TreeDisplayNative_1 = require("../TreeDisplay/TreeDisplayNative");
 const unist_util_visit_1 = require("unist-util-visit");
+const ExpandableItemNative_1 = require("../ExpandableItem/ExpandableItemNative");
+// Default props for the Markdown component
+exports.defaultProps = {
+    removeIndents: true,
+};
 function PreTagComponent({ id, children, codeHighlighter }) {
     // TEMP: After ironing out theming for syntax highlighting, this should be removed
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -91,7 +96,7 @@ function PreTagComponent({ id, children, codeHighlighter }) {
     }
     return ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { meta: highlighterResult.meta, textToCopy: highlighterResult.codeStr, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "codefence", syntaxHighlightClasses: highlighterResult.classNames, dangerouslySetInnerHTML: { __html: highlighterResult.cleanedHtmlStr } }) }));
 }
-exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, children, style, codeHighlighter, showHeadingAnchors = false, }) {
+exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = exports.defaultProps.removeIndents, children, style, codeHighlighter, showHeadingAnchors, }) {
     if (typeof children !== "string") {
         return null;
     }
@@ -110,6 +115,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
     return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: style, children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, CodeBlockNative_1.markdownCodeBlockParser, markdownImgParser], rehypePlugins: [rehype_raw_1.default], components: {
                 details(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    console.log("details", children);
                     return ((0, jsx_runtime_1.jsx)("details", Object.assign({ className: HtmlTags_module_scss_1.default.htmlDetails }, props, { children: children })));
                 },
                 video(_a) {
@@ -118,7 +124,6 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                 },
                 img(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
-                    console.log("img", node);
                     const src = props === null || props === void 0 ? void 0 : props.src;
                     const popOut = props === null || props === void 0 ? void 0 : props["data-popout"];
                     const alt = (props === null || props === void 0 ? void 0 : props.alt) || "";
@@ -267,19 +272,12 @@ const Blockquote = ({ children, style }) => {
     };
     // Extract all text content
     const allText = react_1.default.Children.toArray(children).map(extractTextContent).join("");
-    // Check for admonition pattern
+    // Check for adornment pattern
     const match = allText.match(/\[!([A-Z]+)\]/);
-    const isAdmonition = !!match;
-    if (isAdmonition && match && match[1]) {
+    const isAdornment = !!match;
+    if (isAdornment && match && match[1]) {
         const type = match[1].toLowerCase();
-        const iconMap = {
-            info: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_info" }),
-            warning: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_warning" }),
-            danger: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_danger" }),
-            note: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_note" }),
-            tip: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_tip" }),
-        };
-        // Process children to remove the admonition marker
+        // Process children to remove the adornment marker
         const processNode = (node) => {
             if (typeof node === "string") {
                 return node.replace(/\[!([A-Z]+)\]\s*/, "");
@@ -303,7 +301,49 @@ const Blockquote = ({ children, style }) => {
             return node;
         };
         const processedChildren = react_1.default.Children.map(children, processNode);
-        // Render admonition blockquote with the updated structure
+        // Handle [!DETAILS] or [!SDETAILS] adornment
+        if (type === "details" || type === "sdetails") {
+            // Extract summary from the original text
+            const originalText = allText;
+            const detailsMatch = originalText.match(/\[!(S?DETAILS)\](.*?)(?:\n|$)/);
+            const summaryText = detailsMatch && detailsMatch[2] ? detailsMatch[2].trim() : "Details";
+            const withSwitch = type === "sdetails";
+            // Create separate content children without the summary line
+            // We need to find the first Text element and remove the summary from it
+            let contentWithoutSummary = [];
+            let foundFirstTextElement = false;
+            react_1.default.Children.forEach(processedChildren, (child, index) => {
+                var _a;
+                // Process the first text element to remove the summary line
+                if (!foundFirstTextElement && react_1.default.isValidElement(child) && ((_a = child.props) === null || _a === void 0 ? void 0 : _a.children)) {
+                    foundFirstTextElement = true;
+                    // Get the child's text content
+                    const childText = extractTextContent(child.props.children);
+                    // Skip the first line which contains the summary
+                    const lines = childText.split('\n');
+                    if (lines.length > 1) {
+                        // Create modified element with remaining content
+                        const remainingContent = lines.slice(1).join('\n');
+                        if (remainingContent.trim()) {
+                            contentWithoutSummary.push(react_1.default.cloneElement(child, child.props, remainingContent));
+                        }
+                    }
+                }
+                else {
+                    // Keep all other elements unchanged
+                    contentWithoutSummary.push(child);
+                }
+            });
+            return ((0, jsx_runtime_1.jsx)(ExpandableItemNative_1.ExpandableItem, { summary: summaryText, withSwitch: withSwitch, children: contentWithoutSummary }));
+        }
+        const iconMap = {
+            info: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_info" }),
+            warning: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_warning" }),
+            danger: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_danger" }),
+            note: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_note" }),
+            tip: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_tip" }),
+        };
+        // Render adornment blockquote with the updated structure
         return ((0, jsx_runtime_1.jsx)("blockquote", { className: (0, classnames_1.default)(Markdown_module_scss_1.default.admonitionBlockquote, {
                 [Markdown_module_scss_1.default.info]: type === "info",
                 [Markdown_module_scss_1.default.warning]: type === "warning",
@@ -314,13 +354,12 @@ const Blockquote = ({ children, style }) => {
     }
     return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.blockquoteContainer, children: children }) }));
 };
-const OrderedList = ({ children, style }) => {
-    return ((0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, style: style, children: children }));
-};
-const ListItem = ({ children, style }) => {
-    return ((0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, style: style, children: children }));
-};
 function LinkAwareHeading({ children, level, showHeadingAnchors }) {
+    var _a, _b;
+    const appContext = (0, AppContext_1.useAppContext)();
+    if (showHeadingAnchors === undefined) {
+        showHeadingAnchors = (_b = (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.showHeadingAnchors) !== null && _b !== void 0 ? _b : false;
+    }
     let headingLabel = "";
     let anchorId = "";
     if (!children)
@@ -344,6 +383,10 @@ function LinkAwareHeading({ children, level, showHeadingAnchors }) {
                 if (match && match.length > 0) {
                     anchorId = match[1];
                 }
+                else {
+                    // --- Generate a valid anchor ID from the last element
+                    anchorId = headingToAnchorLink(extractTextNodes(last));
+                }
             }
         }
     }

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

@@ -77,6 +77,20 @@ function parseSegmentProps(input) {
     if (heightMatch) {
         segment.height = heightMatch[1];
     }
+    // Match patterns enclosed in /pattern/ format
+    const patternMatches = input.match(/\/([^\/]+)\//g);
+    if (patternMatches) {
+        segment.patterns = patternMatches.map(pattern => 
+        // Remove the surrounding slashes
+        pattern.substring(1, pattern.length - 1));
+    }
+    // Match bordered patterns enclosed in !/pattern/ format
+    const borderedPatternMatches = input.match(/!\/(.[^\/]+)\//g);
+    if (borderedPatternMatches) {
+        segment.borderedPatterns = borderedPatternMatches.map(pattern => 
+        // Remove the leading !/ and trailing /
+        pattern.substring(2, pattern.length - 1));
+    }
     return segment;
 }
 function parsePlaygroundPattern(content) {
@@ -246,6 +260,12 @@ function convertPlaygroundPatternToMarkdown(content) {
                 .join(",");
             segmentAttrs += `{${highlights}}`;
         }
+        if (segment.patterns && segment.patterns.length > 0) {
+            segmentAttrs += " " + segment.patterns.map((p) => `/${p}/`).join(" ");
+        }
+        if (segment.borderedPatterns && segment.borderedPatterns.length > 0) {
+            segmentAttrs += " " + segment.borderedPatterns.map((p) => `!/` + p + `/`).join(" ");
+        }
         segmentAttrs = segmentAttrs.trim().replace(/\s+/g, " ");
         switch (type) {
             case "app":
@@ -314,7 +334,9 @@ function observeTreeDisplay(content) {
 }
 function convertTreeDisplayToMarkdown(content) {
     if (content.startsWith("```xmlui-tree") && content.endsWith("```")) {
-        const treeContent = content.slice("```xmlui-tree".length, content.indexOf("```", "```xmlui-tree".length)).trim();
+        const treeContent = content
+            .slice("```xmlui-tree".length, content.indexOf("```", "```xmlui-tree".length))
+            .trim();
         return `<section data-tree-content="${btoa(treeContent)}"></section>\n\n`;
     }
 }

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

@@ -21,13 +21,13 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             description: `Toggles whether the dialog encompasses the whole UI (\`true\`) or not and has a minimum ` +
                 `width and height (\`false\`).`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: ModalDialogNative_1.defaultProps.fullScreen,
         },
         title: (0, ComponentDefs_1.d)(`Provides a prestyled heading to display the intent of the dialog.`),
         closeButtonVisible: {
             description: `Shows (\`true\`) or hides (\`false\`) the visibility of the close button on the dialog.`,
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: ModalDialogNative_1.defaultProps.closeButtonVisible,
         },
     },
     events: {

package/dist/scripts/src/components/ModalDialog/ModalDialogNative.js

@@ -45,7 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalDialog = exports.ModalDialogFrame = void 0;
+exports.ModalDialog = exports.ModalDialogFrame = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const Dialog = __importStar(require("@radix-ui/react-dialog"));
@@ -57,6 +57,11 @@ const misc_1 = require("../../components-core/utils/misc");
 const IconNative_1 = require("../Icon/IconNative");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const ModalVisibilityContext_1 = require("./ModalVisibilityContext");
+// Default props for ModalDialog component
+exports.defaultProps = {
+    fullScreen: false,
+    closeButtonVisible: true,
+};
 exports.ModalDialogFrame = react_1.default.forwardRef(({ isInitiallyOpen, onOpen, onClose, registerComponentApi, renderDialog }, ref) => {
     const modalContextStateValue = useModalLocalOpenState(isInitiallyOpen, onOpen, onClose);
     const { doOpen, doClose, isOpen, openParams } = modalContextStateValue;
@@ -110,7 +115,7 @@ function useModalOpenState(isInitiallyOpen = true, onOpen, onClose) {
     const modalLocalOpenState = useModalLocalOpenState(isInitiallyOpen, onOpen, onClose);
     return modalStateContext || modalLocalOpenState;
 }
-exports.ModalDialog = react_1.default.forwardRef(({ children, style, isInitiallyOpen, fullScreen, title, closeButtonVisible = true, onOpen, onClose, }, ref) => {
+exports.ModalDialog = react_1.default.forwardRef(({ children, style, isInitiallyOpen, fullScreen = exports.defaultProps.fullScreen, title, closeButtonVisible = exports.defaultProps.closeButtonVisible, onOpen, onClose, }, ref) => {
     const { root } = (0, ThemeContext_1.useTheme)();
     const modalRef = (0, react_1.useRef)(null);
     const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, modalRef) : modalRef;

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

@@ -19,7 +19,8 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
         `(\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
-        initiallyExpanded: (0, ComponentDefs_1.d)('This property defines whether the group is initially expanded or collapsed.'),
+        initiallyExpanded: (0, ComponentDefs_1.d)("This property defines whether the group is initially expanded or collapsed. If not " +
+            "defined, the group is collapsed by default."),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         to: {
             description: `This property defines an optional navigation link.`,

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

@@ -25,29 +25,27 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
                 `has a particular visual appearance, provided its [\`displayActive\`](#displayactive) ` +
                 `property is set to \`true\`.`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: NavLinkNative_1.defaultProps.active,
         },
         target: {
-            description: `This property specifies how to open the clicked link.`,
+            description: `This optionally property specifies how to open the clicked link.`,
             availableValues: abstractions_1.LinkTargetMd,
             type: "string",
-            defaultValue: "_self",
         },
         label: (0, metadata_helpers_1.dLabel)(),
         vertical: {
             description: `This property sets how the active status is displayed on the \`${COMP}\` component. If ` +
                 `set to true, the indicator is displayed on the side which lends itself to a vertically ` +
-                `aligned navigation menu.`,
+                `aligned navigation menu. By default, it displays a horizontal indicator.`,
             valueType: "boolean",
-            defaultValue: false,
         },
         displayActive: {
             description: `This Boolean property indicates if the active state of a link should have a visual ` +
                 `indication. Setting it to \`false\` removes the visual indication of an active link.`,
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: NavLinkNative_1.defaultProps.displayActive,
         },
-        icon: (0, ComponentDefs_1.d)(`This property allows you to add an icon (specify the icon's name) to the navigation link.`),
+        icon: (0, ComponentDefs_1.d)(`This property allows you to add an optional icon (specify the icon's name) to the navigation link.`),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),

package/dist/scripts/src/components/NavLink/NavLinkNative.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavLink = void 0;
+exports.NavLink = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@remix-run/react");
@@ -25,10 +25,15 @@ const AppNative_1 = require("../App/AppNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 const NavGroupContext_1 = require("../NavGroup/NavGroupContext");
+// Default props for NavLink component
+exports.defaultProps = {
+    active: false,
+    displayActive: true
+};
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */
-    uid, children, disabled, to, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
+    uid, children, disabled, to, displayActive = exports.defaultProps.displayActive, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
     const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);

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

@@ -17,12 +17,18 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         logoTemplate: (0, metadata_helpers_1.dComponent)(`This property defines the logo template to display in the navigation panel with the ` +
             `\`vertical\` and \`vertical-sticky\` layout.`),
+        inDrawer: {
+            description: `This property determines if the navigation panel is displayed in a drawer.`,
+            valueType: "boolean",
+            defaultValue: NavPanelNative_1.defaultProps.inDrawer,
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`horizontalAlignment-logo-${COMP}`]: "center",
         [`backgroundColor-${COMP}`]: "$backgroundColor",
+        [`backgroundColor-${COMP}-horizontal`]: "$backgroundColor-AppHeader",
         [`border-${COMP}`]: '0px solid $borderColor',
         [`paddingHorizontal-${COMP}`]: "0",
         [`paddingVertical-logo-${COMP}`]: "$space-4",

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavPanel = exports.NavPanelContext = void 0;
+exports.NavPanel = exports.NavPanelContext = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
@@ -46,6 +46,10 @@ const ScrollContext_1 = require("../../components-core/ScrollContext");
 const LogoNative_1 = require("../Logo/LogoNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const AppNative_1 = require("../App/AppNative");
+// Default props for NavPanel component
+exports.defaultProps = {
+    inDrawer: false,
+};
 exports.NavPanelContext = react_1.default.createContext(null);
 const contextValue = {
     inDrawer: true,
@@ -54,7 +58,7 @@ function DrawerNavPanel({ logoContent, children, className, style, }) {
     const scrollContainerRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }) }));
 }
-exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, inDrawer, renderChild, }, forwardedRef) {
+exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, inDrawer = exports.defaultProps.inDrawer, renderChild, }, forwardedRef) {
     var _a, _b;
     const scrollContainerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;

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

@@ -10,6 +10,7 @@ const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const NestedAppNative_1 = require("./NestedAppNative");
+const defaultProps_1 = require("./defaultProps");
 const COMP = "NestedApp";
 exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
     description: `The ${COMP} component allows you to nest an entire xmlui app into another one.
@@ -23,24 +24,34 @@ exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
         },
         components: {
             description: "This property defines an optional list of components to be used with the nested app.",
+            defaultValue: defaultProps_1.defaultProps.components,
         },
         config: {
             description: "You can define the nested app's configuration with this property.",
         },
         activeTheme: {
-            description: "This property defines the active theme for the nested app.",
+            description: "This property defines the active theme for the nested app. " +
+                "If not set, the default theme is used.",
         },
         activeTone: {
-            description: "This property defines the active tone for the nested app.",
+            description: "This property defines the active tone for the nested app. " +
+                "If not set, the default tone is used.",
         },
         title: {
-            description: "The title of the nested app.",
+            description: "The optional title of the nested app. If not set, no title is displayed.",
         },
         height: {
-            description: "The height of the nested app.",
+            description: "The height of the nested app. If not set, the height is determined automatically.",
         },
         allowPlaygroundPopup: {
             description: "This property defines whether the nested app can be opened in the xmlui playground.",
+            valueType: "boolean",
+            defaultValue: defaultProps_1.defaultProps.allowPlaygroundPopup,
+        },
+        withFrame: {
+            description: "This property defines whether the nested app should be displayed with a frame.",
+            valueType: "boolean",
+            defaultValue: defaultProps_1.defaultProps.withFrame,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(NestedApp_module_scss_1.default.themeVars),
@@ -49,6 +60,7 @@ exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
         [`marginBottom-${COMP}`]: "$space-3",
         [`padding-${COMP}`]: "$space-4",
         [`paddingTop-${COMP}`]: "$space-2",
+        [`border-${COMP}`]: "1px solid $color-surface-100",
         [`borderRadius-${COMP}`]: "$space-4",
         [`backgroundColor-frame-${COMP}`]: "$color-primary-50",
         [`gap-frame-${COMP}`]: "$space-4",