@knime/kds-components 0.23.0 → 0.23.2

package/dist/index.js

@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$P = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$t = ["src"];
-const _hoisted_3$j = {
+const _hoisted_1$Q = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$u = ["src"];
+const _hoisted_3$k = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -59,10 +59,10 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$t)) : (openBlock(), createElementBlock("div", _hoisted_3$j, [
+        }, null, 40, _hoisted_2$u)) : (openBlock(), createElementBlock("div", _hoisted_3$k, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$P);
+      ], 10, _hoisted_1$Q);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc$1 = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$1d, [["__scopeId", "data-v-c90668bf"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$1e, [["__scopeId", "data-v-c90668bf"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -117,7 +117,7 @@ function useIcon({
   return iconComponent;
 }
 
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -146,7 +146,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$1c, [["__scopeId", "data-v-fb124eb6"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$1d, [["__scopeId", "data-v-fb124eb6"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -483,8 +483,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$O = ["title"];
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$P = ["title"];
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -524,12 +524,12 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$O);
+      ], 10, _hoisted_1$P);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$1b, [["__scopeId", "data-v-3b8ebdbd"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$1c, [["__scopeId", "data-v-3b8ebdbd"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -546,8 +546,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$N = { class: "label-wrapper" };
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$O = { class: "label-wrapper" };
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -569,13 +569,13 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$N, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$O, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$1a, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$1b, [["__scopeId", "data-v-df64f7cf"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -594,14 +594,14 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$M = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_1$N = ["role", "title", "aria-hidden", "aria-label"];
 const RGBA_SHORT_HEX_LENGTH = 4;
 const RGBA_LONG_HEX_LENGTH = 8;
 const ALPHA_NIBBLE_INDEX = 3;
 const ALPHA_BYTE_START = 6;
 const RGB_SHORT_HEX_LENGTH = 3;
 const RGB_LONG_HEX_LENGTH = 6;
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -676,12 +676,12 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(swatchStyle.value),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$M);
+      }, null, 14, _hoisted_1$N);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$19, [["__scopeId", "data-v-91e0130d"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$1a, [["__scopeId", "data-v-91e0130d"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -801,9 +801,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$L = ["title", "aria-label"];
-const _hoisted_2$s = ["title"];
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$M = ["title", "aria-label"];
+const _hoisted_2$t = ["title"];
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -832,13 +832,13 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$s)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$L);
+        }, toDisplayString(__props.label), 9, _hoisted_2$t)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$M);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$18, [["__scopeId", "data-v-01555495"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$19, [["__scopeId", "data-v-01555495"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -854,8 +854,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$K = ["data-style"];
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$L = ["data-style"];
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -880,12 +880,12 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$K);
+      ])], 10, _hoisted_1$L);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$17, [["__scopeId", "data-v-54835dc0"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$18, [["__scopeId", "data-v-54835dc0"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -895,14 +895,14 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$J = ["role"];
-const _hoisted_2$r = { class: "header" };
-const _hoisted_3$i = { class: "headline" };
-const _hoisted_4$e = {
+const _hoisted_1$K = ["role"];
+const _hoisted_2$s = { class: "header" };
+const _hoisted_3$j = { class: "headline" };
+const _hoisted_4$f = {
   key: 0,
   class: "body"
 };
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
     headline: {},
@@ -933,21 +933,21 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$r, [
+        createElementVNode("div", _hoisted_2$s, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$i, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$j, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$e, toDisplayString(props.description), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$J);
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$f, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$K);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$16, [["__scopeId", "data-v-af14056f"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$17, [["__scopeId", "data-v-af14056f"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -957,6 +957,122 @@ const kdsInlineMessageVariant = {
 };
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
+const _hoisted_1$J = { class: "donut-container" };
+const _hoisted_2$r = ["height", "width", "viewBox"];
+const _hoisted_3$i = ["r", "stroke-width"];
+const _hoisted_4$e = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_5$8 = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"];
+const _hoisted_6$6 = {
+  key: 0,
+  class: "donut-text"
+};
+const _hoisted_7$2 = { class: "title" };
+const _hoisted_8$2 = {
+  key: 0,
+  class: "sub-text"
+};
+const radius = 22;
+const innerRadius = 10;
+const backgroundStrokeOffset = 0.5;
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+  __name: "KdsDonutChart",
+  props: {
+    value: {},
+    secondaryValue: { default: 0 },
+    maxValue: {},
+    acceptValuesLargerThanMax: { type: Boolean, default: false },
+    animate: { type: Boolean, default: true },
+    title: {},
+    subText: {}
+  },
+  setup(__props) {
+    const clippedValue = computed(() => {
+      const clipValue = Math.max(0, __props.value);
+      return __props.acceptValuesLargerThanMax ? clipValue : Math.min(clipValue, __props.maxValue);
+    });
+    const secondaryClippedValue = computed(() => {
+      const clipValue = Math.max(0, __props.secondaryValue + clippedValue.value);
+      return __props.acceptValuesLargerThanMax ? clipValue : Math.min(clipValue, __props.maxValue);
+    });
+    const strokeWidth = computed(() => radius - innerRadius);
+    const backgroundStrokeWidth = computed(
+      // to account for rendering inaccuracies the background stroke is slightly smaller than the wedge stroke
+      () => strokeWidth.value - backgroundStrokeOffset
+    );
+    const r = computed(() => radius - strokeWidth.value / 2);
+    const diameter = computed(() => 2 * radius);
+    const viewBox = computed(() => `0 0 ${diameter.value} ${diameter.value}`);
+    const circumference = computed(() => 2 * Math.PI * r.value);
+    const calcStrokeDashOffset = (value) => {
+      if (__props.maxValue <= 0 || !Number.isFinite(__props.maxValue)) {
+        return circumference.value;
+      }
+      const strokeDiff = Math.min(
+        value / __props.maxValue * circumference.value,
+        circumference.value
+      );
+      return Math.max(circumference.value - strokeDiff, 0);
+    };
+    const strokeDashOffset = computed(
+      () => calcStrokeDashOffset(clippedValue.value)
+    );
+    const secondaryStrokeDashOffset = computed(
+      () => calcStrokeDashOffset(secondaryClippedValue.value)
+    );
+    const transformWedge = computed(() => `rotate(-90, ${radius}, ${radius})`);
+    const disabled = computed(() => !Number.isFinite(__props.maxValue));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$J, [
+        (openBlock(), createElementBlock("svg", {
+          height: diameter.value,
+          width: diameter.value,
+          viewBox: viewBox.value,
+          class: "donut-chart"
+        }, [
+          createElementVNode("circle", {
+            class: "background-circle",
+            cx: radius,
+            cy: radius,
+            r: r.value,
+            "stroke-width": backgroundStrokeWidth.value,
+            fill: "transparent"
+          }, null, 8, _hoisted_3$i),
+          __props.secondaryValue && !disabled.value ? (openBlock(), createElementBlock("circle", {
+            key: 0,
+            class: normalizeClass(["value-wedge", "secondary-circle", { animate: __props.animate }]),
+            cx: radius,
+            cy: radius,
+            r: r.value,
+            "stroke-width": strokeWidth.value,
+            "stroke-dasharray": circumference.value,
+            "stroke-dashoffset": secondaryStrokeDashOffset.value,
+            fill: "transparent",
+            transform: transformWedge.value
+          }, null, 10, _hoisted_4$e)) : createCommentVNode("", true),
+          !disabled.value ? (openBlock(), createElementBlock("circle", {
+            key: 1,
+            class: normalizeClass(["value-wedge", "primary-circle", { animate: __props.animate }]),
+            cx: radius,
+            cy: radius,
+            r: r.value,
+            "stroke-width": strokeWidth.value,
+            "stroke-dasharray": circumference.value,
+            "stroke-dashoffset": strokeDashOffset.value,
+            fill: "transparent",
+            transform: transformWedge.value
+          }, null, 10, _hoisted_5$8)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$r)),
+        __props.title ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
+          createElementVNode("div", _hoisted_7$2, toDisplayString(__props.title), 1),
+          __props.subText ? (openBlock(), createElementBlock("div", _hoisted_8$2, toDisplayString(__props.subText), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const KdsDonutChart = /* @__PURE__ */ _export_sfc$1(_sfc_main$16, [["__scopeId", "data-v-66e88c70"]]);
+
 const _hoisted_1$I = {
   key: 0,
   class: "label"
@@ -1091,11 +1207,22 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
+function isExternalUrl(url) {
+  const normalized = url.trim();
+  if (!normalized) {
+    return false;
+  }
+  if (normalized.startsWith("#") || normalized.startsWith("/") && !normalized.startsWith("//") || normalized.startsWith("./") || normalized.startsWith("../") || normalized.startsWith("?")) {
+    return false;
+  }
+  return true;
+}
+
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
-    disabled: { type: Boolean },
+    disabled: { type: Boolean, default: false },
     title: {},
     variant: { default: "filled" },
     label: {},
@@ -1110,23 +1237,33 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = createPropsRestProxy(__props, ["variant", "download", "rel", "target"]);
+    const rawProps = createPropsRestProxy(__props, ["variant", "disabled", "download", "rel", "target"]);
+    const props = computed(() => {
+      if (isExternalUrl(rawProps.to)) {
+        return {
+          ...rawProps,
+          trailingIcon: "external-link"
+        };
+      }
+      return rawProps;
+    });
     const component = computed(() => {
-      if (props.disabled) {
+      if (__props.disabled) {
         return "button";
       }
       return resolveNuxtLinkComponent();
     });
     const emit = __emit;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseButton, mergeProps(props, {
+      return openBlock(), createBlock(BaseButton, mergeProps(props.value, {
         variant: __props.variant,
+        disabled: __props.disabled,
         download: __props.download,
         rel: __props.rel,
         target: __props.target,
         component: component.value,
         onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16, ["variant", "download", "rel", "target", "component"]);
+      }), null, 16, ["variant", "disabled", "download", "rel", "target", "component"]);
     };
   }
 });
@@ -1331,21 +1468,11 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const linkComponent = resolveNuxtLinkComponent();
-    function inferVariantFromTo(to) {
-      const normalized = to.trim();
-      if (!normalized) {
-        return "internal";
-      }
-      if (normalized.startsWith("#") || normalized.startsWith("/") && !normalized.startsWith("//") || normalized.startsWith("./") || normalized.startsWith("../") || normalized.startsWith("?")) {
-        return "internal";
-      }
-      return "external";
-    }
     const variant = computed(() => {
       if (__props.download || __props.fileSize !== void 0) {
         return "document";
       }
-      return inferVariantFromTo(__props.to);
+      return isExternalUrl(__props.to) ? "external" : "internal";
     });
     const effectiveTarget = computed(
       () => __props.target ?? (variant.value === "external" ? "_blank" : void 0)
@@ -1429,7 +1556,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLink = /* @__PURE__ */ _export_sfc$1(_sfc_main$12, [["__scopeId", "data-v-65e776f1"]]);
+const KdsLink = /* @__PURE__ */ _export_sfc$1(_sfc_main$12, [["__scopeId", "data-v-56e748a8"]]);
 
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
@@ -1558,7 +1685,7 @@ const kdsProgressButtonState = {
 };
 const kdsProgressButtonStates = Object.values(kdsProgressButtonState);
 
-const _hoisted_1$F = { class: "kds-empty-state" };
+const _hoisted_1$F = ["aria-disabled"];
 const _hoisted_2$o = { class: "kds-empty-state-headline" };
 const _hoisted_3$h = {
   key: 1,
@@ -1573,12 +1700,14 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   props: {
     headline: {},
     description: {},
+    loadingSpinner: { type: Boolean },
+    disabled: { type: Boolean, default: false },
     button: {},
-    loadingSpinner: { type: Boolean }
+    secondaryButton: {}
   },
-  emits: ["buttonClick"],
+  emits: ["buttonClick", "secondaryButtonClick"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled"]);
     const emit = __emit;
     const isLinkButton = computed(
       () => props.button && "to" in props.button && props.button.to !== void 0
@@ -1586,8 +1715,17 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     const buttonComponent = computed(
       () => isLinkButton.value ? _sfc_main$13 : _sfc_main$14
     );
+    const isSecondaryLinkButton = computed(
+      () => props.secondaryButton && "to" in props.secondaryButton && props.secondaryButton.to !== void 0
+    );
+    const secondaryButtonComponent = computed(
+      () => isSecondaryLinkButton.value ? _sfc_main$13 : _sfc_main$14
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$F, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["kds-empty-state", { disabled: __props.disabled }]),
+        "aria-disabled": __props.disabled || void 0
+      }, [
         props.loadingSpinner ? (openBlock(), createBlock(KdsLoadingSpinner, {
           key: 0,
           "data-testid": "loading-spinner",
@@ -1599,15 +1737,20 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         props.description ? (openBlock(), createElementBlock("p", _hoisted_3$h, toDisplayString(props.description), 1)) : createCommentVNode("", true),
         props.button ? (openBlock(), createElementBlock("div", _hoisted_4$d, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
-            onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
-          }), null, 16))
+            disabled: props.button?.disabled || __props.disabled,
+            onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("buttonClick", $event))
+          }), null, 16, ["disabled"])),
+          props.secondaryButton ? (openBlock(), createBlock(resolveDynamicComponent(secondaryButtonComponent.value), mergeProps({ key: 0 }, props.secondaryButton, {
+            disabled: props.secondaryButton?.disabled || __props.disabled,
+            onClick: _cache[1] || (_cache[1] = ($event) => !__props.disabled && emit("secondaryButtonClick", $event))
+          }), null, 16, ["disabled"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ]);
+      ], 10, _hoisted_1$F);
     };
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$$, [["__scopeId", "data-v-5da4d570"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$$, [["__scopeId", "data-v-e913660a"]]);
 
 const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
@@ -1775,7 +1918,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$Z, [["__scopeId", "data-v-822789ec"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$Z, [["__scopeId", "data-v-3bdbc9c1"]]);
 
 const _sfc_main$Y = {  };
 
@@ -1784,7 +1927,7 @@ const _hoisted_1$D = { class: "kds-list-item-divider" };
 function _sfc_render$8(_ctx, _cache) {
   return (openBlock(), createElementBlock("hr", _hoisted_1$D))
 }
-const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$Y, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
+const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$Y, [['render',_sfc_render$8],['__scopeId',"data-v-7f982d9e"]]);
 
 const _hoisted_1$C = { class: "kds-list-item-section-title" };
 const _hoisted_2$m = {
@@ -1821,7 +1964,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$X, [["__scopeId", "data-v-53382531"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$X, [["__scopeId", "data-v-5eeb1226"]]);
 
 const _hoisted_1$B = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
 const _hoisted_2$l = ["role"];
@@ -2102,7 +2245,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-d8750fc1"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-9359aaf4"]]);
 
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -2135,7 +2278,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$A, [
-        createVNode(KdsListContainer, {
+        createVNode(unref(KdsListContainer), {
           id: props.id,
           ref_key: "listContainerEl",
           ref: listContainerEl,
@@ -2151,7 +2294,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$V, [["__scopeId", "data-v-d87656d8"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$V, [["__scopeId", "data-v-7a0323dd"]]);
 
 const _hoisted_1$z = ["id", "popover", "role"];
 const _hoisted_2$k = {
@@ -2386,7 +2529,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSplitButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-f72917bd"]]);
+const KdsSplitButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-8f48b87a"]]);
 
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -4078,7 +4221,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-1740ce83"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-c9f1be40"]]);
 
 const HEX_RADIX = 16;
 const RGB_MAX = 255;
@@ -15254,7 +15397,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$w, [["__scopeId", "data-v-f75ebe1b"]]);
+const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$w, [["__scopeId", "data-v-8c697d02"]]);
 
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "KdsDateTimeFormatInput",
@@ -15664,7 +15807,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__scopeId", "data-v-b1809b6d"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__scopeId", "data-v-3094963a"]]);
 
 const _hoisted_1$n = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
@@ -15848,7 +15991,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$r, [["__scopeId", "data-v-cf3becf9"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$r, [["__scopeId", "data-v-0f4de8fb"]]);
 
 const DROPDOWN_SEARCH_THRESHOLD = 12;
 
@@ -15973,7 +16116,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$q, [["__scopeId", "data-v-db105594"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$q, [["__scopeId", "data-v-e61a9cf9"]]);
 
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
@@ -16106,12 +16249,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["__scopeId", "data-v-13945d12"]]);
+const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["__scopeId", "data-v-21fb5571"]]);
 
 const _hoisted_1$j = { class: "kds-multi-select-dropdown-options" };
-const _hoisted_2$8 = { class: "kds-multi-select-dropdown-search" };
-const _hoisted_3$7 = {
+const _hoisted_2$8 = {
   key: 0,
+  class: "kds-multi-select-dropdown-search"
+};
+const _hoisted_3$7 = {
+  key: 1,
   class: "kds-multi-select-dropdown-footer"
 };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
@@ -16150,6 +16296,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         (option) => option.text.toLowerCase().includes(normalizedQuery)
       );
     });
+    const searchable = computed(() => {
+      return __props.allowNewValues || props.possibleValues.length >= DROPDOWN_SEARCH_THRESHOLD;
+    });
     const canAddNewValue = computed(() => {
       const trimmed = searchValue.value.trim();
       if (!__props.allowNewValues || trimmed.length === 0) {
@@ -16226,19 +16375,23 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     __expose({
       focus: () => {
         initialSelectedIds.value = new Set(modelValue.value);
-        searchEl.value?.focus();
+        if (searchable.value) {
+          searchEl.value?.focus();
+        } else {
+          listContainerRef.value?.focus();
+        }
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$j, [
-        createElementVNode("div", _hoisted_2$8, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
             modelValue: searchValue.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
             type: "search",
-            placeholder: "Search",
+            placeholder: __props.allowNewValues ? "Search or add new" : "Search",
             "aria-label": "Filter options",
             "aria-activedescendant": listContainerRef.value?.activeDescendant,
             "leading-icon": "search",
@@ -16246,8 +16399,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             onKeydown: _cache[1] || (_cache[1] = ($event) => listContainerRef.value?.handleKeydown($event)),
             onFocus: _cache[2] || (_cache[2] = ($event) => listContainerRef.value?.handleFocus()),
             onBlur: _cache[3] || (_cache[3] = ($event) => listContainerRef.value?.handleBlur())
-          }, null, 8, ["modelValue", "aria-activedescendant"])
-        ]),
+          }, null, 8, ["modelValue", "placeholder", "aria-activedescendant"])
+        ])) : createCommentVNode("", true),
         createVNode(unref(KdsListContainer), {
           ref: "listContainer",
           class: normalizeClass(["kds-multi-select-dropdown-list", {
@@ -16256,10 +16409,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           "possible-values": __props.loading ? [] : listOptions.value,
           loading: __props.loading,
           "empty-text": props.emptyText,
-          "controlled-externally": "",
+          "controlled-externally": searchable.value,
           "aria-label": "Dropdown options",
           onItemClick: _cache[4] || (_cache[4] = ($event) => $event !== void 0 && onItemClick($event))
-        }, null, 8, ["class", "possible-values", "loading", "empty-text"]),
+        }, null, 8, ["class", "possible-values", "loading", "empty-text", "controlled-externally"]),
         !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
           createVNode(unref(KdsListItemButton), {
             label: anyVisibleSelected.value ? "Clear all" : "Select all",
@@ -16273,7 +16426,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__scopeId", "data-v-9b631765"]]);
+const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__scopeId", "data-v-68fe366f"]]);
 
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsMultiSelectDropdown",
@@ -17137,8 +17290,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
                   createVNode(KdsEmptyState, {
                     headline: __props.loading ? "Loading data…" : __props.emptyStateLabel,
-                    "loading-spinner": __props.loading
-                  }, null, 8, ["headline", "loading-spinner"])
+                    "loading-spinner": __props.loading,
+                    disabled: __props.disabled
+                  }, null, 8, ["headline", "loading-spinner", "disabled"])
                 ])) : createCommentVNode("", true)
               ], 6)
             ]),
@@ -17151,7 +17305,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-24af1af0"]]);
+const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-ee1c7bd0"]]);
 
 const _hoisted_1$f = { class: "kds-list-column" };
 const _hoisted_2$5 = { class: "kds-list-header" };
@@ -17439,7 +17593,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TwinListBody = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-8a9e1b15"]]);
+const TwinListBody = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-11062d8e"]]);
 
 const kdsTwinListSearchMode = {
   MANUAL: "manual",
@@ -19283,5 +19437,5 @@ const kdsResponsiveButtonGroupAlignments = Object.values(
   kdsResponsiveButtonGroupAlignment
 );
 
-export { KdsAvatar, KdsBadge, _sfc_main$14 as KdsButton, KdsCardClickable, _sfc_main$O as KdsCheckbox, KdsCheckboxGroup, _sfc_main$B as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$x as KdsDateInput, _sfc_main$v as KdsDateTimeFormatInput, _sfc_main$p as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, KdsLink, _sfc_main$13 as KdsLinkButton, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$T as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$m as KdsMultiSelectDropdown, _sfc_main$F as KdsNumberInput, KdsPanelButtonBar, KdsPanelHeader, _sfc_main$A as KdsPasswordInput, _sfc_main$u as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$11 as KdsToggleButton, KdsTwinList, _sfc_main$z as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$14 as KdsButton, KdsCardClickable, _sfc_main$O as KdsCheckbox, KdsCheckboxGroup, _sfc_main$B as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$x as KdsDateInput, _sfc_main$v as KdsDateTimeFormatInput, KdsDonutChart, _sfc_main$p as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, KdsLink, _sfc_main$13 as KdsLinkButton, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$T as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$m as KdsMultiSelectDropdown, _sfc_main$F as KdsNumberInput, KdsPanelButtonBar, KdsPanelHeader, _sfc_main$A as KdsPasswordInput, _sfc_main$u as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$11 as KdsToggleButton, KdsTwinList, _sfc_main$z as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map