@knime/kds-components 0.17.2 → 0.18.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, defineAsyncComponent, onBeforeUpdate, withModifiers, normalizeProps, guardReactiveProps, reactive, onMounted, onUnmounted, toRefs, inject, withKeys, withDirectives, provide, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, vModelText, useCssVars, mergeDefaults, createSlots } from 'vue';
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, defineAsyncComponent, onBeforeUpdate, withModifiers, normalizeProps, guardReactiveProps, reactive, onMounted, onUnmounted, toRefs, inject, withKeys, withDirectives, provide, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, onBeforeUnmount, vModelText, useCssVars, mergeDefaults, createSlots } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -16,7 +16,7 @@ const _hoisted_3$f = {
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -75,7 +75,7 @@ const _export_sfc$1 = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-d6a313f1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-d6a313f1"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -115,7 +115,7 @@ function useIcon({
   return iconComponent;
 }
 
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -141,7 +141,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$T, [["__scopeId", "data-v-4da5bf3e"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$V, [["__scopeId", "data-v-4da5bf3e"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -468,7 +468,7 @@ const kdsDataTypeSize = {
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
 const _hoisted_1$C = ["title"];
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -514,7 +514,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-806087da"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-806087da"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -532,7 +532,7 @@ const kdsBadgeSize = {
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
 const _hoisted_1$B = { class: "label-wrapper" };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -560,7 +560,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-0dc42bfc"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$T, [["__scopeId", "data-v-0dc42bfc"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -580,7 +580,7 @@ const kdsColorSwatchSize = {
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
 const _hoisted_1$A = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -620,7 +620,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$Q, [["__scopeId", "data-v-bdb3dd24"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-bdb3dd24"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -742,7 +742,7 @@ function useKdsIsTruncated(elementRef) {
 
 const _hoisted_1$z = ["title", "aria-label"];
 const _hoisted_2$m = ["title"];
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -777,7 +777,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["__scopeId", "data-v-3bd44b22"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-3bd44b22"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -794,7 +794,7 @@ const kdsLiveStatusSize = {
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
 const _hoisted_1$y = ["data-style"];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -824,7 +824,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$O, [["__scopeId", "data-v-74bb7c3d"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$Q, [["__scopeId", "data-v-74bb7c3d"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -841,7 +841,7 @@ const _hoisted_4$a = {
   key: 0,
   class: "body"
 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
     headline: {},
@@ -886,7 +886,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["__scopeId", "data-v-3d79be7c"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["__scopeId", "data-v-3d79be7c"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -900,7 +900,7 @@ const _hoisted_1$w = {
   key: 0,
   class: "label"
 };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -972,9 +972,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["__scopeId", "data-v-b0f9559f"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$O, [["__scopeId", "data-v-b0f9559f"]]);
 
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -1027,7 +1027,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -1063,7 +1063,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1100,7 +1100,7 @@ const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
 const _hoisted_1$v = ["data-visible"];
 const _hoisted_2$k = ["data-visible"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1181,7 +1181,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["__scopeId", "data-v-ec08a9ba"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["__scopeId", "data-v-ec08a9ba"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1201,7 +1201,7 @@ const _hoisted_4$9 = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -1217,7 +1217,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$K : _sfc_main$L
+      () => isLinkButton.value ? _sfc_main$M : _sfc_main$N
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$u, [
@@ -1240,9 +1240,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-02149081"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["__scopeId", "data-v-02149081"]]);
 
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -1314,7 +1314,7 @@ const _hoisted_9 = {
   key: 2,
   class: "trailing-item-reserve-space"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
@@ -1369,7 +1369,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         onClick
       }, [
         props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$i, [
-          createVNode(_sfc_main$G, {
+          createVNode(_sfc_main$I, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: props.disabled
@@ -1408,16 +1408,16 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-7fba4bc1"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-7fba4bc1"]]);
 
-const _sfc_main$E = {  };
+const _sfc_main$G = {  };
 
 const _hoisted_1$s = { class: "kds-list-item-divider" };
 
 function _sfc_render$8(_ctx, _cache) {
   return (openBlock(), createElementBlock("hr", _hoisted_1$s))
 }
-const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$E, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
+const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$G, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
 
 const _hoisted_1$r = { class: "kds-list-item-section-title" };
 const _hoisted_2$h = {
@@ -1425,7 +1425,7 @@ const _hoisted_2$h = {
   class: "icon"
 };
 const _hoisted_3$b = ["title"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -1454,12 +1454,12 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$D, [["__scopeId", "data-v-53382531"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-53382531"]]);
 
 const _hoisted_1$q = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
 const _hoisted_2$g = ["role"];
 const loadingStateText = "Loading entries";
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
@@ -1468,6 +1468,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     loading: { type: Boolean, default: false },
     ariaLabel: {},
     controlledExternally: { type: Boolean },
+    allowNoSelection: { type: Boolean, default: false },
     role: { default: "listbox" }
   },
   emits: ["itemClick"],
@@ -1475,8 +1476,13 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const idPrefix = useId();
-    const toOptionId = (elementId) => elementId.slice(idPrefix.length + 1);
     const emptyOptionId = `${idPrefix}-empty`;
+    function toOptionId(elementId) {
+      if (elementId === emptyOptionId) {
+        return void 0;
+      }
+      return elementId?.slice(idPrefix.length + 1);
+    }
     const prefixedValues = computed(
       () => (props.loading ? [] : props.possibleValues).map((o) => ({
         ...o,
@@ -1548,7 +1554,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const findEnabledIndex = (id) => id === void 0 ? -1 : enabledValues.value.findIndex((o) => o.id === id);
     const handleFocus = () => {
       isFocused.value = true;
-      if (activeId.value === void 0) {
+      if (activeId.value === void 0 && !props.allowNoSelection) {
         activeId.value = lastActiveId.value ?? enabledValues.value[0]?.id;
       }
     };
@@ -1557,46 +1563,52 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       lastActiveId.value = activeId.value;
       activeId.value = void 0;
     };
+    const moveDown = (currentIndex) => {
+      if (currentIndex < 0) {
+        return enabledValues.value[0].id;
+      }
+      if (currentIndex >= enabledValues.value.length - 1) {
+        return props.allowNoSelection ? void 0 : enabledValues.value[0].id;
+      }
+      return enabledValues.value[currentIndex + 1].id;
+    };
+    const moveUp = (currentIndex) => {
+      if (props.allowNoSelection && currentIndex === 0) {
+        return void 0;
+      }
+      if (currentIndex <= 0) {
+        return enabledValues.value[enabledValues.value.length - 1].id;
+      }
+      return enabledValues.value[currentIndex - 1].id;
+    };
+    const isTextInput = (target) => target instanceof HTMLElement && ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
     const handleKeydown = (event) => {
       if (enabledValues.value.length === 0) {
+        activeId.value = selectableValues.value.length === 0 ? emptyOptionId : void 0;
         return;
       }
       const currentIndex = findEnabledIndex(activeId.value);
       switch (event.key) {
-        case "ArrowDown": {
-          const nextIndex = currentIndex < 0 || currentIndex >= enabledValues.value.length - 1 ? 0 : currentIndex + 1;
-          activeId.value = enabledValues.value[nextIndex].id;
+        case "ArrowDown":
+          activeId.value = moveDown(currentIndex);
           scrollToView();
           event.preventDefault();
           break;
-        }
-        case "ArrowUp": {
-          const nextIndex = currentIndex <= 0 ? enabledValues.value.length - 1 : currentIndex - 1;
-          activeId.value = enabledValues.value[nextIndex].id;
+        case "ArrowUp":
+          activeId.value = moveUp(currentIndex);
           scrollToView();
           event.preventDefault();
           break;
-        }
         case "Enter":
-          if (event.target instanceof HTMLElement && ["BUTTON"].includes(event.target.tagName) && event.target.ariaExpanded === "false") {
-            break;
-          }
-          if (activeId.value) {
-            emit("itemClick", toOptionId(activeId.value));
-            event.preventDefault();
-          }
+          emit("itemClick", toOptionId(activeId.value));
+          event.preventDefault();
           break;
         case " ":
-          if (event.target instanceof HTMLElement && ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName)) {
-            break;
-          }
-          if (event.target instanceof HTMLElement && ["BUTTON"].includes(event.target.tagName) && event.target.ariaExpanded === "false") {
+          if (isTextInput(event.target)) {
             break;
           }
-          if (activeId.value) {
-            emit("itemClick", toOptionId(activeId.value));
-            event.preventDefault();
-          }
+          emit("itemClick", toOptionId(activeId.value));
+          event.preventDefault();
           break;
         case "Home":
           activeId.value = enabledValues.value[0].id;
@@ -1687,7 +1699,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-e3d86a4e"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-9b505d0b"]]);
 
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -1699,7 +1711,7 @@ const _hoisted_2$f = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     placement: { default: "bottom-left" },
@@ -1751,14 +1763,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-786e523e"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$D, [["__scopeId", "data-v-786e523e"]]);
 
 const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsPopover
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1803,12 +1815,15 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       };
     });
     const onItemClick = (itemId) => {
+      if (!itemId) {
+        return;
+      }
       isMenuOpen.value = false;
       emit("itemClick", itemId);
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$J, mergeProps({
+        createVNode(_sfc_main$L, mergeProps({
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event)
         }, toggleButtonProps.value, {
@@ -1817,14 +1832,14 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           "aria-controls": unref(menuId),
           style: popoverEl.value?.anchorStyle,
           onFocus: listContainerEl.value?.handleFocus,
-          onKeydown: listContainerEl.value?.handleKeydown,
-          onBlur: _cache[1] || (_cache[1] = ($event) => isMenuOpen.value = false)
-        }), null, 16, ["modelValue", "aria-expanded", "aria-controls", "style", "onFocus", "onKeydown"]),
+          onKeydown: _cache[1] || (_cache[1] = ($event) => isMenuOpen.value && listContainerEl.value?.handleKeydown),
+          onBlur: _cache[2] || (_cache[2] = ($event) => isMenuOpen.value = false)
+        }), null, 16, ["modelValue", "aria-expanded", "aria-controls", "style", "onFocus"]),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
           modelValue: isMenuOpen.value,
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isMenuOpen.value = $event),
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isMenuOpen.value = $event),
           placement: "bottom-left",
           "popover-aria-label": "Menu"
         }, {
@@ -1853,7 +1868,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$A, [["__scopeId", "data-v-23e9404d"]]);
+const KdsMenuButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-be36bcd4"]]);
 
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -1871,7 +1886,7 @@ const kdsButtonVariants = Object.values(kdsButtonVariant);
 
 const _hoisted_1$o = { class: "kds-label-wrapper" };
 const _hoisted_2$e = ["id", "for", "title"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -1907,11 +1922,11 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-1a5dc1ba"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-1a5dc1ba"]]);
 
 const _hoisted_1$n = ["id"];
 const _hoisted_2$d = { class: "subtext-text" };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -1948,7 +1963,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$y, [["__scopeId", "data-v-df9a85a4"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$A, [["__scopeId", "data-v-df9a85a4"]]);
 
 const _hoisted_1$m = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
 const _hoisted_2$c = { class: "control" };
@@ -1962,7 +1977,7 @@ const _hoisted_6$3 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2065,9 +2080,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$x, [["__scopeId", "data-v-32f17780"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-32f17780"]]);
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2100,7 +2115,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$l = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2189,7 +2204,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["__scopeId", "data-v-c38eeda5"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$x, [["__scopeId", "data-v-c38eeda5"]]);
 
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -2217,7 +2232,7 @@ const _hoisted_3$9 = {
 const _hoisted_4$6 = { class: "content" };
 const _hoisted_5$4 = { class: "label" };
 const _hoisted_6$2 = ["id"];
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -2279,7 +2294,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$u, [["__scopeId", "data-v-27c361e4"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$w, [["__scopeId", "data-v-27c361e4"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -2402,7 +2417,7 @@ const useRadioSelection = ({
 };
 
 const _hoisted_1$j = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2486,10 +2501,10 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__scopeId", "data-v-9cc4dcdd"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["__scopeId", "data-v-9cc4dcdd"]]);
 
 const _hoisted_1$i = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -2544,7 +2559,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$s, [["__scopeId", "data-v-93f3f577"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$u, [["__scopeId", "data-v-93f3f577"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -2596,7 +2611,7 @@ const useValueSwitchIconHiding = ({
 };
 
 const _hoisted_1$h = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2694,7 +2709,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$r, [["__scopeId", "data-v-666d4c10"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__scopeId", "data-v-666d4c10"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -2714,7 +2729,7 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -2766,7 +2781,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$q, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$s, [["__scopeId", "data-v-5d99c134"]]);
 
 const _hoisted_1$g = {
   key: 0,
@@ -2776,7 +2791,7 @@ const _hoisted_2$a = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$8 = ["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"];
+const _hoisted_3$8 = ["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"];
 const _hoisted_4$5 = ["aria-disabled"];
 const _hoisted_5$3 = {
   key: 4,
@@ -2786,13 +2801,14 @@ const _hoisted_6$1 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: { default: void 0 },
     type: { default: "text" },
     min: { default: void 0 },
     max: { default: void 0 },
+    ariaExpanded: { type: Boolean, default: void 0 },
     step: { default: void 0 },
     placeholder: { default: void 0 },
     disabled: { type: Boolean, default: false },
@@ -2810,6 +2826,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     ariaValuemax: { default: void 0 },
     ariaValuetext: { default: void 0 },
     ariaActivedescendant: { default: void 0 },
+    ariaHaspopup: { default: void 0 },
+    ariaControls: { default: void 0 },
     unit: { default: void 0 },
     inputmode: { default: void 0 },
     clearable: { type: Boolean, default: false },
@@ -2893,6 +2911,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           "aria-valuemax": props.ariaValuemax,
           "aria-valuetext": props.ariaValuetext,
           "aria-activedescendant": props.ariaActivedescendant,
+          "aria-haspopup": props.ariaHaspopup,
+          "aria-controls": props.ariaControls,
+          "aria-expanded": props.ariaExpanded,
           class: normalizeClass({ "input-field": true, "has-value": hasValue.value }),
           onInput: handleInput,
           onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
@@ -2909,7 +2930,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           }),
           "aria-disabled": props.disabled || void 0
         }, toDisplayString(props.unit), 11, _hoisted_4$5)) : createCommentVNode("", true),
-        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$L, {
+        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$N, {
           key: 3,
           class: "clear-button",
           type: "button",
@@ -2933,9 +2954,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$p, [["__scopeId", "data-v-8815d034"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$r, [["__scopeId", "data-v-d8e771c0"]]);
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3155,7 +3176,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$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     "modelValue": { default: "" },
@@ -3370,7 +3391,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(hueHandleStyle.value)
           }, null, 4)
         ], 40, _hoisted_3$7),
-        createVNode(_sfc_main$o, {
+        createVNode(_sfc_main$q, {
           "model-value": modelValue.value,
           "aria-label": "Color hex value",
           placeholder: "#FFFFFF",
@@ -3381,7 +3402,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__scopeId", "data-v-180fafdd"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$p, [["__scopeId", "data-v-180fafdd"]]);
 
 const HEX_LENGTH_1 = 1;
 const HEX_LENGTH_2 = 2;
@@ -3441,7 +3462,7 @@ const useColorInputValidationOnFocusOut = (modelValue) => {
   return { handleFocusOut };
 };
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "KdsColorInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3500,7 +3521,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["color", "style"])
               ]),
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$J), {
+                createVNode(unref(_sfc_main$L), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -3540,6 +3561,161 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "KdsPasswordInput",
+  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 },
+    variant: { default: "password" },
+    showVisibilityToggle: { type: Boolean, default: true },
+    toggleLabel: {},
+    autocomplete: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const showValue = ref(false);
+    const preventBlurFromToggle = ref(false);
+    const input = useTemplateRef("input");
+    const effectiveToggleLabel = computed(
+      () => props.toggleLabel ?? (props.variant === "key" ? "Key" : "Password")
+    );
+    const handleBlur = () => {
+      if (preventBlurFromToggle.value) {
+        input.value?.focus();
+      }
+    };
+    __expose({
+      focus: () => input.value?.focus()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx((slotProps) => [
+          createVNode(BaseInput, mergeProps({
+            ref_key: "input",
+            ref: input
+          }, slotProps, {
+            modelValue: modelValue.value,
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
+            type: showValue.value && props.showVisibilityToggle ? "text" : "password",
+            "leading-icon": props.variant === "key" ? "key" : "lock",
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            error: props.error,
+            autocomplete: props.autocomplete,
+            onBlur: handleBlur
+          }), {
+            trailing: withCtx(() => [
+              props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$L, {
+                key: 0,
+                modelValue: showValue.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showValue.value = $event),
+                type: "button",
+                variant: "outlined",
+                size: "xsmall",
+                "leading-icon": "eye",
+                "aria-label": showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
+                title: showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
+                disabled: props.disabled,
+                onPointerdown: _cache[1] || (_cache[1] = ($event) => preventBlurFromToggle.value = true),
+                onPointerup: _cache[2] || (_cache[2] = ($event) => preventBlurFromToggle.value = false),
+                onPointercancel: _cache[3] || (_cache[3] = ($event) => preventBlurFromToggle.value = false),
+                onClick: _cache[4] || (_cache[4] = ($event) => preventBlurFromToggle.value = false)
+              }, null, 8, ["modelValue", "aria-label", "title", "disabled"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 16, ["modelValue", "type", "leading-icon", "placeholder", "disabled", "error", "autocomplete"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+
+const kdsPasswordInputVariant = {
+  PASSWORD: "password",
+  KEY: "key"
+};
+const kdsPasswordInputVariants = Object.values(kdsPasswordInputVariant);
+const kdsPasswordInputAutocomplete = {
+  CURRENT_PASSWORD: "current-password",
+  NEW_PASSWORD: "new-password",
+  ONE_TIME_CODE: "one-time-code",
+  OFF: "off"
+};
+const kdsPasswordInputAutocompletes = Object.values(
+  kdsPasswordInputAutocomplete
+);
+
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  __name: "KdsUsernameInput",
+  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: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const baseInput = useTemplateRef("baseInput");
+    __expose({
+      focus: () => baseInput.value?.focus()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx((slotProps) => [
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
+            modelValue: modelValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            type: "text",
+            "leading-icon": "user",
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            error: props.error,
+            autocomplete: props.autocomplete
+          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+
+const kdsUsernameInputAutocomplete = {
+  USERNAME: "username",
+  OFF: "off"
+};
+const kdsUsernameInputAutocompletes = Object.values(
+  kdsUsernameInputAutocomplete
+);
+
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -13661,7 +13837,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             onBlur: onTextInputBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$J, {
+              createVNode(_sfc_main$L, {
                 modelValue: popoverIsVisible.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => popoverIsVisible.value = $event),
                 type: "button",
@@ -13880,14 +14056,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           variant: "large",
           "possible-values": possibleFormats.value,
           "empty-text": "No recently used formats",
-          onItemClick: _cache[2] || (_cache[2] = ($event) => selection.value = decodeURIComponent($event))
+          onItemClick: _cache[2] || (_cache[2] = ($event) => $event && (selection.value = decodeURIComponent($event)))
         }, null, 8, ["possible-values"])
       ]);
     };
   }
 });
 
-const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-892448f6"]]);
+const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-f75ebe1b"]]);
 
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "KdsDateTimeFormatInput",
@@ -13932,7 +14108,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               autocomplete: props.autocomplete
             }), {
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$J), {
+                createVNode(unref(_sfc_main$L), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -14123,6 +14299,8 @@ const createKdsNumberParser = (params) => {
   };
 };
 
+const REPEAT_INITIAL_DELAY_MS = 400;
+const REPEAT_INTERVAL_MS = 100;
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
@@ -14239,14 +14417,43 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       localValue.value = value;
       modelValue.value = numberParser.value.parseFromInput(value);
     };
+    const baseInput = useTemplateRef("baseInput");
+    let repeatTimer = null;
+    let isStepping = false;
     const handleBlur = () => {
+      if (isStepping) {
+        baseInput.value?.focus();
+        return;
+      }
       isFocused.value = false;
       const parsed = numberParser.value.parseFromInput(localValue.value);
       const normalized = clamp(parsed);
       modelValue.value = normalized;
       localValue.value = numberParser.value.formatForDisplay(normalized);
     };
-    const baseInput = useTemplateRef("baseInput");
+    const stopRepeating = () => {
+      if (repeatTimer !== null) {
+        clearTimeout(repeatTimer);
+        repeatTimer = null;
+      }
+      isStepping = false;
+    };
+    const startRepeating = (direction) => {
+      stopRepeating();
+      isStepping = true;
+      adjustByStep(direction);
+      repeatTimer = setTimeout(function tick() {
+        adjustByStep(direction);
+        repeatTimer = setTimeout(tick, REPEAT_INTERVAL_MS);
+      }, REPEAT_INITIAL_DELAY_MS);
+    };
+    onBeforeUnmount(stopRepeating);
+    const handleButtonClick = (direction, event) => {
+      if (event.detail !== 0) {
+        return;
+      }
+      adjustByStep(direction);
+    };
     __expose({
       focus: () => baseInput.value?.focus()
     });
@@ -14259,7 +14466,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           }, slotProps, {
             "model-value": localValue.value,
             type: "text",
-            inputmode: props.step >= 1 ? "numeric" : "decimal",
+            inputmode: Number.isInteger(props.step) ? "numeric" : "decimal",
             placeholder: props.placeholder,
             disabled: props.disabled,
             error: props.error,
@@ -14272,27 +14479,35 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             "aria-valuetext": ariaValuetext.value,
             "onUpdate:modelValue": handleUpdateModelValue,
             onKeydown: handleKeydown,
-            onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
+            onFocus: _cache[4] || (_cache[4] = ($event) => isFocused.value = true),
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$L, {
+              createVNode(_sfc_main$N, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "minus",
                 "aria-label": `Decrease ${props.label ?? props.ariaLabel}`,
                 disabled: !canDecrease.value,
-                onClick: _cache[0] || (_cache[0] = ($event) => adjustByStep(-1))
+                onClick: _cache[0] || (_cache[0] = ($event) => handleButtonClick(-1, $event)),
+                onPointerdown: _cache[1] || (_cache[1] = ($event) => startRepeating(-1)),
+                onPointerup: stopRepeating,
+                onPointerleave: stopRepeating,
+                onPointercancel: stopRepeating
               }, null, 8, ["aria-label", "disabled"]),
-              createVNode(_sfc_main$L, {
+              createVNode(_sfc_main$N, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "plus",
                 "aria-label": `Increase ${props.label ?? props.ariaLabel}`,
                 disabled: !canIncrease.value,
-                onClick: _cache[1] || (_cache[1] = ($event) => adjustByStep(1))
+                onClick: _cache[2] || (_cache[2] = ($event) => handleButtonClick(1, $event)),
+                onPointerdown: _cache[3] || (_cache[3] = ($event) => startRepeating(1)),
+                onPointerup: stopRepeating,
+                onPointerleave: stopRepeating,
+                onPointercancel: stopRepeating
               }, null, 8, ["aria-label", "disabled"])
             ]),
             _: 1
@@ -14469,7 +14684,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             clearable: ""
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$J, {
+              createVNode(_sfc_main$L, {
                 modelValue: caseSensitive.value,
                 "onUpdate:modelValue": [
                   _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
@@ -14482,7 +14697,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 "aria-label": caseSensitiveAriaLabel.value,
                 disabled: props.disabled
               }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$J, {
+              createVNode(_sfc_main$L, {
                 modelValue: excludeMatches.value,
                 "onUpdate:modelValue": [
                   _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
@@ -14495,7 +14710,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 "aria-label": excludeMatchesAriaLabel.value,
                 disabled: props.disabled
               }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$J, {
+              createVNode(_sfc_main$L, {
                 modelValue: useRegex.value,
                 "onUpdate:modelValue": [
                   _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
@@ -14553,6 +14768,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const popoverEl = useTemplateRef("popover");
     const listContainerEl = useTemplateRef("listContainer");
     const resultsOpen = ref(false);
+    const resultsId = useId();
     const onKeyDown = (event) => {
       if (resultsOpen.value) {
         listContainerEl.value?.handleKeydown(event);
@@ -14622,12 +14838,16 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             "leading-icon": "search",
             clearable: true,
             style: popoverEl.value?.anchorStyle,
+            role: __props.results ? "combobox" : void 0,
             "aria-activedescendant": resultsOpen.value ? listContainerEl.value?.activeDescendant : void 0,
+            "aria-haspopup": __props.results ? "listbox" : void 0,
+            "aria-controls": __props.results ? unref(resultsId) : void 0,
+            "aria-expanded": __props.results ? resultsOpen.value : void 0,
             onKeydown: onKeyDown,
             onFocus,
             onBlur,
             onClick
-          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete", "style", "aria-activedescendant"]),
+          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete", "style", "role", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded"]),
           __props.results ? (openBlock(), createBlock(unref(KdsPopover), {
             key: 0,
             ref: "popover",
@@ -14643,14 +14863,16 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle(maxHeightStyle.value)
               }, [
                 createVNode(unref(KdsListContainer), {
+                  id: unref(resultsId),
                   ref: "listContainer",
                   variant: "large",
                   "possible-values": __props.results,
                   "controlled-externally": "",
+                  "allow-no-selection": "",
                   "empty-text": "No search results",
                   "aria-label": "Search results list",
                   onItemClick: onResultClick
-                }, null, 8, ["possible-values"])
+                }, null, 8, ["id", "possible-values"])
               ], 4)
             ]),
             _: 1
@@ -14662,7 +14884,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-873d26bd"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-df327342"]]);
 
 const _hoisted_1$c = ["rows", "placeholder", "disabled", "autocomplete"];
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
@@ -14818,7 +15040,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         onKeydown
       }, [
         props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$5, [
-          createVNode(_sfc_main$G, {
+          createVNode(_sfc_main$I, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -14938,14 +15160,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           "empty-text": props.emptyText,
           "controlled-externally": "",
           "aria-label": "Dropdown options",
-          onItemClick: _cache[4] || (_cache[4] = ($event) => modelValue.value = $event)
+          onItemClick: _cache[4] || (_cache[4] = ($event) => $event && (modelValue.value = $event))
         }, null, 8, ["class", "possible-values", "loading", "empty-text"])
       ]);
     };
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-9e62fb49"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-ceeaf8b9"]]);
 
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
@@ -15231,7 +15453,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           "empty-text": props.emptyText,
           "controlled-externally": "",
           "aria-label": "Dropdown options",
-          onItemClick
+          onItemClick: _cache[4] || (_cache[4] = ($event) => $event && onItemClick($event))
         }, null, 8, ["class", "possible-values", "loading", "empty-text"]),
         !props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
           createVNode(unref(KdsListItemButton), {
@@ -15246,7 +15468,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-361c57bf"]]);
+const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-bb63f252"]]);
 
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "KdsMultiSelectDropdown",
@@ -15745,7 +15967,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$1, toDisplayString(props.headline), 1),
-          createVNode(_sfc_main$L, {
+          createVNode(_sfc_main$N, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -16018,7 +16240,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1, [
               createElementVNode("div", _hoisted_2, toDisplayString(unref(config).value.message), 1),
               unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                createVNode(_sfc_main$w, {
+                createVNode(_sfc_main$y, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -16033,7 +16255,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           name: "footer",
           fn: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$L, {
+              return openBlock(), createBlock(_sfc_main$N, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -16065,5 +16287,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-41fc8d84"]]);
 
-export { KdsAvatar, KdsBadge, _sfc_main$L as KdsButton, KdsCardClickable, _sfc_main$w as KdsCheckbox, KdsCheckboxGroup, _sfc_main$m as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$k as KdsDateInput, _sfc_main$i as KdsDateTimeFormatInput, _sfc_main$b as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$K as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$8 as KdsMultiSelectDropdown, _sfc_main$h as KdsNumberInput, _sfc_main$g as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSubText, _sfc_main$o as KdsTextInput, KdsTextarea, _sfc_main$J as KdsToggleButton, 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, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$N as KdsButton, KdsCardClickable, _sfc_main$y as KdsCheckbox, KdsCheckboxGroup, _sfc_main$o as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$k as KdsDateInput, _sfc_main$i as KdsDateTimeFormatInput, _sfc_main$b as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$M as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$8 as KdsMultiSelectDropdown, _sfc_main$h as KdsNumberInput, _sfc_main$n as KdsPasswordInput, _sfc_main$g as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSubText, _sfc_main$q as KdsTextInput, KdsTextarea, _sfc_main$L as KdsToggleButton, _sfc_main$m 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, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map