@knime/kds-components 0.17.2 → 0.18.0

package/dist/index.css

@@ -953,7 +953,7 @@ html.kds-legacy {
 }
 
 .kds-list-container {
-&[data-v-e3d86a4e] {
+&[data-v-9b505d0b] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -962,17 +962,17 @@ html.kds-legacy {
   padding: var(--kds-spacing-container-0-25x);
   overflow-y: auto;
 }
-&.standalone[data-v-e3d86a4e] {
+&.standalone[data-v-9b505d0b] {
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
-&[data-v-e3d86a4e]:focus-visible {
+&[data-v-9b505d0b]:focus-visible {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
     border-radius: var(--kds-border-radius-container-0-31x);
 }
 }
-.kds-list-container-empty[data-v-e3d86a4e] {
+.kds-list-container-empty[data-v-9b505d0b] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -1074,7 +1074,7 @@ html.kds-legacy {
   box-shadow: var(--kds-elevation-level-3);
 }
 
-.kds-menu-container[data-v-23e9404d] {
+.kds-menu-container[data-v-be36bcd4] {
   max-width: var(--kds-dimension-component-width-20x);
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
@@ -1465,7 +1465,7 @@ html.kds-legacy {
 }
 
 .container {
-&[data-v-8815d034] {
+&[data-v-d8e771c0] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -1477,46 +1477,46 @@ html.kds-legacy {
   border: var(--kds-border-action-input);
   border-radius: var(--kds-border-radius-container-0-37x);
 }
-&[data-v-8815d034]:has(input:focus:not(:disabled)) {
+&[data-v-d8e771c0]:has(input:focus:not(:disabled)) {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }
-&[data-v-8815d034]:has(.input-field:hover:not(:disabled, :focus)) {
+&[data-v-d8e771c0]:has(.input-field:hover:not(:disabled, :focus)) {
     background: var(--kds-color-background-input-hover);
 }
-&.error[data-v-8815d034] {
+&.error[data-v-d8e771c0] {
     border: var(--kds-border-action-error);
 }
-&.disabled[data-v-8815d034] {
+&.disabled[data-v-d8e771c0] {
     cursor: default;
     border: var(--kds-border-action-disabled);
     border-color: var(--kds-color-border-disabled);
 }
 }
 .icon-wrapper {
-&[data-v-8815d034] {
+&[data-v-d8e771c0] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--kds-color-text-and-icon-subtle);
 }
-&.leading[data-v-8815d034] {
+&.leading[data-v-d8e771c0] {
     padding-left: var(--kds-spacing-container-0-12x);
 }
-&.trailing[data-v-8815d034] {
+&.trailing[data-v-d8e771c0] {
     padding-right: var(--kds-spacing-container-0-12x);
 }
-.container.disabled &[data-v-8815d034] {
+.container.disabled &[data-v-d8e771c0] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.container:focus-within &[data-v-8815d034],
-  .container:has(.input-field.has-value) &[data-v-8815d034] {
+.container:focus-within &[data-v-d8e771c0],
+  .container:has(.input-field.has-value) &[data-v-d8e771c0] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
 .input-field {
-&[data-v-8815d034] {
+&[data-v-d8e771c0] {
   flex: 1 0 0;
   min-width: 0;
   height: var(--kds-dimension-component-height-1-75x);
@@ -1535,33 +1535,33 @@ html.kds-legacy {
   /* hide native search cancel button on Safari/WebKit, we provide our own clearable button */
 }
 &[type="number"] {
-&[data-v-8815d034] {
+&[data-v-d8e771c0] {
     appearance: textfield;
 }
-&[data-v-8815d034]::-webkit-outer-spin-button,
-    &[data-v-8815d034]::-webkit-inner-spin-button {
+&[data-v-d8e771c0]::-webkit-outer-spin-button,
+    &[data-v-d8e771c0]::-webkit-inner-spin-button {
       margin: 0;
       appearance: none;
 }
 }
-&[type="search"][data-v-8815d034]::-webkit-search-cancel-button {
+&[type="search"][data-v-d8e771c0]::-webkit-search-cancel-button {
     appearance: none;
 }
-&[data-v-8815d034]::placeholder {
+&[data-v-d8e771c0]::placeholder {
     color: var(--kds-color-text-and-icon-subtle);
 }
 &:disabled {
-&[data-v-8815d034] {
+&[data-v-d8e771c0] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-&[data-v-8815d034]::placeholder {
+&[data-v-d8e771c0]::placeholder {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
 }
 .unit {
-&[data-v-8815d034] {
+&[data-v-d8e771c0] {
   flex-shrink: 0;
   min-width: 0;
   margin: 0 var(--kds-spacing-container-0-12x);
@@ -1571,26 +1571,26 @@ html.kds-legacy {
   color: var(--kds-color-text-and-icon-neutral);
   white-space: nowrap;
 }
-&.placeholder[data-v-8815d034] {
+&.placeholder[data-v-d8e771c0] {
     color: var(--kds-color-text-and-icon-subtle);
 }
-&.disabled[data-v-8815d034] {
+&.disabled[data-v-d8e771c0] {
     color: var(--kds-color-text-and-icon-disabled);
 }
-.container:focus-within &[data-v-8815d034] {
+.container:focus-within &[data-v-d8e771c0] {
     color: var(--kds-color-text-and-icon-neutral);
 }
 }
-.clear-button[data-v-8815d034] {
+.clear-button[data-v-d8e771c0] {
   margin-left: var(--kds-spacing-container-0-12x);
 }
-.leading-slot[data-v-8815d034] {
+.leading-slot[data-v-d8e771c0] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
   align-items: center;
 }
-.trailing-slot[data-v-8815d034] {
+.trailing-slot[data-v-d8e771c0] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-12x);
@@ -3093,7 +3093,7 @@ html.kds-legacy {
 }
 }
 
-.kds-date-time-format-popover[data-v-892448f6] {
+.kds-date-time-format-popover[data-v-f75ebe1b] {
   display: flex;
   flex-direction: column;
   gap: var(--kds-spacing-container-0-5x);
@@ -3104,14 +3104,14 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-date-time-format-popover-list[data-v-892448f6] {
+.kds-date-time-format-popover-list[data-v-f75ebe1b] {
   width: var(--kds-dimension-component-width-16x);
   min-width: 100%;
   max-width: 100%;
   height: var(--kds-dimension-component-height-12x);
 }
 
-.kds-search-results-container[data-v-873d26bd] {
+.kds-search-results-container[data-v-df327342] {
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
@@ -3231,23 +3231,23 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   );
 }
 
-.kds-dropdown-container[data-v-9e62fb49] {
+.kds-dropdown-container[data-v-ceeaf8b9] {
   display: flex;
   flex-direction: column;
   background-color: var(--kds-color-surface-default);
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-dropdown-container-sticky-top[data-v-9e62fb49] {
+.kds-dropdown-container-sticky-top[data-v-ceeaf8b9] {
   padding: var(--kds-spacing-container-0-25x);
   background-color: var(--kds-color-surface-default);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-dropdown-container-list {
-&[data-v-9e62fb49] {
+&[data-v-ceeaf8b9] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-9e62fb49] {
+&.multiline[data-v-ceeaf8b9] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
@@ -3294,7 +3294,7 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
 }
 }
 
-.kds-multi-select-dropdown-options[data-v-361c57bf] {
+.kds-multi-select-dropdown-options[data-v-bb63f252] {
   display: flex;
   flex-direction: column;
   min-width: var(--kds-dimension-component-width-12x);
@@ -3302,19 +3302,19 @@ textarea[data-v-7a6592b5]::-webkit-scrollbar {
   border-radius: var(--kds-border-radius-container-0-50x);
   box-shadow: var(--kds-elevation-level-3);
 }
-.kds-multi-select-dropdown-search[data-v-361c57bf] {
+.kds-multi-select-dropdown-search[data-v-bb63f252] {
   padding: var(--kds-spacing-container-0-25x);
   border-bottom: var(--kds-border-base-subtle);
 }
 .kds-multi-select-dropdown-list {
-&[data-v-361c57bf] {
+&[data-v-bb63f252] {
   max-height: var(--kds-dimension-component-height-12x);
   }
-&.multiline[data-v-361c57bf] {
+&.multiline[data-v-bb63f252] {
     max-height: var(--kds-dimension-component-height-20x);
 }
 }
-.kds-multi-select-dropdown-footer[data-v-361c57bf] {
+.kds-multi-select-dropdown-footer[data-v-bb63f252] {
   padding: var(--kds-spacing-container-0-25x);
   border-top: var(--kds-border-base-subtle);
 }

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 = {
@@ -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$C, [["__scopeId", "data-v-9b505d0b"]]);
 
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -1803,6 +1815,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       };
     });
     const onItemClick = (itemId) => {
+      if (!itemId) {
+        return;
+      }
       isMenuOpen.value = false;
       emit("itemClick", itemId);
     };
@@ -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$A, [["__scopeId", "data-v-be36bcd4"]]);
 
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -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,
@@ -2793,6 +2808,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     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)),
@@ -2933,7 +2954,7 @@ 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$p, [["__scopeId", "data-v-d8e771c0"]]);
 
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
@@ -13880,14 +13901,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",
@@ -14123,6 +14144,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 +14262,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 +14311,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,7 +14324,7 @@ 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(() => [
@@ -14283,7 +14335,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 "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, {
                 type: "button",
@@ -14292,7 +14348,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 "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
@@ -14553,6 +14613,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 +14683,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 +14708,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 +14729,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({
@@ -14938,14 +15005,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 +15298,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 +15313,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",