xmlui 0.12.16 → 0.12.17

package/dist/lib/{AppRoot-DxPN3IhT.js → AppRoot-CkAW1HHI.js}

@@ -4,12 +4,12 @@ import * as React from "react";
 import React__default, { forwardRef, useState, useEffect, useContext, createContext, useMemo, useInsertionEffect, useLayoutEffect, useRef, memo, useCallback, useId, cloneElement, useImperativeHandle, isValidElement, startTransition, Fragment as Fragment$1, useReducer, useDeferredValue, createElement, useTransition, Children } from "react";
 import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
-import { p as parseLayoutProperty, f as toCssPropertyNames, l as layoutOptionKeys, s as shallowCompare, u as useEvent, g as capitalizeFirstLetter$1, i as isComponentDefChildren, N as NotAComponentDefError, t as toCssVar$1, r as resolveAndCleanProps, n as normalizePath, h as THEME_VAR_PREFIX$2, S as StyleParser, j as generatedId, k as asyncThrottle, m as asOptionalBoolean, q as partitionObject, e as extractParam, v as randomUUID, w as processStatementQueue, x as readCookie, G as GenericBackendError, y as shouldKeep, z as createContextVariableError, a as parseParameterString, d as delay$1, A as toCssPropertyName, B as removeNullProperties, C as asyncWait, c as evalBinding, P as PropsTrasform, D as debounce$1, E as distinct, F as findByField, H as toHashObject, I as pluralize$1, J as humanReadableDateTimeTillNow, K as ensureMainThread, L as evalArrow, M as evalIdentifier, O as evalLiteral, Q as allowedNewConstructors, R as setExprValue, U as evalMemberAccessCore, V as isBannedFunction, W as getRootIdScope, X as evalPreOrPostCore, Y as evalAssignmentCore, Z as evalBinaryCore, _ as evalUnaryCore, $ as evalCalculatedMemberAccessCore, a0 as evalTemplateLiteralCore, a1 as getExprValue, a2 as isPromise, a3 as hoistFunctionDeclarations, a4 as StatementQueue, a5 as mapStatementsToQueueItems, a6 as toStatementItems, T as ThrowStatementError, a7 as reportEngineError, a8 as StatementExecutionError, a9 as releaseLoopScope, aa as createLoopScope, ab as guard, ac as provideTryBody, ad as createTryScope, ae as innermostTryScope, af as innermostLoopScope, ag as provideFinallyErrorBody, ah as provideFinallyBody, ai as innermostBlockScope, aj as provideCatchBody, ak as provideLoopBody, al as mapToItem, am as closing, an as ScriptParseError, ao as createValueExtractor, ap as collectVariableDependencies, aq as pickFromObject, ar as resolveResponsiveWhen, as as getFileExtension, at as formatFileSizeInBytes } from "./extractParam-DlVzewYK.js";
+import { p as parseLayoutProperty, f as toCssPropertyNames, l as layoutOptionKeys, s as shallowCompare, u as useEvent, g as capitalizeFirstLetter$1, i as isComponentDefChildren, N as NotAComponentDefError, t as toCssVar$1, r as resolveAndCleanProps, n as normalizePath, h as THEME_VAR_PREFIX$2, S as StyleParser, j as generatedId, k as asyncThrottle, m as asOptionalBoolean, q as partitionObject, e as extractParam, v as randomUUID, w as processStatementQueue, x as readCookie, G as GenericBackendError, y as shouldKeep, z as createContextVariableError, a as parseParameterString, d as delay$1, A as toCssPropertyName, B as removeNullProperties, C as asyncWait, c as evalBinding, P as PropsTrasform, D as debounce$1, E as distinct, F as findByField, H as toHashObject, I as pluralize$1, J as humanReadableDateTimeTillNow, K as ensureMainThread, L as evalArrow, M as evalIdentifier, O as evalLiteral, Q as allowedNewConstructors, R as setExprValue, U as evalMemberAccessCore, V as isBannedFunction, W as getRootIdScope, X as evalPreOrPostCore, Y as evalAssignmentCore, Z as evalBinaryCore, _ as evalUnaryCore, $ as evalCalculatedMemberAccessCore, a0 as evalTemplateLiteralCore, a1 as getExprValue, a2 as isPromise, a3 as hoistFunctionDeclarations, a4 as StatementQueue, a5 as mapStatementsToQueueItems, a6 as toStatementItems, T as ThrowStatementError, a7 as reportEngineError, a8 as StatementExecutionError, a9 as releaseLoopScope, aa as createLoopScope, ab as guard, ac as provideTryBody, ad as createTryScope, ae as innermostTryScope, af as innermostLoopScope, ag as provideFinallyErrorBody, ah as provideFinallyBody, ai as innermostBlockScope, aj as provideCatchBody, ak as provideLoopBody, al as mapToItem, am as closing, an as ScriptParseError, ao as createValueExtractor, ap as collectVariableDependencies, aq as pickFromObject, ar as resolveResponsiveWhen, as as getFileExtension, at as formatFileSizeInBytes } from "./extractParam-CGckz_NP.js";
 import classnames from "classnames";
 import { isEmpty, noop as noop$2, omitBy, isUndefined, isPlainObject as isPlainObject$1, isNil, unset, set, get, debounce, isEqual, union, uniq, orderBy, isObject, isArray, groupBy, sortBy, omit, throttle, isNumber, cloneDeep, isNaN as isNaN$1, merge, defaultTo, capitalize as capitalize$1, setWith, keyBy } from "lodash-es";
-import { K as MediaBreakpointKeys, W as T_ARROW_EXPRESSION, au as isArrowExpressionObject$1, ac as T_ARROW_EXPRESSION_STATEMENT, av as T_VAR_DECLARATION, ax as T_REACTIVE_VAR_DECLARATION, ai as T_NEW_EXPRESSION, aj as T_AWAIT_EXPRESSION, am as T_POSTFIX_OP_EXPRESSION, R as T_PREFIX_OP_EXPRESSION, ag as T_ASSIGNMENT_EXPRESSION, ak as T_SPREAD_EXPRESSION, aq as T_OBJECT_LITERAL, ar as T_ARRAY_LITERAL, at as T_TEMPLATE_LITERAL_EXPRESSION, ah as T_LITERAL, al as T_FUNCTION_INVOCATION_EXPRESSION, an as T_CONDITIONAL_EXPRESSION, as as T_SEQUENCE_EXPRESSION, ap as T_UNARY_EXPRESSION, ao as T_BINARY_EXPRESSION, L as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, O as T_MEMBER_ACCESS_EXPRESSION, Q as T_IDENTIFIER, P as Parser, aw as T_DESTRUCTURE, ad as T_BLOCK_STATEMENT, a3 as T_EXPRESSION_STATEMENT, a8 as T_RETURN_STATEMENT, Y as T_EMPTY_STATEMENT, Z as T_SWITCH_STATEMENT, _ as T_TRY_STATEMENT, $ as T_THROW_STATEMENT, a0 as T_FOR_OF_STATEMENT, a1 as T_FOR_IN_STATEMENT, a2 as T_FOR_STATEMENT, X as createXmlUiTreeNodeId, a4 as T_BREAK_STATEMENT, a5 as T_CONTINUE_STATEMENT, a6 as T_DO_WHILE_STATEMENT, a7 as T_WHILE_STATEMENT, a9 as T_IF_STATEMENT, aa as T_CONST_STATEMENT, ab as T_LET_STATEMENT, ae as T_VAR_STATEMENT, V as T_FUNCTION_DECLARATION, af as T_ASYNC_FUNCTION_DECLARATION, ay as isParsedCodeDeclaration } from "./parser-kl5gouy9.js";
+import { K as MediaBreakpointKeys, W as T_ARROW_EXPRESSION, au as isArrowExpressionObject$1, ac as T_ARROW_EXPRESSION_STATEMENT, av as T_VAR_DECLARATION, ax as T_REACTIVE_VAR_DECLARATION, ai as T_NEW_EXPRESSION, aj as T_AWAIT_EXPRESSION, am as T_POSTFIX_OP_EXPRESSION, R as T_PREFIX_OP_EXPRESSION, ag as T_ASSIGNMENT_EXPRESSION, ak as T_SPREAD_EXPRESSION, aq as T_OBJECT_LITERAL, ar as T_ARRAY_LITERAL, at as T_TEMPLATE_LITERAL_EXPRESSION, ah as T_LITERAL, al as T_FUNCTION_INVOCATION_EXPRESSION, an as T_CONDITIONAL_EXPRESSION, as as T_SEQUENCE_EXPRESSION, ap as T_UNARY_EXPRESSION, ao as T_BINARY_EXPRESSION, L as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, O as T_MEMBER_ACCESS_EXPRESSION, Q as T_IDENTIFIER, P as Parser, aw as T_DESTRUCTURE, ad as T_BLOCK_STATEMENT, a3 as T_EXPRESSION_STATEMENT, a8 as T_RETURN_STATEMENT, Y as T_EMPTY_STATEMENT, Z as T_SWITCH_STATEMENT, _ as T_TRY_STATEMENT, $ as T_THROW_STATEMENT, a0 as T_FOR_OF_STATEMENT, a1 as T_FOR_IN_STATEMENT, a2 as T_FOR_STATEMENT, X as createXmlUiTreeNodeId, a4 as T_BREAK_STATEMENT, a5 as T_CONTINUE_STATEMENT, a6 as T_DO_WHILE_STATEMENT, a7 as T_WHILE_STATEMENT, a9 as T_IF_STATEMENT, aa as T_CONST_STATEMENT, ab as T_LET_STATEMENT, ae as T_VAR_STATEMENT, V as T_FUNCTION_DECLARATION, af as T_ASYNC_FUNCTION_DECLARATION, ay as isParsedCodeDeclaration } from "./parser-DiBsM1dk.js";
 import Color from "color";
-import { g as PART_LABELED_ITEM, h as PART_LABEL, i as PART_ICON, f as PART_INPUT, j as PART_CONTENT$2, k as PART_HEADER, x as xmlUiMarkupToComponent, a as errReportComponent, l as PART_CONCISE_VALIDATION_FEEDBACK$5, m as PART_AVATAR, n as PART_TITLE$1, o as PART_SUBTITLE, P as PART_START_ADORNMENT, d as PART_END_ADORNMENT, p as PART_CLEAR_BUTTON$1, q as PART_YEAR, r as PART_MONTH, s as PART_DAY } from "./xmlui-parser-D_XJdENb.js";
+import { g as PART_LABELED_ITEM, h as PART_LABEL, i as PART_ICON, f as PART_INPUT, j as PART_CONTENT$2, k as PART_HEADER, x as xmlUiMarkupToComponent, a as errReportComponent, l as PART_CONCISE_VALIDATION_FEEDBACK$5, m as PART_AVATAR, n as PART_TITLE$1, o as PART_SUBTITLE, P as PART_START_ADORNMENT, d as PART_END_ADORNMENT, p as PART_CLEAR_BUTTON$1, q as PART_YEAR, r as PART_MONTH, s as PART_DAY } from "./xmlui-parser-CN1VIdSi.js";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import { useContextSelector, createContext as createContext$1 } from "use-context-selector";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
@@ -139,7 +139,7 @@ function isInsideLayout(context, ...types) {
 }
 function stripDirectChildProps(context) {
   if (!context) return void 0;
-  const { ignoreLayoutProps, wrapChild, ...rest } = context;
+  const { ignoreLayoutProps, wrapChild, extraClassName, ...rest } = context;
   return rest;
 }
 const keyPrefix$1 = "xmlui";
@@ -301,7 +301,15 @@ const labelPositionMd = [
     description: "The right side of the input (left-to-right) or the left side of the input (right-to-left)"
   },
   { value: "top", description: "The top of the input" },
-  { value: "bottom", description: "The bottom of the input" }
+  { value: "bottom", description: "The bottom of the input" },
+  {
+    value: "before",
+    description: "The label is placed directly before the input with fit-content width. Similar to 'start' but the label does not stretch."
+  },
+  {
+    value: "after",
+    description: "The label is placed directly after the input with fit-content width. Similar to 'end' but the label does not stretch."
+  }
 ];
 const triggerPositionValues = ["start", "end"];
 const triggerPositionNames = [...triggerPositionValues];
@@ -515,25 +523,27 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 const themeVars$12 = `'{"textColor-label-formItem": "var(--xmlui-textColor-label-formItem)", "fontFamily-label-formItem": "var(--xmlui-fontFamily-label-formItem)", "fontSize-label-formItem": "var(--xmlui-fontSize-label-formItem)", "fontWeight-label-formItem": "var(--xmlui-fontWeight-label-formItem)", "fontStyle-label-formItem": "var(--xmlui-fontStyle-label-formItem)", "textTransform-label-formItem": "var(--xmlui-textTransform-label-formItem)", "textColor-label-formItem--required": "var(--xmlui-textColor-label-formItem--required)", "fontSize-label-formItem--required": "var(--xmlui-fontSize-label-formItem--required)", "fontWeight-label-formItem--required": "var(--xmlui-fontWeight-label-formItem--required)", "fontStyle-label-formItem--required": "var(--xmlui-fontStyle-label-formItem--required)", "textTransform-label-formItem--required": "var(--xmlui-textTransform-label-formItem--required)", "textColor-requiredMark-formItem": "var(--xmlui-textColor-requiredMark-formItem)", "textColor-optionalTag-formItem": "var(--xmlui-textColor-optionalTag-formItem)"}'`;
-const container$7 = "_container_2lidb_14";
-const top$2 = "_top_2lidb_21";
-const end = "_end_2lidb_26";
-const bottom$2 = "_bottom_2lidb_32";
-const start = "_start_2lidb_37";
-const shrinkToLabel = "_shrinkToLabel_2lidb_43";
-const inputLabel = "_inputLabel_2lidb_46";
-const labelBreak = "_labelBreak_2lidb_59";
-const required = "_required_2lidb_64";
-const disabled$d = "_disabled_2lidb_71";
-const requiredMark = "_requiredMark_2lidb_75";
-const optionalTag = "_optionalTag_2lidb_79";
-const itemWithLabel = "_itemWithLabel_2lidb_83";
-const wrapper$g = "_wrapper_2lidb_88";
-const validationResultWrapper = "_validationResultWrapper_2lidb_96";
-const validationAnchor = "_validationAnchor_2lidb_99";
-const validationMessageAbsolute = "_validationMessageAbsolute_2lidb_102";
-const helperTextContainer = "_helperTextContainer_2lidb_109";
-const labelWrapper$1 = "_labelWrapper_2lidb_112";
+const container$7 = "_container_1jzhh_14";
+const top$2 = "_top_1jzhh_21";
+const end = "_end_1jzhh_26";
+const bottom$2 = "_bottom_1jzhh_32";
+const start = "_start_1jzhh_37";
+const before = "_before_1jzhh_43";
+const after = "_after_1jzhh_51";
+const shrinkToLabel = "_shrinkToLabel_1jzhh_59";
+const inputLabel = "_inputLabel_1jzhh_62";
+const labelBreak = "_labelBreak_1jzhh_75";
+const required = "_required_1jzhh_80";
+const disabled$d = "_disabled_1jzhh_87";
+const requiredMark = "_requiredMark_1jzhh_91";
+const optionalTag = "_optionalTag_1jzhh_95";
+const itemWithLabel = "_itemWithLabel_1jzhh_99";
+const wrapper$g = "_wrapper_1jzhh_105";
+const validationResultWrapper = "_validationResultWrapper_1jzhh_113";
+const validationAnchor = "_validationAnchor_1jzhh_116";
+const validationMessageAbsolute = "_validationMessageAbsolute_1jzhh_119";
+const helperTextContainer = "_helperTextContainer_1jzhh_126";
+const labelWrapper$1 = "_labelWrapper_1jzhh_129";
 const styles$1k = {
   themeVars: themeVars$12,
   container: container$7,
@@ -541,6 +551,8 @@ const styles$1k = {
   end,
   bottom: bottom$2,
   start,
+  before,
+  after,
   shrinkToLabel,
   inputLabel,
   labelBreak,
@@ -1799,17 +1811,17 @@ function simpleStringify(value) {
 function prefixLines(text2, prefix) {
   return text2.split("\n").map((line) => `${prefix}${line}`).join("\n");
 }
-function formatDiff(path, before, after) {
-  const beforeJson = simpleStringify(before);
-  const afterJson = simpleStringify(after);
+function formatDiff(path, before2, after2) {
+  const beforeJson = simpleStringify(before2);
+  const afterJson = simpleStringify(after2);
   const diffPretty = `path: ${path}
 ${prefixLines(beforeJson, "- ")}
 ${prefixLines(afterJson, "+ ")}`;
   return {
     path,
     type: "update",
-    before,
-    after,
+    before: before2,
+    after: after2,
     beforeJson,
     afterJson,
     diffText: `path: ${path}
@@ -2176,16 +2188,20 @@ const MemoizedItem = memo(
     node,
     renderChild: renderChild2,
     layoutContext,
-    contextVars = EMPTY_OBJECT
+    contextVars = EMPTY_OBJECT,
+    vars: vars2,
+    functions
   }) => {
     const shallowMemoedContextVars = useShallowCompareMemoize(contextVars);
     const nodeWithContextVars = useMemo(
       () => ({
         type: "Container",
         contextVars: shallowMemoedContextVars,
+        ...vars2 ? { vars: vars2 } : void 0,
+        ...functions ? { functions } : void 0,
         children: Array.isArray(node) ? node : [node]
       }),
-      [node, shallowMemoedContextVars]
+      [node, shallowMemoedContextVars, vars2, functions]
     );
     return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithContextVars, layoutContext) });
   }
@@ -3267,6 +3283,30 @@ const RadioGroup = forwardRef(function RadioGroup2({
     },
     [updateValue, readOnly2]
   );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (readOnly2 || !enabled2) return;
+      const isVerticalKey = e.key === "ArrowDown" || e.key === "ArrowUp";
+      const isHorizontalKey = e.key === "ArrowRight" || e.key === "ArrowLeft";
+      if (!isVerticalKey && !isHorizontalKey) return;
+      if (orientation === "horizontal" && isVerticalKey) return;
+      if (orientation === "vertical" && isHorizontalKey) return;
+      const isNext = e.key === "ArrowDown" || e.key === "ArrowRight";
+      const radios = Array.from(
+        radioGroupRef.current?.querySelectorAll('[role="radio"]:not(:disabled)') ?? []
+      );
+      if (radios.length === 0) return;
+      const focused22 = e.target;
+      const currentIndex = radios.indexOf(focused22);
+      if (currentIndex === -1) return;
+      const nextIndex = isNext ? (currentIndex + 1) % radios.length : (currentIndex - 1 + radios.length) % radios.length;
+      const nextValue = radios[nextIndex].getAttribute("value");
+      if (nextValue != null) {
+        onInputChange(nextValue);
+      }
+    },
+    [readOnly2, enabled2, orientation, onInputChange]
+  );
   const handleOnFocus = useCallback(
     (ev) => {
       setFocused(true);
@@ -3306,6 +3346,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
       id,
       onBlur: handleOnBlur,
       onFocus: handleOnFocus,
+      onKeyDown: handleKeyDown,
       onValueChange: onInputChange,
       value,
       disabled: !enabled2,
@@ -3595,7 +3636,8 @@ const defaultProps$1e = {
   shrinkToLabel: false,
   cloneStyle: false,
   requireLabelMode: "markRequired",
-  isInputTemplateUsed: false
+  isInputTemplateUsed: false,
+  compactInlineLabel: false
 };
 const numberRegex = /^[0-9]+$/;
 const ItemWithLabel = forwardRef(function ItemWithLabel2({
@@ -3604,7 +3646,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
   style: style2 = {},
   className,
   label: label2,
-  labelBreak: labelBreak2 = defaultProps$1e.labelBreak,
+  labelBreak: labelBreak2,
   labelWidth,
   enabled: enabled2 = defaultProps$1e.enabled,
   required: required2 = defaultProps$1e.required,
@@ -3622,6 +3664,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
   testId,
   cloneStyle = defaultProps$1e.cloneStyle,
   requireLabelMode = defaultProps$1e.requireLabelMode,
+  compactInlineLabel = defaultProps$1e.compactInlineLabel,
   ...rest
 }, ref) {
   const generatedId2 = useId();
@@ -3630,6 +3673,14 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
     (value) => value?.itemLabelPosition
   );
   const resolvedLabelPosition = labelPosition ?? formItemLabelPosition ?? "top";
+  const formItemLabelWidth = useFormContextPart(
+    (value) => value?.itemLabelWidth
+  );
+  const resolvedLabelWidthProp = labelWidth ?? formItemLabelWidth;
+  const formItemLabelBreak = useFormContextPart(
+    (value) => value?.itemLabelBreak
+  );
+  const resolvedLabelBreak = labelBreak2 ?? formItemLabelBreak ?? defaultProps$1e.labelBreak;
   const isInHorizontalStack = layoutContext?.orientation === "horizontal";
   const [inputElement, setInputElement] = useState(null);
   const [inputHeight, setInputHeight] = useState(void 0);
@@ -3647,7 +3698,8 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
       return () => observer.disconnect();
     }
   }, [inputElement]);
-  const labelWrapperHeight = resolvedLabelPosition === "start" || resolvedLabelPosition === "end" ? inputHeight : "auto";
+  const labelWrapperHeight = resolvedLabelPosition === "start" || resolvedLabelPosition === "end" || resolvedLabelPosition === "before" || resolvedLabelPosition === "after" ? inputHeight : "auto";
+  const resolvedLabelWidth = resolvedLabelWidthProp !== void 0 ? numberRegex.test(resolvedLabelWidthProp) ? `${resolvedLabelWidthProp}px` : resolvedLabelWidthProp : compactInlineLabel && (resolvedLabelPosition === "before" || resolvedLabelPosition === "after") ? "fit-content" : void 0;
   const isRadioGroup = React__default.isValidElement(children) && children.type === ThemedRadioGroup;
   if (label2 === void 0 && !validationResult) {
     return /* @__PURE__ */ jsx(Part, { partId: PART_LABELED_ITEM, children: /* @__PURE__ */ jsx(Slot, { ...rest, style: style2, className, id: inputId, ref, children }) });
@@ -3668,8 +3720,10 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
             className: classnames(styles$1k.container, {
               [styles$1k.top]: resolvedLabelPosition === "top",
               [styles$1k.bottom]: resolvedLabelPosition === "bottom",
-              [styles$1k.start]: resolvedLabelPosition === "start",
-              [styles$1k.end]: resolvedLabelPosition === "end",
+              [styles$1k.start]: resolvedLabelPosition === "start" || !compactInlineLabel && resolvedLabelPosition === "before",
+              [styles$1k.end]: resolvedLabelPosition === "end" || !compactInlineLabel && resolvedLabelPosition === "after",
+              [styles$1k.before]: compactInlineLabel && resolvedLabelPosition === "before",
+              [styles$1k.after]: compactInlineLabel && resolvedLabelPosition === "after",
               [styles$1k.shrinkToLabel]: shrinkToLabel2
             }),
             dir: rest?.direction,
@@ -3693,13 +3747,13 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
                       }),
                       style: {
                         ...labelStyle,
-                        width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
-                        flexShrink: labelWidth !== void 0 ? 0 : void 0
+                        width: resolvedLabelWidth,
+                        flexShrink: resolvedLabelWidthProp !== void 0 ? 0 : void 0
                       },
                       className: classnames(styles$1k.inputLabel, {
                         [styles$1k.required]: required2,
                         [styles$1k.disabled]: !enabled2,
-                        [styles$1k.labelBreak]: labelBreak2
+                        [styles$1k.labelBreak]: resolvedLabelBreak
                       }),
                       children: [
                         label2,
@@ -3741,8 +3795,10 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
       className: classnames(styles$1k.container, {
         [styles$1k.top]: resolvedLabelPosition === "top",
         [styles$1k.bottom]: resolvedLabelPosition === "bottom",
-        [styles$1k.start]: resolvedLabelPosition === "start",
-        [styles$1k.end]: resolvedLabelPosition === "end",
+        [styles$1k.start]: resolvedLabelPosition === "start" || !compactInlineLabel && resolvedLabelPosition === "before",
+        [styles$1k.end]: resolvedLabelPosition === "end" || !compactInlineLabel && resolvedLabelPosition === "after",
+        [styles$1k.before]: compactInlineLabel && resolvedLabelPosition === "before",
+        [styles$1k.after]: compactInlineLabel && resolvedLabelPosition === "after",
         [styles$1k.shrinkToLabel]: shrinkToLabel2
       }),
       dir: rest?.direction,
@@ -3761,13 +3817,13 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
                 onClick: onLabelClick || (() => document.getElementById(inputId)?.focus()),
                 style: {
                   ...labelStyle,
-                  width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
-                  flexShrink: labelWidth !== void 0 ? 0 : void 0
+                  width: resolvedLabelWidth,
+                  flexShrink: resolvedLabelWidthProp !== void 0 ? 0 : void 0
                 },
                 className: classnames(styles$1k.inputLabel, {
                   [styles$1k.required]: required2,
                   [styles$1k.disabled]: !enabled2,
-                  [styles$1k.labelBreak]: labelBreak2
+                  [styles$1k.labelBreak]: resolvedLabelBreak
                 }),
                 children: [
                   label2,
@@ -9259,26 +9315,24 @@ const localLinkComponentRenderer = wrapComponent(
   }
 );
 const themeVars$O = `'{"Input:borderRadius-Checkbox": "var(--xmlui-borderRadius-Checkbox)", "Input:borderColor-Checkbox": "var(--xmlui-borderColor-Checkbox)", "Input:backgroundColor-Checkbox": "var(--xmlui-backgroundColor-Checkbox)", "Input:outlineWidth-Checkbox--focus": "var(--xmlui-outlineWidth-Checkbox--focus)", "Input:outlineColor-Checkbox--focus": "var(--xmlui-outlineColor-Checkbox--focus)", "Input:outlineStyle-Checkbox--focus": "var(--xmlui-outlineStyle-Checkbox--focus)", "Input:outlineOffset-Checkbox--focus": "var(--xmlui-outlineOffset-Checkbox--focus)", "Input:borderRadius-Checkbox--error": "var(--xmlui-borderRadius-Checkbox--error)", "Input:borderColor-Checkbox--error": "var(--xmlui-borderColor-Checkbox--error)", "Input:backgroundColor-Checkbox--error": "var(--xmlui-backgroundColor-Checkbox--error)", "Input:outlineWidth-Checkbox--error--focus": "var(--xmlui-outlineWidth-Checkbox--error--focus)", "Input:outlineColor-Checkbox--error--focus": "var(--xmlui-outlineColor-Checkbox--error--focus)", "Input:outlineStyle-Checkbox--error--focus": "var(--xmlui-outlineStyle-Checkbox--error--focus)", "Input:outlineOffset-Checkbox--error--focus": "var(--xmlui-outlineOffset-Checkbox--error--focus)", "Input:borderRadius-Checkbox--warning": "var(--xmlui-borderRadius-Checkbox--warning)", "Input:borderColor-Checkbox--warning": "var(--xmlui-borderColor-Checkbox--warning)", "Input:backgroundColor-Checkbox--warning": "var(--xmlui-backgroundColor-Checkbox--warning)", "Input:outlineWidth-Checkbox--warning--focus": "var(--xmlui-outlineWidth-Checkbox--warning--focus)", "Input:outlineColor-Checkbox--warning--focus": "var(--xmlui-outlineColor-Checkbox--warning--focus)", "Input:outlineStyle-Checkbox--warning--focus": "var(--xmlui-outlineStyle-Checkbox--warning--focus)", "Input:outlineOffset-Checkbox--warning--focus": "var(--xmlui-outlineOffset-Checkbox--warning--focus)", "Input:borderRadius-Checkbox--success": "var(--xmlui-borderRadius-Checkbox--success)", "Input:borderColor-Checkbox--success": "var(--xmlui-borderColor-Checkbox--success)", "Input:backgroundColor-Checkbox--success": "var(--xmlui-backgroundColor-Checkbox--success)", "Input:outlineWidth-Checkbox--success--focus": "var(--xmlui-outlineWidth-Checkbox--success--focus)", "Input:outlineColor-Checkbox--success--focus": "var(--xmlui-outlineColor-Checkbox--success--focus)", "Input:outlineStyle-Checkbox--success--focus": "var(--xmlui-outlineStyle-Checkbox--success--focus)", "Input:outlineOffset-Checkbox--success--focus": "var(--xmlui-outlineOffset-Checkbox--success--focus)", "Input:borderColor-Checkbox--hover": "var(--xmlui-borderColor-Checkbox--hover)", "Input:backgroundColor-Checkbox--disabled": "var(--xmlui-backgroundColor-Checkbox--disabled)", "Input:borderColor-Checkbox--disabled": "var(--xmlui-borderColor-Checkbox--disabled)", "Input:borderColor-checked-Checkbox": "var(--xmlui-borderColor-checked-Checkbox)", "Input:backgroundColor-checked-Checkbox": "var(--xmlui-backgroundColor-checked-Checkbox)", "Input:borderColor-checked-Checkbox--error": "var(--xmlui-borderColor-checked-Checkbox--error)", "Input:backgroundColor-checked-Checkbox--error": "var(--xmlui-backgroundColor-checked-Checkbox--error)", "Input:borderColor-checked-Checkbox--warning": "var(--xmlui-borderColor-checked-Checkbox--warning)", "Input:backgroundColor-checked-Checkbox--warning": "var(--xmlui-backgroundColor-checked-Checkbox--warning)", "Input:borderColor-checked-Checkbox--success": "var(--xmlui-borderColor-checked-Checkbox--success)", "Input:backgroundColor-checked-Checkbox--success": "var(--xmlui-backgroundColor-checked-Checkbox--success)", "backgroundColor-indicator-Checkbox": "var(--xmlui-backgroundColor-indicator-Checkbox)", "Input:borderColor-Switch--hover": "var(--xmlui-borderColor-Switch--hover)", "Input:backgroundColor-Switch--disabled": "var(--xmlui-backgroundColor-Switch--disabled)", "Input:borderColor-Switch--disabled": "var(--xmlui-borderColor-Switch--disabled)", "Input:borderColor-checked-Switch": "var(--xmlui-borderColor-checked-Switch)", "Input:backgroundColor-checked-Switch": "var(--xmlui-backgroundColor-checked-Switch)", "Input:borderColor-checked-Switch--error": "var(--xmlui-borderColor-checked-Switch--error)", "Input:backgroundColor-checked-Switch--error": "var(--xmlui-backgroundColor-checked-Switch--error)", "Input:borderColor-checked-Switch--warning": "var(--xmlui-borderColor-checked-Switch--warning)", "Input:backgroundColor-checked-Switch--warning": "var(--xmlui-backgroundColor-checked-Switch--warning)", "Input:borderColor-checked-Switch--success": "var(--xmlui-borderColor-checked-Switch--success)", "Input:backgroundColor-checked-Switch--success": "var(--xmlui-backgroundColor-checked-Switch--success)", "Input:backgroundColor-Switch": "var(--xmlui-backgroundColor-Switch)", "Input:borderColor-Switch": "var(--xmlui-borderColor-Switch)", "backgroundColor-indicator-Switch": "var(--xmlui-backgroundColor-indicator-Switch)", "backgroundColor-checked-Switch": "var(--xmlui-backgroundColor-checked-Switch)", "backgroundColor-indicator-checked-Switch": "var(--xmlui-backgroundColor-indicator-checked-Switch)", "backgroundColor-Switch-indicator--disabled": "var(--xmlui-backgroundColor-Switch-indicator--disabled)", "Input:outlineWidth-Switch--focus": "var(--xmlui-outlineWidth-Switch--focus)", "Input:outlineColor-Switch--focus": "var(--xmlui-outlineColor-Switch--focus)", "Input:outlineStyle-Switch--focus": "var(--xmlui-outlineStyle-Switch--focus)", "Input:outlineOffset-Switch--focus": "var(--xmlui-outlineOffset-Switch--focus)", "Input:borderColor-Switch--error": "var(--xmlui-borderColor-Switch--error)", "Input:borderColor-Switch--warning": "var(--xmlui-borderColor-Switch--warning)", "Input:borderColor-Switch--success": "var(--xmlui-borderColor-Switch--success)"}'`;
-const resetAppearance = "_resetAppearance_xjsdj_14";
-const label = "_label_xjsdj_21";
-const inputContainer = "_inputContainer_xjsdj_24";
-const checkbox = "_checkbox_xjsdj_31";
-const forceHover = "_forceHover_xjsdj_62";
-const error$d = "_error_xjsdj_65";
-const warning$c = "_warning_xjsdj_76";
-const valid$d = "_valid_xjsdj_87";
-const noTransition = "_noTransition_xjsdj_177";
+const resetAppearance = "_resetAppearance_xdymb_14";
+const label = "_label_xdymb_21";
+const inputContainer = "_inputContainer_xdymb_24";
+const checkbox = "_checkbox_xdymb_31";
+const error$d = "_error_xdymb_62";
+const warning$c = "_warning_xdymb_73";
+const valid$d = "_valid_xdymb_84";
+const noTransition = "_noTransition_xdymb_174";
 const styles$14 = {
   themeVars: themeVars$O,
   resetAppearance,
   label,
   inputContainer,
   checkbox,
-  forceHover,
   error: error$d,
   warning: warning$c,
   valid: valid$d,
-  "switch": "_switch_xjsdj_146",
+  "switch": "_switch_xdymb_143",
   noTransition
 };
 const defaultProps$15 = {
@@ -9309,7 +9363,6 @@ const Toggle = forwardRef(function Toggle2({
   autoFocus,
   registerComponentApi,
   inputRenderer,
-  forceHover: forceHover2 = false,
   tabIndex,
   "aria-label": ariaLabel,
   ...rest
@@ -9436,7 +9489,6 @@ const Toggle = forwardRef(function Toggle2({
             [styles$14.error]: validationStatus === "error",
             [styles$14.warning]: validationStatus === "warning",
             [styles$14.valid]: validationStatus === "valid",
-            [styles$14.forceHover]: forceHover2,
             [styles$14.noTransition]: suppressTransition
           }
         )
@@ -9464,7 +9516,6 @@ const Toggle = forwardRef(function Toggle2({
     variant,
     indeterminate,
     autoFocus,
-    forceHover2,
     suppressTransition
   ]);
   return inputRenderer ? /* @__PURE__ */ jsxs("label", { className: classnames(styles$14.label, classes?.[COMPONENT_PART_KEY]), children: [
@@ -10685,7 +10736,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-qSARW6AY.js");
+      const { initMock } = await import("./initMock-DvFj3cun.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -10702,7 +10753,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-CDO-h2U4.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-qSARW6AY.js")
+              import("./initMock-DvFj3cun.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -10739,7 +10790,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-CDO-h2U4.js"),
-            import("./initMock-qSARW6AY.js")
+            import("./initMock-DvFj3cun.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -13458,27 +13509,28 @@ const navLinkStyles = {
   iconAlignEnd
 };
 const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "width-navPanel-collapsed-App": "var(--xmlui-width-navPanel-collapsed-App)", "backgroundColor-navPanel-App": "var(--xmlui-backgroundColor-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "borderRight-navPanelWrapper-App": "var(--xmlui-borderRight-navPanelWrapper-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-content-App--withToc": "var(--xmlui-maxWidth-content-App--withToc)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
-const appContainer = "_appContainer_x4udf_14";
-const vertical$4 = "_vertical_x4udf_25";
-const mainContentArea = "_mainContentArea_x4udf_28";
-const noScrollbarGutters = "_noScrollbarGutters_x4udf_31";
-const scrollWholePage = "_scrollWholePage_x4udf_34";
-const navPanelWrapper = "_navPanelWrapper_x4udf_37";
-const navPanelWrapperCollapsed = "_navPanelWrapperCollapsed_x4udf_42";
-const footerWrapper = "_footerWrapper_x4udf_47";
-const horizontal$4 = "_horizontal_x4udf_50";
-const sticky = "_sticky_x4udf_56";
-const headerWrapper$1 = "_headerWrapper_x4udf_65";
-const desktop = "_desktop_x4udf_81";
-const pagesContainer = "_pagesContainer_x4udf_112";
-const pageContentContainer = "_pageContentContainer_x4udf_123";
-const verticalFullHeader = "_verticalFullHeader_x4udf_150";
-const noFooter = "_noFooter_x4udf_156";
-const nonSticky = "_nonSticky_x4udf_209";
-const mainContentRow = "_mainContentRow_x4udf_240";
-const withToc = "_withToc_x4udf_369";
-const navPanelCollapsed = "_navPanelCollapsed_x4udf_372";
-const withDefaultContentPadding = "_withDefaultContentPadding_x4udf_378";
+const appContainer = "_appContainer_1rig9_14";
+const vertical$4 = "_vertical_1rig9_25";
+const mainContentArea = "_mainContentArea_1rig9_28";
+const noScrollbarGutters = "_noScrollbarGutters_1rig9_31";
+const scrollWholePage = "_scrollWholePage_1rig9_34";
+const navPanelWrapper = "_navPanelWrapper_1rig9_37";
+const navPanelWrapperCollapsed = "_navPanelWrapperCollapsed_1rig9_42";
+const footerWrapper = "_footerWrapper_1rig9_47";
+const horizontal$4 = "_horizontal_1rig9_50";
+const sticky = "_sticky_1rig9_56";
+const headerWrapper$1 = "_headerWrapper_1rig9_65";
+const desktop = "_desktop_1rig9_81";
+const pagesContainer = "_pagesContainer_1rig9_112";
+const pageContentContainer = "_pageContentContainer_1rig9_123";
+const verticalFullHeader = "_verticalFullHeader_1rig9_150";
+const noFooter = "_noFooter_1rig9_156";
+const nonSticky = "_nonSticky_1rig9_209";
+const mainContentRow = "_mainContentRow_1rig9_240";
+const fitContent = "_fitContent_1rig9_258";
+const withToc = "_withToc_1rig9_385";
+const navPanelCollapsed = "_navPanelCollapsed_1rig9_388";
+const withDefaultContentPadding = "_withDefaultContentPadding_1rig9_394";
 const styles$X = {
   themeVars: themeVars$I,
   appContainer,
@@ -13499,6 +13551,7 @@ const styles$X = {
   noFooter,
   nonSticky,
   mainContentRow,
+  fitContent,
   withToc,
   navPanelCollapsed,
   withDefaultContentPadding
@@ -14302,6 +14355,7 @@ const AppPagesSlot = createSlot("AppPagesSlot", styles$X.pagesContainer);
 const defaultProps$Y = {
   scrollWholePage: true,
   noScrollbarGutters: false,
+  fitContent: false,
   defaultTone: void 0,
   defaultTheme: void 0,
   autoDetectTone: false,
@@ -14332,6 +14386,7 @@ function App({
   loggedInUser,
   scrollWholePage: scrollWholePage2 = defaultProps$Y.scrollWholePage,
   noScrollbarGutters: noScrollbarGutters2 = defaultProps$Y.noScrollbarGutters,
+  fitContent: fitContent2 = defaultProps$Y.fitContent,
   onReady = defaultProps$Y.onReady,
   onMessageReceived = defaultProps$Y.onMessageReceived,
   onKeyDown = defaultProps$Y.onKeyDown,
@@ -14564,7 +14619,8 @@ function App({
     classes?.[COMPONENT_PART_KEY],
     styles$X.appContainer,
     {
-      [styles$X.scrollWholePage]: scrollWholePage2,
+      [styles$X.scrollWholePage]: scrollWholePage2 && !fitContent2,
+      [styles$X.fitContent]: fitContent2,
       [styles$X.noScrollbarGutters]: noScrollbarGutters2,
       [styles$X.noFooter]: !footerSticky,
       "media-large": mediaSize.largeScreen,
@@ -14631,6 +14687,7 @@ function App({
       }),
       style: styleWithHelpers,
       ref: shouldContainerScroll ? pageScrollRef : void 0,
+      "data-xmlui-app-fit-content": fitContent2 ? "true" : void 0,
       ...rest,
       children: config.useVerticalFullHeaderStructure ? /* @__PURE__ */ jsxs(Fragment, { children: [
         renderHeaderSlot(),
@@ -16155,17 +16212,15 @@ function hierarchyToNative(hierarchyData, fieldConfig) {
     treeItemsById
   };
 }
-const TreeRow = memo(({ index, data }) => {
+const TreeRow = memo(({ index, data, isSelected, isFocused }) => {
   const {
     nodes,
     toggleNode,
-    selectedId,
     itemRenderer,
     itemClickExpands,
     onItemClick,
     onSelection,
     lookupEventHandler,
-    focusedIndex,
     treeContainerRef,
     iconCollapsed,
     iconExpanded,
@@ -16175,8 +16230,6 @@ const TreeRow = memo(({ index, data }) => {
     spinnerDelay
   } = data;
   const treeItem = nodes[index];
-  const isFocused = focusedIndex === index && focusedIndex >= 0;
-  const isSelected = String(selectedId) === String(treeItem.key);
   const nodeWithState = treeItem;
   const isLoading = nodeWithState.loadingState === "loading";
   const [showSpinner, setShowSpinner] = useState(false);
@@ -16331,6 +16384,16 @@ const TreeRow = memo(({ index, data }) => {
     }
   ) });
 });
+const TreeMemoizedRow = memo(
+  ({ index, data, isSelected, isFocused }) => /* @__PURE__ */ jsx(TreeRow, { index, data, isSelected, isFocused }),
+  (prev, next) => {
+    if (prev.data !== next.data) return false;
+    if (prev.index !== next.index) return false;
+    if (prev.isSelected !== next.isSelected) return false;
+    if (prev.isFocused !== next.isFocused) return false;
+    return true;
+  }
+);
 const emptyTreeData = {
   treeData: [],
   treeItemsById: {}
@@ -17146,13 +17209,11 @@ const TreeComponent = memo((props) => {
     return {
       nodes: flatTreeData,
       toggleNode,
-      selectedId: effectiveSelectedId,
       itemRenderer,
       itemClickExpands,
       onItemClick,
       onSelection: (node) => setSelectedNodeById(node.key),
       lookupEventHandler,
-      focusedIndex,
       onKeyDown: handleKeyDown,
       treeContainerRef,
       iconCollapsed,
@@ -17165,13 +17226,11 @@ const TreeComponent = memo((props) => {
   }, [
     flatTreeData,
     toggleNode,
-    effectiveSelectedId,
     itemRenderer,
     itemClickExpands,
     onItemClick,
     setSelectedNodeById,
     lookupEventHandler,
-    focusedIndex,
     handleKeyDown,
     iconCollapsed,
     iconExpanded,
@@ -17989,7 +18048,9 @@ const TreeComponent = memo((props) => {
       children: /* @__PURE__ */ jsx(Virtualizer, { ref: listRef, itemSize: measuredItemSize || itemHeight, children: flatTreeData.map((node, index) => {
         const isFirstItem = index === 0;
         const shouldMeasure = isFirstItem && fixedItemSize;
-        return shouldMeasure ? /* @__PURE__ */ jsx("div", { ref: firstItemRef, children: /* @__PURE__ */ jsx(TreeRow, { index, data: itemData }) }, node.key) : /* @__PURE__ */ jsx(TreeRow, { index, data: itemData }, node.key);
+        const isSelected = String(effectiveSelectedId) === String(node.key);
+        const isFocused = focusedIndex === index && focusedIndex >= 0;
+        return shouldMeasure ? /* @__PURE__ */ jsx("div", { ref: firstItemRef, children: /* @__PURE__ */ jsx(TreeMemoizedRow, { index, data: itemData, isSelected, isFocused }) }, node.key) : /* @__PURE__ */ jsx(TreeMemoizedRow, { index, data: itemData, isSelected, isFocused }, node.key);
       }) })
     }
   );
@@ -18397,6 +18458,57 @@ const TreeMd = createMetadata({
     [`outlineOffset-${COMP$17}--focus`]: "$outlineOffset--focus"
   }
 });
+const defaultItemTemplate = {
+  type: "HStack",
+  props: {
+    verticalAlignment: "center",
+    gap: "$space-4"
+  },
+  children: [
+    {
+      type: "Icon",
+      when: "{$item.icon}",
+      props: {
+        name: "{$item.icon}"
+      }
+    },
+    {
+      type: "Text",
+      props: {
+        value: "{$item.name}"
+      }
+    }
+  ]
+};
+function TreeWithStableRenderer({ renderChild: renderChild2, itemTemplate, ...treeProps }) {
+  const renderChildRef = useRef(renderChild2);
+  renderChildRef.current = renderChild2;
+  const stableRenderChildRef = useRef(
+    (node, ctx) => renderChildRef.current(node, ctx)
+  );
+  const stableItemRenderer = useMemo(
+    () => (flatTreeNode) => {
+      const itemContext = {
+        id: flatTreeNode.id,
+        name: flatTreeNode.displayName,
+        depth: flatTreeNode.depth,
+        isExpanded: flatTreeNode.isExpanded,
+        hasChildren: flatTreeNode.hasChildren,
+        ...flatTreeNode
+      };
+      return /* @__PURE__ */ jsx(
+        MemoizedItem,
+        {
+          node: itemTemplate ?? defaultItemTemplate,
+          contextVars: { $item: itemContext },
+          renderChild: stableRenderChildRef.current
+        }
+      );
+    },
+    [itemTemplate]
+  );
+  return /* @__PURE__ */ jsx(TreeComponent, { ...treeProps, itemRenderer: stableItemRenderer });
+}
 const treeComponentRenderer = wrapComponent(
   COMP$17,
   TreeComponent,
@@ -18438,33 +18550,13 @@ const treeComponentRenderer = wrapComponent(
       "itemTemplate"
     ],
     customRender(_props, { node, extractValue, renderChild: renderChild2, classes, lookupEventHandler, registerComponentApi }) {
-      const defaultItemTemplate = {
-        type: "HStack",
-        props: {
-          verticalAlignment: "center",
-          gap: "$space-4"
-        },
-        children: [
-          {
-            type: "Icon",
-            when: "{$item.icon}",
-            props: {
-              name: "{$item.icon}"
-            }
-          },
-          {
-            type: "Text",
-            props: {
-              value: "{$item.name}"
-            }
-          }
-        ]
-      };
       return /* @__PURE__ */ jsx(
-        TreeComponent,
+        TreeWithStableRenderer,
         {
           registerComponentApi,
           classes,
+          renderChild: renderChild2,
+          itemTemplate: node.props.itemTemplate,
           data: extractValue(node.props.data),
           dataFormat: extractValue(node.props.dataFormat),
           idField: extractValue(node.props.idField),
@@ -18519,40 +18611,7 @@ const treeComponentRenderer = wrapComponent(
           onPasteAction: lookupEventHandler("pasteAction"),
           onDeleteAction: lookupEventHandler("deleteAction"),
           overflow: extractValue(node.props.overflow),
-          lookupEventHandler: node.events?.contextMenu ? lookupEventHandler : void 0,
-          itemRenderer: (flatTreeNode) => {
-            const itemContext = {
-              id: flatTreeNode.id,
-              // $item.id - Internal unique identifier
-              name: flatTreeNode.displayName,
-              // $item.name - Primary display text
-              depth: flatTreeNode.depth,
-              // $item.depth - Nesting level (0-based)
-              isExpanded: flatTreeNode.isExpanded,
-              // $item.isExpanded - Expansion state
-              hasChildren: flatTreeNode.hasChildren,
-              // $item.hasChildren - Children indicator
-              // - icon, iconExpanded, iconCollapsed (from icon fields)
-              // - uid, path, parentIds, selectable, children (TreeNode internals)
-              // - All original source data properties (custom fields)
-              ...flatTreeNode
-            };
-            return node.props.itemTemplate ? /* @__PURE__ */ jsx(
-              MemoizedItem,
-              {
-                node: node.props.itemTemplate,
-                contextVars: { $item: itemContext },
-                renderChild: renderChild2
-              }
-            ) : /* @__PURE__ */ jsx(
-              MemoizedItem,
-              {
-                node: defaultItemTemplate,
-                contextVars: { $item: itemContext },
-                renderChild: renderChild2
-              }
-            );
-          }
+          lookupEventHandler: node.events?.contextMenu ? lookupEventHandler : void 0
         }
       );
     }
@@ -18611,39 +18670,42 @@ const MessageListenerMd = createMetadata({
   }
 });
 const messageListenerComponentRenderer = wrapComponent(COMP$15, MessageListenerNative, MessageListenerMd, {});
-const themeVars$B = `'{"textColor-pagination-Table": "var(--xmlui-textColor-pagination-Table)", "backgroundColor-Table": "var(--xmlui-backgroundColor-Table)", "textColor-Table": "var(--xmlui-textColor-Table)", "backgroundColor-row-Table": "var(--xmlui-backgroundColor-row-Table)", "backgroundColor-row-Table--hover": "var(--xmlui-backgroundColor-row-Table--hover)", "backgroundColor-selected-Table": "var(--xmlui-backgroundColor-selected-Table)", "backgroundColor-selected-Table--hover": "var(--xmlui-backgroundColor-selected-Table--hover)", "backgroundColor-evenRow-Table": "var(--xmlui-backgroundColor-evenRow-Table)", "backgroundColor-oddRow-Table": "var(--xmlui-backgroundColor-oddRow-Table)", "backgroundColor-heading-Table": "var(--xmlui-backgroundColor-heading-Table)", "backgroundColor-heading-Table--hover": "var(--xmlui-backgroundColor-heading-Table--hover)", "backgroundColor-heading-Table--active": "var(--xmlui-backgroundColor-heading-Table--active)", "padding-heading-Table": "var(--xmlui-padding-heading-Table)", "paddingHorizontal-heading-Table": "var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table))", "paddingVertical-heading-Table": "var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table))", "paddingLeft-heading-Table": "var(--xmlui-paddingLeft-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingRight-heading-Table": "var(--xmlui-paddingRight-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingTop-heading-Table": "var(--xmlui-paddingTop-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingBottom-heading-Table": "var(--xmlui-paddingBottom-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "padding-cell-Table": "var(--xmlui-padding-cell-Table)", "paddingHorizontal-cell-Table": "var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table))", "paddingVertical-cell-Table": "var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table))", "paddingLeft-cell-Table": "var(--xmlui-paddingLeft-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingRight-cell-Table": "var(--xmlui-paddingRight-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingTop-cell-Table": "var(--xmlui-paddingTop-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingBottom-cell-Table": "var(--xmlui-paddingBottom-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingHorizontal-cell-first-Table": "var(--xmlui-paddingHorizontal-cell-first-Table)", "paddingHorizontal-cell-last-Table": "var(--xmlui-paddingHorizontal-cell-last-Table)", "border-cell-Table": "var(--xmlui-border-cell-Table)", "borderHorizontal-cell-Table": "var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table))", "borderVertical-cell-Table": "var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table))", "borderLeft-cell-Table": "var(--xmlui-borderLeft-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderRight-cell-Table": "var(--xmlui-borderRight-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderTop-cell-Table": "var(--xmlui-borderTop-cell-Table, var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table)))", "borderBottom-cell-Table": "var(--xmlui-borderBottom-cell-Table)", "borderWidth-cell-Table": "var(--xmlui-borderWidth-cell-Table)", "borderHorizontalWidth-cell-Table": "var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderLeftWidth-cell-Table": "var(--xmlui-borderLeftWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderRightWidth-cell-Table": "var(--xmlui-borderRightWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderVerticalWidth-cell-Table": "var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderTopWidth-cell-Table": "var(--xmlui-borderTopWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderBottomWidth-cell-Table": "var(--xmlui-borderBottomWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderStyle-cell-Table": "var(--xmlui-borderStyle-cell-Table)", "borderHorizontalStyle-cell-Table": "var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderLeftStyle-cell-Table": "var(--xmlui-borderLeftStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderRightStyle-cell-Table": "var(--xmlui-borderRightStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderVerticalStyle-cell-Table": "var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderTopStyle-cell-Table": "var(--xmlui-borderTopStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderBottomStyle-cell-Table": "var(--xmlui-borderBottomStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderColor-cell-Table": "var(--xmlui-borderColor-cell-Table)", "borderHorizontalColor-cell-Table": "var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderLeftColor-cell-Table": "var(--xmlui-borderLeftColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderRightColor-cell-Table": "var(--xmlui-borderRightColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderVerticalColor-cell-Table": "var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderTopColor-cell-Table": "var(--xmlui-borderTopColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderBottomColor-cell-Table": "var(--xmlui-borderBottomColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderStartStartRadius-cell-Table": "var(--xmlui-borderStartStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderStartEndRadius-cell-Table": "var(--xmlui-borderStartEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndStartRadius-cell-Table": "var(--xmlui-borderEndStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndEndRadius-cell-Table": "var(--xmlui-borderEndEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "border-Table": "var(--xmlui-border-Table)", "borderHorizontal-Table": "var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table))", "borderVertical-Table": "var(--xmlui-borderVertical-Table, var(--xmlui-border-Table))", "borderLeft-Table": "var(--xmlui-borderLeft-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderRight-Table": "var(--xmlui-borderRight-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderTop-Table": "var(--xmlui-borderTop-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderBottom-Table": "var(--xmlui-borderBottom-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderWidth-Table": "var(--xmlui-borderWidth-Table)", "borderHorizontalWidth-Table": "var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table))", "borderLeftWidth-Table": "var(--xmlui-borderLeftWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderRightWidth-Table": "var(--xmlui-borderRightWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderVerticalWidth-Table": "var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table))", "borderTopWidth-Table": "var(--xmlui-borderTopWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderBottomWidth-Table": "var(--xmlui-borderBottomWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderStyle-Table": "var(--xmlui-borderStyle-Table)", "borderHorizontalStyle-Table": "var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table))", "borderLeftStyle-Table": "var(--xmlui-borderLeftStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderRightStyle-Table": "var(--xmlui-borderRightStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderVerticalStyle-Table": "var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table))", "borderTopStyle-Table": "var(--xmlui-borderTopStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderBottomStyle-Table": "var(--xmlui-borderBottomStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderColor-Table": "var(--xmlui-borderColor-Table)", "borderHorizontalColor-Table": "var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table))", "borderLeftColor-Table": "var(--xmlui-borderLeftColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderRightColor-Table": "var(--xmlui-borderRightColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderVerticalColor-Table": "var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table))", "borderTopColor-Table": "var(--xmlui-borderTopColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderBottomColor-Table": "var(--xmlui-borderBottomColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderStartStartRadius-Table": "var(--xmlui-borderStartStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderStartEndRadius-Table": "var(--xmlui-borderStartEndRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndStartRadius-Table": "var(--xmlui-borderEndStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndEndRadius-Table": "var(--xmlui-borderEndEndRadius-Table, var(--xmlui-borderRadius-Table))", "backgroundColor-pagination-Table": "var(--xmlui-backgroundColor-pagination-Table)", "textColor-heading-Table": "var(--xmlui-textColor-heading-Table)", "fontWeight-row-Table": "var(--xmlui-fontWeight-row-Table)", "fontSize-row-Table": "var(--xmlui-fontSize-row-Table)", "fontSize-checkbox-Table": "var(--xmlui-fontSize-checkbox-Table)", "fontWeight-heading-Table": "var(--xmlui-fontWeight-heading-Table)", "fontSize-heading-Table": "var(--xmlui-fontSize-heading-Table)", "textTransform-heading-Table": "var(--xmlui-textTransform-heading-Table)", "borderRadius-Table": "var(--xmlui-borderRadius-Table)", "outlineWidth-heading-Table--focus": "var(--xmlui-outlineWidth-heading-Table--focus)", "outlineColor-heading-Table--focus": "var(--xmlui-outlineColor-heading-Table--focus)", "outlineStyle-heading-Table--focus": "var(--xmlui-outlineStyle-heading-Table--focus)", "outlineOffset-heading-Table--focus": "var(--xmlui-outlineOffset-heading-Table--focus)", "borderBottom-last-row-Table": "var(--xmlui-borderBottom-last-row-Table)", "backgroundColor-pinnedCell-Table": "var(--xmlui-backgroundColor-pinnedCell-Table)"}'`;
-const wrapper$a = "_wrapper_xjp6g_14";
-const noScroll = "_noScroll_xjp6g_43";
-const clickableHeader = "_clickableHeader_xjp6g_46";
-const headerContent$1 = "_headerContent_xjp6g_60";
-const orderingIndicator = "_orderingIndicator_xjp6g_63";
-const activeOrdering = "_activeOrdering_xjp6g_68";
-const alwaysShow = "_alwaysShow_xjp6g_68";
-const headerRow = "_headerRow_xjp6g_105";
-const columnCell = "_columnCell_xjp6g_112";
-const cell = "_cell_xjp6g_113";
-const alignTop = "_alignTop_xjp6g_122";
-const alignCenter$1 = "_alignCenter_xjp6g_126";
-const alignBottom = "_alignBottom_xjp6g_130";
-const table = "_table_xjp6g_134";
-const row$1 = "_row_xjp6g_144";
-const checkBoxWrapper = "_checkBoxWrapper_xjp6g_150";
-const showInHeader = "_showInHeader_xjp6g_155";
-const showInRow = "_showInRow_xjp6g_155";
-const selected$3 = "_selected_xjp6g_160";
-const allSelected = "_allSelected_xjp6g_160";
-const cellContent = "_cellContent_xjp6g_191";
-const evenRow = "_evenRow_xjp6g_206";
-const oddRow = "_oddRow_xjp6g_209";
-const focused$3 = "_focused_xjp6g_224";
-const disabled$7 = "_disabled_xjp6g_236";
-const noBottomBorder = "_noBottomBorder_xjp6g_243";
-const headerWrapper = "_headerWrapper_xjp6g_256";
-const noRows$1 = "_noRows_xjp6g_273";
-const loadingWrapper$1 = "_loadingWrapper_xjp6g_312";
-const forceHoverWrapper = "_forceHoverWrapper_xjp6g_325";
-const resizer$1 = "_resizer_xjp6g_328";
-const isResizing = "_isResizing_xjp6g_349";
+const themeVars$B = `'{"textColor-pagination-Table": "var(--xmlui-textColor-pagination-Table)", "backgroundColor-Table": "var(--xmlui-backgroundColor-Table)", "textColor-Table": "var(--xmlui-textColor-Table)", "backgroundColor-row-Table": "var(--xmlui-backgroundColor-row-Table)", "backgroundColor-row-Table--hover": "var(--xmlui-backgroundColor-row-Table--hover)", "backgroundColor-selected-Table": "var(--xmlui-backgroundColor-selected-Table)", "backgroundColor-selected-Table--hover": "var(--xmlui-backgroundColor-selected-Table--hover)", "backgroundColor-evenRow-Table": "var(--xmlui-backgroundColor-evenRow-Table)", "backgroundColor-oddRow-Table": "var(--xmlui-backgroundColor-oddRow-Table)", "backgroundColor-heading-Table": "var(--xmlui-backgroundColor-heading-Table)", "backgroundColor-heading-Table--hover": "var(--xmlui-backgroundColor-heading-Table--hover)", "backgroundColor-heading-Table--active": "var(--xmlui-backgroundColor-heading-Table--active)", "padding-heading-Table": "var(--xmlui-padding-heading-Table)", "paddingHorizontal-heading-Table": "var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table))", "paddingVertical-heading-Table": "var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table))", "paddingLeft-heading-Table": "var(--xmlui-paddingLeft-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingRight-heading-Table": "var(--xmlui-paddingRight-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingTop-heading-Table": "var(--xmlui-paddingTop-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingBottom-heading-Table": "var(--xmlui-paddingBottom-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "padding-cell-Table": "var(--xmlui-padding-cell-Table)", "paddingHorizontal-cell-Table": "var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table))", "paddingVertical-cell-Table": "var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table))", "paddingLeft-cell-Table": "var(--xmlui-paddingLeft-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingRight-cell-Table": "var(--xmlui-paddingRight-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingTop-cell-Table": "var(--xmlui-paddingTop-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingBottom-cell-Table": "var(--xmlui-paddingBottom-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingHorizontal-cell-first-Table": "var(--xmlui-paddingHorizontal-cell-first-Table)", "paddingHorizontal-cell-last-Table": "var(--xmlui-paddingHorizontal-cell-last-Table)", "border-cell-Table": "var(--xmlui-border-cell-Table)", "borderHorizontal-cell-Table": "var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table))", "borderVertical-cell-Table": "var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table))", "borderLeft-cell-Table": "var(--xmlui-borderLeft-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderRight-cell-Table": "var(--xmlui-borderRight-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderTop-cell-Table": "var(--xmlui-borderTop-cell-Table, var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table)))", "borderBottom-cell-Table": "var(--xmlui-borderBottom-cell-Table)", "borderWidth-cell-Table": "var(--xmlui-borderWidth-cell-Table)", "borderHorizontalWidth-cell-Table": "var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderLeftWidth-cell-Table": "var(--xmlui-borderLeftWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderRightWidth-cell-Table": "var(--xmlui-borderRightWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderVerticalWidth-cell-Table": "var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderTopWidth-cell-Table": "var(--xmlui-borderTopWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderBottomWidth-cell-Table": "var(--xmlui-borderBottomWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderStyle-cell-Table": "var(--xmlui-borderStyle-cell-Table)", "borderHorizontalStyle-cell-Table": "var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderLeftStyle-cell-Table": "var(--xmlui-borderLeftStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderRightStyle-cell-Table": "var(--xmlui-borderRightStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderVerticalStyle-cell-Table": "var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderTopStyle-cell-Table": "var(--xmlui-borderTopStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderBottomStyle-cell-Table": "var(--xmlui-borderBottomStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderColor-cell-Table": "var(--xmlui-borderColor-cell-Table)", "borderHorizontalColor-cell-Table": "var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderLeftColor-cell-Table": "var(--xmlui-borderLeftColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderRightColor-cell-Table": "var(--xmlui-borderRightColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderVerticalColor-cell-Table": "var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderTopColor-cell-Table": "var(--xmlui-borderTopColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderBottomColor-cell-Table": "var(--xmlui-borderBottomColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderStartStartRadius-cell-Table": "var(--xmlui-borderStartStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderStartEndRadius-cell-Table": "var(--xmlui-borderStartEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndStartRadius-cell-Table": "var(--xmlui-borderEndStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndEndRadius-cell-Table": "var(--xmlui-borderEndEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "border-Table": "var(--xmlui-border-Table)", "borderHorizontal-Table": "var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table))", "borderVertical-Table": "var(--xmlui-borderVertical-Table, var(--xmlui-border-Table))", "borderLeft-Table": "var(--xmlui-borderLeft-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderRight-Table": "var(--xmlui-borderRight-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderTop-Table": "var(--xmlui-borderTop-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderBottom-Table": "var(--xmlui-borderBottom-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderWidth-Table": "var(--xmlui-borderWidth-Table)", "borderHorizontalWidth-Table": "var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table))", "borderLeftWidth-Table": "var(--xmlui-borderLeftWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderRightWidth-Table": "var(--xmlui-borderRightWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderVerticalWidth-Table": "var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table))", "borderTopWidth-Table": "var(--xmlui-borderTopWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderBottomWidth-Table": "var(--xmlui-borderBottomWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderStyle-Table": "var(--xmlui-borderStyle-Table)", "borderHorizontalStyle-Table": "var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table))", "borderLeftStyle-Table": "var(--xmlui-borderLeftStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderRightStyle-Table": "var(--xmlui-borderRightStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderVerticalStyle-Table": "var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table))", "borderTopStyle-Table": "var(--xmlui-borderTopStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderBottomStyle-Table": "var(--xmlui-borderBottomStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderColor-Table": "var(--xmlui-borderColor-Table)", "borderHorizontalColor-Table": "var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table))", "borderLeftColor-Table": "var(--xmlui-borderLeftColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderRightColor-Table": "var(--xmlui-borderRightColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderVerticalColor-Table": "var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table))", "borderTopColor-Table": "var(--xmlui-borderTopColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderBottomColor-Table": "var(--xmlui-borderBottomColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderStartStartRadius-Table": "var(--xmlui-borderStartStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderStartEndRadius-Table": "var(--xmlui-borderStartEndRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndStartRadius-Table": "var(--xmlui-borderEndStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndEndRadius-Table": "var(--xmlui-borderEndEndRadius-Table, var(--xmlui-borderRadius-Table))", "backgroundColor-pagination-Table": "var(--xmlui-backgroundColor-pagination-Table)", "textColor-heading-Table": "var(--xmlui-textColor-heading-Table)", "fontWeight-row-Table": "var(--xmlui-fontWeight-row-Table)", "fontSize-row-Table": "var(--xmlui-fontSize-row-Table)", "fontSize-checkbox-Table": "var(--xmlui-fontSize-checkbox-Table)", "backgroundColor-selectionCell-Table": "var(--xmlui-backgroundColor-selectionCell-Table)", "backgroundColor-selectionCell-Table--hover": "var(--xmlui-backgroundColor-selectionCell-Table--hover)", "fontWeight-heading-Table": "var(--xmlui-fontWeight-heading-Table)", "fontSize-heading-Table": "var(--xmlui-fontSize-heading-Table)", "textTransform-heading-Table": "var(--xmlui-textTransform-heading-Table)", "borderRadius-Table": "var(--xmlui-borderRadius-Table)", "outlineWidth-heading-Table--focus": "var(--xmlui-outlineWidth-heading-Table--focus)", "outlineColor-heading-Table--focus": "var(--xmlui-outlineColor-heading-Table--focus)", "outlineStyle-heading-Table--focus": "var(--xmlui-outlineStyle-heading-Table--focus)", "outlineOffset-heading-Table--focus": "var(--xmlui-outlineOffset-heading-Table--focus)", "borderBottom-last-row-Table": "var(--xmlui-borderBottom-last-row-Table)", "backgroundColor-pinnedCell-Table": "var(--xmlui-backgroundColor-pinnedCell-Table)", "backgroundColor-pinnedCell-Table--hover": "var(--xmlui-backgroundColor-pinnedCell-Table--hover)", "Input:borderColor-Checkbox--hover": "var(--xmlui-borderColor-Checkbox--hover)"}'`;
+const wrapper$a = "_wrapper_1n82x_14";
+const noScroll = "_noScroll_1n82x_43";
+const clickableHeader = "_clickableHeader_1n82x_46";
+const headerContent$1 = "_headerContent_1n82x_60";
+const orderingIndicator = "_orderingIndicator_1n82x_63";
+const activeOrdering = "_activeOrdering_1n82x_68";
+const alwaysShow = "_alwaysShow_1n82x_68";
+const headerRow = "_headerRow_1n82x_105";
+const columnCell = "_columnCell_1n82x_112";
+const cell = "_cell_1n82x_113";
+const alignTop = "_alignTop_1n82x_122";
+const alignCenter$1 = "_alignCenter_1n82x_126";
+const alignBottom = "_alignBottom_1n82x_130";
+const table = "_table_1n82x_138";
+const row$1 = "_row_1n82x_148";
+const checkBoxWrapper = "_checkBoxWrapper_1n82x_154";
+const showInHeader = "_showInHeader_1n82x_159";
+const showInRow = "_showInRow_1n82x_159";
+const selected$3 = "_selected_1n82x_164";
+const allSelected = "_allSelected_1n82x_164";
+const cellContent = "_cellContent_1n82x_195";
+const evenRow = "_evenRow_1n82x_212";
+const oddRow = "_oddRow_1n82x_216";
+const focused$3 = "_focused_1n82x_236";
+const disabled$7 = "_disabled_1n82x_252";
+const noBottomBorder = "_noBottomBorder_1n82x_259";
+const headerWrapper = "_headerWrapper_1n82x_272";
+const noRows$1 = "_noRows_1n82x_289";
+const loadingWrapper$1 = "_loadingWrapper_1n82x_328";
+const selectionToggle = "_selectionToggle_1n82x_343";
+const toleranceCompact = "_toleranceCompact_1n82x_346";
+const toleranceComfortable = "_toleranceComfortable_1n82x_352";
+const toleranceSpacious = "_toleranceSpacious_1n82x_358";
+const resizer$1 = "_resizer_1n82x_368";
+const isResizing = "_isResizing_1n82x_389";
 const styles$R = {
   themeVars: themeVars$B,
   wrapper: wrapper$a,
@@ -18675,7 +18737,10 @@ const styles$R = {
   headerWrapper,
   noRows: noRows$1,
   loadingWrapper: loadingWrapper$1,
-  forceHoverWrapper,
+  selectionToggle,
+  toleranceCompact,
+  toleranceComfortable,
+  toleranceSpacious,
   resizer: resizer$1,
   isResizing
 };
@@ -19603,6 +19668,7 @@ const CheckboxMd = createMetadata({
     }
   },
   themeVars: parseScssVar(styles$14.themeVars),
+  compactInlineLabel: true,
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
     [`borderColor-${COMP$14}`]: `$borderColor-Input-default`,
@@ -20262,8 +20328,43 @@ const SimpleSelect = forwardRef(
     } = props;
     const composedRef = forwardRef ? composeRefs(triggerRef, forwardedRef) : triggerRef;
     const [open, setOpen] = useState(false);
+    useEffect(() => {
+      if (!open || modal) return;
+      const body2 = document.body;
+      const LOCK_ATTR = "data-scroll-locked";
+      let didDecrement = false;
+      const decrement = () => {
+        const count = parseInt(body2.getAttribute(LOCK_ATTR) || "0", 10);
+        if (count > 0 && !didDecrement) {
+          didDecrement = true;
+          if (count <= 1) {
+            body2.removeAttribute(LOCK_ATTR);
+          } else {
+            body2.setAttribute(LOCK_ATTR, String(count - 1));
+          }
+        }
+      };
+      const raf = requestAnimationFrame(decrement);
+      const handler = (e) => {
+        const viewport = body2.querySelector("[data-radix-select-viewport]");
+        if (!viewport || !viewport.contains(e.target)) {
+          e.stopPropagation();
+        }
+      };
+      document.addEventListener("wheel", handler, true);
+      document.addEventListener("touchmove", handler, true);
+      return () => {
+        cancelAnimationFrame(raf);
+        if (didDecrement) {
+          const count = parseInt(body2.getAttribute(LOCK_ATTR) || "0", 10);
+          body2.setAttribute(LOCK_ATTR, String(count + 1));
+        }
+        document.removeEventListener("wheel", handler, true);
+        document.removeEventListener("touchmove", handler, true);
+      };
+    }, [open, modal]);
     const stringValue = useMemo(() => {
-      return value != void 0 ? String(value) : void 0;
+      return value != null && value !== "" ? String(value) : "";
     }, [value]);
     const handleValueChange = useCallback(
       (val) => {
@@ -20639,6 +20740,32 @@ const Select = forwardRef(function Select2({
       updateState({ value: initialValue }, { initial: true });
     }
   }, [initialValue, updateState]);
+  const isInsideForm = useIsInsideForm();
+  const hasValidatedInitialValueRef = useRef(false);
+  useEffect(() => {
+    if (!isInsideForm) return;
+    if (hasValidatedInitialValueRef.current) return;
+    if (options2.length === 0) return;
+    if (value === void 0 || value === null) return;
+    hasValidatedInitialValueRef.current = true;
+    if (!multiSelect) {
+      if (value !== "") {
+        const isValid2 = options2.some((opt) => `${opt.value}` === `${value}`);
+        if (!isValid2) {
+          updateState({ value: void 0 }, { formOnly: true });
+        }
+      }
+    } else {
+      if (Array.isArray(value) && value.length > 0) {
+        const validValues = value.filter(
+          (v) => options2.some((opt) => String(opt.value) === String(v))
+        );
+        if (validValues.length !== value.length) {
+          updateState({ value: validValues });
+        }
+      }
+    }
+  }, [isInsideForm, options2, value, multiSelect, updateState]);
   useEffect(() => {
     const current = referenceElement;
     const currentObserver = observer.current;
@@ -22198,32 +22325,32 @@ function defaultIsRowUnselectable(_) {
 }
 const SELECT_COLUMN_WIDTH = 42;
 const DEFAULT_PAGE_SIZES = [10];
-const getCheckboxTolerancePixels = (tolerance) => {
-  switch (tolerance) {
-    case "none":
-      return 0;
-    case "compact":
-      return 8;
-    case "comfortable":
-      return 12;
-    case "spacious":
-      return 16;
-    default:
-      return 8;
-  }
-};
-const isWithinCheckboxBoundary = (pointX, pointY, checkboxRect, tolerancePixels) => {
-  const distanceToLeft = Math.abs(pointX - checkboxRect.left);
-  const distanceToRight = Math.abs(pointX - checkboxRect.right);
-  const distanceToTop = Math.abs(pointY - checkboxRect.top);
-  const distanceToBottom = Math.abs(pointY - checkboxRect.bottom);
-  const withinHorizontalBounds = pointX >= checkboxRect.left && pointX <= checkboxRect.right;
-  const withinVerticalBounds = pointY >= checkboxRect.top && pointY <= checkboxRect.bottom;
-  const withinCheckbox = withinHorizontalBounds && withinVerticalBounds;
-  const nearHorizontalBoundary = withinVerticalBounds && (distanceToLeft <= tolerancePixels || distanceToRight <= tolerancePixels);
-  const nearVerticalBoundary = withinHorizontalBounds && (distanceToTop <= tolerancePixels || distanceToBottom <= tolerancePixels);
-  return withinCheckbox || nearHorizontalBoundary || nearVerticalBoundary;
-};
+function SelectionToggle({
+  checkboxTolerance,
+  ariaLabel,
+  value,
+  indeterminate,
+  onDidChange,
+  alwaysVisibleClassName
+}) {
+  const wrapperClassName = classnames(styles$R.checkBoxWrapper, alwaysVisibleClassName, {
+    [styles$R.toleranceCompact]: checkboxTolerance === "compact",
+    [styles$R.toleranceComfortable]: checkboxTolerance === "comfortable",
+    [styles$R.toleranceSpacious]: checkboxTolerance === "spacious"
+  });
+  return /* @__PURE__ */ jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsx(
+    ThemedToggle,
+    {
+      ...{
+        "aria-label": ariaLabel,
+        className: styles$R.selectionToggle,
+        value,
+        indeterminate,
+        onDidChange
+      }
+    }
+  ) });
+}
 const getCommonPinningStyles = (column, isHeader = false) => {
   const isPinned = column.getIsPinned();
   return {
@@ -22235,7 +22362,7 @@ const getCommonPinningStyles = (column, isHeader = false) => {
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
-    backgroundColor: isPinned ? isHeader ? "var(--xmlui-backgroundColor-heading-Table)" : "var(--xmlui-backgroundColor-pinnedCell-Table)" : void 0,
+    backgroundColor: isPinned ? isHeader ? toCssVar("$backgroundColor-heading-Table") : column.id === "select" ? `var(--checkbox-cell-bg, ${toCssVar("$backgroundColor-selectionCell-Table")})` : `var(--pinned-cell-bg, ${toCssVar("$backgroundColor-pinnedCell-Table")})` : void 0,
     zIndex: isPinned ? 1 : void 0
   };
 };
@@ -22501,9 +22628,6 @@ const Table = memo(forwardRef(
       }
     }, [autoFocus]);
     const [visibleItems2, setVisibleItems] = useState(EMPTY_ARRAY);
-    const [hoveredRowId, setHoveredRowId] = useState(null);
-    const [headerCheckboxHovered, setHeaderCheckboxHovered] = useState(false);
-    const tolerancePixels = getCheckboxTolerancePixels(checkboxTolerance);
     const {
       toggleRow,
       checkAllRows,
@@ -22661,11 +22785,8 @@ const Table = memo(forwardRef(
         }
       });
     }, [getThemeVar, safeColumns]);
-    const columnsWithSelectColumn = useMemo(() => {
-      if (hideSelectionCheckboxes) {
-        return columnsWithCustomCell;
-      }
-      const selectColumn = {
+    const selectColumn = useMemo(() => {
+      return {
         id: "select",
         size: SELECT_COLUMN_WIDTH,
         enableResizing: false,
@@ -22674,68 +22795,59 @@ const Table = memo(forwardRef(
           pinTo: "left"
         },
         header: ({ table: table22 }) => enableMultiRowSelection && !hideSelectionCheckboxesHeader ? /* @__PURE__ */ jsx(
-          ThemedToggle,
+          SelectionToggle,
           {
-            ...{
-              "aria-label": "Select all rows",
-              className: classnames(styles$R.checkBoxWrapper, {
-                [styles$R.showInHeader]: alwaysShowSelectionCheckboxesHeader,
-                [styles$R.forceHoverWrapper]: headerCheckboxHovered
-              }),
-              value: table22.getIsAllRowsSelected(),
-              indeterminate: table22.getIsSomeRowsSelected(),
-              forceHover: headerCheckboxHovered,
-              onDidChange: () => {
-                const allSelected2 = table22.getRowModel().rows.every(
-                  (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
-                );
-                checkAllRows(!allSelected2);
-              }
+            checkboxTolerance,
+            ariaLabel: "Select all rows",
+            alwaysVisibleClassName: alwaysShowSelectionCheckboxesHeader ? styles$R.showInHeader : void 0,
+            value: table22.getIsAllRowsSelected(),
+            indeterminate: table22.getIsSomeRowsSelected(),
+            onDidChange: () => {
+              const allSelected2 = table22.getRowModel().rows.every(
+                (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
+              );
+              checkAllRows(!allSelected2);
             }
           }
         ) : null,
         cell: ({ row: row2 }) => {
           return /* @__PURE__ */ jsx(Fragment, { children: row2.getCanSelect() && /* @__PURE__ */ jsx(
-            ThemedToggle,
+            SelectionToggle,
             {
-              ...{
-                "aria-label": `Select ${row2.original[idKey]}`,
-                className: classnames(styles$R.checkBoxWrapper, {
-                  [styles$R.forceHoverWrapper]: hoveredRowId === row2.id,
-                  [styles$R.showInRow]: alwaysShowSelectionCheckboxes
-                }),
-                value: row2.getIsSelected(),
-                indeterminate: row2.getIsSomeSelected(),
-                forceHover: hoveredRowId === row2.id,
-                onDidChange: () => {
-                  if (!enableMultiRowSelection && row2.getIsSelected()) {
-                    checkAllRows(false);
-                  } else {
-                    toggleRow(row2.original, { metaKey: true });
-                  }
+              checkboxTolerance,
+              ariaLabel: `Select ${row2.original[idKey]}`,
+              alwaysVisibleClassName: alwaysShowSelectionCheckboxes ? styles$R.showInRow : void 0,
+              value: row2.getIsSelected(),
+              indeterminate: row2.getIsSomeSelected(),
+              onDidChange: () => {
+                if (!enableMultiRowSelection && row2.getIsSelected()) {
+                  checkAllRows(false);
+                } else {
+                  toggleRow(row2.original, { metaKey: true });
                 }
               }
             }
           ) });
         }
       };
-      return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
     }, [
       idKey,
-      rowsSelectable,
-      columnsWithCustomCell,
       enableMultiRowSelection,
       alwaysShowSelectionCheckboxesHeader,
       checkAllRows,
       toggleRow,
+      checkboxTolerance,
       rowDisabledPredicate,
       rowUnselectablePredicate,
-      hoveredRowId,
-      headerCheckboxHovered,
-      hideSelectionCheckboxes,
       hideSelectionCheckboxesHeader,
       alwaysShowSelectionCheckboxes
     ]);
+    const columnsWithSelectColumn = useMemo(() => {
+      if (hideSelectionCheckboxes) {
+        return columnsWithCustomCell;
+      }
+      return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
+    }, [rowsSelectable, columnsWithCustomCell, hideSelectionCheckboxes, selectColumn]);
     const [pagination2, setPagination] = useState({
       pageSize: effectiveIsPaginated ? effectivePageSize : Number.MAX_VALUE,
       pageIndex: currentPageIndex
@@ -22970,8 +23082,6 @@ const Table = memo(forwardRef(
       toggleRow,
       checkAllRows,
       enableMultiRowSelection,
-      tolerancePixels,
-      setHoveredRowId,
       lookupEventHandler,
       rowDoubleClick,
       striped,
@@ -23002,6 +23112,7 @@ const Table = memo(forwardRef(
               "td",
               {
                 className: classnames(styles$R.cell, alignmentClass, columnClassName),
+                "data-column-id": cell2.column.id,
                 style: {
                   width: size,
                   "--column-width": `${size}px`,
@@ -23077,23 +23188,15 @@ const Table = memo(forwardRef(
                   return;
                 }
                 wrapperRef.current?.focus();
-                const currentRow = event.currentTarget;
-                const checkbox2 = currentRow.querySelector(
-                  'input[type="checkbox"]'
-                );
-                if (checkbox2) {
-                  const checkboxRect = checkbox2.getBoundingClientRect();
-                  const clickX = event.clientX;
-                  const clickY = event.clientY;
+                const isSelectColumn = target2.closest("td")?.getAttribute("data-column-id") === "select";
+                if (isSelectColumn) {
                   const rs = rowStateRef.current;
-                  if (isWithinCheckboxBoundary(clickX, clickY, checkboxRect, rs.tolerancePixels)) {
-                    if (!rs.enableMultiRowSelection && row2.getIsSelected()) {
-                      rs.checkAllRows(false);
-                    } else {
-                      rs.toggleRow(row2.original, { metaKey: true });
-                    }
-                    return;
+                  if (!rs.enableMultiRowSelection && row2.getIsSelected()) {
+                    rs.checkAllRows(false);
+                  } else {
+                    rs.toggleRow(row2.original, { metaKey: true });
                   }
+                  return;
                 }
                 rowStateRef.current.toggleRow(row2.original, event);
               },
@@ -23108,35 +23211,6 @@ const Table = memo(forwardRef(
                   }
                 }
               },
-              onMouseMove: (event) => {
-                const currentRow = event.currentTarget;
-                const checkbox2 = currentRow.querySelector(
-                  'input[type="checkbox"]'
-                );
-                if (checkbox2) {
-                  const checkboxRect = checkbox2.getBoundingClientRect();
-                  const mouseX = event.clientX;
-                  const mouseY = event.clientY;
-                  const shouldShowHover = isWithinCheckboxBoundary(
-                    mouseX,
-                    mouseY,
-                    checkboxRect,
-                    rowStateRef.current.tolerancePixels
-                  );
-                  if (shouldShowHover) {
-                    rowStateRef.current.setHoveredRowId(row2.id);
-                    currentRow.style.cursor = "pointer";
-                  } else {
-                    rowStateRef.current.setHoveredRowId(null);
-                    currentRow.style.cursor = "";
-                  }
-                }
-              },
-              onMouseLeave: (event) => {
-                const currentRow = event.currentTarget;
-                currentRow.style.cursor = "";
-                rowStateRef.current.setHoveredRowId(null);
-              },
               onContextMenu: rowStateRef.current.lookupEventHandler ? (event) => {
                 event.preventDefault();
                 const handler = rowStateRef.current.lookupEventHandler("contextMenu", {
@@ -23260,7 +23334,7 @@ const Table = memo(forwardRef(
       queueMicrotask(() => {
         recalculateStarSizes();
       });
-    }, [recalculateStarSizes, safeColumns]);
+    }, [recalculateStarSizes, safeColumns, columnsWithCustomCell, rowsSelectable, hideSelectionCheckboxes]);
     useIsomorphicLayoutEffect(() => {
       registerComponentApi(selectionApi);
     }, [registerComponentApi, selectionApi]);
@@ -23332,81 +23406,20 @@ const Table = memo(forwardRef(
                     }),
                     onClick: (event) => {
                       const target2 = event.target;
+                      if (target2.tagName.toLowerCase() === "input" && target2.getAttribute("type") === "checkbox") {
+                        return;
+                      }
                       const headerCell = target2.closest("th");
-                      if (headerCell && rowsSelectable && enableMultiRowSelection) {
-                        const header2 = headerGroup.headers.find((h) => {
-                          const headerElement = headerCell;
-                          return headerElement?.getAttribute("data-column-id") === h.id || h.id === "select";
-                        });
-                        if (header2 && header2.id === "select") {
-                          const clickX = event.clientX;
-                          const clickY = event.clientY;
-                          const checkbox2 = headerCell.querySelector(
-                            'input[type="checkbox"]'
+                      if (headerCell && rowsSelectable && enableMultiRowSelection && !hideSelectionCheckboxesHeader) {
+                        const headerId = headerCell.getAttribute("data-column-id");
+                        if (headerId === "select") {
+                          const allSelected2 = table2.getRowModel().rows.every(
+                            (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
                           );
-                          if (checkbox2) {
-                            const checkboxRect = checkbox2.getBoundingClientRect();
-                            if (isWithinCheckboxBoundary(
-                              clickX,
-                              clickY,
-                              checkboxRect,
-                              tolerancePixels
-                            )) {
-                              event.preventDefault();
-                              event.stopPropagation();
-                              const allSelected2 = table2.getRowModel().rows.every(
-                                (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
-                              );
-                              checkAllRows(!allSelected2);
-                            }
-                          }
+                          checkAllRows(!allSelected2);
                         }
                       }
                     },
-                    onMouseMove: (event) => {
-                      if (rowsSelectable && enableMultiRowSelection) {
-                        const target2 = event.target;
-                        const headerCell = target2.closest("th");
-                        if (headerCell) {
-                          const header2 = headerGroup.headers.find((h) => {
-                            const headerElement = headerCell;
-                            return headerElement?.getAttribute("data-column-id") === h.id || h.id === "select";
-                          });
-                          if (header2 && header2.id === "select") {
-                            const mouseX = event.clientX;
-                            const mouseY = event.clientY;
-                            const checkbox2 = headerCell.querySelector(
-                              'input[type="checkbox"]'
-                            );
-                            if (checkbox2) {
-                              const checkboxRect = checkbox2.getBoundingClientRect();
-                              const shouldShowHover = isWithinCheckboxBoundary(
-                                mouseX,
-                                mouseY,
-                                checkboxRect,
-                                tolerancePixels
-                              );
-                              if (shouldShowHover && !headerCheckboxHovered) {
-                                setHeaderCheckboxHovered(true);
-                                event.currentTarget.style.cursor = "pointer";
-                              } else if (!shouldShowHover && headerCheckboxHovered) {
-                                setHeaderCheckboxHovered(false);
-                                event.currentTarget.style.cursor = "";
-                              }
-                            }
-                          } else if (headerCheckboxHovered) {
-                            setHeaderCheckboxHovered(false);
-                            event.currentTarget.style.cursor = "";
-                          }
-                        }
-                      }
-                    },
-                    onMouseLeave: (event) => {
-                      if (headerCheckboxHovered) {
-                        setHeaderCheckboxHovered(false);
-                        event.currentTarget.style.cursor = "";
-                      }
-                    },
                     children: headerGroup.headers.map((header2, headerIndex) => {
                       const { width, ...style22 } = header2.column.columnDef.meta?.style || {};
                       const size = header2.getSize();
@@ -23941,8 +23954,6 @@ const TableMd = createMetadata({
     [`textTransform-heading-${COMP$11}`]: "uppercase",
     [`fontSize-row-${COMP$11}`]: "$fontSize-sm",
     [`fontSize-checkbox-${COMP$11}`]: "$fontSize",
-    // [`backgroundColor-${COMP}`]: "transparent",
-    // [`backgroundColor-row-${COMP}`]: "inherit",
     [`backgroundColor-selected-${COMP$11}--hover`]: `$backgroundColor-row-${COMP$11}--hover`,
     [`backgroundColor-pagination-${COMP$11}`]: `$backgroundColor-${COMP$11}`,
     [`textColor-pagination-${COMP$11}`]: "$color-secondary",
@@ -23960,7 +23971,10 @@ const TableMd = createMetadata({
     [`userSelect-row-${COMP$11}`]: "none",
     [`backgroundColor-evenRow-${COMP$11}`]: `$backgroundColor-row-${COMP$11}`,
     [`backgroundColor-oddRow-${COMP$11}`]: `$color-surface-100`,
-    [`backgroundColor-pinnedCell-${COMP$11}`]: "$color-surface-50"
+    [`backgroundColor-pinnedCell-${COMP$11}`]: "$color-surface-50",
+    [`backgroundColor-pinnedCell-${COMP$11}--hover`]: `$backgroundColor-row-${COMP$11}--hover`,
+    [`backgroundColor-selectionCell-${COMP$11}`]: "$backgroundColor-pinnedCell-Table",
+    [`backgroundColor-selectionCell-${COMP$11}--hover`]: `$backgroundColor-row-${COMP$11}--hover`
   }
 });
 const TableWithColumns = memo(
@@ -25058,15 +25072,15 @@ const cardComponentRenderer = wrapComponent(
   }
 );
 const themeVars$s = `'{"padding-ModalDialog": "var(--xmlui-padding-ModalDialog)", "paddingHorizontal-ModalDialog": "var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingVertical-ModalDialog": "var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingLeft-ModalDialog": "var(--xmlui-paddingLeft-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingRight-ModalDialog": "var(--xmlui-paddingRight-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingTop-ModalDialog": "var(--xmlui-paddingTop-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingBottom-ModalDialog": "var(--xmlui-paddingBottom-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "padding-overlay-ModalDialog": "var(--xmlui-padding-overlay-ModalDialog)", "paddingHorizontal-overlay-ModalDialog": "var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingVertical-overlay-ModalDialog": "var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingLeft-overlay-ModalDialog": "var(--xmlui-paddingLeft-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingRight-overlay-ModalDialog": "var(--xmlui-paddingRight-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingTop-overlay-ModalDialog": "var(--xmlui-paddingTop-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingBottom-overlay-ModalDialog": "var(--xmlui-paddingBottom-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "textColor-title-ModalDialog": "var(--xmlui-textColor-title-ModalDialog)", "fontFamily-title-ModalDialog": "var(--xmlui-fontFamily-title-ModalDialog)", "fontSize-title-ModalDialog": "var(--xmlui-fontSize-title-ModalDialog)", "fontStyle-title-ModalDialog": "var(--xmlui-fontStyle-title-ModalDialog)", "fontVariant-title-ModalDialog": "var(--xmlui-fontVariant-title-ModalDialog)", "fontWeight-title-ModalDialog": "var(--xmlui-fontWeight-title-ModalDialog)", "fontStretch-title-ModalDialog": "var(--xmlui-fontStretch-title-ModalDialog)", "textDecorationLine-title-ModalDialog": "var(--xmlui-textDecorationLine-title-ModalDialog)", "textDecorationColor-title-ModalDialog": "var(--xmlui-textDecorationColor-title-ModalDialog)", "textDecorationStyle-title-ModalDialog": "var(--xmlui-textDecorationStyle-title-ModalDialog)", "textDecorationThickness-title-ModalDialog": "var(--xmlui-textDecorationThickness-title-ModalDialog)", "textUnderlineOffset-title-ModalDialog": "var(--xmlui-textUnderlineOffset-title-ModalDialog)", "lineHeight-title-ModalDialog": "var(--xmlui-lineHeight-title-ModalDialog)", "backgroundColor-title-ModalDialog": "var(--xmlui-backgroundColor-title-ModalDialog)", "textTransform-title-ModalDialog": "var(--xmlui-textTransform-title-ModalDialog)", "letterSpacing-title-ModalDialog": "var(--xmlui-letterSpacing-title-ModalDialog)", "wordSpacing-title-ModalDialog": "var(--xmlui-wordSpacing-title-ModalDialog)", "textShadow-title-ModalDialog": "var(--xmlui-textShadow-title-ModalDialog)", "textIndent-title-ModalDialog": "var(--xmlui-textIndent-title-ModalDialog)", "textAlign-title-ModalDialog": "var(--xmlui-textAlign-title-ModalDialog)", "textAlignLast-title-ModalDialog": "var(--xmlui-textAlignLast-title-ModalDialog)", "wordBreak-title-ModalDialog": "var(--xmlui-wordBreak-title-ModalDialog)", "wordWrap-title-ModalDialog": "var(--xmlui-wordWrap-title-ModalDialog)", "direction-title-ModalDialog": "var(--xmlui-direction-title-ModalDialog)", "writingMode-title-ModalDialog": "var(--xmlui-writingMode-title-ModalDialog)", "lineBreak-title-ModalDialog": "var(--xmlui-lineBreak-title-ModalDialog)", "Dialog:backgroundColor-ModalDialog": "var(--xmlui-backgroundColor-ModalDialog)", "Dialog:backgroundColor-overlay-ModalDialog": "var(--xmlui-backgroundColor-overlay-ModalDialog)", "Dialog:borderRadius-ModalDialog": "var(--xmlui-borderRadius-ModalDialog)", "Dialog:fontFamily-ModalDialog": "var(--xmlui-fontFamily-ModalDialog)", "Dialog:textColor-ModalDialog": "var(--xmlui-textColor-ModalDialog)", "Dialog:minWidth-ModalDialog": "var(--xmlui-minWidth-ModalDialog)", "Dialog:maxWidth-ModalDialog": "var(--xmlui-maxWidth-ModalDialog)", "Dialog:maxHeight-ModalDialog": "var(--xmlui-maxHeight-ModalDialog)", "Dialog:marginBottom-title-ModalDialog": "var(--xmlui-marginBottom-title-ModalDialog)"}'`;
-const overlay$2 = "_overlay_wrfrc_14";
-const fullScreen = "_fullScreen_wrfrc_22";
-const content$2 = "_content_wrfrc_28";
-const overlayBg$1 = "_overlayBg_wrfrc_37";
-const nested = "_nested_wrfrc_43";
-const contentAnimation = "_contentAnimation_wrfrc_74";
-const dialogTitle = "_dialogTitle_wrfrc_80";
-const innerContent = "_innerContent_wrfrc_109";
-const closeButton$2 = "_closeButton_wrfrc_135";
+const overlay$2 = "_overlay_nc6kd_14";
+const fullScreen = "_fullScreen_nc6kd_22";
+const content$2 = "_content_nc6kd_28";
+const overlayBg$1 = "_overlayBg_nc6kd_37";
+const nested = "_nested_nc6kd_43";
+const contentAnimation = "_contentAnimation_nc6kd_74";
+const dialogTitle = "_dialogTitle_nc6kd_80";
+const innerContent = "_innerContent_nc6kd_109";
+const closeButton$2 = "_closeButton_nc6kd_135";
 const styles$I = {
   themeVars: themeVars$s,
   overlay: overlay$2,
@@ -25419,7 +25433,9 @@ const modalViewComponentRenderer = wrapComponent(
                     ...contextVars,
                     $param: openParams?.[0],
                     $params: openParams
-                  }
+                  },
+                  vars: node._savedVarDefs,
+                  functions: node._savedFunctionDefs
                 }
               );
             }
@@ -27021,6 +27037,7 @@ const queueComponentRenderer = wrapComponent(COMP$N, QueueWithContextVar, QueueM
     }
   )
 });
+const warnedLayoutForwardTypes = /* @__PURE__ */ new Set();
 const CompoundComponent = forwardRef(
   ({
     node,
@@ -27042,6 +27059,9 @@ const CompoundComponent = forwardRef(
     contextVars,
     // Extract contextVars to prevent it from being passed to DOM elements
     globalVars,
+    // Strip XMLUI-internal props that must never be forwarded to inner DOM elements
+    logInteraction: _logInteraction,
+    classes: _classes,
     ...restProps
   }, forwardedRef) => {
     const resolvedPropsInner = useMemo(() => {
@@ -27133,8 +27153,20 @@ const CompoundComponent = forwardRef(
         children: node.children
       };
     }, [hasTemplateProps, node.children, node.props, renderChild2]);
-    const safeLayoutContext = layoutContext ? { ...layoutContext, wrapChild: void 0 } : layoutContext;
+    const extraClassName = restProps.className;
+    const safeLayoutContext = extraClassName ? { ...layoutContext ?? {}, wrapChild: void 0, extraClassName } : layoutContext ? { ...layoutContext, wrapChild: void 0 } : layoutContext;
     const ret = renderChild2(nodeWithPropsAndEvents, safeLayoutContext, memoedParentRenderContext);
+    if (process.env.NODE_ENV !== "production" && extraClassName) {
+      if (compound.type === "Fragment") {
+        const usedLayoutProps = layoutOptionKeys.filter((key) => key in node.props);
+        if (usedLayoutProps.length > 0 && !warnedLayoutForwardTypes.has(node.type)) {
+          warnedLayoutForwardTypes.add(node.type);
+          console.warn(
+            `[XMLUI] Component '${node.type}' has layout props (${usedLayoutProps.join(", ")}) but its template has multiple root children — layout props cannot be forwarded. Wrap the template content in a single root element to enable layout forwarding.`
+          );
+        }
+      }
+    }
     if (forwardedRef && ret && isValidElement(ret)) {
       return React__default.cloneElement(ret, {
         ref: composeRefs(forwardedRef, ret.ref),
@@ -27257,7 +27289,8 @@ function useListData({
     if (groupBy$1 === void 0) {
       return EMPTY_OBJECT;
     }
-    return groupBy(cappedItems, (item2) => item2[groupBy$1]);
+    const iteratee = typeof groupBy$1 === "function" ? groupBy$1 : (item2) => item2[groupBy$1];
+    return groupBy(cappedItems, iteratee);
   }, [cappedItems, groupBy$1]);
   const sections = useMemo(() => {
     if (groupBy$1 === void 0) {
@@ -28054,7 +28087,7 @@ const ListMd = createMetadata({
       defaultValue: false
     },
     groupBy: d(
-      "This property sets which data item property is used to group the list items. If not set, no grouping is done."
+      "This property sets which data item property is used to group the list items. Accepts a field name string or a function that receives an item and returns the group key. If not set, no grouping is done."
     ),
     orderBy: d(
       `This optioanl property enables the ordering of list items by specifying an attribute in the data.`
@@ -28113,6 +28146,9 @@ const ListMd = createMetadata({
     syncWithVar: d(
       `The name of a global variable to synchronize the list's selection state with. The named variable must reference an object; the list will read from and write to its 'selectedIds' property. When provided, this takes precedence over \`initiallySelected\`.`
     ),
+    refreshOn: d(
+      `Bind this property to a global variable (or expression) whose change should force all visible list items to re-render and pick up the latest reactive state. When not set, items re-render on every XMLUI reactive cycle (safe but less optimal). When set, items only re-render when the bound value changes, which eliminates spurious re-renders from unrelated global-variable updates (e.g. focus events).`
+    ),
     rowUnselectablePredicate: {
       description: `This property defines a predicate function with a return value that determines if the row should be unselectable. The function retrieves the item to display and should return a Boolean-like value. This property only has an effect when the \`rowsSelectable\` property is set to \`true\`.`
     },
@@ -28279,6 +28315,29 @@ const ListMd = createMetadata({
   }
 });
 const VALID_IDENTIFIER_RE$1 = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+const ListMemoizedItem = memo(
+  ({ node, renderChild: renderChild2, layoutContext, contextVars }) => /* @__PURE__ */ jsx(
+    MemoizedItem,
+    {
+      node,
+      renderChild: renderChild2,
+      layoutContext,
+      contextVars
+    }
+  ),
+  (prev, next) => {
+    if (prev.renderVersion !== next.renderVersion) return false;
+    if (prev.node !== next.node) return false;
+    const prevVars = prev.contextVars ?? EMPTY_OBJECT;
+    const nextVars = next.contextVars ?? EMPTY_OBJECT;
+    const keys = Object.keys(nextVars);
+    if (keys.length !== Object.keys(prevVars).length) return false;
+    for (const k of keys) {
+      if (prevVars[k] !== nextVars[k]) return false;
+    }
+    return true;
+  }
+);
 const ListWithSelection = memo(function ListWithSelection2({
   extractValue,
   node,
@@ -28294,10 +28353,30 @@ const ListWithSelection = memo(function ListWithSelection2({
   const itemTemplate = node.props.itemTemplate;
   const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
   const selectionContext = useSelectionContext();
+  const renderChildRef = useRef(renderChild2);
+  renderChildRef.current = renderChild2;
+  const layoutContextRef = useRef(layoutContext);
+  layoutContextRef.current = layoutContext;
+  const stableRenderChildFnRef = useRef(
+    (node2, ctx) => renderChildRef.current(node2, ctx)
+  );
+  const refreshOn = extractValue(node.props.refreshOn);
+  const prevRefreshOnRef = useRef(refreshOn);
+  const renderVersionRef = useRef(0);
+  const shouldForceRefresh = node.props.refreshOn === void 0 || prevRefreshOnRef.current !== refreshOn;
+  if (shouldForceRefresh) {
+    prevRefreshOnRef.current = refreshOn;
+    renderVersionRef.current++;
+  }
   const syncVarName = extractValue.asOptionalString(node.props.syncWithVar);
   const lookupActionRef = useRef(lookupAction);
   lookupActionRef.current = lookupAction;
   const syncAdapterHolderRef = useRef(null);
+  const pendingOwnWriteRef = useRef(false);
+  const pendingOwnWriteVersionRef = useRef(0);
+  const ownWriteCountRef = useRef(0);
+  const pendingOwnWrite = pendingOwnWriteRef.current;
+  pendingOwnWriteRef.current = false;
   let syncAdapter;
   if (syncVarName !== void 0) {
     if (!VALID_IDENTIFIER_RE$1.test(syncVarName)) {
@@ -28310,14 +28389,31 @@ const ListWithSelection = memo(function ListWithSelection2({
           syncAdapterHolderRef.current = {
             value: currentSyncVarValue,
             update: ({ selectedIds }) => {
-              const valueJson = JSON.stringify(selectedIds);
-              const expr = `{${syncVarName} = {selectedIds: ${valueJson}}}`;
-              const handler = lookupActionRef.current?.(expr, { ephemeral: true });
-              handler?.();
+              pendingOwnWriteRef.current = true;
+              const thisVersion = ++ownWriteCountRef.current;
+              pendingOwnWriteVersionRef.current = thisVersion;
+              const windowKey = `__listSync_${syncVarName}`;
+              window[windowKey] = { selectedIds, __v: thisVersion };
+              const handler = lookupActionRef.current?.(
+                `{${syncVarName} = window.${windowKey}}`,
+                { ephemeral: true }
+              );
+              startTransition(() => {
+                handler?.();
+              });
             }
           };
-        } else {
-          syncAdapterHolderRef.current.value = currentSyncVarValue;
+        } else if (currentSyncVarValue !== syncAdapterHolderRef.current.value) {
+          const isOwnWrite = pendingOwnWrite || pendingOwnWriteVersionRef.current > 0 && currentSyncVarValue?.__v === pendingOwnWriteVersionRef.current;
+          if (isOwnWrite) {
+            syncAdapterHolderRef.current.value = currentSyncVarValue;
+          } else {
+            pendingOwnWriteVersionRef.current = 0;
+            syncAdapterHolderRef.current = {
+              value: currentSyncVarValue,
+              update: syncAdapterHolderRef.current.update
+            };
+          }
         }
       } else {
         syncAdapterHolderRef.current = null;
@@ -28327,6 +28423,58 @@ const ListWithSelection = memo(function ListWithSelection2({
     syncAdapterHolderRef.current = null;
   }
   syncAdapter = syncAdapterHolderRef.current;
+  const stableItemRenderer = useMemo(
+    () => itemTemplate ? (item2, key, rowIndex, count, isSelected) => /* @__PURE__ */ jsx(
+      ListMemoizedItem,
+      {
+        node: itemTemplate,
+        renderChild: stableRenderChildFnRef.current,
+        layoutContext: layoutContextRef.current,
+        renderVersion: renderVersionRef.current,
+        contextVars: {
+          $item: item2,
+          $itemIndex: rowIndex,
+          $isFirst: rowIndex === 0,
+          $isLast: rowIndex === count - 1,
+          $isSelected: isSelected
+        }
+      },
+      key
+    ) : void 0,
+    // idKey is included because it is captured by itemTemplate renders via $item[idKey].
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemTemplate, idKey]
+  );
+  const stableSectionRenderer = useMemo(
+    () => node.props.groupBy ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
+      MemoizedSection,
+      {
+        node: node.props.groupHeaderTemplate ?? { type: "Fragment" },
+        renderChild: stableRenderChildFnRef.current,
+        item: item2
+      },
+      key
+    ) : null : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [node.props.groupBy, node.props.groupHeaderTemplate, hideEmptyGroups]
+  );
+  const stableSectionFooterRenderer = useMemo(
+    () => node.props.groupFooterTemplate ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
+      MemoizedItem,
+      {
+        node: node.props.groupFooterTemplate ?? { type: "Fragment" },
+        renderChild: stableRenderChildFnRef.current,
+        contextVars: {
+          $group: item2
+        }
+      },
+      key
+    ) : null : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [node.props.groupFooterTemplate, hideEmptyGroups]
+  );
+  const groupByExtracted = extractValue(node.props.groupBy);
+  const groupByResolved = isArrowExpressionObject$1(groupByExtracted) ? lookupSyncCallback(node.props.groupBy) : groupByExtracted;
   const listContent = /* @__PURE__ */ jsx(
     ListNative,
     {
@@ -28335,7 +28483,7 @@ const ListWithSelection = memo(function ListWithSelection2({
       loading: extractValue.asOptionalBoolean(node.props.loading),
       items: extractValue(node.props.items) || extractValue(node.props.data),
       limit: extractValue(node.props.limit),
-      groupBy: extractValue(node.props.groupBy),
+      groupBy: groupByResolved,
       orderBy: extractValue(node.props.orderBy),
       availableGroups: extractValue(node.props.availableGroups),
       scrollAnchor: node.props.scrollAnchor,
@@ -28368,44 +28516,9 @@ const ListWithSelection = memo(function ListWithSelection2({
       onDeleteAction: lookupEventHandler("deleteAction"),
       rowDoubleClick: lookupEventHandler("rowDoubleClick"),
       keyBindings: extractValue(node.props.keyBindings),
-      itemRenderer: itemTemplate && ((item2, key, rowIndex, count, isSelected) => {
-        return /* @__PURE__ */ jsx(
-          MemoizedItem,
-          {
-            node: itemTemplate,
-            renderChild: renderChild2,
-            layoutContext,
-            contextVars: {
-              $item: item2,
-              $itemIndex: rowIndex,
-              $isFirst: rowIndex === 0,
-              $isLast: rowIndex === count - 1,
-              $isSelected: isSelected
-            }
-          },
-          key
-        );
-      }),
-      sectionRenderer: node.props.groupBy ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
-        MemoizedSection,
-        {
-          node: node.props.groupHeaderTemplate ?? { type: "Fragment" },
-          renderChild: renderChild2,
-          item: item2
-        },
-        key
-      ) : null : void 0,
-      sectionFooterRenderer: node.props.groupFooterTemplate ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
-        MemoizedItem,
-        {
-          node: node.props.groupFooterTemplate ?? { type: "Fragment" },
-          renderChild: renderChild2,
-          contextVars: {
-            $group: item2
-          }
-        },
-        key
-      ) : null : void 0
+      itemRenderer: stableItemRenderer,
+      sectionRenderer: stableSectionRenderer,
+      sectionFooterRenderer: stableSectionFooterRenderer
     }
   );
   if (selectionContext === null) {
@@ -29008,6 +29121,8 @@ const TileGridWithSync = memo(
     const prevRefreshOnRef = useRef(refreshOn);
     const renderVersionRef = useRef(0);
     const pendingOwnWriteRef = useRef(false);
+    const pendingOwnWriteVersionRef = useRef(0);
+    const ownWriteCountRef = useRef(0);
     const pendingOwnWrite = pendingOwnWriteRef.current;
     pendingOwnWriteRef.current = false;
     const shouldForceRefresh = node.props.refreshOn === void 0 || prevRefreshOnRef.current !== refreshOn;
@@ -29028,20 +29143,26 @@ const TileGridWithSync = memo(
               value: currentValue,
               update: ({ selectedIds }) => {
                 const windowKey = `__tgSync_${syncVarName}`;
-                window[windowKey] = selectedIds;
+                pendingOwnWriteRef.current = true;
+                const thisVersion = ++ownWriteCountRef.current;
+                pendingOwnWriteVersionRef.current = thisVersion;
+                window[windowKey] = { selectedIds, __v: thisVersion };
                 const handler = lookupActionRef.current?.(
-                  `{${syncVarName} = {selectedIds: window.${windowKey}}}`,
+                  `{${syncVarName} = {selectedIds: window.${windowKey}.selectedIds, __v: window.${windowKey}.__v}}`,
                   { ephemeral: true }
                 );
-                pendingOwnWriteRef.current = true;
                 startTransition(() => {
                   handler?.();
                 });
               }
             };
           } else if (currentValue !== syncAdapterHolderRef.current.value) {
-            if (pendingOwnWrite) {
+            const isOwnWrite = pendingOwnWrite || pendingOwnWriteVersionRef.current > 0 && currentValue?.__v === pendingOwnWriteVersionRef.current;
+            if (isOwnWrite) {
               syncAdapterHolderRef.current.value = currentValue;
+              if (currentValue?.__v === pendingOwnWriteVersionRef.current) {
+                pendingOwnWriteVersionRef.current = 0;
+              }
             } else {
               syncAdapterHolderRef.current = {
                 value: currentValue,
@@ -32202,12 +32323,14 @@ const datePickerComponentRenderer = wrapComponent(
   }
 );
 const themeVars$g = `'{"gap-Form": "var(--xmlui-gap-Form)", "gap-buttonRow-Form": "var(--xmlui-gap-buttonRow-Form)", "marginTop-buttonRow-Form": "var(--xmlui-marginTop-buttonRow-Form)", "paddingTop-buttonRow-Form": "var(--xmlui-paddingTop-buttonRow-Form)", "backgroundColor-Form": "var(--xmlui-backgroundColor-Form)", "backgroundColor-buttonRow-Form": "var(--xmlui-backgroundColor-buttonRow-Form)"}'`;
-const formWrapper = "_formWrapper_1daax_14";
-const buttonRow = "_buttonRow_1daax_20";
-const stickyButtonRow = "_stickyButtonRow_1daax_28";
+const formWrapper = "_formWrapper_1rntd_14";
+const stickyForm = "_stickyForm_1rntd_20";
+const buttonRow = "_buttonRow_1rntd_23";
+const stickyButtonRow = "_stickyButtonRow_1rntd_31";
 const styles$v = {
   themeVars: themeVars$g,
   formWrapper,
+  stickyForm,
   buttonRow,
   stickyButtonRow
 };
@@ -33276,7 +33399,7 @@ const Form = forwardRef(function({
         ...rest,
         noValidate: true,
         style: style2,
-        className: classnames(styles$v.formWrapper, classes?.[COMPONENT_PART_KEY], className),
+        className: classnames(styles$v.formWrapper, { [styles$v.stickyForm]: stickyButtonRow2 }, classes?.[COMPONENT_PART_KEY], className),
         onSubmit: doSubmit,
         onReset: doReset,
         id,
@@ -37517,6 +37640,11 @@ const AppMd = createMetadata({
       valueType: "boolean",
       defaultValue: defaultProps$Y.scrollWholePage
     },
+    fitContent: {
+      description: `When \`true\`, the app sizes itself to its content's natural height rather than filling its container's viewport. Intended for embedding an app inside an iframe or as a block within a larger page: the host page becomes the sole scroll container. This overrides \`scrollWholePage\`'s viewport pinning.`,
+      valueType: "boolean",
+      defaultValue: defaultProps$Y.fitContent
+    },
     noScrollbarGutters: {
       description: "This boolean property specifies whether the scrollbar gutters should be hidden.",
       valueType: "boolean",
@@ -37660,11 +37788,13 @@ function AppNode({ node, extractValue, renderChild: renderChild2, classes, looku
   const applyDefaultContentPadding = !Pages2 && !hasExplicitPadding;
   const footerSticky = Footer3?.props?.sticky !== void 0 ? extractValue.asOptionalBoolean(Footer3.props.sticky, true) : true;
   const scrollWholePage2 = extractValue.asOptionalBoolean(node.props.scrollWholePage, true);
+  const fitContent2 = extractValue.asOptionalBoolean(node.props.fitContent, false);
   const contentLayoutContext = !scrollWholePage2 ? { type: "Stack", orientation: "vertical" } : void 0;
   return /* @__PURE__ */ jsxs(
     App,
     {
       scrollWholePage: scrollWholePage2,
+      fitContent: fitContent2,
       noScrollbarGutters: extractValue.asOptionalBoolean(node.props.noScrollbarGutters, false),
       classes,
       layout: extractValue(node.props.layout),
@@ -38482,6 +38612,7 @@ const formSectionRenderer = createUserDefinedComponentRenderer(
 const COMP$s = "Switch";
 const SwitchMd = createMetadata({
   status: "stable",
+  compactInlineLabel: true,
   description: "`Switch` enables users to toggle between two states: on and off.",
   parts: {
     label: {
@@ -41793,6 +41924,7 @@ async function callApi({ state, appContext, lookupAction, getCurrentState, apiIn
   uid: actionUid,
   onProgress,
   omitTransactionId,
+  onMockExecute,
   onResponseHeaders,
   //operation
   headers,
@@ -41861,40 +41993,61 @@ async function callApi({ state, appContext, lookupAction, getCurrentState, apiIn
     resolvedBody = rawBody || body2;
   }
   try {
-    const operation = {
-      headers,
-      url,
-      queryParams,
-      rawBody,
-      method,
-      body: body2,
-      payloadType,
-      credentials
-    };
-    const _onProgress = lookupAction(onProgress, uid, {
-      eventName: "progress"
-    });
-    const apiTraceId = getCurrentTrace();
-    traceApiCall(appContext, "api:start", resolvedUrl, resolvedMethod, {
-      transactionId: clientTxId,
-      body: resolvedBody
-    });
-    const result = await new RestApiProxy(appContext, apiInstance).execute({
-      operation,
-      params: stateContext,
-      transactionId: clientTxId,
-      omitTransactionId,
-      resolveBindingExpressions,
-      onProgress: _onProgress,
-      onResponseHeaders
-    });
-    traceApiCall(appContext, "api:complete", resolvedUrl, resolvedMethod, {
-      transactionId: clientTxId,
-      body: resolvedBody,
-      result,
-      status: getLastApiStatus(clientTxId),
-      _traceId: apiTraceId
-    });
+    let result;
+    if (onMockExecute) {
+      const resolvedMockQueryParams = extractParam(stateContext, queryParams, appContext) || {};
+      const resolvedMockBody = rawBody ? extractParam(stateContext, rawBody, appContext) : body2 ? extractParam(stateContext, body2, appContext) : void 0;
+      const resolvedMockHeaders = extractParam(stateContext, headers, appContext) || {};
+      const mockFn = lookupAction(onMockExecute, uid, {
+        eventName: "mockExecute",
+        context: {
+          ...getCurrentState(),
+          $pathParams: {},
+          $queryParams: resolvedMockQueryParams,
+          $requestBody: resolvedMockBody,
+          $cookies: {},
+          $requestHeaders: resolvedMockHeaders,
+          $param: stateContext["$param"],
+          $params: stateContext["$params"]
+        }
+      });
+      result = await mockFn?.();
+    } else {
+      const operation = {
+        headers,
+        url,
+        queryParams,
+        rawBody,
+        method,
+        body: body2,
+        payloadType,
+        credentials
+      };
+      const _onProgress = lookupAction(onProgress, uid, {
+        eventName: "progress"
+      });
+      const apiTraceId = getCurrentTrace();
+      traceApiCall(appContext, "api:start", resolvedUrl, resolvedMethod, {
+        transactionId: clientTxId,
+        body: resolvedBody
+      });
+      result = await new RestApiProxy(appContext, apiInstance).execute({
+        operation,
+        params: stateContext,
+        transactionId: clientTxId,
+        omitTransactionId,
+        resolveBindingExpressions,
+        onProgress: _onProgress,
+        onResponseHeaders
+      });
+      traceApiCall(appContext, "api:complete", resolvedUrl, resolvedMethod, {
+        transactionId: clientTxId,
+        body: resolvedBody,
+        result,
+        status: getLastApiStatus(clientTxId),
+        _traceId: apiTraceId
+      });
+    }
     const onSuccessFn = typeof onSuccess === "function" ? onSuccess : lookupAction(onSuccess, uid, { eventName: "success", context: getCurrentState() });
     const onSuccessResult = await onSuccessFn?.(result, stateContext["$param"]);
     updateQueriesWithResult(
@@ -42845,6 +42998,7 @@ const labelBehavior = {
         isInputTemplateUsed: !!componentNode.props?.inputTemplate,
         direction,
         layoutContext,
+        compactInlineLabel: !!metadata?.compactInlineLabel,
         children: node
       }
     );
@@ -42947,7 +43101,7 @@ function VariantWrapper({
     }
     variantSpec[selector][cssProperty] = cssVarValue;
   }
-  const customVariantClassName = useStyles(variantSpec, { layer: "themes" });
+  const customVariantClassName = useStyles(variantSpec, { layer: "dynamic" });
   const isItemWithLabel = children.type === ItemWithLabel;
   if (isItemWithLabel && children.props?.children) {
     const innerChild = children.props.children;
@@ -43139,7 +43293,9 @@ function FormBindingWrapper({
   const childRegisterComponentApi = children?.props?.registerComponentApi;
   const onStateChange = useCallback(
     ({ value: value2 }, options2) => {
-      childUpdateState?.({ value: value2 }, options2);
+      if (!options2?.formOnly) {
+        childUpdateState?.({ value: value2 }, options2);
+      }
       if (!isInsideForm) return;
       if (!options2?.initial) {
         dispatch(fieldChanged(formItemId, value2));
@@ -44686,15 +44842,15 @@ function DataLoader({
   const loaded = useCallback(
     (data, pageInfo) => {
       if (xsVerbose) {
-        const before = prevDataRef.current;
-        const after = data;
+        const before2 = prevDataRef.current;
+        const after2 = data;
         const dataSourceId = loader.props.id || loader.uid || loader.props.url || "DataSource";
         const path = `DataSource:${dataSourceId}`;
         xsLog("state:changes", {
           uid: dataSourceId,
           eventName: `DataSource:${dataSourceId}`,
           instanceId: instanceIdRef.current,
-          diff: [formatDiff(path, before, after)]
+          diff: [formatDiff(path, before2, after2)]
         });
         prevDataRef.current = data;
         pendingTraceIdRef.current = void 0;
@@ -47453,22 +47609,22 @@ const redirectRenderer = wrapComponent(COMP$m, Navigate, RedirectMd, {
     }
   )
 });
-const themeVars$7 = `'{"padding-trigger-Tabs": "var(--xmlui-padding-trigger-Tabs)", "paddingHorizontal-trigger-Tabs": "var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingVertical-trigger-Tabs": "var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingLeft-trigger-Tabs": "var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingRight-trigger-Tabs": "var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingTop-trigger-Tabs": "var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingBottom-trigger-Tabs": "var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "backgroundColor-Tabs": "var(--xmlui-backgroundColor-Tabs)", "borderColor-Tabs": "var(--xmlui-borderColor-Tabs)", "borderWidth-Tabs": "var(--xmlui-borderWidth-Tabs)", "borderColor-active-Tabs": "var(--xmlui-borderColor-active-Tabs)", "backgroundColor-trigger-Tabs": "var(--xmlui-backgroundColor-trigger-Tabs)", "borderRadius-trigger-Tabs": "var(--xmlui-borderRadius-trigger-Tabs)", "border-trigger-Tabs": "var(--xmlui-border-trigger-Tabs)", "textColor-trigger-Tabs": "var(--xmlui-textColor-trigger-Tabs)", "textColor-trigger-Tabs--active": "var(--xmlui-textColor-trigger-Tabs--active)", "textColor-trigger-Tabs--hover": "var(--xmlui-textColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--hover": "var(--xmlui-backgroundColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--active": "var(--xmlui-backgroundColor-trigger-Tabs--active)", "backgroundColor-list-Tabs": "var(--xmlui-backgroundColor-list-Tabs)", "borderRadius-list-Tabs": "var(--xmlui-borderRadius-list-Tabs)", "border-list-Tabs": "var(--xmlui-border-list-Tabs)", "gap-list-Tabs": "var(--xmlui-gap-list-Tabs)"}'`;
-const tabs = "_tabs_1coc2_14";
-const filler = "_filler_1coc2_26";
-const tabTrigger = "_tabTrigger_1coc2_39";
-const distributeEvenly = "_distributeEvenly_1coc2_46";
-const tabsList = "_tabsList_1coc2_97";
-const alignStart = "_alignStart_1coc2_115";
-const alignEnd = "_alignEnd_1coc2_118";
-const alignCenter = "_alignCenter_1coc2_121";
-const alignStretch = "_alignStretch_1coc2_124";
-const tabsContent = "_tabsContent_1coc2_130";
-const accordionView = "_accordionView_1coc2_134";
-const accordionRoot = "_accordionRoot_1coc2_137";
-const accordionInterleaved = "_accordionInterleaved_1coc2_142";
-const accordionList = "_accordionList_1coc2_147";
-const accordionTrigger = "_accordionTrigger_1coc2_159";
+const themeVars$7 = `'{"padding-trigger-Tabs": "var(--xmlui-padding-trigger-Tabs)", "paddingHorizontal-trigger-Tabs": "var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingVertical-trigger-Tabs": "var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingLeft-trigger-Tabs": "var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingRight-trigger-Tabs": "var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingTop-trigger-Tabs": "var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingBottom-trigger-Tabs": "var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "backgroundColor-Tabs": "var(--xmlui-backgroundColor-Tabs)", "borderColor-Tabs": "var(--xmlui-borderColor-Tabs)", "borderWidth-Tabs": "var(--xmlui-borderWidth-Tabs)", "borderColor-active-Tabs": "var(--xmlui-borderColor-active-Tabs)", "backgroundColor-trigger-Tabs": "var(--xmlui-backgroundColor-trigger-Tabs)", "borderRadius-trigger-Tabs": "var(--xmlui-borderRadius-trigger-Tabs)", "border-trigger-Tabs": "var(--xmlui-border-trigger-Tabs)", "textColor-trigger-Tabs": "var(--xmlui-textColor-trigger-Tabs)", "textColor-trigger-Tabs--active": "var(--xmlui-textColor-trigger-Tabs--active)", "textColor-trigger-Tabs--hover": "var(--xmlui-textColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--hover": "var(--xmlui-backgroundColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--active": "var(--xmlui-backgroundColor-trigger-Tabs--active)", "backgroundColor-list-Tabs": "var(--xmlui-backgroundColor-list-Tabs)", "borderRadius-list-Tabs": "var(--xmlui-borderRadius-list-Tabs)", "border-list-Tabs": "var(--xmlui-border-list-Tabs)", "gap-list-Tabs": "var(--xmlui-gap-list-Tabs)", "paddingTop-TabItem": "var(--xmlui-paddingTop-TabItem)"}'`;
+const tabs = "_tabs_unyqa_14";
+const filler = "_filler_unyqa_26";
+const tabTrigger = "_tabTrigger_unyqa_39";
+const distributeEvenly = "_distributeEvenly_unyqa_46";
+const tabsList = "_tabsList_unyqa_97";
+const alignStart = "_alignStart_unyqa_115";
+const alignEnd = "_alignEnd_unyqa_118";
+const alignCenter = "_alignCenter_unyqa_121";
+const alignStretch = "_alignStretch_unyqa_124";
+const tabsContent = "_tabsContent_unyqa_130";
+const accordionView = "_accordionView_unyqa_135";
+const accordionRoot = "_accordionRoot_unyqa_138";
+const accordionInterleaved = "_accordionInterleaved_unyqa_143";
+const accordionList = "_accordionList_unyqa_148";
+const accordionTrigger = "_accordionTrigger_unyqa_160";
 const styles$h = {
   themeVars: themeVars$7,
   tabs,
@@ -47493,9 +47649,10 @@ const TabContext = createContext({
   unRegister: (innerId) => {
   },
   activeTabId: "",
-  getTabItems: () => []
+  getTabItems: () => [],
+  keepMounted: false
 });
-function useTabContextValue() {
+function useTabContextValue(keepMounted = false) {
   const [tabItems, setTabItems] = useState(EMPTY_ARRAY);
   const tabItemsRef = useRef(EMPTY_ARRAY);
   tabItemsRef.current = tabItems;
@@ -47528,9 +47685,10 @@ function useTabContextValue() {
       unRegister,
       activeTabId,
       setActiveTabId,
-      getTabItems
+      getTabItems,
+      keepMounted
     };
-  }, [register, unRegister, activeTabId, getTabItems]);
+  }, [register, unRegister, activeTabId, getTabItems, keepMounted]);
   return {
     tabItems,
     tabContextValue
@@ -47544,7 +47702,8 @@ const defaultProps$c = {
   orientation: "horizontal",
   tabAlignment: "start",
   accordionView: false,
-  distributeEvenly: false
+  distributeEvenly: false,
+  keepMounted: void 0
 };
 const Tabs = forwardRef(function Tabs2({
   activeTab = defaultProps$c.activeTab,
@@ -47561,9 +47720,13 @@ const Tabs = forwardRef(function Tabs2({
   distributeEvenly: distributeEvenly2 = defaultProps$c.distributeEvenly,
   onDidChange = noop$1,
   onContextMenu,
+  keepMounted = defaultProps$c.keepMounted,
+  gap,
   ...rest
 }, forwardedRef) {
-  const { tabItems, tabContextValue } = useTabContextValue();
+  const isInsideForm = useIsInsideForm();
+  const resolvedKeepMounted = keepMounted ?? isInsideForm;
+  const { tabItems, tabContextValue } = useTabContextValue(resolvedKeepMounted);
   const _id = useId();
   const tabsId = id || _id;
   const validActiveTab = useMemo(() => {
@@ -47630,7 +47793,7 @@ const Tabs = forwardRef(function Tabs2({
         id: tabsId,
         ref: forwardedRef,
         className: classnames(styles$h.tabs, styles$h.accordionView, classes?.[COMPONENT_PART_KEY], className),
-        style: style2,
+        style: { ...style2, ...gap !== void 0 ? { "--paddingTop-TabItem": gap } : {} },
         children: /* @__PURE__ */ jsx(
           Root$2,
           {
@@ -47726,7 +47889,7 @@ const Tabs = forwardRef(function Tabs2({
         }
       },
       orientation,
-      style: style2,
+      style: { ...style2, ...gap !== void 0 ? { "--paddingTop-TabItem": gap } : {} },
       children: [
         /* @__PURE__ */ jsxs(
           List,
@@ -47798,6 +47961,14 @@ const TabsMd = createMetadata({
     },
     headerTemplate: {
       ...dComponent(`This property declares the template for the clickable tab area.`)
+    },
+    keepMounted: {
+      description: `When enabled, all tab panels remain mounted in the DOM even when not active — inactive panels are hidden with \`display: none\`. This ensures that form fields inside non-visible tabs stay registered with an enclosing Form. Defaults to \`true\` when the Tabs component is inside a Form, \`false\` otherwise.`,
+      valueType: "boolean"
+    },
+    gap: {
+      description: `Sets the gap (padding) between the tab header strip and the active tab panel content. Accepts any valid CSS length (e.g. \`"8px"\`, \`"1rem"\`). When set, this overrides the \`paddingTop-TabItem\` theme variable.`,
+      valueType: "string"
     }
   },
   events: {
@@ -47836,7 +48007,8 @@ const TabsMd = createMetadata({
     [`textColor-trigger-${COMP$l}`]: "$color-primary-600",
     [`textColor-trigger-${COMP$l}--active`]: "$color-primary-900",
     [`textColor-trigger-${COMP$l}--hover`]: "$color-primary-900",
-    [`gap-list-${COMP$l}`]: "0px"
+    [`gap-list-${COMP$l}`]: "0px",
+    [`paddingTop-TabItem`]: "$gap-normal"
   }
 });
 const ThemedTabs = React__default.forwardRef(
@@ -47858,7 +48030,7 @@ const tabsComponentRenderer = wrapComponent(
   TabsMd,
   {
     exposeRegisterApi: true,
-    exclude: ["activeTab", "orientation", "tabAlignment", "accordionView", "headerTemplate"],
+    exclude: ["activeTab", "orientation", "tabAlignment", "accordionView", "headerTemplate", "keepMounted", "gap"],
     events: [],
     customRender(_props, { extractValue, node, renderChild: renderChild2, classes, registerComponentApi, lookupEventHandler }) {
       return /* @__PURE__ */ jsx(
@@ -47880,6 +48052,8 @@ const tabsComponentRenderer = wrapComponent(
           orientation: extractValue(node.props?.orientation),
           tabAlignment: extractValue(node.props?.tabAlignment),
           accordionView: extractValue(node.props?.accordionView),
+          keepMounted: extractValue.asOptionalBoolean(node.props?.keepMounted),
+          gap: extractValue.asOptionalString(node.props?.gap),
           onDidChange: lookupEventHandler("didChange"),
           onContextMenu: lookupEventHandler("contextMenu"),
           registerComponentApi,
@@ -48649,7 +48823,7 @@ const AccordionMd = createMetadata({
 const accordionComponentRenderer = wrapComponent(COMP$h, AccordionComponent, AccordionMd);
 const TabItemComponent = forwardRef(function TabItemComponent2({ children, label: label2, headerRenderer, style: style2, id, className, classes, activated, ...rest }, forwardedRef) {
   const innerId = useId();
-  const { register, unRegister, activeTabId, getTabItems } = useTabContext();
+  const { register, unRegister, activeTabId, getTabItems, keepMounted } = useTabContext();
   useEffect(() => {
     register({
       label: label2,
@@ -48669,7 +48843,8 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
       activated();
     }
   }, [activeTabId, innerId, activated]);
-  if (activeTabId !== innerId) return null;
+  const isActive = activeTabId === innerId;
+  if (!isActive && !keepMounted) return null;
   const tabItems = getTabItems();
   const tabIndex = tabItems?.findIndex((item2) => item2.innerId === innerId) ?? 0;
   const contentOrder = tabIndex * 2 + 1;
@@ -48679,9 +48854,14 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
       ...rest,
       key: innerId,
       value: innerId,
+      forceMount: keepMounted ? true : void 0,
       className: classnames(styles$h.tabsContent, classes?.[COMPONENT_PART_KEY], className),
       ref: forwardedRef,
-      style: { ...style2, order: contentOrder }
+      style: {
+        ...style2,
+        order: contentOrder,
+        ...keepMounted && !isActive ? { display: "none" } : {}
+      }
     },
     children
   );
@@ -49508,7 +49688,7 @@ function evaluateCondition(conditionExpr, statusData, progress, result, executio
     return false;
   }
 }
-function APICallNative({ registerComponentApi, node, uid, updateState, onSuccess, onStatusUpdate, onTimeout }) {
+function APICallNative({ registerComponentApi, node, uid, updateState, onSuccess, onStatusUpdate, onTimeout, hasMockExecute }) {
   const deferredStateRef = useRef({
     isPolling: false,
     statusData: null,
@@ -49774,6 +49954,7 @@ function APICallNative({ registerComponentApi, node, uid, updateState, onSuccess
             onProgress: node.events?.progress,
             onBeforeRequest: node.events?.beforeRequest,
             onSuccess: onSuccess ?? node.events?.success,
+            onMockExecute: node.events?.mockExecute,
             onResponseHeaders: (h) => {
               capturedResponseHeaders = h;
               lastResponseHeadersRef.current = h;
@@ -50143,6 +50324,11 @@ const APICallMd = createMetadata({
       signature: "() => void",
       parameters: {}
     },
+    mockExecute: {
+      description: "When defined, this event handler replaces the actual API request. The handler receives the resolved request properties as context variables: `$pathParams`, `$queryParams`, `$requestBody`, `$cookies`, `$requestHeaders`. When triggered via the `execute()` method, `$param` and `$params` are also available. The return value of the handler becomes the result of the API call.",
+      signature: "() => any",
+      parameters: {}
+    },
     progress: dInternal()
   },
   contextVars: {
@@ -50152,6 +50338,21 @@ const APICallMd = createMetadata({
     $params: {
       description: "Array of all parameters passed to `execute()` method (access with `$params[0]`, `$params[1]`, etc.)"
     },
+    $pathParams: {
+      description: "Path parameters extracted from the request URL (available in `mockExecute`)"
+    },
+    $queryParams: {
+      description: "Resolved query parameters (available in `mockExecute`)"
+    },
+    $requestBody: {
+      description: "Resolved request body (available in `mockExecute`)"
+    },
+    $cookies: {
+      description: "Request cookies (available in `mockExecute`)"
+    },
+    $requestHeaders: {
+      description: "Resolved request headers (available in `mockExecute`)"
+    },
     $result: {
       description: "Response data (available in `completedNotificationMessage`)"
     },
@@ -50237,7 +50438,8 @@ const apiCallRenderer = createComponentRenderer(
         updateState,
         onSuccess: lookupEventHandler("success"),
         onStatusUpdate: lookupEventHandler("statusUpdate"),
-        onTimeout: lookupEventHandler("timeout")
+        onTimeout: lookupEventHandler("timeout"),
+        hasMockExecute: !!node.events?.mockExecute
       }
     );
   }
@@ -55237,7 +55439,7 @@ function IconProvider({ children, icons }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.12.16";
+const version = "0.12.17";
 function createPubSubService() {
   const subscriptions = /* @__PURE__ */ new Map();
   const publishTopic = (topic, data) => {
@@ -59324,6 +59526,8 @@ const getWrappedWithContainer = (node) => {
     return node;
   }
   const wrappedNode = { ...node, props: { ...node.props } };
+  if (node.vars) wrappedNode._savedVarDefs = node.vars;
+  if (node.functions) wrappedNode._savedFunctionDefs = node.functions;
   delete wrappedNode.loaders;
   delete wrappedNode.vars;
   delete wrappedNode.functions;
@@ -59540,7 +59744,7 @@ function ApiBoundComponent({
         }
         return JSON.stringify(eventData);
       };
-      const { success, error: error2, progress, beforeRequest } = actionComponent.events || {};
+      const { success, error: error2, progress, beforeRequest, mockExecute } = actionComponent.events || {};
       switch (type) {
         case "FileUpload": {
           const {
@@ -59633,6 +59837,7 @@ function ApiBoundComponent({
               onProgress: ${prepareEvent(progress)},
               onBeforeRequest: ${prepareEvent(beforeRequest)},
               onSuccess: ${prepareEvent(success)},
+              onMockExecute: ${prepareEvent(mockExecute)},
               updates: ${JSON.stringify(updates)},
               optimisticValue: ${JSON.stringify(optimisticValue)},
               payloadType: ${JSON.stringify(payloadType)},
@@ -60073,7 +60278,8 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     return { "&": stableLayoutCss, ...stableResponsiveStyleObject };
   }, [stableLayoutCss, stableResponsiveStyleObject]);
   const layoutClassName = useStyles(combinedStyleObject);
-  const className = [themeClassName, layoutClassName].filter(Boolean).join(" ");
+  const extraClassName = layoutContextRef?.current?.extraClassName;
+  const className = [themeClassName, layoutClassName, extraClassName].filter(Boolean).join(" ");
   const memoedClasses = useMemo(() => ({ [COMPONENT_PART_KEY]: className }), [className]);
   const { inspectId, refreshInspection } = useInspector(safeNode, uid);
   const currentWhenValue = resolveResponsiveWhen(
@@ -61039,30 +61245,30 @@ function AppContent({
   const update = useCallback(
     (bucket, patch) => {
       setAppState((prev) => {
-        const before = prev[bucket];
-        const after = {
+        const before2 = prev[bucket];
+        const after2 = {
           ...prev[bucket] || {},
           ...patch
         };
         const next = {
           ...prev,
-          [bucket]: after
+          [bucket]: after2
         };
         if (xsVerbose && typeof window !== "undefined") {
           const w = window;
           const lastInteraction = w._xsLastInteraction;
           const traceId = w._xsCurrentTrace || (!w._xsStartupComplete ? w._xsStartupTrace : void 0) || (lastInteraction && Date.now() - lastInteraction.ts < 2e3 ? lastInteraction.id : void 0);
           const perfTs = typeof performance !== "undefined" ? performance.now() : void 0;
-          const beforeJson = simpleStringify(before);
-          const afterJson = simpleStringify(after);
+          const beforeJson = simpleStringify(before2);
+          const afterJson = simpleStringify(after2);
           const diffPretty = `path: AppState:${bucket}
 ${prefixLines(beforeJson, "- ")}
 ${prefixLines(afterJson, "+ ")}`;
           const diff = {
             path: `AppState:${bucket}`,
             type: "update",
-            before,
-            after,
+            before: before2,
+            after: after2,
             beforeJson,
             afterJson,
             diffText: `path: AppState:${bucket}