@knime/kds-components 0.31.0 → 0.31.1

package/dist/index.js

@@ -1,7 +1,183 @@
-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 } from 'vue';
-import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useVirtualList, useElementSize, useMousePressed, useTemplateRefsList } from '@vueuse/core';
+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 './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);
+  }
+};
 
-import './index.css';const kdsAvatarSize = {
+const kdsAvatarSize = {
   SMALL: "small",
   MEDIUM: "medium",
   LARGE: "large",
@@ -9,9 +185,9 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$18 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$J = ["src"];
-const _hoisted_3$v = {
+const _hoisted_1$17 = ["role", "aria-hidden", "aria-label", "data-color"];
+const _hoisted_2$H = ["src"];
+const _hoisted_3$t = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
@@ -65,10 +241,9 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
     );
     const avatarColor = computed(() => getAvatarColor(displayedInitials.value));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return withDirectives((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
@@ -80,10 +255,12 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$J)) : (openBlock(), createElementBlock("div", _hoisted_3$v, [
+        }, null, 40, _hoisted_2$H)) : (openBlock(), createElementBlock("div", _hoisted_3$t, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$18);
+      ], 10, _hoisted_1$17)), [
+        [unref(vKdsTooltip), hasTitle.value ? accessibleTitle.value : void 0]
+      ]);
     };
   }
 });
@@ -96,11 +273,11 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-9e1a5abe"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-ab63cc85"]]);
 
-const _hoisted_1$17 = ["aria-label"];
-const _hoisted_2$I = { class: "avatars" };
-const _hoisted_3$u = {
+const _hoisted_1$16 = ["aria-label"];
+const _hoisted_2$G = { class: "avatars" };
+const _hoisted_3$s = {
   key: 0,
   class: "more-count",
   "aria-hidden": "true"
@@ -125,7 +302,7 @@ const _sfc_main$1I = /* @__PURE__ */ defineComponent({
         role: "group",
         "aria-label": ariaLabel.value
       }, [
-        createElementVNode("div", _hoisted_2$I, [
+        createElementVNode("div", _hoisted_2$G, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.avatars, (avatar, index) => {
             return openBlock(), createBlock(KdsAvatar, {
               key: index,
@@ -139,8 +316,8 @@ const _sfc_main$1I = /* @__PURE__ */ defineComponent({
             }, null, 8, ["style", "size", "initials", "title", "src"]);
           }), 128))
         ]),
-        __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$u, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
-      ], 8, _hoisted_1$17);
+        __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$s, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
+      ], 8, _hoisted_1$16);
     };
   }
 });
@@ -585,7 +762,6 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$16 = ["title"];
 const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
@@ -618,21 +794,22 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
     });
     __expose({ status });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["kds-data-type-icon-container", __props.size, { disabled: __props.disabled }]),
-        title: __props.iconTitle
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass(["kds-data-type-icon-container", __props.size, { disabled: __props.disabled }])
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent)), {
           class: normalizeClass(["kds-icon", "kds-data-type-icon", iconSize.value]),
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$16);
+      ], 2)), [
+        [unref(vKdsTooltip), __props.iconTitle]
+      ]);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-38e9537f"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-667bceea"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -686,8 +863,8 @@ const kdsProgressBarSize = {
 };
 const kdsProgressBarSizes = Object.values(kdsProgressBarSize);
 
-const _hoisted_1$14 = ["title", "aria-label"];
-const _hoisted_2$H = {
+const _hoisted_1$14 = ["aria-label"];
+const _hoisted_2$F = {
   key: 0,
   class: "indeterminate-bar",
   "aria-hidden": "true"
@@ -724,18 +901,19 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
           }
         ])
       }, [
-        createElementVNode("progress", mergeProps({
-          title: title.value,
+        withDirectives(createElementVNode("progress", mergeProps({
           "aria-label": title.value,
           class: "progress"
-        }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16, _hoisted_1$14),
-        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$H)) : createCommentVNode("", true)
+        }, __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)
       ], 2);
     };
   }
 });
 
-const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-884d689a"]]);
+const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-06930dc4"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -754,7 +932,7 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$13 = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_1$13 = ["role", "aria-hidden", "aria-label"];
 const RGBA_SHORT_HEX_LENGTH = 4;
 const RGBA_LONG_HEX_LENGTH = 8;
 const ALPHA_NIBBLE_INDEX = 3;
@@ -829,19 +1007,20 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
     const accessibleTitle = computed(() => props.title?.trim() ?? "");
     const hasTitle = computed(() => accessibleTitle.value.length > 0);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
+      return withDirectives((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);
+      }, null, 14, _hoisted_1$13)), [
+        [unref(vKdsTooltip), hasTitle.value ? accessibleTitle.value : void 0]
+      ]);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-91e0130d"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-b91cf470"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -961,8 +1140,7 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$12 = ["title", "aria-label"];
-const _hoisted_2$G = ["title"];
+const _hoisted_1$12 = ["aria-label"];
 const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
@@ -979,26 +1157,30 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
+      return withDirectives((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 ? (openBlock(), createElementBlock("span", {
+        __props.label ? withDirectives((openBlock(), createElementBlock("span", {
           key: 0,
           ref_key: "labelEl",
           ref: labelEl,
-          class: "label",
-          title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$G)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$12);
+          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]
+      ]);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-f20c5c00"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-c3dcc5ff"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -1056,9 +1238,9 @@ const kdsLoadingSpinnerVariants = Object.values(
 );
 
 const _hoisted_1$10 = ["role"];
-const _hoisted_2$F = { class: "header" };
-const _hoisted_3$t = { class: "headline" };
-const _hoisted_4$p = {
+const _hoisted_2$E = { class: "header" };
+const _hoisted_3$r = { class: "headline" };
+const _hoisted_4$n = {
   key: 0,
   class: "body"
 };
@@ -1093,15 +1275,15 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$F, [
+        createElementVNode("div", _hoisted_2$E, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$t, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$r, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$n, toDisplayString(props.description), 1)) : createCommentVNode("", true)
       ], 10, _hoisted_1$10);
     };
   }
@@ -1136,16 +1318,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$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_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_6$b = {
   key: 0,
   class: "donut-text"
 };
-const _hoisted_7$4 = { class: "title" };
-const _hoisted_8$3 = {
+const _hoisted_7$3 = { class: "title" };
+const _hoisted_8$2 = {
   key: 0,
   class: "sub-text"
 };
@@ -1209,7 +1391,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
             r: r.value,
             "stroke-width": strokeWidth.value,
             fill: "transparent"
-          }, null, 8, _hoisted_3$s),
+          }, null, 8, _hoisted_3$q),
           __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 0,
             class: normalizeClass(["value-wedge", "secondary-circle", { animate: __props.animate }]),
@@ -1221,7 +1403,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": secondaryStrokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_4$o)) : createCommentVNode("", true),
+          }, null, 10, _hoisted_4$m)) : createCommentVNode("", true),
           !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 1,
             class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
@@ -1233,11 +1415,11 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": strokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_5$e)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$E)),
+          }, null, 10, _hoisted_5$d)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$D)),
         __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
-          createElementVNode("div", _hoisted_7$4, toDisplayString(__props.title), 1),
-          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
+          createElementVNode("div", _hoisted_7$3, toDisplayString(__props.title), 1),
+          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$2, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -1306,11 +1488,10 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.component), {
+      return withDirectives((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))
@@ -1331,12 +1512,14 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name", "size"])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["type", "class", "disabled", "title", "aria-label", "data-test-id"]);
+      }, 8, ["type", "class", "disabled", "aria-label", "data-test-id"])), [
+        [unref(vKdsTooltip), props.title]
+      ]);
     };
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-24ade73a"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-83f63dc3"]]);
 
 const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
@@ -1635,7 +1818,7 @@ function prettyBytes(number, options) {
 }
 
 const _hoisted_1$Y = { class: "label" };
-const _hoisted_2$D = {
+const _hoisted_2$C = {
   key: 1,
   class: "file-size"
 };
@@ -1718,13 +1901,12 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
       emit("click", event);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(component.value), {
+      return withDirectives((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
       }, {
@@ -1735,15 +1917,17 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$D, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
+      }, 8, ["class", "to", "download", "target", "rel", "aria-disabled"])), [
+        [unref(vKdsTooltip), effectiveTitle.value]
+      ]);
     };
   }
 });
 
-const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-56e748a8"]]);
+const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-6f9a0cf6"]]);
 
 const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
@@ -1783,7 +1967,7 @@ const kdsToggleButtonVariant = {
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
 const _hoisted_1$X = ["data-visible"];
-const _hoisted_2$C = ["data-visible"];
+const _hoisted_2$B = ["data-visible"];
 const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
@@ -1855,7 +2039,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$C)
+            ], 8, _hoisted_2$B)
           ], 2)
         ]),
         _: 1
@@ -2147,23 +2331,21 @@ const kdsListItemAccessorySize = {
 };
 
 const _hoisted_1$W = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$B = {
+const _hoisted_2$A = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$r = { class: "content" };
-const _hoisted_4$n = ["title"];
-const _hoisted_5$d = {
+const _hoisted_3$p = { class: "content" };
+const _hoisted_4$l = {
   key: 0,
   class: "prefix"
 };
-const _hoisted_6$a = ["title"];
-const _hoisted_7$3 = { class: "trailing-item" };
-const _hoisted_8$2 = {
+const _hoisted_5$c = { class: "trailing-item" };
+const _hoisted_6$a = {
   key: 0,
   class: "shortcut"
 };
-const _hoisted_9$2 = {
+const _hoisted_7$2 = {
   key: 3,
   class: "trailing-item-reserve-space"
 };
@@ -2225,35 +2407,39 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$B, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$A, [
           createVNode(_sfc_main$1q, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$r, [
-          createElementVNode("span", {
+        createElementVNode("span", _hoisted_3$p, [
+          withDirectives((openBlock(), createElementBlock("span", {
             ref_key: "labelEl",
             ref: labelEl,
-            class: "label",
-            title: unref(isLabelTruncated) ? props.text : void 0
+            class: "label"
           }, [
-            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$d, "(Missing) ")) : createCommentVNode("", true),
+            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_4$l, "(Missing) ")) : createCommentVNode("", true),
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.text), 3)
-          ], 8, _hoisted_4$n),
-          props.subText ? (openBlock(), createElementBlock("span", {
+          ])), [
+            [unref(vKdsTooltip), unref(isLabelTruncated) ? props.text : void 0]
+          ]),
+          props.subText ? withDirectives((openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
             ref: subtextEl,
-            class: "subtext",
-            title: unref(isSubtextTruncated) ? props.subText : void 0
-          }, toDisplayString(props.subText), 9, _hoisted_6$a)) : createCommentVNode("", true)
+            class: "subtext"
+          }, [
+            createTextVNode(toDisplayString(props.subText), 1)
+          ])), [
+            [unref(vKdsTooltip), unref(isSubtextTruncated) ? props.subText : void 0]
+          ]) : createCommentVNode("", true)
         ]),
-        createElementVNode("span", _hoisted_7$3, [
-          props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_8$2, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
+        createElementVNode("span", _hoisted_5$c, [
+          props.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_6$a, toDisplayString(props.shortcut), 1)) : props.badge ? (openBlock(), createBlock(KdsBadge, {
             key: 1,
             size: badgeSize.value,
             label: props.badge.label,
@@ -2264,21 +2450,20 @@ 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_9$2)) : createCommentVNode("", true)
+          !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_7$2)) : createCommentVNode("", true)
         ])
       ], 10, _hoisted_1$W);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a3d6c86f"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-36ccb8f8"]]);
 
 const _hoisted_1$V = { class: "kds-list-item-section-title" };
-const _hoisted_2$A = {
+const _hoisted_2$z = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$q = ["title"];
 const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
@@ -2291,24 +2476,27 @@ 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$A, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
           }, null, 8, ["name"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", {
+        withDirectives((openBlock(), createElementBlock("span", {
           ref_key: "labelEl",
           ref: labelEl,
-          class: "label",
-          title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$q)
+          class: "label"
+        }, [
+          createTextVNode(toDisplayString(props.label), 1)
+        ])), [
+          [unref(vKdsTooltip), unref(isTruncated) ? props.label : void 0]
+        ])
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-5eeb1226"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-012ece68"]]);
 
 const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuItem",
@@ -2486,7 +2674,7 @@ const ContainerDepthKey = /* @__PURE__ */ Symbol("ContainerDepth");
 const ChildItemKey = /* @__PURE__ */ Symbol("ChildItem");
 
 const _hoisted_1$U = ["id", "aria-label", "aria-activedescendant"];
-const _hoisted_2$z = ["id"];
+const _hoisted_2$y = ["id"];
 const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
@@ -2713,7 +2901,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$z)
+              ], 44, _hoisted_2$y)
             ]),
             _: 2
           }, 1032, ["item", "is-last", "active-id", "variant", "onClick", "onMouseenter"]);
@@ -2748,7 +2936,7 @@ const kdsPopoverType = {
 const kdsPopoverTypes = Object.values(kdsPopoverType);
 
 const _hoisted_1$T = ["id", "popover", "role"];
-const _hoisted_2$y = {
+const _hoisted_2$x = {
   key: 0,
   class: "kds-popover-default-content"
 };
@@ -2810,7 +2998,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$y, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$x, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
       ], 46, _hoisted_1$T);
     };
@@ -3038,12 +3226,12 @@ const kdsButtonVariant = {
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
 const _hoisted_1$S = ["aria-disabled"];
-const _hoisted_2$x = { class: "kds-empty-state-headline" };
-const _hoisted_3$p = {
+const _hoisted_2$w = { class: "kds-empty-state-headline" };
+const _hoisted_3$o = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$m = {
+const _hoisted_4$k = {
   key: 2,
   class: "kds-empty-state-action"
 };
@@ -3085,9 +3273,9 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        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, [
+        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, [
           (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))
@@ -3442,7 +3630,7 @@ const kdsSpacingContainer0p10x = 1;
 const kdsSpacingContainer0p25x = 4;
 
 const _hoisted_1$Q = { class: "kds-label-wrapper" };
-const _hoisted_2$w = ["id", "for", "title"];
+const _hoisted_2$v = ["id", "for"];
 const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
@@ -3461,14 +3649,17 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$Q, [
-        createElementVNode("label", {
+        withDirectives((openBlock(), createElementBlock("label", {
           id: props.id,
           ref_key: "labelEl",
           ref: labelEl,
           for: props.for,
-          class: "label",
-          title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$w),
+          class: "label"
+        }, [
+          createTextVNode(toDisplayString(props.label), 1)
+        ], 8, _hoisted_2$v)), [
+          [unref(vKdsTooltip), unref(isTruncated) ? props.label : void 0]
+        ]),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -3479,10 +3670,10 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-efe3313e"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-2d3c5cbb"]]);
 
 const _hoisted_1$P = ["id"];
-const _hoisted_2$v = { class: "subtext-text" };
+const _hoisted_2$u = { class: "subtext-text" };
 const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
@@ -3514,7 +3705,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$v, toDisplayString(props.subText), 1)
+        createElementVNode("span", _hoisted_2$u, toDisplayString(props.subText), 1)
       ], 10, _hoisted_1$P)) : createCommentVNode("", true);
     };
   }
@@ -4258,13 +4449,13 @@ const _hoisted_1$O = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$u = {
+const _hoisted_2$t = {
   key: 1,
   class: "leading-slot"
 };
-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 = {
+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 = {
   key: 4,
   class: "trailing-slot"
 };
@@ -4429,7 +4620,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$u, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$t, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -4474,7 +4665,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
           onCut: handleInputCut,
           onDrop: handleInputDrop,
           onDragend: handleInputDragEnd
-        }, null, 42, _hoisted_3$o),
+        }, null, 42, _hoisted_3$n),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -4483,7 +4674,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$l)) : createCommentVNode("", true),
+        }, toDisplayString(props.unit), 11, _hoisted_4$j)) : createCommentVNode("", true),
         __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1v, {
           key: 3,
           class: "clear-button",
@@ -4494,7 +4685,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
-        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
+        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$b, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
         props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
@@ -4762,21 +4953,20 @@ const filterSlotsForDynamicColumns = (slots) => {
 };
 
 const _hoisted_1$M = { class: "item-icon" };
-const _hoisted_2$t = {
+const _hoisted_2$s = {
   key: 0,
   class: "open-indicator"
 };
-const _hoisted_3$n = ["title"];
-const _hoisted_4$k = {
+const _hoisted_3$m = {
   key: 0,
   class: "inner"
 };
-const _hoisted_5$b = {
+const _hoisted_4$i = {
   key: 0,
   class: "item-error"
 };
-const _hoisted_6$8 = { class: "inner" };
-const _hoisted_7$2 = {
+const _hoisted_5$a = { class: "inner" };
+const _hoisted_6$8 = {
   key: 0,
   class: /* @__PURE__ */ normalizeClass(["column"])
 };
@@ -4882,21 +5072,20 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("td", _hoisted_1$M, [
-            __props.item.isOpen ? (openBlock(), createElementBlock("span", _hoisted_2$t)) : createCommentVNode("", true),
+            __props.item.isOpen ? (openBlock(), createElementBlock("span", _hoisted_2$s)) : createCommentVNode("", true),
             createVNode(KdsIcon, {
               name: __props.item.icon || (__props.item.isDirectory ? "folder" : "file"),
               size: "small"
             }, null, 8, ["name"])
           ]),
-          createElementVNode("td", {
+          withDirectives((openBlock(), createElementBlock("td", {
             class: normalizeClass(["column", {
               light: !__props.item.isDirectory,
               "rename-active": unref(isRenameActive)
             }]),
-            "data-test-id": "item-name",
-            title: __props.item.name
+            "data-test-id": "item-name"
           }, [
-            !unref(isRenameActive) ? (openBlock(), createElementBlock("div", _hoisted_4$k, toDisplayString(__props.item.name), 1)) : (openBlock(), createElementBlock("div", {
+            !unref(isRenameActive) ? (openBlock(), createElementBlock("div", _hoisted_3$m, toDisplayString(__props.item.name), 1)) : (openBlock(), createElementBlock("div", {
               key: 1,
               ref_key: "renameInputContainer",
               ref: renameInputContainer,
@@ -4909,22 +5098,23 @@ 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_5$b, [
+              !unref(isValid) ? (openBlock(), createElementBlock("div", _hoisted_4$i, [
                 createElementVNode("span", null, toDisplayString(unref(errorMessage)), 1)
               ])) : createCommentVNode("", true)
             ], 512))
-          ], 10, _hoisted_3$n),
+          ], 2)), [
+            [unref(vKdsTooltip), __props.item.name]
+          ]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(dynamicColumnSlotNames.value, (name) => {
             return openBlock(), createElementBlock("td", {
               key: `dynamicColumn-${name}`,
               class: normalizeClass(["column", "dynamic-column"])
             }, [
-              createElementVNode("div", _hoisted_6$8, [
+              createElementVNode("div", _hoisted_5$a, [
                 renderSlot(_ctx.$slots, name, {
                   isRenameActive: unref(isRenameActive),
                   isSelected: __props.isSelected
@@ -4932,7 +5122,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
               ])
             ]);
           }), 128)),
-          _ctx.$slots.optionsMenu ? (openBlock(), createElementBlock("td", _hoisted_7$2, [
+          _ctx.$slots.optionsMenu ? (openBlock(), createElementBlock("td", _hoisted_6$8, [
             renderSlot(_ctx.$slots, "optionsMenu", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ]),
@@ -4942,7 +5132,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const FileExplorerItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-91cbcaae"]]);
+const FileExplorerItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-4811e8e8"]]);
 
 const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "FileExplorerItemBack",
@@ -4951,11 +5141,10 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(FileExplorerItemBase, {
+      return withDirectives((openBlock(), createBlock(FileExplorerItemBase, {
         "is-dragging": __props.isDragging,
         "is-selected": false,
-        class: "file-explorer-item-back",
-        title: "Go back"
+        class: "file-explorer-item-back"
       }, {
         default: withCtx(() => [
           createElementVNode("td", null, [
@@ -4967,12 +5156,14 @@ 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"]);
+      }, 8, ["is-dragging"])), [
+        [unref(vKdsTooltip), "Go back"]
+      ]);
     };
   }
 });
 
-const FileExplorerItemBack = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-a5de970a"]]);
+const FileExplorerItemBack = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-6053576d"]]);
 
 const getInitialState = () => ({
   anchorHistory: [],
@@ -11869,7 +12060,7 @@ const popoverAnchor = {
 };
 
 const _hoisted_1$L = { class: "file-explorer" };
-const _hoisted_2$s = {
+const _hoisted_2$r = {
   key: 0,
   class: "empty"
 };
@@ -12299,7 +12490,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$s, [
+            __props.items.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_2$r, [
               createElementVNode("td", null, [
                 createVNode(KdsEmptyState, mergeProps({
                   headline: __props.emptyState?.headline ?? "Folder is empty"
@@ -12368,10 +12559,10 @@ const kdsFileExplorerDraggingAnimationModes = Object.values(
 );
 
 const _hoisted_1$K = { class: "kds-preview-list" };
-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_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_6$7 = { class: "kds-preview-list-show-hide" };
 const DEFAULT_MAX_VISIBLE_ITEMS = 6;
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
@@ -12409,7 +12600,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("section", _hoisted_1$K, [
-        createElementVNode("header", _hoisted_2$r, [
+        createElementVNode("header", _hoisted_2$q, [
           __props.loading && !expanded.value ? (openBlock(), createBlock(KdsLoadingSpinner, {
             key: 0,
             size: "small",
@@ -12419,8 +12610,8 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
             name: __props.leadingIcon,
             size: "small"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3$m, [
-            createElementVNode("span", _hoisted_4$j, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$l, [
+            createElementVNode("span", _hoisted_4$h, toDisplayString(props.headline), 1)
           ]),
           __props.trailingButton ? (openBlock(), createBlock(_sfc_main$1v, normalizeProps(mergeProps({ key: 2 }, trailingButtonProps.value)), null, 16)) : createCommentVNode("", true)
         ]),
@@ -12455,7 +12646,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
                 }, ["stop"]))
               }, null, 8, ["id", "text", "accessory"]);
             }), 128))
-          ], 8, _hoisted_5$a)) : createCommentVNode("", true)
+          ], 8, _hoisted_5$9)) : createCommentVNode("", true)
         ], 512), [
           [vShow, expanded.value]
         ]),
@@ -12478,14 +12669,14 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 
 const KdsPreviewList = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-a11103f6"]]);
 
-const _hoisted_1$J = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$q = { class: "control" };
-const _hoisted_3$l = {
+const _hoisted_1$J = ["disabled", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$p = { class: "control" };
+const _hoisted_3$k = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$i = { class: "label" };
-const _hoisted_5$9 = ["id"];
+const _hoisted_4$g = { class: "label" };
+const _hoisted_5$8 = ["id"];
 const _hoisted_6$6 = {
   key: 0,
   class: "subtext-wrapper"
@@ -12545,7 +12736,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("button", {
+        withDirectives((openBlock(), createElementBlock("button", {
           class: normalizeClass({
             checkbox: true,
             checked: isChecked.value,
@@ -12554,7 +12745,6 @@ 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,
@@ -12563,7 +12753,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$q, [
+          createElementVNode("div", _hoisted_2$p, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -12571,15 +12761,17 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$l, [
-            createElementVNode("div", _hoisted_4$i, toDisplayString(props.label), 1),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
+            createElementVNode("div", _hoisted_4$g, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
               class: "helper-text"
-            }, toDisplayString(props.helperText), 9, _hoisted_5$9)) : createCommentVNode("", true)
+            }, toDisplayString(props.helperText), 9, _hoisted_5$8)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$J),
+        ], 10, _hoisted_1$J)), [
+          [unref(vKdsTooltip), props.title]
+        ]),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -12593,7 +12785,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-0bec87ad"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-5138a023"]]);
 
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
@@ -12626,9 +12818,8 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$I = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
-const _hoisted_2$p = ["id"];
-const _hoisted_3$k = ["title"];
-const _hoisted_4$h = { class: "kds-fieldset-content" };
+const _hoisted_2$o = ["id"];
+const _hoisted_3$j = { class: "kds-fieldset-content" };
 const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "BaseFieldsetWrapper",
   props: {
@@ -12670,19 +12861,22 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           id: legendId.value,
           class: "kds-fieldset-legend"
         }, [
-          createElementVNode("span", {
+          withDirectives((openBlock(), createElementBlock("span", {
             ref_key: "legendTextEl",
             ref: legendTextEl,
-            class: "legend-text",
-            title: unref(isTruncated) ? props.label : void 0
-          }, toDisplayString(props.label), 9, _hoisted_3$k),
+            class: "legend-text"
+          }, [
+            createTextVNode(toDisplayString(props.label), 1)
+          ])), [
+            [unref(vKdsTooltip), unref(isTruncated) ? props.label : void 0]
+          ]),
           props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
             key: 0,
             content: props.description,
             hidden: !isHovered.value
           }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$p)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_4$h, [
+        ], 8, _hoisted_2$o)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$j, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         createVNode(KdsSubText, {
@@ -12697,7 +12891,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-a44731da"]]);
+const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-698f7098"]]);
 
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
@@ -12808,16 +13002,16 @@ const kdsToggleSwitchLabelPositions = Object.values(
 );
 
 const _hoisted_1$H = ["disabled", "aria-label", "aria-checked"];
-const _hoisted_2$o = { class: "control" };
-const _hoisted_3$j = {
+const _hoisted_2$n = { class: "control" };
+const _hoisted_3$i = {
   class: "knob",
   "aria-hidden": "true"
 };
-const _hoisted_4$g = {
+const _hoisted_4$f = {
   key: 0,
   class: "content"
 };
-const _hoisted_5$8 = { class: "label" };
+const _hoisted_5$7 = { class: "label" };
 const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleSwitch",
   props: /* @__PURE__ */ mergeModels({
@@ -12857,16 +13051,16 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
         role: "switch",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$o, [
-          createElementVNode("div", _hoisted_3$j, [
+        createElementVNode("div", _hoisted_2$n, [
+          createElementVNode("div", _hoisted_3$i, [
             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$g, [
-          createElementVNode("span", _hoisted_5$8, toDisplayString(props.label), 1)
+        props.label ? (openBlock(), createElementBlock("div", _hoisted_4$f, [
+          createElementVNode("span", _hoisted_5$7, toDisplayString(props.label), 1)
         ])) : createCommentVNode("", true)
       ], 10, _hoisted_1$H);
     };
@@ -12876,16 +13070,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$n = { class: "control" };
-const _hoisted_3$i = {
+const _hoisted_2$m = { class: "control" };
+const _hoisted_3$h = {
   key: 0,
   class: "dot",
   viewBox: "0 0 2 2",
   "aria-hidden": "true",
   focusable: "false"
 };
-const _hoisted_4$f = { class: "content" };
-const _hoisted_5$7 = { class: "label" };
+const _hoisted_4$e = { class: "content" };
+const _hoisted_5$6 = { class: "label" };
 const _hoisted_6$5 = ["id"];
 const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
@@ -12927,8 +13121,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$n, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$i, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$m, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$h, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -12936,8 +13130,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$f, [
-          createElementVNode("div", _hoisted_5$7, toDisplayString(props.text), 1),
+        createElementVNode("div", _hoisted_4$e, [
+          createElementVNode("div", _hoisted_5$6, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
             id: `${unref(id)}-helper`,
@@ -13148,7 +13342,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", "title"];
+const _hoisted_1$F = ["aria-checked", "aria-label", "disabled", "tabindex"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
@@ -13168,7 +13362,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const optionTextEl = useTemplateRef("optionTextEl");
     const { isTruncated } = useKdsIsTruncated(optionTextEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
+      return withDirectives((openBlock(), createElementBlock("button", {
         role: "radio",
         "aria-checked": props.selected,
         "aria-label": props.text ? void 0 : props.title,
@@ -13180,8 +13374,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           "size-small": __props.size === "small"
         }),
         disabled: __props.disabled,
-        tabindex: __props.tabIndex,
-        title: props.title ?? (unref(isTruncated) && props.text ? props.text : void 0)
+        tabindex: __props.tabIndex
       }, [
         props.leadingIcon && (!props.hideIcons || !props.text) ? (openBlock(), createBlock(KdsIcon, {
           key: 0,
@@ -13199,12 +13392,17 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$F);
+      ], 10, _hoisted_1$F)), [
+        [
+          unref(vKdsTooltip),
+          props.title ?? (unref(isTruncated) && props.text ? props.text : void 0)
+        ]
+      ]);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-5c6f0f1f"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-cd4995e6"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -13993,8 +14191,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$m = ["aria-valuetext"];
-const _hoisted_3$h = { class: "value-inputs" };
+const _hoisted_2$l = ["aria-valuetext"];
+const _hoisted_3$g = { class: "value-inputs" };
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
 const DEFAULT_VALUE = 0.9;
@@ -14184,7 +14382,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$m),
+        ], 44, _hoisted_2$l),
         createVNode(ColorPickerSlider, {
           modelValue: hue.value,
           "onUpdate:modelValue": [
@@ -14219,7 +14417,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$h, [
+        createElementVNode("div", _hoisted_3$g, [
           createVNode(KdsTextInput, {
             "model-value": hexInputValue.value,
             ariaLabel: "Color hex value",
@@ -18536,9 +18734,9 @@ const _hoisted_1$C = {
   role: "row",
   class: "kds-date-picker-header-row"
 };
-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 _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 REFERENCE_YEAR$2 = 2024;
 const DAYS_PER_WEEK = 7;
 const TOTAL_CELLS = 42;
@@ -18844,10 +19042,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$l);
+            }, toDisplayString(day), 9, _hoisted_2$k);
           }), 128))
         ]),
-        createElementVNode("div", _hoisted_3$g, [
+        createElementVNode("div", _hoisted_3$f, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week, wi) => {
             return openBlock(), createElementBlock("div", {
               key: wi,
@@ -18876,7 +19074,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                   onClick: ($event) => selectDate(day),
                   onKeydown: onDayKeydown,
                   onFocus: ($event) => onDayFocus(day)
-                }, toDisplayString(day.day), 43, _hoisted_4$e);
+                }, toDisplayString(day.day), 43, _hoisted_4$d);
               }), 128))
             ]);
           }), 128))
@@ -19266,14 +19464,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$k = { class: "kds-date-picker-header" };
-const _hoisted_3$f = { class: "kds-date-picker-nav-block" };
-const _hoisted_4$d = {
+const _hoisted_2$j = { class: "kds-date-picker-header" };
+const _hoisted_3$e = { class: "kds-date-picker-nav-block" };
+const _hoisted_4$c = {
   key: 1,
   class: "kds-date-picker-header-static-label",
   "aria-live": "polite"
 };
-const _hoisted_5$6 = { class: "kds-date-picker-nav-block" };
+const _hoisted_5$5 = { 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;
@@ -19475,8 +19673,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$z, [
-        createElementVNode("div", _hoisted_2$k, [
-          createElementVNode("div", _hoisted_3$f, [
+        createElementVNode("div", _hoisted_2$j, [
+          createElementVNode("div", _hoisted_3$e, [
             view.value === "day" ? (openBlock(), createBlock(_sfc_main$1v, {
               key: 0,
               variant: "transparent",
@@ -19502,8 +19700,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
             size: "small",
             label: headerLabel.value,
             onClick: onHeaderLabelClick
-          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$d, toDisplayString(headerLabel.value), 1)),
-          createElementVNode("div", _hoisted_5$6, [
+          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$c, toDisplayString(headerLabel.value), 1)),
+          createElementVNode("div", _hoisted_5$5, [
             createVNode(_sfc_main$1v, {
               variant: "transparent",
               size: "small",
@@ -20510,13 +20708,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$j = { class: "kds-time-picker-fields" };
-const _hoisted_3$e = { class: "kds-time-picker-fields" };
-const _hoisted_4$c = {
+const _hoisted_2$i = { class: "kds-time-picker-fields" };
+const _hoisted_3$d = { class: "kds-time-picker-fields" };
+const _hoisted_4$b = {
   key: 0,
   class: "kds-time-picker-fields"
 };
-const _hoisted_5$5 = {
+const _hoisted_5$4 = {
   key: 1,
   class: "kds-time-picker-actions"
 };
@@ -20615,7 +20813,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$w, [
-        createElementVNode("div", _hoisted_2$j, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(_sfc_main$X, {
             ref: "hourInput",
             modelValue: hour.value,
@@ -20641,7 +20839,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$e, [
+          createElementVNode("div", _hoisted_3$d, [
             createVNode(_sfc_main$X, {
               ref: "secondInput",
               modelValue: second.value,
@@ -20661,7 +20859,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
               onClick: removeSeconds
             })
           ]),
-          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
+          showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_4$b, [
             createVNode(_sfc_main$X, {
               ref: "millisecondInput",
               modelValue: millisecond.value,
@@ -20683,7 +20881,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
               title: "Remove milliseconds",
               onClick: removeMilliseconds
             })
-          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
+          ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
             createVNode(_sfc_main$1v, {
               variant: "outlined",
               size: "small",
@@ -21294,9 +21492,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$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 _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 _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "IntervalInputPopover",
   props: /* @__PURE__ */ mergeModels({
@@ -21392,7 +21590,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$h, [
           _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,
@@ -21404,7 +21602,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$d, [
+        createElementVNode("div", _hoisted_3$c, [
           props.allowDescending ? (openBlock(), createBlock(unref(KdsValueSwitch), {
             key: 0,
             modelValue: direction.value,
@@ -21414,7 +21612,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             variant: "muted",
             "possible-values": directionOptions
           }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$b, [
+          createElementVNode("div", _hoisted_4$a, [
             mode.value === unref(kdsIntervalInputFormat).DATE ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(periodNumericKeys), (key) => {
               return openBlock(), createBlock(unref(_sfc_main$X), {
                 key,
@@ -21764,13 +21962,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$h = {
+const _hoisted_2$g = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
 };
-const _hoisted_3$c = ["id"];
-const _hoisted_4$a = {
+const _hoisted_3$b = ["id"];
+const _hoisted_4$9 = {
   class: "trailing",
   "aria-hidden": "true"
 };
@@ -21855,7 +22053,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$h, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$g, [
           createVNode(_sfc_main$1q, {
             accessory: props.accessory,
             size: "medium"
@@ -21867,8 +22065,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             placeholder: !props.text && !__props.disabled,
             missing: __props.missing
           }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$c),
-        createElementVNode("span", _hoisted_4$a, [
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$b),
+        createElementVNode("span", _hoisted_4$9, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
@@ -21884,7 +22082,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$g = {
+const _hoisted_2$f = {
   key: 0,
   class: "kds-dropdown-container-sticky-top"
 };
@@ -21973,7 +22171,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -22123,7 +22321,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$r = { class: "kds-zoned-date-time-input" };
-const _hoisted_2$f = { class: "date-time-row" };
+const _hoisted_2$e = { class: "date-time-row" };
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsZonedDateTimeInput",
   props: /* @__PURE__ */ mergeModels({
@@ -22234,7 +22432,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$r, [
-            createElementVNode("div", _hoisted_2$f, [
+            createElementVNode("div", _hoisted_2$e, [
               createVNode(_sfc_main$N, {
                 ref_key: "dateInput",
                 ref: dateInput,
@@ -22276,7 +22474,6 @@ 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: {
@@ -22302,25 +22499,28 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           size: "small",
           disabled: __props.disabled
         }, null, 8, ["name", "disabled"]),
-        createElementVNode("span", {
+        withDirectives((openBlock(), createElementBlock("span", {
           ref_key: "labelEl",
           ref: labelEl,
-          class: "label",
-          title: unref(isLabelTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$e)
+          class: "label"
+        }, [
+          createTextVNode(toDisplayString(props.label), 1)
+        ])), [
+          [unref(vKdsTooltip), unref(isLabelTruncated) ? props.label : void 0]
+        ])
       ], 8, _hoisted_1$q);
     };
   }
 });
 
-const KdsListItemButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-21fb5571"]]);
+const KdsListItemButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-ac05d049"]]);
 
 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$b = {
+const _hoisted_3$a = {
   key: 1,
   class: "kds-multi-select-dropdown-footer"
 };
@@ -22477,7 +22677,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$b, [
+        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
           createVNode(unref(KdsListItemButton), {
             label: anyVisibleSelected.value ? "Clear all" : "Select all",
             "leading-icon": anyVisibleSelected.value ? "trash" : "checkmark",
@@ -23058,11 +23258,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$a = {
+const _hoisted_3$9 = {
   key: 0,
   class: "kds-multiselect-sticky-bottom"
 };
-const _hoisted_4$9 = {
+const _hoisted_4$8 = {
   key: 0,
   class: "kds-multiselect-empty"
 };
@@ -23346,7 +23546,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$a, [
+                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
                       createVNode(unref(KdsListItem), {
                         id: generateOptionId(visibleBottomValue.value.id),
                         text: visibleBottomValue.value.text,
@@ -23367,7 +23567,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ])
                 ], 16, _hoisted_1$m),
-                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
+                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
                   createVNode(KdsEmptyState, {
                     headline: __props.loading ? "Loading data…" : __props.emptyStateLabel,
                     "loading-spinner": __props.loading,
@@ -23389,12 +23589,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$9 = { class: "kds-list-label" };
-const _hoisted_4$8 = {
+const _hoisted_3$8 = { class: "kds-list-label" };
+const _hoisted_4$7 = {
   key: 0,
   class: "kds-list-count"
 };
-const _hoisted_5$4 = { class: "kds-button-column" };
+const _hoisted_5$3 = { 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" };
@@ -23579,8 +23779,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_1$l, [
               createElementVNode("div", _hoisted_2$a, [
-                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)
+                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)
               ]),
               createVNode(unref(KdsMultiSelectListBox), {
                 modelValue: leftSelected.value,
@@ -23599,7 +23799,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$4, [
+            createElementVNode("div", _hoisted_5$3, [
               createVNode(unref(_sfc_main$1v), {
                 "leading-icon": "chevron-right",
                 ariaLabel: "Move selected values right",
@@ -24021,8 +24221,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$8 = { class: "kds-sortable-top-buttons-left" };
-const _hoisted_4$7 = { class: "kds-sortable-footer-buttons" };
+const _hoisted_3$7 = { class: "kds-sortable-top-buttons-left" };
+const _hoisted_4$6 = { class: "kds-sortable-footer-buttons" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsSortableListBox",
   props: /* @__PURE__ */ mergeModels({
@@ -24082,7 +24282,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$j, [
             createElementVNode("div", _hoisted_2$9, [
-              createElementVNode("div", _hoisted_3$8, [
+              createElementVNode("div", _hoisted_3$7, [
                 createVNode(_sfc_main$1v, {
                   size: "small",
                   variant: "transparent",
@@ -24121,7 +24321,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$7, [
+            createElementVNode("div", _hoisted_4$6, [
               createVNode(_sfc_main$1v, {
                 size: "small",
                 variant: "transparent",
@@ -24209,13 +24409,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const isFocused = ref(false);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("button", mergeProps(_ctx.$attrs, {
+        withDirectives((openBlock(), createElementBlock("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,
@@ -24233,7 +24432,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             name: "circle-question",
             size: "small"
           })
-        ], 16, _hoisted_1$h),
+        ], 16, _hoisted_1$h)), [
+          [unref(vKdsTooltip), TITLE]
+        ]),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -24261,7 +24462,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-67a8974e"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-020b385c"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -24291,7 +24492,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
 
 const VariablePopover = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-8a0c56d0"]]);
 
-const _hoisted_1$f = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
+const _hoisted_1$f = ["aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsVariableToggleButton",
   props: /* @__PURE__ */ mergeModels({
@@ -24356,14 +24557,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("button", mergeProps(_ctx.$attrs, {
+        withDirectives((openBlock(), createElementBlock("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,
@@ -24381,7 +24581,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"])
-        ], 16, _hoisted_1$f),
+        ], 16, _hoisted_1$f)), [
+          [unref(vKdsTooltip), title.value]
+        ]),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -24409,13 +24611,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-b6d29842"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-3e9b0390"]]);
 
 const _hoisted_1$e = { class: "kds-accordion" };
 const _hoisted_2$8 = ["name", "open", "onToggle"];
-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_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_6$1 = { class: "kds-accordion-content" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsAccordion",
@@ -24560,20 +24762,20 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               onClick: ($event) => onSummaryClick($event, item),
               onKeydown: ($event) => handleTriggerKeydown($event, item)
             }, [
-              createElementVNode("span", _hoisted_4$6, [
+              createElementVNode("span", _hoisted_4$5, [
                 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$3, toDisplayString(item.headline), 1)
+                createElementVNode("span", _hoisted_5$2, toDisplayString(item.headline), 1)
               ]),
               createVNode(KdsIcon, {
                 name: isItemExpanded(item.id) ? "chevron-up" : "chevron-down",
                 size: "small"
               }, null, 8, ["name"])
-            ], 40, _hoisted_3$7),
+            ], 40, _hoisted_3$6),
             createElementVNode("div", _hoisted_6$1, [
               renderSlot(_ctx.$slots, item.id, { item }, void 0, true)
             ])
@@ -24591,8 +24793,8 @@ const _hoisted_2$7 = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$6 = { key: 1 };
-const _hoisted_4$5 = {
+const _hoisted_3$5 = { key: 1 };
+const _hoisted_4$4 = {
   key: 2,
   class: "actions",
   "data-kds-card-secondary-action": ""
@@ -24608,8 +24810,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$6, toDisplayString(__props.headline), 1)) : createCommentVNode("", true),
-        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+        __props.headline ? (openBlock(), createElementBlock("h6", _hoisted_3$5, toDisplayString(__props.headline), 1)) : createCommentVNode("", true),
+        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
           renderSlot(_ctx.$slots, "actions", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ]);
@@ -24916,12 +25118,12 @@ const _hoisted_2$6 = {
   key: 0,
   class: "kds-panel-header"
 };
-const _hoisted_3$5 = ["id"];
-const _hoisted_4$4 = {
+const _hoisted_3$4 = ["id"];
+const _hoisted_4$3 = {
   key: 0,
   class: "kds-panel-headline-text"
 };
-const _hoisted_5$2 = {
+const _hoisted_5$1 = {
   key: 1,
   class: "kds-panel-header-trailing"
 };
@@ -24971,15 +25173,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             id: unref(headlineId),
             class: "kds-panel-headline"
           }, [
-            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, {
+            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, {
               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$5)) : createCommentVNode("", true),
-          __props.headlineTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+          ], 8, _hoisted_3$4)) : createCommentVNode("", true),
+          __props.headlineTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
             (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({
@@ -25178,9 +25380,9 @@ const useTabBarAdaptiveLayout = ({
 };
 
 const _hoisted_1$9 = { class: "kds-tab-bar-wrapper" };
-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 = {
+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 = {
   key: 1,
   class: "kds-tab-indicator"
 };
@@ -25199,7 +25401,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v09be89a3": minTabWidthCss
+      "v9ef1548e": minTabWidthCss
     }));
     const props = createPropsRestProxy(__props, ["size", "fullWidth", "disabled"]);
     const modelValue = useModel(__props, "modelValue");
@@ -25317,7 +25519,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           role: "tablist"
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
-            return openBlock(), createElementBlock("button", {
+            return withDirectives((openBlock(), createElementBlock("button", {
               id: tab.id,
               key: tab.value,
               ref_for: true,
@@ -25327,7 +25529,6 @@ 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,
@@ -25345,9 +25546,11 @@ 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$4, toDisplayString(tab.label), 1),
-              modelValue.value === tab.value ? (openBlock(), createElementBlock("span", _hoisted_4$3)) : createCommentVNode("", true)
-            ], 42, _hoisted_2$5);
+              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)]
+            ]);
           }), 128))
         ], 2)
       ]);
@@ -25355,7 +25558,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-91f95f5f"]]);
+const KdsTabBar = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-9a4461cc"]]);
 
 const kdsTabBarSize = {
   SMALL: "small",
@@ -25389,12 +25592,12 @@ const _hoisted_2$4 = {
   key: 0,
   class: "kds-loading-skeleton-headline-with-paragraph"
 };
-const _hoisted_3$3 = { class: "kds-loading-skeleton-paragraph-lines" };
-const _hoisted_4$2 = {
+const _hoisted_3$2 = { class: "kds-loading-skeleton-paragraph-lines" };
+const _hoisted_4$1 = {
   key: 1,
   class: "kds-loading-skeleton-input-with-label"
 };
-const _hoisted_5$1 = { class: "kds-loading-skeleton-list-item-text" };
+const _hoisted_5 = { class: "kds-loading-skeleton-list-item-text" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSkeleton",
   props: {
@@ -25418,12 +25621,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 shape: "text",
                 class: "headline"
               }),
-              createElementVNode("div", _hoisted_3$3, [
+              createElementVNode("div", _hoisted_3$2, [
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 createVNode(LoadingSkeletonItem, { shape: "text" })
               ])
-            ])) : __props.variant === "input-with-label" ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+            ])) : __props.variant === "input-with-label" ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
               createVNode(LoadingSkeletonItem, {
                 shape: "label",
                 class: "label"
@@ -25443,7 +25646,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$1, [
+              createElementVNode("div", _hoisted_5, [
                 createVNode(LoadingSkeletonItem, { shape: "text" }),
                 __props.variant.endsWith("subtext") ? (openBlock(), createBlock(LoadingSkeletonItem, {
                   key: 0,
@@ -25505,7 +25708,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   emits: ["click", "trailingButtonClick"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v29854424": paddingRight.value
+      "b532af5e": paddingRight.value
     }));
     const props = __props;
     const emit = __emit;
@@ -25549,10 +25752,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }
         ])
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(navComponent.value), mergeProps({ class: "kds-nav-button" }, navComponentAttrs.value, {
+        withDirectives((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(() => [
@@ -25569,7 +25771,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             }, toDisplayString(__props.label), 513)
           ]),
           _: 1
-        }, 16, ["disabled", "aria-current", "title"])),
+        }, 16, ["disabled", "aria-current"])), [
+          [unref(vKdsTooltip), unref(isLabelTruncated) ? __props.label : void 0]
+        ]),
         hasTrailingItems.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           ref_key: "trailingItemsEl",
@@ -25593,7 +25797,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-17711664"]]);
+const KdsNavItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-3d410fd0"]]);
 
 const _hoisted_1$7 = ["aria-label"];
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
@@ -25644,20 +25848,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 const KdsNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6cc9519f"]]);
 
-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 _hoisted_1$6 = ["aria-label", "aria-current"];
+const _hoisted_2$3 = ["aria-label", "aria-current"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "BreadcrumbItem",
   props: {
@@ -25668,6 +25860,11 @@ 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)
     );
@@ -25680,13 +25877,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return isLinkItem.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(linkComponent)), {
+      return isLinkItem.value ? withDirectives((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,
-        title: __props.item.title
+        "aria-current": __props.isCurrentItem ? "page" : void 0
       }, {
         default: withCtx(() => [
           __props.item.leadingIcon ? (openBlock(), createBlock(unref(KdsIcon), {
@@ -25694,16 +25890,22 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             name: __props.item.leadingIcon,
             class: "breadcrumb-icon"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          __props.item.text ? (openBlock(), createElementBlock("span", _hoisted_1$6, toDisplayString(__props.item.text), 1)) : 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)
         ]),
         _: 1
-      }, 8, ["to", "aria-label", "aria-current", "title"])) : isButtonItem.value ? (openBlock(), createElementBlock("button", {
+      }, 8, ["to", "aria-label", "aria-current"])), [
+        [unref(vKdsTooltip), tooltipText.value]
+      ]) : isButtonItem.value ? withDirectives((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), {
@@ -25711,26 +25913,39 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           name: __props.item.leadingIcon,
           class: "breadcrumb-icon"
         }, null, 8, ["name"])) : createCommentVNode("", true),
-        __props.item.text ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(__props.item.text), 1)) : createCommentVNode("", true)
-      ], 8, _hoisted_2$3)) : (openBlock(), createElementBlock("span", {
+        __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", {
         key: 2,
         class: "kds-breadcrumb-item",
         "aria-label": __props.item.ariaLabel,
-        "aria-current": __props.isCurrentItem ? "page" : void 0,
-        title: __props.item.title
+        "aria-current": __props.isCurrentItem ? "page" : void 0
       }, [
         __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", _hoisted_5, toDisplayString(__props.item.text), 1)) : createCommentVNode("", true)
-      ], 8, _hoisted_4$1));
+        __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]
+      ]);
     };
   }
 });
 
-const BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-fd7537fc"]]);
+const BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-6fd3d680"]]);
 
 const useBreadcrumbAdaptiveLayout = (listRef, itemRefs, itemsSource) => {
   const { width: listWidth } = useElementSize(listRef);
@@ -26453,5 +26668,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDescription = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ed6ba7bb"]]);
 
-export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1v as KdsButton, _sfc_main$h as KdsCard, _sfc_main$13 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$U as KdsColorInput, KdsColorSwatch, _sfc_main$1f as KdsContextMenu, KdsDataType, _sfc_main$N as KdsDateInput, _sfc_main$L as KdsDateTimeFormatInput, KdsDateTimeInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$A as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$E as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1u as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1g as KdsMenu, _sfc_main$1k as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$w as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$X as KdsNumberInput, KdsPanel, _sfc_main$T as KdsPasswordInput, _sfc_main$K as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$G as KdsTimeInput, _sfc_main$1s as KdsToggleButton, KdsToggleSwitch, KdsTwinList, _sfc_main$S as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, KdsZonedDateTimeInput, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressBarSize, kdsProgressBarSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsToggleSwitchLabelPosition, kdsToggleSwitchLabelPositions, kdsToggleSwitchSize, kdsToggleSwitchSizes, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1v as KdsButton, _sfc_main$h as KdsCard, _sfc_main$13 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$U as KdsColorInput, KdsColorSwatch, _sfc_main$1f as KdsContextMenu, KdsDataType, _sfc_main$N as KdsDateInput, _sfc_main$L as KdsDateTimeFormatInput, KdsDateTimeInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$A as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$E as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1u as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1g as KdsMenu, _sfc_main$1k as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$w as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$X as KdsNumberInput, KdsPanel, _sfc_main$T as KdsPasswordInput, _sfc_main$K as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$G as KdsTimeInput, _sfc_main$1s as KdsToggleButton, KdsToggleSwitch, KdsTwinList, _sfc_main$S as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, KdsZonedDateTimeInput, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressBarSize, kdsProgressBarSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsToggleSwitchLabelPosition, kdsToggleSwitchLabelPositions, kdsToggleSwitchSize, kdsToggleSwitchSizes, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode, vKdsTooltip };
 //# sourceMappingURL=index.js.map