xmlui 0.10.21 → 0.10.23

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.21",
+    "version": "0.10.23",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

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

@@ -34,6 +34,11 @@ exports.AppHeaderMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "boolean",
             defaultValue: AppHeaderNative_1.defaultProps.showLogo,
         },
+        showNavPanelIf: {
+            description: "Determines if the navigation panel should be displayed",
+            valueType: "boolean",
+            defaultValue: AppHeaderNative_1.defaultProps.showNavPanelIf,
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
     themeVarDescriptions: {
@@ -48,7 +53,7 @@ exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
     // --- Convert the plain (text) logo template into component definition
     const logoTemplate = node.props.logoTemplate || ((_a = node.slots) === null || _a === void 0 ? void 0 : _a.logoSlot);
     const titleTemplate = node.props.titleTemplate || ((_b = node.slots) === null || _b === void 0 ? void 0 : _b.titleSlot);
-    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
+    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo), showNavPanelIf: extractValue.asOptionalBoolean(node.props.showNavPanelIf, AppHeaderNative_1.defaultProps.showNavPanelIf), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
             type: "Stack",
             orientation: "horizontal",
         }), className: (0, classnames_1.default)(layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, className), renderChild: renderChild, children: renderChild(node.children, {

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

@@ -32,6 +32,7 @@ const NavLinkNative_1 = require("../../components/NavLink/NavLinkNative");
 const hooks_1 = require("../../components-core/utils/hooks");
 exports.defaultProps = {
     showLogo: true,
+    showNavPanelIf: true,
 };
 function useLogoUrl() {
     const { logo, logoLight, logoDark } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
@@ -45,25 +46,27 @@ function useLogoUrl() {
     return toneLogoUrl || baseLogoUrl;
 }
 const AppHeader = (_a) => {
-    var { children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot } = _a, rest = __rest(_a, ["children", "profileMenu", "style", "logoContent", "className", "canRestrictContentWidth", "navPanelVisible", "toggleDrawer", "showLogo", "hasRegisteredNavPanel", "title", "titleContent", "registerSubNavPanelSlot"]);
+    var { children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, showNavPanelIf = exports.defaultProps.showNavPanelIf, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot } = _a, rest = __rest(_a, ["children", "profileMenu", "style", "logoContent", "className", "canRestrictContentWidth", "navPanelVisible", "toggleDrawer", "showLogo", "showNavPanelIf", "hasRegisteredNavPanel", "title", "titleContent", "registerSubNavPanelSlot"]);
     const { mediaSize } = (0, AppContext_1.useAppContext)();
     const logoUrl = useLogoUrl();
     const subNavPanelSlot = (0, react_1.useRef)(null);
+    const effectiveNavPanelVisible = navPanelVisible && showNavPanelIf;
     const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, role: "banner", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
                 [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
-            }), children: [hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
+            }), children: [hasRegisteredNavPanel && showNavPanelIf && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !effectiveNavPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, className: AppHeader_module_scss_1.default.logoLink, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) })));
 };
 exports.AppHeader = AppHeader;
-function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, renderChild, }) {
+function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, showNavPanelIf = exports.defaultProps.showNavPanelIf, renderChild, }) {
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, registerSubNavPanelSlot, } = appLayoutContext || {};
     // console.log("APP LAYOUT CONTEXT", appLayoutContext);
     const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
     const canRestrictContentWidth = layout !== "vertical-full-header";
-    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
+    const effectiveNavPanelVisible = navPanelVisible && showNavPanelIf;
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: effectiveNavPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, showNavPanelIf: showNavPanelIf, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && effectiveNavPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
 }

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

@@ -99,11 +99,18 @@ exports.ButtonMd = (0, metadata_helpers_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Button_module_scss_1.default.themeVars),
     defaultThemeVars: {
+        // --- Default styles for supporting "variant" behavior
+        [`padding-${COMP}`]: "$space-2 $space-4",
+        [`gap-${COMP}`]: "$space-2",
+        [`borderColor-${COMP}`]: "transparent",
+        [`backgroundColor-${COMP}`]: "transparent",
+        [`transition-${COMP}`]: "color 0.2s, background 0.2s",
         [`width-${COMP}`]: "fit-content",
         [`height-${COMP}`]: "fit-content",
         [`borderRadius-${COMP}`]: "$borderRadius",
         [`fontSize-${COMP}`]: "$fontSize-sm",
         [`fontWeight-${COMP}`]: "$fontWeight-medium",
+        [`fontStyle-${COMP}`]: "$fontStyle-normal",
         [`backgroundColor-${COMP}-primary`]: "$color-primary-500",
         [`backgroundColor-${COMP}-attention`]: "$backgroundColor-attention",
         [`borderColor-${COMP}-attention`]: "$color-attention",

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

@@ -74,6 +74,7 @@ const FileDownloadAction_1 = require("../components-core/action/FileDownloadActi
 const FileUploadAction_1 = require("../components-core/action/FileUploadAction");
 const NavigateAction_1 = require("../components-core/action/NavigateAction");
 const TimedAction_1 = require("../components-core/action/TimedAction");
+const CoreBehaviors_1 = require("../components-core/behaviors/CoreBehaviors");
 const ApiLoader_1 = require("../components-core/loader/ApiLoader");
 const ExternalDataLoader_1 = require("../components-core/loader/ExternalDataLoader");
 const MockLoaderRenderer_1 = require("../components-core/loader/MockLoaderRenderer");
@@ -149,7 +150,7 @@ class ComponentRegistry {
      * about component registrations
      */
     constructor(contributes = {}, extensionManager) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.extensionManager = extensionManager;
         // --- The pool of available components
         this.pool = new Map(); // namespace -> name -> ComponentRegistryEntry;
@@ -162,6 +163,8 @@ class ComponentRegistry {
         this.actionFns = new Map();
         // --- The pool of available loader renderers
         this.loaders = new Map();
+        // --- The pool of available behaviors
+        this.behaviors = [];
         this.extensionRegistered = (extension) => {
             var _a;
             (_a = extension.components) === null || _a === void 0 ? void 0 : _a.forEach((c) => {
@@ -656,7 +659,15 @@ class ComponentRegistry {
         this.registerLoaderRenderer(ExternalDataLoader_1.externalDataLoaderRenderer);
         this.registerLoaderRenderer(MockLoaderRenderer_1.mockLoaderRenderer);
         this.registerLoaderRenderer(DataLoader_1.dataLoaderRenderer);
-        (_c = this.extensionManager) === null || _c === void 0 ? void 0 : _c.subscribeToRegistrations(this.extensionRegistered);
+        this.registerBehavior(CoreBehaviors_1.variantBehavior);
+        this.registerBehavior(CoreBehaviors_1.tooltipBehavior);
+        this.registerBehavior(CoreBehaviors_1.animationBehavior);
+        this.registerBehavior(CoreBehaviors_1.labelBehavior);
+        // Register external behaviors from contributes
+        (_c = contributes.behaviors) === null || _c === void 0 ? void 0 : _c.forEach((behavior) => {
+            this.registerBehavior(behavior);
+        });
+        (_d = this.extensionManager) === null || _d === void 0 ? void 0 : _d.subscribeToRegistrations(this.extensionRegistered);
     }
     /**
      * All theme variables used by the registered components.
@@ -761,6 +772,24 @@ class ComponentRegistry {
     registerActionFn({ actionName: functionName, actionFn }) {
         this.actionFns.set(functionName, actionFn);
     }
+    // --- Registers a behavior
+    registerBehavior(behavior, location = "after", position) {
+        // If position is specified, insert relative to that behavior
+        if (position) {
+            const targetIndex = this.behaviors.findIndex((b) => b.name === position);
+            if (targetIndex !== -1) {
+                const insertIndex = location === "before" ? targetIndex : targetIndex + 1;
+                this.behaviors.splice(insertIndex, 0, behavior);
+                return;
+            }
+        }
+        // Default: append to the end
+        this.behaviors.push(behavior);
+    }
+    // --- Returns all registered behaviors
+    getBehaviors() {
+        return this.behaviors;
+    }
 }
 exports.ComponentRegistry = ComponentRegistry;
 /**

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

@@ -90,6 +90,9 @@ exports.FormMd = (0, metadata_helpers_1.createMetadata)({
         _data_url: (0, metadata_helpers_1.dInternal)("when we have an api bound data prop, we inject the url here"),
     },
     events: {
+        willSubmit: (0, metadata_helpers_1.d)(`The form infrastructure fires this event just before the form is submitted. The event argument ` +
+            `is the current \`data\` value to be submitted. You can cancel the submission by returning ` +
+            `\`false\` from the event handler.`),
         submit: (0, metadata_helpers_1.d)(`The form infrastructure fires this event when the form is submitted. The event argument ` +
             `is the current \`data\` value to save.`),
         success: (0, metadata_helpers_1.d)("The form infrastructure fires this event when the form is submitted successfully."),

package/dist/scripts/src/components/Form/FormNative.js

@@ -203,7 +203,7 @@ function cleanUpSubject(subject) {
     }, {});
 }
 const Form = (0, react_2.forwardRef)(function (_a, ref) {
-    var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty"]);
+    var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onWillSubmit, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onWillSubmit", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty"]);
     const formRef = (0, react_2.useRef)(null);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
@@ -271,6 +271,12 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
         dispatch((0, formActions_1.formSubmitting)());
         try {
             const filteredSubject = cleanUpSubject(formState.subject);
+            const canSubmit = yield (onWillSubmit === null || onWillSubmit === void 0 ? void 0 : onWillSubmit(filteredSubject));
+            if (canSubmit === false) {
+                // --- We do not reset the form but allow the next submit.
+                dispatch((0, formActions_1.backendValidationArrived)({ generalValidationResults: [], fieldValidationResults: {} }));
+                return;
+            }
             const result = yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
                 passAsDefaultBody: true,
             }));
@@ -397,7 +403,11 @@ exports.FormWithContextVar = (0, react_2.forwardRef)(function ({ node, renderChi
         extractValue.asOptionalString(node.props._data_url);
     const itemLabelWidth = extractValue.asOptionalString(node.props.itemLabelWidth);
     const { cssProps: itemLabelWidthCssProps } = (0, layout_resolver_1.resolveLayoutProps)({ width: itemLabelWidth });
-    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: itemLabelWidthCssProps.width, hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
+    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, style: style, children: (0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: itemLabelWidthCssProps.width, hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty), formState: formState, dispatch: dispatch, id: node.uid, className: className, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onWillSubmit: lookupEventHandler("willSubmit", {
+                context: {
+                    $data,
+                },
+            }), onSubmit: lookupEventHandler("submit", {
                 defaultHandler: submitUrl
                     ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs, inProgressNotificationMessage: "${inProgressNotificationMessage}", completedNotificationMessage: "${completedNotificationMessage}", errorNotificationMessage: "${errorNotificationMessage}" })`
                     : undefined,

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

@@ -277,11 +277,12 @@ exports.H6Md = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-function renderHeading({ node, extractValue, className, level, showAnchor, renderChild, registerComponentApi, }) {
-    var _a, _b;
-    const _c = node.props, { maxLines, preserveLinebreaks, ellipses } = _c, restProps = __rest(_c, ["maxLines", "preserveLinebreaks", "ellipses"]);
+function renderHeading({ node, extractValue, className, level, renderChild, registerComponentApi, }) {
+    var _a, _b, _c;
+    const _d = node.props, { maxLines, preserveLinebreaks, ellipses, showAnchor } = _d, restProps = __rest(_d, ["maxLines", "preserveLinebreaks", "ellipses", "showAnchor"]);
     delete restProps.level; // Remove level from restProps as it is handled separately
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: extractValue.asOptionalBoolean(showAnchor), className: className, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc), registerComponentApi: registerComponentApi }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
+    const showAnchorValue = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.showAnchor);
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_b = extractValue.asOptionalString(level)) !== null && _b !== void 0 ? _b : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: showAnchorValue, className: className, omitFromToc: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.omitFromToc), registerComponentApi: registerComponentApi }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
 }
 exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({

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

@@ -141,6 +141,19 @@ exports.ModalDialog = react_1.default.forwardRef((_a, ref) => {
     const modalRef = (0, react_1.useRef)(null);
     const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, modalRef) : modalRef;
     const { isOpen, doClose, doOpen } = useModalOpenState(isInitiallyOpen, onOpen, onClose);
+    /**
+     * https://github.com/radix-ui/primitives/issues/3648
+     */
+    (0, react_1.useLayoutEffect)(() => {
+        return () => {
+            const root = document.getElementById("root");
+            if (root)
+                requestAnimationFrame(() => {
+                    root.removeAttribute("aria-hidden");
+                    document.body.style.pointerEvents = "auto";
+                });
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         var _a;
         if (isOpen) {

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

@@ -1,12 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pagesRenderer = exports.PagesMd = exports.pageRenderer = exports.PageMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
 const metadata_helpers_1 = require("../metadata-helpers");
 const PagesNative_1 = require("./PagesNative");
 const css_utils_1 = require("../../components-core/utils/css-utils");
+const themeVars_1 = require("../../components-core/theming/themeVars");
 const PAGE = "Page";
 exports.PageMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
@@ -37,6 +42,12 @@ exports.PagesMd = (0, metadata_helpers_1.createMetadata)({
             defaultValue: PagesNative_1.defaultProps.fallbackPath,
         },
     },
+    themeVars: (0, themeVars_1.parseScssVar)(Pages_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`paddingVertical-${COMP}`]: "$space-5",
+        [`paddingHorizontal-${COMP}`]: "$space-4",
+        [`gap-${COMP}`]: "$space-5",
+    },
 });
 exports.pagesRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PagesMd, ({ node, extractValue, renderChild }) => {
     return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { fallbackPath: extractValue(node.props.fallbackPath), node: node, renderChild: renderChild, extractValue: extractValue }));

package/dist/scripts/src/components/Tabs/TabContext.js

@@ -13,32 +13,41 @@ exports.TabContext = (0, react_1.createContext)({
     register: (tabItem) => { },
     unRegister: (innerId) => { },
     activeTabId: "",
+    getTabItems: () => [],
 });
 function useTabContextValue() {
     const [tabItems, setTabItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    const tabItemsRef = (0, react_1.useRef)(constants_1.EMPTY_ARRAY);
+    tabItemsRef.current = tabItems;
     const [activeTabId, setActiveTabId] = (0, react_1.useState)("");
+    const register = (0, react_1.useCallback)((tabItem) => {
+        setTabItems((0, immer_1.default)((draft) => {
+            const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
+            if (existing < 0) {
+                draft.push(tabItem);
+            }
+            else {
+                draft[existing] = tabItem;
+            }
+        }));
+    }, []);
+    const unRegister = (0, react_1.useCallback)((innerId) => {
+        setTabItems((0, immer_1.default)((draft) => {
+            return draft.filter((col) => col.innerId !== innerId);
+        }));
+    }, []);
+    const getTabItems = (0, react_1.useCallback)(() => {
+        return tabItemsRef.current;
+    }, []);
     const tabContextValue = (0, react_1.useMemo)(() => {
         return {
-            register: (tabItem) => {
-                setTabItems((0, immer_1.default)((draft) => {
-                    const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
-                    if (existing < 0) {
-                        draft.push(tabItem);
-                    }
-                    else {
-                        draft[existing] = tabItem;
-                    }
-                }));
-            },
-            unRegister: (innerId) => {
-                setTabItems((0, immer_1.default)((draft) => {
-                    return draft.filter((col) => col.innerId !== innerId);
-                }));
-            },
+            register,
+            unRegister,
             activeTabId,
             setActiveTabId,
+            getTabItems,
         };
-    }, [activeTabId]);
+    }, [register, unRegister, activeTabId, getTabItems]);
     return {
         tabItems,
         tabContextValue,

package/dist/scripts/src/components/Tabs/TabItemNative.js

@@ -21,9 +21,10 @@ const react_tabs_1 = require("@radix-ui/react-tabs");
 const Tabs_module_scss_1 = __importDefault(require("../Tabs/Tabs.module.scss"));
 const TabContext_1 = require("./TabContext");
 exports.TabItemComponent = (0, react_2.forwardRef)(function TabItemComponent(_a, forwardedRef) {
+    var _b;
     var { children, label, headerRenderer, style, id, activated } = _a, rest = __rest(_a, ["children", "label", "headerRenderer", "style", "id", "activated"]);
     const innerId = (0, react_2.useId)();
-    const { register, unRegister, activeTabId } = (0, TabContext_1.useTabContext)();
+    const { register, unRegister, activeTabId, getTabItems } = (0, TabContext_1.useTabContext)();
     (0, react_2.useEffect)(() => {
         register({
             label,
@@ -44,5 +45,9 @@ exports.TabItemComponent = (0, react_2.forwardRef)(function TabItemComponent(_a,
     }, [activeTabId, innerId, activated]);
     if (activeTabId !== innerId)
         return null;
-    return ((0, react_1.createElement)(react_tabs_1.Content, Object.assign({}, rest, { key: innerId, value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: style }), children));
+    // Find the index of this tab for ordering
+    const tabItems = getTabItems();
+    const tabIndex = (_b = tabItems === null || tabItems === void 0 ? void 0 : tabItems.findIndex(item => item.innerId === innerId)) !== null && _b !== void 0 ? _b : 0;
+    const contentOrder = tabIndex * 2 + 1;
+    return ((0, react_1.createElement)(react_tabs_1.Content, Object.assign({}, rest, { key: innerId, value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: Object.assign(Object.assign({}, style), { order: contentOrder }) }), children));
 });

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

@@ -24,11 +24,30 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
         orientation: {
             description: `This property indicates the orientation of the component. In horizontal orientation, ` +
                 `the tab sections are laid out on the left side of the content panel, while in vertical ` +
-                `orientation, the buttons are at the top.`,
+                `orientation, the buttons are at the top. Note: This property is ignored when ` +
+                `accordionView is set to true.`,
             availableValues: ["horizontal", "vertical"],
             defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
+        tabAlignment: {
+            description: `This property controls how tabs are aligned within the tab header container in ` +
+                `horizontal orientation. Use 'start' to align tabs to the left, 'end' to align to the ` +
+                `right, 'center' to center the tabs, and 'stretch' to make tabs fill the full width ` +
+                `of the header. Note: This property is ignored when orientation is set to 'vertical' ` +
+                `or when accordionView is enabled.`,
+            availableValues: ["start", "end", "center", "stretch"],
+            defaultValue: TabsNative_1.defaultProps.tabAlignment,
+            valueType: "string",
+        },
+        accordionView: {
+            description: `When enabled, displays tabs in an accordion-like view where tab headers are stacked ` +
+                `vertically and only the active tab's content is visible. Each tab header remains visible ` +
+                `and clicking a header opens its content while closing others. When enabled, the ` +
+                `orientation property is ignored.`,
+            defaultValue: TabsNative_1.defaultProps.accordionView,
+            valueType: "boolean",
+        },
         headerTemplate: Object.assign({}, (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`)),
     },
     events: {
@@ -67,10 +86,10 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, className, registerComponentApi, lookupEventHandler }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     return ((0, jsx_runtime_1.jsx)(TabsNative_1.Tabs, { id: node === null || node === void 0 ? void 0 : node.uid, className: className, headerRenderer: ((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.headerTemplate)
             ? (item) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.headerTemplate, itemKey: "$header", contextVars: {
                     $header: item,
                 }, renderChild: renderChild }))
-            : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), onDidChange: lookupEventHandler("didChange"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
+            : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), tabAlignment: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.tabAlignment), accordionView: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.accordionView), onDidChange: lookupEventHandler("didChange"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
 });