@knime/kds-table 0.3.0 → 0.3.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed, unref, watch, ref, isRef, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, shallowRef, toValue, readonly, createPropsRestProxy, useModel, createBlock, mergeProps, mergeModels, useTemplateRef, watchEffect, nextTick, withCtx, createVNode, useAttrs, useId, Fragment, createCommentVNode, normalizeClass, createElementVNode, toDisplayString, resolveComponent, withKeys, normalizeStyle, renderList, onUnmounted, defineAsyncComponent, resolveDynamicComponent, h as h$1, useSlots, markRaw, createTextVNode, toRef, useCssVars, onBeforeUnmount, reactive, createSlots, normalizeProps, guardReactiveProps } from 'vue';
+import { computed, unref, watch, ref, isRef, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, shallowRef, toValue, readonly, createPropsRestProxy, useModel, createBlock, mergeProps, mergeModels, useTemplateRef, watchEffect, withCtx, createVNode, createCommentVNode, useAttrs, useId, Fragment, normalizeClass, createElementVNode, toDisplayString, resolveComponent, withKeys, normalizeStyle, renderList, onUnmounted, defineAsyncComponent, nextTick, resolveDynamicComponent, h as h$1, useSlots, markRaw, createTextVNode, toRef, useCssVars, onBeforeUnmount, reactive, createSlots, normalizeProps, guardReactiveProps } from 'vue';
 
 import './index.css';const defaultPageSize = 10;
 const tablePageSizes = [5, 10, 25, 50, 100];
@@ -747,14 +747,14 @@ const kdsAvatarSize = {
   XLARGE: "xlarge"
 };
 
-const _hoisted_1$15 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$H = ["src"];
-const _hoisted_3$u = {
+const _hoisted_1$18 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
+const _hoisted_2$J = ["src"];
+const _hoisted_3$v = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$1G = /* @__PURE__ */ defineComponent({
+const _sfc_main$1J = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -818,10 +818,10 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$H)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        }, null, 40, _hoisted_2$J)) : (openBlock(), createElementBlock("div", _hoisted_3$v, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$15);
+      ], 10, _hoisted_1$18);
     };
   }
 });
@@ -834,7 +834,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-9e1a5abe"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-9e1a5abe"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -891,7 +891,7 @@ function useIcon({
   };
 }
 
-const _sfc_main$1E = /* @__PURE__ */ defineComponent({
+const _sfc_main$1H = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -921,7 +921,7 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-bff4f419"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["__scopeId", "data-v-bff4f419"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -1260,8 +1260,8 @@ Object.fromEntries(
   typeIconNames.map((name) => [toEnumKey(name), name])
 );
 
-const _hoisted_1$13 = ["title"];
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$16 = ["title"];
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -1302,12 +1302,12 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$13);
+      ], 10, _hoisted_1$16);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-38e9537f"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-38e9537f"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral"};
@@ -1315,8 +1315,8 @@ const kdsBadgeSize = {
   XSMALL: "xsmall"
 };
 
-const _hoisted_1$12 = { class: "label-wrapper" };
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$15 = { class: "label-wrapper" };
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -1338,24 +1338,24 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$12, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$15, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-df64f7cf"]]);
 const kdsColorSwatchSize = {
   SMALL: "small"};
 
-const _hoisted_1$10 = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_1$13 = ["role", "title", "aria-hidden", "aria-label"];
 const RGBA_SHORT_HEX_LENGTH = 4;
 const RGBA_LONG_HEX_LENGTH = 8;
 const ALPHA_NIBBLE_INDEX = 3;
 const ALPHA_BYTE_START = 6;
 const RGB_SHORT_HEX_LENGTH = 3;
 const RGB_LONG_HEX_LENGTH = 6;
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -1430,12 +1430,12 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(swatchStyle.value),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$10);
+      }, null, 14, _hoisted_1$13);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-91e0130d"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-91e0130d"]]);
 
 ref(false);
 
@@ -1469,9 +1469,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$$ = ["title", "aria-label"];
-const _hoisted_2$E = ["title"];
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$12 = ["title", "aria-label"];
+const _hoisted_2$G = ["title"];
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -1490,7 +1490,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", {
         class: normalizeClass(["kds-live-status", __props.status, `size-${__props.size}`]),
         role: "img",
-        title: accessibleTitle.value,
+        title: !__props.label ? accessibleTitle.value : void 0,
         "aria-label": accessibleTitle.value
       }, [
         _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
@@ -1500,16 +1500,16 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$E)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$$);
+        }, toDisplayString(__props.label), 9, _hoisted_2$G)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$12);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-01555495"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-f20c5c00"]]);
 
-const _hoisted_1$_ = ["data-style"];
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$11 = ["data-style"];
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -1534,14 +1534,14 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$_);
+      ])], 10, _hoisted_1$11);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__scopeId", "data-v-54835dc0"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-54835dc0"]]);
 
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "KdsMissingValueIcon",
   props: {
     size: {}
@@ -1557,22 +1557,22 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-df682150"]]);
+const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-df682150"]]);
 
-const _sfc_main$1u = {  };
+const _sfc_main$1x = {  };
 
-const _hoisted_1$X = { class: "kds-divider" };
+const _hoisted_1$_ = { class: "kds-divider" };
 
 function _sfc_render$1$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$X))
+  return (openBlock(), createElementBlock("hr", _hoisted_1$_))
 }
-const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1u, [['render',_sfc_render$1$1],['__scopeId',"data-v-4d059bd3"]]);
+const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1x, [['render',_sfc_render$1$1],['__scopeId',"data-v-4d059bd3"]]);
 
-const _hoisted_1$W = {
+const _hoisted_1$Z = {
   key: 0,
   class: "label"
 };
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     dataTestId: {},
@@ -1636,7 +1636,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$W, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$Z, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -1649,9 +1649,9 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-24ade73a"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-24ade73a"]]);
 
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     dataTestId: {},
@@ -1717,7 +1717,7 @@ function isExternalUrl(url) {
   return true;
 }
 
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     dataTestId: {},
@@ -1768,7 +1768,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$1p = /* @__PURE__ */ defineComponent({
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     dataTestId: {},
@@ -2025,7 +2025,7 @@ const useStableItemIds = (options) => {
   return { itemsWithPrefix, idPrefix, toUnprefixedId };
 };
 
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -2071,14 +2071,14 @@ const kdsListItemAccessorySize = {
   LARGE: "large"
 };
 
-const _hoisted_1$T = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$z = {
+const _hoisted_1$W = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_2$B = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$q = { class: "content" };
-const _hoisted_4$m = ["title"];
-const _hoisted_5$c = {
+const _hoisted_3$r = { class: "content" };
+const _hoisted_4$n = ["title"];
+const _hoisted_5$d = {
   key: 0,
   class: "prefix"
 };
@@ -2092,7 +2092,7 @@ const _hoisted_9$2 = {
   key: 3,
   class: "trailing-item-reserve-space"
 };
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
@@ -2150,25 +2150,25 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
-          createVNode(_sfc_main$1n, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$B, [
+          createVNode(_sfc_main$1q, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$q, [
+        createElementVNode("span", _hoisted_3$r, [
           createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
             class: "label",
             title: unref(isLabelTruncated) ? props.text : void 0
           }, [
-            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$c, "(Missing) ")) : createCommentVNode("", true),
+            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$d, "(Missing) ")) : createCommentVNode("", true),
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.text), 3)
-          ], 8, _hoisted_4$m),
+          ], 8, _hoisted_4$n),
           props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
@@ -2191,20 +2191,20 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])) : createCommentVNode("", true),
           !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_9$2)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$T);
+      ], 10, _hoisted_1$W);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-a3d6c86f"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a3d6c86f"]]);
 
-const _hoisted_1$S = { class: "kds-list-item-section-title" };
-const _hoisted_2$y = {
+const _hoisted_1$V = { class: "kds-list-item-section-title" };
+const _hoisted_2$A = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$p = ["title"];
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const _hoisted_3$q = ["title"];
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -2215,8 +2215,8 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$S, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
+      return openBlock(), createElementBlock("div", _hoisted_1$V, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$A, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -2227,15 +2227,15 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$p)
+        }, toDisplayString(props.label), 9, _hoisted_3$q)
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-5eeb1226"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-5eeb1226"]]);
 
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuItem",
   props: {
     item: {},
@@ -2405,14 +2405,14 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-96d9cfba"]]);
+const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__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({
+const _hoisted_1$U = ["id", "aria-label", "aria-activedescendant"];
+const _hoisted_2$z = ["id"];
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
     id: {},
@@ -2638,28 +2638,28 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
                   items: item.children ?? [],
                   onItemClick: _cache[0] || (_cache[0] = ($event) => emit("itemClick", $event))
                 }, null, 8, ["id", "ariaLabel", "items"])
-              ], 44, _hoisted_2$x)
+              ], 44, _hoisted_2$z)
             ]),
             _: 2
           }, 1032, ["item", "is-last", "active-id", "variant", "onClick", "onMouseenter"]);
         }), 128))
-      ], 44, _hoisted_1$R);
+      ], 44, _hoisted_1$U);
     };
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-9dc6d3f6"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-ae4f1dab"]]);
 
 const kdsPopoverPlacement = {
   CUSTOM: "custom"
 };
 
-const _hoisted_1$Q = ["id", "popover", "role"];
-const _hoisted_2$w = {
+const _hoisted_1$T = ["id", "popover", "role"];
+const _hoisted_2$y = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     role: {},
@@ -2717,16 +2717,16 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$w, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$y, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
-      ], 46, _hoisted_1$Q);
+      ], 46, _hoisted_1$T);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-3354d162"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-f41f0af7"]]);
 
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2766,12 +2766,22 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     const menuContainerEl = useTemplateRef("menuContainer");
     const menuButtonEl = useTemplateRef("menuButton");
     const menuId = useId();
-    watch(isMenuOpen, async (menuOpen) => {
+    watch(isMenuOpen, (menuOpen, _oldVal, onCleanup) => {
       if (!menuOpen) {
         return;
       }
-      await nextTick();
-      menuContainerEl.value?.focus();
+      if (menuContainerEl.value) {
+        menuContainerEl.value.focus();
+        return;
+      }
+      const stop = watch(
+        menuContainerEl,
+        (el) => {
+          el?.focus();
+        },
+        { once: true }
+      );
+      onCleanup(stop);
     });
     const onItemClick = (itemId) => {
       isMenuOpen.value = false;
@@ -2780,12 +2790,12 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     __expose({ menuButtonEl });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$1p, mergeProps({ ref: "menuButton" }, toggleButtonProps.value, {
+        createVNode(_sfc_main$1s, mergeProps({ ref: "menuButton" }, toggleButtonProps.value, {
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
           "aria-haspopup": "menu",
           "aria-expanded": isMenuOpen.value,
-          "aria-controls": unref(menuId),
+          "aria-controls": isMenuOpen.value ? unref(menuId) : void 0,
           style: popoverEl.value?.anchorStyle
         }), null, 16, ["modelValue", "aria-expanded", "aria-controls", "style"]),
         createVNode(KdsPopover, {
@@ -2796,13 +2806,14 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
           "aria-label": "Menu"
         }, {
           default: withCtx(() => [
-            createVNode(KdsMenuContainer, {
+            isMenuOpen.value ? (openBlock(), createBlock(KdsMenuContainer, {
+              key: 0,
               id: unref(menuId),
               ref: "menuContainer",
               items: props.items,
               "menu-max-height": __props.menuMaxHeight,
               onItemClick
-            }, null, 8, ["id", "items", "menu-max-height"])
+            }, null, 8, ["id", "items", "menu-max-height"])) : createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["modelValue"])
@@ -2811,17 +2822,17 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$P = ["aria-disabled"];
-const _hoisted_2$v = { class: "kds-empty-state-headline" };
-const _hoisted_3$o = {
+const _hoisted_1$S = ["aria-disabled"];
+const _hoisted_2$x = { class: "kds-empty-state-headline" };
+const _hoisted_3$p = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$l = {
+const _hoisted_4$m = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -2839,13 +2850,13 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$1r : _sfc_main$1s
+      () => isLinkButton.value ? _sfc_main$1u : _sfc_main$1v
     );
     const isSecondaryLinkButton = computed(
       () => props.secondaryButton && "to" in props.secondaryButton && props.secondaryButton.to !== void 0
     );
     const secondaryButtonComponent = computed(
-      () => isSecondaryLinkButton.value ? _sfc_main$1r : _sfc_main$1s
+      () => isSecondaryLinkButton.value ? _sfc_main$1u : _sfc_main$1v
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -2859,9 +2870,9 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$v, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$o, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
+        createElementVNode("p", _hoisted_2$x, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$p, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$m, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
             disabled: props.button?.disabled || __props.disabled,
             onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("buttonClick", $event))
@@ -2871,16 +2882,16 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => !__props.disabled && emit("secondaryButtonClick", $event))
           }), null, 16, ["disabled"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$P);
+      ], 10, _hoisted_1$S);
     };
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__scopeId", "data-v-e913660a"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-e913660a"]]);
 
-const _hoisted_1$O = ["aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_1$R = ["aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
 const loadingStateText = "Loading entries";
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
@@ -3003,12 +3014,12 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
             "loading-spinner": __props.loading
           }, null, 8, ["headline", "loading-spinner"])
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$O);
+      ], 16, _hoisted_1$R);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-118706ad"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["__scopeId", "data-v-118706ad"]]);
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -3021,11 +3032,10 @@ const createUnwrappedPromise = () => {
   });
   return { resolve, reject, promise };
 };
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
 
-const _hoisted_1$N = { class: "kds-label-wrapper" };
-const _hoisted_2$u = ["id", "for", "title"];
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$Q = { class: "kds-label-wrapper" };
+const _hoisted_2$w = ["id", "for", "title"];
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -3042,7 +3052,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$N, [
+      return openBlock(), createElementBlock("div", _hoisted_1$Q, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -3050,7 +3060,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$u),
+        }, toDisplayString(props.label), 9, _hoisted_2$w),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -3061,11 +3071,11 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-efe3313e"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-efe3313e"]]);
 
-const _hoisted_1$M = ["id"];
-const _hoisted_2$t = { class: "subtext-text" };
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$P = ["id"];
+const _hoisted_2$v = { class: "subtext-text" };
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -3096,15 +3106,15 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$t, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$M)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$v, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$P)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-2e6ba10c"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-2e6ba10c"]]);
 
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -3156,7 +3166,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-5d99c134"]]);
 
 const MIN_SEGMENT_INDEX = 0;
 const LARGE_STEP = 10;
@@ -3833,17 +3843,17 @@ const useInputSegments = (modelValue, getInputElement, configRef) => {
   };
 };
 
-const _hoisted_1$L = {
+const _hoisted_1$O = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$s = {
+const _hoisted_2$u = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$n = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
-const _hoisted_4$k = ["aria-disabled"];
-const _hoisted_5$b = {
+const _hoisted_3$o = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
+const _hoisted_4$l = ["aria-disabled"];
+const _hoisted_5$c = {
   key: 4,
   class: "trailing-slot"
 };
@@ -3851,7 +3861,7 @@ const _hoisted_6$9 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -4002,13 +4012,13 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
           props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.leadingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$s, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$u, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -4053,7 +4063,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           onCut: handleInputCut,
           onDrop: handleInputDrop,
           onDragend: handleInputDragEnd
-        }, null, 42, _hoisted_3$n),
+        }, null, 42, _hoisted_3$o),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -4062,8 +4072,8 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$k)) : createCommentVNode("", true),
-        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1s, {
+        }, toDisplayString(props.unit), 11, _hoisted_4$l)) : createCommentVNode("", true),
+        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1v, {
           key: 3,
           class: "clear-button",
           size: "xsmall",
@@ -4073,7 +4083,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
-        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$b, [
+        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
         props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
@@ -4086,9 +4096,9 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-93daa14e"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-93daa14e"]]);
 
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -4147,7 +4157,6 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
       isFocused.value = true;
       if (hasFilteredSuggestions.value) {
         popoverOpen.value = true;
-        listContainerRef.value?.handleFocus();
       }
     };
     const onBlur = () => {
@@ -4160,7 +4169,6 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
       }
       if (has) {
         popoverOpen.value = true;
-        listContainerRef.value?.handleFocus();
       } else {
         closePopover();
       }
@@ -4172,7 +4180,6 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
       if (!popoverOpen.value) {
         if (event.key !== "Enter" && event.key !== "Escape") {
           popoverOpen.value = true;
-          listContainerRef.value?.handleFocus();
         }
         return;
       } else if (event.key === "Escape") {
@@ -4220,7 +4227,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             "aria-haspopup": hasSuggestions.value ? "listbox" : void 0,
             "aria-expanded": hasSuggestions.value ? popoverOpen.value : void 0,
             "aria-autocomplete": hasSuggestions.value ? "list" : void 0,
-            "aria-controls": hasSuggestions.value ? unref(suggestionId) : void 0,
+            "aria-controls": hasSuggestions.value && popoverOpen.value ? unref(suggestionId) : void 0,
             "aria-activedescendant": listContainerRef.value?.activeDescendant,
             style: hasSuggestions.value ? popoverRef.value?.anchorStyle : void 0,
             onFocus,
@@ -4238,7 +4245,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             "popover-type": "manual"
           }, {
             default: withCtx(() => [
-              createVNode(unref(KdsListContainer), {
+              popoverOpen.value ? (openBlock(), createBlock(unref(KdsListContainer), {
+                key: 0,
                 id: unref(suggestionId),
                 ref_key: "listContainerRef",
                 ref: listContainerRef,
@@ -4247,7 +4255,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
                 "controlled-externally": "",
                 "aria-label": "Suggestions",
                 onItemClick
-              }, null, 8, ["id", "possible-values"])
+              }, null, 8, ["id", "possible-values"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["modelValue"])) : createCommentVNode("", true)
@@ -4258,7 +4266,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-83f45d15"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-dd35e2a4"]]);
 
 defineComponent({
   name: "FileExplorerItemBase",
@@ -10280,19 +10288,19 @@ createScopedAnimate();
   return null;
 })();
 
-const _hoisted_1$G = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$o = { class: "control" };
-const _hoisted_3$k = {
+const _hoisted_1$J = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$q = { class: "control" };
+const _hoisted_3$l = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$h = { class: "label" };
-const _hoisted_5$8 = ["id"];
+const _hoisted_4$i = { class: "label" };
+const _hoisted_5$9 = ["id"];
 const _hoisted_6$6 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -10365,7 +10373,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$o, [
+          createElementVNode("div", _hoisted_2$q, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -10373,15 +10381,15 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
-            createElementVNode("div", _hoisted_4$h, toDisplayString(props.label), 1),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$l, [
+            createElementVNode("div", _hoisted_4$i, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
               class: "helper-text"
-            }, toDisplayString(props.helperText), 9, _hoisted_5$8)) : createCommentVNode("", true)
+            }, toDisplayString(props.helperText), 9, _hoisted_5$9)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$G),
+        ], 10, _hoisted_1$J),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -10395,9 +10403,9 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-0bec87ad"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-0bec87ad"]]);
 
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -14404,8 +14412,8 @@ new RegExp(
   "i"
 );
 
-const _hoisted_1$s = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$g = {
+const _hoisted_1$t = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
+const _hoisted_2$h = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
@@ -14416,7 +14424,7 @@ const _hoisted_4$a = {
   "aria-hidden": "true"
 };
 const TRIGGER_REF = "triggerEl";
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "BaseDropdown",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -14496,8 +14504,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$g, [
-          createVNode(_sfc_main$1n, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$h, [
+          createVNode(_sfc_main$1q, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -14515,21 +14523,21 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             size: "small"
           }, null, 8, ["name"])
         ])
-      ], 42, _hoisted_1$s);
+      ], 42, _hoisted_1$t);
     };
   }
 });
 
-const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-1bb2d375"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1bb2d375"]]);
 
 const DROPDOWN_SEARCH_THRESHOLD = 12;
 
-const _hoisted_1$r = { class: "kds-dropdown-container" };
-const _hoisted_2$f = {
+const _hoisted_1$s = { class: "kds-dropdown-container" };
+const _hoisted_2$g = {
   key: 0,
   class: "kds-dropdown-container-sticky-top"
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -14613,8 +14621,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
-        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -14646,9 +14654,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-0a6ce241"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-0a6ce241"]]);
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -14678,9 +14686,20 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     const selectedOption = computed(
       () => props.possibleValues.find((o) => o.id === modelValue.value)
     );
-    watchEffect(() => {
+    watchEffect((onCleanup) => {
       if (open.value) {
-        nextTick(() => dropdownContainerEl.value?.focus());
+        if (dropdownContainerEl.value) {
+          dropdownContainerEl.value.focus();
+          return;
+        }
+        const stop = watch(
+          dropdownContainerEl,
+          (el) => {
+            el?.focus();
+          },
+          { once: true }
+        );
+        onCleanup(stop);
       }
     });
     const closeDropdown = () => {
@@ -14731,7 +14750,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             "aria-label": "Dropdown menu"
           }, {
             default: withCtx(() => [
-              createVNode(DropdownContainer, {
+              open.value ? (openBlock(), createBlock(DropdownContainer, {
+                key: 0,
                 ref_key: "dropdownContainerEl",
                 ref: dropdownContainerEl,
                 modelValue: modelValue.value,
@@ -14740,7 +14760,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 loading: __props.loading,
                 "empty-text": "No entries found",
                 onSelect: closeDropdown
-              }, null, 8, ["modelValue", "possible-values", "loading"])
+              }, null, 8, ["modelValue", "possible-values", "loading"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["modelValue"])
@@ -14996,9 +15016,20 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const dropdownContainerEl = useTemplateRef("dropdownContainerEl");
     const popoverEl = useTemplateRef("popoverEl");
     const baseDropdownEl = useTemplateRef("baseDropdownEl");
-    watchEffect(() => {
+    watchEffect((onCleanup) => {
       if (open.value) {
-        nextTick(() => dropdownContainerEl.value?.focus());
+        if (dropdownContainerEl.value) {
+          dropdownContainerEl.value.focus();
+          return;
+        }
+        const stop = watch(
+          dropdownContainerEl,
+          (el) => {
+            el?.focus();
+          },
+          { once: true }
+        );
+        onCleanup(stop);
       }
     });
     const addedOptions = ref([]);
@@ -15078,7 +15109,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             "aria-label": "Multi select dropdown options"
           }, {
             default: withCtx(() => [
-              createVNode(MultiSelectDropdownContainer, {
+              open.value ? (openBlock(), createBlock(MultiSelectDropdownContainer, {
+                key: 0,
                 ref_key: "dropdownContainerEl",
                 ref: dropdownContainerEl,
                 modelValue: modelValue.value,
@@ -15088,7 +15120,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 "allow-new-values": __props.allowNewValues,
                 "empty-text": "No entries found",
                 onAddValue
-              }, null, 8, ["modelValue", "possible-values", "loading", "allow-new-values"])
+              }, null, 8, ["modelValue", "possible-values", "loading", "allow-new-values"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["modelValue"])
@@ -15174,14 +15206,15 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           "aria-label": "Description"
         }, {
           default: withCtx(() => [
-            createVNode(InfoPopover, {
+            modelValue.value ? (openBlock(), createBlock(InfoPopover, {
+              key: 0,
               content: props.content
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ]),
               _: 3
-            }, 8, ["content"])
+            }, 8, ["content"])) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["modelValue"])
@@ -15190,7 +15223,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-2e9ef96a"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-67a8974e"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -15363,7 +15396,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             paddingBottom: `${paddingTopBottom.value}px`
           })
         }, [
-          createVNode(unref(_sfc_main$10), {
+          createVNode(unref(_sfc_main$13), {
             title: "Selection",
             disabled: "",
             class: "select-checkbox"
@@ -16294,7 +16327,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return hasNextPage.value || hasPreviousPage.value ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("div", _hoisted_2$8, [
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-left-double",
@@ -16302,7 +16335,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             disabled: !hasPreviousPage.value,
             onClick: _cache[0] || (_cache[0] = ($event) => onPageChange(1))
           }, null, 8, ["disabled"]),
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-left",
@@ -16313,7 +16346,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         ]),
         createElementVNode("span", _hoisted_3$5, toDisplayString(__props.currentPage) + " of " + toDisplayString(totalPages.value), 1),
         createElementVNode("div", _hoisted_4$3, [
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-right",
@@ -16321,7 +16354,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             disabled: !hasNextPage.value,
             onClick: _cache[2] || (_cache[2] = ($event) => onPageChange(__props.currentPage + 1))
           }, null, 8, ["disabled"]),
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-right-double",
@@ -16388,7 +16421,7 @@ const _sfc_main$f = {
   components: {
     PageNavigation,
     PageRowRange,
-    KdsMenuButton: _sfc_main$1h
+    KdsMenuButton: _sfc_main$1k
   },
   props: {
     tableConfig: {
@@ -16639,7 +16672,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               key: index,
               class: "row"
             }, [
-              createVNode(unref(_sfc_main$z), {
+              createVNode(unref(_sfc_main$A), {
                 class: "column",
                 "model-value": String(index),
                 placeholder: "Select",
@@ -16647,7 +16680,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 ariaLabel: "Select column to filter",
                 "onUpdate:modelValue": ($event) => onColumnChange(rowPosition, $event)
               }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"]),
-              createVNode(unref(_sfc_main$z), {
+              createVNode(unref(_sfc_main$A), {
                 class: "mode",
                 "model-value": unref(isMissingMode)(config, value) ? "missing" : "contains",
                 placeholder: "Mode",
@@ -16665,7 +16698,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   placeholder: "value",
                   ariaLabel: "Enter filter value",
                   "onUpdate:modelValue": ($event) => emit("columnFilter", index, $event)
-                }, null, 8, ["model-value", "onUpdate:modelValue"])) : config.is === "ControlDropdown" ? (openBlock(), createBlock(unref(_sfc_main$z), {
+                }, null, 8, ["model-value", "onUpdate:modelValue"])) : config.is === "ControlDropdown" ? (openBlock(), createBlock(unref(_sfc_main$A), {
                   key: 1,
                   ref_for: true,
                   ref: (el) => setValueRef(index, el),
@@ -16687,7 +16720,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": ($event) => emit("columnFilter", index, $event)
                 }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"])) : createCommentVNode("", true)
               ], 64)) : (openBlock(), createElementBlock("span", _hoisted_2$5)),
-              createVNode(unref(_sfc_main$1s), {
+              createVNode(unref(_sfc_main$1v), {
                 class: "trash",
                 "aria-label": "Remove filter",
                 "leading-icon": "trash",
@@ -16699,7 +16732,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             ]);
           }), 128))
         ])) : createCommentVNode("", true),
-        canAddMore.value ? (openBlock(), createBlock(unref(_sfc_main$1s), {
+        canAddMore.value ? (openBlock(), createBlock(unref(_sfc_main$1v), {
           key: 1,
           class: "add",
           label: "Add criterion",
@@ -16797,7 +16830,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     __expose({ openPopover });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(_sfc_main$1p), {
+        createVNode(unref(_sfc_main$1s), {
           modelValue: unref(buttonIsActive),
           "onUpdate:modelValue": [
             _cache[0] || (_cache[0] = ($event) => isRef(buttonIsActive) ? buttonIsActive.value = $event : null),
@@ -16915,7 +16948,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(_sfc_main$1p), {
+        createVNode(unref(_sfc_main$1s), {
           "model-value": unref(buttonIsActive),
           label: "Sorting",
           size: "small",
@@ -16949,13 +16982,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               ]),
               body: withCtx(() => [
                 createElementVNode("div", _hoisted_1$7, [
-                  createVNode(unref(_sfc_main$z), {
+                  createVNode(unref(_sfc_main$A), {
                     "model-value": selectedColumn.value,
                     "possible-values": possibleColumns.value,
                     ariaLabel: "Column to sort by",
                     "onUpdate:modelValue": onSortColumnChange
                   }, null, 8, ["model-value", "possible-values"]),
-                  createVNode(unref(_sfc_main$z), {
+                  createVNode(unref(_sfc_main$A), {
                     "model-value": selectedSortDirection.value,
                     "possible-values": possibleDirections.value,
                     ariaLabel: "Sort direction",
@@ -17070,7 +17103,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           }, null, 8, ["columns", "col-filter-values"])) : createCommentVNode("", true)
         ]),
         createElementVNode("div", _hoisted_4$1, [
-          __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(_sfc_main$1h), {
+          __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(_sfc_main$1k), {
             key: 0,
             ariaLabel: "Table settings",
             size: "small",
@@ -17078,7 +17111,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             "leading-icon": "parameter",
             items: __props.actionConfig.settingsItems
           }, null, 8, ["items"])) : createCommentVNode("", true),
-          isTemporaryView.value ? (openBlock(), createBlock(unref(_sfc_main$1s), {
+          isTemporaryView.value ? (openBlock(), createBlock(unref(_sfc_main$1v), {
             key: 1,
             ariaLabel: "Reset to Nodeoutput",
             size: "small",
@@ -17114,33 +17147,37 @@ const useHeaderMenuItems = ({
     staticItems.push({
       id: "table-header-sort",
       text: "Sort this column",
-      separator: !showFilterItem && hasDynamicItems,
-      sectionHeadline: true,
-      sectionHeadlineIcon: "sort-ascending"
-    });
-    staticItems.push({
-      id: "sort-asc",
-      text: sortTexts.ascending,
-      handler: (_item, _event) => {
-        onColumnSort(1);
-      },
-      trailingIcon: sortDirection === 1 ? "checkmark" : void 0
-    });
-    staticItems.push({
-      id: "sort-desc",
-      text: sortTexts.descending,
-      handler: (_item, _event) => {
-        onColumnSort(-1);
-      },
-      trailingIcon: sortDirection === -1 ? "checkmark" : void 0
-    });
-    staticItems.push({
-      id: "sort-none",
-      text: "No sorting",
-      handler: (_item, _event) => {
-        onColumnSort(0);
+      accessory: {
+        type: "icon",
+        name: "sort-ascending"
       },
-      trailingIcon: sortDirection === 0 ? "checkmark" : void 0
+      separator: !showFilterItem && hasDynamicItems,
+      children: [
+        {
+          id: "sort-asc",
+          text: sortTexts.ascending,
+          handler: (_item, _event) => {
+            onColumnSort(1);
+          },
+          trailingIcon: sortDirection === 1 ? "checkmark" : void 0
+        },
+        {
+          id: "sort-desc",
+          text: sortTexts.descending,
+          handler: (_item, _event) => {
+            onColumnSort(-1);
+          },
+          trailingIcon: sortDirection === -1 ? "checkmark" : void 0
+        },
+        {
+          id: "sort-none",
+          text: "No sorting",
+          handler: (_item, _event) => {
+            onColumnSort(0);
+          },
+          trailingIcon: sortDirection === 0 ? "checkmark" : void 0
+        }
+      ]
     });
   }
   if (showFilterItem) {
@@ -17240,11 +17277,6 @@ const _hoisted_4 = {
   class: "delete-column-button"
 };
 const _hoisted_5 = { key: 1 };
-const columnHeaderRef = "columnHeader";
-const contentRef = "contentRef";
-const mainHeaderRef = "mainHeader";
-const headerTextRef = "headerText";
-const columnDeleteButtonRef = "columnDeleteButton";
 const columnMenuButtonRef = "columnMenuButton";
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "HeaderCell",
@@ -17264,13 +17296,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const columnHeader = useTemplateRef(columnHeaderRef);
-    const content = useTemplateRef(contentRef);
-    const mainHeader = useTemplateRef(mainHeaderRef);
-    const headerText = useTemplateRef(headerTextRef);
-    const columnDeleteButton = useTemplateRef(
-      columnDeleteButtonRef
-    );
+    const columnHeader = useTemplateRef("columnHeader");
+    const content = useTemplateRef("content");
+    const mainHeader = useTemplateRef("mainHeader");
+    const headerText = useTemplateRef("headerText");
+    const columnDeleteButton = useTemplateRef("columnDeleteButton");
     const columnMenuButton = useTemplateRef(columnMenuButtonRef);
     const subMenuItems = computed(
       () => useHeaderMenuItems({
@@ -17382,7 +17412,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     __expose({ getHeaderCellWidth, focus, isFocusable });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("th", {
-        ref: columnHeaderRef,
+        ref_key: "columnHeader",
+        ref: columnHeader,
         scope: "col",
         style: normalizeStyle({
           width: `calc(${__props.columnSize || unref(MIN_COLUMN_SIZE)}px)`,
@@ -17397,7 +17428,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         ])
       }, [
         createElementVNode("div", {
-          ref: contentRef,
+          ref_key: "content",
+          ref: content,
           class: normalizeClass(["column-header-content", [
             {
               "with-button-in-header": subMenuItems.value?.length || __props.column.deletable
@@ -17417,16 +17449,20 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           ]
         }, [
           createElementVNode("div", {
-            ref: mainHeaderRef,
+            ref_key: "mainHeader",
+            ref: mainHeader,
             class: "main-header"
           }, [
             createElementVNode("div", {
               class: "header-text-container",
               title: __props.column.header
             }, [
-              createElementVNode("span", { ref: headerTextRef }, toDisplayString(__props.column.header), 1)
+              createElementVNode("span", {
+                ref_key: "headerText",
+                ref: headerText
+              }, toDisplayString(__props.column.header), 513)
             ], 8, _hoisted_2$2)
-          ]),
+          ], 512),
           __props.column.subHeader ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
             renderSlot(_ctx.$slots, "subHeader", {
               subHeader: __props.column.subHeader
@@ -17436,18 +17472,19 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ], 42, _hoisted_1$5),
         __props.column.deletable ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createVNode(unref(_sfc_main$1s), {
-            ref: columnDeleteButtonRef,
+          createVNode(unref(_sfc_main$1v), {
+            ref_key: "columnDeleteButton",
+            ref: columnDeleteButton,
             variant: "transparent",
             "leading-icon": "trash",
             size: "small",
             ariaLabel: "Delete column",
             onClick: _cache[9] || (_cache[9] = withModifiers(($event) => emit("onDeleteColumn"), ["stop"])),
             onKeydown: _cache[10] || (_cache[10] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
-          })
+          }, null, 512)
         ])) : createCommentVNode("", true),
         subMenuItems.value?.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
-          createVNode(unref(_sfc_main$1h), {
+          createVNode(unref(_sfc_main$1k), {
             ref: columnMenuButtonRef,
             ariaLabel: "Table column options",
             items: subMenuItems.value,
@@ -17482,12 +17519,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const HeaderCell = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-cc11c6b2"]]);
+const HeaderCell = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-b99ef494"]]);
 
 const _sfc_main$8 = {
   components: {
-    KdsCheckbox: _sfc_main$10,
-    KdsButton: _sfc_main$1s,
+    KdsCheckbox: _sfc_main$13,
+    KdsButton: _sfc_main$1v,
     HeaderCell
   },
   props: {
@@ -17836,7 +17873,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        createVNode(unref(_sfc_main$1s), {
+        createVNode(unref(_sfc_main$1v), {
           ref: buttonRef,
           label: "Add",
           "leading-icon": "plus",
@@ -17905,8 +17942,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     defaultTopBottomPadding: {},
     defaultLeftRightPadding: {},
     enableExpand: { type: Boolean },
-    isEditing: { type: Boolean },
-    inlineBlock: { type: Boolean }
+    isEditing: { type: Boolean }
   },
   emits: ["click", "expand", "input", "select"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -18024,7 +18060,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           "data-cell",
           {
             "colored-cell": __props.color,
-            "inline-block": __props.inlineBlock,
             "in-cell-selection": __props.isInCellSelection
           }
         ]),
@@ -18069,7 +18104,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CellRenderer = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-2bf6d6ac"]]);
+const CellRenderer = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-84b77b2e"]]);
 
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Cell",
@@ -18084,7 +18119,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     defaultTopBottomPadding: {},
     defaultLeftRightPadding: {},
     isEditing: { type: Boolean },
-    inlineBlock: { type: Boolean },
     enableDataValueView: { type: Boolean }
   },
   emits: ["click", "input", "select", "dataValueView"],
@@ -18134,7 +18168,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "is-in-cell-selection": __props.isInCellSelection,
         "is-to-be-expanded": __props.isToBeExpanded,
         "is-editing": __props.isEditing,
-        "inline-block": __props.inlineBlock,
         onClick: _cache[0] || (_cache[0] = (value) => emit("click", value)),
         onExpand: _cache[1] || (_cache[1] = () => emit("dataValueView")),
         onSelect: _cache[2] || (_cache[2] = (value) => emit("select", value)),
@@ -18148,7 +18181,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ])
           };
         })
-      ]), 1032, ["is-missing", "is-slotted", "text", "title", "color", "select-on-move", "default-top-bottom-padding", "default-left-right-padding", "no-padding-left-right", "no-padding-top-bottom", "size", "enable-expand", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "is-editing", "inline-block"]);
+      ]), 1032, ["is-missing", "is-slotted", "text", "title", "color", "select-on-move", "default-top-bottom-padding", "default-left-right-padding", "no-padding-left-right", "no-padding-top-bottom", "size", "enable-expand", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "is-editing"]);
     };
   }
 });
@@ -18343,7 +18376,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           })
         }, [
           __props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$1, [
-            createVNode(unref(_sfc_main$1s), {
+            createVNode(unref(_sfc_main$1v), {
               ref_key: "deleteButton",
               ref: deleteButton,
               variant: "transparent",
@@ -18369,7 +18402,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               paddingBottom: `${paddingTopBottom.value}px`
             })
           }, [
-            createVNode(unref(_sfc_main$10), {
+            createVNode(unref(_sfc_main$13), {
               ref_key: "selectionCheckbox",
               ref: selectionCheckbox,
               title: "Select row",
@@ -18402,7 +18435,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               "is-to-be-expanded": __props.toBeExpandedCellIndex === ind,
               "enable-data-value-view": __props.tableConfig.enableDataValueViews,
               "is-editing": __props.toBeEditedCellIndex === ind,
-              "inline-block": __props.tableConfig.cellRendererInlineBlock,
               size: __props.colSizes[ind] ?? 100,
               "default-top-bottom-padding": paddingTopBottom.value,
               "default-left-right-padding": unref(paddingLeftRight),
@@ -18427,10 +18459,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 }, void 0, true)
               ]),
               _: 2
-            }, 1032, ["column", "cell-data", "select-on-move", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "enable-data-value-view", "is-editing", "inline-block", "size", "default-top-bottom-padding", "default-left-right-padding", "onClick", "onSelect", "onDataValueView"]);
+            }, 1032, ["column", "cell-data", "select-on-move", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "enable-data-value-view", "is-editing", "size", "default-top-bottom-padding", "default-left-right-padding", "onClick", "onSelect", "onDataValueView"]);
           }), 128)),
           filteredSubMenuItems.value?.length ? (openBlock(), createElementBlock("td", _hoisted_2, [
-            createVNode(unref(_sfc_main$1h), {
+            createVNode(unref(_sfc_main$1k), {
               modelValue: isMenuOpen.value,
               "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isMenuOpen.value = $event),
               ariaLabel: "More actions",
@@ -18461,7 +18493,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const Row = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-5dbf98c3"]]);
+const Row = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-24dd5f3c"]]);
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "CellSelectionOverlay",
@@ -18671,9 +18703,6 @@ const _sfc_main$1 = {
       type: Array,
       default: () => []
     },
-    /**
-     * Config props.
-     */
     /** Stable per-column definitions. */
     columns: {
       type: Array,
@@ -19744,6 +19773,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             columns: $props.columns,
             "col-filter-values": $props.colFilterValues,
             "col-sizes": $props.colSizes,
+            "col-sort-values": $props.colSortValues,
             "is-selected": $props.tableState.totalSelected > 0,
             "get-drag-handle-height": getDragHandleHeight,
             class: normalizeClass([
@@ -19776,7 +19806,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
               renderSlot(_ctx.$slots, "subHeader", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
             ]),
             _: 3
-          }, 8, ["style", "table-config", "action-config", "columns", "col-filter-values", "col-sizes", "is-selected", "get-drag-handle-height", "class", "show-new-column-button", "selected-header-index", "onHeaderSelect", "onColumnSort", "onOpenActionBarFilterControl", "onClearColumnFilter", "onDeleteColumn", "onColumnResize", "onAllColumnsResize", "onColumnResizeStart", "onColumnResizeEnd", "onMoveDownFromHeaderCell", "onHeaderCellSelect", "onHeaderCellDeselect", "onUpdate:newColumnButtonWidth", "onNewColumnButtonClick"])
+          }, 8, ["style", "table-config", "action-config", "columns", "col-filter-values", "col-sizes", "col-sort-values", "is-selected", "get-drag-handle-height", "class", "show-new-column-button", "selected-header-index", "onHeaderSelect", "onColumnSort", "onOpenActionBarFilterControl", "onClearColumnFilter", "onDeleteColumn", "onColumnResize", "onAllColumnsResize", "onColumnResizeStart", "onColumnResizeEnd", "onMoveDownFromHeaderCell", "onHeaderCellSelect", "onHeaderCellDeselect", "onUpdate:newColumnButtonWidth", "onNewColumnButtonClick"])
         ]),
         "cell-selection-overlay": withCtx(() => [
           $setup.rectMinMax && !$setup.isEditingCell && $options.selectedHeaderIndex === null ? (openBlock(), createBlock(_component_CellSelectionOverlay, {
@@ -19815,7 +19845,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 544)
   ]);
 }
-const TableUI = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-bac906a7"]]);
+const TableUI = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-fa3f06f3"]]);
 
 const useTableReady = ({ onReady }) => {
   const autoSizesInitialized = ref(false);
@@ -20012,8 +20042,7 @@ const _sfc_main = {
     tableConfigForAutoSizesCalculation() {
       return {
         ...this.tableConfig,
-        forceRenderAll: true,
-        cellRendererInlineBlock: true
+        forceRenderAll: true
       };
     },
     autoColumnSizingActive() {
@@ -20324,7 +20353,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]), 1032, ["data", "current-selection", "columns", "col-sizes", "row-config", "table-config", "onVnodeMounted"])) : createCommentVNode("", true)
   ], 64);
 }
-const TableUIWithAutoSizeCalculation = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-38696592"]]);
+const TableUIWithAutoSizeCalculation = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-72cc3068"]]);
 
 export { TableActionBar, TableUI, TableUIWithAutoSizeCalculation, columnFilterConfigs, columnSortText, columnTypes, constants, defaultPageSize, filterComponents, getMissingValueMessage, isMissingValue, tablePageSizes, unpackObjectRepresentation };
 //# sourceMappingURL=index.js.map