@knime/kds-components 0.29.2 → 0.30.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, watchEffect, useAttrs, withKeys, isRef, getCurrentScope, onScopeDispose, defineAsyncComponent, toRefs, useCssVars, createSlots, normalizeProps, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, vModelText, createTextVNode, guardReactiveProps } from 'vue';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, isRef, getCurrentScope, onScopeDispose, defineAsyncComponent, toRefs, useCssVars, createSlots, normalizeProps, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, vModelText, createTextVNode, guardReactiveProps } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$14 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$F = ["src"];
+const _hoisted_1$15 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
+const _hoisted_2$H = ["src"];
 const _hoisted_3$u = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$1F = /* @__PURE__ */ defineComponent({
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -80,10 +80,10 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$F)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        }, null, 40, _hoisted_2$H)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$14);
+      ], 10, _hoisted_1$15);
     };
   }
 });
@@ -96,16 +96,16 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-9e1a5abe"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-9e1a5abe"]]);
 
-const _hoisted_1$13 = ["aria-label"];
-const _hoisted_2$E = { class: "avatars" };
+const _hoisted_1$14 = ["aria-label"];
+const _hoisted_2$G = { class: "avatars" };
 const _hoisted_3$t = {
   key: 0,
   class: "more-count",
   "aria-hidden": "true"
 };
-const _sfc_main$1E = /* @__PURE__ */ defineComponent({
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatarCounter",
   props: {
     moreCount: { default: 0 },
@@ -125,7 +125,7 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
         role: "group",
         "aria-label": ariaLabel.value
       }, [
-        createElementVNode("div", _hoisted_2$E, [
+        createElementVNode("div", _hoisted_2$G, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.avatars, (avatar, index) => {
             return openBlock(), createBlock(KdsAvatar, {
               key: index,
@@ -140,12 +140,12 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$t, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
-      ], 8, _hoisted_1$13);
+      ], 8, _hoisted_1$14);
     };
   }
 });
 
-const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-1aef516d"]]);
+const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-1aef516d"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -202,7 +202,7 @@ function useIcon({
   };
 }
 
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -232,7 +232,7 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-bff4f419"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-bff4f419"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -584,8 +584,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$12 = ["title"];
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$13 = ["title"];
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -626,12 +626,12 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$12);
+      ], 10, _hoisted_1$13);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-38e9537f"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-38e9537f"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -648,8 +648,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$11 = { class: "label-wrapper" };
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$12 = { class: "label-wrapper" };
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -671,13 +671,70 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$11, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$12, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-df64f7cf"]]);
+
+const kdsProgressBarSize = {
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+const kdsProgressBarSizes = Object.values(kdsProgressBarSize);
+
+const _hoisted_1$11 = ["title", "aria-label"];
+const _hoisted_2$F = {
+  key: 0,
+  class: "indeterminate-bar",
+  "aria-hidden": "true"
+};
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+  __name: "KdsProgressBar",
+  props: {
+    size: { default: () => kdsProgressBarSize.MEDIUM },
+    title: { default: "" },
+    percentage: { default: 0 },
+    indeterminate: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const progressValue = computed(() => {
+      if (Number.isNaN(__props.percentage)) {
+        return 0;
+      }
+      return Math.min(Math.max(__props.percentage, 0), 100);
+    });
+    const title = computed(() => {
+      const customTitle = (__props.title ?? "").trim();
+      if (customTitle) {
+        return customTitle;
+      }
+      return __props.indeterminate ? "Loading" : `Progress: ${progressValue.value}%`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "kds-progress-bar",
+          {
+            "kds-progress-bar-large": __props.size === unref(kdsProgressBarSize).LARGE,
+            "kds-progress-bar-medium": __props.size !== unref(kdsProgressBarSize).LARGE
+          }
+        ])
+      }, [
+        createElementVNode("progress", mergeProps({
+          title: title.value,
+          "aria-label": title.value,
+          class: "progress"
+        }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16, _hoisted_1$11),
+        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$F)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-5fdfbce2"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -904,7 +961,7 @@ function useKdsIsTruncated(elementRef) {
 }
 
 const _hoisted_1$$ = ["title", "aria-label"];
-const _hoisted_2$D = ["title"];
+const _hoisted_2$E = ["title"];
 const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
@@ -934,7 +991,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$D)) : createCommentVNode("", true)
+        }, toDisplayString(__props.label), 9, _hoisted_2$E)) : createCommentVNode("", true)
       ], 10, _hoisted_1$$);
     };
   }
@@ -998,7 +1055,7 @@ const kdsLoadingSpinnerVariants = Object.values(
 );
 
 const _hoisted_1$Z = ["role"];
-const _hoisted_2$C = { class: "header" };
+const _hoisted_2$D = { class: "header" };
 const _hoisted_3$s = { class: "headline" };
 const _hoisted_4$o = {
   key: 0,
@@ -1035,7 +1092,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$C, [
+        createElementVNode("div", _hoisted_2$D, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
@@ -1078,7 +1135,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
 const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-df682150"]]);
 
 const _hoisted_1$Y = { class: "donut-container" };
-const _hoisted_2$B = ["height", "width", "viewBox"];
+const _hoisted_2$C = ["height", "width", "viewBox"];
 const _hoisted_3$r = ["r", "stroke-width"];
 const _hoisted_4$n = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
 const _hoisted_5$d = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
@@ -1176,7 +1233,7 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
             fill: "transparent",
             transform: transformWedge.value
           }, null, 10, _hoisted_5$d)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$B)),
+        ], 8, _hoisted_2$C)),
         __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
           createElementVNode("div", _hoisted_7$4, toDisplayString(__props.title), 1),
           __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
@@ -1577,7 +1634,7 @@ function prettyBytes(number, options) {
 }
 
 const _hoisted_1$V = { class: "label" };
-const _hoisted_2$A = {
+const _hoisted_2$B = {
   key: 1,
   class: "file-size"
 };
@@ -1677,7 +1734,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$B, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
@@ -1725,7 +1782,7 @@ const kdsToggleButtonVariant = {
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
 const _hoisted_1$U = ["data-visible"];
-const _hoisted_2$z = ["data-visible"];
+const _hoisted_2$A = ["data-visible"];
 const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
@@ -1797,7 +1854,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$z)
+            ], 8, _hoisted_2$A)
           ], 2)
         ]),
         _: 1
@@ -1828,7 +1885,8 @@ const useListItemKeyboardNav = (options) => {
     containerEl,
     selectableItems,
     enabledItems,
-    itemFocusStrategy = "persistent"
+    itemFocusStrategy = "persistent",
+    shouldNavigate = () => true
   } = options;
   const activeId = ref(void 0);
   function scrollToView() {
@@ -1857,6 +1915,9 @@ const useListItemKeyboardNav = (options) => {
     return enabledItems.value[currentIndex - 1].id;
   };
   const handleKeydown = (event) => {
+    if (!shouldNavigate(event)) {
+      return;
+    }
     if (enabledItems.value.length === 0) {
       activeId.value = selectableItems.value.length === 0 ? options.emptyOptionId : void 0;
       return;
@@ -1876,6 +1937,14 @@ const useListItemKeyboardNav = (options) => {
         scrollToView();
         event.preventDefault();
         break;
+      case "ArrowLeft":
+        options.triggers?.onArrowLeft?.(activeId.value, targetItem);
+        event.preventDefault();
+        break;
+      case "ArrowRight":
+        options.triggers?.onArrowRight?.(activeId.value, targetItem);
+        event.preventDefault();
+        break;
       case "Enter":
         options.triggers?.onEnter?.(activeId.value, targetItem, event);
         event.preventDefault();
@@ -2077,7 +2146,7 @@ const kdsListItemAccessorySize = {
 };
 
 const _hoisted_1$T = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$y = {
+const _hoisted_2$z = {
   key: 0,
   class: "accessory"
 };
@@ -2155,7 +2224,7 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
           createVNode(_sfc_main$1n, {
             accessory: props.accessory,
             size: accessorySize.value,
@@ -2204,7 +2273,7 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
 const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-a3d6c86f"]]);
 
 const _hoisted_1$S = { class: "kds-list-item-section-title" };
-const _hoisted_2$x = {
+const _hoisted_2$y = {
   key: 0,
   class: "icon"
 };
@@ -2221,7 +2290,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$S, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$x, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -2248,7 +2317,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     isLast: { type: Boolean },
     variant: {}
   },
-  emits: ["click"],
+  emits: ["click", "mouseenter"],
   setup(__props, { expose: __expose }) {
     const props = __props;
     const linkEl = useTemplateRef(
@@ -2313,6 +2382,14 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     const effectiveTo = computed(
       () => props.item.disabled ? void 0 : props.item.to
     );
+    const hasChildren = computed(
+      () => props.item.children && props.item.children.length > 0
+    );
+    const anchorId = useId();
+    const anchorName = `--anchor-${anchorId}`;
+    const anchorRootStyle = computed(
+      () => hasChildren.value ? { anchorName } : {}
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         __props.item.sectionHeadline ? (openBlock(), createBlock(unref(ListItemSectionTitle), mergeProps({
@@ -2336,7 +2413,8 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
           class: "kds-menu-item-link",
           onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["prevent"])),
-          onClick: _cache[1] || (_cache[1] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event))
+          onClick: _cache[1] || (_cache[1] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event)),
+          onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("mouseenter", $event))
         }, {
           default: withCtx(() => [
             createVNode(unref(KdsListItem), mergeProps({
@@ -2354,7 +2432,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
             }, _ctx.$attrs), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "shortcut", "trailing-icon"])
           ]),
           _: 1
-        }, 40, ["id", "to", "download", "target", "rel", "aria-disabled"])) : (openBlock(), createBlock(unref(KdsListItem), mergeProps({
+        }, 40, ["id", "to", "download", "target", "rel", "aria-disabled"])) : !hasChildren.value ? (openBlock(), createBlock(unref(KdsListItem), mergeProps({
           key: 2,
           id: __props.item.id,
           accessory: __props.item.accessory,
@@ -2368,22 +2446,46 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
           shortcut: __props.item.shortcut,
           role: "menuitem"
         }, _ctx.$attrs, {
-          onClick: _cache[2] || (_cache[2] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event))
-        }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "trailing-icon", "shortcut"])),
-        __props.item.separator && !__props.isLast ? (openBlock(), createBlock(unref(KdsDivider), {
+          onClick: _cache[3] || (_cache[3] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event)),
+          onMouseenter: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("mouseenter", $event))
+        }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "trailing-icon", "shortcut"])) : (openBlock(), createBlock(unref(KdsListItem), mergeProps({
           key: 3,
+          id: __props.item.id,
+          accessory: __props.item.accessory,
+          text: __props.item.text,
+          "sub-text": __props.item.subText,
+          disabled: __props.item.disabled,
+          active: __props.activeId === __props.item.id,
+          variant: __props.variant,
+          "trailing-icon": "chevron-right",
+          style: anchorRootStyle.value,
+          role: "menuitem",
+          "aria-haspopup": "menu"
+        }, _ctx.$attrs, {
+          onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("mouseenter", $event))
+        }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "style"])),
+        __props.item.separator && !__props.isLast ? (openBlock(), createBlock(unref(KdsDivider), {
+          key: 4,
           class: "kds-list-item-divider",
           role: "presentation",
           "aria-hidden": "true"
-        })) : createCommentVNode("", true)
+        })) : createCommentVNode("", true),
+        hasChildren.value ? renderSlot(_ctx.$slots, "children", {
+          key: 5,
+          anchor: { id: unref(anchorId), name: anchorName }
+        }, void 0, true) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
 
-const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-677d6ca6"]]);
+const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-96d9cfba"]]);
+
+const ContainerDepthKey = /* @__PURE__ */ Symbol("ContainerDepth");
+const ChildItemKey = /* @__PURE__ */ Symbol("ChildItem");
 
 const _hoisted_1$R = ["id", "aria-label", "aria-activedescendant"];
+const _hoisted_2$x = ["id"];
 const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
@@ -2440,20 +2542,95 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
       }
       handleItemInteraction(item, event);
     };
-    const { activeId } = useListItemKeyboardNav({
+    const activePopoverId = ref();
+    const popovers = shallowRef({});
+    const showPopover = (itemId) => {
+      if (!itemId) {
+        return void 0;
+      }
+      if (popovers.value[itemId]) {
+        activePopoverId.value = itemId;
+        popovers.value[itemId].showPopover?.();
+        return popovers.value[itemId];
+      }
+      return void 0;
+    };
+    const closePopover = () => {
+      if (activePopoverId.value) {
+        popovers.value[activePopoverId.value]?.hidePopover?.();
+        activePopoverId.value = void 0;
+      }
+    };
+    const depth = inject(ContainerDepthKey, 0);
+    const providedDepth = computed(() => depth + 1);
+    const canRenderSubmenus = computed(() => depth < 2);
+    provide(ContainerDepthKey, providedDepth.value);
+    const parentList = inject(ChildItemKey, null);
+    const validateItemChildren = (item) => {
+      if (item.children) {
+        return canRenderSubmenus.value ? item : { ...item, children: [] };
+      }
+      return item;
+    };
+    const hasChildren = (item) => {
+      return item.children && item.children.length > 0;
+    };
+    const showPopoverByKeyboard = (activeId2) => {
+      if (activeId2) {
+        const activePopover = showPopover(activeId2);
+        const containerComponent = activePopover?.querySelector(
+          "[data-submenu-container]"
+        );
+        containerComponent?.focus();
+      }
+    };
+    const { activeId, setActiveId } = useListItemKeyboardNav({
       containerEl,
       enabledItems,
       selectableItems,
       itemFocusStrategy: __props.itemFocusStrategy,
+      // only allow navigation when the current menu has the focus
+      shouldNavigate: (event) => {
+        const rootNode = containerEl.value?.getRootNode();
+        if (!rootNode) {
+          return false;
+        }
+        const activeElement = rootNode.activeElement;
+        return activeElement === event.target && activeElement === containerEl.value;
+      },
       triggers: {
-        onEnter: (_activeId, item, event) => {
-          onKeyboardActivate(item, event);
+        onEnter: (activeId2, item, event) => {
+          if (item && hasChildren(validateItemChildren(item))) {
+            showPopoverByKeyboard(activeId2);
+          } else {
+            onKeyboardActivate(item, event);
+          }
         },
         onSpace: (_activeId, item, event) => {
           onKeyboardActivate(item, event);
+        },
+        // In this type of navigation
+        // LEFT is treated as   -> CLOSE
+        onArrowLeft: () => {
+          parentList?.closeActiveSubmenu({ requester: props.id });
+        },
+        // RIGHT is treated as  -> OPEN
+        onArrowRight: (activeId2, item) => {
+          if (item && !hasChildren(validateItemChildren(item))) {
+            return;
+          }
+          showPopoverByKeyboard(activeId2);
         }
       }
     });
+    provide(ChildItemKey, {
+      closeActiveSubmenu: () => {
+        const lastActiveId = activePopoverId.value;
+        closePopover();
+        containerEl.value?.focus();
+        setActiveId(lastActiveId);
+      }
+    });
     __expose({
       /**
        * Function to focus the outer container of the menu.
@@ -2463,7 +2640,18 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
         containerEl.value?.focus();
       }
     });
+    const handleFocusOut = (event) => {
+      if (event.relatedTarget && containerEl.value?.contains(event.relatedTarget)) {
+        event.stopPropagation();
+        if (containerEl.value === event.relatedTarget) {
+          const lastActiveId = activePopoverId.value;
+          closePopover();
+          setActiveId(lastActiveId);
+        }
+      }
+    };
     return (_ctx, _cache) => {
+      const _component_KdsMenuContainer = resolveComponent("KdsMenuContainer", true);
       return openBlock(), createElementBlock("div", {
         id: props.id,
         ref_key: "containerEl",
@@ -2473,26 +2661,68 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
         "aria-label": __props.ariaLabel,
         tabindex: 0,
         style: normalizeStyle({ maxHeight: __props.menuMaxHeight }),
-        "aria-activedescendant": unref(activeId)
+        "aria-activedescendant": unref(activeId) ?? activePopoverId.value,
+        onMouseleave: closePopover,
+        onFocusin: _cache[3] || (_cache[3] = withModifiers(($event) => activePopoverId.value = void 0, ["stop"])),
+        onFocusout: handleFocusOut,
+        onKeydown: _cache[4] || (_cache[4] = withKeys(
+          () => {
+            unref(parentList)?.closeActiveSubmenu({ requester: props.id });
+          },
+          ["esc"]
+        ))
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemsWithPrefix), (item, index) => {
           return openBlock(), createBlock(KdsMenuItem, {
             key: item.id,
             ref_for: true,
             ref: (el) => setItemRef(el, index),
-            item,
+            item: validateItemChildren(item),
             "is-last": index === unref(itemsWithPrefix).length - 1,
-            "active-id": unref(activeId),
+            "active-id": unref(activeId) ?? activePopoverId.value,
             variant: __props.variant,
-            onClick: ($event) => handleItemInteraction(item, $event)
-          }, null, 8, ["item", "is-last", "active-id", "variant", "onClick"]);
+            onClick: ($event) => handleItemInteraction(item, $event),
+            onMouseenter: () => {
+              if (activePopoverId.value) {
+                closePopover();
+              }
+              if (!item.disabled && hasChildren(item)) {
+                showPopover(item.id);
+              }
+            }
+          }, {
+            children: withCtx(({ anchor }) => [
+              createElementVNode("div", {
+                id: anchor.id,
+                ref_for: true,
+                ref: (el) => {
+                  popovers.value[item.id] = el;
+                },
+                popover: "",
+                class: "submenu-popover",
+                style: normalizeStyle({ positionAnchor: anchor.name }),
+                onMouseleave: _cache[1] || (_cache[1] = ($event) => closePopover()),
+                onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => {
+                }, ["stop", "prevent"]), ["esc"]))
+              }, [
+                createVNode(_component_KdsMenuContainer, {
+                  id: `${__props.id}:${item.id}`,
+                  "data-submenu-container": "",
+                  ariaLabel: `Submenu for item ${item.text}`,
+                  items: item.children ?? [],
+                  onItemClick: _cache[0] || (_cache[0] = ($event) => emit("itemClick", $event))
+                }, null, 8, ["id", "ariaLabel", "items"])
+              ], 44, _hoisted_2$x)
+            ]),
+            _: 2
+          }, 1032, ["item", "is-last", "active-id", "variant", "onClick", "onMouseenter"]);
         }), 128))
-      ], 12, _hoisted_1$R);
+      ], 44, _hoisted_1$R);
     };
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-cce3fc40"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-9dc6d3f6"]]);
 
 const kdsPopoverPlacement = {
   TOP_LEFT: "top-left",
@@ -26006,5 +26236,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDescription = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ed6ba7bb"]]);
 
-export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1s as KdsButton, _sfc_main$h as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$S as KdsColorInput, KdsColorSwatch, _sfc_main$1c as KdsContextMenu, KdsDataType, _sfc_main$L as KdsDateInput, _sfc_main$J as KdsDateTimeFormatInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$z as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$C as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1r as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1d as KdsMenu, _sfc_main$1h as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$w as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$R as KdsPasswordInput, _sfc_main$I as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$E as KdsTimeInput, _sfc_main$1p as KdsToggleButton, KdsTwinList, _sfc_main$Q as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1s as KdsButton, _sfc_main$h as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$S as KdsColorInput, KdsColorSwatch, _sfc_main$1c as KdsContextMenu, KdsDataType, _sfc_main$L as KdsDateInput, _sfc_main$J as KdsDateTimeFormatInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$z as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$C as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1r as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1d as KdsMenu, _sfc_main$1h as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$w as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$R as KdsPasswordInput, _sfc_main$I as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$E as KdsTimeInput, _sfc_main$1p as KdsToggleButton, KdsTwinList, _sfc_main$Q as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressBarSize, kdsProgressBarSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map