xmlui 0.9.66 → 0.9.69

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

@@ -12,6 +12,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const ImageNative_1 = require("./ImageNative");
 const COMP = "Image";
 exports.ImageMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Image` displays pictures from URLs or local sources with built-in responsive " +
         "sizing, aspect ratio control, and accessibility features. It handles different " +
         "image formats and provides options for lazy loading and click interactions.",

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

@@ -8,6 +8,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const ItemsNative_1 = require("./ItemsNative");
 const COMP = "Items";
 exports.ItemsMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Items` renders data arrays without built-in layout or styling, providing " +
         "a lightweight alternative to `List`. Unlike `List`, it provides no " +
         "virtualization, grouping, or visual formatting — just pure data iteration.",

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

@@ -13,6 +13,7 @@ const abstractions_1 = require("../abstractions");
 const LinkNative_1 = require("./LinkNative");
 const COMP = "Link";
 exports.LinkMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Link` creates clickable navigation elements for internal app routes or " +
         "external URLs. You can use the `label` and `icon` properties for simple text " +
         "links, or embed custom components like buttons, cards, or complex layouts " +
@@ -41,9 +42,9 @@ exports.LinkMd = (0, metadata_helpers_1.createMetadata)({
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $borderColor",
         [`textColor-${COMP}`]: "$color-primary-500",
-        [`textDecorationColor-${COMP}`]: "$color-primary-500",
+        [`textDecorationColor-${COMP}`]: `textDecorationColor-${COMP}`,
         [`textColor-${COMP}--hover`]: `$color-primary-400`,
-        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textDecorationColor-${COMP}--hover`]: `textColor-${COMP}--hover`,
         [`textColor-${COMP}--active`]: "$color-primary-400",
         [`textDecorationColor-${COMP}--active`]: "$color-primary-400",
         [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,

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

@@ -392,7 +392,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
                                 const row = rows === null || rows === void 0 ? void 0 : rows[rowIndex];
                                 const key = row === null || row === void 0 ? void 0 : row[idKey];
                                 if (!row) {
-                                    return (0, jsx_runtime_1.jsx)("div", {}, rowIndex);
+                                    return null;
                                 }
                                 // --- End change
                                 switch (row._row_type) {

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

@@ -15,6 +15,7 @@ const utils_1 = require("./utils");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Markdown";
 exports.MarkdownMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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).",

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

@@ -14,6 +14,7 @@ const ModalDialogNative_1 = require("./ModalDialogNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "ModalDialog";
 exports.ModalDialogMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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()` " +

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

@@ -14,6 +14,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NavGroupNative_1 = require("./NavGroupNative");
 const COMP = "NavGroup";
 exports.NavGroupMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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 " +

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

@@ -14,6 +14,7 @@ const NavLinkNative_1 = require("./NavLinkNative");
 const abstractions_1 = require("../abstractions");
 const COMP = "NavLink";
 exports.NavLinkMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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 " +

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

@@ -10,8 +10,10 @@ const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const NavPanelNative_1 = require("./NavPanelNative");
+const react_1 = require("react");
 const COMP = "NavPanel";
 exports.NavPanelMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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 " +
@@ -39,7 +41,12 @@ exports.NavPanelMd = (0, metadata_helpers_1.createMetadata)({
         [`boxShadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
     },
 });
-exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {
-    const navLinks = (0, NavPanelNative_1.buildNavHierarchy)(node.children, extractValue, undefined, []);
+function NavPanelWithBuiltNavHierarchy({ node, renderChild, layoutCss, layoutContext, extractValue, }) {
+    const navLinks = (0, react_1.useMemo)(() => {
+        return (0, NavPanelNative_1.buildNavHierarchy)(node.children, extractValue, undefined, []);
+    }, [extractValue, node.children]);
     return ((0, jsx_runtime_1.jsx)(NavPanelNative_1.NavPanel, { style: layoutCss, logoContent: renderChild(node.props.logoTemplate), className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, inDrawer: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.inDrawer, renderChild: renderChild, navLinks: navLinks, children: renderChild(node.children) }));
+}
+exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(NavPanelWithBuiltNavHierarchy, { node: node, renderChild: renderChild, layoutCss: layoutCss, layoutContext: layoutContext, extractValue: extractValue }));
 });

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

@@ -48,13 +48,16 @@ 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");
+const LinkInfoContext_1 = require("../App/LinkInfoContext");
 // Function to build navigation hierarchy from component children
 function buildNavHierarchy(children, extractValue, parent, pathSegments = []) {
     if (!children)
         return [];
     const hierarchy = [];
     // Skip non-object children
-    children.filter(child => child && typeof child === 'object').forEach((child) => {
+    children
+        .filter((child) => child && typeof child === "object")
+        .forEach((child) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (child.type === "NavLink") {
             const label = ((_a = extractValue.asOptionalString) === null || _a === void 0 ? void 0 : _a.call(extractValue, (_b = child.props) === null || _b === void 0 ? void 0 : _b.label)) || extractValue((_c = child.props) === null || _c === void 0 ? void 0 : _c.label);
@@ -177,7 +180,7 @@ exports.NavPanelContext = react_1.default.createContext(null);
 const contextValue = {
     inDrawer: true,
 };
-function DrawerNavPanel({ logoContent, children, className, style, navLinks, }) {
+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), style: style, 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 })] }) }) }));
 }
@@ -186,6 +189,7 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style,
     const scrollContainerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const linkInfoContext = (0, LinkInfoContext_1.useLinkInfoContext)();
     const horizontal = (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
     const showLogo = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky";
     const isCondensed = (_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _a === void 0 ? void 0 : _a.startsWith("condensed");
@@ -193,16 +197,13 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style,
     const safeLogoContent = logoContent || renderChild(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.logoContentDef);
     // Register the linkMap when navLinks change
     (0, react_1.useEffect)(() => {
-        if ((appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.registerLinkMap) && navLinks) {
+        if ((linkInfoContext === null || linkInfoContext === void 0 ? void 0 : linkInfoContext.registerLinkMap) && navLinks) {
             const linkMap = buildLinkMap(navLinks);
-            appLayoutContext.registerLinkMap(linkMap);
+            linkInfoContext.registerLinkMap(linkMap);
         }
-    }, [navLinks, appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.registerLinkMap]);
-    if (appLayoutContext && !(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.isNested)) {
-        //console.log(navLinks);
-    }
+    }, [navLinks, linkInfoContext === null || linkInfoContext === void 0 ? void 0 : linkInfoContext.registerLinkMap]);
     if (inDrawer) {
-        return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, { style: style, logoContent: safeLogoContent, className: className, navLinks: navLinks, children: children }));
+        return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, { style: style, logoContent: safeLogoContent, className: className, children: children }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
             [NavPanel_module_scss_1.default.horizontal]: horizontal,

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

@@ -13,7 +13,7 @@ const defaultProps_1 = require("./defaultProps");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "AppWithCodeView";
 exports.AppWithCodeViewMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
+    status: "stable",
     description: `The ${COMP} component displays a combination of markdown content and a nested xmlui app. 
 It supports both side-by-side and stacked layouts.`,
     props: {

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

@@ -62,11 +62,11 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
             : `https://docs.xmlui.com/playground#${appQueryString}`, "_blank");
     }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
     if (splitView) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), variant: showCode ? "solid" : "ghost", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
-                                        backgroundColor: !showCode ? "transparent" : "",
-                                    }, children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), variant: showCode ? "ghost" : "solid", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
-                                        backgroundColor: showCode ? "transparent" : "",
-                                    }, children: "UI" })] }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), variant: showCode ? "solid" : "ghost", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                        [NestedApp_module_scss_1.default.active]: showCode,
+                                    }), children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), variant: showCode ? "ghost" : "solid", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                        [NestedApp_module_scss_1.default.active]: !showCode,
+                                    }), children: "UI" })] }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [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: "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: () => {
                                             setShowCode(false);

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

@@ -13,6 +13,7 @@ const defaultProps_1 = require("./defaultProps");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "NestedApp";
 exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: `The ${COMP} component allows you to nest an entire xmlui app into another one.
 `,
     props: {
@@ -65,7 +66,7 @@ exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-frame-${COMP}`]: "$color-primary-50",
         [`gap-frame-${COMP}`]: "0",
         [`fontWeight-header-${COMP}`]: "$fontWeight-bold",
-        [`boxShadow-${COMP}`]: "$boxShadow-md",
+        [`boxShadow-${COMP}`]: "0px 0px 32px 0px rgba(0, 0, 0, 0.05)",
         [`backgroundColor-viewControls-${COMP}`]: "$color-primary-100",
         [`borderRadius-viewControls-${COMP}`]: "5px",
         [`padding-viewControls-${COMP}`]: "$space-0_5",
@@ -75,7 +76,7 @@ exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
         [`width-button-splitView-${COMP}`]: "60px",
         [`width-logo-splitView-${COMP}`]: "2rem",
         [`height-logo-splitView-${COMP}`]: "2rem",
-        [`width-controls-${COMP}`]: "76px",
+        [`width-controls-${COMP}`]: "80px",
     },
 });
 exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue, layoutCss }) => {

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

@@ -19,6 +19,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_1 = __importDefault(require("react-dom/client"));
 const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
 const AppRoot_1 = require("../../components-core/rendering/AppRoot");
 const lia_1 = require("react-icons/lia");
 const rx_1 = require("react-icons/rx");
@@ -63,11 +64,11 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
     const { appGlobals } = (0, AppContext_1.useAppContext)();
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const { interceptorWorker } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    const { interceptorWorker, initialized, forceInitialize } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
     (0, react_1.useEffect)(() => {
         setRefreshVersion(refVersion);
     }, [refVersion]);
-    //TODO illesg: we should come up with something to make sure that nestedApps doesn't overwrite each other's mocked api endpoints
+    //TODO illesg: we should come up with something to make sure that nestedApps don't overwrite each other's mocked api endpoints
     //   disabled for now, as it messes up the paths of not mocked APIs (e.g. resources/{staticJsonfiles})
     //const safeId = playgroundId || nestedAppId;
     //const apiUrl = api ? `/${safeId.replaceAll(":", "")}` : '';
@@ -115,7 +116,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         window.open(useHashBasedRouting
             ? `${popOutUrl !== null && popOutUrl !== void 0 ? popOutUrl : ""}/#/playground#${appQueryString}`
             : `${popOutUrl !== null && popOutUrl !== void 0 ? popOutUrl : ""}/playground#${appQueryString}`, "_blank");
-    }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
+    }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting, popOutUrl]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!shadowRef.current && rootRef.current) {
@@ -153,11 +154,17 @@ 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(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { isNested: true, 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 shouldForceInit = mock && initialized && !interceptorWorker;
+        if (shouldForceInit) {
+            // in this case we need to force initialize the interceptor worker
+            // to make sure that the mock is applied (this could be the case when the 'root' app is not using any mocks)
+            forceInitialize();
+        }
+        let nestedAppRoot = mock && !interceptorWorker ? null : ((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, { isNested: true, 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: [!noHeader && ((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: () => {
+        (_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: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(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: "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);
@@ -185,6 +192,9 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         withFrame,
         noHeader,
         apiUrl,
+        initialized,
+        style,
+        forceInitialize,
     ]);
     const mountedRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {

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

@@ -12,6 +12,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NoResultNative_1 = require("./NoResultNative");
 const COMP = "NoResult";
 exports.NoResultMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`NoResult` displays a visual indication that a query or search returned nothing.",
     props: {
         label: (0, metadata_helpers_1.dLabel)(),

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

@@ -8,6 +8,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const OptionNative_1 = require("./OptionNative");
 const COMP = "Option";
 exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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 " +
@@ -30,7 +31,12 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild, layoutContext }) => {
     const optionTemplate = node.props.optionTemplate;
+    const label = extractValue.asOptionalString(node.props.label) || extractValue(node.props.value);
+    const value = extractValue.asOptionalString(node.props.value) || extractValue(node.props.label);
+    if (label === undefined) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { optionRenderer: optionTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: optionTemplate, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext }))
-            : undefined, value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || extractValue(node.props.value), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
+            : undefined, label: label, value: value, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
 });

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

@@ -7,6 +7,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const PageMetaTilteNative_1 = require("./PageMetaTilteNative");
 const COMP = "PageMetaTitle";
 exports.PageMetaTitleMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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: {

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

@@ -26,6 +26,7 @@ exports.pageRenderer = (0, renderers_1.createComponentRenderer)(PAGE, exports.Pa
 });
 const COMP = "Pages";
 exports.PagesMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Pages` serves as the routing coordinator within an [App](/components/App), " +
         "managing which [Page](/components/Page)  displays based on the current URL.",
     props: {

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

@@ -23,17 +23,12 @@ const react_2 = require("@remix-run/react");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../components-core/constants");
 const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
-const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // Default props for Pages component
 exports.defaultProps = {
     fallbackPath: "/",
 };
 function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid, }) {
-    var _a;
     const params = (0, react_2.useParams)();
-    const location = (0, react_2.useLocation)();
-    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
-    const linkInfo = ((_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.linkMap) === null || _a === void 0 ? void 0 : _a.get(location.pathname)) || {};
     //we need to wrap the child route in a container to make sure the route params are available.
     // we do this wrapping by providing an empty object to vars.
     // this way it becomes an 'implicit' container (vars/state inside this container is propagated to the parent)

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

@@ -12,6 +12,7 @@ const ProgressBarNative_1 = require("./ProgressBarNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "ProgressBar";
 exports.ProgressBarMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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 " +

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

@@ -8,6 +8,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const QueueNative_1 = require("./QueueNative");
 const COMP = "Queue";
 exports.QueueMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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: {

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

@@ -13,6 +13,7 @@ const RadioGroupNative_1 = require("./RadioGroupNative");
 const COMP = "RadioGroup";
 const RGOption = `RadioGroupOption`;
 exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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 " +

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

@@ -11,6 +11,7 @@ exports.defaultProps = {
     to: "",
 };
 exports.RedirectMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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.",

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

@@ -11,7 +11,7 @@ function HiddenOption(option) {
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
         return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
-    }, [option, node]);
+    }, [option, node, label]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);
         return () => onOptionRemove(opt);

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

@@ -14,11 +14,11 @@ const SelectNative_1 = require("./SelectNative");
 const react_select_1 = require("@radix-ui/react-select");
 const COMP = "Select";
 exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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 }),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
@@ -36,7 +36,7 @@ exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
         valueTemplate: (0, metadata_helpers_1.dComponent)(`This property allows replacing the default template to display a selected value when ` +
             `multiple selections (\`multiSelect\` is \`true\`) are enabled.`),
         dropdownHeight: (0, metadata_helpers_1.d)("This property sets the height of the dropdown list. If not set, the height is determined automatically."),
-        emptyListTemplate: (0, metadata_helpers_1.d)(`This optional property provides the ability to customize what is displayed when the ` +
+        emptyListTemplate: (0, metadata_helpers_1.dComponent)(`This optional property provides the ability to customize what is displayed when the ` +
             `list of options is empty.`),
         multiSelect: Object.assign(Object.assign({}, (0, metadata_helpers_1.dMulti)()), { defaultValue: SelectNative_1.defaultProps.multiSelect }),
         searchable: {

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

@@ -83,7 +83,7 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
         }
         const match = Array.from(options).find((o) => `${o.value}` === val);
         onValueChange((_a = match === null || match === void 0 ? void 0 : match.value) !== null && _a !== void 0 ? _a : val);
-    }, [onValueChange, options]);
+    }, [onValueChange, options, readOnly]);
     return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
                     [Select_module_scss_1.default.error]: validationStatus === "error",
                     [Select_module_scss_1.default.warning]: validationStatus === "warning",
@@ -204,16 +204,16 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 }) }) })) : ((0, jsx_runtime_1.jsx)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
                                                         event.stopPropagation();
                                                         clearValue();
-                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
-                                                    const extendedValue = value + " " + keywords.join(" ");
-                                                    if (extendedValue.toLowerCase().includes(search.toLowerCase()))
-                                                        return 1;
+                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (_, search, keywords) => {
+                                                    const lowSearch = search.toLowerCase();
+                                                    for (const kw of keywords) {
+                                                        if (kw.toLowerCase().includes(lowSearch))
+                                                            return 1;
+                                                    }
                                                     return 0;
                                                 }, 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, idx) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, `${option.value}-${idx}`)))
-                                : emptyListNode })) }), children] }) }) }));
+                                                    (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: renderOptionsOrDefault(options, emptyListNode) })) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();
@@ -230,7 +230,7 @@ exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwa
                 return;
             }
             onChange(value);
-        }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
+        }, "data-state": selected ? "checked" : undefined, keywords: [...keywords, label], children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
 });
 const SelectOption = react_1.default.forwardRef((option, ref) => {
     const { value, label, enabled = true } = option;
@@ -242,3 +242,9 @@ const SelectOption = react_1.default.forwardRef((option, ref) => {
             }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), selectedValue === value && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) }))] })) }) }));
 });
 SelectOption.displayName = "SelectOption";
+function renderOptionsOrDefault(options, default_) {
+    if (options.size === 0) {
+        return default_;
+    }
+    return Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)));
+}

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

@@ -12,6 +12,7 @@ const SpaceFillerNative_1 = require("./SpaceFillerNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "SpaceFiller";
 exports.SpaceFillerMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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),

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

@@ -12,6 +12,7 @@ const SpinnerNative_1 = require("./SpinnerNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Spinner";
 exports.SpinnerMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Spinner` is an animated indicator that represents an action in progress " +
         "with no deterministic progress value.",
     props: {

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

@@ -14,6 +14,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const SplitterNative_1 = require("./SplitterNative");
 const COMP = "Splitter";
 const baseSplitterMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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.",

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

@@ -27,6 +27,7 @@ const VERTICAL_ALIGNMENT = {
     defaultValue: "start",
 };
 const stackMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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, " +

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

@@ -5,13 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.switchComponentRenderer = exports.SwitchMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Toggle_module_scss_1 = __importDefault(require("../Toggle/Toggle.module.scss"));
+const Switch_module_scss_1 = __importDefault(require("./Switch.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const Toggle_1 = require("../Toggle/Toggle");
 const COMP = "Switch";
 exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     description: "`Switch` enables users to toggle between two states: on and off.",
     props: {
         indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
@@ -37,7 +38,7 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
         value: (0, metadata_helpers_1.dValueApi)(),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
-    themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    themeVars: (0, themeVars_1.parseScssVar)(Switch_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,

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

@@ -18,6 +18,7 @@ const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative")
 const TableNative_1 = require("./TableNative");
 const COMP = "Table";
 exports.TableMd = (0, metadata_helpers_1.createMetadata)({
+    status: "stable",
     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. ` +

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

@@ -142,8 +142,8 @@ const TableEditor = (0, react_1.forwardRef)(function TableEditor({ registerCompo
 exports.default = TableEditor;
 // Create metadata for TableEditor that defines allowed props
 exports.TableEditorMd = (0, metadata_helpers_1.createMetadata)({
-    description: "`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
     status: "stable",
+    description: "`TableEditor` provides an interactive table editing interface with controls for adding and deleting rows and columns. It supports theme customization and exports table data in HTML and Markdown formats.",
     props: {
         themeColor: {
             description: "Sets the color scheme for all editor buttons.",

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

@@ -14,7 +14,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "TableOfContents";
 const COMP_CHILD = "TableOfContentsItem";
 exports.TableOfContentsMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
+    status: "stable",
     description: "`TableOfContents` component collects [Heading](/components/Heading) and " +
         "[Bookmark](/components/Bookmark) within the current page and displays them in a navigable tree.",
     props: {