@knime/kds-components 0.24.0 → 0.25.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, nextTick, onMounted, onUnmounted, readonly, toValue, useId, Fragment, renderList, watchEffect, useAttrs, withKeys, withModifiers, defineAsyncComponent, onBeforeUpdate, onBeforeUnmount, useCssVars, isRef, withDirectives, vModelText, createTextVNode, normalizeProps, createSlots, guardReactiveProps } from 'vue';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, readonly, nextTick, useId, Fragment, renderList, watchEffect, useAttrs, withKeys, withModifiers, defineAsyncComponent, onBeforeUpdate, onBeforeUnmount, useCssVars, isRef, withDirectives, vModelText, createTextVNode, normalizeProps, createSlots, guardReactiveProps } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$W = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_1$X = ["role", "title", "aria-hidden", "aria-label"];
 const _hoisted_2$x = ["src"];
-const _hoisted_3$n = {
+const _hoisted_3$o = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$1o = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -59,10 +59,10 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$x)) : (openBlock(), createElementBlock("div", _hoisted_3$n, [
+        }, null, 40, _hoisted_2$x)) : (openBlock(), createElementBlock("div", _hoisted_3$o, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$W);
+      ], 10, _hoisted_1$X);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-c90668bf"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["__scopeId", "data-v-c90668bf"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -117,7 +117,7 @@ function useIcon({
   return iconComponent;
 }
 
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -146,7 +146,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__scopeId", "data-v-fb124eb6"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-fb124eb6"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -483,8 +483,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$V = ["title"];
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$W = ["title"];
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -524,12 +524,12 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$V);
+      ], 10, _hoisted_1$W);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-3b8ebdbd"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-3b8ebdbd"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -546,8 +546,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$U = { class: "label-wrapper" };
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$V = { class: "label-wrapper" };
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -569,13 +569,13 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$U, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$V, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__scopeId", "data-v-df64f7cf"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -594,14 +594,14 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$T = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_1$U = ["role", "title", "aria-hidden", "aria-label"];
 const RGBA_SHORT_HEX_LENGTH = 4;
 const RGBA_LONG_HEX_LENGTH = 8;
 const ALPHA_NIBBLE_INDEX = 3;
 const ALPHA_BYTE_START = 6;
 const RGB_SHORT_HEX_LENGTH = 3;
 const RGB_LONG_HEX_LENGTH = 6;
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -676,12 +676,12 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(swatchStyle.value),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$T);
+      }, null, 14, _hoisted_1$U);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-91e0130d"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-91e0130d"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -801,9 +801,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$S = ["title", "aria-label"];
+const _hoisted_1$T = ["title", "aria-label"];
 const _hoisted_2$w = ["title"];
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -833,12 +833,12 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
         }, toDisplayString(__props.label), 9, _hoisted_2$w)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$S);
+      ], 10, _hoisted_1$T);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-01555495"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-01555495"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -854,8 +854,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$R = ["data-style"];
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$S = ["data-style"];
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -880,12 +880,12 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$R);
+      ])], 10, _hoisted_1$S);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-54835dc0"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-54835dc0"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -895,14 +895,14 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$Q = ["role"];
+const _hoisted_1$R = ["role"];
 const _hoisted_2$v = { class: "header" };
-const _hoisted_3$m = { class: "headline" };
-const _hoisted_4$h = {
+const _hoisted_3$n = { class: "headline" };
+const _hoisted_4$i = {
   key: 0,
   class: "body"
 };
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
     headline: {},
@@ -939,15 +939,15 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$m, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$n, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$h, toDisplayString(props.description), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$Q);
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$i, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$R);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["__scopeId", "data-v-af14056f"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-af14056f"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -957,10 +957,10 @@ const kdsInlineMessageVariant = {
 };
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
-const _hoisted_1$P = { class: "donut-container" };
+const _hoisted_1$Q = { class: "donut-container" };
 const _hoisted_2$u = ["height", "width", "viewBox"];
-const _hoisted_3$l = ["r", "stroke-width"];
-const _hoisted_4$g = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_3$m = ["r", "stroke-width"];
+const _hoisted_4$h = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
 const _hoisted_5$8 = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
 const _hoisted_6$7 = {
   key: 0,
@@ -974,7 +974,7 @@ const _hoisted_8$2 = {
 const radius = 22;
 const innerRadius = 10;
 const backgroundStrokeOffset = 0.5;
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "KdsDonutChart",
   props: {
     value: {},
@@ -1022,7 +1022,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     const transformWedge = computed(() => `rotate(-90, ${radius}, ${radius})`);
     const disabled = computed(() => !Number.isFinite(__props.maxValue));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$P, [
+      return openBlock(), createElementBlock("div", _hoisted_1$Q, [
         (openBlock(), createElementBlock("svg", {
           height: diameter.value,
           width: diameter.value,
@@ -1036,7 +1036,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
             r: r.value,
             "stroke-width": backgroundStrokeWidth.value,
             fill: "transparent"
-          }, null, 8, _hoisted_3$l),
+          }, null, 8, _hoisted_3$m),
           __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 0,
             class: normalizeClass(["value-wedge", "secondary-circle", { animate: __props.animate }]),
@@ -1048,7 +1048,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
             "stroke-dashoffset": secondaryStrokeDashOffset.value,
             fill: "transparent",
             transform: transformWedge.value
-          }, null, 10, _hoisted_4$g)) : createCommentVNode("", true),
+          }, null, 10, _hoisted_4$h)) : createCommentVNode("", true),
           !disabled.value ? (openBlock(), createElementBlock("circle", {
             key: 1,
             class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
@@ -1071,22 +1071,22 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDonutChart = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__scopeId", "data-v-66e88c70"]]);
+const KdsDonutChart = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-66e88c70"]]);
 
-const _sfc_main$1f = {  };
+const _sfc_main$1h = {  };
 
-const _hoisted_1$O = { class: "kds-divider" };
+const _hoisted_1$P = { class: "kds-divider" };
 
 function _sfc_render(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$O))
+  return (openBlock(), createElementBlock("hr", _hoisted_1$P))
 }
-const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1f, [['render',_sfc_render],['__scopeId',"data-v-4d059bd3"]]);
+const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1h, [['render',_sfc_render],['__scopeId',"data-v-4d059bd3"]]);
 
-const _hoisted_1$N = {
+const _hoisted_1$O = {
   key: 0,
   class: "label"
 };
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -1133,6 +1133,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.component), {
+        type: __props.component === "button" ? "button" : void 0,
         class: normalizeClass(classes.value),
         disabled: __props.disabled,
         title: props.title,
@@ -1147,7 +1148,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$N, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$O, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -1155,14 +1156,14 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name", "size"])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["class", "disabled", "title", "aria-label"]);
+      }, 8, ["type", "class", "disabled", "title", "aria-label"]);
     };
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-a696a1ec"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__scopeId", "data-v-80e22f2e"]]);
 
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -1227,7 +1228,7 @@ function isExternalUrl(url) {
   return true;
 }
 
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -1456,12 +1457,12 @@ function prettyBytes(number, options) {
 	return applyFixedWidth(result, options.fixedWidth);
 }
 
-const _hoisted_1$M = { class: "label" };
+const _hoisted_1$N = { class: "label" };
 const _hoisted_2$t = {
   key: 1,
   class: "file-size"
 };
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "KdsLink",
   props: {
     to: {},
@@ -1551,7 +1552,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
         onClick
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$M, toDisplayString(__props.label), 1),
+          createElementVNode("span", _hoisted_1$N, toDisplayString(__props.label), 1),
           variant.value === "external" ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: "external-link",
@@ -1565,9 +1566,9 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-56e748a8"]]);
+const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-56e748a8"]]);
 
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1603,9 +1604,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
-const _hoisted_1$L = ["data-visible"];
+const _hoisted_1$M = ["data-visible"];
 const _hoisted_2$s = ["data-visible"];
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1666,7 +1667,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$L),
+            ], 8, _hoisted_1$M),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
@@ -1684,7 +1685,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-d38d7ade"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-d38d7ade"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1700,10 +1701,14 @@ const kdsListItemVariant = {
 };
 
 const isTextInput = (target) => target instanceof HTMLElement && ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
-const idsChanged = (a, b) => a.length !== b.length || a.some((id, i) => id !== b[i]);
+const diffIds = (a, b) => a.length !== b.length || a.some((id, i) => id !== b[i]);
 const useListItemKeyboardNav = (options) => {
-  const { containerEl, selectableItems, enabledItems } = options;
-  const isFocused = ref(false);
+  const {
+    containerEl,
+    selectableItems,
+    enabledItems,
+    itemFocusStrategy = "persistent"
+  } = options;
   const activeId = ref(void 0);
   function scrollToView() {
     if (!activeId.value || !containerEl.value) {
@@ -1711,42 +1716,6 @@ const useListItemKeyboardNav = (options) => {
     }
     containerEl.value?.querySelector(`#${CSS.escape(activeId.value)}`)?.scrollIntoView({ block: "nearest" });
   }
-  function scrollSelectedIntoView() {
-    nextTick(() => {
-      const selected = containerEl.value?.querySelector(
-        '[aria-selected="true"]'
-      );
-      selected?.scrollIntoView({ block: "center" });
-    });
-  }
-  const lastActiveId = ref(void 0);
-  const enabledIds = computed(() => enabledItems.value.map(({ id }) => id));
-  let prevEnabledIds = [];
-  const firstEnabledOrEmpty = (values) => {
-    if (values.length > 0) {
-      return values[0].id;
-    }
-    return selectableItems.value.length === 0 ? options.emptyOptionId : void 0;
-  };
-  const getResetActiveId = (values) => {
-    if (activeId.value === void 0) {
-      return activeId.value;
-    }
-    if (isFocused.value && idsChanged(enabledIds.value, prevEnabledIds)) {
-      return firstEnabledOrEmpty(values);
-    }
-    const stillValid = values.some((o) => o.id === activeId.value);
-    return stillValid ? activeId.value : firstEnabledOrEmpty(values);
-  };
-  watch([enabledItems, () => options.loading], ([values, isLoading]) => {
-    activeId.value = isLoading ? options.emptyOptionId : getResetActiveId(values);
-    const lastIdStillValid = values.some((o) => o.id === lastActiveId.value);
-    if (!lastIdStillValid) {
-      lastActiveId.value = void 0;
-    }
-    prevEnabledIds = enabledIds.value;
-    nextTick(scrollToView);
-  });
   const findEnabledIndex = (id) => id === void 0 ? -1 : enabledItems.value.findIndex((o) => o.id === id);
   const moveDown = (currentIndex) => {
     if (currentIndex < 0) {
@@ -1813,53 +1782,87 @@ const useListItemKeyboardNav = (options) => {
         break;
     }
   };
-  const focus = () => {
+  const isFocused = ref(false);
+  const lastActiveId = ref(void 0);
+  const updateActiveItemId = (didIdsChange = false) => {
+    function assertUnreachable(_) {
+      throw new Error("Exhaustive check not met");
+    }
     isFocused.value = true;
-    if (activeId.value === void 0 && !options.allowNoSelection) {
-      activeId.value = lastActiveId.value ?? enabledItems.value[0]?.id;
+    switch (itemFocusStrategy) {
+      case "always-first": {
+        activeId.value = enabledItems.value.at(0)?.id;
+        return;
+      }
+      case "persistent": {
+        const hasActiveId = activeId.value !== void 0;
+        if (!didIdsChange && hasActiveId) {
+          return;
+        }
+        const isStillAvailable = enabledItems.value.find(
+          ({ id }) => lastActiveId.value === id
+        );
+        activeId.value = isStillAvailable ? lastActiveId.value : enabledItems.value.at(0)?.id;
+        lastActiveId.value = activeId.value;
+        return;
+      }
+      case "noop": {
+        activeId.value = void 0;
+        lastActiveId.value = void 0;
+        return;
+      }
+      default:
+        assertUnreachable();
     }
   };
+  watch(
+    [enabledItems, () => options.loading],
+    ([currentValues, isLoading], [prevValues]) => {
+      if (!isFocused.value) {
+        return;
+      }
+      if (isLoading && options.emptyOptionId) {
+        activeId.value = options.emptyOptionId;
+        return;
+      }
+      const didIdsChange = diffIds(
+        currentValues.map(({ id }) => id),
+        prevValues.map(({ id }) => id)
+      );
+      updateActiveItemId(didIdsChange);
+    }
+  );
   const blur = () => {
-    isFocused.value = false;
     lastActiveId.value = activeId.value;
     activeId.value = void 0;
+    isFocused.value = false;
   };
   const setActiveId = (id) => {
     activeId.value = id;
   };
-  const onMouseLeave = () => {
-    if (!isFocused.value) {
-      setActiveId(void 0);
-    }
-  };
-  const onMousemove = (event) => {
-    const target = event.target?.closest?.(
-      `[role="${toValue(options.listItemRole)}"]`
-    );
-    if (target instanceof HTMLElement && target.id && target.getAttribute("aria-disabled") !== "true") {
-      setActiveId(target.id);
-    } else if (!isFocused.value) {
-      setActiveId(void 0);
-    }
-  };
+  const focus = () => updateActiveItemId();
   onMounted(() => {
     containerEl.value?.addEventListener("keydown", handleKeydown);
     containerEl.value?.addEventListener("focus", focus);
     containerEl.value?.addEventListener("blur", blur);
-    containerEl.value?.addEventListener("mousemove", onMousemove);
-    containerEl.value?.addEventListener("mouseleave", onMouseLeave);
   });
   onUnmounted(() => {
     containerEl.value?.removeEventListener("keydown", handleKeydown);
     containerEl.value?.removeEventListener("focus", focus);
     containerEl.value?.removeEventListener("blur", blur);
-    containerEl.value?.removeEventListener("mousemove", onMousemove);
-    containerEl.value?.removeEventListener("mouseleave", onMouseLeave);
   });
+  function scrollSelectedIntoView() {
+    nextTick(() => {
+      const selected = containerEl.value?.querySelector(
+        '[aria-selected="true"]'
+      );
+      selected?.scrollIntoView({ block: "center" });
+    });
+  }
   return {
     handleKeydown,
     activeId: readonly(activeId),
-    focus,
+    focus: updateActiveItemId,
     blur,
     setActiveId,
     scrollSelectedIntoView
@@ -1910,7 +1913,7 @@ const useStableItemIds = (options) => {
   return { itemsWithPrefix, idPrefix, toUnprefixedId };
 };
 
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -1956,13 +1959,13 @@ const kdsListItemAccessorySize = {
   LARGE: "large"
 };
 
-const _hoisted_1$K = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_1$L = ["id", "role", "aria-selected", "aria-disabled"];
 const _hoisted_2$r = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$k = { class: "content" };
-const _hoisted_4$f = ["title"];
+const _hoisted_3$l = { class: "content" };
+const _hoisted_4$g = ["title"];
 const _hoisted_5$7 = {
   key: 0,
   class: "prefix"
@@ -1977,7 +1980,7 @@ const _hoisted_9$1 = {
   key: 3,
   class: "trailing-item-reserve-space"
 };
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
@@ -2036,13 +2039,13 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
         onClick
       }, [
         props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$r, [
-          createVNode(_sfc_main$18, {
+          createVNode(_sfc_main$1a, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$k, [
+        createElementVNode("span", _hoisted_3$l, [
           createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
@@ -2053,7 +2056,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.label), 3)
-          ], 8, _hoisted_4$f),
+          ], 8, _hoisted_4$g),
           props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
@@ -2076,20 +2079,20 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])) : createCommentVNode("", true),
           !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_9$1)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$K);
+      ], 10, _hoisted_1$L);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-def6165b"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-def6165b"]]);
 
-const _hoisted_1$J = { class: "kds-list-item-section-title" };
+const _hoisted_1$K = { class: "kds-list-item-section-title" };
 const _hoisted_2$q = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$j = ["title"];
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$k = ["title"];
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -2100,7 +2103,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$J, [
+      return openBlock(), createElementBlock("div", _hoisted_1$K, [
         props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$q, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
@@ -2112,15 +2115,15 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$j)
+        }, toDisplayString(props.label), 9, _hoisted_3$k)
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-5eeb1226"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-5eeb1226"]]);
 
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuItem",
   props: {
     item: {},
@@ -2164,19 +2167,20 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$I = ["id", "aria-label", "aria-activedescendant"];
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$J = ["id", "aria-label", "aria-activedescendant"];
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
     id: {},
     ariaLabel: { default: "Menu" },
     items: {},
     menuMaxHeight: {},
-    variant: { default: () => kdsListItemVariant.SMALL }
+    variant: { default: () => kdsListItemVariant.SMALL },
+    itemFocusStrategy: { default: "noop" }
   },
   emits: ["itemClick"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    const props = createPropsRestProxy(__props, ["ariaLabel", "menuMaxHeight", "variant"]);
+    const props = createPropsRestProxy(__props, ["ariaLabel", "menuMaxHeight", "variant", "itemFocusStrategy"]);
     const emit = __emit;
     const { itemsWithPrefix, toUnprefixedId } = useStableItemIds({
       items: computed(() => props.items)
@@ -2190,15 +2194,19 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     const handleItemInteraction = (item, event) => {
       const id = toUnprefixedId(item.id);
       const originalItem = props.items.find((i) => i.id === id);
-      originalItem?.handler?.(originalItem, event);
+      try {
+        originalItem?.handler?.(originalItem, event);
+      } catch (error) {
+        console.error("Failed while calling item handler", { item, error });
+      }
       emit("itemClick", id);
     };
     const containerEl = useTemplateRef("containerEl");
-    const { activeId, focus } = useListItemKeyboardNav({
+    const { activeId } = useListItemKeyboardNav({
       containerEl,
       enabledItems,
       selectableItems,
-      listItemRole: "menuitem",
+      itemFocusStrategy: __props.itemFocusStrategy,
       triggers: {
         onEnter: (_activeId, item, event) => {
           handleItemInteraction(item, event);
@@ -2210,11 +2218,11 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
     });
     __expose({
       /**
-       * Function to focus the outer container of the menu. Also sets programmatic focus (with correct aria attributes) to the first item in the list
+       * Function to focus the outer container of the menu.
+       * It will follow the behavior defined by the `itemFocusStrategy` prop.
        */
       focus: () => {
         containerEl.value?.focus();
-        focus();
       }
     });
     return (_ctx, _cache) => {
@@ -2230,7 +2238,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         "aria-activedescendant": unref(activeId)
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemsWithPrefix), (item, index) => {
-          return openBlock(), createBlock(_sfc_main$15, {
+          return openBlock(), createBlock(_sfc_main$17, {
             key: item.id,
             item,
             "is-last": index === unref(itemsWithPrefix).length - 1,
@@ -2239,12 +2247,12 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
             onClick: ($event) => handleItemInteraction(item, $event)
           }, null, 8, ["item", "is-last", "active-id", "variant", "onClick"]);
         }), 128))
-      ], 12, _hoisted_1$I);
+      ], 12, _hoisted_1$J);
     };
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-68200614"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-69149ee8"]]);
 
 const kdsPopoverPlacement = {
   CUSTOM: "custom"
@@ -2252,12 +2260,12 @@ const kdsPopoverPlacement = {
 const kdsPopoverType = {
   AUTO: "auto"};
 
-const _hoisted_1$H = ["id", "popover", "role"];
+const _hoisted_1$I = ["id", "popover", "role"];
 const _hoisted_2$p = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     role: {},
@@ -2317,19 +2325,19 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "default", {}, () => [
           props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$p, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
-      ], 46, _hoisted_1$H);
+      ], 46, _hoisted_1$I);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-1e5f9d24"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["__scopeId", "data-v-1e5f9d24"]]);
 
 const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsPopover
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2379,7 +2387,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     __expose({ menuButtonEl });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$1a, mergeProps({
+        createVNode(_sfc_main$1c, mergeProps({
           ref: "menuButton",
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event)
@@ -2412,7 +2420,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsSplitButton",
   props: {
     size: { default: "medium" },
@@ -2499,7 +2507,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSplitButton = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-8f48b87a"]]);
+const KdsSplitButton = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-8f48b87a"]]);
 
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -2515,17 +2523,17 @@ const kdsButtonVariant = {
 };
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
-const _hoisted_1$G = ["aria-disabled"];
+const _hoisted_1$H = ["aria-disabled"];
 const _hoisted_2$o = { class: "kds-empty-state-headline" };
-const _hoisted_3$i = {
+const _hoisted_3$j = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$e = {
+const _hoisted_4$f = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -2543,13 +2551,13 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$1c : _sfc_main$1d
+      () => isLinkButton.value ? _sfc_main$1e : _sfc_main$1f
     );
     const isSecondaryLinkButton = computed(
       () => props.secondaryButton && "to" in props.secondaryButton && props.secondaryButton.to !== void 0
     );
     const secondaryButtonComponent = computed(
-      () => isSecondaryLinkButton.value ? _sfc_main$1c : _sfc_main$1d
+      () => isSecondaryLinkButton.value ? _sfc_main$1e : _sfc_main$1f
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -2564,8 +2572,8 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
         createElementVNode("p", _hoisted_2$o, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$i, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$e, [
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$j, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$f, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
             disabled: props.button?.disabled || __props.disabled,
             onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("buttonClick", $event))
@@ -2575,17 +2583,16 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => !__props.disabled && emit("secondaryButtonClick", $event))
           }), null, 16, ["disabled"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$G);
+      ], 10, _hoisted_1$H);
     };
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-e913660a"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-e913660a"]]);
 
-const _hoisted_1$F = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
-const _hoisted_2$n = ["role"];
+const _hoisted_1$G = ["aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
 const loadingStateText = "Loading entries";
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
@@ -2595,11 +2602,11 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     ariaLabel: {},
     controlledExternally: { type: Boolean },
     allowNoSelection: { type: Boolean, default: false },
-    role: { default: "listbox" }
+    itemFocusStrategy: { default: "persistent" }
   },
   emits: ["itemClick"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    const props = createPropsRestProxy(__props, ["emptyText", "variant", "loading", "role", "allowNoSelection"]);
+    const props = createPropsRestProxy(__props, ["emptyText", "variant", "loading", "allowNoSelection", "itemFocusStrategy"]);
     const emit = __emit;
     const { itemsWithPrefix, idPrefix, toUnprefixedId } = useStableItemIds({
       items: computed(() => __props.loading ? [] : props.possibleValues)
@@ -2615,9 +2622,6 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
       () => itemsWithPrefix.value.filter((item) => !item.sectionHeadline)
     );
     const containerEl = useTemplateRef("containerEl");
-    const listItemRole = computed(() => {
-      return __props.role === "listbox" ? "option" : "menuitem";
-    });
     const enabledValues = computed(
       () => selectableValues.value.filter((o) => !o.disabled)
     );
@@ -2628,7 +2632,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
       allowNoSelection: __props.allowNoSelection,
       emptyOptionId,
       loading: __props.loading,
-      listItemRole,
+      itemFocusStrategy: __props.itemFocusStrategy,
       triggers: {
         onEnter: () => {
           emit("itemClick", toOptionId(activeId.value));
@@ -2656,14 +2660,11 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
         ref_key: "containerEl",
         ref: containerEl,
-        role: __props.role,
+        role: "listbox",
         "aria-busy": __props.loading,
         "aria-label": props.ariaLabel,
         "aria-activedescendant": !props.controlledExternally && unref(activeId) ? unref(activeId) : void 0,
-        class: [
-          "kds-list-container",
-          { standalone: !props.controlledExternally, menu: __props.role === "menu" }
-        ],
+        class: ["kds-list-container", { standalone: !props.controlledExternally }],
         tabindex: props.controlledExternally ? void 0 : 0
       }), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemsWithPrefix), (item, index) => {
@@ -2689,10 +2690,10 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
               missing: item.missing,
               variant: __props.variant,
               "trailing-icon": item.missing && !item.disabled ? "trash" : item.selected ? "checkmark" : void 0,
-              role: listItemRole.value,
+              role: "option",
               onMousedown: _cache[0] || (_cache[0] = ($event) => props.controlledExternally && $event.preventDefault()),
               onClick: ($event) => !item.disabled && emit("itemClick", toOptionId(item.id))
-            }, null, 8, ["id", "accessory", "label", "sub-text", "selected", "disabled", "active", "special", "missing", "variant", "trailing-icon", "role", "onClick"])),
+            }, null, 8, ["id", "accessory", "label", "sub-text", "selected", "disabled", "active", "special", "missing", "variant", "trailing-icon", "onClick"])),
             item.separator && index < unref(itemsWithPrefix).length - 1 ? (openBlock(), createBlock(unref(KdsDivider), {
               key: 2,
               class: "kds-list-item-divider",
@@ -2704,7 +2705,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         selectableValues.value.length === 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
           id: emptyOptionId,
-          role: listItemRole.value,
+          role: "option",
           "aria-disabled": "true",
           "aria-selected": "false",
           class: "kds-list-container-empty"
@@ -2713,20 +2714,20 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
             headline: __props.loading ? loadingStateText : __props.emptyText,
             "loading-spinner": __props.loading
           }, null, 8, ["headline", "loading-spinner"])
-        ], 8, _hoisted_2$n)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$F);
+        ])) : createCommentVNode("", true)
+      ], 16, _hoisted_1$G);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-5e1d539e"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-570992f0"]]);
 
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsListContainer
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsMenu",
   props: {
@@ -2743,8 +2744,8 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     const popoverEl = useTemplateRef("popover");
     const menuContainerEl = useTemplateRef("menuContainer");
     const menuId = useId();
-    watch(isMenuOpen, async (menuOpen) => {
-      if (!menuOpen) {
+    watch(isMenuOpen, async () => {
+      if (!isMenuOpen.value) {
         return;
       }
       await nextTick();
@@ -2815,7 +2816,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsContextMenu",
   props: /* @__PURE__ */ mergeModels({
@@ -2839,6 +2840,14 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       open.value = false;
       emit("itemClick", itemId);
     };
+    const menuContainerEl = useTemplateRef("menuContainer");
+    watch(open, async (isOpen) => {
+      if (!isOpen) {
+        return;
+      }
+      await nextTick();
+      menuContainerEl.value?.focus();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(KdsPopover, {
         modelValue: open.value,
@@ -2851,6 +2860,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(KdsMenuContainer, {
             id: props.id,
+            ref: "menuContainer",
             "aria-label": props.ariaLabel,
             items: props.items,
             "menu-max-height": __props.menuMaxHeight,
@@ -2866,9 +2876,9 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$E = { class: "kds-label-wrapper" };
-const _hoisted_2$m = ["id", "for", "title"];
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$F = { class: "kds-label-wrapper" };
+const _hoisted_2$n = ["id", "for", "title"];
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -2885,7 +2895,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$E, [
+      return openBlock(), createElementBlock("div", _hoisted_1$F, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -2893,7 +2903,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$m),
+        }, toDisplayString(props.label), 9, _hoisted_2$n),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -2904,11 +2914,11 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-efe3313e"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__scopeId", "data-v-efe3313e"]]);
 
-const _hoisted_1$D = ["id"];
-const _hoisted_2$l = { class: "subtext-text" };
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _hoisted_1$E = ["id"];
+const _hoisted_2$m = { class: "subtext-text" };
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -2939,27 +2949,27 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$l, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$D)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$m, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$E)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-2e6ba10c"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-2e6ba10c"]]);
 
-const _hoisted_1$C = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$k = { class: "control" };
-const _hoisted_3$h = {
+const _hoisted_1$D = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$l = { class: "control" };
+const _hoisted_3$i = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$d = { class: "label" };
+const _hoisted_4$e = { class: "label" };
 const _hoisted_5$6 = ["id"];
 const _hoisted_6$5 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -3032,7 +3042,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$k, [
+          createElementVNode("div", _hoisted_2$l, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -3040,15 +3050,15 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$h, [
-            createElementVNode("div", _hoisted_4$d, toDisplayString(props.label), 1),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$i, [
+            createElementVNode("div", _hoisted_4$e, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
               class: "helper-text"
             }, toDisplayString(props.helperText), 9, _hoisted_5$6)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$C),
+        ], 10, _hoisted_1$D),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -3062,9 +3072,9 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-7bfc5667"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-7bfc5667"]]);
 
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -3094,11 +3104,11 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$B = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
-const _hoisted_2$j = ["id"];
-const _hoisted_3$g = ["title"];
-const _hoisted_4$c = { class: "kds-fieldset-content" };
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _hoisted_1$C = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
+const _hoisted_2$k = ["id"];
+const _hoisted_3$h = ["title"];
+const _hoisted_4$d = { class: "kds-fieldset-content" };
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "BaseFieldsetWrapper",
   props: {
     id: {},
@@ -3144,14 +3154,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             ref: legendTextEl,
             class: "legend-text",
             title: unref(isTruncated) ? props.label : void 0
-          }, toDisplayString(props.label), 9, _hoisted_3$g),
+          }, toDisplayString(props.label), 9, _hoisted_3$h),
           props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
             key: 0,
             content: props.description,
             hidden: !isHovered.value
           }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$j)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_4$c, [
+        ], 8, _hoisted_2$k)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_4$d, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         createVNode(KdsSubText, {
@@ -3161,14 +3171,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           validating: props.validating,
           "preserve-sub-text-space": props.preserveSubTextSpace
         }, null, 8, ["id", "sub-text", "error", "validating", "preserve-sub-text-space"])
-      ], 40, _hoisted_1$B);
+      ], 40, _hoisted_1$C);
     };
   }
 });
 
-const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-a44731da"]]);
+const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-a44731da"]]);
 
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3247,7 +3257,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-c6536296"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-c6536296"]]);
 
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -3263,19 +3273,19 @@ const kdsCheckboxValue = {
 };
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
 
-const _hoisted_1$A = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$i = { class: "control" };
-const _hoisted_3$f = {
+const _hoisted_1$B = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$j = { class: "control" };
+const _hoisted_3$g = {
   key: 0,
   class: "dot",
   viewBox: "0 0 2 2",
   "aria-hidden": "true",
   focusable: "false"
 };
-const _hoisted_4$b = { class: "content" };
+const _hoisted_4$c = { class: "content" };
 const _hoisted_5$5 = { class: "label" };
 const _hoisted_6$4 = ["id"];
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -3315,8 +3325,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$i, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$f, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$j, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$g, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -3324,7 +3334,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$b, [
+        createElementVNode("div", _hoisted_4$c, [
           createElementVNode("div", _hoisted_5$5, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -3332,12 +3342,12 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             class: "helper-text"
           }, toDisplayString(props.helperText), 9, _hoisted_6$4)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$A);
+      ], 10, _hoisted_1$B);
     };
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-f4f6392a"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-f4f6392a"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -3459,7 +3469,7 @@ const useRadioSelection = ({
   };
 };
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3534,10 +3544,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-d78ed4a2"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-d78ed4a2"]]);
 
-const _hoisted_1$z = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$A = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -3587,12 +3597,12 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$z);
+      ], 10, _hoisted_1$A);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5c6f0f1f"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-5c6f0f1f"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -3643,7 +3653,7 @@ const useValueSwitchIconHiding = ({
   };
 };
 
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3730,7 +3740,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-640271e0"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-640271e0"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -3750,7 +3760,7 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -3802,7 +3812,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5d99c134"]]);
 
 const MIN_SEGMENT_INDEX = 0;
 const LARGE_STEP = 10;
@@ -4482,16 +4492,16 @@ const useInputSegments = (modelValue, getInputElement, configRef) => {
   };
 };
 
-const _hoisted_1$y = {
+const _hoisted_1$z = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$h = {
+const _hoisted_2$i = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$e = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
-const _hoisted_4$a = ["aria-disabled"];
+const _hoisted_3$f = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
+const _hoisted_4$b = ["aria-disabled"];
 const _hoisted_5$4 = {
   key: 4,
   class: "trailing-slot"
@@ -4500,7 +4510,7 @@ const _hoisted_6$3 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -4651,13 +4661,13 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$y, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$z, [
           props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.leadingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -4702,7 +4712,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           onCut: handleInputCut,
           onDrop: handleInputDrop,
           onDragend: handleInputDragEnd
-        }, null, 42, _hoisted_3$e),
+        }, null, 42, _hoisted_3$f),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -4711,11 +4721,10 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$a)) : createCommentVNode("", true),
-        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1d, {
+        }, toDisplayString(props.unit), 11, _hoisted_4$b)) : createCommentVNode("", true),
+        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1f, {
           key: 3,
           class: "clear-button",
-          type: "button",
           size: "xsmall",
           variant: "transparent",
           "leading-icon": "x-close",
@@ -4736,7 +4745,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-69242818"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-b8ccb955"]]);
 
 const usePointerHandler = (updateFromEvent) => {
   const activePointerId = ref(null);
@@ -4909,7 +4918,7 @@ const createKdsNumberParser = (params) => {
 
 const REPEAT_INITIAL_DELAY_MS = 400;
 const REPEAT_INTERVAL_MS = 100;
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -5095,8 +5104,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$1d, {
-                type: "button",
+              createVNode(_sfc_main$1f, {
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "minus",
@@ -5108,8 +5116,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 onPointerleave: stopRepeating,
                 onPointercancel: stopRepeating
               }, null, 8, ["ariaLabel", "disabled"]),
-              createVNode(_sfc_main$1d, {
-                type: "button",
+              createVNode(_sfc_main$1f, {
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "plus",
@@ -5131,7 +5138,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -5301,7 +5308,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-c9f1be40"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-c9f1be40"]]);
 
 const HEX_RADIX = 16;
 const RGB_MAX = 255;
@@ -5448,8 +5455,8 @@ const removeAlphaFromHexInput = (next) => {
   return next;
 };
 
-const _hoisted_1$x = ["aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"];
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _hoisted_1$y = ["aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"];
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "ColorPickerSlider",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -5533,16 +5540,16 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         onKeydown: onKeyDown
       }, [..._cache[5] || (_cache[5] = [
         createElementVNode("div", { class: "handle" }, null, -1)
-      ])], 40, _hoisted_1$x);
+      ])], 40, _hoisted_1$y);
     };
   }
 });
 
-const ColorPickerSlider = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-f4be2bd4"]]);
+const ColorPickerSlider = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-f4be2bd4"]]);
 
-const _hoisted_1$w = { class: "kds-color-picker" };
-const _hoisted_2$g = ["aria-valuetext"];
-const _hoisted_3$d = { class: "value-inputs" };
+const _hoisted_1$x = { class: "kds-color-picker" };
+const _hoisted_2$h = ["aria-valuetext"];
+const _hoisted_3$e = { class: "value-inputs" };
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
 const DEFAULT_VALUE = 0.9;
@@ -5556,7 +5563,7 @@ const KEYBOARD_LARGE_STEP = 0.1;
 const HUE_KEYBOARD_STEP_DEG = 1;
 const HUE_KEYBOARD_LARGE_STEP_DEG = 10;
 const TO_BOTTOM_GRADIENT = "linear-gradient(to bottom, transparent, black)";
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     "modelValue": { default: "" },
@@ -5704,7 +5711,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createElementVNode("div", {
           ref_key: "colorspaceEl",
           ref: colorspaceEl,
@@ -5732,7 +5739,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$g),
+        ], 44, _hoisted_2$h),
         createVNode(ColorPickerSlider, {
           modelValue: hue.value,
           "onUpdate:modelValue": [
@@ -5767,7 +5774,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
           step: KEYBOARD_STEP,
           "large-step": KEYBOARD_LARGE_STEP
         }, null, 8, ["modelValue", "value-now", "value-text"]),
-        createElementVNode("div", _hoisted_3$d, [
+        createElementVNode("div", _hoisted_3$e, [
           createVNode(KdsTextInput, {
             "model-value": hexInputValue.value,
             ariaLabel: "Color hex value",
@@ -5775,7 +5782,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": updateFromTextValue,
             onFocusout: onHexInputFocusOut
           }, null, 8, ["model-value"]),
-          createVNode(_sfc_main$M, {
+          createVNode(_sfc_main$O, {
             "model-value": alphaPercent.value,
             ariaLabel: "Alpha percentage",
             min: 0,
@@ -5790,7 +5797,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-2daeaa68"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-2daeaa68"]]);
 
 const HEX_LENGTH_1 = 1;
 const HEX_LENGTH_2 = 2;
@@ -5864,7 +5871,7 @@ const useColorInputValidationOnFocusOut = (modelValue) => {
   return { handleFocusOut };
 };
 
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "KdsColorInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -5927,7 +5934,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["color", "style"])
               ]),
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$1a), {
+                createVNode(unref(_sfc_main$1c), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -5967,7 +5974,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsPasswordInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -6028,11 +6035,10 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              __props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$1a, {
+              __props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$1c, {
                 key: 0,
                 modelValue: showValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showValue.value = $event),
-                type: "button",
                 variant: "outlined",
                 size: "xsmall",
                 "leading-icon": "eye",
@@ -6069,7 +6075,7 @@ const kdsPasswordInputAutocompletes = Object.values(
   kdsPasswordInputAutocomplete
 );
 
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "KdsUsernameInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -10080,17 +10086,17 @@ const sn = /*@__PURE__*/ new WeakMap, cn = /*@__PURE__*/ sn.get.bind(sn), un = /
   DateTimeFormat: Xn
 }));
 
-const _hoisted_1$v = {
+const _hoisted_1$w = {
   role: "row",
   class: "kds-date-picker-header-row"
 };
-const _hoisted_2$f = ["aria-label"];
-const _hoisted_3$c = { class: "kds-date-picker-day-grid" };
-const _hoisted_4$9 = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onFocus"];
+const _hoisted_2$g = ["aria-label"];
+const _hoisted_3$d = { class: "kds-date-picker-day-grid" };
+const _hoisted_4$a = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onFocus"];
 const REFERENCE_YEAR$2 = 2024;
 const DAYS_PER_WEEK = 7;
 const TOTAL_CELLS = 42;
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "DatePickerDayGrid",
   props: {
     modelValue: {},
@@ -10385,17 +10391,17 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         role: "grid",
         "aria-label": "Calendar"
       }, [
-        createElementVNode("div", _hoisted_1$v, [
+        createElementVNode("div", _hoisted_1$w, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(DAY_LABELS), (day, i) => {
             return openBlock(), createElementBlock("div", {
               key: day,
               role: "columnheader",
               "aria-label": unref(DAY_FULL_LABELS)[i],
               class: "kds-date-picker-weekday"
-            }, toDisplayString(day), 9, _hoisted_2$f);
+            }, toDisplayString(day), 9, _hoisted_2$g);
           }), 128))
         ]),
-        createElementVNode("div", _hoisted_3$c, [
+        createElementVNode("div", _hoisted_3$d, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week, wi) => {
             return openBlock(), createElementBlock("div", {
               key: wi,
@@ -10424,7 +10430,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                   onClick: ($event) => selectDate(day),
                   onKeydown: onDayKeydown,
                   onFocus: ($event) => onDayFocus(day)
-                }, toDisplayString(day.day), 43, _hoisted_4$9);
+                }, toDisplayString(day.day), 43, _hoisted_4$a);
               }), 128))
             ]);
           }), 128))
@@ -10434,13 +10440,13 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DatePickerDayGrid = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-51807b35"]]);
+const DatePickerDayGrid = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-51807b35"]]);
 
-const _hoisted_1$u = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onKeydown", "onFocus"];
+const _hoisted_1$v = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onKeydown", "onFocus"];
 const REFERENCE_YEAR$1 = 2024;
 const MONTHS_PER_YEAR$1 = 12;
 const MONTH_GRID_COLS = 3;
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "DatePickerMonthGrid",
   props: {
     modelValue: {},
@@ -10630,7 +10636,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                 onClick: ($event) => selectMonth(cell.month),
                 onKeydown: ($event) => onKeydown($event, cell.month),
                 onFocus: ($event) => focusedCell.value = cell.month
-              }, toDisplayString(cell.label), 43, _hoisted_1$u);
+              }, toDisplayString(cell.label), 43, _hoisted_1$v);
             }), 128))
           ]);
         }), 128))
@@ -10639,12 +10645,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DatePickerMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-63d96e84"]]);
+const DatePickerMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-63d96e84"]]);
 
-const _hoisted_1$t = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onKeydown", "onFocus"];
+const _hoisted_1$u = ["aria-selected", "aria-disabled", "aria-label", "disabled", "tabindex", "onClick", "onKeydown", "onFocus"];
 const YEAR_PAGE_SIZE$1 = 15;
 const YEAR_GRID_COLS = 3;
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "DatePickerYearGrid",
   props: {
     modelValue: {},
@@ -10802,7 +10808,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 onClick: ($event) => selectYear(cell.year),
                 onKeydown: ($event) => onKeydown($event, cell.year),
                 onFocus: ($event) => focusedCell.value = cell.year
-              }, toDisplayString(cell.label), 43, _hoisted_1$t);
+              }, toDisplayString(cell.label), 43, _hoisted_1$u);
             }), 128))
           ]);
         }), 128))
@@ -10811,12 +10817,12 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DatePickerYearGrid = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-270d55b9"]]);
+const DatePickerYearGrid = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-270d55b9"]]);
 
-const _hoisted_1$s = { class: "kds-date-picker" };
-const _hoisted_2$e = { class: "kds-date-picker-header" };
-const _hoisted_3$b = { class: "kds-date-picker-nav-block" };
-const _hoisted_4$8 = {
+const _hoisted_1$t = { class: "kds-date-picker" };
+const _hoisted_2$f = { class: "kds-date-picker-header" };
+const _hoisted_3$c = { class: "kds-date-picker-nav-block" };
+const _hoisted_4$9 = {
   key: 1,
   class: "kds-date-picker-header-static-label",
   "aria-live": "polite"
@@ -10826,7 +10832,7 @@ const _hoisted_6$2 = { class: "kds-date-picker-body" };
 const MONTHS_PER_YEAR = 12;
 const YEAR_PAGE_SIZE = 15;
 const REFERENCE_YEAR = 2024;
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "KdsDatePicker",
   props: /* @__PURE__ */ mergeModels({
     minDate: {},
@@ -11022,10 +11028,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     });
     __expose({ focus });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        createElementVNode("div", _hoisted_2$e, [
-          createElementVNode("div", _hoisted_3$b, [
-            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1d, {
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+        createElementVNode("div", _hoisted_2$f, [
+          createElementVNode("div", _hoisted_3$c, [
+            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1f, {
               key: 0,
               variant: "transparent",
               size: "small",
@@ -11034,7 +11040,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               disabled: prevYearDisabled.value,
               onClick: onPrevYear
             }, null, 8, ["disabled"])) : createCommentVNode("", true),
-            createVNode(_sfc_main$1d, {
+            createVNode(_sfc_main$1f, {
               variant: "transparent",
               size: "small",
               "leading-icon": "chevron-left",
@@ -11043,16 +11049,16 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               onClick: onPrev
             }, null, 8, ["ariaLabel", "disabled"])
           ]),
-          view.value !== "year" ? (openBlock(), createBlock(_sfc_main$1d, {
+          view.value !== "year" ? (openBlock(), createBlock(_sfc_main$1f, {
             key: 0,
             class: "kds-date-picker-header-label",
             variant: "transparent",
             size: "small",
             label: headerLabel.value,
             onClick: onHeaderLabelClick
-          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$8, toDisplayString(headerLabel.value), 1)),
+          }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_4$9, toDisplayString(headerLabel.value), 1)),
           createElementVNode("div", _hoisted_5$3, [
-            createVNode(_sfc_main$1d, {
+            createVNode(_sfc_main$1f, {
               variant: "transparent",
               size: "small",
               "leading-icon": "chevron-right",
@@ -11060,7 +11066,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               disabled: nextDisabled.value,
               onClick: onNext
             }, null, 8, ["ariaLabel", "disabled"]),
-            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1d, {
+            view.value === "day" ? (openBlock(), createBlock(_sfc_main$1f, {
               key: 0,
               variant: "transparent",
               size: "small",
@@ -11112,7 +11118,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-e46d7e18"]]);
+const KdsDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-e46d7e18"]]);
 
 const YEAR_END_INDEX = 4;
 const MONTH_START_INDEX = 4;
@@ -11215,7 +11221,7 @@ const useDateInputMask = (modelValue) => {
 
 const incompleteDateMessage = "Invalid date format. Please provide year (YYYY), month (MM), and day (DD).";
 const MONTH_NAME_SAMPLE_YEAR = 2001;
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "KdsDateInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -11328,10 +11334,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             onBlur: onTextInputBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$1a, {
+              createVNode(_sfc_main$1c, {
                 modelValue: popoverIsVisible.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => popoverIsVisible.value = $event),
-                type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "calendar",
@@ -11378,8 +11383,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$r = { class: "kds-date-time-format-popover" };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = { class: "kds-date-time-format-popover" };
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "DateTimeFormatPopover",
   props: /* @__PURE__ */ mergeModels({
     allDefaultFormats: {},
@@ -11517,7 +11522,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       }));
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
         modeOptions.value.length > 1 ? (openBlock(), createBlock(KdsValueSwitch, {
           key: 0,
           "model-value": effectiveSelectedMode.value,
@@ -11549,9 +11554,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-8c697d02"]]);
+const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-8c697d02"]]);
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "KdsDateTimeFormatInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -11598,7 +11603,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               autocomplete: props.autocomplete
             }), {
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$1a), {
+                createVNode(unref(_sfc_main$1c), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -11684,7 +11689,7 @@ const buildRegexFromPatternInput = (input, options) => {
   return `^(?!.*${withCase}).*$`;
 };
 
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsPatternInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -11767,7 +11772,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             clearable: ""
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$1a, {
+              createVNode(_sfc_main$1c, {
                 modelValue: caseSensitive.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
                 size: "xsmall",
@@ -11777,7 +11782,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 ariaLabel: "Case sensitivity",
                 disabled: __props.disabled
               }, null, 8, ["modelValue", "title", "disabled"]),
-              createVNode(_sfc_main$1a, {
+              createVNode(_sfc_main$1c, {
                 modelValue: excludeMatches.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
                 size: "xsmall",
@@ -11787,7 +11792,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 ariaLabel: "Exclude matches",
                 disabled: __props.disabled
               }, null, 8, ["modelValue", "title", "disabled"]),
-              createVNode(_sfc_main$1a, {
+              createVNode(_sfc_main$1c, {
                 modelValue: useRegex.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
                 size: "xsmall",
@@ -11807,7 +11812,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsSearchInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -11944,6 +11949,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   "possible-values": __props.results,
                   "controlled-externally": "",
                   "allow-no-selection": "",
+                  "item-focus-strategy": "noop",
                   "empty-text": "No search results",
                   "aria-label": "Search results list",
                   onItemClick: onResultClick
@@ -11959,11 +11965,11 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-3094963a"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-3e274ed2"]]);
 
-const _hoisted_1$q = ["rows", "placeholder", "disabled", "autocomplete"];
+const _hoisted_1$r = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "KdsTextarea",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -12024,7 +12030,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             placeholder: __props.placeholder,
             disabled: __props.disabled,
             autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$q), [
+          }), null, 16, _hoisted_1$r), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -12034,12 +12040,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-bdf12ef9"]]);
+const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-bdf12ef9"]]);
 
-const _hoisted_1$p = { class: "kds-time-picker" };
-const _hoisted_2$d = { class: "kds-time-picker-selected-time" };
-const _hoisted_3$a = { class: "kds-time-picker-fields" };
-const _hoisted_4$7 = { class: "kds-time-picker-fields" };
+const _hoisted_1$q = { class: "kds-time-picker" };
+const _hoisted_2$e = { class: "kds-time-picker-selected-time" };
+const _hoisted_3$b = { class: "kds-time-picker-fields" };
+const _hoisted_4$8 = { class: "kds-time-picker-fields" };
 const _hoisted_5$2 = {
   key: 0,
   class: "kds-time-picker-fields"
@@ -12056,7 +12062,7 @@ const MAX_HOUR = 23;
 const MAX_MINUTE = 59;
 const MAX_SECOND = 59;
 const MAX_MILLISECOND = 999;
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "TimePicker",
   props: /* @__PURE__ */ mergeModels({
     maxGranularity: {}
@@ -12157,10 +12163,10 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
     __expose({ focus });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        createElementVNode("div", _hoisted_2$d, toDisplayString(selectedTimeLabel.value), 1),
-        createElementVNode("div", _hoisted_3$a, [
-          createVNode(_sfc_main$M, {
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+        createElementVNode("div", _hoisted_2$e, toDisplayString(selectedTimeLabel.value), 1),
+        createElementVNode("div", _hoisted_3$b, [
+          createVNode(_sfc_main$O, {
             ref: "hourInput",
             modelValue: hour.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hour.value = $event),
@@ -12170,7 +12176,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             max: MAX_HOUR,
             step: 1
           }, null, 8, ["modelValue"]),
-          createVNode(_sfc_main$M, {
+          createVNode(_sfc_main$O, {
             modelValue: minute.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => minute.value = $event),
             class: "kds-time-picker-field",
@@ -12185,8 +12191,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           class: "kds-time-picker-divider"
         })) : createCommentVNode("", true),
         showSecondInput.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createElementVNode("div", _hoisted_4$7, [
-            createVNode(_sfc_main$M, {
+          createElementVNode("div", _hoisted_4$8, [
+            createVNode(_sfc_main$O, {
               ref: "secondInput",
               modelValue: second.value,
               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => second.value = $event),
@@ -12196,7 +12202,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               max: MAX_SECOND,
               step: 1
             }, null, 8, ["modelValue"]),
-            createVNode(_sfc_main$1d, {
+            createVNode(_sfc_main$1f, {
               class: "kds-time-picker-field-trash",
               variant: "transparent",
               "leading-icon": "trash",
@@ -12206,7 +12212,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             })
           ]),
           showMillisecondInput.value ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
-            createVNode(_sfc_main$M, {
+            createVNode(_sfc_main$O, {
               ref: "millisecondInput",
               modelValue: millisecond.value,
               "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => millisecond.value = $event),
@@ -12219,7 +12225,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               max: MAX_MILLISECOND,
               step: 1
             }, null, 8, ["modelValue"]),
-            createVNode(_sfc_main$1d, {
+            createVNode(_sfc_main$1f, {
               class: "kds-time-picker-field-trash",
               variant: "transparent",
               "leading-icon": "trash",
@@ -12228,7 +12234,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               onClick: removeMilliseconds
             })
           ])) : __props.maxGranularity === "millisecond" ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
-            createVNode(_sfc_main$1d, {
+            createVNode(_sfc_main$1f, {
               variant: "outlined",
               size: "small",
               "leading-icon": "plus",
@@ -12237,7 +12243,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             })
           ])) : createCommentVNode("", true)
         ], 64)) : __props.maxGranularity !== "minute" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-          createVNode(_sfc_main$1d, {
+          createVNode(_sfc_main$1f, {
             variant: "outlined",
             size: "small",
             "leading-icon": "plus",
@@ -12250,7 +12256,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-c2f06c87"]]);
+const TimePicker = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-c2f06c87"]]);
 
 const HOURS_END_INDEX = 2;
 const MINUTES_START_INDEX = 2;
@@ -12460,7 +12466,7 @@ const useTimeInputMask = (modelValue, granularityRef) => {
 };
 
 const invalidTimeMessage = "The entered time is invalid.";
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "KdsTimeInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -12575,10 +12581,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             onBlur: onTextInputBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$1a, {
+              createVNode(_sfc_main$1c, {
                 modelValue: popoverIsVisible.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => popoverIsVisible.value = $event),
-                type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "time",
@@ -12633,6 +12638,573 @@ const kdsTimeInputGranularity = {
 };
 const kdsTimeInputGranularities = Object.values(kdsTimeInputGranularity);
 
+const kdsIntervalInputFormat = {
+  DATE: "date",
+  TIME: "time",
+  DATE_OR_TIME: "date_or_time"
+};
+const kdsIntervalInputFormats = Object.values(kdsIntervalInputFormat);
+const kdsIntervalDirectionality = {
+  ASCENDING: "ascending",
+  DESCENDING: "descending"
+};
+const kdsIntervalDirectionalities = Object.values(
+  kdsIntervalDirectionality
+);
+
+const periodNumericKeys = [
+  "years",
+  "months",
+  "weeks",
+  "days"
+];
+const durationNumericKeys = [
+  "hours",
+  "minutes",
+  "seconds",
+  "milliseconds"
+];
+const MILLISECONDS_MAX = 999;
+const getMax = (key) => key === "milliseconds" ? MILLISECONDS_MAX : Number.MAX_SAFE_INTEGER;
+const extractDurationFields = (duration) => ({
+  years: duration.years,
+  months: duration.months,
+  weeks: duration.weeks,
+  days: duration.days,
+  hours: duration.hours,
+  minutes: duration.minutes,
+  seconds: duration.seconds,
+  milliseconds: duration.milliseconds
+});
+const withDurationField = (duration, key, value) => Un.Duration.from({ ...extractDurationFields(duration), [key]: value });
+const zeroDuration = Un.Duration.from({ years: 0 });
+const createDefaultDuration = () => zeroDuration;
+const classifyDuration = (duration) => {
+  const abs = duration.abs();
+  const hasDate = abs.years > 0 || abs.months > 0 || abs.weeks > 0 || abs.days > 0;
+  const hasTime = abs.hours > 0 || abs.minutes > 0 || abs.seconds > 0 || abs.milliseconds > 0;
+  if (hasTime && !hasDate) {
+    return kdsIntervalInputFormat.TIME;
+  }
+  return kdsIntervalInputFormat.DATE;
+};
+const formatPart = (value, unit) => {
+  if (value === 0) {
+    return "";
+  }
+  return value === 1 ? `${value} ${unit} ` : `${value} ${unit}s `;
+};
+const formatDurationToHumanReadable = (duration, usedFormat) => {
+  const abs = duration.abs();
+  let output = "";
+  if (usedFormat === kdsIntervalInputFormat.DATE) {
+    const hasDateParts = abs.years > 0 || abs.months > 0 || abs.weeks > 0 || abs.days > 0;
+    if (!hasDateParts) {
+      return "0 days";
+    }
+    output += formatPart(abs.years, "year");
+    output += formatPart(abs.months, "month");
+    output += formatPart(abs.weeks, "week");
+    output += formatPart(abs.days, "day");
+  } else {
+    const hasTimeParts = abs.hours > 0 || abs.minutes > 0 || abs.seconds > 0 || abs.milliseconds > 0;
+    if (!hasTimeParts) {
+      return "0 seconds";
+    }
+    output += formatPart(abs.hours, "hour");
+    output += formatPart(abs.minutes, "minute");
+    const milliSecondsZero = abs.milliseconds === 0;
+    if (abs.seconds !== 0 || !milliSecondsZero) {
+      if (milliSecondsZero) {
+        output += formatPart(abs.seconds, "second");
+      } else {
+        output += `${abs.seconds}.${abs.milliseconds.toString().padStart(3, "0")} seconds `;
+      }
+    }
+  }
+  if (duration.sign < 0) {
+    output = `-(${output.trim()})`;
+  }
+  return output.trim();
+};
+const yearsPart = String.raw`(\d+)\s*y(?:ears?)?`;
+const monthsPart = String.raw`(\d+)\s*m(?:o(?:nths?)?)?`;
+const weeksPart = String.raw`(\d+)\s*w(?:eeks?)?`;
+const daysPart = String.raw`(\d+)\s*d(?:ays?)?`;
+const hoursPart = String.raw`(\d+)\s*h(?:ours?)?`;
+const minutesPart = String.raw`(\d+)\s*m(?:in(?:s|utes?)?)?`;
+const secondsPart = String.raw`(\d+)(?:[,.](\d{1,3}))?\s*s(?:ec(?:s|onds?)?)?`;
+const humanReadablePeriodRegex = new RegExp(
+  String.raw`^(?:${yearsPart})?\s*(?:${monthsPart})?\s*(?:${weeksPart})?\s*(?:${daysPart})?\s*$`,
+  "i"
+);
+const humanReadableDurationRegex = new RegExp(
+  String.raw`^(?:${hoursPart})?\s*(?:${minutesPart})?\s*(?:${secondsPart})?$`,
+  "i"
+);
+const negativeHumanReadablePeriodRegex = new RegExp(
+  String.raw`^\s*-\s*\(\s*${humanReadablePeriodRegex.source.replaceAll(/[$^]/g, "")}\s*\)\s*$`,
+  "i"
+);
+const negativeHumanReadablePeriodRegexWithSingleField = new RegExp(
+  String.raw`^\s*-\s*(?:\s*${yearsPart}|${monthsPart}|${weeksPart}|${daysPart})\s*$`,
+  "i"
+);
+const negativeHumanReadableDurationRegex = new RegExp(
+  String.raw`^\s*-\s*\(\s*${humanReadableDurationRegex.source.replaceAll(/[$^]/g, "")}\s*\)\s*$`,
+  "i"
+);
+const negativeHumanReadableDurationRegexWithSingleField = new RegExp(
+  String.raw`^\s*-\s*(?:\s*${hoursPart}|${minutesPart}|${secondsPart})\s*$`,
+  "i"
+);
+const extractPeriodFromMatch = (negative, match) => {
+  const sign = negative ? -1 : 1;
+  return Un.Duration.from({
+    years: sign * parseInt(match[1] ?? "0", 10),
+    months: sign * parseInt(match[2] ?? "0", 10),
+    weeks: sign * parseInt(match[3] ?? "0", 10),
+    days: sign * parseInt(match[4] ?? "0", 10)
+  });
+};
+const extractDurationFromMatch = (negative, match) => {
+  const sign = negative ? -1 : 1;
+  const milliseconds = parseInt(match[4]?.padEnd(3, "0") ?? "0", 10);
+  return Un.Duration.from({
+    hours: sign * parseInt(match[1] ?? "0", 10),
+    minutes: sign * parseInt(match[2] ?? "0", 10),
+    seconds: sign * parseInt(match[3] ?? "0", 10),
+    milliseconds: sign * milliseconds
+  });
+};
+const parseHumanReadableInterval = (input) => {
+  const trimmed = input?.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const matchPositivePeriod = humanReadablePeriodRegex.exec(trimmed);
+  const matchNegativePeriod = negativeHumanReadablePeriodRegex.exec(trimmed) ?? negativeHumanReadablePeriodRegexWithSingleField.exec(trimmed);
+  const matchPositiveDuration = humanReadableDurationRegex.exec(trimmed);
+  const matchNegativeDuration = negativeHumanReadableDurationRegex.exec(trimmed) ?? negativeHumanReadableDurationRegexWithSingleField.exec(trimmed);
+  const matchPeriod = matchPositivePeriod ?? matchNegativePeriod;
+  const matchDuration = matchPositiveDuration ?? matchNegativeDuration;
+  const negative = (matchNegativePeriod ?? matchNegativeDuration) !== null;
+  if (matchDuration && matchPeriod) {
+    return null;
+  }
+  if (matchPeriod) {
+    return extractPeriodFromMatch(negative, matchPeriod);
+  }
+  if (matchDuration) {
+    return extractDurationFromMatch(negative, matchDuration);
+  }
+  return null;
+};
+const parseISOInterval = (input) => {
+  try {
+    return Un.Duration.from(input.trim());
+  } catch {
+    return null;
+  }
+};
+const parseGenericInterval = (input) => parseISOInterval(input) ?? parseHumanReadableInterval(input);
+const validateIntervalInput = (input, expectedFormat) => {
+  const duration = parseGenericInterval(input);
+  if (!duration) {
+    return { valid: false };
+  }
+  const actualType = classifyDuration(duration);
+  if (expectedFormat !== kdsIntervalInputFormat.DATE_OR_TIME && actualType !== expectedFormat) {
+    return { valid: false };
+  }
+  return {
+    valid: true,
+    type: actualType,
+    negative: duration.sign < 0,
+    duration
+  };
+};
+const stripInactiveFields = (duration, usedFormat) => {
+  const fields = extractDurationFields(duration);
+  if (usedFormat === kdsIntervalInputFormat.DATE) {
+    return Un.Duration.from({
+      years: fields.years,
+      months: fields.months,
+      weeks: fields.weeks,
+      days: fields.days
+    });
+  }
+  return Un.Duration.from({
+    hours: fields.hours,
+    minutes: fields.minutes,
+    seconds: fields.seconds,
+    milliseconds: fields.milliseconds
+  });
+};
+const toTitleCase = (key) => key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
+
+const _hoisted_1$p = { class: "kds-interval-popover" };
+const _hoisted_2$d = { class: "kds-interval-popover-header" };
+const _hoisted_3$a = { class: "kds-interval-popover-content" };
+const _hoisted_4$7 = { class: "kds-interval-popover-grid" };
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "IntervalInputPopover",
+  props: /* @__PURE__ */ mergeModels({
+    format: {},
+    allowDescending: { type: Boolean }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {},
+    "usedFormat": {
+      required: true
+    },
+    "usedFormatModifiers": {}
+  }),
+  emits: ["update:modelValue", "update:usedFormat"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const mode = useModel(__props, "usedFormat");
+    const draft = ref(modelValue.value);
+    const isNegative = ref(modelValue.value.sign < 0);
+    let isInternalEmit = false;
+    watch(
+      () => modelValue.value,
+      (next) => {
+        if (isInternalEmit) {
+          isInternalEmit = false;
+          return;
+        }
+        draft.value = next;
+        isNegative.value = next.sign < 0;
+      }
+    );
+    watch(
+      () => props.allowDescending,
+      (allowed) => {
+        if (!allowed && isNegative.value) {
+          isNegative.value = false;
+          if (draft.value.sign < 0) {
+            draft.value = draft.value.negated();
+          }
+        }
+      }
+    );
+    const activeFields = computed(() => extractDurationFields(draft.value.abs()));
+    const direction = computed({
+      get: () => isNegative.value ? kdsIntervalDirectionality.DESCENDING : kdsIntervalDirectionality.ASCENDING,
+      set(value) {
+        const wantNeg = value === kdsIntervalDirectionality.DESCENDING;
+        if (wantNeg === isNegative.value) {
+          return;
+        }
+        isNegative.value = wantNeg;
+        if (draft.value.sign !== 0) {
+          draft.value = draft.value.negated();
+        }
+      }
+    });
+    const updateField = (key, value) => {
+      if (!Number.isFinite(value)) {
+        return;
+      }
+      const signedValue = isNegative.value ? -value : value;
+      draft.value = withDurationField(
+        draft.value,
+        key,
+        signedValue
+      );
+    };
+    const modeOptions = [
+      { id: kdsIntervalInputFormat.DATE, leadingIcon: "calendar", title: "Date" },
+      { id: kdsIntervalInputFormat.TIME, leadingIcon: "time", title: "Time" }
+    ];
+    const directionOptions = [
+      { id: kdsIntervalDirectionality.ASCENDING, text: "Forward" },
+      { id: kdsIntervalDirectionality.DESCENDING, text: "Backward" }
+    ];
+    const fieldLabels = {
+      years: "Year",
+      months: "Month",
+      weeks: "Week",
+      days: "Day",
+      hours: "Hour",
+      minutes: "Minute",
+      seconds: "Second",
+      milliseconds: "Millisecond"
+    };
+    watch([draft, mode], () => {
+      const stripped = stripInactiveFields(draft.value, mode.value);
+      if (stripped.toString() !== modelValue.value.toString()) {
+        isInternalEmit = true;
+        modelValue.value = stripped;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+        createElementVNode("div", _hoisted_2$d, [
+          _cache[2] || (_cache[2] = createElementVNode("span", { class: "kds-interval-popover-title" }, "Interval value", -1)),
+          props.format === unref(kdsIntervalInputFormat).DATE_OR_TIME ? (openBlock(), createBlock(unref(KdsValueSwitch), {
+            key: 0,
+            modelValue: mode.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
+            class: "kds-interval-header-switch",
+            size: "small",
+            "possible-values": modeOptions
+          }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+        ]),
+        _cache[3] || (_cache[3] = createElementVNode("div", { class: "kds-interval-popover-divider" }, null, -1)),
+        createElementVNode("div", _hoisted_3$a, [
+          props.allowDescending ? (openBlock(), createBlock(unref(KdsValueSwitch), {
+            key: 0,
+            modelValue: direction.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => direction.value = $event),
+            class: "kds-interval-popover-direction-switch",
+            size: "small",
+            variant: "muted",
+            "possible-values": directionOptions
+          }, null, 8, ["modelValue"])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4$7, [
+            mode.value === unref(kdsIntervalInputFormat).DATE ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(periodNumericKeys), (key) => {
+              return openBlock(), createBlock(unref(_sfc_main$O), {
+                key,
+                "model-value": activeFields.value[key],
+                label: fieldLabels[key] ?? unref(toTitleCase)(key),
+                min: 0,
+                max: unref(getMax)(key),
+                step: 1,
+                "onUpdate:modelValue": ($event) => updateField(key, $event)
+              }, null, 8, ["model-value", "label", "max", "onUpdate:modelValue"]);
+            }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(durationNumericKeys), (key) => {
+              return openBlock(), createBlock(unref(_sfc_main$O), {
+                key,
+                "model-value": activeFields.value[key],
+                label: fieldLabels[key] ?? unref(toTitleCase)(key),
+                min: 0,
+                max: unref(getMax)(key),
+                step: 1,
+                "onUpdate:modelValue": ($event) => updateField(key, $event)
+              }, null, 8, ["model-value", "label", "max", "onUpdate:modelValue"]);
+            }), 128))
+          ])
+        ])
+      ]);
+    };
+  }
+});
+
+const IntervalInputPopover = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-02541fd1"]]);
+
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  __name: "KdsIntervalInput",
+  props: /* @__PURE__ */ mergeModels({
+    description: {},
+    label: {},
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false },
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    autocomplete: {},
+    format: { default: () => kdsIntervalInputFormat.DATE_OR_TIME },
+    allowDescending: { type: Boolean, default: true }
+  }, {
+    "modelValue": { default: null },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "allowDescending", "format"]);
+    const modelValue = useModel(__props, "modelValue");
+    const isPopoverOpen = ref(false);
+    const isToggling = ref(false);
+    const inputError = ref(false);
+    const popoverRef = useTemplateRef("popoverEl");
+    const baseInputRef = useTemplateRef("baseInput");
+    const defaultFormat = kdsIntervalInputFormat.DATE;
+    const resolveActiveFormat = (duration, fallback) => {
+      if (__props.format === kdsIntervalInputFormat.DATE || __props.format === kdsIntervalInputFormat.TIME) {
+        return __props.format;
+      }
+      return duration && !duration.blank ? classifyDuration(duration) : fallback;
+    };
+    const activeFormat = ref(
+      resolveActiveFormat(modelValue.value, defaultFormat)
+    );
+    const inputValue = ref(
+      modelValue.value ? formatDurationToHumanReadable(modelValue.value, activeFormat.value) : ""
+    );
+    const popoverModelValue = computed({
+      get: () => modelValue.value ?? createDefaultDuration(),
+      set: (value) => {
+        modelValue.value = value;
+      }
+    });
+    const isInputError = computed(() => __props.error || inputError.value);
+    const isValidatingState = computed(
+      () => __props.validating && !isInputError.value && !__props.disabled
+    );
+    const effectiveSubText = computed(() => {
+      if (inputError.value) {
+        return "Invalid interval value";
+      }
+      if (isValidatingState.value) {
+        return props.subText || "Validating...";
+      }
+      return props.subText;
+    });
+    watch(inputValue, () => {
+      inputError.value = false;
+    });
+    let isInternalUpdate = false;
+    const commitTypedInput = () => {
+      if (isToggling.value) {
+        baseInputRef.value?.focus();
+        return;
+      }
+      if (inputValue.value.trim().length === 0) {
+        modelValue.value = null;
+        activeFormat.value = resolveActiveFormat(null, defaultFormat);
+        inputError.value = false;
+        return;
+      }
+      const result = validateIntervalInput(inputValue.value, "date_or_time");
+      if (!result.valid) {
+        inputError.value = true;
+        return;
+      }
+      if (!__props.allowDescending && result.negative) {
+        inputError.value = true;
+        return;
+      }
+      if (result.type !== activeFormat.value && __props.format !== kdsIntervalInputFormat.DATE_OR_TIME) {
+        inputError.value = true;
+        return;
+      }
+      inputError.value = false;
+      isInternalUpdate = true;
+      modelValue.value = result.duration;
+      activeFormat.value = result.type;
+      inputValue.value = formatDurationToHumanReadable(
+        result.duration,
+        result.type
+      );
+    };
+    watch(
+      () => modelValue.value,
+      (next) => {
+        if (isInternalUpdate) {
+          isInternalUpdate = false;
+          return;
+        }
+        if (!next) {
+          inputValue.value = "";
+          activeFormat.value = resolveActiveFormat(null, defaultFormat);
+          inputError.value = false;
+          return;
+        }
+        const nextFormat = resolveActiveFormat(next, activeFormat.value);
+        inputValue.value = formatDurationToHumanReadable(next, nextFormat);
+        activeFormat.value = nextFormat;
+        inputError.value = false;
+      }
+    );
+    watch(
+      () => __props.format,
+      (nextFormat) => {
+        if (nextFormat === kdsIntervalInputFormat.DATE_OR_TIME) {
+          return;
+        }
+        activeFormat.value = nextFormat;
+        if (modelValue.value) {
+          const stripped = stripInactiveFields(
+            modelValue.value,
+            nextFormat
+          );
+          isInternalUpdate = true;
+          modelValue.value = stripped;
+          inputValue.value = formatDurationToHumanReadable(
+            stripped,
+            nextFormat
+          );
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
+        error: isInputError.value,
+        validating: isValidatingState.value,
+        "preserve-sub-text-space": __props.preserveSubTextSpace,
+        "sub-text": effectiveSubText.value
+      }), {
+        default: withCtx((slotProps) => [
+          createElementVNode("div", {
+            style: normalizeStyle(popoverRef.value?.anchorStyle)
+          }, [
+            createVNode(BaseInput, mergeProps({ ref: "baseInput" }, slotProps, {
+              modelValue: inputValue.value,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => inputValue.value = $event),
+              type: "text",
+              placeholder: props.placeholder,
+              disabled: __props.disabled,
+              error: isInputError.value,
+              validating: isValidatingState.value,
+              autocomplete: props.autocomplete,
+              onBlur: commitTypedInput,
+              onKeydown: withKeys(withModifiers(commitTypedInput, ["prevent"]), ["enter"])
+            }), {
+              trailing: withCtx(() => [
+                createVNode(unref(_sfc_main$1c), {
+                  modelValue: isPopoverOpen.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isPopoverOpen.value = $event),
+                  size: "xsmall",
+                  variant: "outlined",
+                  "leading-icon": "interval",
+                  "aria-controls": popoverRef.value?.popoverId,
+                  "aria-expanded": isPopoverOpen.value,
+                  "aria-haspopup": "dialog",
+                  disabled: __props.disabled,
+                  title: 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"])
+              ]),
+              _: 1
+            }, 16, ["modelValue", "placeholder", "disabled", "error", "validating", "autocomplete", "onKeydown"]),
+            createVNode(KdsPopover, {
+              ref: "popoverEl",
+              modelValue: isPopoverOpen.value,
+              "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => isPopoverOpen.value = $event),
+              placement: "bottom-right",
+              role: "dialog",
+              "aria-label": "Interval selection dialog"
+            }, {
+              default: withCtx(() => [
+                createVNode(IntervalInputPopover, {
+                  modelValue: popoverModelValue.value,
+                  "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => popoverModelValue.value = $event),
+                  "used-format": activeFormat.value,
+                  "onUpdate:usedFormat": _cache[7] || (_cache[7] = ($event) => activeFormat.value = $event),
+                  format: __props.format,
+                  "allow-descending": __props.allowDescending
+                }, null, 8, ["modelValue", "used-format", "format", "allow-descending"])
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ], 4)
+        ]),
+        _: 1
+      }, 16, ["error", "validating", "preserve-sub-text-space", "sub-text"]);
+    };
+  }
+});
+
 const _hoisted_1$o = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
 const _hoisted_2$c = {
   key: 0,
@@ -12717,7 +13289,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         onKeydown
       }, [
         props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$c, [
-          createVNode(_sfc_main$18, {
+          createVNode(_sfc_main$1a, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -14270,7 +14842,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "error", "loading", "empty-state-label", "bottom-value"])
             ]),
             createElementVNode("div", _hoisted_5$1, [
-              createVNode(unref(_sfc_main$1d), {
+              createVNode(unref(_sfc_main$1f), {
                 "leading-icon": "chevron-right",
                 ariaLabel: "Move selected values right",
                 title: "Move selected values right",
@@ -14279,7 +14851,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 disabled: effectiveDisabled.value || leftSelected.value.length === 0,
                 onClick: _cache[2] || (_cache[2] = ($event) => moveRight(leftSelected.value))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$1d), {
+              createVNode(unref(_sfc_main$1f), {
                 "leading-icon": "chevron-right-double",
                 ariaLabel: "Move all values right",
                 title: "Move all values right",
@@ -14291,7 +14863,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   ...showUnknownValues.value && !modelValue.value.includeUnknownValues ? [UNKNOWN_VALUE_ID] : []
                 ]))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$1d), {
+              createVNode(unref(_sfc_main$1f), {
                 "leading-icon": "chevron-left",
                 ariaLabel: "Move selected values left",
                 title: "Move selected values left",
@@ -14300,7 +14872,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 disabled: effectiveDisabled.value || rightSelected.value.length === 0,
                 onClick: _cache[4] || (_cache[4] = ($event) => moveLeft(rightSelected.value))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$1d), {
+              createVNode(unref(_sfc_main$1f), {
                 "leading-icon": "chevron-left-double",
                 ariaLabel: "Move all values left",
                 title: "Move all values left",
@@ -14428,7 +15000,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           ariaLabel: "Search values",
           placeholder: "Search",
           disabled: __props.disabled
-        }, null, 8, ["modelValue", "disabled"])) : mode.value === unref(kdsTwinListSearchMode).PATTERN ? (openBlock(), createBlock(unref(_sfc_main$y), {
+        }, null, 8, ["modelValue", "disabled"])) : mode.value === unref(kdsTwinListSearchMode).PATTERN ? (openBlock(), createBlock(unref(_sfc_main$A), {
           key: 2,
           modelValue: pattern.value,
           "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => pattern.value = $event),
@@ -14753,7 +15325,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_1$f, [
             createElementVNode("div", _hoisted_2$5, [
               createElementVNode("div", _hoisted_3$5, [
-                createVNode(_sfc_main$1d, {
+                createVNode(_sfc_main$1f, {
                   size: "small",
                   variant: "transparent",
                   "leading-icon": "sort-descending",
@@ -14761,7 +15333,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   disabled: __props.disabled,
                   onClick: _cache[0] || (_cache[0] = ($event) => applyReorder(unref(sortByText)(true, optionLookup.value)))
                 }, null, 8, ["disabled"]),
-                createVNode(_sfc_main$1d, {
+                createVNode(_sfc_main$1f, {
                   size: "small",
                   variant: "transparent",
                   "leading-icon": "sort-ascending",
@@ -14770,7 +15342,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   onClick: _cache[1] || (_cache[1] = ($event) => applyReorder(unref(sortByText)(false, optionLookup.value)))
                 }, null, 8, ["disabled"])
               ]),
-              createVNode(_sfc_main$1d, {
+              createVNode(_sfc_main$1f, {
                 size: "small",
                 variant: "transparent",
                 destructive: "",
@@ -14792,7 +15364,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               /* fallback only for TS */
             }, null, 8, ["modelValue", "possible-values", "disabled", "error", "ariaLabel"]),
             createElementVNode("div", _hoisted_4$3, [
-              createVNode(_sfc_main$1d, {
+              createVNode(_sfc_main$1f, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "to-top",
@@ -14801,7 +15373,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 disabled: __props.disabled || !unref(canMoveUp),
                 onClick: moveToTop
               }, null, 8, ["disabled"]),
-              createVNode(_sfc_main$1d, {
+              createVNode(_sfc_main$1f, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "to-bottom",
@@ -14810,7 +15382,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 disabled: __props.disabled || !unref(canMoveDown),
                 onClick: moveToBottom
               }, null, 8, ["disabled"]),
-              createVNode(_sfc_main$1d, {
+              createVNode(_sfc_main$1f, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "arrow-up",
@@ -14819,7 +15391,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 disabled: __props.disabled || !unref(canMoveUp),
                 onClick: moveUp
               }, null, 8, ["disabled"]),
-              createVNode(_sfc_main$1d, {
+              createVNode(_sfc_main$1f, {
                 size: "small",
                 variant: "transparent",
                 "leading-icon": "arrow-down",
@@ -15143,9 +15715,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$9, [
         createElementVNode("h6", null, toDisplayString(__props.headline), 1),
-        createVNode(_sfc_main$1d, {
+        createVNode(_sfc_main$1f, {
           class: "kds-close-button",
-          type: "button",
           "leading-icon": "x-close",
           size: "small",
           ariaLabel: "Close panel",
@@ -15157,7 +15728,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-be5bccc5"]]);
+const KdsPanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-dd28904c"]]);
 
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TabBarItemAccessory",
@@ -15617,14 +16188,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const handleApply = (event) => emit("apply", event);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createVNode(_sfc_main$1d, {
+        createVNode(_sfc_main$1f, {
           disabled: __props.disabled,
           label: __props.cancelLabel,
           size: "small",
           variant: "transparent",
           onClick: handleCancel
         }, null, 8, ["disabled", "label"]),
-        createVNode(_sfc_main$1d, {
+        createVNode(_sfc_main$1f, {
           disabled: __props.disabled,
           label: __props.applyLabel,
           size: "small",
@@ -15741,7 +16312,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }, null, 8, ["name", "disabled"])) : createCommentVNode("", true),
           __props.badge ? (openBlock(), createBlock(unref(KdsBadge), normalizeProps(mergeProps({ key: 1 }, badgeProps.value)), null, 16)) : createCommentVNode("", true),
-          __props.trailingButton ? (openBlock(), createBlock(unref(_sfc_main$1d), mergeProps({ key: 2 }, buttonProps.value, { onClick: onButtonClick }), null, 16)) : createCommentVNode("", true)
+          __props.trailingButton ? (openBlock(), createBlock(unref(_sfc_main$1f), mergeProps({ key: 2 }, buttonProps.value, { onClick: onButtonClick }), null, 16)) : createCommentVNode("", true)
         ])
       ], 2);
     };
@@ -15877,7 +16448,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$1, toDisplayString(__props.headline), 1),
-          createVNode(_sfc_main$1d, {
+          createVNode(_sfc_main$1f, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -16150,7 +16721,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$1, [
               createElementVNode("div", _hoisted_2, toDisplayString(unref(config).value.message), 1),
               unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                createVNode(_sfc_main$V, {
+                createVNode(_sfc_main$X, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -16165,7 +16736,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           name: "footer",
           fn: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$1d, {
+              return openBlock(), createBlock(_sfc_main$1f, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -16293,7 +16864,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", _hoisted_1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttons, (button) => {
-            return openBlock(), createBlock(_sfc_main$1d, {
+            return openBlock(), createBlock(_sfc_main$1f, {
               ref_for: true,
               ref: "measureButton",
               key: button.id,
@@ -16302,7 +16873,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "leading-icon": button.leadingIcon
             }, null, 8, ["label", "variant", "leading-icon"]);
           }), 128)),
-          createVNode(_sfc_main$12, {
+          createVNode(_sfc_main$14, {
             ref: "measureMenuButton",
             "leading-icon": "more-actions",
             ariaLabel: "More actions",
@@ -16313,7 +16884,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: ["kds-button-group", __props.alignment]
         }), [
           (openBlock(true), createElementBlock(Fragment, null, renderList(visibleButtons.value, (button) => {
-            return openBlock(), createBlock(_sfc_main$1d, {
+            return openBlock(), createBlock(_sfc_main$1f, {
               key: button.id,
               label: button.label,
               variant: button.variant ?? "outlined",
@@ -16324,7 +16895,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onClick: ($event) => emit("buttonClick", button.id)
             }, null, 8, ["label", "variant", "disabled", "leading-icon", "destructive", "title", "onClick"]);
           }), 128)),
-          overflowButtons.value.length ? (openBlock(), createBlock(_sfc_main$12, {
+          overflowButtons.value.length ? (openBlock(), createBlock(_sfc_main$14, {
             key: 0,
             "leading-icon": "more-actions",
             ariaLabel: "More actions",
@@ -16348,5 +16919,5 @@ const kdsResponsiveButtonGroupAlignments = Object.values(
   kdsResponsiveButtonGroupAlignment
 );
 
-export { KdsAvatar, KdsBadge, _sfc_main$1d as KdsButton, KdsCardClickable, _sfc_main$V as KdsCheckbox, KdsCheckboxGroup, _sfc_main$I as KdsColorInput, KdsColorSwatch, _sfc_main$Z as KdsContextMenu, KdsDataType, _sfc_main$B as KdsDateInput, _sfc_main$z as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$r as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, KdsLink, _sfc_main$1c as KdsLinkButton, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$_ as KdsMenu, _sfc_main$12 as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$o as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$M as KdsNumberInput, KdsPanelButtonBar, KdsPanelHeader, _sfc_main$H as KdsPasswordInput, _sfc_main$y as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$u as KdsTimeInput, _sfc_main$1a as KdsToggleButton, KdsTwinList, _sfc_main$G as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, 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, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$1f as KdsButton, KdsCardClickable, _sfc_main$X as KdsCheckbox, KdsCheckboxGroup, _sfc_main$K as KdsColorInput, KdsColorSwatch, _sfc_main$$ as KdsContextMenu, KdsDataType, _sfc_main$D as KdsDateInput, _sfc_main$B as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$r as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$u as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1e as KdsLinkButton, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$10 as KdsMenu, _sfc_main$14 as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$o as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$O as KdsNumberInput, KdsPanelButtonBar, KdsPanelHeader, _sfc_main$J as KdsPasswordInput, _sfc_main$A as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$w as KdsTimeInput, _sfc_main$1c as KdsToggleButton, KdsTwinList, _sfc_main$I as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, 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, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map