@knime/kds-components 0.24.1 → 0.25.1

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 = {
@@ -10,7 +10,7 @@ import './index.css';const kdsAvatarSize = {
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
 const _hoisted_1$X = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$y = ["src"];
+const _hoisted_2$x = ["src"];
 const _hoisted_3$o = {
   key: 1,
   class: "kds-avatar-initials",
@@ -59,7 +59,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$y)) : (openBlock(), createElementBlock("div", _hoisted_3$o, [
+        }, null, 40, _hoisted_2$x)) : (openBlock(), createElementBlock("div", _hoisted_3$o, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
       ], 10, _hoisted_1$X);
@@ -802,7 +802,7 @@ function useKdsIsTruncated(elementRef) {
 }
 
 const _hoisted_1$T = ["title", "aria-label"];
-const _hoisted_2$x = ["title"];
+const _hoisted_2$w = ["title"];
 const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
@@ -832,7 +832,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$x)) : createCommentVNode("", true)
+        }, toDisplayString(__props.label), 9, _hoisted_2$w)) : createCommentVNode("", true)
       ], 10, _hoisted_1$T);
     };
   }
@@ -896,7 +896,7 @@ const kdsLoadingSpinnerVariants = Object.values(
 );
 
 const _hoisted_1$R = ["role"];
-const _hoisted_2$w = { class: "header" };
+const _hoisted_2$v = { class: "header" };
 const _hoisted_3$n = { class: "headline" };
 const _hoisted_4$i = {
   key: 0,
@@ -933,7 +933,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$w, [
+        createElementVNode("div", _hoisted_2$v, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
@@ -958,7 +958,7 @@ const kdsInlineMessageVariant = {
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
 const _hoisted_1$Q = { class: "donut-container" };
-const _hoisted_2$v = ["height", "width", "viewBox"];
+const _hoisted_2$u = ["height", "width", "viewBox"];
 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"];
@@ -1061,7 +1061,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
             fill: "transparent",
             transform: transformWedge.value
           }, null, 10, _hoisted_5$8)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$v)),
+        ], 8, _hoisted_2$u)),
         __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$7, [
           createElementVNode("div", _hoisted_7$3, toDisplayString(__props.title), 1),
           __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$2, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
@@ -1133,6 +1133,7 @@ const _sfc_main$1g = /* @__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,
@@ -1155,12 +1156,12 @@ const _sfc_main$1g = /* @__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$1g, [["__scopeId", "data-v-a696a1ec"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__scopeId", "data-v-80e22f2e"]]);
 
 const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
@@ -1457,7 +1458,7 @@ function prettyBytes(number, options) {
 }
 
 const _hoisted_1$N = { class: "label" };
-const _hoisted_2$u = {
+const _hoisted_2$t = {
   key: 1,
   class: "file-size"
 };
@@ -1557,7 +1558,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$u, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$t, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
@@ -1604,7 +1605,7 @@ const kdsToggleButtonVariant = {
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
 const _hoisted_1$M = ["data-visible"];
-const _hoisted_2$t = ["data-visible"];
+const _hoisted_2$s = ["data-visible"];
 const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
@@ -1675,7 +1676,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$t)
+            ], 8, _hoisted_2$s)
           ], 2)
         ]),
         _: 1
@@ -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
@@ -1957,7 +1960,7 @@ const kdsListItemAccessorySize = {
 };
 
 const _hoisted_1$L = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$s = {
+const _hoisted_2$r = {
   key: 0,
   class: "accessory"
 };
@@ -2035,7 +2038,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$s, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$r, [
           createVNode(_sfc_main$1a, {
             accessory: props.accessory,
             size: accessorySize.value,
@@ -2084,7 +2087,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-def6165b"]]);
 
 const _hoisted_1$K = { class: "kds-list-item-section-title" };
-const _hoisted_2$r = {
+const _hoisted_2$q = {
   key: 0,
   class: "icon"
 };
@@ -2101,7 +2104,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$K, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$r, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$q, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -2172,11 +2175,12 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     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$16 = /* @__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$16 = /* @__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) => {
@@ -2244,7 +2252,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-68200614"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-69149ee8"]]);
 
 const kdsPopoverPlacement = {
   CUSTOM: "custom"
@@ -2253,7 +2261,7 @@ const kdsPopoverType = {
   AUTO: "auto"};
 
 const _hoisted_1$I = ["id", "popover", "role"];
-const _hoisted_2$q = {
+const _hoisted_2$p = {
   key: 0,
   class: "kds-popover-default-content"
 };
@@ -2315,7 +2323,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$q, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$p, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
       ], 46, _hoisted_1$I);
     };
@@ -2516,7 +2524,7 @@ const kdsButtonVariant = {
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
 const _hoisted_1$H = ["aria-disabled"];
-const _hoisted_2$p = { class: "kds-empty-state-headline" };
+const _hoisted_2$o = { class: "kds-empty-state-headline" };
 const _hoisted_3$j = {
   key: 1,
   class: "kds-empty-state-description"
@@ -2563,7 +2571,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$p, toDisplayString(props.headline), 1),
+        createElementVNode("p", _hoisted_2$o, toDisplayString(props.headline), 1),
         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, {
@@ -2582,8 +2590,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 
 const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-e913660a"]]);
 
-const _hoisted_1$G = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
-const _hoisted_2$o = ["role"];
+const _hoisted_1$G = ["aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
 const loadingStateText = "Loading entries";
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
@@ -2595,11 +2602,11 @@ const _sfc_main$11 = /* @__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$11 = /* @__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$11 = /* @__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$11 = /* @__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$11 = /* @__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$11 = /* @__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,13 +2714,13 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             headline: __props.loading ? loadingStateText : __props.emptyText,
             "loading-spinner": __props.loading
           }, null, 8, ["headline", "loading-spinner"])
-        ], 8, _hoisted_2$o)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
       ], 16, _hoisted_1$G);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__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,
@@ -2743,8 +2744,8 @@ const _sfc_main$10 = /* @__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();
@@ -2839,6 +2840,14 @@ const _sfc_main$$ = /* @__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$$ = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(KdsMenuContainer, {
             id: props.id,
+            ref: "menuContainer",
             "aria-label": props.ariaLabel,
             items: props.items,
             "menu-max-height": __props.menuMaxHeight,
@@ -4715,7 +4725,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         __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$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-69242818"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-b8ccb955"]]);
 
 const usePointerHandler = (updateFromEvent) => {
   const activePointerId = ref(null);
@@ -5096,7 +5105,6 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           }), {
             trailing: withCtx(() => [
               createVNode(_sfc_main$1f, {
-                type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "minus",
@@ -5109,7 +5117,6 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
                 onPointercancel: stopRepeating
               }, null, 8, ["ariaLabel", "disabled"]),
               createVNode(_sfc_main$1f, {
-                type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "plus",
@@ -6032,7 +6039,6 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 key: 0,
                 modelValue: showValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showValue.value = $event),
-                type: "button",
                 variant: "outlined",
                 size: "xsmall",
                 "leading-icon": "eye",
@@ -11241,7 +11247,16 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const popoverIsVisible = ref(false);
     const popoverRef = useTemplateRef("popoverRef");
     const datePickerRef = useTemplateRef("datePickerRef");
-    const { displayValue, isEmpty, isComplete, isValidDate, segments } = useDateInputMask(modelValue);
+    const { displayValue, isEmpty, isComplete, isValidDate, parsedDate, segments } = useDateInputMask(modelValue);
+    const clampToRange = (date) => {
+      if (__props.minDate && Un.PlainDate.compare(date, __props.minDate) < 0) {
+        return __props.minDate;
+      }
+      if (__props.maxDate && Un.PlainDate.compare(date, __props.maxDate) > 0) {
+        return __props.maxDate;
+      }
+      return date;
+    };
     const inputError = ref(false);
     const monthFormatter = new Intl.DateTimeFormat("en-US", {
       month: "long",
@@ -11295,7 +11310,14 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         inputError.value = false;
         return;
       }
-      inputError.value = !isComplete.value || !isValidDate.value;
+      const valid = isComplete.value && isValidDate.value;
+      inputError.value = !valid;
+      if (valid && parsedDate.value) {
+        const clamped = clampToRange(parsedDate.value);
+        if (!parsedDate.value.equals(clamped)) {
+          displayValue.value = clamped.toString({ calendarName: "never" });
+        }
+      }
     };
     watch([isEmpty, isComplete, isValidDate], () => {
       if (inputError.value && (isEmpty.value || isComplete.value && isValidDate.value)) {
@@ -11331,7 +11353,6 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               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",
@@ -11944,6 +11965,7 @@ const _sfc_main$z = /* @__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,7 +11981,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-3094963a"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-3e274ed2"]]);
 
 const _hoisted_1$r = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
@@ -12578,7 +12600,6 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               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",
@@ -15712,7 +15733,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         createElementVNode("h6", null, toDisplayString(__props.headline), 1),
         createVNode(_sfc_main$1f, {
           class: "kds-close-button",
-          type: "button",
           "leading-icon": "x-close",
           size: "small",
           ariaLabel: "Close panel",
@@ -15724,7 +15744,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",