xmlui 0.9.81 → 0.9.82

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.81",
+    "version": "0.9.82",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -114,6 +114,7 @@
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-textdocument": "^1.0.11",
+        "framer-motion": "^12.18.1",
         "yargs": "17.7.2"
     },
     "devDependencies": {

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

@@ -19,7 +19,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
-const react_1 = require("react");
 const FormContext_1 = require("../Form/FormContext");
 const metadata_helpers_1 = require("../metadata-helpers");
 const Validations_1 = require("./Validations");
@@ -193,43 +192,6 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
 exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormItemMd, ({ node, renderChild, extractValue, layoutCss, layoutContext, lookupEventHandler, lookupAction, registerComponentApi, }) => {
     var _a;
     const _b = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength, gap } = _b, rest = __rest(_b, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength", "gap"]);
-    //extractValue works as a memoization mechanism too (if there's nothing to resolve, it won't produce a new object every time)
-    const resolvedValidationPropsAndEvents = (0, react_1.useMemo)(() => ({
-        required: extractValue.asOptionalBoolean(required),
-        requiredInvalidMessage: extractValue.asOptionalString(requiredInvalidMessage),
-        minLength: extractValue.asOptionalNumber(minLength),
-        maxLength: extractValue.asOptionalNumber(maxLength),
-        lengthInvalidMessage: extractValue.asOptionalString(lengthInvalidMessage),
-        lengthInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(lengthInvalidSeverity)),
-        minValue: extractValue.asOptionalNumber(minValue),
-        maxValue: extractValue.asOptionalNumber(maxValue),
-        rangeInvalidMessage: extractValue.asOptionalString(rangeInvalidMessage),
-        rangeInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(rangeInvalidSeverity)),
-        pattern: extractValue.asOptionalString(pattern),
-        patternInvalidMessage: extractValue.asOptionalString(patternInvalidMessage),
-        patternInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(patternInvalidSeverity)),
-        regex: extractValue.asOptionalString(regex),
-        regexInvalidMessage: extractValue.asOptionalString(regexInvalidMessage),
-        regexInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(regexInvalidSeverity)),
-    }), [
-        required,
-        requiredInvalidMessage,
-        minLength,
-        maxLength,
-        lengthInvalidMessage,
-        lengthInvalidSeverity,
-        minValue,
-        maxValue,
-        rangeInvalidMessage,
-        rangeInvalidSeverity,
-        pattern,
-        patternInvalidMessage,
-        patternInvalidSeverity,
-        regex,
-        regexInvalidMessage,
-        regexInvalidSeverity,
-        extractValue,
-    ]);
     const nonLayoutCssProps = !layoutCss
         ? rest
         : Object.fromEntries(Object.entries(rest).filter(([key, _]) => {
@@ -239,7 +201,13 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const formItemType = extractValue.asOptionalString(type);
     const isCustomFormItem = (formItemType === undefined || formItemType === "custom") && !!node.children;
     const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
-    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), inputRenderer: inputTemplate
+    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem
+    // --- validation props
+    , Object.assign({ 
+        // --- validation props
+        required: extractValue.asOptionalBoolean(required), requiredInvalidMessage: extractValue.asOptionalString(requiredInvalidMessage), minLength: extractValue.asOptionalNumber(minLength), maxLength: extractValue.asOptionalNumber(maxLength), lengthInvalidMessage: extractValue.asOptionalString(lengthInvalidMessage), lengthInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(lengthInvalidSeverity)), minValue: extractValue.asOptionalNumber(minValue), maxValue: extractValue.asOptionalNumber(maxValue), rangeInvalidMessage: extractValue.asOptionalString(rangeInvalidMessage), rangeInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(rangeInvalidSeverity)), pattern: extractValue.asOptionalString(pattern), patternInvalidMessage: extractValue.asOptionalString(patternInvalidMessage), patternInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(patternInvalidSeverity)), regex: extractValue.asOptionalString(regex), regexInvalidMessage: extractValue.asOptionalString(regexInvalidMessage), regexInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(regexInvalidSeverity)), 
+        //  ----
+        style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
             : undefined, gap: extractValue.asOptionalString(gap) }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(FormItemNative_1.CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children, {
             type: formItemType,

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -38,6 +38,7 @@ const HelperText_1 = require("./HelperText");
 const NumberBox2Native_1 = require("../NumberBox/NumberBox2Native");
 const ItemsNative_1 = require("../Items/ItemsNative");
 const constants_1 = require("../../components-core/constants");
+const hooks_1 = require("../../components-core/utils/hooks");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
@@ -70,7 +71,29 @@ function ArrayLikeFormItem({ children, formItemId, registerComponentApi, value =
     return (0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: formContextValue, children: children });
 }
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
-    var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps, gap } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue", "gap"]);
+    var { 
+    // --- validation props
+    required, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, 
+    // ---
+    style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps, gap } = _a, rest = __rest(_a, ["required", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue", "gap"]);
+    const validations = (0, hooks_1.useShallowCompareMemoize)({
+        required,
+        requiredInvalidMessage,
+        minLength,
+        maxLength,
+        lengthInvalidMessage,
+        lengthInvalidSeverity,
+        minValue,
+        maxValue,
+        rangeInvalidMessage,
+        rangeInvalidSeverity,
+        pattern,
+        patternInvalidMessage,
+        patternInvalidSeverity,
+        regex,
+        regexInvalidMessage,
+        regexInvalidSeverity,
+    });
     const defaultId = (0, react_1.useId)();
     const { parentFormItemId } = (0, react_1.useContext)(FormItemContext);
     const formItemId = (0, react_1.useMemo)(() => {

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

@@ -396,7 +396,6 @@ function removeSuffixFromReactNodes(node, suffix) {
 }
 const LinkAwareHeading = ({ level, children, showHeadingAnchors }) => {
     const { appGlobals } = (0, AppContext_1.useAppContext)();
-    const headingRef = (0, react_1.useRef)(null);
     // --- Extract the optional anchor
     let anchor = undefined;
     let label = children;
@@ -408,7 +407,7 @@ const LinkAwareHeading = ({ level, children, showHeadingAnchors }) => {
         label = removeSuffixFromReactNodes(children, anchorText);
     }
     const headingId = anchor !== null && anchor !== void 0 ? anchor : getHeadingId(children);
-    return ((0, jsx_runtime_1.jsxs)(HeadingNative_1.Heading, { level: level, id: headingId, className: Markdown_module_scss_1.default.linkAwareHeading, headingRef: headingRef, children: [label, showHeadingAnchors && ((0, jsx_runtime_1.jsx)("a", { href: `#${headingId}`, className: Markdown_module_scss_1.default.headingLink, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(HeadingNative_1.Heading, { level: level, id: headingId, className: Markdown_module_scss_1.default.linkAwareHeading, children: [label, showHeadingAnchors && ((0, jsx_runtime_1.jsx)("a", { href: `#${headingId}`, className: Markdown_module_scss_1.default.headingLink, onClick: (e) => {
                     var _a;
                     e.preventDefault();
                     (_a = appGlobals.events) === null || _a === void 0 ? void 0 : _a.emit("scroll-to-anchor", { anchor: headingId });

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

@@ -95,11 +95,15 @@ const ConfirmationModalContextProvider = ({ children }) => {
         });
     }), []);
     const handleOk = (0, react_1.useCallback)((value) => {
-        resolver.current && resolver.current(value);
+        if (resolver.current) {
+            resolver.current(value);
+        }
         setShowConfirmationModal(false);
     }, []);
     const handleCancel = (0, react_1.useCallback)(() => {
-        resolver.current && resolver.current(false);
+        if (resolver.current) {
+            resolver.current(false);
+        }
         setShowConfirmationModal(false);
     }, []);
     const contextValue = (0, react_1.useMemo)(() => {

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

@@ -76,6 +76,7 @@ exports.ModalDialogFrame = react_1.default.forwardRef(({ isInitiallyOpen, onOpen
             ref,
         }) })) : null;
 });
+exports.ModalDialogFrame.displayName = "ModalDialogFrame";
 const ModalStateContext = react_1.default.createContext(null);
 function useModalLocalOpenState(isInitiallyOpen, onOpen, onClose) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(isInitiallyOpen);
@@ -117,6 +118,10 @@ function useModalOpenState(isInitiallyOpen = true, onOpen, onClose) {
 }
 exports.ModalDialog = react_1.default.forwardRef(({ children, style, isInitiallyOpen, fullScreen = exports.defaultProps.fullScreen, title, closeButtonVisible = exports.defaultProps.closeButtonVisible, onOpen, onClose, }, ref) => {
     const { root } = (0, ThemeContext_1.useTheme)();
+    // NOTE: at this point, we can't use useAppContext here,
+    // since the ModalDialog context provider (via ConfirmationModalContextProvider) is mounted outside of the AppContext,
+    // and ModalDialogs can also be called using the imperative API (see functions like "confirm")
+    const isDialogRootInShadowDom = (root === null || root === void 0 ? void 0 : root.getRootNode()) instanceof ShadowRoot;
     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);
@@ -159,14 +164,22 @@ exports.ModalDialog = react_1.default.forwardRef(({ children, style, isInitially
     if (!root) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => (open ? doOpen() : doClose()), children: (0, jsx_runtime_1.jsxs)(Dialog.Portal, { container: root, children: [!fullScreen && (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.overlayBg }), (0, jsx_runtime_1.jsx)(Dialog.Overlay, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.overlay, {
+    const Content = ((0, jsx_runtime_1.jsxs)(Dialog.Content, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content), onPointerDownOutside: (event) => {
+            if (event.target instanceof Element &&
+                event.target.closest("._debug-inspect-button") !== null) {
+                //we prevent the auto modal close on clicking the inspect button
+                event.preventDefault();
+            }
+        }, ref: composedRef, style: Object.assign(Object.assign({}, style), { gap: undefined }), children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { style: { marginTop: 0 }, children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, style: { gap: style === null || style === void 0 ? void 0 : style.gap }, children: (0, jsx_runtime_1.jsx)(ModalVisibilityContext_1.ModalVisibilityContext.Provider, { value: modalVisibilityContextValue, children: children }) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] }));
+    return ((0, jsx_runtime_1.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => (open ? doOpen() : doClose()), children: (0, jsx_runtime_1.jsxs)(Dialog.Portal, { container: root, children: [isDialogRootInShadowDom && (
+                /*
+                  In the Shadow DOM we can omit the Dialog.Overlay,
+                  since we get the same result & the main content outside remains scrollable.
+                */
+                (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.overlayBg, ModalDialog_module_scss_1.default.nested, {
                         [ModalDialog_module_scss_1.default.fullScreen]: fullScreen,
-                    }), children: (0, jsx_runtime_1.jsxs)(Dialog.Content, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content), onPointerDownOutside: (event) => {
-                            if (event.target instanceof Element &&
-                                event.target.closest("._debug-inspect-button") !== null) {
-                                //we prevent the auto modal close on clicking the inspect button
-                                event.preventDefault();
-                            }
-                        }, ref: composedRef, style: Object.assign(Object.assign({}, style), { gap: undefined }), children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { style: { marginTop: 0 }, children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, style: { gap: style === null || style === void 0 ? void 0 : style.gap }, children: (0, jsx_runtime_1.jsx)(ModalVisibilityContext_1.ModalVisibilityContext.Provider, { value: modalVisibilityContextValue, children: children }) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] }) })] }) }));
+                    }), children: Content })), !isDialogRootInShadowDom && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.overlayBg) }), (0, jsx_runtime_1.jsx)(Dialog.Overlay, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.overlay, {
+                                [ModalDialog_module_scss_1.default.fullScreen]: fullScreen,
+                            }), children: Content })] }))] }) }));
 });
 exports.ModalDialog.displayName = "ModalDialog";

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

@@ -26,6 +26,7 @@ const utils_1 = require("./utils");
 const AppContext_1 = require("../../components-core/AppContext");
 const classnames_1 = __importDefault(require("classnames"));
 const logo_svg_react_1 = __importDefault(require("./logo.svg?react"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 /**
  * A component that displays markdown content on the left and a NestedApp on the right
  */
@@ -34,7 +35,8 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
     const [showCode, setShowCode] = (0, react_1.useState)(initiallyShowCode);
     const appContext = (0, AppContext_1.useAppContext)();
     const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
-    const safePopOutUrl = (0, utils_1.withoutTrailingSlash)(popOutUrl || ((_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.popOutUrl) || "https://docs.xmlui.com/#/playground");
+    const { activeTheme: currentTheme, activeThemeTone, activeThemeId } = (0, ThemeContext_1.useTheme)();
+    const safePopOutUrl = (0, utils_1.withoutTrailingSlash)(popOutUrl || ((_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.popOutUrl) || "https://docs.xmlui.org/#/playground");
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         const data = {
             standalone: {
@@ -42,7 +44,7 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
                 components,
                 config: {
                     name: title,
-                    themes: [],
+                    themes: [currentTheme],
                     defaultTheme: activeTheme,
                 },
                 api: api,
@@ -52,8 +54,8 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
                 swapped: false,
                 previewMode: false,
                 orientation: "horizontal",
-                activeTheme,
-                activeTone,
+                activeTheme: activeThemeId || activeTheme,
+                activeTone: activeTone || activeThemeTone,
                 content: "app",
             },
         };

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

@@ -8,12 +8,14 @@ const renderers_1 = require("../../components-core/renderers");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const IconNative_1 = require("../Icon/IconNative");
 const metadata_helpers_1 = require("../metadata-helpers");
+const lodash_es_1 = require("lodash-es");
 const COMP = "ToneChangerButton";
 const LIGHT_TO_DARK_ICON = "lightToDark:ToneChangerButton";
 const DARK_TO_LIGHT_ICON = "darkToLight:ToneChangerButton";
 exports.defaultProps = {
     lightToDarkIcon: LIGHT_TO_DARK_ICON,
     darkToLightIcon: DARK_TO_LIGHT_ICON,
+    onClick: lodash_es_1.noop,
 };
 exports.ToneChangerButtonMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
@@ -32,18 +34,30 @@ exports.ToneChangerButtonMd = (0, metadata_helpers_1.createMetadata)({
             defaultValue: exports.defaultProps.darkToLightIcon,
         },
     },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
+    },
 });
-function ToneChangerButton({ lightToDarkIcon = exports.defaultProps.lightToDarkIcon, darkToLightIcon = exports.defaultProps.darkToLightIcon, }) {
+function ToneChangerButton({ lightToDarkIcon = exports.defaultProps.lightToDarkIcon, darkToLightIcon = exports.defaultProps.darkToLightIcon, onClick = exports.defaultProps.onClick, }) {
     const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
     // Use the direct icon name as both the main icon and the fallback
     // This ensures we always have a working icon
     const iconName = activeThemeTone === "light" ? lightToDarkIcon : darkToLightIcon;
     const fallbackIcon = activeThemeTone === "light" ? "lightToDark" : "darkToLight";
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", style: { flexShrink: 0 }, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, fallback: fallbackIcon }), onClick: () => activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light") }));
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", style: { flexShrink: 0 }, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, fallback: fallbackIcon }), onClick: () => {
+            if (activeThemeTone === "light") {
+                setActiveThemeTone("dark");
+                onClick === null || onClick === void 0 ? void 0 : onClick("dark");
+            }
+            else {
+                setActiveThemeTone("light");
+                onClick === null || onClick === void 0 ? void 0 : onClick("light");
+            }
+        } }));
 }
 /**
  * Define the renderer for the ToneChangerButton component
  */
-exports.toneChangerButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ToneChangerButtonMd, ({ node, extractValue }) => {
-    return ((0, jsx_runtime_1.jsx)(ToneChangerButton, { lightToDarkIcon: extractValue.asOptionalString(node.props.lightToDarkIcon), darkToLightIcon: extractValue.asOptionalString(node.props.darkToLightIcon) }));
+exports.toneChangerButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ToneChangerButtonMd, ({ node, extractValue, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(ToneChangerButton, { onClick: lookupEventHandler("click"), lightToDarkIcon: extractValue.asOptionalString(node.props.lightToDarkIcon), darkToLightIcon: extractValue.asOptionalString(node.props.darkToLightIcon) }));
 });

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

@@ -281,7 +281,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
             environment,
             mediaSize,
             queryClient: AppRoot_1.queryClient,
-            standalone }, date_functions_1.dateFunctions), math_function_1.mathFunctions), { 
+            standalone, appIsInShadowDom: (root === null || root === void 0 ? void 0 : root.getRootNode()) instanceof ShadowRoot }, date_functions_1.dateFunctions), math_function_1.mathFunctions), { 
             // --- File Utilities
             formatFileSizeInBytes: misc_1.formatFileSizeInBytes,
             getFileExtension: misc_1.getFileExtension,
@@ -324,6 +324,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
         embed,
         apiInterceptorContext,
         forceRefreshAnchorScroll,
+        root,
     ]);
     // --- We prepare the helper infrastructure for the `AppState` component, which manages
     // --- app-wide state using buckets (state sections).

package/dist/scripts/src/syntax/grammar.tmLanguage.json

@@ -239,7 +239,7 @@
             "patterns": [{ "include": "#attribute" }, { "include": "#comments" }]
         },
         "componentTag": {
-            "begin": "(</?)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)([a-zA-Z][\\w\\.\\-]*)",
+            "begin": "(\\s*</?)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)([a-zA-Z][\\w\\.\\-]*)",
             "beginCaptures": {
                 "1": { "name": "punctuation.definition.tag.xmlui" },
                 "2": { "name": "keyword.operator.namespace.xmlui" },

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

@@ -3,6 +3,7 @@ import { default as default_2 } from 'react';
 import { default as default_3 } from 'react/jsx-runtime';
 import { DefaultToastOptions } from 'react-hot-toast';
 import { DelayMode } from 'msw';
+import { Dispatch } from 'react';
 import { ErrorInfo } from 'react';
 import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -15,6 +16,7 @@ import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { Renderable } from 'react-hot-toast';
 import { Root } from 'react-dom/client';
+import { SetStateAction } from 'react';
 import { SetupWorker } from 'msw/browser';
 import { StrictRequest } from 'msw';
 import { To } from 'react-router-dom';
@@ -83,6 +85,7 @@ declare type AppContextObject = {
     mediaSize: MediaSize;
     queryClient: QueryClient | null;
     standalone?: boolean;
+    appIsInShadowDom?: boolean;
     formatDate: (date: string | Date) => string | undefined;
     formatDateTime: (date: any) => string | undefined;
     formatDateWithoutYear: (date: string | Date) => string | undefined;
@@ -158,6 +161,21 @@ declare function AppRoot({ apiInterceptor, contributes, node, decorateComponents
     isNested?: boolean;
 }): JSX_2.Element;
 
+declare type AppThemes = {
+    root: HTMLElement | undefined;
+    setRoot: Dispatch<SetStateAction<HTMLElement | undefined>>;
+    setActiveThemeId: (newThemeId: string) => void;
+    setActiveThemeTone: (newTone: ThemeTone) => void;
+    toggleThemeTone: () => void;
+    activeThemeId: string;
+    activeThemeTone: ThemeTone;
+    themes: Array<ThemeDefinition>;
+    resources: Record<string, string>;
+    resourceMap: Record<string, string>;
+    availableThemeIds: Array<string>;
+    activeTheme: ThemeDefinition;
+};
+
 declare type AppWrapperProps = {
     node: ComponentLike;
     previewMode?: boolean;
@@ -1292,16 +1310,16 @@ declare const standaloneExports: {
     } & default_2.RefAttributes<any>>;
     Button: default_2.ForwardRefExoticComponent<{
         id?: string;
-        type?: "button" | "reset" | "submit";
-        variant?: "solid" | "outlined" | "ghost";
-        themeColor?: "primary" | "secondary" | "attention";
-        size?: string;
+        type?: ButtonType;
+        variant?: ButtonVariant;
+        themeColor?: ButtonThemeColor;
+        size?: ComponentSize;
         disabled?: boolean;
         children?: default_2.ReactNode | default_2.ReactNode[];
         icon?: default_2.ReactNode;
-        iconPosition?: "start" | "end";
-        contentPosition?: "center" | "start" | "end";
-        orientation?: "vertical" | "horizontal";
+        iconPosition?: IconPosition;
+        contentPosition?: AlignmentOptions;
+        orientation?: OrientationOptions;
         formId?: string;
         style?: default_2.CSSProperties;
         gap?: string | number;
@@ -1310,10 +1328,10 @@ declare const standaloneExports: {
         contextualLabel?: string;
     } & Pick<default_2.HTMLAttributes<HTMLButtonElement>, "className" | "aria-disabled" | "aria-label" | "aria-controls" | "aria-expanded" | "onClick" | "onFocus" | "onBlur" | "tabIndex" | "onMouseEnter" | "onMouseLeave"> & default_2.RefAttributes<HTMLButtonElement>>;
     Splitter: ({ initialPrimarySize, minPrimarySize, maxPrimarySize, orientation, children, style, swapped, floating, splitterTemplate, resize, }: {
-        children: default_2.ReactNode | default_2.ReactNode[];
+        children: default_2.ReactNode[] | default_2.ReactNode;
         style?: default_2.CSSProperties;
         splitterTemplate?: default_2.ReactNode;
-        orientation?: "vertical" | "horizontal";
+        orientation?: OrientationOptions;
         floating?: boolean;
         resize?: (sizes: [number, number]) => void;
         swapped?: boolean;
@@ -1325,7 +1343,7 @@ declare const standaloneExports: {
     TabItem: default_2.ForwardRefExoticComponent<Tab & default_2.RefAttributes<HTMLDivElement>>;
     Tabs: default_2.ForwardRefExoticComponent<{
         activeTab?: number;
-        orientation?: "vertical" | "horizontal";
+        orientation?: "horizontal" | "vertical";
         tabRenderer?: (item: {
             label: string;
             isActive: boolean;
@@ -1354,13 +1372,14 @@ declare const standaloneExports: {
         fullScreen?: boolean;
         style?: default_2.CSSProperties;
     } & default_2.RefAttributes<HTMLDivElement>>;
+    useThemes: typeof xmluiExports.useThemes;
     builtInThemes: xmluiExports.ThemeDefinition[];
     XmlUiHelper: typeof xmluiExports.XmlUiHelper;
     Text: default_2.ForwardRefExoticComponent<Omit<{
         [variantSpecificProps: string]: any;
         uid?: string;
         children?: default_2.ReactNode;
-        variant?: "var" | "small" | "sub" | "sup" | "abbr" | "caption" | "cite" | "code" | "em" | "strong" | "title" | "inherit" | "mono" | "secondary" | "codefence" | "deleted" | "inserted" | "keyboard" | "marked" | "sample" | "subtitle" | "placeholder" | "paragraph" | "subheading" | "tableheading";
+        variant?: TextVariant;
         maxLines?: number;
         preserveLinebreaks?: boolean;
         ellipses?: boolean;
@@ -1368,7 +1387,7 @@ declare const standaloneExports: {
     }, "ref"> & default_2.RefAttributes<unknown>>;
     TextBox: default_2.ForwardRefExoticComponent<{
         id?: string;
-        type?: "search" | "text" | "password";
+        type?: "text" | "password" | "search";
         value?: string;
         updateState?: UpdateStateFn;
         initialValue?: string;
@@ -1376,7 +1395,7 @@ declare const standaloneExports: {
         maxLength?: number;
         enabled?: boolean;
         placeholder?: string;
-        validationStatus?: "none" | "error" | "warning" | "valid";
+        validationStatus?: ValidationStatus;
         onDidChange?: (newValue: string) => void;
         onFocus?: () => void;
         onBlur?: () => void;
@@ -1786,9 +1805,10 @@ declare enum TokenType {
     From = 97
 }
 
-declare function ToneChangerButton({ lightToDarkIcon, darkToLightIcon, }: {
+declare function ToneChangerButton({ lightToDarkIcon, darkToLightIcon, onClick, }: {
     lightToDarkIcon?: string;
     darkToLightIcon?: string;
+    onClick?: (...args: any[]) => void;
 }): JSX_2.Element;
 
 declare type TrackContainerHeight = "auto" | "fixed";
@@ -1859,6 +1879,8 @@ declare const useSearchContextContent: () => Record<string, SearchEntry>;
 
 declare function useTheme(): ThemeScope;
 
+declare function useThemes(): AppThemes;
+
 declare type ValidationStatus = (typeof validationStatusValues)[number];
 
 declare const validationStatusValues: readonly ["none", "error", "warning", "valid"];
@@ -1970,6 +1992,7 @@ declare namespace xmluiExports {
         xmlUiMarkupToComponent,
         ApiInterceptorProvider,
         Spinner,
+        useThemes,
         builtInThemes,
         XmlUiHelper,
         Text_2 as Text,