xmlui 0.9.57 → 0.9.58

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

@@ -33,7 +33,52 @@ exports.LinkNative = (0, react_1.forwardRef)(function LinkNative(props, forwarde
         return (0, component_utils_1.createUrlWithQueryParams)(to);
     }, [to]);
     const Node = !to ? "div" : react_2.Link;
-    return ((0, jsx_runtime_1.jsxs)(Node, Object.assign({ ref: forwardedRef, to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
+    // For hash links, we'll use a regular anchor tag to avoid React Router interference
+    const isHashLink = typeof to === 'string' && to.startsWith('#');
+    const FinalNode = isHashLink ? "a" : Node;
+    // Handle hash navigation for same-page scrolling
+    const handleClick = (0, react_1.useCallback)((event) => {
+        const toUrl = typeof to === 'string' ? to : to === null || to === void 0 ? void 0 : to.pathname;
+        // Check if this is a hash link (starts with #)
+        if (toUrl && toUrl.startsWith('#')) {
+            const targetId = toUrl.substring(1);
+            const currentHash = window.location.hash;
+            // Always prevent default for hash links and handle manually
+            event.preventDefault();
+            const targetElement = document.getElementById(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView();
+                // Build the new URL with existing hash route + fragment
+                const currentUrl = window.location.href;
+                const baseUrl = currentUrl.split('#')[0]; // Get everything before the first #
+                const existingHash = window.location.hash; // Current hash (e.g., #/about)
+                let newUrl;
+                if (existingHash && existingHash !== toUrl) {
+                    // If there's an existing hash route, append the fragment to it
+                    if (existingHash.includes('/#')) {
+                        // Remove any existing fragment and add the new one
+                        const hashRoute = existingHash.split('/#')[0];
+                        newUrl = `${baseUrl}${hashRoute}/${toUrl}`;
+                    }
+                    else {
+                        // Just append the fragment to the existing hash
+                        newUrl = `${baseUrl}${existingHash}/${toUrl}`;
+                    }
+                }
+                else {
+                    // No existing hash or same fragment, just use the fragment
+                    newUrl = `${baseUrl}${toUrl}`;
+                }
+                window.history.pushState(null, '', newUrl);
+            }
+            // Call the original onClick if provided
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            return;
+        }
+        // For all other cases, call the original onClick
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [to, onClick]);
+    return ((0, jsx_runtime_1.jsxs)(FinalNode, Object.assign({ ref: forwardedRef, to: isHashLink ? undefined : smartTo, href: isHashLink ? to : undefined, style: style, target: target, onClick: handleClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
             [Link_module_scss_1.default.iconLink]: iconLink,
             [Link_module_scss_1.default.active]: active,
             [Link_module_scss_1.default.disabled]: disabled,

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

@@ -16,9 +16,10 @@ const ListNative_1 = require("./ListNative");
 const COMP = "List";
 exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    description: `The \`${COMP}\` component is a robust layout container that renders associated data items ` +
-        `as a list of components. \`${COMP}\` is virtualized; it renders only items that are visible ` +
-        `in the viewport.`,
+    description: "`List` is a high-performance, virtualized container for rendering large " +
+        "datasets with built-in grouping, sorting, and visual formatting. It only " +
+        "renders visible items in the viewport, making it ideal for displaying " +
+        "thousands of records while maintaining smooth scrolling performance.",
     props: {
         data: (0, ComponentDefs_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
             `that the \`List\` can display.`),
@@ -80,10 +81,11 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
         scrollToId: (0, ComponentDefs_1.d)("This method scrolls the list to a specific item. The method accepts an item ID as a parameter."),
     },
     contextVars: {
-        $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the data list.`),
-        $itemIndex: (0, metadata_helpers_1.dComponent)("This integer value represents the current row index (zero-based) while rendering children."),
-        $isFirst: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its first item."),
-        $isLast: (0, metadata_helpers_1.dComponent)("This boolean value indicates if the component renders its last item."),
+        $item: (0, ComponentDefs_1.d)("Current data item being rendered"),
+        $itemIndex: (0, metadata_helpers_1.dComponent)("Zero-based index of current item"),
+        $isFirst: (0, metadata_helpers_1.dComponent)("Boolean indicating if this is the first item"),
+        $isLast: (0, metadata_helpers_1.dComponent)("Boolean indicating if this is the last item"),
+        $group: (0, metadata_helpers_1.dComponent)("Group information when using `groupBy` (available in group templates)"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
 });

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

@@ -8,15 +8,17 @@ const LogoNative_1 = require("./LogoNative");
 const COMP = "Logo";
 exports.LogoMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    description: `The \`${COMP}\` component represents a logo or a brand symbol. Usually, you use ` +
-        `this component in the [\`AppHeader\`](./AppHeader.mdx#logotemplate).`,
+    description: "`Logo` displays your application's brand symbol by automatically loading logo " +
+        "images defined in the app manifest. While logos are typically configured " +
+        "using App-level properties (`logo`, `logo-dark`), this component provides " +
+        "direct control when you need custom logo placement or templating.",
     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/Markdown/Markdown.js

@@ -15,7 +15,9 @@ const parse_binding_expr_1 = require("./parse-binding-expr");
 const utils_1 = require("./utils");
 const COMP = "Markdown";
 exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` displays plain text styled using markdown syntax.`,
+    description: "`Markdown` renders formatted text using markdown syntax. Use " +
+        "[Text](/working-with-text) for simple, styled text content, and `Markdown` " +
+        "when you need [rich formatting](/working-with-markdown).",
     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. Alternatively, you can nest " +
@@ -48,7 +50,7 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         "backgroundColor-Admonition-danger": "$color-danger-100",
         "borderColor-Admonition-danger": "$color-danger-300",
         "borderRadius-Admonition": "$space-2",
-        "iconSize-Admonition": "$space-5",
+        "size-icon-Admonition": "$space-5",
         "paddingLeft-Admonition": "$space-2",
         "paddingRight-Admonition": "$space-6",
         "paddingTop-Admonition": "$space-3",
@@ -62,8 +64,8 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         "paddingTop-Blockquote": "$space-3",
         "paddingBottom-Blockquote": "$space-2_5",
         "backgroundColor-Blockquote": "$color-surface-100",
-        "accentWidth-Blockquote": "3px",
-        "accentColor-Blockquote": "$color-surface-500",
+        "width-accent-Blockquote": "3px",
+        "color-accent-Blockquote": "$color-surface-500",
         "marginTop-HtmlLi": "$space-2_5",
         "marginBottom-HtmlLi": "$space-2_5",
         "marginTop-Image-markdown": "$space-4",

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

@@ -14,8 +14,10 @@ const container_helpers_1 = require("../container-helpers");
 const ModalDialogNative_1 = require("./ModalDialogNative");
 const COMP = "ModalDialog";
 exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component defines a modal dialog UI element that can be displayed over ` +
-        `the existing UI - triggered by some action.`,
+    description: "`ModalDialog` creates overlay dialogs that appear on top of the main interface, " +
+        "ideal for forms, confirmations, detailed views, or any content that requires " +
+        "focused user attention. Dialogs are programmatically opened using the `open()` " +
+        "method and can receive parameters for dynamic content.",
     props: {
         fullScreen: {
             description: `Toggles whether the dialog encompasses the whole UI (\`true\`) or not and has a minimum ` +
@@ -44,11 +46,8 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             "with the \`$paramq` and \`$params\` context values."),
     },
     contextVars: {
-        $param: (0, ComponentDefs_1.d)("This value represents the first parameters passed to the \`open()\` method to " +
-            "display the modal dialog."),
-        $params: (0, ComponentDefs_1.d)("This value represents the array of parameters passed to the \`open()\` method. " +
-            "You can use \`$params[0]\` to access the first and \`$params[1]\` to access the " +
-            "second (and so on) parameters. \`$param\` is the same as \`$params[0]\`."),
+        $param: (0, ComponentDefs_1.d)("First parameter passed to the `open()` method"),
+        $params: (0, ComponentDefs_1.d)("Array of all parameters passed to `open()` method (access with `$params[0]`, `$params[1]`, etc.)"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
     defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`textColor-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0" }),

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

@@ -15,8 +15,10 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NavGroupNative_1 = require("./NavGroupNative");
 const COMP = "NavGroup";
 exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component is a container for grouping related navigation targets ` +
-        `(\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
+    description: "`NavGroup` creates collapsible containers for organizing related navigation " +
+        "items into hierarchical menu structures. It groups `NavLink` components and " +
+        "other `NavGroup` components, providing expandable submenus with customizable " +
+        "icons and states.",
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
         initiallyExpanded: (0, ComponentDefs_1.d)("This property defines whether the group is initially expanded or collapsed. If not " +

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

@@ -15,8 +15,10 @@ const NavLinkNative_1 = require("./NavLinkNative");
 const abstractions_1 = require("../abstractions");
 const COMP = "NavLink";
 exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component defines a navigation target (app navigation menu item) within ` +
-        `the app; it is associated with a particular in-app navigation target (or an external link).`,
+    description: "`NavLink` creates interactive navigation items that connect users to different " +
+        "destinations within an app or external URLs. It automatically indicates active " +
+        "states, supports custom icons and labels, and can execute custom actions instead " +
+        "of navigation when needed.",
     props: {
         to: (0, ComponentDefs_1.d)(`This property defines the URL of the link.`),
         enabled: (0, metadata_helpers_1.dEnabled)(),

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

@@ -13,7 +13,10 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NavPanelNative_1 = require("./NavPanelNative");
 const COMP = "NavPanel";
 exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` is a placeholder within \`App\` to define the app's navigation (menu) structure.`,
+    description: "`NavPanel` defines the navigation structure within an App, serving as a container " +
+        "for NavLink and NavGroup components that create your application's primary " +
+        "navigation menu. Its appearance and behavior automatically adapt based on the " +
+        "App's layout configuration.",
     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.`),
@@ -29,7 +32,7 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
         [`horizontalAlignment-logo-${COMP}`]: "center",
         [`backgroundColor-${COMP}`]: "$backgroundColor",
         [`backgroundColor-${COMP}-horizontal`]: "$backgroundColor-AppHeader",
-        [`border-${COMP}`]: '0px solid $borderColor',
+        [`border-${COMP}`]: "0px solid $borderColor",
         [`paddingHorizontal-${COMP}`]: "0",
         [`paddingVertical-logo-${COMP}`]: "$space-4",
         [`paddingHorizontal-logo-${COMP}`]: "$space-4",

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

@@ -68,7 +68,7 @@ exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
         [`boxShadow-${COMP}`]: "$boxShadow-md",
     },
 });
-exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue }) => {
+exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue, layoutCss }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.withFrame) }));
+    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, style: layoutCss, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.withFrame) }));
 });

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

@@ -53,7 +53,7 @@ function IndexAwareNestedApp(props) {
     }
     return (0, jsx_runtime_1.jsx)(LazyNestedApp, Object.assign({}, props));
 }
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, style }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
@@ -85,7 +85,6 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         }
         return Object.assign(Object.assign({}, apiObject), { type: "in-memory" });
     }, [api]);
-    //console.log("mock", mock);
     const useHashBasedRouting = (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) || true;
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         const data = {
@@ -149,13 +148,13 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
+        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
                         compoundComponents,
                         themes: config === null || config === void 0 ? void 0 : config.themes,
                     }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }) }));
         (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                         openPlayground();
-                                    }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                    }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                         setRefreshVersion(refreshVersion + 1);
                                     }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), nestedAppRoot] })) : (nestedAppRoot) }));
     }, [

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

@@ -13,8 +13,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NoResultNative_1 = require("./NoResultNative");
 const COMP = "NoResult";
 exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` is a component that displays a visual indication that some data query (search) ` +
-        `resulted in no (zero) items.`,
+    description: "`NoResult` displays a visual indication that a query or search returned nothing.",
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
         icon: {

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

@@ -14,8 +14,10 @@ const NumberBoxNative_1 = require("./NumberBoxNative");
 const COMP = "NumberBox";
 exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    description: `A \`${COMP}\` component allows users to input numeric values: either integer or floating ` +
-        `point numbers. It also accepts empty values, where the stored value will be of type \`null\`.`,
+    description: "`NumberBox` provides a specialized input field for numeric values with built-in " +
+        "validation, spinner buttons, and flexible formatting options. It supports both " +
+        "integer and floating-point numbers, handles empty states as null values, and " +
+        "integrates seamlessly with form validation.",
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),

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

@@ -8,9 +8,11 @@ const container_helpers_1 = require("../container-helpers");
 const OptionNative_1 = require("./OptionNative");
 const COMP = "Option";
 exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` is a non-visual component describing a selection option. Other components ` +
-        `(such as \`Select\`, \`AutoComplete\`, and others) may use nested \`Option\` instances ` +
-        `from which the user can select.`,
+    description: "`Option` defines selectable items for choice-based components, providing both " +
+        "the underlying value and display text for selection interfaces. It serves as " +
+        "a non-visual data structure that describes individual choices within " +
+        "[Select](/components/Select), [AutoComplete](/components/AutoComplete), " +
+        "and other selection components.",
     props: {
         label: (0, ComponentDefs_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +
             `\`Option\` will use the \`value\` as the label.`),

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

@@ -7,8 +7,8 @@ const renderers_1 = require("../../components-core/renderers");
 const PageMetaTilteNative_1 = require("./PageMetaTilteNative");
 const COMP = "PageMetaTitle";
 exports.PageMetaTitleMd = (0, ComponentDefs_1.createMetadata)({
-    description: `A PageMetaTitle component allows setting up (or changing) the app title to display with the ` +
-        `current browser tab.`,
+    description: "`PageMetaTitle` dynamically sets or updates the browser tab title, enabling " +
+        "pages and components to override the default application name with context-specific titles.",
     props: {
         value: {
             description: `This property sets the page's title to display in the browser tab.`,

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

@@ -10,9 +10,11 @@ const PagesNative_1 = require("./PagesNative");
 const PAGE = "Page";
 exports.PageMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    docFolder: PAGE,
-    description: `The \`${PAGE}\` component defines what content is displayed when the user navigates ` +
-        `to a particular URL that is associated with the page.`,
+    docFolder: "Pages",
+    description: "`Page` defines route endpoints within an application, mapping specific URL " +
+        "patterns to content that displays when users navigate to those routes. Each " +
+        "Page represents a distinct view or screen in your single-page application's " +
+        "routing system.",
     props: {
         //TODO illesg rename to path
         url: (0, ComponentDefs_1.d)(`The URL of the route associated with the content. If not set, the page is not available.`),
@@ -25,8 +27,8 @@ exports.pageRenderer = (0, renderers_1.createComponentRenderer)(PAGE, exports.Pa
 });
 const COMP = "Pages";
 exports.PagesMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component is used as a container for [\`Page\`](/components/Page) components ` +
-        `within an [\`App\`](/components/App).`,
+    description: "`Pages` serves as the routing coordinator within an [App](/components/App), " +
+        "managing which [Page](/components/Page)  displays based on the current URL.",
     props: {
         defaultRoute: {
             description: `The default route when displaying the app`,

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

@@ -12,7 +12,10 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const ProgressBarNative_1 = require("./ProgressBarNative");
 const COMP = "ProgressBar";
 exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
-    description: `A \`${COMP}\` component visually represents the progress of a task or process.`,
+    description: "`ProgressBar` provides a visual indicator showing the completion percentage " +
+        "of tasks, processes, or any measurable progress. It displays as a horizontal " +
+        "bar that fills from left to right based on the provided value between 0 " +
+        "(empty) and 1 (complete).",
     props: {
         value: {
             description: `This property defines the progress value with a number between 0 and 1.`,

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

@@ -8,8 +8,8 @@ const container_helpers_1 = require("../container-helpers");
 const QueueNative_1 = require("./QueueNative");
 const COMP = "Queue";
 exports.QueueMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`Queue\` component provides an API to enqueue elements and defines events to process ` +
-        `queued elements in a FIFO order.`,
+    description: "`Queue` manages sequential processing of items in FIFO (first-in, first-out) " +
+        "order. It is a non-visual component but provides UI progress reporting and result display.",
     props: {
         progressFeedback: (0, ComponentDefs_1.d)("This property defines the component template of the UI that displays " +
             "progress information whenever, the queue's \`progressReport\` function " +

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

@@ -14,9 +14,10 @@ const RadioGroupNative_1 = require("./RadioGroupNative");
 const COMP = "RadioGroup";
 const RGOption = `RadioGroupOption`;
 exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` input component is a group of radio buttons ` +
-        `([\`RadioGroupOption\`](./RadioGroupOption.mdx) components) that allow users to select ` +
-        `only one option from the group at a time.`,
+    description: "`RadioGroup` creates a mutually exclusive selection interface where users can " +
+        "choose only one option from a group of radio buttons. It manages the selection " +
+        "state and ensures that selecting one option automatically deselects all others in " +
+        "the group.",
     props: {
         initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: RadioGroupNative_1.defaultProps.initialValue }),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),

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

@@ -8,7 +8,7 @@ const RealTimeAdapterNative_1 = require("./RealTimeAdapterNative");
 const COMP = "RealTimeAdapter";
 exports.RealTimeAdapterMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
-    description: `\`${COMP}\` is a non-visual component that listens to real-time events through long-polling.`,
+    description: "`RealTimeAdapter` is a non-visual component that listens to real-time events.",
     props: {
         url: {
             description: `This property specifies the URL to use for long-polling.`,

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

@@ -11,9 +11,9 @@ exports.defaultProps = {
     to: "",
 };
 exports.RedirectMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` is a component that immediately redirects the browser to the URL in its ` +
-        `\`to\` property when it gets visible (its \`when\` property gets \`true\`). The ` +
-        `redirection works only within the app.`,
+    description: "`Redirect` immediately redirects the browser to the URL in its `to` property when " +
+        "it gets visible (its `when` property gets `true`). It works only within " +
+        "[App](/components/App), not externally.",
     props: {
         to: {
             description: `This property defines the URL to which this component is about to redirect requests.`,

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

@@ -15,7 +15,10 @@ const SelectNative_1 = require("./SelectNative");
 const react_select_1 = require("@radix-ui/react-select");
 const COMP = "Select";
 exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
-    description: "Provides a dropdown with a list of options to choose from.",
+    description: "`Select` provides a dropdown interface for choosing from a list of options, " +
+        "supporting both single and multiple selection modes. It offers extensive " +
+        "customization capabilities including search functionality, custom templates, " +
+        "and comprehensive form integration.",
     status: "stable",
     props: {
         placeholder: Object.assign(Object.assign({}, (0, metadata_helpers_1.dPlaceholder)()), { defaultValue: SelectNative_1.defaultProps.placeholder }),
@@ -62,8 +65,8 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         reset: (0, ComponentDefs_1.d)(`This method resets the component to its initial value, or clears the selection if no initial value was provided.`),
     },
     contextVars: {
-        $item: (0, ComponentDefs_1.d)(`This property represents the value of an item in the dropdown list.`),
-        $itemContext: (0, ComponentDefs_1.d)(`This property provides a \`removeItem\` method to delete the particular value from the selection.`),
+        $item: (0, ComponentDefs_1.d)("Represents the current option's data (label and value properties)"),
+        $itemContext: (0, ComponentDefs_1.d)("Provides utility methods like `removeItem()` for multi-select scenarios"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Select_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/Select/SelectNative.js

@@ -212,7 +212,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
                                                     (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: options.size > 0
-                                ? Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)))
+                                ? Array.from(options).map((option, idx) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, `${option.value}-${idx}`)))
                                 : emptyListNode })) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {

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

@@ -14,8 +14,10 @@ const SliderNative_1 = require("./SliderNative");
 const COMP = "Slider";
 exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    description: `The \`${COMP}\` component allows you to select a numeric value ` +
-        `between a range specified by minimum and maximum values.`,
+    description: "`Slider` provides an interactive control for selecting numeric values within " +
+        "a defined range, supporting both single value selection and range selection with " +
+        "multiple thumbs. It offers precise control through customizable steps and visual " +
+        "feedback with formatted value display.",
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
         label: (0, metadata_helpers_1.dLabel)(),

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

@@ -12,8 +12,8 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const SpaceFillerNative_1 = require("./SpaceFillerNative");
 const COMP = "SpaceFiller";
 exports.SpaceFillerMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` is a component that works well in layout containers to fill the ` +
-        `remaining (unused) space. Its behavior depends on the layout container in which it is used.`,
+    description: "`SpaceFiller` works well in layout containers to fill remaining (unused) " +
+        "space. Its behavior depends on the layout container in which it is used.",
     themeVars: (0, themeVars_1.parseScssVar)(SpaceFiller_module_scss_1.default.themeVars),
 });
 exports.spaceFillerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SpaceFillerMd, () => ((0, jsx_runtime_1.jsx)(SpaceFillerNative_1.SpaceFiller, {})));

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

@@ -12,8 +12,8 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const SpinnerNative_1 = require("./SpinnerNative");
 const COMP = "Spinner";
 exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component is an animated indicator that represents a particular action ` +
-        `in progress without a deterministic progress value.`,
+    description: "`Spinner` is an animated indicator that represents an action in progress " +
+        "with no deterministic progress value.",
     props: {
         delay: {
             description: `The delay in milliseconds before the spinner is displayed.`,

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

@@ -15,8 +15,9 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const SplitterNative_1 = require("./SplitterNative");
 const COMP = "Splitter";
 const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component divides a container (such as a window, panel, pane, etc.) ` +
-        `into two resizable sections.`,
+    description: "`Splitter` component divides a container into two resizable sections. These " +
+        "are are identified by their names: primary and secondary. They have a " +
+        "draggable bar between them.",
     props: {
         swapped: {
             description: `This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +

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

@@ -28,7 +28,10 @@ const VERTICAL_ALIGNMENT = {
     defaultValue: "start",
 };
 const stackMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`Stack\` is a layout container displaying children in a horizontal or vertical stack.`,
+    description: "`Stack` is the fundamental layout container that organizes child elements in " +
+        "configurable horizontal or vertical arrangements. As the most versatile building " +
+        "block in XMLUI's layout system, it provides comprehensive alignment, spacing, " +
+        "and flow control options that serve as the foundation for all specialized stack variants.",
     props: {
         gap: {
             description: "Optional size value indicating the gap between child elements.",

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

@@ -13,8 +13,7 @@ const StickyBoxNative_1 = require("./StickyBoxNative");
 const COMP = "StickyBox";
 exports.StickyBoxMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    description: `The \`${COMP}\` is a component that "sticks" or remains fixed at the top or bottom ` +
-        `position on the screen as the user scrolls.`,
+    description: "`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.",
     props: {
         to: {
             description: "This property determines whether the StickyBox should be anchored to " +

package/dist/scripts/src/components/StickyBox/StickyBoxNative.js

@@ -11,6 +11,8 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_sticky_el_1 = require("react-sticky-el");
 const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
 const hooks_1 = require("../../components-core/utils/hooks");
+// --- NOTE: React.StrictMode produces error logs using this component. Deployed apps are okay.
+// See here: https://github.com/gm0t/react-sticky-el/issues/82 
 // =====================================================================================================================
 // React StickyBox component implementation
 exports.defaultProps = {

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

@@ -13,9 +13,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const Toggle_1 = require("../Toggle/Toggle");
 const COMP = "Switch";
 exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component is a user interface element that allows users to toggle between two states: ` +
-        `on and off. It consists of a small rectangular or circular button that can be moved left or right to ` +
-        `change its state.`,
+    description: "`Switch` enables users to toggle between two states: on and off.",
     props: {
         indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
         label: (0, metadata_helpers_1.dLabel)(),

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

@@ -19,8 +19,7 @@ const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative")
 const TableNative_1 = require("./TableNative");
 const COMP = "Table";
 exports.TableMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` is a component that displays cells organized into rows and columns. The \`${COMP}\` ` +
-        `component is virtualized so it only renders visible cells.`,
+    description: "`Table` presents structured data for viewing, sorting, selection, and interaction.",
     props: {
         items: (0, metadata_helpers_1.dInternal)(`You can use \`items\` as an alias for the \`data\` property. ` +
             `When you bind the table to a data source (e.g. an API endpoint), ` +

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

@@ -15,9 +15,8 @@ const COMP = "TableOfContents";
 const COMP_CHILD = "TableOfContentsItem";
 exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
-    description: `The \`${COMP}\` component collects headings and bookmarks within the current page ` +
-        `and displays them in a tree representing their hierarchy. When you select an item ` +
-        `in this tree, the component navigates the page to the selected position.`,
+    description: "`TableOfContents` component collects [Heading](/components/Heading) and " +
+        "[Bookmark](/components/Bookmark) within the current page and displays them in a navigable tree.",
     props: {
         smoothScrolling: {
             description: `This property indicates that smooth scrolling is used while scrolling the selected table ` +