xmlui 0.10.22 → 0.10.23

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.22",
+    "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

@@ -659,6 +659,7 @@ class ComponentRegistry {
         this.registerLoaderRenderer(ExternalDataLoader_1.externalDataLoaderRenderer);
         this.registerLoaderRenderer(MockLoaderRenderer_1.mockLoaderRenderer);
         this.registerLoaderRenderer(DataLoader_1.dataLoaderRenderer);
+        this.registerBehavior(CoreBehaviors_1.variantBehavior);
         this.registerBehavior(CoreBehaviors_1.tooltipBehavior);
         this.registerBehavior(CoreBehaviors_1.animationBehavior);
         this.registerBehavior(CoreBehaviors_1.labelBehavior);
@@ -775,7 +776,7 @@ class ComponentRegistry {
     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);
+            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);

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/Text/Text.js

@@ -162,10 +162,10 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-${COMP}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
         [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
         [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
-        [`color-${COMP}-placeholder`]: "$color-surface-500",
-        [`color-${COMP}-codefence`]: "$color-surface-900",
-        [`color-${COMP}-subheading`]: "$textColor-secondary",
-        [`color-${COMP}-secondary`]: "$textColor-secondary",
+        [`textColor-${COMP}-placeholder`]: "$color-surface-500",
+        [`textColor-${COMP}-codefence`]: "$color-surface-900",
+        [`textColor-${COMP}-subheading`]: "$textColor-secondary",
+        [`textColor-${COMP}-secondary`]: "$textColor-secondary",
         dark: {
             [`backgroundColor-${COMP}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)",
         },

package/dist/scripts/src/components-core/StandaloneApp.js

@@ -647,7 +647,7 @@ function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, ext
                                 }
                             }
                             resolvedRuntime.projectCompilation.components.push(compCompilation);
-                            const compoundComp = Object.assign(Object.assign({}, compWrapper.component), { component: Object.assign(Object.assign({}, compWrapper.component.component), { vars: Object.assign(Object.assign({}, compWrapper.component.component.vars), (_b = componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.component) === null || _b === void 0 ? void 0 : _b.vars) }) });
+                            const compoundComp = Object.assign(Object.assign({}, compWrapper.component), { component: Object.assign(Object.assign({}, compWrapper.component.component), { vars: Object.assign(Object.assign({}, compWrapper.component.component.vars), (_b = componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.codeBehind) === null || _b === void 0 ? void 0 : _b.vars) }) });
                             if (componentCodeBehind && "codeBehind" in componentCodeBehind) {
                                 compoundComp.component.functions = componentCodeBehind.codeBehind.functions;
                                 compoundComp.component.scriptError = componentCodeBehind.codeBehind.moduleErrors;

package/dist/scripts/src/components-core/behaviors/CoreBehaviors.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCoreBehaviors = exports.labelBehavior = exports.animationBehavior = exports.tooltipBehavior = void 0;
+exports.variantBehavior = exports.labelBehavior = exports.animationBehavior = exports.tooltipBehavior = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AnimationNative_1 = require("../../components/Animation/AnimationNative");
 const ItemWithLabel_1 = require("../../components/FormItem/ItemWithLabel");
 const TooltipNative_1 = require("../../components/Tooltip/TooltipNative");
+const StyleContext_1 = require("../theming/StyleContext");
+const layout_resolver_1 = require("../theming/layout-resolver");
+const parse_layout_props_1 = require("../theming/parse-layout-props");
+const abstractions_1 = require("../../components/abstractions");
+const BadgeNative_1 = require("../../components/Badge/BadgeNative");
 /**
  * Behavior for applying tooltips to components.
  */
@@ -17,7 +22,7 @@ exports.tooltipBehavior = {
         const tooltipMarkdown = (_b = node.props) === null || _b === void 0 ? void 0 : _b.tooltipMarkdown;
         return !!tooltipText || !!tooltipMarkdown;
     },
-    attach: (context, node) => {
+    attach: (context, node, metadata) => {
         var _a, _b, _c;
         const { extractValue } = context;
         const tooltipText = extractValue((_a = context.node.props) === null || _a === void 0 ? void 0 : _a.tooltip, true);
@@ -36,7 +41,7 @@ exports.animationBehavior = {
         var _a;
         return !!((_a = node.props) === null || _a === void 0 ? void 0 : _a.animation);
     },
-    attach: (context, node) => {
+    attach: (context, node, metadata) => {
         var _a, _b;
         const { extractValue } = context;
         const animation = extractValue((_a = context.node.props) === null || _a === void 0 ? void 0 : _a.animation, true);
@@ -68,7 +73,7 @@ exports.labelBehavior = {
         }
         return true;
     },
-    attach: (context, node) => {
+    attach: (context, node, metadata) => {
         var _a;
         const { extractValue, node: componentNode, className } = context;
         const label = extractValue.asOptionalString(componentNode.props.label);
@@ -83,7 +88,113 @@ exports.labelBehavior = {
         return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, style: style, className: className, shrinkToLabel: shrinkToLabel, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, isInputTemplateUsed: !!((_a = componentNode.props) === null || _a === void 0 ? void 0 : _a.inputTemplate), children: node }));
     },
 };
-const getCoreBehaviors = () => {
-    return [exports.tooltipBehavior, exports.animationBehavior, exports.labelBehavior];
+/**
+ * Behavior for applying custom variant styling to components with non-predefined variant values.
+ * For Button components, this only applies if the variant is not "solid", "outlined", or "ghost".
+ * For other components, it applies to any component with a variant prop.
+ *
+ * This behavior clones the rendered node and adds the generated CSS class directly,
+ * without wrapping in an additional component.
+ */
+exports.variantBehavior = {
+    name: "variant",
+    canAttach: (node) => {
+        var _a;
+        const variant = (_a = node.props) === null || _a === void 0 ? void 0 : _a.variant;
+        // Must have a variant prop
+        if (!variant) {
+            return false;
+        }
+        // Special handling for Button component
+        if (node.type === "Button") {
+            // For Button, only attach if variant is NOT one of the predefined values
+            const variantStr = typeof variant === "string" ? variant : String(variant);
+            return !abstractions_1.buttonVariantValues.includes(variantStr);
+        }
+        // Special handling for Badge component
+        if (node.type === "Badge") {
+            // For Badge, only attach if variant is NOT one of the predefined values
+            const variantStr = typeof variant === "string" ? variant : String(variant);
+            return !BadgeNative_1.badgeVariantValues.includes(variantStr);
+        }
+        return true;
+    },
+    attach: (context, node, metadata) => {
+        var _a;
+        const { extractValue, node: componentNode } = context;
+        const variant = extractValue((_a = componentNode.props) === null || _a === void 0 ? void 0 : _a.variant, true);
+        const componentType = componentNode.type;
+        if (!variant || typeof variant !== "string") {
+            return node;
+        }
+        // Get theme variables from metadata
+        const themeVars = metadata === null || metadata === void 0 ? void 0 : metadata.themeVars;
+        // Validate that themeVars is a record object
+        if (!themeVars || typeof themeVars !== 'object' || Array.isArray(themeVars)) {
+            return node;
+        }
+        const themeVarKeys = Object.keys(themeVars);
+        if (themeVarKeys.length === 0) {
+            return node;
+        }
+        // Generate the variant style specification from metadata themeVars
+        const subject = `-${componentType}-${variant}`;
+        const variantSpec = {
+            "&": {},
+            "&:hover": {},
+            "&:active": {},
+            "&:disabled": {},
+        };
+        // Process each theme variable from metadata
+        for (const themeVar of themeVarKeys) {
+            const parsed = (0, parse_layout_props_1.parseLayoutProperty)(themeVar, true);
+            // Skip if parsing failed or returned an error string
+            if (typeof parsed === "string") {
+                continue;
+            }
+            const { property, states } = parsed;
+            // Convert camelCase property to CSS property name
+            const cssProperty = (0, parse_layout_props_1.toCssPropertyName)(property);
+            if (!cssProperty) {
+                continue;
+            }
+            // Determine which selector to use based on states
+            let selector = "&";
+            let stateSuffix = "";
+            if (states && states.length > 0) {
+                const state = states[0]; // Use first state
+                stateSuffix = `--${states.join("--")}`;
+                if (state === "hover") {
+                    selector = "&:hover";
+                }
+                else if (state === "active") {
+                    selector = "&:active";
+                }
+                else if (state === "disabled") {
+                    selector = "&:disabled";
+                }
+                else if (state === "focus") {
+                    selector = "&:focus";
+                }
+            }
+            // Generate CSS variable reference for this theme variable with variant suffix
+            //const cssVarValue = toCssVar(`$${property}${subject}${stateSuffix}`);
+            const cssVarValue = `var(--${layout_resolver_1.THEME_VAR_PREFIX}-${property}${subject}${stateSuffix}, ` +
+                `var(--${layout_resolver_1.THEME_VAR_PREFIX}-${property}-${componentType}))`;
+            // Add to appropriate selector in variant spec
+            if (!variantSpec[selector]) {
+                variantSpec[selector] = {};
+            }
+            variantSpec[selector][cssProperty] = cssVarValue;
+        }
+        // Generate the CSS class using useStyles hook
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const customVariantClassName = (0, StyleContext_1.useStyles)(variantSpec);
+        // Clone the node and add the custom variant className
+        const existingClassName = node.props.className || "";
+        const newClassName = `${existingClassName} ${customVariantClassName || ""}`.trim();
+        return (0, react_1.cloneElement)(node, {
+            className: newClassName,
+        });
+    },
 };
-exports.getCoreBehaviors = getCoreBehaviors;

package/dist/scripts/src/components-core/rendering/ComponentAdapter.js

@@ -220,7 +220,7 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
         if (!isCompoundComponent) {
             for (const behavior of behaviors) {
                 if (behavior.canAttach(rendererContext.node, descriptor)) {
-                    renderedNode = behavior.attach(rendererContext, renderedNode);
+                    renderedNode = behavior.attach(rendererContext, renderedNode, descriptor);
                 }
             }
         }

package/dist/scripts/src/components-core/theming/component-layout-resolver.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BASE_COMPONENT_PART = exports.THEME_VAR_PREFIX = void 0;
+exports.specialResolvers = exports.BASE_COMPONENT_PART = exports.THEME_VAR_PREFIX = void 0;
 exports.resolveComponentLayoutProps = resolveComponentLayoutProps;
 const constants_1 = require("../constants");
 const parse_layout_props_1 = require("./parse-layout-props");
@@ -22,8 +22,8 @@ function resolveComponentLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, lay
         const cssPropName = parsed.property;
         const appliedValue = (_a = value === null || value === void 0 ? void 0 : value.toString()) === null || _a === void 0 ? void 0 : _a.replace(themeVarCapturesRegex, (match) => toCssVar(match.trim()));
         // --- Some properties may need transformation
-        const cssProps = cssPropName in specialResolvers
-            ? specialResolvers[cssPropName](appliedValue, layoutContext)
+        const cssProps = cssPropName in exports.specialResolvers
+            ? exports.specialResolvers[cssPropName](appliedValue, layoutContext)
             : { [cssPropName]: appliedValue };
         // --- Check if the property belongs to one or more states
         const stateName = parsed.states && parsed.states.length > 0 ? parsed.states.join("&") : null;
@@ -93,7 +93,7 @@ function getOrientation(layoutContext) {
 function toCssVar(c) {
     return `var(--${exports.THEME_VAR_PREFIX}-${c.substring(1)})`;
 }
-const specialResolvers = {
+exports.specialResolvers = {
     paddingHorizontal: (propValue) => ({
         paddingLeft: propValue,
         paddingRight: propValue,

package/dist/scripts/src/components-core/theming/parse-layout-props.js

@@ -1,7 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSS_PROPERTY_EXCEPTIONS = void 0;
 exports.parseLayoutProperty = parseLayoutProperty;
+exports.toCssPropertyName = toCssPropertyName;
 const AppContextDefs_1 = require("../../abstractions/AppContextDefs");
+/**
+ * Mapping exceptions for camelCase property names to CSS property names.
+ * These properties don't follow the standard camelCase-to-kebab-case conversion.
+ */
+exports.CSS_PROPERTY_EXCEPTIONS = {
+    textColor: "color",
+    paddingVertical: "",
+    paddingHorizontal: "",
+    marginVertical: "",
+    marginHorizontal: "",
+    borderVertical: "",
+    borderHorizontal: "",
+};
 function parseLayoutProperty(prop, parseComponent = false) {
     if (!prop || typeof prop !== 'string') {
         return "Property string cannot be empty";
@@ -77,6 +92,29 @@ function parseLayoutProperty(prop, parseComponent = false) {
     }
     return result;
 }
+/**
+ * Transforms a camelCase property name (as used in ParsedLayout.property)
+ * to its corresponding CSS style property name.
+ *
+ * Handles special cases defined in CSS_PROPERTY_EXCEPTIONS, otherwise
+ * converts camelCase to kebab-case (e.g., "fontSize" -> "font-size").
+ *
+ * @param property - The camelCase property name from ParsedLayout
+ * @returns The CSS property name in kebab-case or the mapped exception
+ *
+ * @example
+ * toCssPropertyName('fontSize') // returns 'font-size'
+ * toCssPropertyName('textColor') // returns 'color' (exception)
+ * toCssPropertyName('backgroundColor') // returns 'background-color'
+ */
+function toCssPropertyName(property) {
+    // Check if there's a mapping exception
+    if (property in exports.CSS_PROPERTY_EXCEPTIONS) {
+        return exports.CSS_PROPERTY_EXCEPTIONS[property];
+    }
+    // Convert camelCase to kebab-case
+    return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 function isValidPropertyName(name) {
     // CSS property names in camelCase - start with lowercase letter, can contain letters and numbers
     return /^[a-z][a-zA-Z0-9]*$/.test(name);

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -263,9 +263,10 @@ declare interface Behavior {
      * A function that attaches the behavior to the component's React node.
      * @param context The renderer context of the component.
      * @param node The React node to attach.
+     * @param metadata The metadata of the component.
      * @returns The attached React node.
      */
-    attach: (context: RendererContext<any>, node: ReactNode) => ReactNode;
+    attach: (context: RendererContext<any>, node: ReactNode, metadata?: ComponentMetadata) => ReactNode;
 }
 
 declare type BINARY_EXPRESSION = typeof T_BINARY_EXPRESSION;
@@ -479,7 +480,7 @@ declare type ComponentMetadata<TProps extends Record<string, ComponentPropertyMe
     nonVisual?: boolean;
     childrenAsTemplate?: string;
     opaque?: boolean;
-    themeVars?: Array<string>;
+    themeVars?: Record<string, string>;
     themeVarDescriptions?: Record<string, string>;
     defaultThemeVars?: DefaultThemeVars;
     toneSpecificThemeVars?: Record<string, Record<string, string>>;