xmlui 0.11.10 → 0.11.12

package/dist/lib/{index-DfOJVz5h.js → index-C_siLDTF.js}

@@ -12,8 +12,7 @@ import { formatDistanceToNow, parse, format, parseISO, isValid, isToday, isYeste
 import classnames from "classnames";
 import { c as PART_LABELED_ITEM, d as PART_LABEL, b as PART_INPUT, P as PART_START_ADORNMENT, a as PART_END_ADORNMENT, x as xmlUiMarkupToComponent, e as errReportComponent, f as errReportMessage, g as errReportScriptError, h as errReportModuleErrors } from "./xmlui-parser-CW8YmGjO.js";
 import Color from "color";
-import * as ReactDropdownMenu from "@radix-ui/react-dropdown-menu";
-import { DropdownMenu as DropdownMenu$1, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSub, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuSubContent as DropdownMenuSubContent$1 } from "@radix-ui/react-dropdown-menu";
+import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
 import * as VisuallyHidden$1 from "@radix-ui/react-visually-hidden";
 import { VisuallyHidden as VisuallyHidden$2 } from "@radix-ui/react-visually-hidden";
 import TextareaAutosize from "react-textarea-autosize";
@@ -23,13 +22,13 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { useContextSelector, createContext as createContext$1 } from "use-context-selector";
 import { F as Parser, G as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, H as T_MEMBER_ACCESS_EXPRESSION, I as T_IDENTIFIER, J as T_PREFIX_OP_EXPRESSION, K as T_FUNCTION_DECLARATION, L as T_ARROW_EXPRESSION, M as createXmlUiTreeNodeId, O as T_EMPTY_STATEMENT, Q as T_SWITCH_STATEMENT, R as T_TRY_STATEMENT, V as T_THROW_STATEMENT, W as T_FOR_OF_STATEMENT, X as T_FOR_IN_STATEMENT, Y as T_FOR_STATEMENT, Z as T_EXPRESSION_STATEMENT, _ as T_BREAK_STATEMENT, $ as T_CONTINUE_STATEMENT, a0 as T_DO_WHILE_STATEMENT, a1 as T_WHILE_STATEMENT, a2 as T_RETURN_STATEMENT, a3 as T_IF_STATEMENT, a4 as T_CONST_STATEMENT, a5 as T_LET_STATEMENT, a6 as T_ARROW_EXPRESSION_STATEMENT, a7 as T_BLOCK_STATEMENT, a8 as T_VAR_STATEMENT, a9 as T_ASSIGNMENT_EXPRESSION, aa as T_LITERAL, ab as T_SPREAD_EXPRESSION, ac as T_FUNCTION_INVOCATION_EXPRESSION, ad as T_POSTFIX_OP_EXPRESSION, ae as T_CONDITIONAL_EXPRESSION, af as T_BINARY_EXPRESSION, ag as T_UNARY_EXPRESSION, ah as T_OBJECT_LITERAL, ai as T_ARRAY_LITERAL, aj as T_SEQUENCE_EXPRESSION, ak as T_TEMPLATE_LITERAL_EXPRESSION, al as T_VAR_DECLARATION, am as T_DESTRUCTURE, an as PARSED_MARK_PROP, ao as collectCodeBehindFromSource, ap as removeCodeBehindTokensFromTree } from "./transform-CQ_6R-43.js";
 import memoizeOne from "memoize-one";
+import { DropdownMenu as DropdownMenu$1, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSub, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuSubContent as DropdownMenuSubContent$1 } from "@radix-ui/react-dropdown-menu";
 import { Virtualizer } from "virtua";
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { RenderPropSticky } from "react-sticky-el";
 import * as dropzone from "react-dropzone";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
-import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import { DayPicker } from "react-day-picker";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
@@ -1824,6 +1823,9 @@ const Button = React__default.forwardRef(function Button2({
       }, 0);
     }
   }, [autoFocus]);
+  if (variant === "") {
+    variant = defaultProps$1f.variant;
+  }
   const iconToLeft = iconPosition === "start";
   if (!isSizeType(size)) {
     size = defaultProps$1f.size;
@@ -3360,6 +3362,11 @@ function useFindIconRenderer(name, fallback) {
   }
   return { iconRenderer: null, iconName: null };
 }
+const DropdownMenuContext = createContext(null);
+const useDropdownMenuContext = () => {
+  const context = useContext(DropdownMenuContext);
+  return context;
+};
 const defaultDropdownMenuProps = {
   alignment: "start",
   triggerButtonVariant: "ghost",
@@ -3400,11 +3407,44 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs(
-    ReactDropdownMenu.Root,
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const contentRef = useRef(null);
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const content2 = contentRef.current;
+      if (!content2) return;
+      const menuItems = Array.from(
+        content2.querySelectorAll('[role="menuitem"]:not([class*="disabled"])')
+      );
+      if (menuItems.length === 0) return;
+      const currentIndex = menuItems.findIndex((item2) => item2 === document.activeElement);
+      let nextIndex;
+      if (currentIndex === -1) {
+        nextIndex = event.key === "ArrowDown" ? 0 : menuItems.length - 1;
+      } else if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : 0;
+      } else {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : menuItems.length - 1;
+      }
+      menuItems[nextIndex]?.focus();
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      return;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: { closeMenu }, children: /* @__PURE__ */ jsxs(
+    Popover,
     {
       open,
       onOpenChange: async (isOpen) => {
+        if (disabled2) return;
         if (isOpen) {
           if (closeTimeoutRef.current) {
             clearTimeout(closeTimeoutRef.current);
@@ -3422,31 +3462,51 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
           }, 0);
         }
       },
+      modal: false,
       children: [
-        /* @__PURE__ */ jsx(ReactDropdownMenu.Trigger, { ...rest, asChild: true, disabled: disabled2, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
           {
-            icon: /* @__PURE__ */ jsx(Icon, { name: triggerButtonIcon, fallback: "chevrondown" }),
-            iconPosition: triggerButtonIconPosition,
-            type: "button",
-            variant: triggerButtonVariant,
-            themeColor: triggerButtonThemeColor,
+            ...rest,
+            asChild: true,
             disabled: disabled2,
-            children: label2
+            ref,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: /* @__PURE__ */ jsx(Icon, { name: triggerButtonIcon, fallback: "chevrondown" }),
+                iconPosition: triggerButtonIconPosition,
+                type: "button",
+                variant: triggerButtonVariant,
+                themeColor: triggerButtonThemeColor,
+                disabled: disabled2,
+                children: label2
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ jsx(ReactDropdownMenu.Portal, { container: root2, children: /* @__PURE__ */ jsx(
-          ReactDropdownMenu.Content,
+        ),
+        /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
+          PopoverContent,
           {
+            ref: contentRef,
             align: alignment,
             style: style2,
             className: classnames(styles$1h.DropdownMenuContent, className),
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+              contentRef.current?.focus();
+            },
+            onKeyDownCapture: handleKeyDown,
+            role: "menu",
+            tabIndex: -1,
             children
           }
         ) })
       ]
     }
-  );
+  ) });
 });
 const defaultMenuItemProps = {
   iconPosition: "start",
@@ -3464,26 +3524,45 @@ const MenuItem = forwardRef(function MenuItem2({
   enabled: enabled2 = true
 }, ref) {
   const iconToStart = iconPosition === "start";
+  const context = useDropdownMenuContext();
+  const handleClick = useCallback(
+    (event) => {
+      if (!enabled2) return;
+      onClick(event);
+      context?.closeMenu();
+    },
+    [enabled2, onClick, context]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!enabled2) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+        context?.closeMenu();
+      } else if (event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+        context?.closeMenu();
+      }
+    },
+    [enabled2, onClick, context]
+  );
   return /* @__PURE__ */ jsxs(
-    ReactDropdownMenu.Item,
+    "div",
     {
       style: style2,
       className: classnames(className, styles$1h.DropdownMenuItem, {
         [styles$1h.active]: active2,
         [styles$1h.disabled]: !enabled2
       }),
-      onClick: (event) => {
-        if (!enabled2) {
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        event.stopPropagation();
-        if (enabled2) {
-          onClick(event);
-        }
-      },
       ref,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "menuitem",
+      tabIndex: enabled2 ? 0 : -1,
       children: [
         iconToStart && icon2,
         /* @__PURE__ */ jsx("div", { className: styles$1h.wrapper, children: label2 ?? children }),
@@ -3492,17 +3571,38 @@ const MenuItem = forwardRef(function MenuItem2({
     }
   );
 });
-const SubMenuItem = forwardRef(
-  function SubMenuItem2({ children, label: label2, triggerTemplate }, ref) {
-    const { root: root2 } = useTheme();
-    return /* @__PURE__ */ jsxs(ReactDropdownMenu.Sub, { children: [
-      /* @__PURE__ */ jsx(ReactDropdownMenu.SubTrigger, { className: styles$1h.DropdownMenuSubTrigger, asChild: true, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 }) }),
-      /* @__PURE__ */ jsx(ReactDropdownMenu.Portal, { container: root2, children: /* @__PURE__ */ jsx(ReactDropdownMenu.SubContent, { className: styles$1h.DropdownMenuSubContent, children }) })
-    ] });
-  }
-);
+const SubMenuItem = forwardRef(function SubMenuItem2({ children, label: label2, triggerTemplate }, ref) {
+  const { root: root2 } = useTheme();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles$1h.DropdownMenuSubTrigger,
+        role: "menuitem",
+        tabIndex: 0,
+        ref,
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: styles$1h.DropdownMenuSubContent,
+        side: "right",
+        align: "start",
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children
+      }
+    ) })
+  ] });
+});
 const MenuSeparator = forwardRef(function MenuSeparator2(props, ref) {
-  return /* @__PURE__ */ jsx(ReactDropdownMenu.Separator, { ref, className: styles$1h.DropdownMenuSeparator, ...props });
+  return /* @__PURE__ */ jsx("div", { ref, className: styles$1h.DropdownMenuSeparator, role: "separator", ...props });
 });
 const ResponsiveBarDropdown = ({
   overflowIcon,
@@ -8072,9 +8172,16 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
     Trigger2 = DropdownMenuSubTrigger$1;
     Content2 = DropdownMenuSubContent$1;
   }
-  const [expanded2, setExpanded] = useState(initiallyExpanded);
+  const [expanded2, setExpanded] = useState(false);
   const [renderCount, setRenderCount] = useState(false);
-  useEffect(() => setRenderCount(true), []);
+  useEffect(() => {
+    setRenderCount(true);
+    if (initiallyExpanded) {
+      requestAnimationFrame(() => {
+        setExpanded(true);
+      });
+    }
+  }, [initiallyExpanded]);
   return /* @__PURE__ */ jsxs(
     Wrapper,
     {
@@ -18009,6 +18116,8 @@ const CompoundComponent = forwardRef(
     appContext,
     state,
     lookupAction,
+    contextVars,
+    // Extract contextVars to prevent it from being passed to DOM elements
     ...restProps
   }, forwardedRef) => {
     const resolvedPropsInner = useMemo(() => {
@@ -19894,9 +20003,10 @@ const TextBox = forwardRef(function TextBox2({
   useEffect(() => {
     setLocalValue(value);
   }, [value]);
+  const normalizedInitialValue = initialValue ?? "";
   useEffect(() => {
-    updateState({ value: initialValue }, { initial: true });
-  }, [initialValue, updateState]);
+    updateState({ value: normalizedInitialValue }, { initial: true });
+  }, [normalizedInitialValue, updateState]);
   const updateValue = useCallback(
     (value2) => {
       setLocalValue(value2);
@@ -19978,6 +20088,15 @@ const TextBox = forwardRef(function TextBox2({
             required: required2
           }
         ),
+        !readOnly2 && enabled2 && localValue.length > 0 && type == "search" && /* @__PURE__ */ jsx(
+          Adornment,
+          {
+            "data-part-id": PART_END_ADORNMENT,
+            iconName: "close",
+            className: styles$N.adornment,
+            onClick: () => updateValue("")
+          }
+        ),
         type === "password" && showPasswordToggle ? /* @__PURE__ */ jsx(
           Adornment,
           {
@@ -24406,7 +24525,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-DZD5kuk6.js");
+      const { initMock } = await import("./initMock-BYfY6ibT.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24423,7 +24542,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-dwrAyq6l.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-DZD5kuk6.js")
+              import("./initMock-BYfY6ibT.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24460,7 +24579,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-dwrAyq6l.js"),
-            import("./initMock-DZD5kuk6.js")
+            import("./initMock-BYfY6ibT.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -24562,29 +24681,30 @@ function useComponentRegistry() {
   return useContext(ComponentRegistryContext);
 }
 const themeVars$f = `'{"padding-NestedApp": "var(--xmlui-padding-NestedApp)", "paddingHorizontal-NestedApp": "var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp))", "paddingVertical-NestedApp": "var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp))", "paddingLeft-NestedApp": "var(--xmlui-paddingLeft-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingRight-NestedApp": "var(--xmlui-paddingRight-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingTop-NestedApp": "var(--xmlui-paddingTop-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingBottom-NestedApp": "var(--xmlui-paddingBottom-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "border-NestedApp": "var(--xmlui-border-NestedApp)", "borderHorizontal-NestedApp": "var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp))", "borderVertical-NestedApp": "var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp))", "borderLeft-NestedApp": "var(--xmlui-borderLeft-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderRight-NestedApp": "var(--xmlui-borderRight-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderTop-NestedApp": "var(--xmlui-borderTop-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderBottom-NestedApp": "var(--xmlui-borderBottom-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderWidth-NestedApp": "var(--xmlui-borderWidth-NestedApp)", "borderHorizontalWidth-NestedApp": "var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderLeftWidth-NestedApp": "var(--xmlui-borderLeftWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderRightWidth-NestedApp": "var(--xmlui-borderRightWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderVerticalWidth-NestedApp": "var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderTopWidth-NestedApp": "var(--xmlui-borderTopWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderBottomWidth-NestedApp": "var(--xmlui-borderBottomWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderStyle-NestedApp": "var(--xmlui-borderStyle-NestedApp)", "borderHorizontalStyle-NestedApp": "var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderLeftStyle-NestedApp": "var(--xmlui-borderLeftStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderRightStyle-NestedApp": "var(--xmlui-borderRightStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderVerticalStyle-NestedApp": "var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderTopStyle-NestedApp": "var(--xmlui-borderTopStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderBottomStyle-NestedApp": "var(--xmlui-borderBottomStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderColor-NestedApp": "var(--xmlui-borderColor-NestedApp)", "borderHorizontalColor-NestedApp": "var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderLeftColor-NestedApp": "var(--xmlui-borderLeftColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderRightColor-NestedApp": "var(--xmlui-borderRightColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderVerticalColor-NestedApp": "var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderTopColor-NestedApp": "var(--xmlui-borderTopColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderBottomColor-NestedApp": "var(--xmlui-borderBottomColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderStartStartRadius-NestedApp": "var(--xmlui-borderStartStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderStartEndRadius-NestedApp": "var(--xmlui-borderStartEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndStartRadius-NestedApp": "var(--xmlui-borderEndStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndEndRadius-NestedApp": "var(--xmlui-borderEndEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "textColor-header-NestedApp": "var(--xmlui-textColor-header-NestedApp)", "fontFamily-header-NestedApp": "var(--xmlui-fontFamily-header-NestedApp)", "fontSize-header-NestedApp": "var(--xmlui-fontSize-header-NestedApp)", "fontStyle-header-NestedApp": "var(--xmlui-fontStyle-header-NestedApp)", "fontVariant-header-NestedApp": "var(--xmlui-fontVariant-header-NestedApp)", "fontWeight-header-NestedApp": "var(--xmlui-fontWeight-header-NestedApp)", "fontStretch-header-NestedApp": "var(--xmlui-fontStretch-header-NestedApp)", "textDecorationLine-header-NestedApp": "var(--xmlui-textDecorationLine-header-NestedApp)", "textDecorationColor-header-NestedApp": "var(--xmlui-textDecorationColor-header-NestedApp)", "textDecorationStyle-header-NestedApp": "var(--xmlui-textDecorationStyle-header-NestedApp)", "textDecorationThickness-header-NestedApp": "var(--xmlui-textDecorationThickness-header-NestedApp)", "textUnderlineOffset-header-NestedApp": "var(--xmlui-textUnderlineOffset-header-NestedApp)", "lineHeight-header-NestedApp": "var(--xmlui-lineHeight-header-NestedApp)", "backgroundColor-header-NestedApp": "var(--xmlui-backgroundColor-header-NestedApp)", "textTransform-header-NestedApp": "var(--xmlui-textTransform-header-NestedApp)", "letterSpacing-header-NestedApp": "var(--xmlui-letterSpacing-header-NestedApp)", "wordSpacing-header-NestedApp": "var(--xmlui-wordSpacing-header-NestedApp)", "textShadow-header-NestedApp": "var(--xmlui-textShadow-header-NestedApp)", "textIndent-header-NestedApp": "var(--xmlui-textIndent-header-NestedApp)", "textAlign-header-NestedApp": "var(--xmlui-textAlign-header-NestedApp)", "textAlignLast-header-NestedApp": "var(--xmlui-textAlignLast-header-NestedApp)", "wordBreak-header-NestedApp": "var(--xmlui-wordBreak-header-NestedApp)", "wordWrap-header-NestedApp": "var(--xmlui-wordWrap-header-NestedApp)", "direction-header-NestedApp": "var(--xmlui-direction-header-NestedApp)", "writingMode-header-NestedApp": "var(--xmlui-writingMode-header-NestedApp)", "lineBreak-header-NestedApp": "var(--xmlui-lineBreak-header-NestedApp)", "backgroundColor-frame-NestedApp": "var(--xmlui-backgroundColor-frame-NestedApp)", "gap-frame-NestedApp": "var(--xmlui-gap-frame-NestedApp)", "marginTop-NestedApp": "var(--xmlui-marginTop-NestedApp)", "marginBottom-NestedApp": "var(--xmlui-marginBottom-NestedApp)", "boxShadow-NestedApp": "var(--xmlui-boxShadow-NestedApp)", "backgroundColor-viewControls-NestedApp": "var(--xmlui-backgroundColor-viewControls-NestedApp)", "borderRadius-viewControls-NestedApp": "var(--xmlui-borderRadius-viewControls-NestedApp)", "padding-viewControls-NestedApp": "var(--xmlui-padding-viewControls-NestedApp)", "paddingVertical-viewControls-button-NestedApp": "var(--xmlui-paddingVertical-viewControls-button-NestedApp)", "paddingHorizontal-viewControls-button-NestedApp": "var(--xmlui-paddingHorizontal-viewControls-button-NestedApp)", "borderRadius-NestedApp": "var(--xmlui-borderRadius-NestedApp)", "borderBottom-header-NestedApp": "var(--xmlui-borderBottom-header-NestedApp)", "height-logo-splitView-NestedApp": "var(--xmlui-height-logo-splitView-NestedApp)", "width-logo-splitView-NestedApp": "var(--xmlui-width-logo-splitView-NestedApp)", "width-controls-NestedApp": "var(--xmlui-width-controls-NestedApp)", "padding-button-splitView-NestedApp": "var(--xmlui-padding-button-splitView-NestedApp)", "width-button-splitView-NestedApp": "var(--xmlui-width-button-splitView-NestedApp)", "height-button-splitView-NestedApp": "var(--xmlui-height-button-splitView-NestedApp)", "backgroundColor-code-splitView-NestedApp": "var(--xmlui-backgroundColor-code-splitView-NestedApp)", "backgroundColor-button-splitView-NestedApp--active": "var(--xmlui-backgroundColor-button-splitView-NestedApp--active)", "color-button-splitView-NestedApp": "var(--xmlui-color-button-splitView-NestedApp)", "color-button-splitView-NestedApp--active": "var(--xmlui-color-button-splitView-NestedApp--active)", "borderRadius-button-splitView-NestedApp": "var(--xmlui-borderRadius-button-splitView-NestedApp)", "borderColor-button-splitView-NestedApp": "var(--xmlui-borderColor-button-splitView-NestedApp)", "color-loadingText-NestedApp": "var(--xmlui-color-loadingText-NestedApp)"}'`;
-const nestedAppPlaceholder = "_nestedAppPlaceholder_2bz33_14";
-const loadingContainer = "_loadingContainer_2bz33_21";
-const logoWrapper = "_logoWrapper_2bz33_34";
-const animatedLogoPath = "_animatedLogoPath_2bz33_39";
-const loadingText = "_loadingText_2bz33_47";
-const nestedAppRoot = "_nestedAppRoot_2bz33_71";
-const shouldAnimate = "_shouldAnimate_2bz33_79";
-const initialized = "_initialized_2bz33_83";
-const nestedAppContainer = "_nestedAppContainer_2bz33_90";
-const contentContainer = "_contentContainer_2bz33_109";
-const splitViewMarkdown = "_splitViewMarkdown_2bz33_116";
-const hidden = "_hidden_2bz33_125";
-const viewControls = "_viewControls_2bz33_134";
-const logo = "_logo_2bz33_34";
-const splitViewButton = "_splitViewButton_2bz33_146";
-const show = "_show_2bz33_154";
-const hide = "_hide_2bz33_161";
-const header$1 = "_header_2bz33_167";
-const headerText = "_headerText_2bz33_175";
-const headerButton = "_headerButton_2bz33_204";
-const wrapper$9 = "_wrapper_2bz33_211";
-const shadowRoot = "_shadowRoot_2bz33_214";
-const content$2 = "_content_2bz33_109";
+const nestedAppPlaceholder = "_nestedAppPlaceholder_1n7j8_14";
+const loadingContainer = "_loadingContainer_1n7j8_21";
+const logoWrapper = "_logoWrapper_1n7j8_34";
+const animatedLogoPath = "_animatedLogoPath_1n7j8_39";
+const loadingText = "_loadingText_1n7j8_47";
+const nestedAppRoot = "_nestedAppRoot_1n7j8_71";
+const shouldAnimate = "_shouldAnimate_1n7j8_79";
+const initialized = "_initialized_1n7j8_83";
+const nestedAppContainer = "_nestedAppContainer_1n7j8_90";
+const contentContainer = "_contentContainer_1n7j8_109";
+const splitViewMarkdown = "_splitViewMarkdown_1n7j8_116";
+const hidden = "_hidden_1n7j8_125";
+const viewControls = "_viewControls_1n7j8_134";
+const logo = "_logo_1n7j8_34";
+const splitViewButton = "_splitViewButton_1n7j8_146";
+const show = "_show_1n7j8_154";
+const hide = "_hide_1n7j8_161";
+const header$1 = "_header_1n7j8_167";
+const headerText = "_headerText_1n7j8_175";
+const headerButton = "_headerButton_1n7j8_204";
+const wrapper$9 = "_wrapper_1n7j8_211";
+const controlWrapper = "_controlWrapper_1n7j8_214";
+const shadowRoot = "_shadowRoot_1n7j8_219";
+const content$2 = "_content_1n7j8_109";
 const styles$x = {
   themeVars: themeVars$f,
   nestedAppPlaceholder,
@@ -24608,6 +24728,7 @@ const styles$x = {
   headerText,
   headerButton,
   wrapper: wrapper$9,
+  controlWrapper,
   shadowRoot,
   content: content$2
 };
@@ -24982,6 +25103,7 @@ function AppWithCodeViewNative({
   markdown: markdown2,
   splitView,
   withFrame = true,
+  allowReset = true,
   noHeader = false,
   initiallyShowCode = false,
   popOutUrl,
@@ -25064,7 +25186,7 @@ function AppWithCodeViewNative({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: styles$x.wrapper, style: { width: controlsWidth }, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$x.controlWrapper, style: { width: controlsWidth }, children: [
             allowPlaygroundPopup && /* @__PURE__ */ jsx(
               Tooltip$1,
               {
@@ -25081,7 +25203,7 @@ function AppWithCodeViewNative({
                 label: "View and edit in new full-width window"
               }
             ),
-            /* @__PURE__ */ jsx(
+            allowReset && /* @__PURE__ */ jsx(
               Tooltip$1,
               {
                 trigger: /* @__PURE__ */ jsx(
@@ -31971,6 +32093,36 @@ const XmlUiRedThemeDefinition = {
   extends: "xmlui",
   themeVars: { ...redThemeColors }
 };
+const XmlUiDocsThemeDefinition = {
+  id: "xmlui-docs",
+  extends: "xmlui",
+  themeVars: {}
+};
+const XmlUiBlogThemeDefinition = {
+  id: "xmlui-blog",
+  extends: "xmlui",
+  themeVars: {}
+};
+const XmlUiWebThemeDefinition = {
+  id: "xmlui-web",
+  extends: "xmlui",
+  themeVars: {
+    // --- Fundamental colors & typography
+    "maxWidth-content-AppHeader": "1280px",
+    backgroundColor: "$color-surface-0",
+    "color-primary": "#3367CC",
+    "color-surface": "#1e2734",
+    "fontWeight-Text": "400",
+    "fontWeight-bold": "700",
+    "textColor-primary": "$color-surface-800",
+    "textColor-NavLink--active": "$color-primary",
+    // --- App layout
+    "maxWidth-content-App": "800px",
+    // --- Headings
+    "fontSize-H2": "32px",
+    "fontSize-H3": "$space-6"
+  }
+};
 const ThemeToneKeys = ["light", "dark"];
 function useCompiledTheme(activeTheme, activeTone, themes = EMPTY_ARRAY, resources = EMPTY_OBJECT, resourceMap = EMPTY_OBJECT) {
   const componentRegistry = useComponentRegistry();
@@ -32135,7 +32287,10 @@ const builtInThemes = [
   XmlUiOrangeThemeDefinition,
   XmlUiPurpleThemeDefinition,
   XmlUiCyanThemeDefinition,
-  XmlUiRedThemeDefinition
+  XmlUiRedThemeDefinition,
+  XmlUiDocsThemeDefinition,
+  XmlUiBlogThemeDefinition,
+  XmlUiWebThemeDefinition
   /*SolidThemeDefinition,*/
 ];
 function ThemeProvider({
@@ -33546,9 +33701,10 @@ function isMediaBreakpoint(value) {
 }
 const tooltipBehavior = {
   name: "tooltip",
-  canAttach: (node) => {
-    const tooltipText = node.props?.tooltip;
-    const tooltipMarkdown = node.props?.tooltipMarkdown;
+  canAttach: (context, node) => {
+    const { extractValue } = context;
+    const tooltipText = extractValue(node.props?.tooltip, true);
+    const tooltipMarkdown = extractValue(node.props?.tooltipMarkdown, true);
     return !!tooltipText || !!tooltipMarkdown;
   },
   attach: (context, node, metadata) => {
@@ -33562,8 +33718,10 @@ const tooltipBehavior = {
 };
 const animationBehavior = {
   name: "animation",
-  canAttach: (node) => {
-    return !!node.props?.animation;
+  canAttach: (context, node) => {
+    const { extractValue } = context;
+    const animation = extractValue(node.props?.animation, true);
+    return !!animation;
   },
   attach: (context, node, metadata) => {
     const { extractValue } = context;
@@ -33577,10 +33735,13 @@ const animationBehavior = {
 };
 const labelBehavior = {
   name: "label",
-  canAttach: (node, metadata) => {
+  canAttach: (context, node, metadata) => {
     if (metadata?.props?.label) {
       return false;
-    } else if (!node.props?.label) {
+    }
+    const { extractValue } = context;
+    const label2 = extractValue(node.props?.label, true);
+    if (!label2) {
       return false;
     }
     return true;
@@ -33617,14 +33778,15 @@ const labelBehavior = {
 };
 const variantBehavior = {
   name: "variant",
-  canAttach: (node) => {
-    const variant = node.props?.variant;
+  canAttach: (context, node) => {
+    const { extractValue } = context;
+    const variant = extractValue(node.props?.variant, true);
     if (!variant) {
       return false;
     }
     if (node.type === "Button") {
       const variantStr = typeof variant === "string" ? variant : String(variant);
-      return !buttonVariantValues.includes(variantStr);
+      return variantStr != void 0 && variantStr !== "" && !buttonVariantValues.includes(variantStr);
     }
     if (node.type === "Badge") {
       const variantStr = typeof variant === "string" ? variant : String(variant);
@@ -35010,7 +35172,7 @@ const defaultProps$k = {
   weekStartsOn: 0,
   inline: true,
   clearable: false,
-  clearToInitialValue: true,
+  clearToInitialValue: false,
   required: false,
   readOnly: false,
   autoFocus: false,
@@ -36152,7 +36314,7 @@ const defaultProps$j = {
   hour24: true,
   seconds: false,
   clearable: false,
-  clearToInitialValue: true,
+  clearToInitialValue: false,
   required: false,
   readOnly: false,
   autoFocus: false,
@@ -42348,6 +42510,7 @@ const inspectButtonComponentRenderer = createComponentRenderer(
 const defaultProps$7 = {
   allowPlaygroundPopup: true,
   withFrame: true,
+  allowReset: true,
   components: EMPTY_ARRAY
 };
 const COMP$d = "NestedApp";
@@ -42488,6 +42651,11 @@ It supports both side-by-side and stacked layouts.`,
       description: "This property defines whether the nested app should be displayed with a frame.",
       valueType: "boolean",
       defaultValue: defaultProps$7.withFrame
+    },
+    allowReset: {
+      description: "This property defines whether the reset button should be displayed in the header.",
+      valueType: "boolean",
+      defaultValue: defaultProps$7.allowReset
     }
   },
   themeVars: parseScssVar(styles$a.themeVars),
@@ -42527,7 +42695,8 @@ const appWithCodeViewComponentRenderer = createComponentRenderer(
         title: extractValue(node.props?.title),
         height: extractValue(node.props?.height),
         allowPlaygroundPopup: extractValue.asOptionalBoolean(node.props?.allowPlaygroundPopup),
-        withFrame: extractValue.asOptionalBoolean(node.props?.withFrame)
+        withFrame: extractValue.asOptionalBoolean(node.props?.withFrame),
+        allowReset: extractValue.asOptionalBoolean(node.props?.allowReset)
       }
     );
   }
@@ -46302,7 +46471,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.10";
+const version = "0.11.12";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -49623,9 +49792,6 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     (url) => {
       const extractedUrl = valueExtractor(url);
       if (typeof extractedUrl !== "string" || extractedUrl.trim() === "") {
-        console.warn(
-          `Component '${safeNode.type}': the extracted resource URL is not a valid string: value ${extractedUrl}, type ${typeof extractedUrl}`
-        );
         return void 0;
       }
       return getResourceUrl(extractedUrl);
@@ -49690,7 +49856,7 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     const behaviors = componentRegistry.getBehaviors();
     if (!isCompoundComponent) {
       for (const behavior of behaviors) {
-        if (behavior.canAttach(rendererContext.node, descriptor)) {
+        if (behavior.canAttach(rendererContext, rendererContext.node, descriptor)) {
           renderedNode = behavior.attach(rendererContext, renderedNode, descriptor);
         }
       }
@@ -50734,7 +50900,7 @@ const ComponentViewer = () => {
       return "";
     }
     const { start: start2, end: end2, fileId } = compSrc;
-    const slicedSrc = sources[fileId].slice(start2, end2);
+    const slicedSrc = sources[fileId].slice(start2, end2).replace(/inspect[\s\n]*=[\s\n]*"true"[\s\n]*/g, "");
     let dropEmptyLines = true;
     const prunedLines = [];
     let trimBeginCount = void 0;
@@ -50750,7 +50916,7 @@ const ComponentViewer = () => {
         }
       }
     });
-    return prunedLines.map((line2) => line2.slice(trimBeginCount).replace(/inspect="true"/g, "")).join("\n");
+    return prunedLines.map((line2) => line2.slice(trimBeginCount)).join("\n");
   }, [inspectedNode2, sources]);
   return process.env.VITE_USER_COMPONENTS_Inspect !== "false" && isOpen && inspectedNode2 !== null ? /* @__PURE__ */ jsx(InspectorDialog, { isOpen, setIsOpen, clickPosition, children: /* @__PURE__ */ jsx(
     AppWithCodeViewNative,
@@ -50760,6 +50926,7 @@ const ComponentViewer = () => {
       initiallyShowCode: appGlobals?.initiallyShowCode ?? true,
       splitView: true,
       controlsWidth: "120px",
+      allowReset: false,
       closeButton: /* @__PURE__ */ jsx(
         Tooltip$1,
         {