xmlui 0.9.50 → 0.9.52

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.50",
+    "version": "0.9.52",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -51,7 +51,7 @@
         "@types/color": "3.0.6",
         "@vitejs/plugin-react": "4.3.0",
         "adm-zip": "0.5.10",
-        "axios": "1.7.7",
+        "axios": "1.8.2",
         "chroma-js": "^3.1.2",
         "classnames": "2.5.1",
         "cmdk": "^1.0.4",
@@ -105,15 +105,13 @@
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-textdocument": "^1.0.11",
-        "xml-formatter": "^3.6.6",
-        "yargs": "17.7.2",
-        "xmlui-charts": "*"
+        "yargs": "17.7.2"
     },
     "devDependencies": {
         "@babel/core": "7.19.6",
         "@babel/preset-env": "7.19.4",
         "@babel/preset-typescript": "7.18.6",
-        "@playwright/test": "1.52.0",
+        "@playwright/test": "1.53.0",
         "@rollup/pluginutils": "5.1.0",
         "@types/adm-zip": "0.5.4",
         "@types/glob": "7.2.0",
@@ -141,7 +139,7 @@
         "rollup-plugin-visualizer": "5.8.3",
         "serve": "14.2.0",
         "typescript": "5.7.3",
-        "vite": "5.4.9",
+        "vite": "5.4.19",
         "vite-plugin-dts": "4.5.0",
         "vitest": "^3.0.3"
     },

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

@@ -16,35 +16,35 @@ exports.APICallMd = (0, ComponentDefs_1.createMetadata)({
             description: "The method of data manipulation can be done via setting this property.",
             valueType: "string",
             availableValues: abstractions_1.httpMethodNames,
-            defaultValue: "get",
+            defaultValue: APICallNative_1.defaultProps.method,
         },
         url: {
-            description: "Use this property to set the URL to send data to.",
+            description: "Use this property to set the URL to which data will be sent. If not provided, an empty URL is used.",
             isRequired: true,
             valueType: "string",
         },
         rawBody: {
-            description: "This property sets the request body to the value provided here without any conversion. " +
+            description: "This optional property sets the request body to the value provided here without any conversion. " +
                 "Use the * \`body\` property if you want the object sent in JSON. When you define " +
                 "\`body\` and \`rawBody\`, the latest one prevails.",
             valueType: "string",
         },
         body: {
-            description: "This property sets the request body. The object you pass here will be serialized to " +
+            description: "This optional property sets the request body. The object you pass here will be serialized to " +
                 "JSON when sending the request. Use the \`rawBody\` property to send another request " +
                 "body using its native format. When you define \`body\` and \`rawBody\`, the latest " +
                 "one prevails.",
             valueType: "string",
         },
         queryParams: {
-            description: "This property sets the query parameters for the request. The object you pass here will " +
+            description: "This optional property sets the query parameters for the request. The object you pass here will " +
                 "be serialized to a query string and appended to the request URL. You can specify key " +
                 "and value pairs where the key is the name of a particular query parameter and the value " +
                 "is that parameter's value.",
         },
         headers: {
-            description: "You can define request header values as key and value pairs, where the key is the ID of " +
-                "the particular header and the value is that header's value.",
+            description: "You can optionally define request header values as key-value pairs, where the key is the ID " +
+                "of the particular header and the value is that header's corresponding value.",
         },
         confirmTitle: {
             description: "This optional string sets the title in the confirmation dialog that is displayed before " +
@@ -62,18 +62,19 @@ exports.APICallMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "string",
         },
         inProgressNotificationMessage: {
-            description: "This property customizes the message that is displayed in a toast while the API operation " +
-                "is in progress.",
+            description: "This property customizes the message that is displayed in a toast while the API " +
+                "operation is in progress. If not defined, no progress message is displayed.",
             valueType: "string",
         },
         errorNotificationMessage: {
-            description: "This property defines the message to display automatically when the operation results " +
-                "in an error.",
+            description: "This property defines the message to display automatically when the operation " +
+                "results in an error. You can use the `$error` context value in an expression to " +
+                "refer to the original error message.",
             valueType: "string",
         },
         completedNotificationMessage: {
             description: "This property defines the message to display automatically when the operation has " +
-                "been completed.",
+                "been completed. When this property is not defined, the completion does not display any message.",
             valueType: "string",
         },
         payloadType: (0, metadata_helpers_1.dInternal)(),

package/dist/scripts/src/components/APICall/APICallNative.js

@@ -9,11 +9,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.APICallNative = APICallNative;
 const react_1 = require("react");
 const misc_1 = require("../../components-core/utils/misc");
 const APICall_1 = require("../../components-core/action/APICall");
+exports.defaultProps = {
+    method: "get",
+};
 function APICallNative({ registerComponentApi, node, uid }) {
+    // TODO pause until the apiInterceptorContext is initialized (to make sure the API calls are intercepted)
     const execute = (0, misc_1.useEvent)((executionContext, ...eventArgs) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c, _d;
         const options = eventArgs[1];

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

@@ -30,12 +30,14 @@ exports.AccordionMd = (0, ComponentDefs_1.createMetadata)({
             availableValues: abstractions_1.triggerPositionNames,
         },
         collapsedIcon: {
-            description: `This property is the name of the icon that is displayed when the accordion is collapsed.`,
+            description: "This property is the name of the icon that is displayed when the accordion is " +
+                "collapsed. This property is the name of the icon that is displayed when the accordion is expanded. If not provided, a chevron-down icon is used.",
             valueType: "string",
             defaultValue: AccordionNative_1.defaultProps.collapsedIcon,
         },
         expandedIcon: {
-            description: `This property is the name of the icon that is displayed when the accordion is expanded.`,
+            description: "This property is the name of the icon that is displayed when the accordion is " +
+                "expanded. If not provided, a chevron-up icon is used.",
             valueType: "string",
         },
         hideIcon: {

package/dist/scripts/src/components/Accordion/AccordionItem.js

@@ -12,9 +12,9 @@ exports.AccordionItemMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a non-visual component describing a tab. Tabs component may use nested ` +
         `${COMP} instances from which the user can select.`,
     props: {
-        header: (0, ComponentDefs_1.d)("This property declares the text used in the component's header."),
+        header: (0, ComponentDefs_1.d)("This property declares the text used in the component's header. If not provided, the header will be empty.", null, "string"),
         headerTemplate: (0, metadata_helpers_1.dComponent)("This property describes the template to use as the component's header."),
-        initiallyExpanded: (0, ComponentDefs_1.d)(`This property indicates if the ${COMP} is expanded (\`true\`) or collapsed (\`false\`).`, null, "boolean", false),
+        initiallyExpanded: (0, ComponentDefs_1.d)(`This property indicates if the ${COMP} is expanded (\`true\`) or collapsed (\`false\`).`, null, "boolean", AccordionItemNative_1.defaultProps.initiallyExpanded),
     },
 });
 exports.accordionItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AccordionItemMd, (rendererContext) => {

package/dist/scripts/src/components/Accordion/AccordionItemNative.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.AccordionItemComponent = void 0;
+exports.AccordionItemComponent = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const RAccordion = __importStar(require("@radix-ui/react-accordion"));
@@ -47,7 +47,11 @@ const IconNative_1 = __importDefault(require("../../components/Icon/IconNative")
 function defaultRenderer(header) {
     return (0, jsx_runtime_1.jsx)("div", { children: header });
 }
-exports.AccordionItemComponent = (0, react_1.forwardRef)(function AccordionItemComponent({ id, header, headerRenderer = defaultRenderer, content, initiallyExpanded, style }, forwardedRef) {
+exports.defaultProps = {
+    initiallyExpanded: false,
+    headerRenderer: defaultRenderer,
+};
+exports.AccordionItemComponent = (0, react_1.forwardRef)(function AccordionItemComponent({ id, header, headerRenderer = exports.defaultProps.headerRenderer, content, initiallyExpanded = exports.defaultProps.initiallyExpanded, style }, forwardedRef) {
     const generatedId = (0, react_1.useId)();
     const itemId = (0, react_1.useMemo)(() => (id ? `${id}` : generatedId), [id, generatedId]);
     const triggerId = (0, react_1.useMemo)(() => `trigger_${itemId}`, [itemId]);

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.appRenderer = exports.AppMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const App_module_scss_1 = __importDefault(require("./App.module.scss"));
+const Sheet_module_scss_1 = __importDefault(require("./Sheet.module.scss"));
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
@@ -31,7 +32,8 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
             availableValues: AppLayoutContext_1.appLayoutMd,
         },
         loggedInUser: {
-            description: `Stores information about the currently logged in user.`,
+            description: "Stores information about the currently logged-in user. By not defining this property, " +
+                "you can indicate that no user is logged in.",
             valueType: "string",
         },
         logoTemplate: (0, metadata_helpers_1.dComponent)("Optional template of the app logo"),
@@ -48,36 +50,38 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "string",
         },
         name: {
-            description: "Optional application name (visible in the browser tab)",
+            description: "Optional application name (visible in the browser tab). When you do not define " +
+                "this property, the tab name falls back to the one defined in the app\'s configuration. " +
+                'If the name is not configured, "XMLUI App" is displayed in the tab.',
             valueType: "string",
         },
         scrollWholePage: {
             description: `This boolean property specifies whether the whole page should scroll (\`true\`) or just ` +
                 `the content area (\`false\`). The default value is \`true\`.`,
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: AppNative_1.defaultProps.scrollWholePage,
         },
         noScrollbarGutters: {
             description: "This boolean property specifies whether the scrollbar gutters should be hidden.",
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: AppNative_1.defaultProps.noScrollbarGutters,
         },
         defaultTone: {
             description: 'This property sets the app\'s default tone ("light" or "dark").',
             valueType: "string",
-            defaultValue: "light",
+            defaultValue: AppNative_1.defaultProps.defaultTone,
             availableValues: ["light", "dark"],
         },
         defaultTheme: {
             description: "This property sets the app's default theme.",
             valueType: "string",
-            defaultValue: "xmlui",
+            defaultValue: AppNative_1.defaultProps.defaultTheme,
         },
     },
     events: {
         ready: (0, ComponentDefs_1.d)(`This event fires when the \`${COMP}\` component finishes rendering on the page.`),
     },
-    themeVars: (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars),
+    themeVars: Object.assign(Object.assign({}, (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars)), (0, themeVars_1.parseScssVar)(Sheet_module_scss_1.default.themeVars)),
     limitThemeVarsToComponent: true,
     themeVarDescriptions: {
         "maxWidth-content-App": "This theme variable defines the maximum width of the main content. If the main " +
@@ -89,10 +93,11 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
             "with one of the vertical layouts.",
     },
     defaultThemeVars: {
+        "maxWidth-Drawer": "20rem",
         [`width-navPanel-${COMP}`]: "$space-64",
         [`backgroundColor-navPanel-${COMP}`]: "$backgroundColor",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
-        [`boxShadow-header-${COMP}`]: "$boxShadow-spread",
+        [`boxShadow-header-${COMP}`]: "none",
         [`boxShadow-navPanel-${COMP}`]: "$boxShadow-spread",
         [`scroll-padding-block-Pages`]: "$space-4",
         [`backgroundColor-content-App`]: "$backgroundColor",
@@ -394,7 +399,9 @@ function PageIndexer({ Page, renderChild, onIndexed, }) {
                 const elementsToRemove = clone.querySelectorAll("style, script");
                 elementsToRemove.forEach((el) => el.remove());
                 const titleElement = clone.querySelector("h1");
-                const title = titleElement ? titleElement.innerText : (navLabel || pageUrl.split("/").pop() || pageUrl);
+                const title = titleElement
+                    ? titleElement.innerText
+                    : navLabel || pageUrl.split("/").pop() || pageUrl;
                 titleElement === null || titleElement === void 0 ? void 0 : titleElement.remove(); // Remove title element from clone to avoid duplication
                 const textContent = (clone.textContent || "").trim().replace(/\s+/g, " ");
                 const entry = {
@@ -408,7 +415,15 @@ function PageIndexer({ Page, renderChild, onIndexed, }) {
                 setIsCollected(true); // Mark as collected
             });
         }
-    }, [isContentRendered, pageUrl, searchContextUpdater, onIndexed, isCollected, isProcessing, navLabel]); // Ensure all dependencies are listed
+    }, [
+        isContentRendered,
+        pageUrl,
+        searchContextUpdater,
+        onIndexed,
+        isCollected,
+        isProcessing,
+        navLabel,
+    ]); // Ensure all dependencies are listed
     // If this PageIndexer instance's work is done, or content not yet rendered, render nothing.
     // The parent (SearchIndexCollector) will unmount this and mount the next one.
     if (isCollected || !isContentRendered) {

package/dist/scripts/src/components/App/AppNative.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.App = App;
 exports.getAppLayoutOrientation = getAppLayoutOrientation;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -32,7 +33,14 @@ const Sheet_1 = require("../../components/App/Sheet");
 const AppHeaderNative_1 = require("../../components/AppHeader/AppHeaderNative");
 const AppLayoutContext_1 = require("./AppLayoutContext");
 const SearchContext_1 = require("./SearchContext");
-function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollbarGutters = false, onReady = lodash_es_1.noop, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, renderChild, name, }) {
+exports.defaultProps = {
+    scrollWholePage: true,
+    noScrollbarGutters: false,
+    defaultTone: "light",
+    defaultTheme: "xmlui",
+    onReady: lodash_es_1.noop,
+};
+function App({ children, style, layout, loggedInUser, scrollWholePage = exports.defaultProps.scrollWholePage, noScrollbarGutters = exports.defaultProps.noScrollbarGutters, onReady = exports.defaultProps.onReady, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, renderChild, name, }) {
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);

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

@@ -30,7 +30,7 @@ exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
         showLogo: {
             description: "Show the logo in the header",
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: AppHeaderNative_1.defaultProps.showLogo,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
@@ -46,7 +46,7 @@ exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
     // --- Convert the plain (text) logo template into component definition
     const logoTemplate = node.props.logoTemplate || ((_a = node.slots) === null || _a === void 0 ? void 0 : _a.logoSlot);
     const titleTemplate = node.props.titleTemplate || ((_b = node.slots) === null || _b === void 0 ? void 0 : _b.titleSlot);
-    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo, true), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
+    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
             type: "Stack",
             orientation: "horizontal",
         }), style: layoutCss, className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, renderChild: renderChild, children: renderChild(node.children, {

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppHeader = void 0;
+exports.AppHeader = exports.defaultProps = void 0;
 exports.useLogoUrl = useLogoUrl;
 exports.AppContextAwareAppHeader = AppContextAwareAppHeader;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -19,6 +19,9 @@ const AppLayoutContext_1 = require("../../components/App/AppLayoutContext");
 const ButtonNative_1 = require("../../components/Button/ButtonNative");
 const NavLinkNative_1 = require("../../components/NavLink/NavLinkNative");
 const hooks_1 = require("../../components-core/utils/hooks");
+exports.defaultProps = {
+    showLogo: true,
+};
 function tryLoadImage(url, onLoaded, onError) {
     const img = new Image();
     img.src = url;
@@ -40,7 +43,7 @@ function useLogoUrl() {
     const toneLogoUrl = (0, ThemeContext_1.useResourceUrl)(`resource:logo-${activeThemeTone}`) || logoUrlByTone[activeThemeTone];
     return toneLogoUrl || baseLogoUrl;
 }
-const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot, }) => {
+const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot, }) => {
     const { mediaSize } = (0, AppContext_1.useAppContext)();
     const logoUrl = useLogoUrl();
     const subNavPanelSlot = (0, react_1.useRef)(null);

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

@@ -15,14 +15,14 @@ exports.AppStateMd = (0, ComponentDefs_1.createMetadata)({
                 `Multiple \`${COMP}\` instances with the same bucket will share the same state object: any ` +
                 `of them updating the state will cause the other instances to view the new, updated state.`,
             valueType: "string",
-            defaultValue: "default",
+            defaultValue: AppStateNative_1.defaultProps.bucket,
         },
         initialValue: {
             description: `This property contains the initial state value. Though you can use multiple \`${COMP}\`` +
                 `component instances for the same bucket with their \`initialValue\` set, it may result ` +
                 `in faulty app logic. When xmlui instantiates an \`${COMP}\` with an explicit initial ` +
                 `value, that value is immediately set. Multiple initial values may result in ` +
-                `undesired initialization.`,
+                `undesired initialization. By default, the bucked's initial state is undefined.`,
         },
     },
     apis: {

package/dist/scripts/src/components/AppState/AppStateNative.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.AppState = AppState;
 const hooks_1 = require("../../components-core/utils/hooks");
 const AppStateContext_1 = require("../../components/App/AppStateContext");
-function AppState({ bucket = "default", updateState, initialValue, registerComponentApi, }) {
+exports.defaultProps = {
+    bucket: "default",
+};
+function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, }) {
     const registerAppState = (0, AppStateContext_1.useAppStateContextPart)((value) => value.registerAppState);
     const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {

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

@@ -21,18 +21,18 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         maxLength: (0, metadata_helpers_1.dMaxLength)(),
-        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        required: (0, metadata_helpers_1.dRequired)(),
-        readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        creatable: (0, ComponentDefs_1.d)(`This property allows the user to create new items that are not present in the list of options.`),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: AutoCompleteNative_1.defaultProps.autoFocus }),
+        required: Object.assign(Object.assign({}, (0, metadata_helpers_1.dRequired)()), { defaultValue: AutoCompleteNative_1.defaultProps.required }),
+        readOnly: Object.assign(Object.assign({}, (0, metadata_helpers_1.dReadonly)()), { defaultValue: AutoCompleteNative_1.defaultProps.readOnly }),
+        enabled: Object.assign(Object.assign({}, (0, metadata_helpers_1.dEnabled)()), { defaultValue: AutoCompleteNative_1.defaultProps.enabled }),
+        creatable: (0, ComponentDefs_1.d)(`This property allows the user to create new items that are not present in the list of options.`, null, "boolean", AutoCompleteNative_1.defaultProps.creatable),
+        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: AutoCompleteNative_1.defaultProps.validationStatus }),
         label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelPosition: Object.assign(Object.assign({}, (0, metadata_helpers_1.dLabelPosition)()), { defaultValue: AutoCompleteNative_1.defaultProps.labelPosition }),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         dropdownHeight: (0, ComponentDefs_1.d)("This property sets the height of the dropdown list."),
-        multi: (0, metadata_helpers_1.dMulti)(),
+        multi: Object.assign(Object.assign({}, (0, metadata_helpers_1.dMulti)()), { defaultValue: AutoCompleteNative_1.defaultProps.multi }),
         optionTemplate: (0, metadata_helpers_1.dComponent)(`This property enables the customization of list items. To access the attributes of ` +
             `a list item use the \`$item\` context variable.`),
         emptyListTemplate: (0, ComponentDefs_1.d)("This property defines the template to display when the list of options is empty."),

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoComplete = void 0;
+exports.AutoComplete = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
@@ -25,7 +25,21 @@ function defaultRenderer(item) {
 function isOptionsExist(options, newOptions) {
     return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
 }
-exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, optionRenderer = defaultRenderer, emptyListTemplate, style, children, readOnly = false, autoFocus = false, dropdownHeight, multi = false, label, labelPosition, labelWidth, labelBreak, required = false, creatable = false, }, forwardedRef) {
+exports.defaultProps = {
+    enabled: true,
+    readOnly: false,
+    autoFocus: false,
+    multi: false,
+    required: false,
+    validationStatus: "none",
+    creatable: false,
+    optionRenderer: defaultRenderer,
+    updateState: constants_1.noop,
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+};
+exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, optionRenderer = exports.defaultProps.optionRenderer, emptyListTemplate, style, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, }, forwardedRef) {
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const inputRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);

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

@@ -22,11 +22,13 @@ exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: AvatarNative_1.defaultProps.size,
         },
         name: {
-            description: `This property sets the name value the ${COMP} uses to display initials.`,
+            description: `This property sets the name value the ${COMP} uses to display initials. If neither ` +
+                "this property nor \`url\` is defined, an empty avatar is displayed.",
             valueType: "string",
         },
         url: {
-            description: `This property specifies the URL of the image to display in the ${COMP}.`,
+            description: `This property specifies the URL of the image to display in the ${COMP}. ` +
+                "If neither this property nor \`name\` is defined, an empty avatar is displayed.",
             valueType: "string",
         },
     },

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

@@ -27,8 +27,8 @@ exports.BackdropMd = (0, ComponentDefs_1.createMetadata)({
         },
         opacity: {
             description: "The opacity of the backdrop.",
-            valueType: "number",
-            defaultValue: 0.1,
+            valueType: "string",
+            defaultValue: BackdropNative_1.defaultProps.opacity,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Backdrop_module_scss_1.default.themeVars),

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

@@ -18,7 +18,9 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is a text label that accepts a color map to define its background color and, optionally, its label color.`,
     props: {
         value: {
-            description: "The text that the component displays",
+            description: "The text that the component displays. If this is not defined, the component renders " +
+                "its children as the content of the badge. If neither text nor any child is defined, " +
+                "the component renders a single frame for the badge with a non-breakable space.",
             type: "string",
             isRequired: true,
         },
@@ -27,11 +29,11 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
                 "with fully rounded corners.",
             type: "string",
             availableValues: BadgeNative_1.badgeVariantValues,
-            defaultValue: "badge",
+            defaultValue: BadgeNative_1.defaultProps.variant,
         },
         colorMap: {
             description: `The \`${COMP}\` component supports the mapping of a list of colors using the \`value\` prop as the ` +
-                `key. Provide the component with a list or key-value pairs in two ways:`,
+                `key. If this property is not set, no color mapping is used.`,
         },
         themeColor: (0, metadata_helpers_1.dInternal)(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
         indicatorText: (0, metadata_helpers_1.dInternal)(`(**NOT IMPLEMENTED YET**) This property defines the text to display in the indicator. If it is not ` +
@@ -50,7 +52,7 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-${COMP}`]: "4px",
         [`fontSize-${COMP}`]: "0.8em",
         [`fontSize-${COMP}-pill`]: "0.8em",
-        [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
+        [`backgroundColor-${COMP}`]: "rgb(from $color-secondary-500 r g b / 0.6)",
         [`textColor-${COMP}`]: "$const-color-surface-0",
     },
 });
@@ -71,7 +73,7 @@ exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
             };
         }
     }
-    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorValue, style: layoutCss, children: value || renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorValue, style: layoutCss, children: value || (node.children && renderChild(node.children)) || String.fromCharCode(0xa0) }));
 });
 function resolveColor(value) {
     return value.startsWith("$") ? (0, StyleParser_1.toCssVar)(value) : value;

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

@@ -12,15 +12,16 @@ exports.BookmarkMd = (0, ComponentDefs_1.createMetadata)({
     opaque: true,
     props: {
         uid: {
-            description: "The unique identifier of the bookmark. You can use this identifier in links to navigate " +
-                "to this component's location.",
+            description: "The unique identifier of the bookmark. You can use this identifier in links " +
+                "to navigate to this component's location. If this identifier is not set, you cannot " +
+                "programmatically visit this bookmark.",
             valueType: "string",
         },
         level: {
             description: "The level of the bookmark. The level is used to determine the bookmark's " +
                 "position in the table of contents.",
             valueType: "number",
-            defaultValue: 1,
+            defaultValue: BookmarkNative_1.defaultProps.level,
         },
         title: {
             description: "Defines the text to display the bookmark in the table of contents. If this property is " +
@@ -30,7 +31,7 @@ exports.BookmarkMd = (0, ComponentDefs_1.createMetadata)({
         omitFromToc: {
             description: "If true, this bookmark will be excluded from the table of contents.",
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: BookmarkNative_1.defaultProps.omitFromToc,
         },
     },
 });

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

@@ -32,15 +32,17 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "string",
         },
         title: {
-            description: `This prop sets the prestyled title.`,
+            description: "This prop sets the pre-styled title. If the property is not set, no title " +
+                "is displayed in the Card.",
             valueType: "string",
         },
         subtitle: {
-            description: `This prop sets the prestyled subtitle.`,
+            description: "This prop sets the pre-styled subtitle. If the property is not set, no subtitle " +
+                "is displayed in the Card.",
             valueType: "string",
         },
         linkTo: {
-            description: `This property wraps the title in a \`Link\` component that is clickable to navigate.`,
+            description: "This optional property wraps the title in a \`Link\` component that is clickable to navigate.",
             valueType: "string",
         },
         orientation: {
@@ -74,7 +76,7 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
         [`gap-avatar-${COMP}`]: "The gap between the avatar and the title panel",
         [`horizontalAlignment-title-${COMP}`]: "The horizontal alignment of panel with the title and subtitle",
         [`verticalAlignment-title-${COMP}`]: "The vertical alignment of the title and subtitle to the avatar",
-    }
+    },
 });
 exports.cardComponentRenderer = (0, renderers_1.createComponentRenderer)("Card", exports.CardMd, ({ node, extractValue, renderChild, layoutCss }) => {
     return ((0, jsx_runtime_1.jsx)(CardNative_1.Card, { style: layoutCss, title: extractValue.asOptionalString(node.props.title), linkTo: extractValue.asOptionalString(node.props.linkTo), subtitle: extractValue.asOptionalString(node.props.subtitle), avatarUrl: extractValue.asOptionalString(node.props.avatarUrl), showAvatar: extractValue.asOptionalBoolean(node.props.showAvatar), avatarSize: extractValue.asOptionalString(node.props.avatarSize), orientation: extractValue.asOptionalString(node.props.orientation), children: renderChild(node.children, {

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

@@ -12,7 +12,8 @@ exports.ChangeListenerMd = (0, ComponentDefs_1.createMetadata)({
         `particular value (component property, state, etc.) changes.`,
     props: {
         listenTo: {
-            description: `Value to the changes of which this component listens.`,
+            description: "Value to the changes of which this component listens. If this property is not set, " +
+                "the `ChangeListener` is inactive.",
             valueType: "any",
         },
         throttleWaitInMs: {