@progress/kendo-themes-html 9.0.1-dev.1 → 9.0.1-dev.3

package/dist/esm/taskboard/tests/taskboard-card-column-menu.mjs

@@ -12118,7 +12118,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx492(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx492(Fragment176, { children: /* @__PURE__ */ jsxs236("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx492(Fragment176, { children: /* @__PURE__ */ jsxs236("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx492("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx492("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx492("div", { className: "k-loading-color" })
@@ -12141,7 +12141,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx492("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs236("div", { className: classNames(
+        /* @__PURE__ */ jsx492("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12149,10 +12149,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx492("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/taskboard/tests/taskboard-card.mjs

@@ -12150,7 +12150,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx493(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx493(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx493(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx493("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx493("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx493("div", { className: "k-loading-color" })
@@ -12173,7 +12173,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx493("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx493("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12181,10 +12181,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx493("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/taskboard/tests/taskboard-column.mjs

@@ -12150,7 +12150,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx493(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx493(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx493(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx493("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx493("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx493("div", { className: "k-loading-color" })
@@ -12173,7 +12173,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx493("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx493("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12181,10 +12181,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx493("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/taskboard/tests/taskboard-pane.mjs

@@ -12178,7 +12178,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12201,7 +12201,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12209,10 +12209,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/taskboard/tests/taskboard-resources.mjs

@@ -12150,7 +12150,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx493(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx493(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx493(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx493("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx493("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx493("div", { className: "k-loading-color" })
@@ -12173,7 +12173,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx493("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx493("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12181,10 +12181,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx493("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/taskboard/tests/taskboard-rtl.mjs

@@ -12178,7 +12178,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12201,7 +12201,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12209,10 +12209,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/taskboard/tests/taskboard.mjs

@@ -12178,7 +12178,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12201,7 +12201,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12209,10 +12209,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/templates/treelist-aggregates.mjs

@@ -12266,7 +12266,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12289,7 +12289,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12297,10 +12297,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/templates/treelist-normal.mjs

@@ -12272,7 +12272,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx496(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx496(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx496(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx496("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx496("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx496("div", { className: "k-loading-color" })
@@ -12295,7 +12295,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx496("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx496("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12303,10 +12303,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx496("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/templates/treelist-row-reordering.mjs

@@ -12266,7 +12266,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12289,7 +12289,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12297,10 +12297,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/templates/treelist-with-column-menu.mjs

@@ -12269,7 +12269,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx495(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx495(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx495(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx495("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx495("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx495("div", { className: "k-loading-color" })
@@ -12292,7 +12292,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx495("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx495("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12300,10 +12300,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx495("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/templates/treelist-with-filter-menu.mjs

@@ -12269,7 +12269,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx495(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx495(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx495(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx495("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx495("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx495("div", { className: "k-loading-color" })
@@ -12292,7 +12292,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx495("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx495("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12300,10 +12300,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx495("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/tests/treelist-aggregate-react.mjs

@@ -12217,7 +12217,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12240,7 +12240,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12248,10 +12248,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/tests/treelist-aggregates.mjs

@@ -12266,7 +12266,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12289,7 +12289,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12297,10 +12297,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/tests/treelist-editing-popup.mjs

@@ -11605,7 +11605,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx469(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx469(Fragment169, { children: /* @__PURE__ */ jsxs219("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx469(Fragment169, { children: /* @__PURE__ */ jsxs219("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx469("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx469("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx469("div", { className: "k-loading-color" })
@@ -11628,7 +11628,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx469("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs219("div", { className: classNames(
+        /* @__PURE__ */ jsx469("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -11636,10 +11636,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx469("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/tests/treelist-react.mjs

@@ -11641,7 +11641,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx469(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx469(Fragment169, { children: /* @__PURE__ */ jsxs219("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx469(Fragment169, { children: /* @__PURE__ */ jsxs219("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx469("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx469("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx469("div", { className: "k-loading-color" })
@@ -11664,7 +11664,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx469("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs219("div", { className: classNames(
+        /* @__PURE__ */ jsx469("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -11672,10 +11672,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx469("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/tests/treelist-row-reordering.mjs

@@ -12266,7 +12266,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12289,7 +12289,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12297,10 +12297,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/dist/esm/treelist/tests/treelist.mjs

@@ -12266,7 +12266,7 @@ var ListView = (props) => {
     ...other
   } = props;
   const pager = /* @__PURE__ */ jsx494(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+  const loader = /* @__PURE__ */ jsx494(Fragment175, { children: /* @__PURE__ */ jsxs235("div", { className: "k-loading-mask", style: { height: "100%", width: "100%" }, children: [
     /* @__PURE__ */ jsx494("span", { className: "k-loading-text", children: "Loading..." }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-image" }),
     /* @__PURE__ */ jsx494("div", { className: "k-loading-color" })
@@ -12289,7 +12289,7 @@ var ListView = (props) => {
       children: [
         pageable && pagerPosition === "top" && pager,
         header && /* @__PURE__ */ jsx494("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs235("div", { className: classNames(
+        /* @__PURE__ */ jsx494("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -12297,10 +12297,8 @@ var ListView = (props) => {
             [`k-flex-${flexWrap}`]: flexWrap,
             [`k-grid-cols-${gridColumns}`]: gridColumns
           }
-        ), children: [
-          loading && loader,
-          props.children
-        ] }),
+        ), children: props.children }),
+        loading && loader,
         footer && /* @__PURE__ */ jsx494("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "9.0.1-dev.1",
+  "version": "9.0.1-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,5 +53,5 @@
   "devDependencies": {
     "@types/react": "^18.3.3"
   },
-  "gitHead": "d9a7729d1e521340da66dea11035ed501f9a1183"
+  "gitHead": "455dfd7938b96799ec78c643c1840696a41bb42c"
 }

package/src/listview/listview.spec.tsx

@@ -55,7 +55,7 @@ export const ListView = (
     const pager = <Pager className={`k-listview-pager k-listview-pager-${ pagerPosition }`} />;
 
     const loader = <>
-        <div className="k-loading-mask k-opaque" style={{ height: '100%', width: '100%' }}>
+        <div className="k-loading-mask" style={{ height: '100%', width: '100%' }}>
             <span className="k-loading-text">Loading...</span>
             <div className="k-loading-image"></div>
             <div className="k-loading-color"></div>
@@ -87,9 +87,9 @@ export const ListView = (
                     [`k-grid-cols-${gridColumns}`]: gridColumns,
                 }
             )}>
-                { loading && loader }
                 { props.children }
             </div>
+            { loading && loader }
             {footer && <div className="k-listview-footer">Footer</div>}
             {pageable && pagerPosition === "bottom" && pager}
         </div>