@knime/kds-components 1.1.5 → 1.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ref, effectScope, defineComponent, createPropsRestProxy, watch, computed, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, unref, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, resolveDynamicComponent, mergeProps, createTextVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useCssVars, createVNode, useTemplateRef, nextTick, withModifiers, useModel, useId, mergeModels, createSlots, normalizeProps, guardReactiveProps, watchEffect, onMounted, onUnmounted, inject, provide, resolveComponent, withKeys, useAttrs, defineAsyncComponent, toRefs, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, toRaw } from 'vue';
+import { ref, effectScope, defineComponent, createPropsRestProxy, watch, computed, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, unref, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, resolveDynamicComponent, withCtx, renderSlot, mergeProps, useCssVars, createVNode, useTemplateRef, nextTick, withModifiers, useModel, useId, mergeModels, createSlots, normalizeProps, guardReactiveProps, watchEffect, onMounted, createTextVNode, h as h$1, useSlots, getCurrentInstance, onUnmounted, inject, provide, resolveComponent, withKeys, useAttrs, defineAsyncComponent, toRefs, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, toRaw } from 'vue';
 import { useResizeObserver, useMutationObserver, useEventListener, useElementSize, onClickOutside, useVirtualList, useMousePressed, useTemplateRefsList, useLocalStorage, useDark, usePreferredDark } from '@vueuse/core';
 
 import './index.css';function elementOverflowsHorizontally(element) {
@@ -249,7 +249,7 @@ const kdsAvatarSize = {
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
 const _hoisted_1$1e = ["role", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$L = ["src"];
+const _hoisted_2$K = ["src"];
 const _hoisted_3$w = {
   key: 1,
   class: "kds-avatar-initials",
@@ -261,7 +261,7 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
     initials: {},
     src: {},
     size: { default: () => kdsAvatarSize.XLARGE },
-    title: {}
+    tooltip: {}
   },
   setup(__props) {
     const props = createPropsRestProxy(__props, ["size"]);
@@ -297,7 +297,7 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
     const onImageError = () => {
       imageLoadFailed.value = true;
     };
-    const accessibleTitle = computed(() => props.title?.trim() ?? "");
+    const accessibleTitle = computed(() => props.tooltip?.trim() ?? "");
     const hasTitle = computed(() => accessibleTitle.value.length > 0);
     const displayedInitials = computed(
       () => (props.initials ?? "").trim().slice(0, 2).toUpperCase()
@@ -318,7 +318,7 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$L)) : (openBlock(), createElementBlock("div", _hoisted_3$w, [
+        }, null, 40, _hoisted_2$K)) : (openBlock(), createElementBlock("div", _hoisted_3$w, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
       ], 10, _hoisted_1$1e)), [
@@ -336,10 +336,10 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1O, [["__scopeId", "data-v-a75804e1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1O, [["__scopeId", "data-v-4da85666"]]);
 
 const _hoisted_1$1d = ["aria-label"];
-const _hoisted_2$K = { class: "avatars" };
+const _hoisted_2$J = { class: "avatars" };
 const _hoisted_3$v = {
   key: 0,
   class: "more-count",
@@ -355,7 +355,7 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const ariaLabel = computed(() => {
       const prefix = "Avatar of ";
-      const users = __props.avatars.map((avatar) => avatar.title ?? avatar.initials).join(", ");
+      const users = __props.avatars.map((avatar) => avatar.tooltip ?? avatar.initials).join(", ");
       const moreText = ` and ${__props.moreCount} more.`;
       return [prefix, users, __props.moreCount > 0 ? moreText : "."].join("");
     });
@@ -365,7 +365,7 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
         role: "group",
         "aria-label": ariaLabel.value
       }, [
-        createElementVNode("div", _hoisted_2$K, [
+        createElementVNode("div", _hoisted_2$J, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.avatars, (avatar, index) => {
             return openBlock(), createBlock(KdsAvatar, {
               key: index,
@@ -374,9 +374,9 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
               class: "avatar",
               size: __props.size,
               initials: avatar.initials,
-              title: avatar.title,
+              tooltip: avatar.tooltip,
               src: avatar.src
-            }, null, 8, ["style", "size", "initials", "title", "src"]);
+            }, null, 8, ["style", "size", "initials", "tooltip", "src"]);
           }), 128))
         ]),
         __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$v, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
@@ -385,7 +385,7 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["__scopeId", "data-v-1aef516d"]]);
+const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["__scopeId", "data-v-d3a7b887"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -938,226 +938,338 @@ const _sfc_main$1K = /* @__PURE__ */ defineComponent({
 
 const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["__scopeId", "data-v-df64f7cf"]]);
 
-const kdsProgressBarSize = {
-  MEDIUM: "medium",
-  LARGE: "large"
+const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
+
+const createUnwrappedPromise = () => {
+  let resolve = () => {
+  };
+  let reject = () => {
+  };
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { resolve, reject, promise };
 };
-const kdsProgressBarSizes = Object.values(kdsProgressBarSize);
 
-const _hoisted_1$19 = ["aria-label"];
-const _hoisted_2$J = {
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const getMetaOrCtrlKey = () => {
+  return isMac() ? "metaKey" : "ctrlKey";
+};
+
+const _hoisted_1$19 = {
   key: 0,
-  class: "indeterminate-bar",
-  "aria-hidden": "true"
+  class: "label"
 };
 const _sfc_main$1J = /* @__PURE__ */ defineComponent({
-  __name: "KdsProgressBar",
+  __name: "BaseButton",
   props: {
-    size: { default: () => kdsProgressBarSize.MEDIUM },
-    title: { default: "" },
-    percentage: { default: 0 },
-    indeterminate: { type: Boolean, default: false }
+    dataTestId: {},
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: false },
+    tooltip: {},
+    variant: {},
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    destructive: { type: Boolean, default: false },
+    success: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    toggled: { type: Boolean, default: false },
+    removeBorderRadius: { default: () => void 0 },
+    component: { default: "button" }
   },
-  setup(__props) {
-    const progressValue = computed(() => {
-      if (Number.isNaN(__props.percentage)) {
-        return 0;
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = createPropsRestProxy(__props, ["component", "size", "destructive", "success", "error", "disabled", "toggled", "removeBorderRadius"]);
+    const emit = __emit;
+    const classes = computed(() => [
+      "button",
+      __props.size,
+      props.variant,
+      { destructive: __props.destructive },
+      { disabled: __props.disabled },
+      { toggled: __props.toggled },
+      { success: __props.success },
+      { error: __props.error },
+      __props.removeBorderRadius ? `remove-border-radius-${__props.removeBorderRadius}` : void 0
+    ]);
+    const iconSize = computed(() => {
+      if (__props.size === "xsmall") {
+        return "small";
+      } else {
+        return __props.size;
       }
-      return Math.min(Math.max(__props.percentage, 0), 100);
     });
-    const title = computed(() => {
-      const customTitle = (__props.title ?? "").trim();
-      if (customTitle) {
-        return customTitle;
+    function onClick(e) {
+      if (!__props.disabled) {
+        emit("click", e);
       }
-      return __props.indeterminate ? "Loading" : `Progress: ${progressValue.value}%`;
-    });
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          "kds-progress-bar",
-          {
-            "kds-progress-bar-large": __props.size === unref(kdsProgressBarSize).LARGE,
-            "kds-progress-bar-medium": __props.size !== unref(kdsProgressBarSize).LARGE
-          }
-        ])
-      }, [
-        withDirectives(createElementVNode("progress", mergeProps({
-          "aria-label": title.value,
-          class: "progress"
-        }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16, _hoisted_1$19), [
-          [unref(vKdsTooltip), title.value]
+      return withDirectives((openBlock(), createBlock(resolveDynamicComponent(__props.component), {
+        type: __props.component === "button" ? "button" : void 0,
+        class: normalizeClass(classes.value),
+        disabled: __props.disabled,
+        "aria-label": props.ariaLabel,
+        "data-test-id": props.dataTestId,
+        onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "leading", {}, () => [
+            props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
+              key: 0,
+              name: props.leadingIcon,
+              size: iconSize.value
+            }, null, 8, ["name", "size"])) : createCommentVNode("", true)
+          ], true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$19, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
+            key: 1,
+            name: props.trailingIcon,
+            size: iconSize.value
+          }, null, 8, ["name", "size"])) : createCommentVNode("", true)
         ]),
-        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$J)) : createCommentVNode("", true)
-      ], 2);
+        _: 3
+      }, 8, ["type", "class", "disabled", "aria-label", "data-test-id"])), [
+        [unref(vKdsTooltip), props.tooltip]
+      ]);
     };
   }
 });
 
-const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-06930dc4"]]);
-
-const kdsColorSwatchType = {
-  LEARNER: "learner",
-  MANIPULATOR: "manipulator",
-  PREDICTOR: "predictor",
-  SINK: "sink",
-  SOURCE: "source",
-  VISUALIZER: "visualizer",
-  OTHER: "other"
-};
-const kdsColorSwatchTypes = Object.values(kdsColorSwatchType);
-const kdsColorSwatchSize = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large"
-};
-const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-6fbab10f"]]);
 
-const _hoisted_1$18 = ["role", "aria-hidden", "aria-label"];
-const RGBA_SHORT_HEX_LENGTH = 4;
-const RGBA_LONG_HEX_LENGTH = 8;
-const ALPHA_NIBBLE_INDEX = 3;
-const ALPHA_BYTE_START = 6;
-const RGB_SHORT_HEX_LENGTH = 3;
-const RGB_LONG_HEX_LENGTH = 6;
 const _sfc_main$1I = /* @__PURE__ */ defineComponent({
-  __name: "KdsColorSwatch",
+  __name: "KdsButton",
   props: {
-    color: {},
-    size: { default: () => kdsColorSwatchSize.SMALL },
-    title: {}
+    dataTestId: {},
+    size: {},
+    disabled: { type: Boolean },
+    tooltip: {},
+    variant: { default: "filled" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    destructive: { type: Boolean }
   },
-  setup(__props) {
-    const props = createPropsRestProxy(__props, ["size"]);
-    const typeToTokenColor = {
-      learner: "var(--kds-color-nodes-and-variables-learner)",
-      manipulator: "var(--kds-color-nodes-and-variables-manipulator)",
-      predictor: "var(--kds-color-nodes-and-variables-predictor)",
-      sink: "var(--kds-color-nodes-and-variables-sink)",
-      source: "var(--kds-color-nodes-and-variables-source)",
-      visualizer: "var(--kds-color-nodes-and-variables-visualizer)",
-      other: "var(--kds-color-nodes-and-variables-other)"
-    };
-    const isKdsColorSwatchType = (value) => Object.hasOwn(typeToTokenColor, value);
-    const isTransparentAlphaHexColor = (value) => {
-      const withoutHash = value.startsWith("#") ? value.slice(1) : value;
-      if (withoutHash.length === RGBA_SHORT_HEX_LENGTH) {
-        return withoutHash[ALPHA_NIBBLE_INDEX].toLowerCase() !== "f";
-      }
-      if (withoutHash.length === RGBA_LONG_HEX_LENGTH) {
-        return withoutHash.slice(ALPHA_BYTE_START).toLowerCase() !== "ff";
-      }
-      return false;
-    };
-    const toOpaqueHexColor = (value) => {
-      const withoutHash = value.startsWith("#") ? value.slice(1) : value;
-      if (withoutHash.length === RGBA_SHORT_HEX_LENGTH) {
-        return `#${withoutHash.slice(0, RGB_SHORT_HEX_LENGTH)}`;
-      }
-      if (withoutHash.length === RGBA_LONG_HEX_LENGTH) {
-        return `#${withoutHash.slice(0, RGB_LONG_HEX_LENGTH)}`;
-      }
-      return value;
-    };
-    const backgroundColor = computed(() => {
-      if (isKdsColorSwatchType(props.color)) {
-        return typeToTokenColor[props.color];
-      }
-      return props.color;
-    });
-    const showAlphaPreview = computed(
-      () => !isKdsColorSwatchType(props.color) && isTransparentAlphaHexColor(props.color)
-    );
-    const swatchStyle = computed(() => {
-      if (!showAlphaPreview.value) {
-        return { backgroundColor: backgroundColor.value };
-      }
-      const opaqueColor = toOpaqueHexColor(props.color);
-      return {
-        backgroundImage: `
-      linear-gradient(to right, ${backgroundColor.value} 0 50%, ${opaqueColor} 50% 100%),
-      repeating-conic-gradient(
-        var(--kds-color-background-neutral-active) 0 25%,
-        var(--kds-color-surface-default) 0 50%
-      )
-    `,
-        backgroundSize: "100% 100%, var(--kds-color-swatch-checker-size) var(--kds-color-swatch-checker-size)",
-        backgroundPosition: "0 0, 0 0"
-      };
-    });
-    const accessibleTitle = computed(() => props.title?.trim() ?? "");
-    const hasTitle = computed(() => accessibleTitle.value.length > 0);
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = createPropsRestProxy(__props, ["variant"]);
+    const emit = __emit;
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("span", {
-        role: hasTitle.value ? "img" : "presentation",
-        class: normalizeClass(["kds-color-swatch", __props.size]),
-        style: normalizeStyle(swatchStyle.value),
-        "aria-hidden": hasTitle.value ? void 0 : "true",
-        "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$18)), [
-        [unref(vKdsTooltip), hasTitle.value ? accessibleTitle.value : void 0]
-      ]);
+      return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        variant: __props.variant,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+      }), null, 16, ["variant"]);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["__scopeId", "data-v-b91cf470"]]);
+const kdsModalClosedBy = {
+  ANY: "any",
+  CLOSEREQUEST: "closerequest",
+  NONE: "none"
+};
+const kdsModalClosedByOptions = Object.values(kdsModalClosedBy);
+const kdsModalWidth = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  XLARGE: "xlarge",
+  FULL: "full"
+};
+const kdsModalWidthSizes = Object.values(kdsModalWidth);
+const kdsModalHeight = {
+  AUTO: "auto",
+  FULL: "full"
+};
+const kdsModalHeightSizes = Object.values(kdsModalHeight);
+const kdsModalVariant = {
+  PADDED: "padded",
+  PLAIN: "plain"
+};
+const kdsModalVariants = Object.values(kdsModalVariant);
+({
+  variant: kdsModalVariant.PADDED});
+({
+  height: kdsModalHeight.AUTO,
+  width: kdsModalWidth.MEDIUM,
+  closedby: kdsModalClosedBy.CLOSEREQUEST});
 
-const _hoisted_1$17 = ["aria-label"];
-const _hoisted_2$I = {
+const _hoisted_1$18 = { class: "modal-header" };
+const _hoisted_2$I = { class: "modal-header-headline" };
+const _hoisted_3$u = ["data-variant"];
+const _hoisted_4$q = {
   key: 0,
-  class: "label"
+  class: "modal-footer"
 };
 const _sfc_main$1H = /* @__PURE__ */ defineComponent({
-  __name: "KdsLiveStatus",
+  ...{ inheritAttrs: false },
+  __name: "KdsModalLayout",
   props: {
-    status: { default: "red" },
-    size: { default: "medium" },
-    label: { default: "" },
-    title: {}
+    headline: { default: "" },
+    variant: { default: () => kdsModalVariant.PADDED },
+    leadingIcon: {},
+    overflow: { default: "auto" },
+    onClose: { type: Function }
   },
   setup(__props) {
-    const props = createPropsRestProxy(__props, ["status", "size", "label"]);
-    const accessibleTitle = computed(
-      () => props.title?.trim() || `Status is ${__props.status}`
+    useCssVars((_ctx) => ({
+      "v0cb7acbb": _ctx.overflow
+    }));
+    const props = createPropsRestProxy(__props, ["headline", "variant", "overflow"]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("header", _hoisted_1$18, [
+          props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
+            key: 0,
+            name: props.leadingIcon,
+            size: "medium"
+          }, null, 8, ["name"])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2$I, toDisplayString(__props.headline), 1),
+          createVNode(_sfc_main$1I, {
+            "leading-icon": "x-close",
+            variant: "transparent",
+            size: "medium",
+            tooltip: "Close",
+            ariaLabel: "Close",
+            onClick: props.onClose
+          }, null, 8, ["onClick"])
+        ]),
+        createElementVNode("div", {
+          class: "modal-body",
+          "data-variant": __props.variant
+        }, [
+          renderSlot(_ctx.$slots, "body", {}, void 0, true)
+        ], 8, _hoisted_3$u),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$q, [
+          renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["__scopeId", "data-v-5129eb03"]]);
+
+const _hoisted_1$17 = ["closedby"];
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
+  __name: "KdsModal",
+  props: {
+    leadingIcon: {},
+    headline: { default: "" },
+    variant: { default: () => kdsModalVariant.PADDED },
+    width: { default: () => kdsModalWidth.MEDIUM },
+    height: { default: () => kdsModalHeight.AUTO },
+    active: { type: Boolean, default: false },
+    closedby: { default: () => kdsModalClosedBy.CLOSEREQUEST },
+    overflow: { default: "auto" }
+  },
+  emits: ["close", "closed"],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "v8f271084": _ctx.overflow
+    }));
+    const emit = __emit;
+    const dialog = useTemplateRef("dialogElement");
+    const onClose = (event) => {
+      emit("close", event);
+    };
+    watch(
+      () => __props.active,
+      async (isActive) => {
+        if (isActive) {
+          await nextTick();
+          dialog.value?.showModal();
+        } else {
+          dialog.value?.close();
+        }
+      },
+      { immediate: true }
+    );
+    const renderDialog = ref(__props.active);
+    const removeDialog = () => {
+      if (!renderDialog.value) {
+        return;
+      }
+      renderDialog.value = false;
+      emit("closed");
+    };
+    watch(
+      () => __props.active,
+      async (value, lastValue) => {
+        if (value === false && lastValue === true) {
+          if (dialog.value) {
+            Promise.all(
+              dialog.value.getAnimations({ subtree: true }).map((animation) => animation.finished)
+            ).then(removeDialog).catch((error) => {
+              if (error.name === "AbortError") {
+                removeDialog();
+                return;
+              }
+              throw error;
+            });
+            await sleep(350);
+            removeDialog();
+          } else {
+            removeDialog();
+          }
+        } else {
+          renderDialog.value = value;
+        }
+      }
     );
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("span", {
-        class: normalizeClass(["kds-live-status", __props.status, `size-${__props.size}`]),
-        role: "img",
-        "aria-label": accessibleTitle.value
+      return renderDialog.value ? (openBlock(), createElementBlock("dialog", {
+        key: 0,
+        ref: "dialogElement",
+        class: normalizeClass([
+          "kds-modal",
+          `width-${__props.width}`,
+          `height-${__props.height}`,
+          `overflow-${__props.overflow}`
+        ]),
+        closedby: __props.closedby,
+        onCancel: withModifiers(onClose, ["prevent"])
       }, [
-        _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
-        __props.label ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$I, [
-          createTextVNode(toDisplayString(__props.label), 1)
-        ])), [
-          [unref(vKdsTooltip), __props.label, "truncated"]
-        ]) : createCommentVNode("", true)
-      ], 10, _hoisted_1$17)), [
-        [unref(vKdsTooltip), !__props.label ? accessibleTitle.value : void 0]
-      ]);
+        renderSlot(_ctx.$slots, "default", {
+          headline: __props.headline,
+          leadingIcon: __props.leadingIcon,
+          variant: __props.variant,
+          overflow: __props.overflow,
+          onClose
+        }, () => [
+          createVNode(KdsModalLayout, {
+            headline: __props.headline,
+            "leading-icon": __props.leadingIcon,
+            variant: __props.variant,
+            overflow: __props.overflow,
+            onClose
+          }, {
+            body: withCtx(() => [
+              renderSlot(_ctx.$slots, "body", {}, void 0, true)
+            ]),
+            footer: withCtx(() => [
+              renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["headline", "leading-icon", "variant", "overflow"])
+        ], true)
+      ], 42, _hoisted_1$17)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["__scopeId", "data-v-e67b29f5"]]);
-
-const kdsLiveStatusStatus = {
-  RED: "red",
-  ORANGE: "orange",
-  GREEN: "green",
-  DISABLED: "disabled"
-};
-const kdsLiveStatusStatuses = Object.values(kdsLiveStatusStatus);
-const kdsLiveStatusSize = {
-  LARGE: "large",
-  MEDIUM: "medium",
-  SMALL: "small"
-};
-const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-1f306093"]]);
 
 const _hoisted_1$16 = ["data-style"];
-const _sfc_main$1G = /* @__PURE__ */ defineComponent({
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -1187,1269 +1299,1153 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-54835dc0"]]);
-
-const kdsLoadingSpinnerVariant = {
-  ON_PRIMARY: "onPrimary",
-  ON_SURFACE: "onSurface"
-};
-const kdsLoadingSpinnerVariants = Object.values(
-  kdsLoadingSpinnerVariant
-);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-54835dc0"]]);
 
-const _sfc_main$1F = /* @__PURE__ */ defineComponent({
-  __name: "KdsMissingValueIcon",
+const _hoisted_1$15 = ["id"];
+const _hoisted_2$H = { class: "subtext-text" };
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
+  __name: "KdsSubText",
   props: {
-    size: {}
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false }
   },
   setup(__props) {
+    const props = createPropsRestProxy(__props, ["error", "validating", "preserveSubTextSpace"]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(KdsIcon, {
-        name: "circle-question",
-        size: __props.size,
-        class: "kds-missing-value-icon"
-      }, null, 8, ["size"]);
+      return props.subText || __props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        id: props.id,
+        class: normalizeClass({
+          subtext: true,
+          error: __props.error
+        })
+      }, [
+        __props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
+          key: 0,
+          name: "circle-error",
+          size: "small",
+          "aria-label": "Error"
+        })) : __props.validating && props.subText ? (openBlock(), createBlock(KdsLoadingSpinner, {
+          key: 1,
+          size: "small",
+          variant: "onSurface",
+          "aria-hidden": "true"
+        })) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2$H, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$15)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-df682150"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-2e6ba10c"]]);
 
-const _hoisted_1$15 = { class: "donut-container" };
-const _hoisted_2$H = ["height", "width", "viewBox"];
-const _hoisted_3$u = ["r", "stroke-width"];
-const _hoisted_4$q = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
-const _hoisted_5$g = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
-const _hoisted_6$b = {
+const _hoisted_1$14 = ["disabled", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$G = { class: "control" };
+const _hoisted_3$t = {
   key: 0,
-  class: "donut-text"
+  class: "content"
 };
-const _hoisted_7$3 = { class: "title" };
-const _hoisted_8$3 = {
+const _hoisted_4$p = { class: "label" };
+const _hoisted_5$g = ["id"];
+const _hoisted_6$b = {
   key: 0,
-  class: "sub-text"
+  class: "subtext-wrapper"
 };
-const radius = 22;
-const innerRadius = 10;
-const _sfc_main$1E = /* @__PURE__ */ defineComponent({
-  __name: "KdsDonutChart",
-  props: {
-    value: {},
-    secondaryValue: { default: 0 },
-    maxValue: {},
-    acceptValuesLargerThanMax: { type: Boolean, default: false },
-    animate: { type: Boolean, default: true },
-    title: {},
-    subText: {}
-  },
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+  __name: "BaseCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    subText: {},
+    preserveSubTextSpace: { type: Boolean },
+    label: {},
+    tooltip: {},
+    helperText: {}
+  }, {
+    "modelValue": { default: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
   setup(__props) {
-    const clippedValue = computed(() => {
-      const clipValue = Math.max(0, __props.value);
-      return __props.acceptValuesLargerThanMax ? clipValue : Math.min(clipValue, __props.maxValue);
-    });
-    const secondaryClippedValue = computed(() => {
-      const clipValue = Math.max(0, __props.secondaryValue + clippedValue.value);
-      return __props.acceptValuesLargerThanMax ? clipValue : Math.min(clipValue, __props.maxValue);
-    });
-    const strokeWidth = computed(() => radius - innerRadius);
-    const r = computed(() => radius - strokeWidth.value / 2);
-    const diameter = computed(() => 2 * radius);
-    const viewBox = computed(() => `0 0 ${diameter.value} ${diameter.value}`);
-    const circumference = computed(() => 2 * Math.PI * r.value);
-    const calcStrokeDashOffset = (value) => {
-      if (__props.maxValue <= 0 || !Number.isFinite(__props.maxValue)) {
-        return circumference.value;
+    const props = createPropsRestProxy(__props, ["disabled", "error"]);
+    const modelValue = useModel(__props, "modelValue");
+    const helperId = useId();
+    const descriptionId = useId();
+    const isChecked = computed(() => modelValue.value === true);
+    const isIndeterminate = computed(() => modelValue.value === "indeterminate");
+    const icon = computed(() => {
+      if (isChecked.value) {
+        return "checkmark";
       }
-      const strokeDiff = Math.min(
-        value / __props.maxValue * circumference.value,
-        circumference.value
-      );
-      return Math.max(circumference.value - strokeDiff, 0);
+      if (isIndeterminate.value) {
+        return "minus";
+      }
+      return null;
+    });
+    const ariaChecked = computed(() => {
+      if (isIndeterminate.value) {
+        return "mixed";
+      }
+      return isChecked.value;
+    });
+    const ariaDescribedBy = computed(() => {
+      const ids = [];
+      if (props.helperText) {
+        ids.push(helperId);
+      }
+      if (props.subText) {
+        ids.push(descriptionId);
+      }
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    });
+    const handleClick = () => {
+      if (__props.disabled) {
+        return;
+      }
+      modelValue.value = isIndeterminate.value ? true : !isChecked.value;
     };
-    const strokeDashOffset = computed(
-      () => calcStrokeDashOffset(clippedValue.value)
-    );
-    const secondaryStrokeDashOffset = computed(
-      () => calcStrokeDashOffset(secondaryClippedValue.value)
-    );
-    const transformWedge = computed(() => `rotate(-90, ${radius}, ${radius})`);
-    const disabled = computed(() => !Number.isFinite(__props.maxValue));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$15, [
-        (openBlock(), createElementBlock("svg", {
-          height: diameter.value,
-          width: diameter.value,
-          viewBox: viewBox.value,
-          class: "donut-chart"
+      return openBlock(), createElementBlock("div", null, [
+        withDirectives((openBlock(), createElementBlock("button", {
+          class: normalizeClass({
+            checkbox: true,
+            checked: isChecked.value,
+            indeterminate: isIndeterminate.value,
+            disabled: __props.disabled,
+            error: __props.error
+          }),
+          disabled: __props.disabled,
+          "aria-label": props.tooltip,
+          "aria-checked": ariaChecked.value,
+          "aria-describedby": ariaDescribedBy.value,
+          "aria-invalid": __props.error,
+          type: "button",
+          role: "checkbox",
+          onClick: handleClick
         }, [
-          createElementVNode("circle", {
-            class: "background-circle",
-            cx: radius,
-            cy: radius,
-            r: r.value,
-            "stroke-width": strokeWidth.value,
-            fill: "transparent"
-          }, null, 8, _hoisted_3$u),
-          __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
-            key: 0,
-            class: normalizeClass(["value-wedge", "secondary-circle", { animate: __props.animate }]),
-            cx: radius,
-            cy: radius,
-            r: r.value,
-            "stroke-width": strokeWidth.value,
-            "stroke-dasharray": circumference.value,
-            "stroke-dashoffset": secondaryStrokeDashOffset.value,
-            fill: "transparent",
-            transform: transformWedge.value
-          }, null, 10, _hoisted_4$q)) : createCommentVNode("", true),
-          !disabled.value ? (openBlock(), createElementBlock("circle", {
-            key: 1,
-            class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
-            cx: radius,
-            cy: radius,
-            r: r.value,
-            "stroke-width": strokeWidth.value,
-            "stroke-dasharray": circumference.value,
-            "stroke-dashoffset": strokeDashOffset.value,
-            fill: "transparent",
-            transform: transformWedge.value
-          }, null, 10, _hoisted_5$g)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$H)),
-        __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
-          createElementVNode("div", _hoisted_7$3, toDisplayString(__props.title), 1),
-          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
+          createElementVNode("div", _hoisted_2$G, [
+            icon.value ? (openBlock(), createBlock(KdsIcon, {
+              key: 0,
+              name: icon.value,
+              class: "icon",
+              size: "xsmall"
+            }, null, 8, ["name"])) : createCommentVNode("", true)
+          ]),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
+            createElementVNode("div", _hoisted_4$p, toDisplayString(props.label), 1),
+            props.helperText ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              id: unref(helperId),
+              class: "helper-text"
+            }, toDisplayString(props.helperText), 9, _hoisted_5$g)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ], 10, _hoisted_1$14)), [
+          [unref(vKdsTooltip), props.tooltip]
+        ]),
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
+          createVNode(KdsSubText, {
+            id: unref(descriptionId),
+            "sub-text": props.subText,
+            "preserve-sub-text-space": props.preserveSubTextSpace,
+            error: __props.error
+          }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
         ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const KdsDonutChart = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-f5faf61c"]]);
-
-const _sfc_main$1D = {  };
-
-const _hoisted_1$14 = { class: "kds-divider" };
-
-function _sfc_render$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$14))
-}
-const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1D, [['render',_sfc_render$1],['__scopeId',"data-v-4d059bd3"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-cc0338d9"]]);
 
-const _hoisted_1$13 = {
-  key: 0,
-  class: "label"
-};
 const _sfc_main$1C = /* @__PURE__ */ defineComponent({
-  __name: "BaseButton",
-  props: {
-    dataTestId: {},
-    size: { default: "medium" },
+  __name: "KdsCheckbox",
+  props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
-    title: {},
-    variant: {},
-    label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {},
-    destructive: { type: Boolean, default: false },
-    success: { type: Boolean, default: false },
     error: { type: Boolean, default: false },
-    toggled: { type: Boolean, default: false },
-    removeBorderRadius: { default: () => void 0 },
-    component: { default: "button" }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = createPropsRestProxy(__props, ["component", "size", "destructive", "success", "error", "disabled", "toggled", "removeBorderRadius"]);
-    const emit = __emit;
-    const classes = computed(() => [
-      "button",
-      __props.size,
-      props.variant,
-      { destructive: __props.destructive },
-      { disabled: __props.disabled },
-      { toggled: __props.toggled },
-      { success: __props.success },
-      { error: __props.error },
-      __props.removeBorderRadius ? `remove-border-radius-${__props.removeBorderRadius}` : void 0
-    ]);
-    const iconSize = computed(() => {
-      if (__props.size === "xsmall") {
-        return "small";
-      } else {
-        return __props.size;
-      }
-    });
-    function onClick(e) {
-      if (!__props.disabled) {
-        emit("click", e);
-      }
-    }
-    return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createBlock(resolveDynamicComponent(__props.component), {
-        type: __props.component === "button" ? "button" : void 0,
-        class: normalizeClass(classes.value),
-        disabled: __props.disabled,
-        "aria-label": props.ariaLabel,
-        "data-test-id": props.dataTestId,
-        onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "leading", {}, () => [
-            props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
-              key: 0,
-              name: props.leadingIcon,
-              size: iconSize.value
-            }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-          ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$13, toDisplayString(props.label), 1)) : createCommentVNode("", true),
-          props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
-            key: 1,
-            name: props.trailingIcon,
-            size: iconSize.value
-          }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-        ]),
-        _: 3
-      }, 8, ["type", "class", "disabled", "aria-label", "data-test-id"])), [
-        [unref(vKdsTooltip), props.title]
-      ]);
-    };
-  }
-});
-
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-ee3f8b5d"]]);
-
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
-  __name: "KdsButton",
-  props: {
-    dataTestId: {},
-    size: {},
-    disabled: { type: Boolean },
-    title: {},
-    variant: { default: "filled" },
+    subText: {},
+    preserveSubTextSpace: { type: Boolean, default: false },
     label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {},
-    destructive: { type: Boolean }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = createPropsRestProxy(__props, ["variant"]);
-    const emit = __emit;
+    tooltip: {},
+    modelValue: {}
+  }, {
+    "modelValue": { default: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = createPropsRestProxy(__props, ["disabled", "error", "preserveSubTextSpace"]);
+    const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseButton, mergeProps(props, {
-        variant: __props.variant,
-        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16, ["variant"]);
+      return openBlock(), createBlock(BaseCheckbox, mergeProps(props, {
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        disabled: __props.disabled,
+        error: __props.error,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
+      }), null, 16, ["modelValue", "disabled", "error", "preserve-sub-text-space"]);
     };
   }
 });
 
-const getAppInstance = () => {
-  const currentInstance = getCurrentInstance();
-  return currentInstance?.appContext.app;
+const defaultCancelButton = {
+  type: "cancel",
+  label: "Cancel"
 };
-const resolveNuxtLinkComponent = () => {
-  const app = getAppInstance();
-  const nuxtLinkComponent = app?.component("NuxtLink");
-  if (nuxtLinkComponent) {
-    return nuxtLinkComponent;
-  }
-  const routerLinkComponent = app?.component("RouterLink");
-  if (routerLinkComponent) {
-    return routerLinkComponent;
-  }
-  const fallbackComponent = defineComponent({
-    props: {
-      to: {
-        type: String,
-        default: ""
-      }
-    },
-    render() {
-      return h$1("a", { href: this.to }, [useSlots().default?.()]);
-    }
+const defaultConfirmButton = {
+  type: "confirm",
+  label: "Confirm"
+};
+const isActive = ref(false);
+const activeModalConfig = ref(null);
+const unwrappedPromise = ref(createUnwrappedPromise());
+const resetInternalState = () => {
+  isActive.value = false;
+  unwrappedPromise.value = createUnwrappedPromise();
+};
+const onClosed = () => {
+  activeModalConfig.value = null;
+};
+const confirm = (doNotAskAgain = false) => {
+  unwrappedPromise.value.resolve({
+    confirmed: true,
+    doNotAskAgain
   });
-  return fallbackComponent;
+  resetInternalState();
 };
-
-function isExternalUrl(url) {
-  const normalized = url.trim();
-  if (!normalized) {
-    return false;
-  }
-  if (normalized.startsWith("#") || normalized.startsWith("/") && !normalized.startsWith("//") || normalized.startsWith("./") || normalized.startsWith("../") || normalized.startsWith("?")) {
-    return false;
+const close = () => {
+  const isConfirm = activeModalConfig.value?.type === "confirm";
+  unwrappedPromise.value.resolve(isConfirm ? { confirmed: false } : void 0);
+  resetInternalState();
+};
+const isTemplateBasedConfirm = (config) => {
+  return "component" in config;
+};
+const updateConfig = (config) => {
+  if (!isActive.value || !activeModalConfig.value || activeModalConfig.value.type === "confirm") {
+    consola.warn("useKdsDynamicModal: invalid invocation of updateConfig");
+    return;
   }
-  return true;
+  activeModalConfig.value.value = {
+    ...activeModalConfig.value.value,
+    ...config
+  };
+};
+const internal = {
+  confirm,
+  close,
+  isTemplateBasedConfirm,
+  onClosed,
+  updateConfig
+};
+function askConfirmation(config) {
+  activeModalConfig.value = {
+    type: "confirm",
+    value: {
+      buttons: [defaultCancelButton, defaultConfirmButton],
+      ...config
+    }
+  };
+  isActive.value = true;
+  return unwrappedPromise.value.promise;
 }
+const showByTemplate = (config) => {
+  activeModalConfig.value = {
+    type: "dynamic",
+    value: config
+  };
+  isActive.value = true;
+  return unwrappedPromise.value.promise;
+};
+const useKdsDynamicModal = () => {
+  return {
+    askConfirmation,
+    showByTemplate,
+    config: computed(() => activeModalConfig.value),
+    isActive: computed(() => isActive.value),
+    close: () => internal.close()
+  };
+};
 
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
-  __name: "KdsLinkButton",
-  props: {
-    dataTestId: {},
-    size: {},
-    disabled: { type: Boolean, default: false },
-    title: {},
-    variant: { default: "filled" },
-    label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {},
-    destructive: { type: Boolean },
-    to: {},
-    download: { type: Boolean, default: () => void 0 },
-    target: { default: null },
-    rel: { default: null }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const rawProps = createPropsRestProxy(__props, ["variant", "disabled", "download", "rel", "target"]);
-    const props = computed(() => {
-      if (isExternalUrl(rawProps.to)) {
-        return {
-          ...rawProps,
-          trailingIcon: "external-link"
-        };
+const _hoisted_1$13 = {
+  key: 1,
+  class: "confirmation"
+};
+const _hoisted_2$F = { class: "message" };
+const _hoisted_3$s = {
+  key: 0,
+  class: "ask-again"
+};
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+  __name: "KdsDynamicModalProvider",
+  setup(__props) {
+    const askAgain = ref(false);
+    const { config, isActive } = useKdsDynamicModal();
+    const reset = () => {
+      askAgain.value = false;
+    };
+    const onConfirm = () => {
+      internal.confirm(askAgain.value);
+      reset();
+    };
+    const onClose = () => {
+      internal.close();
+      reset();
+    };
+    const handleConfirmButton = (button) => {
+      if (!button.customHandler) {
+        const handler = button.type === "cancel" ? onClose : onConfirm;
+        handler();
+        return;
       }
-      return rawProps;
-    });
-    const component = computed(() => {
-      if (__props.disabled) {
-        return "button";
+      if (button.type === "cancel") {
+        button.customHandler({ cancel: onClose });
       }
-      return resolveNuxtLinkComponent();
+      if (button.type === "confirm") {
+        button.customHandler({ confirm: onConfirm });
+      }
+    };
+    const defaultVariant = (type) => type === "cancel" ? "transparent" : "filled";
+    const kdsModalProps = computed(() => {
+      if (!config.value) {
+        return {};
+      }
+      const { leadingIcon, headline, height, width, variant, overflow, closedby } = config.value.value;
+      return {
+        leadingIcon,
+        headline,
+        height,
+        width,
+        variant,
+        overflow,
+        closedby,
+        onClose,
+        onClosed: internal.onClosed,
+        active: isActive.value
+      };
     });
-    const emit = __emit;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseButton, mergeProps(props.value, {
-        variant: __props.variant,
-        disabled: __props.disabled,
-        download: __props.download,
-        rel: __props.rel,
-        target: __props.target,
-        component: component.value,
-        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16, ["variant", "disabled", "download", "rel", "target", "component"]);
+      return openBlock(), createBlock(KdsModal, mergeProps({ class: "confirm-modal" }, kdsModalProps.value), createSlots({ _: 2 }, [
+        unref(config)?.type === "confirm" ? {
+          name: "body",
+          fn: withCtx(() => [
+            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$13, [
+              createElementVNode("div", _hoisted_2$F, toDisplayString(unref(config).value.message), 1),
+              unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3$s, [
+                createVNode(_sfc_main$1C, {
+                  modelValue: askAgain.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
+                  label: unref(config).value.doNotAskAgain.label,
+                  "sub-text": unref(config).value.doNotAskAgain.subText
+                }, null, 8, ["modelValue", "label", "sub-text"])
+              ])) : createCommentVNode("", true)
+            ]))
+          ]),
+          key: "0"
+        } : void 0,
+        unref(config)?.type === "confirm" ? {
+          name: "footer",
+          fn: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
+              return openBlock(), createBlock(_sfc_main$1I, {
+                key: index,
+                destructive: button.destructive,
+                autofocus: button.autofocus,
+                label: button.label,
+                variant: button.variant ?? defaultVariant(button.type),
+                class: normalizeClass({ "flush-left": button.flushLeft }),
+                "data-test-id": `${button.type}-button`,
+                onClick: ($event) => handleConfirmButton(button)
+              }, null, 8, ["destructive", "autofocus", "label", "variant", "class", "data-test-id", "onClick"]);
+            }), 128))
+          ]),
+          key: "1"
+        } : void 0,
+        unref(config)?.type === "dynamic" ? {
+          name: "default",
+          fn: withCtx((slotProps) => [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), normalizeProps(guardReactiveProps({
+              ...slotProps,
+              context: unref(config).value.context,
+              updateConfig: unref(internal).updateConfig
+            })), null, 16))
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040);
     };
   }
 });
 
-const BYTE_UNITS = [
-	'B',
-	'kB',
-	'MB',
-	'GB',
-	'TB',
-	'PB',
-	'EB',
-	'ZB',
-	'YB',
-];
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-41fc8d84"]]);
 
-const BIBYTE_UNITS = [
-	'B',
-	'KiB',
-	'MiB',
-	'GiB',
-	'TiB',
-	'PiB',
-	'EiB',
-	'ZiB',
-	'YiB',
-];
-
-const BIT_UNITS = [
-	'b',
-	'kbit',
-	'Mbit',
-	'Gbit',
-	'Tbit',
-	'Pbit',
-	'Ebit',
-	'Zbit',
-	'Ybit',
-];
-
-const BIBIT_UNITS = [
-	'b',
-	'kibit',
-	'Mibit',
-	'Gibit',
-	'Tibit',
-	'Pibit',
-	'Eibit',
-	'Zibit',
-	'Yibit',
-];
-
-/*
-Formats the given number using `Number#toLocaleString`.
-- If locale is a string, the value is expected to be a locale-key (for example: `de`).
-- If locale is true, the system default locale is used for translation.
-- If no value for locale is specified, the number is returned unmodified.
-*/
-const toLocaleString = (number, locale, options) => {
-	let result = number;
-	if (typeof locale === 'string' || Array.isArray(locale)) {
-		result = number.toLocaleString(locale, options);
-	} else if (locale === true || options !== undefined) {
-		result = number.toLocaleString(undefined, options);
-	}
-
-	return result;
+const kdsPopoverPlacement = {
+  TOP_LEFT: "top-left",
+  TOP_CENTER: "top-center",
+  TOP_RIGHT: "top-right",
+  BOTTOM_LEFT: "bottom-left",
+  BOTTOM_CENTER: "bottom-center",
+  BOTTOM_RIGHT: "bottom-right",
+  CUSTOM: "custom"
 };
-
-const log10 = numberOrBigInt => {
-	if (typeof numberOrBigInt === 'number') {
-		return Math.log10(numberOrBigInt);
-	}
-
-	const string = numberOrBigInt.toString(10);
-
-	return string.length + Math.log10(`0.${string.slice(0, 15)}`);
+const kdsPopoverPlacements = Object.values(kdsPopoverPlacement);
+const kdsPopoverRole = {
+  DIALOG: "dialog",
+  MENU: "menu",
+  LISTBOX: "listbox"
 };
-
-const log = numberOrBigInt => {
-	if (typeof numberOrBigInt === 'number') {
-		return Math.log(numberOrBigInt);
-	}
-
-	return log10(numberOrBigInt) * Math.log(10);
+const kdsPopoverRoles = Object.values(kdsPopoverRole);
+const kdsPopoverType = {
+  AUTO: "auto",
+  MANUAL: "manual"
 };
+const kdsPopoverTypes = Object.values(kdsPopoverType);
 
-const divide = (numberOrBigInt, divisor) => {
-	if (typeof numberOrBigInt === 'number') {
-		return numberOrBigInt / divisor;
-	}
-
-	const integerPart = numberOrBigInt / BigInt(divisor);
-	const remainder = numberOrBigInt % BigInt(divisor);
-	return Number(integerPart) + (Number(remainder) / divisor);
+const _hoisted_1$12 = ["id", "popover", "role"];
+const _hoisted_2$E = {
+  key: 0,
+  class: "kds-popover-default-content"
 };
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+  __name: "KdsPopover",
+  props: /* @__PURE__ */ mergeModels({
+    modelValue: { type: Boolean },
+    role: {},
+    popoverType: { default: "auto" },
+    fullWidth: { type: Boolean, default: false },
+    maxInlineSize: { default: () => void 0 },
+    content: {},
+    placement: { default: "bottom-left" },
+    customPlacementPosition: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = createPropsRestProxy(__props, ["placement", "popoverType", "fullWidth", "maxInlineSize"]);
+    const open = useModel(__props, "modelValue");
+    const popoverEl = useTemplateRef("popoverEl");
+    const popoverId = useId();
+    const anchorName = `--anchor-${popoverId}`;
+    watchEffect(() => {
+      if (open.value) {
+        popoverEl.value?.showPopover?.();
+      } else {
+        popoverEl.value?.hidePopover?.();
+      }
+    });
+    const anchorStyle = __props.placement === kdsPopoverPlacement.CUSTOM ? {} : { "anchor-name": anchorName };
+    const onToggle = (event) => {
+      open.value = event.newState === "open";
+    };
+    __expose({ anchorStyle, popoverId });
+    const wrapperStyles = computed(() => {
+      if (__props.placement === kdsPopoverPlacement.CUSTOM && props.customPlacementPosition) {
+        return {
+          "max-inline-size": __props.maxInlineSize,
+          left: `${props.customPlacementPosition.x}px`,
+          top: `${props.customPlacementPosition.y}px`
+        };
+      }
+      return {
+        "position-anchor": anchorName,
+        "max-inline-size": __props.maxInlineSize
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: unref(popoverId),
+        ref_key: "popoverEl",
+        ref: popoverEl,
+        class: normalizeClass(["kds-popover", ["floating", __props.placement, { "full-width": __props.fullWidth }]]),
+        popover: __props.popoverType,
+        style: normalizeStyle(wrapperStyles.value),
+        role: props.role,
+        onToggle
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$E, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+        ], true)
+      ], 46, _hoisted_1$12);
+    };
+  }
+});
 
-const applyFixedWidth = (result, fixedWidth) => {
-	if (fixedWidth === undefined) {
-		return result;
-	}
-
-	if (typeof fixedWidth !== 'number' || !Number.isSafeInteger(fixedWidth) || fixedWidth < 0) {
-		throw new TypeError(`Expected fixedWidth to be a non-negative integer, got ${typeof fixedWidth}: ${fixedWidth}`);
-	}
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-3d51a946"]]);
 
-	if (fixedWidth === 0) {
-		return result;
-	}
+const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: KdsPopover
+}, Symbol.toStringTag, { value: 'Module' }));
 
-	return result.length < fixedWidth ? result.padStart(fixedWidth, ' ') : result;
-};
+const _hoisted_1$11 = ["data-width"];
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+  __name: "KdsSideDrawer",
+  props: {
+    isExpanded: { type: Boolean, default: false },
+    width: { default: "default" }
+  },
+  setup(__props) {
+    const drawerRef = useTemplateRef("drawer");
+    onMounted(() => {
+      watch(
+        () => __props.isExpanded,
+        (expanded) => {
+          if (expanded) {
+            drawerRef.value?.showPopover();
+          } else {
+            drawerRef.value?.hidePopover();
+          }
+        },
+        { immediate: true }
+      );
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref: "drawer",
+        popover: "manual",
+        class: "kds-side-drawer",
+        "data-width": __props.width
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 8, _hoisted_1$11);
+    };
+  }
+});
 
-const buildLocaleOptions = options => {
-	const {minimumFractionDigits, maximumFractionDigits} = options;
+const KdsSideDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-2ee82be5"]]);
 
-	if (minimumFractionDigits === undefined && maximumFractionDigits === undefined) {
-		return undefined;
-	}
+const kdsProgressBarSize = {
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+const kdsProgressBarSizes = Object.values(kdsProgressBarSize);
 
-	return {
-		...(minimumFractionDigits !== undefined && {minimumFractionDigits}),
-		...(maximumFractionDigits !== undefined && {maximumFractionDigits}),
-		roundingMode: 'trunc',
-	};
+const _hoisted_1$10 = {
+  key: 0,
+  class: "indeterminate-bar",
+  "aria-hidden": "true"
 };
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+  __name: "KdsProgressBar",
+  props: {
+    size: { default: () => kdsProgressBarSize.MEDIUM },
+    tooltip: { default: "" },
+    percentage: { default: 0 },
+    indeterminate: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const progressValue = computed(() => {
+      if (Number.isNaN(__props.percentage)) {
+        return 0;
+      }
+      return Math.min(Math.max(__props.percentage, 0), 100);
+    });
+    const tooltip = computed(() => {
+      const customTooltip = (__props.tooltip ?? "").trim();
+      if (customTooltip) {
+        return customTooltip;
+      }
+      return __props.indeterminate ? "Loading" : `Progress: ${progressValue.value}%`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "kds-progress-bar",
+          {
+            "kds-progress-bar-large": __props.size === unref(kdsProgressBarSize).LARGE,
+            "kds-progress-bar-medium": __props.size !== unref(kdsProgressBarSize).LARGE
+          }
+        ])
+      }, [
+        withDirectives(createElementVNode("progress", mergeProps({ class: "progress" }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16), [
+          [unref(vKdsTooltip), tooltip.value]
+        ]),
+        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_1$10)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
 
-function prettyBytes(number, options) {
-	if (typeof number !== 'bigint' && !Number.isFinite(number)) {
-		throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
-	}
+const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__scopeId", "data-v-a8563140"]]);
 
-	options = {
-		bits: false,
-		binary: false,
-		space: true,
-		nonBreakingSpace: false,
-		...options,
-	};
-
-	const UNITS = options.bits
-		? (options.binary ? BIBIT_UNITS : BIT_UNITS)
-		: (options.binary ? BIBYTE_UNITS : BYTE_UNITS);
-
-	const separator = options.space ? (options.nonBreakingSpace ? '\u00A0' : ' ') : '';
-
-	// Handle signed zero case
-	const isZero = typeof number === 'number' ? number === 0 : number === 0n;
-	if (options.signed && isZero) {
-		const result = ` 0${separator}${UNITS[0]}`;
-		return applyFixedWidth(result, options.fixedWidth);
-	}
-
-	const isNegative = number < 0;
-	const prefix = isNegative ? '-' : (options.signed ? '+' : '');
-
-	if (isNegative) {
-		number = -number;
-	}
-
-	const localeOptions = buildLocaleOptions(options);
-	let result;
-
-	if (number < 1) {
-		const numberString = toLocaleString(number, options.locale, localeOptions);
-		result = prefix + numberString + separator + UNITS[0];
-	} else {
-		const exponent = Math.min(Math.floor(options.binary ? log(number) / Math.log(1024) : log10(number) / 3), UNITS.length - 1);
-		number = divide(number, (options.binary ? 1024 : 1000) ** exponent);
-
-		if (!localeOptions) {
-			const minPrecision = Math.max(3, Math.floor(number).toString().length);
-			number = number.toPrecision(minPrecision);
-		}
-
-		const numberString = toLocaleString(Number(number), options.locale, localeOptions);
-		const unit = UNITS[exponent];
-		result = prefix + numberString + separator + unit;
-	}
-
-	return applyFixedWidth(result, options.fixedWidth);
-}
-
-const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
-
-const createUnwrappedPromise = () => {
-  let resolve = () => {
-  };
-  let reject = () => {
-  };
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { resolve, reject, promise };
-};
-
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-const getMetaOrCtrlKey = () => {
-  return isMac() ? "metaKey" : "ctrlKey";
-};
-
-const kdsModalClosedBy = {
-  ANY: "any",
-  CLOSEREQUEST: "closerequest",
-  NONE: "none"
+const kdsColorSwatchType = {
+  LEARNER: "learner",
+  MANIPULATOR: "manipulator",
+  PREDICTOR: "predictor",
+  SINK: "sink",
+  SOURCE: "source",
+  VISUALIZER: "visualizer",
+  OTHER: "other"
 };
-const kdsModalClosedByOptions = Object.values(kdsModalClosedBy);
-const kdsModalWidth = {
+const kdsColorSwatchTypes = Object.values(kdsColorSwatchType);
+const kdsColorSwatchSize = {
   SMALL: "small",
   MEDIUM: "medium",
-  LARGE: "large",
-  XLARGE: "xlarge",
-  FULL: "full"
-};
-const kdsModalWidthSizes = Object.values(kdsModalWidth);
-const kdsModalHeight = {
-  AUTO: "auto",
-  FULL: "full"
-};
-const kdsModalHeightSizes = Object.values(kdsModalHeight);
-const kdsModalVariant = {
-  PADDED: "padded",
-  PLAIN: "plain"
+  LARGE: "large"
 };
-const kdsModalVariants = Object.values(kdsModalVariant);
-({
-  variant: kdsModalVariant.PADDED});
-({
-  height: kdsModalHeight.AUTO,
-  width: kdsModalWidth.MEDIUM,
-  closedby: kdsModalClosedBy.CLOSEREQUEST});
+const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$12 = { class: "modal-header" };
-const _hoisted_2$G = { class: "modal-header-headline" };
-const _hoisted_3$t = ["data-variant"];
-const _hoisted_4$p = {
-  key: 0,
-  class: "modal-footer"
-};
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
-  ...{ inheritAttrs: false },
-  __name: "KdsModalLayout",
+const _hoisted_1$$ = ["role", "aria-hidden", "aria-label"];
+const RGBA_SHORT_HEX_LENGTH = 4;
+const RGBA_LONG_HEX_LENGTH = 8;
+const ALPHA_NIBBLE_INDEX = 3;
+const ALPHA_BYTE_START = 6;
+const RGB_SHORT_HEX_LENGTH = 3;
+const RGB_LONG_HEX_LENGTH = 6;
+const _sfc_main$1x = /* @__PURE__ */ defineComponent({
+  __name: "KdsColorSwatch",
   props: {
-    headline: { default: "" },
-    variant: { default: () => kdsModalVariant.PADDED },
-    leadingIcon: {},
-    overflow: { default: "auto" },
-    onClose: { type: Function }
+    color: {},
+    size: { default: () => kdsColorSwatchSize.SMALL },
+    tooltip: {}
   },
   setup(__props) {
-    useCssVars((_ctx) => ({
-      "v6361116e": _ctx.overflow
-    }));
-    const props = createPropsRestProxy(__props, ["headline", "variant", "overflow"]);
+    const props = createPropsRestProxy(__props, ["size"]);
+    const typeToTokenColor = {
+      learner: "var(--kds-color-nodes-and-variables-learner)",
+      manipulator: "var(--kds-color-nodes-and-variables-manipulator)",
+      predictor: "var(--kds-color-nodes-and-variables-predictor)",
+      sink: "var(--kds-color-nodes-and-variables-sink)",
+      source: "var(--kds-color-nodes-and-variables-source)",
+      visualizer: "var(--kds-color-nodes-and-variables-visualizer)",
+      other: "var(--kds-color-nodes-and-variables-other)"
+    };
+    const isKdsColorSwatchType = (value) => Object.hasOwn(typeToTokenColor, value);
+    const isTransparentAlphaHexColor = (value) => {
+      const withoutHash = value.startsWith("#") ? value.slice(1) : value;
+      if (withoutHash.length === RGBA_SHORT_HEX_LENGTH) {
+        return withoutHash[ALPHA_NIBBLE_INDEX].toLowerCase() !== "f";
+      }
+      if (withoutHash.length === RGBA_LONG_HEX_LENGTH) {
+        return withoutHash.slice(ALPHA_BYTE_START).toLowerCase() !== "ff";
+      }
+      return false;
+    };
+    const toOpaqueHexColor = (value) => {
+      const withoutHash = value.startsWith("#") ? value.slice(1) : value;
+      if (withoutHash.length === RGBA_SHORT_HEX_LENGTH) {
+        return `#${withoutHash.slice(0, RGB_SHORT_HEX_LENGTH)}`;
+      }
+      if (withoutHash.length === RGBA_LONG_HEX_LENGTH) {
+        return `#${withoutHash.slice(0, RGB_LONG_HEX_LENGTH)}`;
+      }
+      return value;
+    };
+    const backgroundColor = computed(() => {
+      if (isKdsColorSwatchType(props.color)) {
+        return typeToTokenColor[props.color];
+      }
+      return props.color;
+    });
+    const showAlphaPreview = computed(
+      () => !isKdsColorSwatchType(props.color) && isTransparentAlphaHexColor(props.color)
+    );
+    const swatchStyle = computed(() => {
+      if (!showAlphaPreview.value) {
+        return { backgroundColor: backgroundColor.value };
+      }
+      const opaqueColor = toOpaqueHexColor(props.color);
+      return {
+        backgroundImage: `
+      linear-gradient(to right, ${backgroundColor.value} 0 50%, ${opaqueColor} 50% 100%),
+      repeating-conic-gradient(
+        var(--kds-color-background-neutral-active) 0 25%,
+        var(--kds-color-surface-default) 0 50%
+      )
+    `,
+        backgroundSize: "100% 100%, var(--kds-color-swatch-checker-size) var(--kds-color-swatch-checker-size)",
+        backgroundPosition: "0 0, 0 0"
+      };
+    });
+    const accessibleTitle = computed(() => props.tooltip?.trim() ?? "");
+    const hasTitle = computed(() => accessibleTitle.value.length > 0);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("header", _hoisted_1$12, [
-          props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
-            key: 0,
-            name: props.leadingIcon,
-            size: "medium"
-          }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2$G, toDisplayString(__props.headline), 1),
-          createVNode(_sfc_main$1B, {
-            "leading-icon": "x-close",
-            variant: "transparent",
-            size: "medium",
-            title: "Close",
-            ariaLabel: "Close",
-            onClick: props.onClose
-          }, null, 8, ["onClick"])
-        ]),
-        createElementVNode("div", {
-          class: "modal-body",
-          "data-variant": __props.variant
-        }, [
-          renderSlot(_ctx.$slots, "body", {}, void 0, true)
-        ], 8, _hoisted_3$t),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$p, [
-          renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-        ])) : createCommentVNode("", true)
-      ], 64);
+      return withDirectives((openBlock(), createElementBlock("span", {
+        role: hasTitle.value ? "img" : "presentation",
+        class: normalizeClass(["kds-color-swatch", __props.size]),
+        style: normalizeStyle(swatchStyle.value),
+        "aria-hidden": hasTitle.value ? void 0 : "true",
+        "aria-label": hasTitle.value ? accessibleTitle.value : void 0
+      }, null, 14, _hoisted_1$$)), [
+        [unref(vKdsTooltip), hasTitle.value ? accessibleTitle.value : void 0]
+      ]);
     };
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-3b9d0ae0"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-dd4ddfb5"]]);
 
-const _hoisted_1$11 = ["closedby"];
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
-  __name: "KdsModal",
+const _hoisted_1$_ = ["aria-label"];
+const _hoisted_2$D = {
+  key: 0,
+  class: "label"
+};
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+  __name: "KdsLiveStatus",
   props: {
-    leadingIcon: {},
-    headline: { default: "" },
-    variant: { default: () => kdsModalVariant.PADDED },
-    width: { default: () => kdsModalWidth.MEDIUM },
-    height: { default: () => kdsModalHeight.AUTO },
-    active: { type: Boolean, default: false },
-    closedby: { default: () => kdsModalClosedBy.CLOSEREQUEST },
-    overflow: { default: "auto" }
+    status: { default: "red" },
+    size: { default: "medium" },
+    label: { default: "" },
+    tooltip: {}
   },
-  emits: ["close", "closed"],
-  setup(__props, { emit: __emit }) {
-    useCssVars((_ctx) => ({
-      "v8f271084": _ctx.overflow
-    }));
-    const emit = __emit;
-    const dialog = useTemplateRef("dialogElement");
-    const onClose = (event) => {
-      emit("close", event);
-    };
-    watch(
-      () => __props.active,
-      async (isActive) => {
-        if (isActive) {
-          await nextTick();
-          dialog.value?.showModal();
-        } else {
-          dialog.value?.close();
-        }
-      },
-      { immediate: true }
-    );
-    const renderDialog = ref(__props.active);
-    const removeDialog = () => {
-      if (!renderDialog.value) {
-        return;
-      }
-      renderDialog.value = false;
-      emit("closed");
-    };
-    watch(
-      () => __props.active,
-      async (value, lastValue) => {
-        if (value === false && lastValue === true) {
-          if (dialog.value) {
-            Promise.all(
-              dialog.value.getAnimations({ subtree: true }).map((animation) => animation.finished)
-            ).then(removeDialog).catch((error) => {
-              if (error.name === "AbortError") {
-                removeDialog();
-                return;
-              }
-              throw error;
-            });
-            await sleep(350);
-            removeDialog();
-          } else {
-            removeDialog();
-          }
-        } else {
-          renderDialog.value = value;
-        }
-      }
+  setup(__props) {
+    const props = createPropsRestProxy(__props, ["status", "size", "label"]);
+    const accessibleTitle = computed(
+      () => props.tooltip?.trim() || `Status is ${__props.status}`
     );
     return (_ctx, _cache) => {
-      return renderDialog.value ? (openBlock(), createElementBlock("dialog", {
-        key: 0,
-        ref: "dialogElement",
-        class: normalizeClass([
-          "kds-modal",
-          `width-${__props.width}`,
-          `height-${__props.height}`,
-          `overflow-${__props.overflow}`
-        ]),
-        closedby: __props.closedby,
-        onCancel: withModifiers(onClose, ["prevent"])
+      return withDirectives((openBlock(), createElementBlock("span", {
+        class: normalizeClass(["kds-live-status", __props.status, `size-${__props.size}`]),
+        role: "img",
+        "aria-label": accessibleTitle.value
       }, [
-        renderSlot(_ctx.$slots, "default", {
-          headline: __props.headline,
-          leadingIcon: __props.leadingIcon,
-          variant: __props.variant,
-          overflow: __props.overflow,
-          onClose
-        }, () => [
-          createVNode(KdsModalLayout, {
-            headline: __props.headline,
-            "leading-icon": __props.leadingIcon,
-            variant: __props.variant,
-            overflow: __props.overflow,
-            onClose
-          }, {
-            body: withCtx(() => [
-              renderSlot(_ctx.$slots, "body", {}, void 0, true)
-            ]),
-            footer: withCtx(() => [
-              renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-            ]),
-            _: 3
-          }, 8, ["headline", "leading-icon", "variant", "overflow"])
-        ], true)
-      ], 42, _hoisted_1$11)) : createCommentVNode("", true);
+        _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
+        __props.label ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$D, [
+          createTextVNode(toDisplayString(__props.label), 1)
+        ])), [
+          [unref(vKdsTooltip), __props.label, "truncated"]
+        ]) : createCommentVNode("", true)
+      ], 10, _hoisted_1$_)), [
+        [unref(vKdsTooltip), !__props.label ? accessibleTitle.value : void 0]
+      ]);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__scopeId", "data-v-1f306093"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-a158abc8"]]);
 
-const _hoisted_1$10 = ["id"];
-const _hoisted_2$F = { class: "subtext-text" };
-const _sfc_main$1x = /* @__PURE__ */ defineComponent({
-  __name: "KdsSubText",
+const kdsLiveStatusStatus = {
+  RED: "red",
+  ORANGE: "orange",
+  GREEN: "green",
+  DISABLED: "disabled"
+};
+const kdsLiveStatusStatuses = Object.values(kdsLiveStatusStatus);
+const kdsLiveStatusSize = {
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small"
+};
+const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
+
+const kdsLoadingSpinnerVariant = {
+  ON_PRIMARY: "onPrimary",
+  ON_SURFACE: "onSurface"
+};
+const kdsLoadingSpinnerVariants = Object.values(
+  kdsLoadingSpinnerVariant
+);
+
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
+  __name: "KdsMissingValueIcon",
   props: {
-    id: {},
-    subText: {},
-    error: { type: Boolean, default: false },
-    validating: { type: Boolean, default: false },
-    preserveSubTextSpace: { type: Boolean, default: false }
+    size: {}
   },
   setup(__props) {
-    const props = createPropsRestProxy(__props, ["error", "validating", "preserveSubTextSpace"]);
     return (_ctx, _cache) => {
-      return props.subText || __props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        id: props.id,
-        class: normalizeClass({
-          subtext: true,
-          error: __props.error
-        })
-      }, [
-        __props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
-          key: 0,
-          name: "circle-error",
-          size: "small",
-          "aria-label": "Error"
-        })) : __props.validating && props.subText ? (openBlock(), createBlock(KdsLoadingSpinner, {
-          key: 1,
-          size: "small",
-          variant: "onSurface",
-          "aria-hidden": "true"
-        })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$F, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$10)) : createCommentVNode("", true);
+      return openBlock(), createBlock(KdsIcon, {
+        name: "circle-question",
+        size: __props.size,
+        class: "kds-missing-value-icon"
+      }, null, 8, ["size"]);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-2e6ba10c"]]);
+const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["__scopeId", "data-v-df682150"]]);
 
-const _hoisted_1$$ = ["disabled", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$E = { class: "control" };
-const _hoisted_3$s = {
+const _hoisted_1$Z = { class: "donut-container" };
+const _hoisted_2$C = ["height", "width", "viewBox"];
+const _hoisted_3$r = ["r", "stroke-width"];
+const _hoisted_4$o = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_5$f = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_6$a = {
   key: 0,
-  class: "content"
+  class: "donut-text"
 };
-const _hoisted_4$o = { class: "label" };
-const _hoisted_5$f = ["id"];
-const _hoisted_6$a = {
+const _hoisted_7$3 = { class: "title" };
+const _hoisted_8$3 = {
   key: 0,
-  class: "subtext-wrapper"
+  class: "sub-text"
 };
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
-  __name: "BaseCheckbox",
-  props: /* @__PURE__ */ mergeModels({
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    subText: {},
-    preserveSubTextSpace: { type: Boolean },
+const radius = 22;
+const innerRadius = 10;
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
+  __name: "KdsDonutChart",
+  props: {
+    value: {},
+    secondaryValue: { default: 0 },
+    maxValue: {},
+    acceptValuesLargerThanMax: { type: Boolean, default: false },
+    animate: { type: Boolean, default: true },
     label: {},
-    title: {},
-    helperText: {}
-  }, {
-    "modelValue": { default: false },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
+    subText: {}
+  },
   setup(__props) {
-    const props = createPropsRestProxy(__props, ["disabled", "error"]);
-    const modelValue = useModel(__props, "modelValue");
-    const helperId = useId();
-    const descriptionId = useId();
-    const isChecked = computed(() => modelValue.value === true);
-    const isIndeterminate = computed(() => modelValue.value === "indeterminate");
-    const icon = computed(() => {
-      if (isChecked.value) {
-        return "checkmark";
-      }
-      if (isIndeterminate.value) {
-        return "minus";
-      }
-      return null;
-    });
-    const ariaChecked = computed(() => {
-      if (isIndeterminate.value) {
-        return "mixed";
-      }
-      return isChecked.value;
+    const clippedValue = computed(() => {
+      const clipValue = Math.max(0, __props.value);
+      return __props.acceptValuesLargerThanMax ? clipValue : Math.min(clipValue, __props.maxValue);
     });
-    const ariaDescribedBy = computed(() => {
-      const ids = [];
-      if (props.helperText) {
-        ids.push(helperId);
-      }
-      if (props.subText) {
-        ids.push(descriptionId);
-      }
-      return ids.length > 0 ? ids.join(" ") : void 0;
+    const secondaryClippedValue = computed(() => {
+      const clipValue = Math.max(0, __props.secondaryValue + clippedValue.value);
+      return __props.acceptValuesLargerThanMax ? clipValue : Math.min(clipValue, __props.maxValue);
     });
-    const handleClick = () => {
-      if (__props.disabled) {
-        return;
+    const strokeWidth = computed(() => radius - innerRadius);
+    const r = computed(() => radius - strokeWidth.value / 2);
+    const diameter = computed(() => 2 * radius);
+    const viewBox = computed(() => `0 0 ${diameter.value} ${diameter.value}`);
+    const circumference = computed(() => 2 * Math.PI * r.value);
+    const calcStrokeDashOffset = (value) => {
+      if (__props.maxValue <= 0 || !Number.isFinite(__props.maxValue)) {
+        return circumference.value;
       }
-      modelValue.value = isIndeterminate.value ? true : !isChecked.value;
+      const strokeDiff = Math.min(
+        value / __props.maxValue * circumference.value,
+        circumference.value
+      );
+      return Math.max(circumference.value - strokeDiff, 0);
     };
+    const strokeDashOffset = computed(
+      () => calcStrokeDashOffset(clippedValue.value)
+    );
+    const secondaryStrokeDashOffset = computed(
+      () => calcStrokeDashOffset(secondaryClippedValue.value)
+    );
+    const transformWedge = computed(() => `rotate(-90, ${radius}, ${radius})`);
+    const disabled = computed(() => !Number.isFinite(__props.maxValue));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        withDirectives((openBlock(), createElementBlock("button", {
-          class: normalizeClass({
-            checkbox: true,
-            checked: isChecked.value,
-            indeterminate: isIndeterminate.value,
-            disabled: __props.disabled,
-            error: __props.error
-          }),
-          disabled: __props.disabled,
-          "aria-label": props.title,
-          "aria-checked": ariaChecked.value,
-          "aria-describedby": ariaDescribedBy.value,
-          "aria-invalid": __props.error,
-          type: "button",
-          role: "checkbox",
-          onClick: handleClick
+      return openBlock(), createElementBlock("div", _hoisted_1$Z, [
+        (openBlock(), createElementBlock("svg", {
+          height: diameter.value,
+          width: diameter.value,
+          viewBox: viewBox.value,
+          class: "donut-chart"
         }, [
-          createElementVNode("div", _hoisted_2$E, [
-            icon.value ? (openBlock(), createBlock(KdsIcon, {
-              key: 0,
-              name: icon.value,
-              class: "icon",
-              size: "xsmall"
-            }, null, 8, ["name"])) : createCommentVNode("", true)
-          ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$s, [
-            createElementVNode("div", _hoisted_4$o, toDisplayString(props.label), 1),
-            props.helperText ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              id: unref(helperId),
-              class: "helper-text"
-            }, toDisplayString(props.helperText), 9, _hoisted_5$f)) : createCommentVNode("", true)
-          ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$$)), [
-          [unref(vKdsTooltip), props.title]
-        ]),
-        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$a, [
-          createVNode(KdsSubText, {
-            id: unref(descriptionId),
-            "sub-text": props.subText,
-            "preserve-sub-text-space": props.preserveSubTextSpace,
-            error: __props.error
-          }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
+          createElementVNode("circle", {
+            class: "background-circle",
+            cx: radius,
+            cy: radius,
+            r: r.value,
+            "stroke-width": strokeWidth.value,
+            fill: "transparent"
+          }, null, 8, _hoisted_3$r),
+          __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
+            key: 0,
+            class: normalizeClass(["value-wedge", "secondary-circle", { animate: __props.animate }]),
+            cx: radius,
+            cy: radius,
+            r: r.value,
+            "stroke-width": strokeWidth.value,
+            "stroke-dasharray": circumference.value,
+            "stroke-dashoffset": secondaryStrokeDashOffset.value,
+            fill: "transparent",
+            transform: transformWedge.value
+          }, null, 10, _hoisted_4$o)) : createCommentVNode("", true),
+          !disabled.value ? (openBlock(), createElementBlock("circle", {
+            key: 1,
+            class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
+            cx: radius,
+            cy: radius,
+            r: r.value,
+            "stroke-width": strokeWidth.value,
+            "stroke-dasharray": circumference.value,
+            "stroke-dashoffset": strokeDashOffset.value,
+            fill: "transparent",
+            transform: transformWedge.value
+          }, null, 10, _hoisted_5$f)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$C)),
+        __props.label ? (openBlock(), createElementBlock("div", _hoisted_6$a, [
+          createElementVNode("div", _hoisted_7$3, toDisplayString(__props.label), 1),
+          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$3, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-5138a023"]]);
+const KdsDonutChart = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["__scopeId", "data-v-3cea3ddf"]]);
 
-const _sfc_main$1v = /* @__PURE__ */ defineComponent({
-  __name: "KdsCheckbox",
-  props: /* @__PURE__ */ mergeModels({
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    subText: {},
-    preserveSubTextSpace: { type: Boolean, default: false },
-    label: {},
-    title: {},
-    modelValue: {}
-  }, {
-    "modelValue": { default: false },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = createPropsRestProxy(__props, ["disabled", "error", "preserveSubTextSpace"]);
-    const modelValue = useModel(__props, "modelValue");
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseCheckbox, mergeProps(props, {
-        modelValue: modelValue.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-        disabled: __props.disabled,
-        error: __props.error,
-        "preserve-sub-text-space": __props.preserveSubTextSpace
-      }), null, 16, ["modelValue", "disabled", "error", "preserve-sub-text-space"]);
-    };
-  }
-});
+const _sfc_main$1t = {  };
 
-const defaultCancelButton = {
-  type: "cancel",
-  label: "Cancel"
-};
-const defaultConfirmButton = {
-  type: "confirm",
-  label: "Confirm"
-};
-const isActive = ref(false);
-const activeModalConfig = ref(null);
-const unwrappedPromise = ref(createUnwrappedPromise());
-const resetInternalState = () => {
-  isActive.value = false;
-  unwrappedPromise.value = createUnwrappedPromise();
-};
-const onClosed = () => {
-  activeModalConfig.value = null;
-};
-const confirm = (doNotAskAgain = false) => {
-  unwrappedPromise.value.resolve({
-    confirmed: true,
-    doNotAskAgain
-  });
-  resetInternalState();
-};
-const close = () => {
-  const isConfirm = activeModalConfig.value?.type === "confirm";
-  unwrappedPromise.value.resolve(isConfirm ? { confirmed: false } : void 0);
-  resetInternalState();
-};
-const isTemplateBasedConfirm = (config) => {
-  return "component" in config;
+const _hoisted_1$Y = { class: "kds-divider" };
+
+function _sfc_render$1(_ctx, _cache) {
+  return (openBlock(), createElementBlock("hr", _hoisted_1$Y))
+}
+const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1t, [['render',_sfc_render$1],['__scopeId',"data-v-4d059bd3"]]);
+
+const getAppInstance = () => {
+  const currentInstance = getCurrentInstance();
+  return currentInstance?.appContext.app;
 };
-const updateConfig = (config) => {
-  if (!isActive.value || !activeModalConfig.value || activeModalConfig.value.type === "confirm") {
-    consola.warn("useKdsDynamicModal: invalid invocation of updateConfig");
-    return;
+const resolveNuxtLinkComponent = () => {
+  const app = getAppInstance();
+  const nuxtLinkComponent = app?.component("NuxtLink");
+  if (nuxtLinkComponent) {
+    return nuxtLinkComponent;
   }
-  activeModalConfig.value.value = {
-    ...activeModalConfig.value.value,
-    ...config
-  };
-};
-const internal = {
-  confirm,
-  close,
-  isTemplateBasedConfirm,
-  onClosed,
-  updateConfig
-};
-function askConfirmation(config) {
-  activeModalConfig.value = {
-    type: "confirm",
-    value: {
-      buttons: [defaultCancelButton, defaultConfirmButton],
-      ...config
+  const routerLinkComponent = app?.component("RouterLink");
+  if (routerLinkComponent) {
+    return routerLinkComponent;
+  }
+  const fallbackComponent = defineComponent({
+    props: {
+      to: {
+        type: String,
+        default: ""
+      }
+    },
+    render() {
+      return h$1("a", { href: this.to }, [useSlots().default?.()]);
     }
-  };
-  isActive.value = true;
-  return unwrappedPromise.value.promise;
-}
-const showByTemplate = (config) => {
-  activeModalConfig.value = {
-    type: "dynamic",
-    value: config
-  };
-  isActive.value = true;
-  return unwrappedPromise.value.promise;
-};
-const useKdsDynamicModal = () => {
-  return {
-    askConfirmation,
-    showByTemplate,
-    config: computed(() => activeModalConfig.value),
-    isActive: computed(() => isActive.value),
-    close: () => internal.close()
-  };
+  });
+  return fallbackComponent;
 };
 
-const _hoisted_1$_ = {
-  key: 1,
-  class: "confirmation"
-};
-const _hoisted_2$D = { class: "message" };
-const _hoisted_3$r = {
-  key: 0,
-  class: "ask-again"
-};
-const _sfc_main$1u = /* @__PURE__ */ defineComponent({
-  __name: "KdsDynamicModalProvider",
-  setup(__props) {
-    const askAgain = ref(false);
-    const { config, isActive } = useKdsDynamicModal();
-    const reset = () => {
-      askAgain.value = false;
-    };
-    const onConfirm = () => {
-      internal.confirm(askAgain.value);
-      reset();
-    };
-    const onClose = () => {
-      internal.close();
-      reset();
-    };
-    const handleConfirmButton = (button) => {
-      if (!button.customHandler) {
-        const handler = button.type === "cancel" ? onClose : onConfirm;
-        handler();
-        return;
-      }
-      if (button.type === "cancel") {
-        button.customHandler({ cancel: onClose });
-      }
-      if (button.type === "confirm") {
-        button.customHandler({ confirm: onConfirm });
-      }
-    };
-    const defaultVariant = (type) => type === "cancel" ? "transparent" : "filled";
-    const kdsModalProps = computed(() => {
-      if (!config.value) {
-        return {};
-      }
-      const { leadingIcon, headline, height, width, variant, overflow, closedby } = config.value.value;
-      return {
-        leadingIcon,
-        headline,
-        height,
-        width,
-        variant,
-        overflow,
-        closedby,
-        onClose,
-        onClosed: internal.onClosed,
-        active: isActive.value
-      };
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(KdsModal, mergeProps({ class: "confirm-modal" }, kdsModalProps.value), createSlots({ _: 2 }, [
-        unref(config)?.type === "confirm" ? {
-          name: "body",
-          fn: withCtx(() => [
-            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$_, [
-              createElementVNode("div", _hoisted_2$D, toDisplayString(unref(config).value.message), 1),
-              unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3$r, [
-                createVNode(_sfc_main$1v, {
-                  modelValue: askAgain.value,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
-                  label: unref(config).value.doNotAskAgain.label,
-                  "sub-text": unref(config).value.doNotAskAgain.subText
-                }, null, 8, ["modelValue", "label", "sub-text"])
-              ])) : createCommentVNode("", true)
-            ]))
-          ]),
-          key: "0"
-        } : void 0,
-        unref(config)?.type === "confirm" ? {
-          name: "footer",
-          fn: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$1B, {
-                key: index,
-                destructive: button.destructive,
-                autofocus: button.autofocus,
-                label: button.label,
-                variant: button.variant ?? defaultVariant(button.type),
-                class: normalizeClass({ "flush-left": button.flushLeft }),
-                "data-test-id": `${button.type}-button`,
-                onClick: ($event) => handleConfirmButton(button)
-              }, null, 8, ["destructive", "autofocus", "label", "variant", "class", "data-test-id", "onClick"]);
-            }), 128))
-          ]),
-          key: "1"
-        } : void 0,
-        unref(config)?.type === "dynamic" ? {
-          name: "default",
-          fn: withCtx((slotProps) => [
-            (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), normalizeProps(guardReactiveProps({
-              ...slotProps,
-              context: unref(config).value.context,
-              updateConfig: unref(internal).updateConfig
-            })), null, 16))
-          ]),
-          key: "2"
-        } : void 0
-      ]), 1040);
-    };
+function isExternalUrl(url) {
+  const normalized = url.trim();
+  if (!normalized) {
+    return false;
   }
-});
-
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["__scopeId", "data-v-41fc8d84"]]);
-
-const kdsPopoverPlacement = {
-  TOP_LEFT: "top-left",
-  TOP_CENTER: "top-center",
-  TOP_RIGHT: "top-right",
-  BOTTOM_LEFT: "bottom-left",
-  BOTTOM_CENTER: "bottom-center",
-  BOTTOM_RIGHT: "bottom-right",
-  CUSTOM: "custom"
-};
-const kdsPopoverPlacements = Object.values(kdsPopoverPlacement);
-const kdsPopoverRole = {
-  DIALOG: "dialog",
-  MENU: "menu",
-  LISTBOX: "listbox"
-};
-const kdsPopoverRoles = Object.values(kdsPopoverRole);
-const kdsPopoverType = {
-  AUTO: "auto",
-  MANUAL: "manual"
-};
-const kdsPopoverTypes = Object.values(kdsPopoverType);
+  if (normalized.startsWith("#") || normalized.startsWith("/") && !normalized.startsWith("//") || normalized.startsWith("./") || normalized.startsWith("../") || normalized.startsWith("?")) {
+    return false;
+  }
+  return true;
+}
 
-const _hoisted_1$Z = ["id", "popover", "role"];
-const _hoisted_2$C = {
-  key: 0,
-  class: "kds-popover-default-content"
-};
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
-  __name: "KdsPopover",
-  props: /* @__PURE__ */ mergeModels({
-    modelValue: { type: Boolean },
-    role: {},
-    popoverType: { default: "auto" },
-    fullWidth: { type: Boolean, default: false },
-    maxInlineSize: { default: () => void 0 },
-    content: {},
-    placement: { default: "bottom-left" },
-    customPlacementPosition: {}
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
-    const props = createPropsRestProxy(__props, ["placement", "popoverType", "fullWidth", "maxInlineSize"]);
-    const open = useModel(__props, "modelValue");
-    const popoverEl = useTemplateRef("popoverEl");
-    const popoverId = useId();
-    const anchorName = `--anchor-${popoverId}`;
-    watchEffect(() => {
-      if (open.value) {
-        popoverEl.value?.showPopover?.();
-      } else {
-        popoverEl.value?.hidePopover?.();
-      }
-    });
-    const anchorStyle = __props.placement === kdsPopoverPlacement.CUSTOM ? {} : { "anchor-name": anchorName };
-    const onToggle = (event) => {
-      open.value = event.newState === "open";
-    };
-    __expose({ anchorStyle, popoverId });
-    const wrapperStyles = computed(() => {
-      if (__props.placement === kdsPopoverPlacement.CUSTOM && props.customPlacementPosition) {
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+  __name: "KdsLinkButton",
+  props: {
+    dataTestId: {},
+    size: {},
+    disabled: { type: Boolean, default: false },
+    tooltip: {},
+    variant: { default: "filled" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    destructive: { type: Boolean },
+    to: {},
+    download: { type: Boolean, default: () => void 0 },
+    target: { default: null },
+    rel: { default: null }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const rawProps = createPropsRestProxy(__props, ["variant", "disabled", "download", "rel", "target"]);
+    const props = computed(() => {
+      if (isExternalUrl(rawProps.to)) {
         return {
-          "max-inline-size": __props.maxInlineSize,
-          left: `${props.customPlacementPosition.x}px`,
-          top: `${props.customPlacementPosition.y}px`
+          ...rawProps,
+          trailingIcon: "external-link"
         };
       }
-      return {
-        "position-anchor": anchorName,
-        "max-inline-size": __props.maxInlineSize
-      };
+      return rawProps;
+    });
+    const component = computed(() => {
+      if (__props.disabled) {
+        return "button";
+      }
+      return resolveNuxtLinkComponent();
     });
+    const emit = __emit;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: unref(popoverId),
-        ref_key: "popoverEl",
-        ref: popoverEl,
-        class: normalizeClass(["kds-popover", ["floating", __props.placement, { "full-width": __props.fullWidth }]]),
-        popover: __props.popoverType,
-        style: normalizeStyle(wrapperStyles.value),
-        role: props.role,
-        onToggle
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$C, toDisplayString(props.content), 1)) : createCommentVNode("", true)
-        ], true)
-      ], 46, _hoisted_1$Z);
+      return openBlock(), createBlock(BaseButton, mergeProps(props.value, {
+        variant: __props.variant,
+        disabled: __props.disabled,
+        download: __props.download,
+        rel: __props.rel,
+        target: __props.target,
+        component: component.value,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+      }), null, 16, ["variant", "disabled", "download", "rel", "target", "component"]);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-3d51a946"]]);
+const BYTE_UNITS = [
+	'B',
+	'kB',
+	'MB',
+	'GB',
+	'TB',
+	'PB',
+	'EB',
+	'ZB',
+	'YB',
+];
 
-const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  default: KdsPopover
-}, Symbol.toStringTag, { value: 'Module' }));
+const BIBYTE_UNITS = [
+	'B',
+	'KiB',
+	'MiB',
+	'GiB',
+	'TiB',
+	'PiB',
+	'EiB',
+	'ZiB',
+	'YiB',
+];
 
-const _hoisted_1$Y = ["data-width"];
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
-  __name: "KdsSideDrawer",
-  props: {
-    isExpanded: { type: Boolean, default: false },
-    width: { default: "default" }
-  },
-  setup(__props) {
-    const drawerRef = useTemplateRef("drawer");
-    onMounted(() => {
-      watch(
-        () => __props.isExpanded,
-        (expanded) => {
-          if (expanded) {
-            drawerRef.value?.showPopover();
-          } else {
-            drawerRef.value?.hidePopover();
-          }
-        },
-        { immediate: true }
-      );
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref: "drawer",
-        popover: "manual",
-        class: "kds-side-drawer",
-        "data-width": __props.width
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 8, _hoisted_1$Y);
-    };
-  }
-});
+const BIT_UNITS = [
+	'b',
+	'kbit',
+	'Mbit',
+	'Gbit',
+	'Tbit',
+	'Pbit',
+	'Ebit',
+	'Zbit',
+	'Ybit',
+];
+
+const BIBIT_UNITS = [
+	'b',
+	'kibit',
+	'Mibit',
+	'Gibit',
+	'Tibit',
+	'Pibit',
+	'Eibit',
+	'Zibit',
+	'Yibit',
+];
+
+/*
+Formats the given number using `Number#toLocaleString`.
+- If locale is a string, the value is expected to be a locale-key (for example: `de`).
+- If locale is true, the system default locale is used for translation.
+- If no value for locale is specified, the number is returned unmodified.
+*/
+const toLocaleString = (number, locale, options) => {
+	let result = number;
+	if (typeof locale === 'string' || Array.isArray(locale)) {
+		result = number.toLocaleString(locale, options);
+	} else if (locale === true || options !== undefined) {
+		result = number.toLocaleString(undefined, options);
+	}
+
+	return result;
+};
+
+const log10 = numberOrBigInt => {
+	if (typeof numberOrBigInt === 'number') {
+		return Math.log10(numberOrBigInt);
+	}
+
+	const string = numberOrBigInt.toString(10);
+
+	return string.length + Math.log10(`0.${string.slice(0, 15)}`);
+};
+
+const log = numberOrBigInt => {
+	if (typeof numberOrBigInt === 'number') {
+		return Math.log(numberOrBigInt);
+	}
+
+	return log10(numberOrBigInt) * Math.log(10);
+};
+
+const divide = (numberOrBigInt, divisor) => {
+	if (typeof numberOrBigInt === 'number') {
+		return numberOrBigInt / divisor;
+	}
+
+	const integerPart = numberOrBigInt / BigInt(divisor);
+	const remainder = numberOrBigInt % BigInt(divisor);
+	return Number(integerPart) + (Number(remainder) / divisor);
+};
+
+const applyFixedWidth = (result, fixedWidth) => {
+	if (fixedWidth === undefined) {
+		return result;
+	}
+
+	if (typeof fixedWidth !== 'number' || !Number.isSafeInteger(fixedWidth) || fixedWidth < 0) {
+		throw new TypeError(`Expected fixedWidth to be a non-negative integer, got ${typeof fixedWidth}: ${fixedWidth}`);
+	}
+
+	if (fixedWidth === 0) {
+		return result;
+	}
+
+	return result.length < fixedWidth ? result.padStart(fixedWidth, ' ') : result;
+};
+
+const buildLocaleOptions = options => {
+	const {minimumFractionDigits, maximumFractionDigits} = options;
+
+	if (minimumFractionDigits === undefined && maximumFractionDigits === undefined) {
+		return undefined;
+	}
+
+	return {
+		...(minimumFractionDigits !== undefined && {minimumFractionDigits}),
+		...(maximumFractionDigits !== undefined && {maximumFractionDigits}),
+		roundingMode: 'trunc',
+	};
+};
+
+function prettyBytes(number, options) {
+	if (typeof number !== 'bigint' && !Number.isFinite(number)) {
+		throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
+	}
+
+	options = {
+		bits: false,
+		binary: false,
+		space: true,
+		nonBreakingSpace: false,
+		...options,
+	};
+
+	const UNITS = options.bits
+		? (options.binary ? BIBIT_UNITS : BIT_UNITS)
+		: (options.binary ? BIBYTE_UNITS : BYTE_UNITS);
+
+	const separator = options.space ? (options.nonBreakingSpace ? '\u00A0' : ' ') : '';
+
+	// Handle signed zero case
+	const isZero = typeof number === 'number' ? number === 0 : number === 0n;
+	if (options.signed && isZero) {
+		const result = ` 0${separator}${UNITS[0]}`;
+		return applyFixedWidth(result, options.fixedWidth);
+	}
+
+	const isNegative = number < 0;
+	const prefix = isNegative ? '-' : (options.signed ? '+' : '');
+
+	if (isNegative) {
+		number = -number;
+	}
+
+	const localeOptions = buildLocaleOptions(options);
+	let result;
+
+	if (number < 1) {
+		const numberString = toLocaleString(number, options.locale, localeOptions);
+		result = prefix + numberString + separator + UNITS[0];
+	} else {
+		const exponent = Math.min(Math.floor(options.binary ? log(number) / Math.log(1024) : log10(number) / 3), UNITS.length - 1);
+		number = divide(number, (options.binary ? 1024 : 1000) ** exponent);
 
-const KdsSideDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["__scopeId", "data-v-2ee82be5"]]);
+		if (!localeOptions) {
+			const minPrecision = Math.max(3, Math.floor(number).toString().length);
+			number = number.toPrecision(minPrecision);
+		}
+
+		const numberString = toLocaleString(Number(number), options.locale, localeOptions);
+		const unit = UNITS[exponent];
+		result = prefix + numberString + separator + unit;
+	}
+
+	return applyFixedWidth(result, options.fixedWidth);
+}
 
 const _hoisted_1$X = { class: "label" };
 const _hoisted_2$B = {
@@ -2576,7 +2572,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     dataTestId: {},
     size: {},
     disabled: { type: Boolean },
-    title: {},
+    tooltip: {},
     variant: { default: "outlined" },
     label: {},
     leadingIcon: {},
@@ -2616,7 +2612,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
     dataTestId: {},
     size: { default: "medium" },
     disabled: { type: Boolean, default: false },
-    title: {},
+    tooltip: {},
     variant: { default: "filled" },
     state: {},
     label: {},
@@ -2652,8 +2648,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
       size: __props.size,
       disabled: __props.disabled,
       success: state.value === "success",
-      error: state.value === "error",
-      title: props.ariaLabel
+      error: state.value === "error"
     }));
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseButton, mergeProps(baseButtonProps.value, {
@@ -2691,7 +2686,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-ca9c134c"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a639a0ef"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -2939,16 +2934,16 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return props.accessory.type === "avatar" ? (openBlock(), createBlock(KdsAvatar, {
         key: 0,
-        title: props.accessory.title,
+        tooltip: props.accessory.tooltip,
         src: props.accessory.src,
         initials: props.accessory.initials,
         size: props.size
-      }, null, 8, ["title", "src", "initials", "size"])) : props.accessory.type === "colorSwatch" ? (openBlock(), createBlock(KdsColorSwatch, {
+      }, null, 8, ["tooltip", "src", "initials", "size"])) : props.accessory.type === "colorSwatch" ? (openBlock(), createBlock(KdsColorSwatch, {
         key: 1,
         color: props.accessory.color,
-        title: props.accessory.title,
+        tooltip: props.accessory.tooltip,
         size: props.size
-      }, null, 8, ["color", "title", "size"])) : props.accessory.type === "icon" ? (openBlock(), createBlock(KdsIcon, {
+      }, null, 8, ["color", "tooltip", "size"])) : props.accessory.type === "icon" ? (openBlock(), createBlock(KdsIcon, {
         key: 2,
         name: props.accessory.name,
         size: props.size,
@@ -2961,9 +2956,9 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
       }, null, 8, ["icon-name", "size", "disabled"])) : props.accessory.type === "liveStatus" ? (openBlock(), createBlock(unref(KdsLiveStatus), {
         key: 4,
         status: props.accessory.status,
-        title: props.accessory.title,
+        tooltip: props.accessory.tooltip,
         size: props.size
-      }, null, 8, ["status", "title", "size"])) : createCommentVNode("", true);
+      }, null, 8, ["status", "tooltip", "size"])) : createCommentVNode("", true);
     };
   }
 });
@@ -3556,7 +3551,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     dataTestId: {},
     size: {},
     disabled: { type: Boolean },
-    title: {},
+    tooltip: {},
     variant: { default: "outlined" },
     label: {},
     leadingIcon: {},
@@ -3650,7 +3645,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     dataTestId: {},
     size: { default: "medium" },
     disabled: { type: Boolean },
-    title: {},
+    tooltip: {},
     variant: { default: "filled" },
     label: {},
     leadingIcon: {},
@@ -3754,8 +3749,8 @@ const kdsActionButtonType = {
 const kdsActionButtonTypes = Object.values(kdsActionButtonType);
 
 const typeToComponent = {
-  KdsButton: _sfc_main$1B,
-  KdsLinkButton: _sfc_main$1A,
+  KdsButton: _sfc_main$1I,
+  KdsLinkButton: _sfc_main$1s,
   KdsSplitButton,
   KdsMenuButton: _sfc_main$1j,
   KdsProgressButton,
@@ -3769,7 +3764,7 @@ const iconOnlyBindings = (entry, leadingIcon, ariaLabel) => {
     label: _label,
     trailingIcon: _trailingIcon,
     ariaLabel: _ariaLabel,
-    title,
+    tooltip,
     leadingIcon: _leadingIcon,
     ...rest
   } = entry.meta;
@@ -3777,7 +3772,7 @@ const iconOnlyBindings = (entry, leadingIcon, ariaLabel) => {
     ...rest,
     leadingIcon,
     ariaLabel,
-    title: title ?? ariaLabel
+    tooltip: tooltip ?? ariaLabel
   };
 };
 const hasLeadingIcon = (entry) => "leadingIcon" in entry.meta && Boolean(entry.meta.leadingIcon);
@@ -4107,13 +4102,13 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$1A : _sfc_main$1B
+      () => isLinkButton.value ? _sfc_main$1s : _sfc_main$1I
     );
     const isSecondaryLinkButton = computed(
       () => props.secondaryButton && "to" in props.secondaryButton && props.secondaryButton.to !== void 0
     );
     const secondaryButtonComponent = computed(
-      () => isSecondaryLinkButton.value ? _sfc_main$1A : _sfc_main$1B
+      () => isSecondaryLinkButton.value ? _sfc_main$1s : _sfc_main$1I
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -5499,14 +5494,14 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
           }),
           "aria-disabled": __props.disabled || void 0
         }, toDisplayString(props.unit), 11, _hoisted_4$l)) : createCommentVNode("", true),
-        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1B, {
+        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1I, {
           key: 3,
           class: "clear-button",
           size: "xsmall",
           variant: "transparent",
           "leading-icon": "x-close",
           ariaLabel: "Clear",
-          title: "Clear",
+          tooltip: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
         _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
@@ -5522,7 +5517,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-3455a62d"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-829e352d"]]);
 
 const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
@@ -13422,7 +13417,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_3$l, [
             createElementVNode("span", _hoisted_4$j, toDisplayString(props.headline), 1)
           ]),
-          __props.trailingButton ? (openBlock(), createBlock(_sfc_main$1B, normalizeProps(mergeProps({ key: 2 }, trailingButtonProps.value)), null, 16)) : createCommentVNode("", true)
+          __props.trailingButton ? (openBlock(), createBlock(_sfc_main$1I, normalizeProps(mergeProps({ key: 2 }, trailingButtonProps.value)), null, 16)) : createCommentVNode("", true)
         ]),
         withDirectives(createElementVNode("div", {
           id: bodyId,
@@ -13460,7 +13455,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           [vShow, expanded.value]
         ]),
         createElementVNode("footer", _hoisted_6$6, [
-          createVNode(_sfc_main$1B, {
+          createVNode(_sfc_main$1I, {
             class: "kds-preview-list-toggle",
             label: expanded.value ? "Hide all" : "Show all",
             "trailing-icon": expanded.value ? "chevron-up" : "chevron-down",
@@ -14019,7 +14014,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     text: {},
     leadingIcon: {},
     trailingIcon: {},
-    title: {}
+    tooltip: {}
   },
   setup(__props) {
     const props = createPropsRestProxy(__props, ["disabled", "size", "variant", "tabIndex"]);
@@ -14027,7 +14022,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       return withDirectives((openBlock(), createElementBlock("button", {
         role: "radio",
         "aria-checked": props.selected,
-        "aria-label": props.text ? void 0 : props.title,
+        "aria-label": props.text ? void 0 : props.tooltip,
         class: normalizeClass({
           option: true,
           selected: props.selected,
@@ -14054,13 +14049,13 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
           size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
       ], 10, _hoisted_1$G)), [
-        [unref(vKdsTooltip), props.title || void 0]
+        [unref(vKdsTooltip), props.tooltip || void 0]
       ]);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-158bc82b"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-4ef3315b"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -14579,7 +14574,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$1B, {
+              createVNode(_sfc_main$1I, {
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "minus",
@@ -14591,7 +14586,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
                 onPointerleave: stopRepeating,
                 onPointercancel: stopRepeating
               }, null, 8, ["ariaLabel", "disabled"]),
-              createVNode(_sfc_main$1B, {
+              createVNode(_sfc_main$1I, {
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "plus",
@@ -15250,8 +15245,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
                   "aria-controls": popoverEl.value?.popoverId,
                   "aria-haspopup": "dialog",
                   disabled: __props.disabled,
-                  title: open.value ? "Close color picker" : "Open color picker"
-                }, null, 8, ["modelValue", "aria-controls", "disabled", "title"])
+                  tooltip: open.value ? "Close color picker" : "Open color picker"
+                }, null, 8, ["modelValue", "aria-controls", "disabled", "tooltip"])
               ]),
               _: 1
             }, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"]),
@@ -15351,13 +15346,13 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 size: "xsmall",
                 "leading-icon": "eye",
                 ariaLabel: showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
-                title: showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
+                tooltip: showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
                 disabled: __props.disabled,
                 onPointerdown: _cache[1] || (_cache[1] = ($event) => preventBlurFromToggle.value = true),
                 onPointerup: _cache[2] || (_cache[2] = ($event) => preventBlurFromToggle.value = false),
                 onPointercancel: _cache[3] || (_cache[3] = ($event) => preventBlurFromToggle.value = false),
                 onClick: _cache[4] || (_cache[4] = ($event) => preventBlurFromToggle.value = false)
-              }, null, 8, ["modelValue", "ariaLabel", "title", "disabled"])) : createCommentVNode("", true)
+              }, null, 8, ["modelValue", "ariaLabel", "tooltip", "disabled"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 16, ["modelValue", "type", "leading-icon", "placeholder", "disabled", "error", "autocomplete"])
@@ -20341,7 +20336,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$A, [
         createElementVNode("div", _hoisted_2$k, [
           createElementVNode("div", _hoisted_3$f, [
-            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1B, {
+            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1I, {
               key: 0,
               variant: "transparent",
               size: "small",
@@ -20350,7 +20345,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               disabled: prevYearDisabled.value,
               onClick: onPrevYear
             }, null, 8, ["disabled"])) : createCommentVNode("", true),
-            createVNode(_sfc_main$1B, {
+            createVNode(_sfc_main$1I, {
               variant: "transparent",
               size: "small",
               "leading-icon": "chevron-left",
@@ -20359,7 +20354,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               onClick: onPrev
             }, null, 8, ["ariaLabel", "disabled"])
           ]),
-          view.value !== "year" ? (openBlock(), createBlock(_sfc_main$1B, {
+          view.value !== "year" ? (openBlock(), createBlock(_sfc_main$1I, {
             key: 0,
             class: "kds-date-picker-header-label",
             variant: "transparent",
@@ -20368,7 +20363,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             onClick: onHeaderLabelClick
           }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$e, toDisplayString(headerLabel.value), 1)),
           createElementVNode("div", _hoisted_5$8, [
-            createVNode(_sfc_main$1B, {
+            createVNode(_sfc_main$1I, {
               variant: "transparent",
               size: "small",
               "leading-icon": "chevron-right",
@@ -20376,7 +20371,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               disabled: nextDisabled.value,
               onClick: onNext
             }, null, 8, ["ariaLabel", "disabled"]),
-            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1B, {
+            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1I, {
               key: 0,
               variant: "transparent",
               size: "small",
@@ -20672,12 +20667,12 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                 "aria-controls": popoverRef.value?.popoverId,
                 "aria-haspopup": "dialog",
                 "aria-expanded": popoverIsVisible.value,
-                title: popoverIsVisible.value ? "Close date picker" : "Open date picker",
+                tooltip: popoverIsVisible.value ? "Close date picker" : "Open date picker",
                 onPointerdown: _cache[1] || (_cache[1] = ($event) => isToggling.value = true),
                 onPointerup: _cache[2] || (_cache[2] = ($event) => isToggling.value = false),
                 onPointerleave: _cache[3] || (_cache[3] = ($event) => isToggling.value = false),
                 onPointercancel: _cache[4] || (_cache[4] = ($event) => isToggling.value = false)
-              }, null, 8, ["modelValue", "disabled", "aria-controls", "aria-expanded", "title"])
+              }, null, 8, ["modelValue", "disabled", "aria-controls", "aria-expanded", "tooltip"])
             ]),
             _: 1
           }, 16, ["modelValue", "segments", "disabled", "error", "autocomplete", "style", "aria-controls"]),
@@ -20943,8 +20938,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                   "aria-expanded": open.value,
                   "aria-haspopup": "dialog",
                   disabled: __props.disabled,
-                  title: open.value ? "Close date/time format picker" : "Open date/time format picker"
-                }, null, 8, ["modelValue", "aria-controls", "aria-expanded", "disabled", "title"])
+                  tooltip: open.value ? "Close date/time format picker" : "Open date/time format picker"
+                }, null, 8, ["modelValue", "aria-controls", "aria-expanded", "disabled", "tooltip"])
               ]),
               _: 1
             }, 16, ["modelValue", "placeholder", "disabled", "error", "validating", "autocomplete"]),
@@ -21112,30 +21107,30 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "case-sensitive",
-                title: caseSensitiveTitle.value,
+                tooltip: caseSensitiveTitle.value,
                 ariaLabel: "Case sensitivity",
                 disabled: __props.disabled
-              }, null, 8, ["modelValue", "title", "disabled"]),
+              }, null, 8, ["modelValue", "tooltip", "disabled"]),
               createVNode(_sfc_main$1q, {
                 modelValue: excludeMatches.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "arrows-order",
-                title: excludeMatchesTitle.value,
+                tooltip: excludeMatchesTitle.value,
                 ariaLabel: "Exclude matches",
                 disabled: __props.disabled
-              }, null, 8, ["modelValue", "title", "disabled"]),
+              }, null, 8, ["modelValue", "tooltip", "disabled"]),
               createVNode(_sfc_main$1q, {
                 modelValue: useRegex.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "regex",
-                title: patternModeTitle.value,
+                tooltip: patternModeTitle.value,
                 ariaLabel: "Regex mode",
                 disabled: __props.disabled
-              }, null, 8, ["modelValue", "title", "disabled"])
+              }, null, 8, ["modelValue", "tooltip", "disabled"])
             ]),
             _: 1
           }, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
@@ -21528,12 +21523,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               max: MAX_SECOND,
               step: 1
             }, null, 8, ["modelValue"]),
-            createVNode(_sfc_main$1B, {
+            createVNode(_sfc_main$1I, {
               class: "kds-time-picker-field-trash",
               variant: "transparent",
               "leading-icon": "trash",
               ariaLabel: "Remove seconds",
-              title: "Remove seconds",
+              tooltip: "Remove seconds",
               onClick: removeSeconds
             })
           ]),
@@ -21551,16 +21546,16 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               max: MAX_MILLISECOND,
               step: 1
             }, null, 8, ["modelValue"]),
-            createVNode(_sfc_main$1B, {
+            createVNode(_sfc_main$1I, {
               class: "kds-time-picker-field-trash",
               variant: "transparent",
               "leading-icon": "trash",
               ariaLabel: "Remove milliseconds",
-              title: "Remove milliseconds",
+              tooltip: "Remove milliseconds",
               onClick: removeMilliseconds
             })
           ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_5$7, [
-            createVNode(_sfc_main$1B, {
+            createVNode(_sfc_main$1I, {
               variant: "outlined",
               size: "small",
               "leading-icon": "plus",
@@ -21569,7 +21564,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             })
           ])) : createCommentVNode("", true)
         ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
-          createVNode(_sfc_main$1B, {
+          createVNode(_sfc_main$1I, {
             variant: "outlined",
             size: "small",
             "leading-icon": "plus",
@@ -21582,7 +21577,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-0b8a4eba"]]);
+const TimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-2033a969"]]);
 
 const HOURS_END_INDEX = 2;
 const MINUTES_START_INDEX = 2;
@@ -21920,12 +21915,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                 "aria-controls": popoverRef.value?.popoverId,
                 "aria-haspopup": "dialog",
                 "aria-expanded": popoverIsVisible.value,
-                title: popoverIsVisible.value ? "Close time picker" : "Open time picker",
+                tooltip: popoverIsVisible.value ? "Close time picker" : "Open time picker",
                 onPointerdown: _cache[1] || (_cache[1] = ($event) => isToggling.value = true),
                 onPointerup: _cache[2] || (_cache[2] = ($event) => isToggling.value = false),
                 onPointerleave: _cache[3] || (_cache[3] = ($event) => isToggling.value = false),
                 onPointercancel: _cache[4] || (_cache[4] = ($event) => isToggling.value = false)
-              }, null, 8, ["modelValue", "disabled", "aria-controls", "aria-expanded", "title"])
+              }, null, 8, ["modelValue", "disabled", "aria-controls", "aria-expanded", "tooltip"])
             ]),
             _: 1
           }, 16, ["modelValue", "segments", "disabled", "error", "autocomplete", "style", "aria-controls"]),
@@ -22246,8 +22241,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       );
     };
     const modeOptions = [
-      { id: kdsIntervalInputFormat.DATE, leadingIcon: "calendar", title: "Date" },
-      { id: kdsIntervalInputFormat.TIME, leadingIcon: "time", title: "Time" }
+      { id: kdsIntervalInputFormat.DATE, leadingIcon: "calendar", tooltip: "Date" },
+      { id: kdsIntervalInputFormat.TIME, leadingIcon: "time", tooltip: "Time" }
     ];
     const directionOptions = [
       { id: kdsIntervalDirectionality.ASCENDING, text: "Forward" },
@@ -22323,7 +22318,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const IntervalInputPopover = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-02541fd1"]]);
+const IntervalInputPopover = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-3d64537f"]]);
 
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "KdsIntervalInput",
@@ -22498,13 +22493,13 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                   "aria-expanded": isPopoverOpen.value,
                   "aria-haspopup": "dialog",
                   disabled: __props.disabled,
-                  title: isPopoverOpen.value ? "Close interval picker" : "Open interval picker",
+                  tooltip: isPopoverOpen.value ? "Close interval picker" : "Open interval picker",
                   ariaLabel: isPopoverOpen.value ? "Close interval picker" : "Open interval picker",
                   onPointerdown: _cache[1] || (_cache[1] = ($event) => isToggling.value = true),
                   onPointerup: _cache[2] || (_cache[2] = ($event) => isToggling.value = false),
                   onPointerleave: _cache[3] || (_cache[3] = ($event) => isToggling.value = false),
                   onPointercancel: _cache[4] || (_cache[4] = ($event) => isToggling.value = false)
-                }, null, 8, ["modelValue", "aria-controls", "aria-expanded", "disabled", "title", "ariaLabel"])
+                }, null, 8, ["modelValue", "aria-controls", "aria-expanded", "disabled", "tooltip", "ariaLabel"])
               ]),
               _: 1
             }, 16, ["modelValue", "placeholder", "disabled", "error", "validating", "autocomplete", "onKeydown"]),
@@ -24485,19 +24480,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "error", "loading", "empty-state-label", "bottom-value"])
             ]),
             createElementVNode("div", _hoisted_5$6, [
-              createVNode(unref(_sfc_main$1B), {
+              createVNode(unref(_sfc_main$1I), {
                 "leading-icon": "chevron-right",
                 ariaLabel: "Move selected values right",
-                title: "Move selected values right",
+                tooltip: "Move selected values right",
                 variant: "transparent",
                 size: "small",
                 disabled: effectiveDisabled.value || leftSelected.value.length === 0,
                 onClick: _cache[2] || (_cache[2] = ($event) => moveRight(leftSelected.value))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$1B), {
+              createVNode(unref(_sfc_main$1I), {
                 "leading-icon": "chevron-right-double",
                 ariaLabel: "Move all values right",
-                title: "Move all values right",
+                tooltip: "Move all values right",
                 variant: "transparent",
                 size: "small",
                 disabled: effectiveDisabled.value || excludedItems.value.length === 0 && (!showUnknownValues.value || modelValue.value.includeUnknownValues === true),
@@ -24506,19 +24501,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   ...showUnknownValues.value && !modelValue.value.includeUnknownValues ? [UNKNOWN_VALUE_ID] : []
                 ]))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$1B), {
+              createVNode(unref(_sfc_main$1I), {
                 "leading-icon": "chevron-left",
                 ariaLabel: "Move selected values left",
-                title: "Move selected values left",
+                tooltip: "Move selected values left",
                 variant: "transparent",
                 size: "small",
                 disabled: effectiveDisabled.value || rightSelected.value.length === 0,
                 onClick: _cache[4] || (_cache[4] = ($event) => moveLeft(rightSelected.value))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$1B), {
+              createVNode(unref(_sfc_main$1I), {
                 "leading-icon": "chevron-left-double",
                 ariaLabel: "Move all values left",
-                title: "Move all values left",
+                tooltip: "Move all values left",
                 variant: "transparent",
                 size: "small",
                 disabled: effectiveDisabled.value || includedItems.value.length === 0 && (!showUnknownValues.value || modelValue.value.includeUnknownValues === false),
@@ -24558,7 +24553,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TwinListBody = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-eb1bc043"]]);
+const TwinListBody = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-f3ed8f85"]]);
 
 const kdsTwinListSearchMode = {
   MANUAL: "manual",
@@ -24978,7 +24973,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_1$k, [
             createElementVNode("div", _hoisted_2$9, [
               createElementVNode("div", _hoisted_3$8, [
-                createVNode(_sfc_main$1B, {
+                createVNode(_sfc_main$1I, {
                   size: "small",
                   variant: "transparent",
                   "leading-icon": "sort-descending",
@@ -24986,7 +24981,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   disabled: __props.disabled,
                   onClick: _cache[0] || (_cache[0] = ($event) => applyReorder(unref(sortByText)(true, optionLookup.value)))
                 }, null, 8, ["disabled"]),
-                createVNode(_sfc_main$1B, {
+                createVNode(_sfc_main$1I, {
                   size: "small",
                   variant: "transparent",
                   "leading-icon": "sort-ascending",
@@ -24995,7 +24990,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   onClick: _cache[1] || (_cache[1] = ($event) => applyReorder(unref(sortByText)(false, optionLookup.value)))
                 }, null, 8, ["disabled"])
               ]),
-              createVNode(_sfc_main$1B, {
+              createVNode(_sfc_main$1I, {
                 size: "small",
                 variant: "transparent",
                 destructive: "",
@@ -25017,39 +25012,39 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
               /* fallback only for TS */
             }, null, 8, ["modelValue", "possible-values", "disabled", "error", "ariaLabel"]),
             createElementVNode("div", _hoisted_4$8, [
-              createVNode(_sfc_main$1B, {
+              createVNode(_sfc_main$1I, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "to-top",
                 label: "Top",
-                title: "Move to top",
+                tooltip: "Move to top",
                 disabled: __props.disabled || !unref(canMoveUp),
                 onClick: moveToTop
               }, null, 8, ["disabled"]),
-              createVNode(_sfc_main$1B, {
+              createVNode(_sfc_main$1I, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "to-bottom",
                 label: "Bottom",
-                title: "Move to bottom",
+                tooltip: "Move to bottom",
                 disabled: __props.disabled || !unref(canMoveDown),
                 onClick: moveToBottom
               }, null, 8, ["disabled"]),
-              createVNode(_sfc_main$1B, {
+              createVNode(_sfc_main$1I, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "arrow-up",
                 label: "Up",
-                title: "Move up",
+                tooltip: "Move up",
                 disabled: __props.disabled || !unref(canMoveUp),
                 onClick: moveUp
               }, null, 8, ["disabled"]),
-              createVNode(_sfc_main$1B, {
+              createVNode(_sfc_main$1I, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "arrow-down",
                 label: "Down",
-                title: "Move down",
+                tooltip: "Move down",
                 disabled: __props.disabled || !unref(canMoveDown),
                 onClick: moveDown
               }, null, 8, ["disabled"])
@@ -25062,7 +25057,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSortableListBox = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-ee7b63e2"]]);
+const KdsSortableListBox = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-586d5e52"]]);
 
 const _hoisted_1$j = { class: "kds-info-popover-content" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
@@ -25873,7 +25868,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             id: unref(headlineId),
             class: "kds-panel-headline"
           }, [
-            typeof __props.headline === "string" ? (openBlock(), createElementBlock("h6", _hoisted_4$5, toDisplayString(__props.headline), 1)) : __props.headline.type === "button" ? (openBlock(), createBlock(_sfc_main$1B, mergeProps({ key: 1 }, __props.headline.props, {
+            typeof __props.headline === "string" ? (openBlock(), createElementBlock("h6", _hoisted_4$5, toDisplayString(__props.headline), 1)) : __props.headline.type === "button" ? (openBlock(), createBlock(_sfc_main$1I, mergeProps({ key: 1 }, __props.headline.props, {
               size: "small",
               onClick: __props.headline.onClick
             }), null, 16, ["onClick"])) : __props.headline.type === "menuButton" ? (openBlock(), createBlock(_sfc_main$1j, mergeProps({ key: 2 }, __props.headline.props, {
@@ -25884,7 +25879,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           __props.headlineTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.headlineTrailingActions, (action, index) => {
               return openBlock(), createElementBlock(Fragment, { key: index }, [
-                action.type === "button" ? (openBlock(), createBlock(_sfc_main$1B, mergeProps({
+                action.type === "button" ? (openBlock(), createBlock(_sfc_main$1I, mergeProps({
                   key: 0,
                   ref_for: true
                 }, action.props, {
@@ -25925,7 +25920,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         __props.footerLeadingActions?.length || __props.footerTrailingActions?.length ? (openBlock(), createElementBlock("div", _hoisted_7, [
           createElementVNode("div", _hoisted_8, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.footerLeadingActions, (action, index) => {
-              return openBlock(), createBlock(_sfc_main$1B, mergeProps({
+              return openBlock(), createBlock(_sfc_main$1I, mergeProps({
                 key: `leading-${index}`
               }, { ref_for: true }, action.props, {
                 onClick: action.onClick
@@ -25934,7 +25929,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           ]),
           createElementVNode("div", _hoisted_9, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.footerTrailingActions, (action, index) => {
-              return openBlock(), createBlock(_sfc_main$1B, mergeProps({
+              return openBlock(), createBlock(_sfc_main$1I, mergeProps({
                 key: `trailing-${index}`
               }, { ref_for: true }, action.props, {
                 onClick: action.onClick
@@ -26486,7 +26481,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }, null, 8, ["name", "disabled"])) : createCommentVNode("", true),
           __props.badge ? (openBlock(), createBlock(unref(KdsBadge), mergeProps({ key: 1 }, __props.badge, { size: "xxsmall" }), null, 16)) : createCommentVNode("", true),
-          __props.trailingButton ? (openBlock(), createBlock(unref(_sfc_main$1B), mergeProps({ key: 2 }, __props.trailingButton, {
+          __props.trailingButton ? (openBlock(), createBlock(unref(_sfc_main$1I), mergeProps({ key: 2 }, __props.trailingButton, {
             size: "xsmall",
             onClick: onButtonClick
           }), null, 16)) : createCommentVNode("", true)
@@ -26808,10 +26803,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = createPropsRestProxy(__props, ["size"]);
     return (_ctx, _cache) => {
-      return props.type === unref(kdsActionButtonType).BUTTON ? (openBlock(), createBlock(_sfc_main$1B, mergeProps({ key: 0 }, props.props, {
+      return props.type === unref(kdsActionButtonType).BUTTON ? (openBlock(), createBlock(_sfc_main$1I, mergeProps({ key: 0 }, props.props, {
         size: __props.size,
         onClick: _cache[0] || (_cache[0] = (e) => props.onClick?.(e))
-      }), null, 16, ["size"])) : props.type === unref(kdsActionButtonType).LINK_BUTTON ? (openBlock(), createBlock(_sfc_main$1A, mergeProps({ key: 1 }, props.props, { size: __props.size }), null, 16, ["size"])) : createCommentVNode("", true);
+      }), null, 16, ["size"])) : props.type === unref(kdsActionButtonType).LINK_BUTTON ? (openBlock(), createBlock(_sfc_main$1s, mergeProps({ key: 1 }, props.props, { size: __props.size }), null, 16, ["size"])) : createCommentVNode("", true);
     };
   }
 });
@@ -27644,5 +27639,5 @@ const useKdsLegacyMode = (initialValue = false) => {
   };
 };
 
-export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1B as KdsButton, _sfc_main$i as KdsCard, _sfc_main$1v as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$V as KdsColorInput, KdsColorSwatch, _sfc_main$1d as KdsContextMenu, KdsDataType, _sfc_main$O as KdsDateInput, _sfc_main$M as KdsDateTimeFormatInput, KdsDateTimeInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$B as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$F as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1A as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1e as KdsMenu, _sfc_main$1j as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$x as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$Y as KdsNumberInput, KdsPanel, _sfc_main$U as KdsPasswordInput, _sfc_main$L as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSideDrawer, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$H as KdsTimeInput, _sfc_main$1q as KdsToggleButton, KdsToggleSwitch, KdsTree, KdsTwinList, _sfc_main$T as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, KdsZonedDateTimeInput, kdsActionButtonType, kdsActionButtonTypes, 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, kdsLinkSize, kdsLinkSizes, 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 };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1I as KdsButton, _sfc_main$i as KdsCard, _sfc_main$1C as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$V as KdsColorInput, KdsColorSwatch, _sfc_main$1d as KdsContextMenu, KdsDataType, _sfc_main$O as KdsDateInput, _sfc_main$M as KdsDateTimeFormatInput, KdsDateTimeInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$B as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$F as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1s as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1e as KdsMenu, _sfc_main$1j as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$x as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$Y as KdsNumberInput, KdsPanel, _sfc_main$U as KdsPasswordInput, _sfc_main$L as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSideDrawer, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$H as KdsTimeInput, _sfc_main$1q as KdsToggleButton, KdsToggleSwitch, KdsTree, KdsTwinList, _sfc_main$T as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, KdsZonedDateTimeInput, kdsActionButtonType, kdsActionButtonTypes, 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, kdsLinkSize, kdsLinkSizes, 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