@knime/kds-components 0.31.2 → 0.31.3

package/dist/index.js

@@ -1,183 +1,7 @@
-import { effectScope, defineComponent, createPropsRestProxy, ref, watch, computed, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, unref, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, resolveDynamicComponent, mergeProps, useTemplateRef, createTextVNode, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, defineAsyncComponent, toRefs, useCssVars, normalizeProps, guardReactiveProps, createSlots, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText } from 'vue';
-import { useEventListener, useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useVirtualList, useElementSize, useMousePressed, useTemplateRefsList } from '@vueuse/core';
+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, defineAsyncComponent, toRefs, useCssVars, normalizeProps, guardReactiveProps, createSlots, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, createTextVNode, effectScope } from 'vue';
+import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useVirtualList, useElementSize, useMousePressed, useTemplateRefsList, useEventListener } from '@vueuse/core';
 
-import './index.css';const SHOW_DELAY = 450;
-const HIDE_DELAY = 150;
-const stateMap = /* @__PURE__ */ new WeakMap();
-let visibleCount = 0;
-let currentVisible = null;
-function generateTooltipDiv(text) {
-  const div = document.createElement("div");
-  div.classList.add("kds-tooltip");
-  div.textContent = text;
-  return div;
-}
-function getText(binding) {
-  const value = binding.value;
-  if (value === null || value === void 0 || value === "") {
-    return null;
-  }
-  return String(value);
-}
-function createPopover(triggerEl, binding) {
-  const popover = generateTooltipDiv(getText(binding) ?? "");
-  popover.setAttribute("popover", "manual");
-  popover.setAttribute("role", "tooltip");
-  const id = `kds-tooltip-${crypto.randomUUID()}`;
-  popover.id = id;
-  triggerEl.setAttribute("aria-describedby", id);
-  const anchorName = `--kds-tooltip-anchor-${id}`;
-  triggerEl.style.setProperty("anchor-name", anchorName);
-  popover.style.setProperty("position-anchor", anchorName);
-  document.body.appendChild(popover);
-  return popover;
-}
-function cancelTimers(state) {
-  if (state.showTimer !== null) {
-    clearTimeout(state.showTimer);
-    state.showTimer = null;
-  }
-  if (state.hideTimer !== null) {
-    clearTimeout(state.hideTimer);
-    state.hideTimer = null;
-  }
-}
-function hidePopover(state) {
-  if (!state.visible) {
-    return;
-  }
-  state.visible = false;
-  visibleCount--;
-  if (currentVisible === state) {
-    currentVisible = null;
-  }
-  try {
-    state.popoverEl.hidePopover();
-  } catch {
-  }
-}
-function showPopover(state) {
-  if (state.visible) {
-    return;
-  }
-  if (currentVisible && currentVisible !== state) {
-    cancelTimers(currentVisible);
-    hidePopover(currentVisible);
-  }
-  try {
-    state.popoverEl.showPopover();
-  } catch {
-  }
-  state.visible = true;
-  visibleCount++;
-  currentVisible = state;
-}
-function scheduleShow(state, delay) {
-  cancelTimers(state);
-  if (state.dismissed) {
-    return;
-  }
-  state.showTimer = setTimeout(() => {
-    state.showTimer = null;
-    showPopover(state);
-  }, delay);
-}
-function scheduleHide(state) {
-  cancelTimers(state);
-  state.hideTimer = setTimeout(() => {
-    state.hideTimer = null;
-    hidePopover(state);
-  }, HIDE_DELAY);
-}
-function mount(triggerEl, binding) {
-  if (getText(binding) === null) {
-    return;
-  }
-  const popoverEl = createPopover(triggerEl, binding);
-  const state = {
-    popoverEl,
-    showTimer: null,
-    hideTimer: null,
-    anchorName: popoverEl.id,
-    dismissed: false,
-    visible: false,
-    scope: effectScope()
-  };
-  stateMap.set(triggerEl, state);
-  const onMouseEnter = () => {
-    state.dismissed = false;
-    const delay = visibleCount > 0 ? 0 : SHOW_DELAY;
-    scheduleShow(state, delay);
-  };
-  const onMouseLeave = () => scheduleHide(state);
-  const onFocusIn = () => {
-    state.dismissed = false;
-    scheduleShow(state, 0);
-  };
-  const onFocusOut = () => {
-    cancelTimers(state);
-    hidePopover(state);
-  };
-  const onDocumentKeyDown = (e) => {
-    if (e.key === "Escape" && state.visible) {
-      cancelTimers(state);
-      hidePopover(state);
-      state.dismissed = true;
-    }
-  };
-  const onPopoverMouseEnter = () => {
-    cancelTimers(state);
-  };
-  const onPopoverMouseLeave = () => {
-    scheduleHide(state);
-  };
-  state.scope.run(() => {
-    useEventListener(triggerEl, "mouseenter", onMouseEnter);
-    useEventListener(triggerEl, "mouseleave", onMouseLeave);
-    useEventListener(triggerEl, "focusin", onFocusIn);
-    useEventListener(triggerEl, "focusout", onFocusOut);
-    useEventListener(document, "keydown", onDocumentKeyDown, true);
-    useEventListener(popoverEl, "mouseenter", onPopoverMouseEnter);
-    useEventListener(popoverEl, "mouseleave", onPopoverMouseLeave);
-  });
-}
-function unmount(triggerEl) {
-  const state = stateMap.get(triggerEl);
-  if (state) {
-    state.scope.stop();
-    cancelTimers(state);
-    hidePopover(state);
-    state.popoverEl.remove();
-    stateMap.delete(triggerEl);
-  }
-  triggerEl.removeAttribute("aria-describedby");
-  triggerEl.style.removeProperty("anchor-name");
-}
-const vKdsTooltip = {
-  mounted(el, binding) {
-    mount(el, binding);
-  },
-  updated(el, binding) {
-    const state = stateMap.get(el);
-    const newText = getText(binding);
-    if (newText === null) {
-      if (state) {
-        unmount(el);
-      }
-      return;
-    }
-    if (!state) {
-      mount(el, binding);
-      return;
-    }
-    state.popoverEl.textContent = newText;
-  },
-  unmounted(el) {
-    unmount(el);
-  }
-};
-
-const kdsAvatarSize = {
+import './index.css';const kdsAvatarSize = {
   SMALL: "small",
   MEDIUM: "medium",
   LARGE: "large",
@@ -185,9 +9,9 @@ const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$17 = ["role", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$H = ["src"];
-const _hoisted_3$t = {
+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"
@@ -241,9 +65,10 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
     );
     const avatarColor = computed(() => getAvatarColor(displayedInitials.value));
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock("div", {
         class: normalizeClass(["kds-avatar", __props.size]),
         role: hasTitle.value ? "img" : "presentation",
+        title: hasTitle.value ? accessibleTitle.value : void 0,
         "aria-hidden": !hasTitle.value ? "true" : void 0,
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0,
         "data-color": avatarColor.value
@@ -255,12 +80,10 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$H)) : (openBlock(), createElementBlock("div", _hoisted_3$t, [
+        }, null, 40, _hoisted_2$J)) : (openBlock(), createElementBlock("div", _hoisted_3$v, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$17)), [
-        [unref(vKdsTooltip), hasTitle.value ? accessibleTitle.value : void 0]
-      ]);
+      ], 10, _hoisted_1$18);
     };
   }
 });
@@ -273,11 +96,11 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-ab63cc85"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-9e1a5abe"]]);
 
-const _hoisted_1$16 = ["aria-label"];
-const _hoisted_2$G = { class: "avatars" };
-const _hoisted_3$s = {
+const _hoisted_1$17 = ["aria-label"];
+const _hoisted_2$I = { class: "avatars" };
+const _hoisted_3$u = {
   key: 0,
   class: "more-count",
   "aria-hidden": "true"
@@ -302,7 +125,7 @@ const _sfc_main$1I = /* @__PURE__ */ defineComponent({
         role: "group",
         "aria-label": ariaLabel.value
       }, [
-        createElementVNode("div", _hoisted_2$G, [
+        createElementVNode("div", _hoisted_2$I, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.avatars, (avatar, index) => {
             return openBlock(), createBlock(KdsAvatar, {
               key: index,
@@ -316,8 +139,8 @@ const _sfc_main$1I = /* @__PURE__ */ defineComponent({
             }, null, 8, ["style", "size", "initials", "title", "src"]);
           }), 128))
         ]),
-        __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$s, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
-      ], 8, _hoisted_1$16);
+        __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$u, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
+      ], 8, _hoisted_1$17);
     };
   }
 });
@@ -762,6 +585,7 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
+const _hoisted_1$16 = ["title"];
 const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
@@ -794,22 +618,21 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
     });
     __expose({ status });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", {
-        class: normalizeClass(["kds-data-type-icon-container", __props.size, { disabled: __props.disabled }])
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["kds-data-type-icon-container", __props.size, { disabled: __props.disabled }]),
+        title: __props.iconTitle
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent)), {
           class: normalizeClass(["kds-icon", "kds-data-type-icon", iconSize.value]),
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 2)), [
-        [unref(vKdsTooltip), __props.iconTitle]
-      ]);
+      ], 10, _hoisted_1$16);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-667bceea"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-38e9537f"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -863,8 +686,8 @@ const kdsProgressBarSize = {
 };
 const kdsProgressBarSizes = Object.values(kdsProgressBarSize);
 
-const _hoisted_1$14 = ["aria-label"];
-const _hoisted_2$F = {
+const _hoisted_1$14 = ["title", "aria-label"];
+const _hoisted_2$H = {
   key: 0,
   class: "indeterminate-bar",
   "aria-hidden": "true"
@@ -901,19 +724,18 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
           }
         ])
       }, [
-        withDirectives(createElementVNode("progress", mergeProps({
+        createElementVNode("progress", mergeProps({
+          title: title.value,
           "aria-label": title.value,
           class: "progress"
-        }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16, _hoisted_1$14), [
-          [unref(vKdsTooltip), title.value]
-        ]),
-        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$F)) : createCommentVNode("", true)
+        }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16, _hoisted_1$14),
+        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$H)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
 
-const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-06930dc4"]]);
+const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-884d689a"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -932,7 +754,7 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$13 = ["role", "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;
@@ -1007,20 +829,19 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
     const accessibleTitle = computed(() => props.title?.trim() ?? "");
     const hasTitle = computed(() => accessibleTitle.value.length > 0);
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("span", {
+      return openBlock(), createElementBlock("span", {
         role: hasTitle.value ? "img" : "presentation",
         class: normalizeClass(["kds-color-swatch", __props.size]),
+        title: hasTitle.value ? accessibleTitle.value : void 0,
         style: normalizeStyle(swatchStyle.value),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$13)), [
-        [unref(vKdsTooltip), hasTitle.value ? accessibleTitle.value : void 0]
-      ]);
+      }, null, 14, _hoisted_1$13);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-b91cf470"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-91e0130d"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -1140,7 +961,8 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$12 = ["aria-label"];
+const _hoisted_1$12 = ["title", "aria-label"];
+const _hoisted_2$G = ["title"];
 const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
@@ -1157,30 +979,26 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("span", {
+      return openBlock(), createElementBlock("span", {
         class: normalizeClass(["kds-live-status", __props.status, `size-${__props.size}`]),
         role: "img",
+        title: !__props.label ? accessibleTitle.value : void 0,
         "aria-label": accessibleTitle.value
       }, [
         _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
-        __props.label ? withDirectives((openBlock(), createElementBlock("span", {
+        __props.label ? (openBlock(), createElementBlock("span", {
           key: 0,
           ref_key: "labelEl",
           ref: labelEl,
-          class: "label"
-        }, [
-          createTextVNode(toDisplayString(__props.label), 1)
-        ])), [
-          [unref(vKdsTooltip), unref(isTruncated) ? __props.label : void 0]
-        ]) : createCommentVNode("", true)
-      ], 10, _hoisted_1$12)), [
-        [unref(vKdsTooltip), !__props.label ? accessibleTitle.value : void 0]
-      ]);
+          class: "label",
+          title: unref(isTruncated) ? __props.label : void 0
+        }, toDisplayString(__props.label), 9, _hoisted_2$G)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$12);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-c3dcc5ff"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-f20c5c00"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -1238,9 +1056,9 @@ const kdsLoadingSpinnerVariants = Object.values(
 );
 
 const _hoisted_1$10 = ["role"];
-const _hoisted_2$E = { class: "header" };
-const _hoisted_3$r = { class: "headline" };
-const _hoisted_4$n = {
+const _hoisted_2$F = { class: "header" };
+const _hoisted_3$t = { class: "headline" };
+const _hoisted_4$p = {
   key: 0,
   class: "body"
 };
@@ -1275,15 +1093,15 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$E, [
+        createElementVNode("div", _hoisted_2$F, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$r, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$t, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$n, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString(props.description), 1)) : createCommentVNode("", true)
       ], 10, _hoisted_1$10);
     };
   }
@@ -1318,16 +1136,16 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
 const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-df682150"]]);
 
 const _hoisted_1$$ = { class: "donut-container" };
-const _hoisted_2$D = ["height", "width", "viewBox"];
-const _hoisted_3$q = ["r", "stroke-width"];
-const _hoisted_4$m = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
-const _hoisted_5$d = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_2$E = ["height", "width", "viewBox"];
+const _hoisted_3$s = ["r", "stroke-width"];
+const _hoisted_4$o = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_5$e = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
 const _hoisted_6$b = {
   key: 0,
   class: "donut-text"
 };
-const _hoisted_7$3 = { class: "title" };
-const _hoisted_8$2 = {
+const _hoisted_7$4 = { class: "title" };
+const _hoisted_8$3 = {
   key: 0,
   class: "sub-text"
 };
@@ -1391,7 +1209,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
             r: r.value,
             "stroke-width": strokeWidth.value,
             fill: "transparent"
-          }, null, 8, _hoisted_3$q),
+          }, null, 8, _hoisted_3$s),
           __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 0,
             class: normalizeClass(["value-wedge", "secondary-circle", { animate: __props.animate }]),
@@ -1403,7 +1221,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": secondaryStrokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_4$m)) : createCommentVNode("", true),
+          }, null, 10, _hoisted_4$o)) : createCommentVNode("", true),
           !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 1,
             class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
@@ -1415,11 +1233,11 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": strokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_5$d)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$D)),
+          }, null, 10, _hoisted_5$e)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$E)),
         __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
-          createElementVNode("div", _hoisted_7$3, toDisplayString(__props.title), 1),
-          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$2, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
+          createElementVNode("div", _hoisted_7$4, toDisplayString(__props.title), 1),
+          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -1488,10 +1306,11 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createBlock(resolveDynamicComponent(__props.component), {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.component), {
         type: __props.component === "button" ? "button" : void 0,
         class: normalizeClass(classes.value),
         disabled: __props.disabled,
+        title: props.title,
         "aria-label": props.ariaLabel,
         "data-test-id": props.dataTestId,
         onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
@@ -1512,14 +1331,12 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name", "size"])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["type", "class", "disabled", "aria-label", "data-test-id"])), [
-        [unref(vKdsTooltip), props.title]
-      ]);
+      }, 8, ["type", "class", "disabled", "title", "aria-label", "data-test-id"]);
     };
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-83f63dc3"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-24ade73a"]]);
 
 const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
@@ -1818,7 +1635,7 @@ function prettyBytes(number, options) {
 }
 
 const _hoisted_1$Y = { class: "label" };
-const _hoisted_2$C = {
+const _hoisted_2$D = {
   key: 1,
   class: "file-size"
 };
@@ -1901,12 +1718,13 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
       emit("click", event);
     }
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createBlock(resolveDynamicComponent(component.value), {
+      return openBlock(), createBlock(resolveDynamicComponent(component.value), {
         class: normalizeClass(["kds-link", `variant-${variant.value}`, { disabled: __props.disabled }]),
         to: effectiveTo.value,
         download: __props.disabled ? void 0 : __props.download,
         target: effectiveTarget.value,
         rel: effectiveRel.value,
+        title: effectiveTitle.value,
         "aria-disabled": __props.disabled ? "true" : void 0,
         onClick
       }, {
@@ -1917,17 +1735,15 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$D, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["class", "to", "download", "target", "rel", "aria-disabled"])), [
-        [unref(vKdsTooltip), effectiveTitle.value]
-      ]);
+      }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
     };
   }
 });
 
-const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-6f9a0cf6"]]);
+const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-56e748a8"]]);
 
 const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
@@ -1967,7 +1783,7 @@ const kdsToggleButtonVariant = {
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
 const _hoisted_1$X = ["data-visible"];
-const _hoisted_2$B = ["data-visible"];
+const _hoisted_2$C = ["data-visible"];
 const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
@@ -2039,7 +1855,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$B)
+            ], 8, _hoisted_2$C)
           ], 2)
         ]),
         _: 1
@@ -2331,21 +2147,23 @@ const kdsListItemAccessorySize = {
 };
 
 const _hoisted_1$W = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$A = {
+const _hoisted_2$B = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$p = { class: "content" };
-const _hoisted_4$l = {
+const _hoisted_3$r = { class: "content" };
+const _hoisted_4$n = ["title"];
+const _hoisted_5$d = {
   key: 0,
   class: "prefix"
 };
-const _hoisted_5$c = { class: "trailing-item" };
-const _hoisted_6$a = {
+const _hoisted_6$a = ["title"];
+const _hoisted_7$3 = { class: "trailing-item" };
+const _hoisted_8$2 = {
   key: 0,
   class: "shortcut"
 };
-const _hoisted_7$2 = {
+const _hoisted_9$2 = {
   key: 3,
   class: "trailing-item-reserve-space"
 };
@@ -2407,39 +2225,35 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$A, [
+        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$p, [
-          withDirectives((openBlock(), createElementBlock("span", {
+        createElementVNode("span", _hoisted_3$r, [
+          createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
-            class: "label"
+            class: "label",
+            title: unref(isLabelTruncated) ? props.text : void 0
           }, [
-            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_4$l, "(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)
-          ])), [
-            [unref(vKdsTooltip), unref(isLabelTruncated) ? props.text : void 0]
-          ]),
-          props.subText ? withDirectives((openBlock(), createElementBlock("span", {
+          ], 8, _hoisted_4$n),
+          props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
             ref: subtextEl,
-            class: "subtext"
-          }, [
-            createTextVNode(toDisplayString(props.subText), 1)
-          ])), [
-            [unref(vKdsTooltip), unref(isSubtextTruncated) ? props.subText : void 0]
-          ]) : createCommentVNode("", true)
+            class: "subtext",
+            title: unref(isSubtextTruncated) ? props.subText : void 0
+          }, toDisplayString(props.subText), 9, _hoisted_6$a)) : createCommentVNode("", true)
         ]),
-        createElementVNode("span", _hoisted_5$c, [
-          props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_6$a, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
+        createElementVNode("span", _hoisted_7$3, [
+          props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_8$2, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
             key: 1,
             size: badgeSize.value,
             label: props.badge.label,
@@ -2450,20 +2264,21 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
             size: "small",
             name: props.trailingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_7$2)) : createCommentVNode("", true)
+          !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_9$2)) : createCommentVNode("", true)
         ])
       ], 10, _hoisted_1$W);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-36ccb8f8"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a3d6c86f"]]);
 
 const _hoisted_1$V = { class: "kds-list-item-section-title" };
-const _hoisted_2$z = {
+const _hoisted_2$A = {
   key: 0,
   class: "icon"
 };
+const _hoisted_3$q = ["title"];
 const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
@@ -2476,27 +2291,24 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$V, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$A, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
           }, null, 8, ["name"])
         ])) : createCommentVNode("", true),
-        withDirectives((openBlock(), createElementBlock("span", {
+        createElementVNode("span", {
           ref_key: "labelEl",
           ref: labelEl,
-          class: "label"
-        }, [
-          createTextVNode(toDisplayString(props.label), 1)
-        ])), [
-          [unref(vKdsTooltip), unref(isTruncated) ? props.label : void 0]
-        ])
+          class: "label",
+          title: unref(isTruncated) ? props.label : void 0
+        }, toDisplayString(props.label), 9, _hoisted_3$q)
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-012ece68"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-5eeb1226"]]);
 
 const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuItem",
@@ -2674,7 +2486,7 @@ const ContainerDepthKey = /* @__PURE__ */ Symbol("ContainerDepth");
 const ChildItemKey = /* @__PURE__ */ Symbol("ChildItem");
 
 const _hoisted_1$U = ["id", "aria-label", "aria-activedescendant"];
-const _hoisted_2$y = ["id"];
+const _hoisted_2$z = ["id"];
 const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
@@ -2901,7 +2713,7 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
                   items: item.children ?? [],
                   onItemClick: _cache[0] || (_cache[0] = ($event) => emit("itemClick", $event))
                 }, null, 8, ["id", "ariaLabel", "items"])
-              ], 44, _hoisted_2$y)
+              ], 44, _hoisted_2$z)
             ]),
             _: 2
           }, 1032, ["item", "is-last", "active-id", "variant", "onClick", "onMouseenter"]);
@@ -2936,7 +2748,7 @@ const kdsPopoverType = {
 const kdsPopoverTypes = Object.values(kdsPopoverType);
 
 const _hoisted_1$T = ["id", "popover", "role"];
-const _hoisted_2$x = {
+const _hoisted_2$y = {
   key: 0,
   class: "kds-popover-default-content"
 };
@@ -2998,7 +2810,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$x, 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$T);
     };
@@ -3226,12 +3038,12 @@ const kdsButtonVariant = {
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
 const _hoisted_1$S = ["aria-disabled"];
-const _hoisted_2$w = { class: "kds-empty-state-headline" };
-const _hoisted_3$o = {
+const _hoisted_2$x = { class: "kds-empty-state-headline" };
+const _hoisted_3$p = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$k = {
+const _hoisted_4$m = {
   key: 2,
   class: "kds-empty-state-action"
 };
@@ -3273,9 +3085,9 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$w, 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$k, [
+        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))
@@ -3630,7 +3442,7 @@ const kdsSpacingContainer0p10x = 1;
 const kdsSpacingContainer0p25x = 4;
 
 const _hoisted_1$Q = { class: "kds-label-wrapper" };
-const _hoisted_2$v = ["id", "for"];
+const _hoisted_2$w = ["id", "for", "title"];
 const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
@@ -3649,17 +3461,14 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$Q, [
-        withDirectives((openBlock(), createElementBlock("label", {
+        createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
           ref: labelEl,
           for: props.for,
-          class: "label"
-        }, [
-          createTextVNode(toDisplayString(props.label), 1)
-        ], 8, _hoisted_2$v)), [
-          [unref(vKdsTooltip), unref(isTruncated) ? props.label : void 0]
-        ]),
+          class: "label",
+          title: unref(isTruncated) ? props.label : void 0
+        }, toDisplayString(props.label), 9, _hoisted_2$w),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -3670,10 +3479,10 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-2d3c5cbb"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-efe3313e"]]);
 
 const _hoisted_1$P = ["id"];
-const _hoisted_2$u = { class: "subtext-text" };
+const _hoisted_2$v = { class: "subtext-text" };
 const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
@@ -3705,7 +3514,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$u, toDisplayString(props.subText), 1)
+        createElementVNode("span", _hoisted_2$v, toDisplayString(props.subText), 1)
       ], 10, _hoisted_1$P)) : createCommentVNode("", true);
     };
   }
@@ -4449,13 +4258,13 @@ const _hoisted_1$O = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$t = {
+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$j = ["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"
 };
@@ -4620,7 +4429,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
             name: props.leadingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$t, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$u, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -4665,7 +4474,7 @@ const _sfc_main$1b = /* @__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({
@@ -4674,7 +4483,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$j)) : createCommentVNode("", true),
+        }, 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",
@@ -4685,7 +4494,7 @@ const _sfc_main$1b = /* @__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, [
@@ -4953,20 +4762,21 @@ const filterSlotsForDynamicColumns = (slots) => {
 };
 
 const _hoisted_1$M = { class: "item-icon" };
-const _hoisted_2$s = {
+const _hoisted_2$t = {
   key: 0,
   class: "open-indicator"
 };
-const _hoisted_3$m = {
+const _hoisted_3$n = ["title"];
+const _hoisted_4$k = {
   key: 0,
   class: "inner"
 };
-const _hoisted_4$i = {
+const _hoisted_5$b = {
   key: 0,
   class: "item-error"
 };
-const _hoisted_5$a = { class: "inner" };
-const _hoisted_6$8 = {
+const _hoisted_6$8 = { class: "inner" };
+const _hoisted_7$2 = {
   key: 0,
   class: /* @__PURE__ */ normalizeClass(["column"])
 };
@@ -5072,20 +4882,21 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("td", _hoisted_1$M, [
-            __props.item.isOpen ? (openBlock(), createElementBlock("span", _hoisted_2$s)) : createCommentVNode("", true),
+            __props.item.isOpen ? (openBlock(), createElementBlock("span", _hoisted_2$t)) : createCommentVNode("", true),
             createVNode(KdsIcon, {
               name: __props.item.icon || (__props.item.isDirectory ? "folder" : "file"),
               size: "small"
             }, null, 8, ["name"])
           ]),
-          withDirectives((openBlock(), createElementBlock("td", {
+          createElementVNode("td", {
             class: normalizeClass(["column", {
               light: !__props.item.isDirectory,
               "rename-active": unref(isRenameActive)
             }]),
-            "data-test-id": "item-name"
+            "data-test-id": "item-name",
+            title: __props.item.name
           }, [
-            !unref(isRenameActive) ? (openBlock(), createElementBlock("div", _hoisted_3$m, toDisplayString(__props.item.name), 1)) : (openBlock(), createElementBlock("div", {
+            !unref(isRenameActive) ? (openBlock(), createElementBlock("div", _hoisted_4$k, toDisplayString(__props.item.name), 1)) : (openBlock(), createElementBlock("div", {
               key: 1,
               ref_key: "renameInputContainer",
               ref: renameInputContainer,
@@ -5098,23 +4909,22 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => renameValue.value = $event),
                 class: "rename-input",
                 type: "text",
+                title: "rename",
                 ariaLabel: "rename input",
                 error: !unref(isValid),
                 onKeydown: _cache[1] || (_cache[1] = withModifiers(($event) => onRenameSubmit($event), ["stop"]))
               }, null, 8, ["modelValue", "error"]),
-              !unref(isValid) ? (openBlock(), createElementBlock("div", _hoisted_4$i, [
+              !unref(isValid) ? (openBlock(), createElementBlock("div", _hoisted_5$b, [
                 createElementVNode("span", null, toDisplayString(unref(errorMessage)), 1)
               ])) : createCommentVNode("", true)
             ], 512))
-          ], 2)), [
-            [unref(vKdsTooltip), __props.item.name]
-          ]),
+          ], 10, _hoisted_3$n),
           (openBlock(true), createElementBlock(Fragment, null, renderList(dynamicColumnSlotNames.value, (name) => {
             return openBlock(), createElementBlock("td", {
               key: `dynamicColumn-${name}`,
               class: normalizeClass(["column", "dynamic-column"])
             }, [
-              createElementVNode("div", _hoisted_5$a, [
+              createElementVNode("div", _hoisted_6$8, [
                 renderSlot(_ctx.$slots, name, {
                   isRenameActive: unref(isRenameActive),
                   isSelected: __props.isSelected
@@ -5122,7 +4932,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
               ])
             ]);
           }), 128)),
-          _ctx.$slots.optionsMenu ? (openBlock(), createElementBlock("td", _hoisted_6$8, [
+          _ctx.$slots.optionsMenu ? (openBlock(), createElementBlock("td", _hoisted_7$2, [
             renderSlot(_ctx.$slots, "optionsMenu", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ]),
@@ -5132,7 +4942,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const FileExplorerItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-4811e8e8"]]);
+const FileExplorerItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-91cbcaae"]]);
 
 const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "FileExplorerItemBack",
@@ -5141,10 +4951,11 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createBlock(FileExplorerItemBase, {
+      return openBlock(), createBlock(FileExplorerItemBase, {
         "is-dragging": __props.isDragging,
         "is-selected": false,
-        class: "file-explorer-item-back"
+        class: "file-explorer-item-back",
+        title: "Go back"
       }, {
         default: withCtx(() => [
           createElementVNode("td", null, [
@@ -5156,14 +4967,12 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
           _cache[0] || (_cache[0] = createElementVNode("td", { class: "item-name hidden" }, "Go back to parent directory", -1))
         ]),
         _: 1
-      }, 8, ["is-dragging"])), [
-        [unref(vKdsTooltip), "Go back"]
-      ]);
+      }, 8, ["is-dragging"]);
     };
   }
 });
 
-const FileExplorerItemBack = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-6053576d"]]);
+const FileExplorerItemBack = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-a5de970a"]]);
 
 const getInitialState = () => ({
   anchorHistory: [],
@@ -12060,7 +11869,7 @@ const popoverAnchor = {
 };
 
 const _hoisted_1$L = { class: "file-explorer" };
-const _hoisted_2$r = {
+const _hoisted_2$s = {
   key: 0,
   class: "empty"
 };
@@ -12490,7 +12299,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
                 } : void 0
               ]), 1032, ["class", "disabled", "item", "is-dragging", "is-selected", "is-rename-active", "blacklisted-names", "is-dragging-enabled", "has-options-menu", "onDragstart", "onDragenter", "onDragleave", "onDragend", "onDrag", "onClick", "onContextmenu", "onKeydown", "onDrop", "onDblclick"]);
             }), 128)),
-            __props.items.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_2$r, [
+            __props.items.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_2$s, [
               createElementVNode("td", null, [
                 createVNode(KdsEmptyState, mergeProps({
                   headline: __props.emptyState?.headline ?? "Folder is empty"
@@ -12559,10 +12368,10 @@ const kdsFileExplorerDraggingAnimationModes = Object.values(
 );
 
 const _hoisted_1$K = { class: "kds-preview-list" };
-const _hoisted_2$q = { class: "kds-preview-list-title-row" };
-const _hoisted_3$l = { class: "kds-preview-list-content" };
-const _hoisted_4$h = { class: "kds-preview-list-headline" };
-const _hoisted_5$9 = ["aria-label"];
+const _hoisted_2$r = { class: "kds-preview-list-title-row" };
+const _hoisted_3$m = { class: "kds-preview-list-content" };
+const _hoisted_4$j = { class: "kds-preview-list-headline" };
+const _hoisted_5$a = ["aria-label"];
 const _hoisted_6$7 = { class: "kds-preview-list-show-hide" };
 const DEFAULT_MAX_VISIBLE_ITEMS = 6;
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
@@ -12600,7 +12409,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("section", _hoisted_1$K, [
-        createElementVNode("header", _hoisted_2$q, [
+        createElementVNode("header", _hoisted_2$r, [
           __props.loading && !expanded.value ? (openBlock(), createBlock(KdsLoadingSpinner, {
             key: 0,
             size: "small",
@@ -12610,8 +12419,8 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
             name: __props.leadingIcon,
             size: "small"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3$l, [
-            createElementVNode("span", _hoisted_4$h, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$m, [
+            createElementVNode("span", _hoisted_4$j, toDisplayString(props.headline), 1)
           ]),
           __props.trailingButton ? (openBlock(), createBlock(_sfc_main$1v, normalizeProps(mergeProps({ key: 2 }, trailingButtonProps.value)), null, 16)) : createCommentVNode("", true)
         ]),
@@ -12646,7 +12455,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
                 }, ["stop"]))
               }, null, 8, ["id", "text", "accessory"]);
             }), 128))
-          ], 8, _hoisted_5$9)) : createCommentVNode("", true)
+          ], 8, _hoisted_5$a)) : createCommentVNode("", true)
         ], 512), [
           [vShow, expanded.value]
         ]),
@@ -12669,14 +12478,14 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 
 const KdsPreviewList = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-a11103f6"]]);
 
-const _hoisted_1$J = ["disabled", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$p = { 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$g = { 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"
@@ -12736,7 +12545,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        withDirectives((openBlock(), createElementBlock("button", {
+        createElementVNode("button", {
           class: normalizeClass({
             checkbox: true,
             checked: isChecked.value,
@@ -12745,6 +12554,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
             error: __props.error
           }),
           disabled: __props.disabled,
+          title: props.title,
           "aria-label": props.title,
           "aria-checked": ariaChecked.value,
           "aria-describedby": ariaDescribedBy.value,
@@ -12753,7 +12563,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$p, [
+          createElementVNode("div", _hoisted_2$q, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -12761,17 +12571,15 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
-            createElementVNode("div", _hoisted_4$g, 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$J)), [
-          [unref(vKdsTooltip), props.title]
-        ]),
+        ], 10, _hoisted_1$J),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -12785,7 +12593,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-5138a023"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-0bec87ad"]]);
 
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
@@ -12818,8 +12626,9 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$I = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
-const _hoisted_2$o = ["id"];
-const _hoisted_3$j = { class: "kds-fieldset-content" };
+const _hoisted_2$p = ["id"];
+const _hoisted_3$k = ["title"];
+const _hoisted_4$h = { class: "kds-fieldset-content" };
 const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "BaseFieldsetWrapper",
   props: {
@@ -12861,22 +12670,19 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           id: legendId.value,
           class: "kds-fieldset-legend"
         }, [
-          withDirectives((openBlock(), createElementBlock("span", {
+          createElementVNode("span", {
             ref_key: "legendTextEl",
             ref: legendTextEl,
-            class: "legend-text"
-          }, [
-            createTextVNode(toDisplayString(props.label), 1)
-          ])), [
-            [unref(vKdsTooltip), unref(isTruncated) ? props.label : void 0]
-          ]),
+            class: "legend-text",
+            title: unref(isTruncated) ? props.label : void 0
+          }, toDisplayString(props.label), 9, _hoisted_3$k),
           props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
             key: 0,
             content: props.description,
             hidden: !isHovered.value
           }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$o)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$j, [
+        ], 8, _hoisted_2$p)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_4$h, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         createVNode(KdsSubText, {
@@ -12891,7 +12697,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-698f7098"]]);
+const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-a44731da"]]);
 
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
@@ -13002,16 +12808,16 @@ const kdsToggleSwitchLabelPositions = Object.values(
 );
 
 const _hoisted_1$H = ["disabled", "aria-label", "aria-checked"];
-const _hoisted_2$n = { class: "control" };
-const _hoisted_3$i = {
+const _hoisted_2$o = { class: "control" };
+const _hoisted_3$j = {
   class: "knob",
   "aria-hidden": "true"
 };
-const _hoisted_4$f = {
+const _hoisted_4$g = {
   key: 0,
   class: "content"
 };
-const _hoisted_5$7 = { class: "label" };
+const _hoisted_5$8 = { class: "label" };
 const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleSwitch",
   props: /* @__PURE__ */ mergeModels({
@@ -13051,16 +12857,16 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
         role: "switch",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$n, [
-          createElementVNode("div", _hoisted_3$i, [
+        createElementVNode("div", _hoisted_2$o, [
+          createElementVNode("div", _hoisted_3$j, [
             createVNode(KdsIcon, {
               name: isChecked.value ? "checkmark" : "x-close",
               size: __props.size === "small" ? "xsmall" : "small"
             }, null, 8, ["name", "size"])
           ])
         ]),
-        props.label ? (openBlock(), createElementBlock("div", _hoisted_4$f, [
-          createElementVNode("span", _hoisted_5$7, toDisplayString(props.label), 1)
+        props.label ? (openBlock(), createElementBlock("div", _hoisted_4$g, [
+          createElementVNode("span", _hoisted_5$8, toDisplayString(props.label), 1)
         ])) : createCommentVNode("", true)
       ], 10, _hoisted_1$H);
     };
@@ -13070,16 +12876,16 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 const KdsToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-417fc16d"]]);
 
 const _hoisted_1$G = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$m = { class: "control" };
-const _hoisted_3$h = {
+const _hoisted_2$n = { class: "control" };
+const _hoisted_3$i = {
   key: 0,
   class: "dot",
   viewBox: "0 0 2 2",
   "aria-hidden": "true",
   focusable: "false"
 };
-const _hoisted_4$e = { class: "content" };
-const _hoisted_5$6 = { class: "label" };
+const _hoisted_4$f = { class: "content" };
+const _hoisted_5$7 = { class: "label" };
 const _hoisted_6$5 = ["id"];
 const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
@@ -13121,8 +12927,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$m, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$h, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$n, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$i, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -13130,8 +12936,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$e, [
-          createElementVNode("div", _hoisted_5$6, toDisplayString(props.text), 1),
+        createElementVNode("div", _hoisted_4$f, [
+          createElementVNode("div", _hoisted_5$7, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
             id: `${unref(id)}-helper`,
@@ -13342,7 +13148,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
 
 const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-d78ed4a2"]]);
 
-const _hoisted_1$F = ["aria-checked", "aria-label", "disabled", "tabindex"];
+const _hoisted_1$F = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
@@ -13362,7 +13168,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const optionTextEl = useTemplateRef("optionTextEl");
     const { isTruncated } = useKdsIsTruncated(optionTextEl);
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("button", {
+      return openBlock(), createElementBlock("button", {
         role: "radio",
         "aria-checked": props.selected,
         "aria-label": props.text ? void 0 : props.title,
@@ -13374,7 +13180,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           "size-small": __props.size === "small"
         }),
         disabled: __props.disabled,
-        tabindex: __props.tabIndex
+        tabindex: __props.tabIndex,
+        title: props.title ?? (unref(isTruncated) && props.text ? props.text : void 0)
       }, [
         props.leadingIcon && (!props.hideIcons || !props.text) ? (openBlock(), createBlock(KdsIcon, {
           key: 0,
@@ -13392,17 +13199,12 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$F)), [
-        [
-          unref(vKdsTooltip),
-          props.title ?? (unref(isTruncated) && props.text ? props.text : void 0)
-        ]
-      ]);
+      ], 10, _hoisted_1$F);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-cd4995e6"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-5c6f0f1f"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -14191,8 +13993,8 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
 const ColorPickerSlider = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-f4be2bd4"]]);
 
 const _hoisted_1$D = { class: "kds-color-picker" };
-const _hoisted_2$l = ["aria-valuetext"];
-const _hoisted_3$g = { class: "value-inputs" };
+const _hoisted_2$m = ["aria-valuetext"];
+const _hoisted_3$h = { class: "value-inputs" };
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
 const DEFAULT_VALUE = 0.9;
@@ -14382,7 +14184,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$l),
+        ], 44, _hoisted_2$m),
         createVNode(ColorPickerSlider, {
           modelValue: hue.value,
           "onUpdate:modelValue": [
@@ -14417,7 +14219,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           step: KEYBOARD_STEP,
           "large-step": KEYBOARD_LARGE_STEP
         }, null, 8, ["modelValue", "value-now", "value-text"]),
-        createElementVNode("div", _hoisted_3$g, [
+        createElementVNode("div", _hoisted_3$h, [
           createVNode(KdsTextInput, {
             "model-value": hexInputValue.value,
             ariaLabel: "Color hex value",
@@ -18734,9 +18536,9 @@ const _hoisted_1$C = {
   role: "row",
   class: "kds-date-picker-header-row"
 };
-const _hoisted_2$k = ["aria-label"];
-const _hoisted_3$f = { class: "kds-date-picker-day-grid" };
-const _hoisted_4$d = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onFocus"];
+const _hoisted_2$l = ["aria-label"];
+const _hoisted_3$g = { class: "kds-date-picker-day-grid" };
+const _hoisted_4$e = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onFocus"];
 const REFERENCE_YEAR$2 = 2024;
 const DAYS_PER_WEEK = 7;
 const TOTAL_CELLS = 42;
@@ -19042,10 +18844,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
               role: "columnheader",
               "aria-label": unref(DAY_FULL_LABELS)[i],
               class: "kds-date-picker-weekday"
-            }, toDisplayString(day), 9, _hoisted_2$k);
+            }, toDisplayString(day), 9, _hoisted_2$l);
           }), 128))
         ]),
-        createElementVNode("div", _hoisted_3$f, [
+        createElementVNode("div", _hoisted_3$g, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week, wi) => {
             return openBlock(), createElementBlock("div", {
               key: wi,
@@ -19074,7 +18876,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                   onClick: ($event) => selectDate(day),
                   onKeydown: onDayKeydown,
                   onFocus: ($event) => onDayFocus(day)
-                }, toDisplayString(day.day), 43, _hoisted_4$d);
+                }, toDisplayString(day.day), 43, _hoisted_4$e);
               }), 128))
             ]);
           }), 128))
@@ -19464,14 +19266,14 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
 const DatePickerYearGrid = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-270d55b9"]]);
 
 const _hoisted_1$z = { class: "kds-date-picker" };
-const _hoisted_2$j = { class: "kds-date-picker-header" };
-const _hoisted_3$e = { class: "kds-date-picker-nav-block" };
-const _hoisted_4$c = {
+const _hoisted_2$k = { class: "kds-date-picker-header" };
+const _hoisted_3$f = { class: "kds-date-picker-nav-block" };
+const _hoisted_4$d = {
   key: 1,
   class: "kds-date-picker-header-static-label",
   "aria-live": "polite"
 };
-const _hoisted_5$5 = { class: "kds-date-picker-nav-block" };
+const _hoisted_5$6 = { class: "kds-date-picker-nav-block" };
 const _hoisted_6$4 = { class: "kds-date-picker-body" };
 const MONTHS_PER_YEAR = 12;
 const YEAR_PAGE_SIZE = 15;
@@ -19673,8 +19475,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$z, [
-        createElementVNode("div", _hoisted_2$j, [
-          createElementVNode("div", _hoisted_3$e, [
+        createElementVNode("div", _hoisted_2$k, [
+          createElementVNode("div", _hoisted_3$f, [
             view.value === "day" ? (openBlock(), createBlock(_sfc_main$1v, {
               key: 0,
               variant: "transparent",
@@ -19700,8 +19502,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             size: "small",
             label: headerLabel.value,
             onClick: onHeaderLabelClick
-          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$c, toDisplayString(headerLabel.value), 1)),
-          createElementVNode("div", _hoisted_5$5, [
+          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$d, toDisplayString(headerLabel.value), 1)),
+          createElementVNode("div", _hoisted_5$6, [
             createVNode(_sfc_main$1v, {
               variant: "transparent",
               size: "small",
@@ -20708,13 +20510,13 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
 const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-36211819"]]);
 
 const _hoisted_1$w = { class: "kds-time-picker" };
-const _hoisted_2$i = { class: "kds-time-picker-fields" };
-const _hoisted_3$d = { class: "kds-time-picker-fields" };
-const _hoisted_4$b = {
+const _hoisted_2$j = { class: "kds-time-picker-fields" };
+const _hoisted_3$e = { class: "kds-time-picker-fields" };
+const _hoisted_4$c = {
   key: 0,
   class: "kds-time-picker-fields"
 };
-const _hoisted_5$4 = {
+const _hoisted_5$5 = {
   key: 1,
   class: "kds-time-picker-actions"
 };
@@ -20813,7 +20615,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$w, [
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$j, [
           createVNode(_sfc_main$X, {
             ref: "hourInput",
             modelValue: hour.value,
@@ -20839,7 +20641,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           class: "kds-time-picker-divider"
         })) : createCommentVNode("", true),
         showSecondInput.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createElementVNode("div", _hoisted_3$d, [
+          createElementVNode("div", _hoisted_3$e, [
             createVNode(_sfc_main$X, {
               ref: "secondInput",
               modelValue: second.value,
@@ -20859,7 +20661,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
               onClick: removeSeconds
             })
           ]),
-          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_4$b, [
+          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
             createVNode(_sfc_main$X, {
               ref: "millisecondInput",
               modelValue: millisecond.value,
@@ -20881,7 +20683,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
               title: "Remove milliseconds",
               onClick: removeMilliseconds
             })
-          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
             createVNode(_sfc_main$1v, {
               variant: "outlined",
               size: "small",
@@ -21492,9 +21294,9 @@ const stripInactiveFields = (duration, usedFormat) => {
 const toTitleCase = (key) => key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
 
 const _hoisted_1$v = { class: "kds-interval-popover" };
-const _hoisted_2$h = { class: "kds-interval-popover-header" };
-const _hoisted_3$c = { class: "kds-interval-popover-content" };
-const _hoisted_4$a = { class: "kds-interval-popover-grid" };
+const _hoisted_2$i = { class: "kds-interval-popover-header" };
+const _hoisted_3$d = { class: "kds-interval-popover-content" };
+const _hoisted_4$b = { class: "kds-interval-popover-grid" };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "IntervalInputPopover",
   props: /* @__PURE__ */ mergeModels({
@@ -21590,7 +21392,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
-        createElementVNode("div", _hoisted_2$h, [
+        createElementVNode("div", _hoisted_2$i, [
           _cache[2] || (_cache[2] = createElementVNode("span", { class: "kds-interval-popover-title" }, "Interval value", -1)),
           props.format === unref(kdsIntervalInputFormat).DATE_OR_TIME ? (openBlock(), createBlock(unref(KdsValueSwitch), {
             key: 0,
@@ -21602,7 +21404,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           }, null, 8, ["modelValue"])) : createCommentVNode("", true)
         ]),
         _cache[3] || (_cache[3] = createElementVNode("div", { class: "kds-interval-popover-divider" }, null, -1)),
-        createElementVNode("div", _hoisted_3$c, [
+        createElementVNode("div", _hoisted_3$d, [
           props.allowDescending ? (openBlock(), createBlock(unref(KdsValueSwitch), {
             key: 0,
             modelValue: direction.value,
@@ -21612,7 +21414,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             variant: "muted",
             "possible-values": directionOptions
           }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$a, [
+          createElementVNode("div", _hoisted_4$b, [
             mode.value === unref(kdsIntervalInputFormat).DATE ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(periodNumericKeys), (key) => {
               return openBlock(), createBlock(unref(_sfc_main$X), {
                 key,
@@ -21962,13 +21764,13 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 const KdsDateTimeInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-f2ad3cef"]]);
 
 const _hoisted_1$t = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$g = {
+const _hoisted_2$h = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
 };
-const _hoisted_3$b = ["id"];
-const _hoisted_4$9 = {
+const _hoisted_3$c = ["id"];
+const _hoisted_4$a = {
   class: "trailing",
   "aria-hidden": "true"
 };
@@ -22053,7 +21855,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$g, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$h, [
           createVNode(_sfc_main$1q, {
             accessory: props.accessory,
             size: "medium"
@@ -22065,8 +21867,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             placeholder: !props.text && !__props.disabled,
             missing: __props.missing
           }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$b),
-        createElementVNode("span", _hoisted_4$9, [
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$c),
+        createElementVNode("span", _hoisted_4$a, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
@@ -22082,7 +21884,7 @@ const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "da
 const DROPDOWN_SEARCH_THRESHOLD = 12;
 
 const _hoisted_1$s = { class: "kds-dropdown-container" };
-const _hoisted_2$f = {
+const _hoisted_2$g = {
   key: 0,
   class: "kds-dropdown-container-sticky-top"
 };
@@ -22171,7 +21973,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -22321,7 +22123,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$r = { class: "kds-zoned-date-time-input" };
-const _hoisted_2$e = { class: "date-time-row" };
+const _hoisted_2$f = { class: "date-time-row" };
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsZonedDateTimeInput",
   props: /* @__PURE__ */ mergeModels({
@@ -22432,7 +22234,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$r, [
-            createElementVNode("div", _hoisted_2$e, [
+            createElementVNode("div", _hoisted_2$f, [
               createVNode(_sfc_main$N, {
                 ref_key: "dateInput",
                 ref: dateInput,
@@ -22474,6 +22276,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
 const KdsZonedDateTimeInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-7dcebccd"]]);
 
 const _hoisted_1$q = ["disabled"];
+const _hoisted_2$e = ["title"];
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "KdsListItemButton",
   props: {
@@ -22499,28 +22302,25 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           size: "small",
           disabled: __props.disabled
         }, null, 8, ["name", "disabled"]),
-        withDirectives((openBlock(), createElementBlock("span", {
+        createElementVNode("span", {
           ref_key: "labelEl",
           ref: labelEl,
-          class: "label"
-        }, [
-          createTextVNode(toDisplayString(props.label), 1)
-        ])), [
-          [unref(vKdsTooltip), unref(isLabelTruncated) ? props.label : void 0]
-        ])
+          class: "label",
+          title: unref(isLabelTruncated) ? props.label : void 0
+        }, toDisplayString(props.label), 9, _hoisted_2$e)
       ], 8, _hoisted_1$q);
     };
   }
 });
 
-const KdsListItemButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-ac05d049"]]);
+const KdsListItemButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-21fb5571"]]);
 
 const _hoisted_1$p = { class: "kds-multi-select-dropdown-options" };
 const _hoisted_2$d = {
   key: 0,
   class: "kds-multi-select-dropdown-search"
 };
-const _hoisted_3$a = {
+const _hoisted_3$b = {
   key: 1,
   class: "kds-multi-select-dropdown-footer"
 };
@@ -22677,7 +22477,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           "aria-label": "Dropdown options",
           onItemClick: _cache[4] || (_cache[4] = ($event) => $event !== void 0 && onItemClick($event))
         }, null, 8, ["class", "possible-values", "loading", "empty-text", "controlled-externally"]),
-        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
+        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
           createVNode(unref(KdsListItemButton), {
             label: anyVisibleSelected.value ? "Clear all" : "Select all",
             "leading-icon": anyVisibleSelected.value ? "trash" : "checkmark",
@@ -23258,11 +23058,11 @@ const useMultiSelectListBoxSelection = ({
 
 const _hoisted_1$m = ["id", "tabindex", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-activedescendant", "aria-disabled", "onKeydown"];
 const _hoisted_2$b = { class: "kds-multiselect-list-box-content-grid" };
-const _hoisted_3$9 = {
+const _hoisted_3$a = {
   key: 0,
   class: "kds-multiselect-sticky-bottom"
 };
-const _hoisted_4$8 = {
+const _hoisted_4$9 = {
   key: 0,
   class: "kds-multiselect-empty"
 };
@@ -23546,7 +23346,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                         }, null, 8, ["id", "class", "text", "accessory", "missing", "special", "data-option-index", "selected", "disabled", "active", "trailing-icon", "onDblclick", "onClick"]);
                       }), 128))
                     ], 16),
-                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
+                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
                       createVNode(unref(KdsListItem), {
                         id: generateOptionId(visibleBottomValue.value.id),
                         text: visibleBottomValue.value.text,
@@ -23567,7 +23367,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ])
                 ], 16, _hoisted_1$m),
-                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
+                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
                   createVNode(KdsEmptyState, {
                     headline: __props.loading ? "Loading data…" : __props.emptyStateLabel,
                     "loading-spinner": __props.loading,
@@ -23589,12 +23389,12 @@ const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scop
 
 const _hoisted_1$l = { class: "kds-list-column" };
 const _hoisted_2$a = { class: "kds-list-header" };
-const _hoisted_3$8 = { class: "kds-list-label" };
-const _hoisted_4$7 = {
+const _hoisted_3$9 = { class: "kds-list-label" };
+const _hoisted_4$8 = {
   key: 0,
   class: "kds-list-count"
 };
-const _hoisted_5$3 = { class: "kds-button-column" };
+const _hoisted_5$4 = { class: "kds-button-column" };
 const _hoisted_6$2 = { class: "kds-list-column" };
 const _hoisted_7$1 = { class: "kds-list-header" };
 const _hoisted_8$1 = { class: "kds-list-label" };
@@ -23779,8 +23579,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_1$l, [
               createElementVNode("div", _hoisted_2$a, [
-                createElementVNode("span", _hoisted_3$8, toDisplayString(__props.excludeLabel), 1),
-                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$7, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
+                createElementVNode("span", _hoisted_3$9, toDisplayString(__props.excludeLabel), 1),
+                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
               ]),
               createVNode(unref(KdsMultiSelectListBox), {
                 modelValue: leftSelected.value,
@@ -23799,7 +23599,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                 onKeyEnter: moveRight
               }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "error", "loading", "empty-state-label", "bottom-value"])
             ]),
-            createElementVNode("div", _hoisted_5$3, [
+            createElementVNode("div", _hoisted_5$4, [
               createVNode(unref(_sfc_main$1v), {
                 "leading-icon": "chevron-right",
                 ariaLabel: "Move selected values right",
@@ -24221,8 +24021,8 @@ const useSortableListBoxReorder = ({
 
 const _hoisted_1$j = { class: "kds-sortable-list-box-wrapper" };
 const _hoisted_2$9 = { class: "kds-sortable-top-buttons" };
-const _hoisted_3$7 = { class: "kds-sortable-top-buttons-left" };
-const _hoisted_4$6 = { class: "kds-sortable-footer-buttons" };
+const _hoisted_3$8 = { class: "kds-sortable-top-buttons-left" };
+const _hoisted_4$7 = { class: "kds-sortable-footer-buttons" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsSortableListBox",
   props: /* @__PURE__ */ mergeModels({
@@ -24282,7 +24082,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$j, [
             createElementVNode("div", _hoisted_2$9, [
-              createElementVNode("div", _hoisted_3$7, [
+              createElementVNode("div", _hoisted_3$8, [
                 createVNode(_sfc_main$1v, {
                   size: "small",
                   variant: "transparent",
@@ -24321,7 +24121,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               ariaLabel: formFieldProps.label ?? formFieldProps.ariaLabel ?? ""
               /* fallback only for TS */
             }, null, 8, ["modelValue", "possible-values", "disabled", "error", "ariaLabel"]),
-            createElementVNode("div", _hoisted_4$6, [
+            createElementVNode("div", _hoisted_4$7, [
               createVNode(_sfc_main$1v, {
                 size: "small",
                 variant: "transparent",
@@ -24409,12 +24209,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const isFocused = ref(false);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        withDirectives((openBlock(), createElementBlock("button", mergeProps(_ctx.$attrs, {
+        createElementVNode("button", mergeProps(_ctx.$attrs, {
           class: {
             "info-toggle-button": true,
             selected: modelValue.value,
             hidden: __props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
           },
+          title: TITLE,
           "aria-label": TITLE,
           "aria-pressed": modelValue.value,
           "aria-expanded": modelValue.value,
@@ -24432,9 +24233,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             name: "circle-question",
             size: "small"
           })
-        ], 16, _hoisted_1$h)), [
-          [unref(vKdsTooltip), TITLE]
-        ]),
+        ], 16, _hoisted_1$h),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -24462,7 +24261,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-020b385c"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-67a8974e"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -24492,7 +24291,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
 
 const VariablePopover = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-8a0c56d0"]]);
 
-const _hoisted_1$f = ["aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
+const _hoisted_1$f = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsVariableToggleButton",
   props: /* @__PURE__ */ mergeModels({
@@ -24557,13 +24356,14 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        withDirectives((openBlock(), createElementBlock("button", mergeProps(_ctx.$attrs, {
+        createElementVNode("button", mergeProps(_ctx.$attrs, {
           class: {
             "variable-toggle-button": true,
             error: __props.error,
             "pressed-or-set": modelValue.value || __props.inSet || __props.outSet,
             hidden: __props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
           },
+          title: title.value,
           "aria-label": title.value,
           "aria-pressed": modelValue.value,
           "aria-expanded": modelValue.value,
@@ -24581,9 +24381,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"])
-        ], 16, _hoisted_1$f)), [
-          [unref(vKdsTooltip), title.value]
-        ]),
+        ], 16, _hoisted_1$f),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -24611,13 +24409,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-3e9b0390"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-b6d29842"]]);
 
 const _hoisted_1$e = { class: "kds-accordion" };
 const _hoisted_2$8 = ["name", "open", "onToggle"];
-const _hoisted_3$6 = ["aria-disabled", "tabindex", "onClick", "onKeydown"];
-const _hoisted_4$5 = { class: "kds-accordion-headline-container" };
-const _hoisted_5$2 = { class: "kds-accordion-headline" };
+const _hoisted_3$7 = ["aria-disabled", "tabindex", "onClick", "onKeydown"];
+const _hoisted_4$6 = { class: "kds-accordion-headline-container" };
+const _hoisted_5$3 = { class: "kds-accordion-headline" };
 const _hoisted_6$1 = { class: "kds-accordion-content" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsAccordion",
@@ -24762,20 +24560,20 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               onClick: ($event) => onSummaryClick($event, item),
               onKeydown: ($event) => handleTriggerKeydown($event, item)
             }, [
-              createElementVNode("span", _hoisted_4$5, [
+              createElementVNode("span", _hoisted_4$6, [
                 item.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
                   key: 0,
                   name: item.leadingIcon,
                   size: "small",
                   disabled: item.disabled
                 }, null, 8, ["name", "disabled"])) : createCommentVNode("", true),
-                createElementVNode("span", _hoisted_5$2, toDisplayString(item.headline), 1)
+                createElementVNode("span", _hoisted_5$3, toDisplayString(item.headline), 1)
               ]),
               createVNode(KdsIcon, {
                 name: isItemExpanded(item.id) ? "chevron-up" : "chevron-down",
                 size: "small"
               }, null, 8, ["name"])
-            ], 40, _hoisted_3$6),
+            ], 40, _hoisted_3$7),
             createElementVNode("div", _hoisted_6$1, [
               renderSlot(_ctx.$slots, item.id, { item }, void 0, true)
             ])
@@ -24793,8 +24591,8 @@ const _hoisted_2$7 = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$5 = { key: 1 };
-const _hoisted_4$4 = {
+const _hoisted_3$6 = { key: 1 };
+const _hoisted_4$5 = {
   key: 2,
   class: "actions",
   "data-kds-card-secondary-action": ""
@@ -24810,8 +24608,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         _ctx.$slots.accessory ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
           renderSlot(_ctx.$slots, "accessory", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        __props.headline ? (openBlock(), createElementBlock("h6", _hoisted_3$5, toDisplayString(__props.headline), 1)) : createCommentVNode("", true),
-        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+        __props.headline ? (openBlock(), createElementBlock("h6", _hoisted_3$6, toDisplayString(__props.headline), 1)) : createCommentVNode("", true),
+        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
           renderSlot(_ctx.$slots, "actions", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ]);
@@ -25118,12 +24916,12 @@ const _hoisted_2$6 = {
   key: 0,
   class: "kds-panel-header"
 };
-const _hoisted_3$4 = ["id"];
-const _hoisted_4$3 = {
+const _hoisted_3$5 = ["id"];
+const _hoisted_4$4 = {
   key: 0,
   class: "kds-panel-headline-text"
 };
-const _hoisted_5$1 = {
+const _hoisted_5$2 = {
   key: 1,
   class: "kds-panel-header-trailing"
 };
@@ -25173,15 +24971,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             id: unref(headlineId),
             class: "kds-panel-headline"
           }, [
-            typeof __props.headline === "string" ? (openBlock(), createElementBlock("h6", _hoisted_4$3, toDisplayString(__props.headline), 1)) : __props.headline.type === "button" ? (openBlock(), createBlock(_sfc_main$1v, mergeProps({ key: 1 }, __props.headline.props, {
+            typeof __props.headline === "string" ? (openBlock(), createElementBlock("h6", _hoisted_4$4, toDisplayString(__props.headline), 1)) : __props.headline.type === "button" ? (openBlock(), createBlock(_sfc_main$1v, mergeProps({ key: 1 }, __props.headline.props, {
               size: "small",
               onClick: __props.headline.onClick
             }), null, 16, ["onClick"])) : __props.headline.type === "menuButton" ? (openBlock(), createBlock(_sfc_main$1k, mergeProps({ key: 2 }, __props.headline.props, {
               size: "small",
               onItemClick: __props.headline.onItemClick
             }), null, 16, ["onItemClick"])) : createCommentVNode("", true)
-          ], 8, _hoisted_3$4)) : createCommentVNode("", true),
-          __props.headlineTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+          ], 8, _hoisted_3$5)) : createCommentVNode("", true),
+          __props.headlineTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.headlineTrailingActions, (action, index) => {
               return openBlock(), createElementBlock(Fragment, { key: index }, [
                 action.type === "button" ? (openBlock(), createBlock(_sfc_main$1v, mergeProps({
@@ -25380,9 +25178,9 @@ const useTabBarAdaptiveLayout = ({
 };
 
 const _hoisted_1$9 = { class: "kds-tab-bar-wrapper" };
-const _hoisted_2$5 = ["id", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"];
-const _hoisted_3$3 = { class: "kds-tab-label" };
-const _hoisted_4$2 = {
+const _hoisted_2$5 = ["id", "title", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"];
+const _hoisted_3$4 = { class: "kds-tab-label" };
+const _hoisted_4$3 = {
   key: 1,
   class: "kds-tab-indicator"
 };
@@ -25401,7 +25199,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v9ef1548e": minTabWidthCss
+      "v09be89a3": minTabWidthCss
     }));
     const props = createPropsRestProxy(__props, ["size", "fullWidth", "disabled"]);
     const modelValue = useModel(__props, "modelValue");
@@ -25519,7 +25317,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           role: "tablist"
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
-            return withDirectives((openBlock(), createElementBlock("button", {
+            return openBlock(), createElementBlock("button", {
               id: tab.id,
               key: tab.value,
               ref_for: true,
@@ -25529,6 +25327,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               },
               type: "button",
               role: "tab",
+              title: getTabTitle(tab),
               "aria-selected": modelValue.value === tab.value,
               "aria-controls": tab.panelId,
               tabindex: focusableTabValue.value === tab.value ? 0 : -1,
@@ -25546,11 +25345,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 "icon-size": __props.size === "large" ? "large" : "medium",
                 disabled: isTabDisabled(tab)
               }, null, 8, ["accessory", "icon-size", "disabled"])) : createCommentVNode("", true),
-              createElementVNode("span", _hoisted_3$3, toDisplayString(tab.label), 1),
-              modelValue.value === tab.value ? (openBlock(), createElementBlock("span", _hoisted_4$2)) : createCommentVNode("", true)
-            ], 42, _hoisted_2$5)), [
-              [unref(vKdsTooltip), getTabTitle(tab)]
-            ]);
+              createElementVNode("span", _hoisted_3$4, toDisplayString(tab.label), 1),
+              modelValue.value === tab.value ? (openBlock(), createElementBlock("span", _hoisted_4$3)) : createCommentVNode("", true)
+            ], 42, _hoisted_2$5);
           }), 128))
         ], 2)
       ]);
@@ -25558,7 +25355,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-9a4461cc"]]);
+const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-91f95f5f"]]);
 
 const kdsTabBarSize = {
   SMALL: "small",
@@ -25592,12 +25389,12 @@ const _hoisted_2$4 = {
   key: 0,
   class: "kds-loading-skeleton-headline-with-paragraph"
 };
-const _hoisted_3$2 = { class: "kds-loading-skeleton-paragraph-lines" };
-const _hoisted_4$1 = {
+const _hoisted_3$3 = { class: "kds-loading-skeleton-paragraph-lines" };
+const _hoisted_4$2 = {
   key: 1,
   class: "kds-loading-skeleton-input-with-label"
 };
-const _hoisted_5 = { class: "kds-loading-skeleton-list-item-text" };
+const _hoisted_5$1 = { class: "kds-loading-skeleton-list-item-text" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSkeleton",
   props: {
@@ -25621,12 +25418,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 shape: "text",
                 class: "headline"
               }),
-              createElementVNode("div", _hoisted_3$2, [
+              createElementVNode("div", _hoisted_3$3, [
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 createVNode(LoadingSkeletonItem, { shape: "text" })
               ])
-            ])) : __props.variant === "input-with-label" ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+            ])) : __props.variant === "input-with-label" ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
               createVNode(LoadingSkeletonItem, {
                 shape: "label",
                 class: "label"
@@ -25646,7 +25443,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               createVNode(LoadingSkeletonItem, {
                 shape: __props.variant.startsWith("list-item-large") ? "icon-large" : "icon-small"
               }, null, 8, ["shape"]),
-              createElementVNode("div", _hoisted_5, [
+              createElementVNode("div", _hoisted_5$1, [
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 __props.variant.endsWith("subtext") ? (openBlock(), createBlock(LoadingSkeletonItem, {
                   key: 0,
@@ -25708,7 +25505,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   emits: ["click", "trailingButtonClick"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "b532af5e": paddingRight.value
+      "v29854424": paddingRight.value
     }));
     const props = __props;
     const emit = __emit;
@@ -25752,9 +25549,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }
         ])
       }, [
-        withDirectives((openBlock(), createBlock(resolveDynamicComponent(navComponent.value), mergeProps({ class: "kds-nav-button" }, navComponentAttrs.value, {
+        (openBlock(), createBlock(resolveDynamicComponent(navComponent.value), mergeProps({ class: "kds-nav-button" }, navComponentAttrs.value, {
           disabled: __props.disabled,
           "aria-current": __props.selected ? "page" : void 0,
+          title: unref(isLabelTruncated) ? __props.label : void 0,
           onClick
         }), {
           default: withCtx(() => [
@@ -25771,9 +25569,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             }, toDisplayString(__props.label), 513)
           ]),
           _: 1
-        }, 16, ["disabled", "aria-current"])), [
-          [unref(vKdsTooltip), unref(isLabelTruncated) ? __props.label : void 0]
-        ]),
+        }, 16, ["disabled", "aria-current", "title"])),
         hasTrailingItems.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           ref_key: "trailingItemsEl",
@@ -25797,7 +25593,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-3d410fd0"]]);
+const KdsNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-17711664"]]);
 
 const _hoisted_1$7 = ["aria-label"];
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
@@ -25848,8 +25644,20 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 const KdsNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6cc9519f"]]);
 
-const _hoisted_1$6 = ["aria-label", "aria-current"];
-const _hoisted_2$3 = ["aria-label", "aria-current"];
+const _hoisted_1$6 = {
+  key: 1,
+  class: "breadcrumb-label"
+};
+const _hoisted_2$3 = ["aria-label", "aria-current", "title"];
+const _hoisted_3$2 = {
+  key: 1,
+  class: "breadcrumb-label"
+};
+const _hoisted_4$1 = ["aria-label", "aria-current", "title"];
+const _hoisted_5 = {
+  key: 1,
+  class: "breadcrumb-label"
+};
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "BreadcrumbItem",
   props: {
@@ -25860,11 +25668,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const linkComponent = resolveNuxtLinkComponent();
-    const labelEl = useTemplateRef("labelEl");
-    const { isTruncated } = useKdsIsTruncated(labelEl);
-    const tooltipText = computed(
-      () => isTruncated.value ? __props.item.title : void 0
-    );
     const isLinkItem = computed(
       () => !__props.isCurrentItem && "to" in __props.item && Boolean(__props.item.to)
     );
@@ -25877,12 +25680,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return isLinkItem.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(unref(linkComponent)), {
+      return isLinkItem.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(linkComponent)), {
         key: 0,
         class: "kds-breadcrumb-item",
         to: __props.item.to,
         "aria-label": __props.item.ariaLabel,
-        "aria-current": __props.isCurrentItem ? "page" : void 0
+        "aria-current": __props.isCurrentItem ? "page" : void 0,
+        title: __props.item.title
       }, {
         default: withCtx(() => [
           __props.item.leadingIcon ? (openBlock(), createBlock(unref(KdsIcon), {
@@ -25890,22 +25694,16 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             name: __props.item.leadingIcon,
             class: "breadcrumb-icon"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          __props.item.text ? (openBlock(), createElementBlock("span", {
-            key: 1,
-            ref_key: "labelEl",
-            ref: labelEl,
-            class: "breadcrumb-label"
-          }, toDisplayString(__props.item.text), 513)) : createCommentVNode("", true)
+          __props.item.text ? (openBlock(), createElementBlock("span", _hoisted_1$6, toDisplayString(__props.item.text), 1)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["to", "aria-label", "aria-current"])), [
-        [unref(vKdsTooltip), tooltipText.value]
-      ]) : isButtonItem.value ? withDirectives((openBlock(), createElementBlock("button", {
+      }, 8, ["to", "aria-label", "aria-current", "title"])) : isButtonItem.value ? (openBlock(), createElementBlock("button", {
         key: 1,
         type: "button",
         class: "kds-breadcrumb-item",
         "aria-label": __props.item.ariaLabel,
         "aria-current": __props.isCurrentItem ? "page" : void 0,
+        title: __props.item.title,
         onClick: onItemClick
       }, [
         __props.item.leadingIcon ? (openBlock(), createBlock(unref(KdsIcon), {
@@ -25913,39 +25711,26 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           name: __props.item.leadingIcon,
           class: "breadcrumb-icon"
         }, null, 8, ["name"])) : createCommentVNode("", true),
-        __props.item.text ? (openBlock(), createElementBlock("span", {
-          key: 1,
-          ref_key: "labelEl",
-          ref: labelEl,
-          class: "breadcrumb-label"
-        }, toDisplayString(__props.item.text), 513)) : createCommentVNode("", true)
-      ], 8, _hoisted_1$6)), [
-        [unref(vKdsTooltip), tooltipText.value]
-      ]) : withDirectives((openBlock(), createElementBlock("span", {
+        __props.item.text ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(__props.item.text), 1)) : createCommentVNode("", true)
+      ], 8, _hoisted_2$3)) : (openBlock(), createElementBlock("span", {
         key: 2,
         class: "kds-breadcrumb-item",
         "aria-label": __props.item.ariaLabel,
-        "aria-current": __props.isCurrentItem ? "page" : void 0
+        "aria-current": __props.isCurrentItem ? "page" : void 0,
+        title: __props.item.title
       }, [
         __props.item.leadingIcon ? (openBlock(), createBlock(unref(KdsIcon), {
           key: 0,
           name: __props.item.leadingIcon,
           class: "breadcrumb-icon"
         }, null, 8, ["name"])) : createCommentVNode("", true),
-        __props.item.text ? (openBlock(), createElementBlock("span", {
-          key: 1,
-          ref_key: "labelEl",
-          ref: labelEl,
-          class: "breadcrumb-label"
-        }, toDisplayString(__props.item.text), 513)) : createCommentVNode("", true)
-      ], 8, _hoisted_2$3)), [
-        [unref(vKdsTooltip), tooltipText.value]
-      ]);
+        __props.item.text ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.item.text), 1)) : createCommentVNode("", true)
+      ], 8, _hoisted_4$1));
     };
   }
 });
 
-const BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-6fd3d680"]]);
+const BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-fd7537fc"]]);
 
 const useBreadcrumbAdaptiveLayout = (listRef, itemRefs, itemsSource) => {
   const { width: listWidth } = useElementSize(listRef);
@@ -26487,6 +26272,182 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-41fc8d84"]]);
 
+const SHOW_DELAY = 450;
+const HIDE_DELAY = 150;
+const stateMap = /* @__PURE__ */ new WeakMap();
+let visibleCount = 0;
+let currentVisible = null;
+function generateTooltipDiv(text) {
+  const div = document.createElement("div");
+  div.classList.add("kds-tooltip");
+  div.textContent = text;
+  return div;
+}
+function getText(binding) {
+  const value = binding.value;
+  if (value === null || value === void 0 || value === "") {
+    return null;
+  }
+  return String(value);
+}
+function createPopover(triggerEl, binding) {
+  const popover = generateTooltipDiv(getText(binding) ?? "");
+  popover.setAttribute("popover", "manual");
+  popover.setAttribute("role", "tooltip");
+  const id = `kds-tooltip-${crypto.randomUUID()}`;
+  popover.id = id;
+  triggerEl.setAttribute("aria-describedby", id);
+  const anchorName = `--kds-tooltip-anchor-${id}`;
+  triggerEl.style.setProperty("anchor-name", anchorName);
+  popover.style.setProperty("position-anchor", anchorName);
+  document.body.appendChild(popover);
+  return popover;
+}
+function cancelTimers(state) {
+  if (state.showTimer !== null) {
+    clearTimeout(state.showTimer);
+    state.showTimer = null;
+  }
+  if (state.hideTimer !== null) {
+    clearTimeout(state.hideTimer);
+    state.hideTimer = null;
+  }
+}
+function hidePopover(state) {
+  if (!state.visible) {
+    return;
+  }
+  state.visible = false;
+  visibleCount--;
+  if (currentVisible === state) {
+    currentVisible = null;
+  }
+  try {
+    state.popoverEl.hidePopover();
+  } catch {
+  }
+}
+function showPopover(state) {
+  if (state.visible) {
+    return;
+  }
+  if (currentVisible && currentVisible !== state) {
+    cancelTimers(currentVisible);
+    hidePopover(currentVisible);
+  }
+  try {
+    state.popoverEl.showPopover();
+  } catch {
+  }
+  state.visible = true;
+  visibleCount++;
+  currentVisible = state;
+}
+function scheduleShow(state, delay) {
+  cancelTimers(state);
+  if (state.dismissed) {
+    return;
+  }
+  state.showTimer = setTimeout(() => {
+    state.showTimer = null;
+    showPopover(state);
+  }, delay);
+}
+function scheduleHide(state) {
+  cancelTimers(state);
+  state.hideTimer = setTimeout(() => {
+    state.hideTimer = null;
+    hidePopover(state);
+  }, HIDE_DELAY);
+}
+function mount(triggerEl, binding) {
+  if (getText(binding) === null) {
+    return;
+  }
+  const popoverEl = createPopover(triggerEl, binding);
+  const state = {
+    popoverEl,
+    showTimer: null,
+    hideTimer: null,
+    anchorName: popoverEl.id,
+    dismissed: false,
+    visible: false,
+    scope: effectScope()
+  };
+  stateMap.set(triggerEl, state);
+  const onMouseEnter = () => {
+    state.dismissed = false;
+    const delay = visibleCount > 0 ? 0 : SHOW_DELAY;
+    scheduleShow(state, delay);
+  };
+  const onMouseLeave = () => scheduleHide(state);
+  const onFocusIn = () => {
+    state.dismissed = false;
+    scheduleShow(state, 0);
+  };
+  const onFocusOut = () => {
+    cancelTimers(state);
+    hidePopover(state);
+  };
+  const onDocumentKeyDown = (e) => {
+    if (e.key === "Escape" && state.visible) {
+      cancelTimers(state);
+      hidePopover(state);
+      state.dismissed = true;
+    }
+  };
+  const onPopoverMouseEnter = () => {
+    cancelTimers(state);
+  };
+  const onPopoverMouseLeave = () => {
+    scheduleHide(state);
+  };
+  state.scope.run(() => {
+    useEventListener(triggerEl, "mouseenter", onMouseEnter);
+    useEventListener(triggerEl, "mouseleave", onMouseLeave);
+    useEventListener(triggerEl, "focusin", onFocusIn);
+    useEventListener(triggerEl, "focusout", onFocusOut);
+    useEventListener(document, "keydown", onDocumentKeyDown, true);
+    useEventListener(popoverEl, "mouseenter", onPopoverMouseEnter);
+    useEventListener(popoverEl, "mouseleave", onPopoverMouseLeave);
+  });
+}
+function unmount(triggerEl) {
+  const state = stateMap.get(triggerEl);
+  if (state) {
+    state.scope.stop();
+    cancelTimers(state);
+    hidePopover(state);
+    state.popoverEl.remove();
+    stateMap.delete(triggerEl);
+  }
+  triggerEl.removeAttribute("aria-describedby");
+  triggerEl.style.removeProperty("anchor-name");
+}
+const vKdsTooltip = {
+  mounted(el, binding) {
+    mount(el, binding);
+  },
+  updated(el, binding) {
+    const state = stateMap.get(el);
+    const newText = getText(binding);
+    if (newText === null) {
+      if (state) {
+        unmount(el);
+      }
+      return;
+    }
+    if (!state) {
+      mount(el, binding);
+      return;
+    }
+    state.popoverEl.textContent = newText;
+  },
+  unmounted(el) {
+    unmount(el);
+  }
+};
+
 const _hoisted_1$1 = {
   ref: "measureContainer",
   class: "kds-button-group-measure",