@knime/kds-components 0.8.0 → 0.9.1

package/dist/index.js

@@ -1,14 +1,14 @@
-import { defineComponent, ref, watch, computed, createElementBlock, openBlock, createElementVNode, toDisplayString, normalizeStyle, shallowRef, toRef, createBlock, unref, resolveDynamicComponent, normalizeClass, createCommentVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, mergeModels, useModel, createVNode, useTemplateRef, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, mergeDefaults, useCssVars, createSlots, onBeforeUnmount, withKeys } from 'vue';
+import { defineComponent, ref, watch, computed, createElementBlock, openBlock, createElementVNode, toDisplayString, normalizeStyle, shallowRef, toRef, createBlock, unref, resolveDynamicComponent, normalizeClass, createCommentVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, mergeModels, useModel, createVNode, defineAsyncComponent, useTemplateRef, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, onBeforeUnmount, createTextVNode, mergeDefaults, useCssVars, createSlots, withKeys } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useElementSize, isDefined } from '@vueuse/core';
 
-import './index.css';const _hoisted_1$p = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$9 = ["src"];
+import './index.css';const _hoisted_1$q = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$b = ["src"];
 const _hoisted_3$6 = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -50,10 +50,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$9)) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
+        }, null, 40, _hoisted_2$b)) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 8, _hoisted_1$p);
+      ], 8, _hoisted_1$q);
     };
   }
 });
@@ -66,10 +66,10 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-4a34a186"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-4a34a186"]]);
 
-const _hoisted_1$o = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = ["role", "title", "aria-hidden", "aria-label"];
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -103,12 +103,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({ backgroundColor: backgroundColor.value }),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 12, _hoisted_1$o);
+      }, null, 12, _hoisted_1$p);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-c8fc7e8e"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-c8fc7e8e"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -155,7 +155,7 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -180,7 +180,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-3a57d423"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-3a57d423"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -505,8 +505,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$n = ["title"];
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = ["title"];
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -546,19 +546,19 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$n);
+      ], 10, _hoisted_1$o);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-d7166d18"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-d7166d18"]]);
 
-const _hoisted_1$m = ["title", "aria-label"];
-const _hoisted_2$8 = {
+const _hoisted_1$n = ["title", "aria-label"];
+const _hoisted_2$a = {
   key: 0,
   class: "label"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -579,13 +579,13 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         "aria-label": accessibleTitle.value
       }, [
         _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
-        props.label ? (openBlock(), createElementBlock("span", _hoisted_2$8, toDisplayString(props.label), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$m);
+        props.label ? (openBlock(), createElementBlock("span", _hoisted_2$a, toDisplayString(props.label), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$n);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-8bf6a94a"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-8bf6a94a"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -601,8 +601,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$l = ["data-style"];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["data-style"];
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -627,12 +627,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$l);
+      ])], 10, _hoisted_1$m);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-74bb7c3d"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-74bb7c3d"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -642,11 +642,11 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$k = {
+const _hoisted_1$l = {
   key: 0,
   class: "label"
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -705,7 +705,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$k, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$l, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -718,9 +718,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-b0f9559f"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-b0f9559f"]]);
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -773,7 +773,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -809,7 +809,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -844,9 +844,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
-const _hoisted_1$j = ["data-visible"];
-const _hoisted_2$7 = ["data-visible"];
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = ["data-visible"];
+const _hoisted_2$9 = ["data-visible"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -909,7 +909,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$j),
+            ], 8, _hoisted_1$k),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
@@ -918,7 +918,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$7)
+            ], 8, _hoisted_2$9)
           ], 2)
         ]),
         _: 1
@@ -927,7 +927,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-ec08a9ba"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-ec08a9ba"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -937,134 +937,6 @@ const kdsProgressButtonState = {
 };
 const kdsProgressButtonStates = Object.values(kdsProgressButtonState);
 
-const _hoisted_1$i = ["disabled", "aria-pressed"];
-const TITLE = "Click for more information";
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  __name: "KdsInfoToggleButton",
-  props: /* @__PURE__ */ mergeModels({
-    disabled: { type: Boolean, default: false },
-    hidden: { type: Boolean, default: false }
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        class: normalizeClass({
-          "info-toggle-button": true,
-          selected: modelValue.value,
-          disabled: props.disabled,
-          hidden: props.hidden && !modelValue.value
-        }),
-        disabled: props.disabled,
-        title: TITLE,
-        "aria-label": TITLE,
-        "aria-pressed": modelValue.value,
-        type: "button",
-        onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value)
-      }, [
-        createVNode(KdsIcon, {
-          name: "circle-question",
-          size: "xsmall"
-        })
-      ], 10, _hoisted_1$i);
-    };
-  }
-});
-
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-ad020a5d"]]);
-
-const _hoisted_1$h = ["disabled", "title", "aria-label", "aria-pressed"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  __name: "KdsVariableToggleButton",
-  props: /* @__PURE__ */ mergeModels({
-    disabled: { type: Boolean, default: false },
-    hidden: { type: Boolean, default: false },
-    inSet: { type: Boolean, default: false },
-    outSet: { type: Boolean, default: false },
-    error: { type: Boolean, default: false }
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    const iconState = computed(() => {
-      if (props.inSet && props.outSet) {
-        return "in-out";
-      }
-      if (props.inSet) {
-        return "in";
-      }
-      if (props.outSet) {
-        return "out";
-      }
-      return "none";
-    });
-    const iconName = computed(() => {
-      switch (iconState.value) {
-        case "in":
-          return "flow-variable-in";
-        case "out":
-          return "flow-variable-out";
-        case "in-out":
-          return "flow-variable-in-out";
-        case "none":
-        default:
-          return "flow-variable-default";
-      }
-    });
-    const baseTitleByState = {
-      in: "Input Flow Variable",
-      out: "Output Flow Variable",
-      "in-out": "Input and Output Flow Variable",
-      none: "No Flow Variable set"
-    };
-    const errorTitleByState = {
-      in: "Error in input Flow Variable",
-      out: "Error in output Flow Variable",
-      "in-out": "Error in Flow Variables"
-    };
-    const title = computed(() => {
-      const baseTitle = baseTitleByState[iconState.value];
-      if (!props.error) {
-        return baseTitle;
-      }
-      return errorTitleByState[iconState.value] ?? baseTitle;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        class: normalizeClass({
-          "variable-toggle-button": true,
-          disabled: props.disabled,
-          error: props.error,
-          "pressed-or-set": modelValue.value || props.inSet || props.outSet,
-          hidden: props.hidden && !modelValue.value
-        }),
-        disabled: props.disabled,
-        title: title.value,
-        "aria-label": title.value,
-        "aria-pressed": modelValue.value,
-        type: "button",
-        onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value)
-      }, [
-        createVNode(KdsIcon, {
-          name: iconName.value,
-          size: "xsmall"
-        }, null, 8, ["name"])
-      ], 10, _hoisted_1$h);
-    };
-  }
-});
-
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-968c795f"]]);
-
 const kdsButtonSize = {
   XSMALL: "xsmall",
   SMALL: "small",
@@ -1181,36 +1053,49 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$g = ["id", "for", "title"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = { class: "kds-label-wrapper" };
+const _hoisted_2$8 = ["id", "for", "title"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
     id: {},
-    for: {}
+    for: {},
+    description: { default: void 0 },
+    showDescriptionButton: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
+    const KdsInfoToggleButton = defineAsyncComponent(
+      () => Promise.resolve().then(() => KdsInfoToggleButton$1)
+    );
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
-        id: props.id,
-        ref_key: "labelEl",
-        ref: labelEl,
-        for: props.for,
-        class: "label",
-        title: unref(isTruncated) ? props.label : void 0
-      }, toDisplayString(props.label), 9, _hoisted_1$g);
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+        createElementVNode("label", {
+          id: props.id,
+          ref_key: "labelEl",
+          ref: labelEl,
+          for: props.for,
+          class: "label",
+          title: unref(isTruncated) ? props.label : void 0
+        }, toDisplayString(props.label), 9, _hoisted_2$8),
+        props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
+          key: 0,
+          content: props.description,
+          hidden: !props.showDescriptionButton
+        }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-76bdc306"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-1a5dc1ba"]]);
 
-const _hoisted_1$f = ["id"];
-const _hoisted_2$6 = { class: "subtext-text" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = ["id"];
+const _hoisted_2$7 = { class: "subtext-text" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -1241,16 +1126,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$6, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$f)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$7, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$i)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-58a95aa3"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-df9a85a4"]]);
 
-const _hoisted_1$e = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$5 = { class: "control" };
+const _hoisted_1$h = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$6 = { class: "control" };
 const _hoisted_3$5 = {
   key: 0,
   class: "content"
@@ -1261,7 +1146,7 @@ const _hoisted_6$1 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1334,7 +1219,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$5, [
+          createElementVNode("div", _hoisted_2$6, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -1350,7 +1235,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               class: "helper-text"
             }, toDisplayString(props.helperText), 9, _hoisted_5$1)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$e),
+        ], 10, _hoisted_1$h),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -1364,9 +1249,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-3751dc60"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-428e95ca"]]);
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1398,8 +1283,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$d = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -1483,12 +1368,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: hasError.value
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$d);
+      ], 8, _hoisted_1$g);
     };
   }
 });
 
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-538e7d4c"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-c38eeda5"]]);
 
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -1504,8 +1389,8 @@ const kdsCheckboxValue = {
 };
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
 
-const _hoisted_1$c = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$4 = { class: "control" };
+const _hoisted_1$f = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$5 = { class: "control" };
 const _hoisted_3$4 = {
   key: 0,
   class: "dot",
@@ -1516,7 +1401,7 @@ const _hoisted_3$4 = {
 const _hoisted_4$3 = { class: "content" };
 const _hoisted_5 = { class: "label" };
 const _hoisted_6 = ["id"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -1556,7 +1441,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$4, [
+        createElementVNode("div", _hoisted_2$5, [
           modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$4, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
@@ -1573,12 +1458,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             class: "helper-text"
           }, toDisplayString(props.helperText), 9, _hoisted_6)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$c);
+      ], 10, _hoisted_1$f);
     };
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-a7490a52"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-a7490a52"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -1700,8 +1585,8 @@ const useRadioSelection = ({
   };
 };
 
-const _hoisted_1$b = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -1780,15 +1665,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: unref(hasError)
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$b);
+      ], 8, _hoisted_1$e);
     };
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-15fb8864"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-9cc4dcdd"]]);
 
-const _hoisted_1$a = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -1838,12 +1723,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$a);
+      ], 10, _hoisted_1$d);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-93f3f577"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-93f3f577"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -1894,8 +1779,8 @@ const useValueSwitchIconHiding = ({
   };
 };
 
-const _hoisted_1$9 = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -1988,12 +1873,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: props.error
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 10, _hoisted_1$9);
+      ], 10, _hoisted_1$c);
     };
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-56b594ad"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-666d4c10"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -2013,13 +1898,13 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
 
-const _hoisted_1$8 = { class: "kds-form-field" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
     label: {},
     ariaLabel: {},
+    description: {},
     subText: {},
     error: { type: Boolean },
     validating: { type: Boolean },
@@ -2031,14 +1916,21 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const inputId = computed(() => props.id?.trim() || fallbackId);
     const labelId = computed(() => `${inputId.value}-label`);
     const subTextId = computed(() => `${inputId.value}-subtext`);
+    const isHovered = ref(false);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", {
+        class: "kds-form-field",
+        onMouseenter: _cache[0] || (_cache[0] = ($event) => isHovered.value = true),
+        onMouseleave: _cache[1] || (_cache[1] = ($event) => isHovered.value = false)
+      }, [
         props.label ? (openBlock(), createBlock(KdsLabel, {
           key: 0,
           id: labelId.value,
           for: inputId.value,
-          label: props.label
-        }, null, 8, ["id", "for", "label"])) : createCommentVNode("", true),
+          label: props.label,
+          description: props.description,
+          "show-description-button": isHovered.value
+        }, null, 8, ["id", "for", "label", "description", "show-description-button"])) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default", {
           id: inputId.value,
           ariaLabelledby: props.label ? labelId.value : void 0,
@@ -2053,18 +1945,18 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           validating: props.validating,
           "preserve-sub-text-space": props.preserveSubTextSpace
         }, null, 8, ["id", "sub-text", "error", "validating", "preserve-sub-text-space"])
-      ]);
+      ], 32);
     };
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-52b1df11"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5d99c134"]]);
 
-const _hoisted_1$7 = {
+const _hoisted_1$b = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$3 = ["id", "value", "type", "inputmode", "placeholder", "disabled", "readonly", "required", "name", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"];
+const _hoisted_2$4 = ["id", "value", "type", "inputmode", "placeholder", "disabled", "readonly", "required", "name", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"];
 const _hoisted_3$3 = {
   key: 3,
   class: "trailing-slot"
@@ -2073,7 +1965,7 @@ const _hoisted_4$2 = {
   key: 4,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2149,7 +2041,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
           props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.leadingIcon
@@ -2185,7 +2077,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
           onKeydown: _cache[2] || (_cache[2] = ($event) => emit("keydown", $event)),
           onClick: _cache[3] || (_cache[3] = ($event) => emit("click", $event))
-        }, null, 42, _hoisted_2$3),
+        }, null, 42, _hoisted_2$4),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 1,
           class: normalizeClass({
@@ -2194,7 +2086,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             disabled: props.disabled
           })
         }, toDisplayString(props.unit), 3)) : createCommentVNode("", true),
-        props.clearable && hasValue.value && !props.disabled && !props.readonly ? (openBlock(), createBlock(_sfc_main$r, {
+        props.clearable && hasValue.value && !props.disabled && !props.readonly ? (openBlock(), createBlock(_sfc_main$t, {
           key: 2,
           class: "clear-button",
           type: "button",
@@ -2218,7 +2110,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-cf72eb5a"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-cf72eb5a"]]);
 
 const additionalGroupSeparators = [" ", " ", " "];
 const decimalSeparatorSample = 1.1;
@@ -2342,9 +2234,10 @@ const createKdsNumberParser = (params) => {
   };
 };
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
+    description: {},
     label: {},
     ariaLabel: {},
     id: {},
@@ -2367,7 +2260,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
     const isFocused = ref(false);
@@ -2467,10 +2360,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       modelValue.value = normalized;
       localValue.value = numberParser.value.formatForDisplay(normalized);
     };
+    const baseInput = useTemplateRef("baseInput");
+    __expose({
+      focus: () => baseInput.value?.focus()
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
         default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps(slotProps, {
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
             "model-value": localValue.value,
             type: "text",
             inputmode: props.step >= 1 ? "numeric" : "decimal",
@@ -2493,7 +2393,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$r, {
+              createVNode(_sfc_main$t, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -2502,7 +2402,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 disabled: !canDecrease.value,
                 onClick: _cache[0] || (_cache[0] = ($event) => adjustByStep(-1))
               }, null, 8, ["aria-label", "disabled"]),
-              createVNode(_sfc_main$r, {
+              createVNode(_sfc_main$t, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -2608,9 +2508,10 @@ const parseRegexToPatternInputValue = (regex, options) => {
   return wildcard ?? body;
 };
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "KdsPatternInput",
   props: /* @__PURE__ */ mergeModels({
+    description: {},
     label: {},
     ariaLabel: {},
     id: {},
@@ -2629,7 +2530,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const regex = useModel(__props, "modelValue");
     const uiValue = ref("");
@@ -2663,10 +2564,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const patternModeAriaLabel = computed(
       () => useRegex.value ? "Use regex pattern" : "Use wildcard pattern"
     );
+    const baseInput = useTemplateRef("baseInput");
+    __expose({
+      focus: () => baseInput.value?.focus()
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
         default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps(slotProps, {
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
             modelValue: uiValue.value,
             "onUpdate:modelValue": [
               _cache[3] || (_cache[3] = ($event) => uiValue.value = $event),
@@ -2684,7 +2592,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             clearable: ""
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$p, {
+              createVNode(_sfc_main$r, {
                 modelValue: caseSensitive.value,
                 "onUpdate:modelValue": [
                   _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
@@ -2697,7 +2605,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 "aria-label": caseSensitiveAriaLabel.value,
                 disabled: props.disabled || props.readonly
               }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$p, {
+              createVNode(_sfc_main$r, {
                 modelValue: excludeMatches.value,
                 "onUpdate:modelValue": [
                   _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
@@ -2710,7 +2618,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 "aria-label": excludeMatchesAriaLabel.value,
                 disabled: props.disabled || props.readonly
               }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$p, {
+              createVNode(_sfc_main$r, {
                 modelValue: useRegex.value,
                 "onUpdate:modelValue": [
                   _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
@@ -2733,9 +2641,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "KdsSearchInput",
   props: /* @__PURE__ */ mergeModels({
+    description: {},
     label: {},
     ariaLabel: {},
     id: {},
@@ -2757,17 +2666,17 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const baseInputRef = useTemplateRef("baseInput");
+    const baseInput = useTemplateRef("baseInput");
     __expose({
-      /**
-       * Focuses the input element
-       */
-      focus: () => baseInputRef.value?.focus()
+      focus: () => baseInput.value?.focus()
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
         default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps({ ref: "baseInput" }, slotProps, {
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
             modelValue: modelValue.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             type: "search",
@@ -2788,9 +2697,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
+    description: {},
     label: {},
     ariaLabel: {},
     id: {},
@@ -2809,13 +2719,20 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
+    const baseInput = useTemplateRef("baseInput");
+    __expose({
+      focus: () => baseInput.value?.focus()
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
         default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps(slotProps, {
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
             modelValue: modelValue.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             type: "text",
@@ -2834,10 +2751,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["rows", "placeholder", "disabled", "readonly", "required", "name", "autocomplete"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = ["rows", "placeholder", "disabled", "readonly", "required", "name", "autocomplete"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "KdsTextarea",
   props: /* @__PURE__ */ mergeModels({
+    description: {},
     label: {},
     ariaLabel: {},
     id: {},
@@ -2857,7 +2775,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const normalizedRows = computed(() => Math.max(1, props.rows));
     const modelValue = useModel(__props, "modelValue");
@@ -2877,6 +2795,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     }
     useResizeObserver(textareaElement, resize);
     watch(modelValue, resize, { immediate: true });
+    __expose({
+      focus: () => {
+        textareaElement.value?.focus();
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
         default: withCtx((slotProps) => [
@@ -2892,7 +2815,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             required: props.required,
             name: props.name,
             autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$6), [
+          }), null, 16, _hoisted_1$a), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -2902,62 +2825,405 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f0055631"]]);
-
-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);
-const kdsModalLayoutPropsDefault = {
-  title: "",
-  variant: kdsModalVariant.PADDED,
-  overflow: "auto",
-  icon: void 0
-};
-const kdsModalPropsDefault = {
-  active: false,
-  height: kdsModalHeight.AUTO,
-  width: kdsModalWidth.MEDIUM,
-  closedby: kdsModalClosedBy.CLOSEREQUEST,
-  ...kdsModalLayoutPropsDefault
-};
+const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-2e4d2d42"]]);
 
-const _hoisted_1$5 = { class: "modal-header" };
-const _hoisted_2$2 = { class: "modal-header-title" };
-const _hoisted_3$2 = ["data-variant"];
-const _hoisted_4$1 = {
+const _hoisted_1$9 = ["id", "popover", "role"];
+const _hoisted_2$3 = {
   key: 0,
-  class: "modal-footer"
+  class: "kds-popover-default-content"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...{ inheritAttrs: false },
-  __name: "KdsModalLayout",
-  props: /* @__PURE__ */ mergeDefaults({
-    title: {},
-    variant: {},
-    icon: {},
-    overflow: {},
-    onClose: { type: Function }
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "KdsPopover",
+  props: /* @__PURE__ */ mergeModels({
+    activatorEl: {},
+    anchorEl: {},
+    placement: { default: "bottom-left" },
+    role: { default: "dialog" },
+    fullWidth: { type: Boolean, default: false },
+    content: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const open = useModel(__props, "modelValue");
+    const popoverEl = useTemplateRef("popoverEl");
+    const popoverId = useId();
+    const anchorName = `--anchor-${popoverId}`;
+    const resolveElement = (el) => {
+      if (!el) {
+        return null;
+      }
+      const maybeInstance = el;
+      const candidate = maybeInstance.$el ?? el;
+      return candidate instanceof HTMLElement ? candidate : null;
+    };
+    const setA11yAttributes = (el, options) => {
+      if (!el) {
+        return;
+      }
+      if (options === null) {
+        el.removeAttribute("aria-expanded");
+        el.removeAttribute("aria-controls");
+        el.removeAttribute("aria-haspopup");
+        return;
+      }
+      el.setAttribute("aria-expanded", String(options.expanded));
+      el.setAttribute("aria-controls", options.popoverId);
+      el.setAttribute("aria-haspopup", props.role);
+    };
+    watch(open, (isOpen) => {
+      if (isOpen) {
+        popoverEl.value?.showPopover?.();
+      } else {
+        popoverEl.value?.hidePopover?.();
+      }
+      const activatorElement = resolveElement(unref(props.activatorEl));
+      activatorElement?.setAttribute("aria-expanded", String(isOpen));
+    });
+    watch(
+      () => [unref(props.anchorEl), unref(props.activatorEl)],
+      ([nextAnchorEl, nextActivatorEl], prev) => {
+        const [prevAnchorEl, prevActivatorEl] = prev ?? [null, null];
+        const prevAnchor = resolveElement(prevAnchorEl ?? null) ?? resolveElement(prevActivatorEl);
+        prevAnchor?.style.removeProperty("anchor-name");
+        const prevActivator = resolveElement(prevActivatorEl);
+        setA11yAttributes(prevActivator, null);
+        const nextAnchor = resolveElement(nextAnchorEl ?? null) ?? resolveElement(nextActivatorEl);
+        nextAnchor?.style.setProperty("anchor-name", anchorName);
+        const nextActivator = resolveElement(nextActivatorEl);
+        setA11yAttributes(nextActivator, { expanded: open.value, popoverId });
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      const anchor = resolveElement(unref(props.anchorEl) ?? null) ?? resolveElement(unref(props.activatorEl));
+      anchor?.style.removeProperty("anchor-name");
+      const activator = resolveElement(unref(props.activatorEl));
+      setA11yAttributes(activator, null);
+    });
+    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: unref(props.activatorEl) ? "auto" : void 0,
+        style: normalizeStyle({ "position-anchor": anchorName }),
+        role: props.role,
+        onToggle: _cache[0] || (_cache[0] = ($event) => open.value = $event.newState === "open")
+      }, [
+        open.value ? renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$3, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+        ], true) : createCommentVNode("", true)
+      ], 46, _hoisted_1$9);
+    };
+  }
+});
+
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-1e24f98e"]]);
+
+const _hoisted_1$8 = { class: "kds-info-popover-content" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "InfoPopover",
+  props: {
+    content: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(props.content), 1)
+        ], true)
+      ]);
+    };
+  }
+});
+
+const InfoPopover = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-64f7db25"]]);
+
+const _hoisted_1$7 = ["aria-pressed"];
+const TITLE = "Click for more information";
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "KdsInfoToggleButton",
+  props: /* @__PURE__ */ mergeModels({
+    content: {},
+    hidden: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const buttonEl = useTemplateRef("buttonEl");
+    const isHovered = ref(false);
+    const isFocused = ref(false);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("button", mergeProps({
+          ref_key: "buttonEl",
+          ref: buttonEl
+        }, _ctx.$attrs, {
+          class: {
+            "info-toggle-button": true,
+            selected: modelValue.value,
+            hidden: props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
+          },
+          title: TITLE,
+          "aria-label": TITLE,
+          "aria-pressed": modelValue.value,
+          type: "button",
+          onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value),
+          onMouseenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
+          onMouseleave: _cache[2] || (_cache[2] = ($event) => isHovered.value = false),
+          onFocus: _cache[3] || (_cache[3] = ($event) => isFocused.value = true),
+          onBlur: _cache[4] || (_cache[4] = ($event) => isFocused.value = false)
+        }), [
+          createVNode(KdsIcon, {
+            name: "circle-question",
+            size: "small"
+          })
+        ], 16, _hoisted_1$7),
+        createVNode(KdsPopover, {
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
+          "activator-el": buttonEl.value,
+          placement: "top-right"
+        }, {
+          default: withCtx(() => [
+            createVNode(InfoPopover, {
+              content: props.content
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ]),
+              _: 3
+            }, 8, ["content"])
+          ]),
+          _: 3
+        }, 8, ["modelValue", "activator-el"])
+      ], 64);
+    };
+  }
+});
+
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-5070a398"]]);
+
+const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: KdsInfoToggleButton
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const _hoisted_1$6 = { class: "kds-variable-popover" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "VariablePopover",
+  props: {
+    content: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(props.content), 1)
+        ], true)
+      ]);
+    };
+  }
+});
+
+const VariablePopover = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-54c206b9"]]);
+
+const _hoisted_1$5 = ["title", "aria-label", "aria-pressed"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "KdsVariableToggleButton",
+  props: /* @__PURE__ */ mergeModels({
+    content: {},
+    hidden: { type: Boolean, default: false },
+    inSet: { type: Boolean, default: false },
+    outSet: { type: Boolean, default: false },
+    error: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const buttonEl = useTemplateRef("buttonEl");
+    const isHovered = ref(false);
+    const isFocused = ref(false);
+    const iconState = computed(() => {
+      if (props.inSet && props.outSet) {
+        return "in-out";
+      }
+      if (props.inSet) {
+        return "in";
+      }
+      if (props.outSet) {
+        return "out";
+      }
+      return "none";
+    });
+    const iconName = computed(() => {
+      switch (iconState.value) {
+        case "in":
+          return "flow-variable-in";
+        case "out":
+          return "flow-variable-out";
+        case "in-out":
+          return "flow-variable-in-out";
+        case "none":
+        default:
+          return "flow-variable-default";
+      }
+    });
+    const baseTitleByState = {
+      in: "Input Flow Variable",
+      out: "Output Flow Variable",
+      "in-out": "Input and Output Flow Variable",
+      none: "No Flow Variable set"
+    };
+    const errorTitleByState = {
+      in: "Error in input Flow Variable",
+      out: "Error in output Flow Variable",
+      "in-out": "Error in Flow Variables"
+    };
+    const title = computed(() => {
+      const baseTitle = baseTitleByState[iconState.value];
+      if (!props.error) {
+        return baseTitle;
+      }
+      return errorTitleByState[iconState.value] ?? baseTitle;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("button", mergeProps({
+          ref_key: "buttonEl",
+          ref: buttonEl
+        }, _ctx.$attrs, {
+          class: {
+            "variable-toggle-button": true,
+            error: props.error,
+            "pressed-or-set": modelValue.value || props.inSet || props.outSet,
+            hidden: props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
+          },
+          title: title.value,
+          "aria-label": title.value,
+          "aria-pressed": modelValue.value,
+          type: "button",
+          onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value),
+          onMouseenter: _cache[1] || (_cache[1] = ($event) => isHovered.value = true),
+          onMouseleave: _cache[2] || (_cache[2] = ($event) => isHovered.value = false),
+          onFocus: _cache[3] || (_cache[3] = ($event) => isFocused.value = true),
+          onBlur: _cache[4] || (_cache[4] = ($event) => isFocused.value = false)
+        }), [
+          createVNode(KdsIcon, {
+            name: iconName.value,
+            size: "small"
+          }, null, 8, ["name"])
+        ], 16, _hoisted_1$5),
+        createVNode(KdsPopover, {
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
+          "activator-el": buttonEl.value,
+          placement: "bottom-right"
+        }, {
+          default: withCtx(() => [
+            createVNode(VariablePopover, {
+              content: props.content
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ]),
+              _: 3
+            }, 8, ["content"])
+          ]),
+          _: 3
+        }, 8, ["modelValue", "activator-el"])
+      ], 64);
+    };
+  }
+});
+
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-64296d74"]]);
+
+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 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);
+const kdsModalLayoutPropsDefault = {
+  title: "",
+  variant: kdsModalVariant.PADDED,
+  overflow: "auto",
+  icon: void 0
+};
+const kdsModalPropsDefault = {
+  active: false,
+  height: kdsModalHeight.AUTO,
+  width: kdsModalWidth.MEDIUM,
+  closedby: kdsModalClosedBy.CLOSEREQUEST,
+  ...kdsModalLayoutPropsDefault
+};
+
+const _hoisted_1$4 = { class: "modal-header" };
+const _hoisted_2$2 = { class: "modal-header-title" };
+const _hoisted_3$2 = ["data-variant"];
+const _hoisted_4$1 = {
+  key: 0,
+  class: "modal-footer"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "KdsModalLayout",
+  props: /* @__PURE__ */ mergeDefaults({
+    title: {},
+    variant: {},
+    icon: {},
+    overflow: {},
+    onClose: { type: Function }
   }, kdsModalLayoutPropsDefault),
   setup(__props) {
     useCssVars((_ctx) => ({
@@ -2966,14 +3232,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("header", _hoisted_1$5, [
+        createElementVNode("header", _hoisted_1$4, [
           props.icon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.icon,
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$2, toDisplayString(props.title), 1),
-          createVNode(_sfc_main$r, {
+          createVNode(_sfc_main$t, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -2995,10 +3261,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-7dbd159b"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7dbd159b"]]);
 
-const _hoisted_1$4 = ["closedby"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = ["closedby"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
   props: /* @__PURE__ */ mergeDefaults({
     icon: {},
@@ -3013,7 +3279,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   emits: ["close", "closed"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v085a353b": _ctx.overflow
+      "v1ee8fa3c": _ctx.overflow
     }));
     const props = __props;
     const emit = __emit;
@@ -3035,17 +3301,22 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     );
     const renderDialog = ref(props.active);
     const removeDialog = () => {
+      if (!renderDialog.value) {
+        return;
+      }
       renderDialog.value = false;
       emit("closed");
     };
     watch(
       () => props.active,
-      (value, lastValue) => {
+      async (value, lastValue) => {
         if (value === false && lastValue === true) {
           if (dialog.value) {
             Promise.all(
               dialog.value.getAnimations({ subtree: true }).map((animation) => animation.finished)
             ).then(removeDialog);
+            await sleep(350);
+            removeDialog();
           } else {
             removeDialog();
           }
@@ -3090,24 +3361,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["title", "icon", "variant", "overflow"])
         ], true)
-      ], 42, _hoisted_1$4)) : createCommentVNode("", true);
+      ], 42, _hoisted_1$3)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c95b809a"]]);
-
-const createUnwrappedPromise = () => {
-  let resolve = () => {
-  };
-  let reject = () => {
-  };
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { resolve, reject, promise };
-};
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d8ed98e7"]]);
 
 const defaultCancelButton = {
   type: "cancel",
@@ -3188,7 +3447,7 @@ const useKdsDynamicModal = () => {
   };
 };
 
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   key: 1,
   class: "confirmation"
 };
@@ -3197,7 +3456,7 @@ const _hoisted_3$1 = {
   key: 0,
   class: "ask-again"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "KdsDynamicModalProvider",
   setup(__props) {
     const askAgain = ref(false);
@@ -3250,10 +3509,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         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$3, [
+            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$2, [
               createElementVNode("div", _hoisted_2$1, toDisplayString(unref(config).value.message), 1),
               unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-                createVNode(_sfc_main$i, {
+                createVNode(_sfc_main$m, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -3268,7 +3527,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           name: "footer",
           fn: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$r, {
+              return openBlock(), createBlock(_sfc_main$t, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -3298,96 +3557,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-67e036b5"]]);
-
-const _hoisted_1$2 = ["id", "popover"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "KdsPopover",
-  props: /* @__PURE__ */ mergeModels({
-    activatorEl: {},
-    anchorEl: {},
-    placement: { default: "bottom-right" }
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const open = useModel(__props, "modelValue");
-    const popoverEl = useTemplateRef("popoverEl");
-    const popoverId = useId();
-    const anchorName = `--anchor-${popoverId}`;
-    const resolveElement = (el) => {
-      if (!el) {
-        return null;
-      }
-      const maybeInstance = el;
-      const candidate = maybeInstance.$el ?? el;
-      return candidate instanceof HTMLElement ? candidate : null;
-    };
-    const setA11yAttributes = (el, options) => {
-      if (!el) {
-        return;
-      }
-      if (options === null) {
-        el.removeAttribute("aria-expanded");
-        el.removeAttribute("aria-controls");
-        el.removeAttribute("aria-haspopup");
-        return;
-      }
-      el.setAttribute("aria-expanded", String(options.expanded));
-      el.setAttribute("aria-controls", options.popoverId);
-      el.setAttribute("aria-haspopup", "dialog");
-    };
-    watch(open, (isOpen) => {
-      if (isOpen) {
-        popoverEl.value?.showPopover?.();
-      } else {
-        popoverEl.value?.hidePopover?.();
-      }
-      const activatorElement = resolveElement(unref(props.activatorEl));
-      activatorElement?.setAttribute("aria-expanded", String(isOpen));
-    });
-    watch(
-      () => [unref(props.anchorEl), unref(props.activatorEl)],
-      ([nextAnchorEl, nextActivatorEl], prev) => {
-        const [prevAnchorEl, prevActivatorEl] = prev ?? [null, null];
-        const prevAnchor = resolveElement(prevAnchorEl ?? null) ?? resolveElement(prevActivatorEl);
-        prevAnchor?.style.removeProperty("anchor-name");
-        const prevActivator = resolveElement(prevActivatorEl);
-        setA11yAttributes(prevActivator, null);
-        const nextAnchor = resolveElement(nextAnchorEl ?? null) ?? resolveElement(nextActivatorEl);
-        nextAnchor?.style.setProperty("anchor-name", anchorName);
-        const nextActivator = resolveElement(nextActivatorEl);
-        setA11yAttributes(nextActivator, { expanded: open.value, popoverId });
-      },
-      { immediate: true }
-    );
-    onBeforeUnmount(() => {
-      const anchor = resolveElement(unref(props.anchorEl) ?? null) ?? resolveElement(unref(props.activatorEl));
-      anchor?.style.removeProperty("anchor-name");
-      const activator = resolveElement(unref(props.activatorEl));
-      setA11yAttributes(activator, null);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: unref(popoverId),
-        ref_key: "popoverEl",
-        ref: popoverEl,
-        class: normalizeClass(["kds-popover", ["floating", props.placement]]),
-        popover: unref(props.activatorEl) ? "auto" : void 0,
-        style: normalizeStyle({ "position-anchor": anchorName }),
-        role: "dialog",
-        onToggle: _cache[0] || (_cache[0] = ($event) => open.value = $event.newState === "open")
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 46, _hoisted_1$2);
-    };
-  }
-});
-
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-6bc7ef3b"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-67e036b5"]]);
 
 const kdsPopoverPlacement = {
   TOP_LEFT: "top-left",
@@ -3396,6 +3566,12 @@ const kdsPopoverPlacement = {
   BOTTOM_RIGHT: "bottom-right"
 };
 const kdsPopoverPlacements = Object.values(kdsPopoverPlacement);
+const kdsPopoverRole = {
+  DIALOG: "dialog",
+  MENU: "menu",
+  LISTBOX: "listbox"
+};
+const kdsPopoverRoles = Object.values(kdsPopoverRole);
 
 const _hoisted_1$1 = ["aria-label", "aria-labelledby", "aria-disabled", "aria-pressed", "tabindex", "onKeydown"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -3494,9 +3670,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const buttonType = computed(() => {
       if (isDefinedAndNotEmpty(props, "buttonTo")) {
-        return _sfc_main$q;
+        return _sfc_main$s;
       }
-      return _sfc_main$r;
+      return _sfc_main$t;
     });
     const mapProps = (mappings) => {
       return Object.fromEntries(
@@ -3518,7 +3694,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ["destructive", "buttonDestructive"],
         ["title", "buttonTitle"]
       ]);
-      if (buttonType.value !== _sfc_main$q) {
+      if (buttonType.value !== _sfc_main$s) {
         return baseProps;
       }
       return {
@@ -3547,5 +3723,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-059bb01e"]]);
 
-export { KdsAvatar, _sfc_main$r as KdsButton, KdsCard, _sfc_main$i as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$q as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$a as KdsNumberInput, _sfc_main$9 as KdsPatternInput, KdsPopover, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$8 as KdsSearchInput, KdsSubText, _sfc_main$7 as KdsTextInput, KdsTextarea, _sfc_main$p as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPopoverPlacement, kdsPopoverPlacements, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, _sfc_main$t as KdsButton, KdsCard, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsPopover, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map