@progress/kendo-themes-html 6.4.0-dev.5 → 6.4.0-dev.6

package/dist/esm/menu/tests/menu-popup-size.js

@@ -4342,8 +4342,72 @@ MenuList.options = options5;
 MenuList.className = MENULIST_CLASSNAME;
 MenuList.defaultProps = defaultProps5;
 
+// src/animation-container/animation-container.spec.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
+var states6 = [];
+var options6 = {};
+var defaultProps6 = {
+  positionMode: "absolute"
+};
+var AnimationContainer = (props) => {
+  const {
+    positionMode,
+    animationStyle,
+    offset,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ...other,
+      style: { ...offset, ...props.style },
+      className: classNames(
+        ANIMATION_CONTAINER_CLASSNAME,
+        "k-animation-container-shown",
+        {
+          ["k-animation-container-fixed"]: positionMode === "fixed"
+        }
+      ),
+      children: /* @__PURE__ */ jsx7("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
+    }
+  );
+};
+AnimationContainer.states = states6;
+AnimationContainer.options = options6;
+AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
+AnimationContainer.defaultProps = defaultProps6;
+
+// src/popup/popup.spec.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var POPUP_CLASSNAME = `k-popup`;
+var states7 = [];
+var options7 = {};
+var defaultProps7 = {
+  positionMode: "absolute"
+};
+var Popup = (props) => {
+  const {
+    offset,
+    positionMode,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx8(
+    AnimationContainer,
+    {
+      positionMode,
+      offset,
+      children: /* @__PURE__ */ jsx8("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
+    }
+  );
+};
+Popup.states = states7;
+Popup.options = options7;
+Popup.className = POPUP_CLASSNAME;
+Popup.defaultProps = defaultProps7;
+
 // src/menu/tests/menu-popup-size.tsx
-import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var style = `
     #test-area {
         grid-template-columns: 120px 1fr 1fr 1fr;
@@ -4355,69 +4419,69 @@ var style = `
     }
 `;
 var menu_popup_size_default = () => /* @__PURE__ */ jsxs2(Fragment6, { children: [
-  /* @__PURE__ */ jsx7("style", { children: style }),
+  /* @__PURE__ */ jsx9("style", { children: style }),
   /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-    /* @__PURE__ */ jsx7("span", {}),
-    /* @__PURE__ */ jsx7("span", { children: "small" }),
-    /* @__PURE__ */ jsx7("span", { children: "medium" }),
-    /* @__PURE__ */ jsx7("span", { children: "large" }),
-    /* @__PURE__ */ jsx7("span", { children: "no arrow" }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "small", children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Hover", hover: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Focus", focus: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Active", active: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Focus & Active", active: true, focus: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Disabled", disabled: true })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Hover", hover: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Focus", focus: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Active", active: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Focus & Active", active: true, focus: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Disabled", disabled: true })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "large", children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Hover", hover: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Focus", focus: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Active", active: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Focus & Active", active: true, focus: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Disabled", disabled: true })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("span", { children: "default arrow" }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "small", children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal", showArrow: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "No arrow" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "With icon", icon: "folder", showArrow: true })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal", showArrow: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "No arrow" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "With icon", icon: "folder", showArrow: true })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "large", children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal", showArrow: true }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "No arrow" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "With icon", icon: "folder", showArrow: true })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("span", { children: "custom arrow" }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "small", children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal", showArrow: true, arrowIconName: "chevron-right" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "No arrow" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "With icon", icon: "folder", showArrow: true, arrowIconName: "chevron-right" })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal", showArrow: true, arrowIconName: "chevron-right" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "No arrow" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "With icon", icon: "folder", showArrow: true, arrowIconName: "chevron-right" })
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsx7("div", { className: "k-animation-container", children: /* @__PURE__ */ jsx7("div", { className: "k-popup k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "large", children: [
-      /* @__PURE__ */ jsx7(MenuItem, { text: "Normal", showArrow: true, arrowIconName: "chevron-right" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "No arrow" }),
-      /* @__PURE__ */ jsx7(MenuItem, { text: "With icon", icon: "folder", showArrow: true, arrowIconName: "chevron-right" })
-    ] }) }) }) })
+    /* @__PURE__ */ jsx9("span", {}),
+    /* @__PURE__ */ jsx9("span", { children: "small" }),
+    /* @__PURE__ */ jsx9("span", { children: "medium" }),
+    /* @__PURE__ */ jsx9("span", { children: "large" }),
+    /* @__PURE__ */ jsx9("span", { children: "no arrow" }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "small", children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Hover", hover: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Focus", focus: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Active", active: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Focus & Active", active: true, focus: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Disabled", disabled: true })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Hover", hover: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Focus", focus: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Active", active: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Focus & Active", active: true, focus: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Disabled", disabled: true })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "large", children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Hover", hover: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Focus", focus: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Active", active: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Focus & Active", active: true, focus: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Disabled", disabled: true })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("span", { children: "default arrow" }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "small", children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal", showArrow: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "No arrow" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "With icon", icon: "folder", showArrow: true })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal", showArrow: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "No arrow" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "With icon", icon: "folder", showArrow: true })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "large", children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal", showArrow: true }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "No arrow" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "With icon", icon: "folder", showArrow: true })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("span", { children: "custom arrow" }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "small", children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal", showArrow: true, arrowIconName: "chevron-right" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "No arrow" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "With icon", icon: "folder", showArrow: true, arrowIconName: "chevron-right" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal", showArrow: true, arrowIconName: "chevron-right" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "No arrow" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "With icon", icon: "folder", showArrow: true, arrowIconName: "chevron-right" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx9("section", { children: /* @__PURE__ */ jsx9(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs2(MenuList, { size: "large", children: [
+      /* @__PURE__ */ jsx9(MenuItem, { text: "Normal", showArrow: true, arrowIconName: "chevron-right" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "No arrow" }),
+      /* @__PURE__ */ jsx9(MenuItem, { text: "With icon", icon: "folder", showArrow: true, arrowIconName: "chevron-right" })
+    ] }) }) })
   ] })
 ] });
 export {

package/dist/esm/menu/tests/menu.js

@@ -4323,35 +4323,82 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 // src/button/templates/text-button.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 
-// src/popup/popup.spec.tsx
+// src/animation-container/animation-container.spec.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var POPUP_CLASSNAME = `k-popup`;
+var ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
 var states5 = [];
 var options5 = {};
-var defaultProps5 = {};
+var defaultProps5 = {
+  positionMode: "absolute"
+};
+var AnimationContainer = (props) => {
+  const {
+    positionMode,
+    animationStyle,
+    offset,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ...other,
+      style: { ...offset, ...props.style },
+      className: classNames(
+        ANIMATION_CONTAINER_CLASSNAME,
+        "k-animation-container-shown",
+        {
+          ["k-animation-container-fixed"]: positionMode === "fixed"
+        }
+      ),
+      children: /* @__PURE__ */ jsx8("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
+    }
+  );
+};
+AnimationContainer.states = states5;
+AnimationContainer.options = options5;
+AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
+AnimationContainer.defaultProps = defaultProps5;
+
+// src/popup/popup.spec.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var POPUP_CLASSNAME = `k-popup`;
+var states6 = [];
+var options6 = {};
+var defaultProps6 = {
+  positionMode: "absolute"
+};
 var Popup = (props) => {
   const {
+    offset,
+    positionMode,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx8("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children });
+  return /* @__PURE__ */ jsx9(
+    AnimationContainer,
+    {
+      positionMode,
+      offset,
+      children: /* @__PURE__ */ jsx9("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
+    }
+  );
 };
-Popup.states = states5;
-Popup.options = options5;
+Popup.states = states6;
+Popup.options = options6;
 Popup.className = POPUP_CLASSNAME;
-Popup.defaultProps = defaultProps5;
+Popup.defaultProps = defaultProps6;
 
 // src/menu/menu-item.spec.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var MENUITEM_CLASSNAME = `k-menu-item`;
-var states6 = [
+var states7 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options6 = {};
-var defaultProps6 = {
+var options7 = {};
+var defaultProps7 = {
   dir: "ltr"
 };
 var MenuItem = (props) => {
@@ -4365,11 +4412,11 @@ var MenuItem = (props) => {
     text,
     showArrow,
     arrowIconName,
-    dir = defaultProps6.dir,
+    dir = defaultProps7.dir,
     children,
     ...other
   } = props;
-  const contentTemplate = /* @__PURE__ */ jsx9(Fragment5, {});
+  const contentTemplate = /* @__PURE__ */ jsx10(Fragment5, {});
   if (children) {
     children.forEach((child) => {
       const component = child.type;
@@ -4410,9 +4457,9 @@ var MenuItem = (props) => {
               })
             ),
             children: [
-              icon && /* @__PURE__ */ jsx9(Icon, { className: "k-menu-link-icon", icon }),
-              /* @__PURE__ */ jsx9("span", { className: "k-menu-link-text", children: text }),
-              showArrow && /* @__PURE__ */ jsx9("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx9(Icon, { icon: expandArrowName }) })
+              icon && /* @__PURE__ */ jsx10(Icon, { className: "k-menu-link-icon", icon }),
+              /* @__PURE__ */ jsx10("span", { className: "k-menu-link-text", children: text }),
+              showArrow && /* @__PURE__ */ jsx10("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx10(Icon, { icon: expandArrowName }) })
             ]
           }
         ),
@@ -4421,32 +4468,32 @@ var MenuItem = (props) => {
     }
   );
 };
-MenuItem.states = states6;
-MenuItem.options = options6;
+MenuItem.states = states7;
+MenuItem.options = options7;
 MenuItem.className = MENUITEM_CLASSNAME;
-MenuItem.defaultProps = defaultProps6;
+MenuItem.defaultProps = defaultProps7;
 var menu_item_spec_default = MenuItem;
 
 // src/menu/menu-item-content.tsx
-import { Fragment as Fragment6, jsx as jsx10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
 
 // src/menu/menu-list.spec.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 import { createElement } from "react";
 var MENULIST_CLASSNAME = `k-menu-group`;
-var states7 = [];
-var options7 = {
+var states8 = [];
+var options8 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps7 = {
+var defaultProps8 = {
   size: Size.medium,
   dir: "ltr"
 };
 var MenuList = (props) => {
   const {
     children,
-    size = defaultProps7.size,
-    dir = defaultProps7.dir,
+    size = defaultProps8.size,
+    dir = defaultProps8.dir,
     ...other
   } = props;
   const listChildren = [];
@@ -4463,7 +4510,7 @@ var MenuList = (props) => {
       });
     }
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "ul",
     {
       ...other,
@@ -4478,13 +4525,13 @@ var MenuList = (props) => {
     }
   );
 };
-MenuList.states = states7;
-MenuList.options = options7;
+MenuList.states = states8;
+MenuList.options = options8;
 MenuList.className = MENULIST_CLASSNAME;
-MenuList.defaultProps = defaultProps7;
+MenuList.defaultProps = defaultProps8;
 
 // src/menu/tests/menu.tsx
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
 var style = `
     #test-area section {
         height: 300px;
@@ -4496,76 +4543,76 @@ var style = `
     }
 `;
 var menu_default = () => /* @__PURE__ */ jsxs3(Fragment7, { children: [
-  /* @__PURE__ */ jsx12("style", { children: style }),
+  /* @__PURE__ */ jsx13("style", { children: style }),
   /* @__PURE__ */ jsxs3("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx12("span", { children: "Horizontal Menu" }),
-    /* @__PURE__ */ jsx12("span", { children: "Horizontal Scrolling Menu" }),
-    /* @__PURE__ */ jsx12("section", { children: /* @__PURE__ */ jsxs3("ul", { id: "menu", className: "k-widget k-reset k-header k-menu k-menu-horizontal", children: [
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-disabled k-first", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: " Disabled" }) }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Normal" }) }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-hover", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
-        /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Hover" }),
-        /* @__PURE__ */ jsx12("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx12(Icon, { icon: "caret-alt-down" }) })
+    /* @__PURE__ */ jsx13("span", { children: "Horizontal Menu" }),
+    /* @__PURE__ */ jsx13("span", { children: "Horizontal Scrolling Menu" }),
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsxs3("ul", { id: "menu", className: "k-widget k-reset k-header k-menu k-menu-horizontal", children: [
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-disabled k-first", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: " Disabled" }) }),
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Normal" }) }),
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-hover", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
+        /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Hover" }),
+        /* @__PURE__ */ jsx13("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx13(Icon, { icon: "caret-alt-down" }) })
       ] }) }),
       /* @__PURE__ */ jsxs3("li", { className: "k-item k-menu-item", children: [
         /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link k-active", children: [
-          /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Active" }),
-          /* @__PURE__ */ jsx12("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx12(Icon, { icon: "caret-alt-down" }) })
+          /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Active" }),
+          /* @__PURE__ */ jsx13("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx13(Icon, { icon: "caret-alt-down" }) })
         ] }),
-        /* @__PURE__ */ jsx12("div", { className: "k-animation-container k-animation-container-fixed k-animation-container-shown", children: /* @__PURE__ */ jsx12(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs3(MenuList, { children: [
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Disabled", disabled: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Normal" }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Hover", hover: true, showArrow: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Active", active: true, showArrow: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Focus", focus: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Focus & Active", active: true, focus: true })
-        ] }) }) })
+        /* @__PURE__ */ jsx13(Popup, { className: "k-menu-popup", positionMode: "fixed", children: /* @__PURE__ */ jsxs3(MenuList, { children: [
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Disabled", disabled: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Normal" }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Hover", hover: true, showArrow: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Active", active: true, showArrow: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Focus", focus: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Focus & Active", active: true, focus: true })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-focus", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Focus" }) }) }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
-        /* @__PURE__ */ jsx12(Icon, { icon: "folder" }),
-        /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Normal" })
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-focus", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Focus" }) }) }),
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
+        /* @__PURE__ */ jsx13(Icon, { icon: "folder" }),
+        /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Normal" })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsx12("section", { children: /* @__PURE__ */ jsxs3("div", { className: "k-menu-scroll-wrapper horizontal", style: { width: "300px" }, children: [
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsxs3("div", { className: "k-menu-scroll-wrapper horizontal", style: { width: "300px" }, children: [
       /* @__PURE__ */ jsxs3("ul", { id: "menu", className: "k-widget k-reset k-header k-menu k-menu-horizontal", children: [
-        /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-first", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Item 1" }) }),
-        /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Item 2" }) }),
-        /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Item 3" }) }),
-        /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Item 4" }) }),
-        /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Item 5" }) }),
-        /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Item 6" }) })
+        /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-first", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Item 1" }) }),
+        /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Item 2" }) }),
+        /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Item 3" }) }),
+        /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Item 4" }) }),
+        /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Item 5" }) }),
+        /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Item 6" }) })
       ] }),
-      /* @__PURE__ */ jsx12(Button, { icon: "caret-alt-left", className: "k-menu-scroll-button k-scroll-left" }),
-      /* @__PURE__ */ jsx12(Button, { icon: "caret-alt-right", className: "k-menu-scroll-button k-scroll-right" })
+      /* @__PURE__ */ jsx13(Button, { icon: "caret-alt-left", className: "k-menu-scroll-button k-scroll-left" }),
+      /* @__PURE__ */ jsx13(Button, { icon: "caret-alt-right", className: "k-menu-scroll-button k-scroll-right" })
     ] }) }),
-    /* @__PURE__ */ jsx12("span", { children: "Horizontal Menu RTL" }),
-    /* @__PURE__ */ jsx12("span", {}),
-    /* @__PURE__ */ jsx12("section", { children: /* @__PURE__ */ jsxs3("ul", { id: "menu", className: "k-widget k-reset k-header k-menu k-menu-horizontal", dir: "rtl", children: [
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-disabled k-first", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: " Disabled" }) }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: "Normal" }) }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-hover", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
-        /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Hover" }),
-        /* @__PURE__ */ jsx12("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx12(Icon, { icon: "caret-alt-down" }) })
+    /* @__PURE__ */ jsx13("span", { children: "Horizontal Menu RTL" }),
+    /* @__PURE__ */ jsx13("span", {}),
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsxs3("ul", { id: "menu", className: "k-widget k-reset k-header k-menu k-menu-horizontal", dir: "rtl", children: [
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-disabled k-first", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: " Disabled" }) }),
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: "Normal" }) }),
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-hover", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
+        /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Hover" }),
+        /* @__PURE__ */ jsx13("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx13(Icon, { icon: "caret-alt-down" }) })
       ] }) }),
       /* @__PURE__ */ jsxs3("li", { className: "k-item k-menu-item", children: [
         /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link k-active", children: [
-          /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Active" }),
-          /* @__PURE__ */ jsx12("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx12(Icon, { icon: "caret-alt-down" }) })
+          /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Active" }),
+          /* @__PURE__ */ jsx13("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx13(Icon, { icon: "caret-alt-down" }) })
         ] }),
-        /* @__PURE__ */ jsx12("div", { className: "k-animation-container k-animation-container-fixed k-animation-container-shown", children: /* @__PURE__ */ jsx12(Popup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs3(MenuList, { dir: "rtl", children: [
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Disabled", disabled: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Normal" }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Hover", hover: true, showArrow: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Active", active: true, showArrow: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Focus", focus: true }),
-          /* @__PURE__ */ jsx12(MenuItem, { text: "Focus & Active", active: true, focus: true })
-        ] }) }) })
+        /* @__PURE__ */ jsx13(Popup, { className: "k-menu-popup", positionMode: "fixed", children: /* @__PURE__ */ jsxs3(MenuList, { dir: "rtl", children: [
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Disabled", disabled: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Normal" }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Hover", hover: true, showArrow: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Active", active: true, showArrow: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Focus", focus: true }),
+          /* @__PURE__ */ jsx13(MenuItem, { text: "Focus & Active", active: true, focus: true })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-focus", children: /* @__PURE__ */ jsx12("span", { className: "k-link k-menu-link", children: /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Focus" }) }) }),
-      /* @__PURE__ */ jsx12("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
-        /* @__PURE__ */ jsx12(Icon, { icon: "folder" }),
-        /* @__PURE__ */ jsx12("span", { className: "k-menu-link-text", children: "Normal" })
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-focus", children: /* @__PURE__ */ jsx13("span", { className: "k-link k-menu-link", children: /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Focus" }) }) }),
+      /* @__PURE__ */ jsx13("li", { className: "k-item k-menu-item k-last", children: /* @__PURE__ */ jsxs3("span", { className: "k-link k-menu-link", children: [
+        /* @__PURE__ */ jsx13(Icon, { icon: "folder" }),
+        /* @__PURE__ */ jsx13("span", { className: "k-menu-link-text", children: "Normal" })
       ] }) })
     ] }) })
   ] })