@knime/kds-components 0.21.0 → 0.22.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, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, defineAsyncComponent, onBeforeUpdate, withModifiers, reactive, onMounted, onUnmounted, toRefs, normalizeProps, inject, withKeys, withDirectives, provide, guardReactiveProps, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, onBeforeUnmount, vModelText, useCssVars, createSlots } 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, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, withKeys, defineAsyncComponent, onBeforeUpdate, withModifiers, reactive, onMounted, onUnmounted, toRefs, normalizeProps, inject, withDirectives, provide, guardReactiveProps, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, onBeforeUnmount, vModelText, useCssVars, createSlots } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$G = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$q = ["src"];
-const _hoisted_3$g = {
+const _hoisted_1$K = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$s = ["src"];
+const _hoisted_3$i = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -59,10 +59,10 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$q)) : (openBlock(), createElementBlock("div", _hoisted_3$g, [
+        }, null, 40, _hoisted_2$s)) : (openBlock(), createElementBlock("div", _hoisted_3$i, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$G);
+      ], 10, _hoisted_1$K);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc$1 = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$11, [["__scopeId", "data-v-c90668bf"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$18, [["__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$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -146,7 +146,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$10, [["__scopeId", "data-v-fb124eb6"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$17, [["__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$F = ["title"];
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _hoisted_1$J = ["title"];
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -524,12 +524,12 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$F);
+      ], 10, _hoisted_1$J);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$$, [["__scopeId", "data-v-3b8ebdbd"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$16, [["__scopeId", "data-v-3b8ebdbd"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -546,8 +546,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$E = { class: "label-wrapper" };
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _hoisted_1$I = { class: "label-wrapper" };
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -569,13 +569,13 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$E, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$I, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$_, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$15, [["__scopeId", "data-v-df64f7cf"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -594,8 +594,8 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$D = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$H = ["role", "title", "aria-hidden", "aria-label"];
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -630,12 +630,12 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({ backgroundColor: backgroundColor.value }),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$D);
+      }, null, 14, _hoisted_1$H);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$Z, [["__scopeId", "data-v-2e300e76"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$14, [["__scopeId", "data-v-2e300e76"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -755,9 +755,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$C = ["title", "aria-label"];
-const _hoisted_2$p = ["title"];
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$G = ["title", "aria-label"];
+const _hoisted_2$r = ["title"];
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -786,13 +786,13 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$p)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$C);
+        }, toDisplayString(__props.label), 9, _hoisted_2$r)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$G);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$Y, [["__scopeId", "data-v-01555495"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$13, [["__scopeId", "data-v-01555495"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -808,8 +808,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$B = ["data-style"];
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _hoisted_1$F = ["data-style"];
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -834,12 +834,12 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$B);
+      ])], 10, _hoisted_1$F);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$X, [["__scopeId", "data-v-54835dc0"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$12, [["__scopeId", "data-v-54835dc0"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -849,14 +849,14 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$A = ["role"];
-const _hoisted_2$o = { class: "header" };
-const _hoisted_3$f = { class: "headline" };
-const _hoisted_4$b = {
+const _hoisted_1$E = ["role"];
+const _hoisted_2$q = { class: "header" };
+const _hoisted_3$h = { class: "headline" };
+const _hoisted_4$d = {
   key: 0,
   class: "body"
 };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
     headline: {},
@@ -887,21 +887,21 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$o, [
+        createElementVNode("div", _hoisted_2$q, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$f, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$h, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$b, toDisplayString(props.description), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$A);
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$d, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$E);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-af14056f"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$11, [["__scopeId", "data-v-af14056f"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -911,11 +911,11 @@ const kdsInlineMessageVariant = {
 };
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
-const _hoisted_1$z = {
+const _hoisted_1$D = {
   key: 0,
   class: "label"
 };
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -930,11 +930,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     success: { type: Boolean, default: false },
     error: { type: Boolean, default: false },
     toggled: { type: Boolean, default: false },
+    removeBorderRadius: { default: () => void 0 },
     component: { default: "button" }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = createPropsRestProxy(__props, ["component", "size", "destructive", "success", "error", "disabled", "toggled"]);
+    const props = createPropsRestProxy(__props, ["component", "size", "destructive", "success", "error", "disabled", "toggled", "removeBorderRadius"]);
     const emit = __emit;
     const classes = computed(() => [
       "button",
@@ -944,7 +945,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       { disabled: __props.disabled },
       { toggled: __props.toggled },
       { success: __props.success },
-      { error: __props.error }
+      { error: __props.error },
+      __props.removeBorderRadius ? `remove-border-radius-${__props.removeBorderRadius}` : void 0
     ]);
     const iconSize = computed(() => {
       if (__props.size === "xsmall") {
@@ -974,7 +976,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$z, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$D, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -987,9 +989,9 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$V, [["__scopeId", "data-v-20cfd7e3"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$10, [["__scopeId", "data-v-a696a1ec"]]);
 
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -1043,7 +1045,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -1056,7 +1058,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     ariaLabel: {},
     destructive: { type: Boolean },
     to: {},
-    download: { type: Boolean },
+    download: { type: Boolean, default: () => void 0 },
     target: { default: null },
     rel: { default: null }
   },
@@ -1262,12 +1264,12 @@ function prettyBytes(number, options) {
 	return applyFixedWidth(result, options.fixedWidth);
 }
 
-const _hoisted_1$y = { class: "label" };
-const _hoisted_2$n = {
+const _hoisted_1$C = { class: "label" };
+const _hoisted_2$p = {
   key: 1,
   class: "file-size"
 };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "KdsLink",
   props: {
     to: {},
@@ -1367,13 +1369,13 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         onClick
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$y, toDisplayString(__props.label), 1),
+          createElementVNode("span", _hoisted_1$C, toDisplayString(__props.label), 1),
           variant.value === "external" ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$n, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$p, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
@@ -1381,9 +1383,9 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLink = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-65e776f1"]]);
+const KdsLink = /* @__PURE__ */ _export_sfc$1(_sfc_main$Z, [["__scopeId", "data-v-65e776f1"]]);
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1419,9 +1421,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
-const _hoisted_1$x = ["data-visible"];
-const _hoisted_2$m = ["data-visible"];
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$B = ["data-visible"];
+const _hoisted_2$o = ["data-visible"];
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1482,7 +1484,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$x),
+            ], 8, _hoisted_1$B),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
@@ -1491,7 +1493,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$m)
+            ], 8, _hoisted_2$o)
           ], 2)
         ]),
         _: 1
@@ -1500,7 +1502,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$Q, [["__scopeId", "data-v-d38d7ade"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$X, [["__scopeId", "data-v-d38d7ade"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1510,17 +1512,17 @@ const kdsProgressButtonState = {
 };
 const kdsProgressButtonStates = Object.values(kdsProgressButtonState);
 
-const _hoisted_1$w = { class: "kds-empty-state" };
-const _hoisted_2$l = { class: "kds-empty-state-headline" };
-const _hoisted_3$e = {
+const _hoisted_1$A = { class: "kds-empty-state" };
+const _hoisted_2$n = { class: "kds-empty-state-headline" };
+const _hoisted_3$g = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$a = {
+const _hoisted_4$c = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -1536,10 +1538,10 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$T : _sfc_main$U
+      () => isLinkButton.value ? _sfc_main$_ : _sfc_main$$
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+      return openBlock(), createElementBlock("div", _hoisted_1$A, [
         props.loadingSpinner ? (openBlock(), createBlock(KdsLoadingSpinner, {
           key: 0,
           "data-testid": "loading-spinner",
@@ -1547,9 +1549,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$l, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$e, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$a, [
+        createElementVNode("p", _hoisted_2$n, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$g, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
             onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
           }), null, 16))
@@ -1559,9 +1561,9 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["__scopeId", "data-v-5da4d570"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-5da4d570"]]);
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -1612,28 +1614,28 @@ const kdsListItemVariant = {
   LARGE: "large"
 };
 
-const _hoisted_1$v = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$k = {
+const _hoisted_1$z = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_2$m = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$d = { class: "content" };
-const _hoisted_4$9 = ["title"];
-const _hoisted_5$6 = {
+const _hoisted_3$f = { class: "content" };
+const _hoisted_4$b = ["title"];
+const _hoisted_5$7 = {
   key: 0,
   class: "prefix"
 };
-const _hoisted_6$4 = ["title"];
-const _hoisted_7 = { class: "trailing-item" };
-const _hoisted_8 = {
+const _hoisted_6$5 = ["title"];
+const _hoisted_7$1 = { class: "trailing-item" };
+const _hoisted_8$1 = {
   key: 0,
   class: "shortcut"
 };
-const _hoisted_9 = {
+const _hoisted_9$1 = {
   key: 2,
   class: "trailing-item-reserve-space"
 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
@@ -1687,64 +1689,64 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$k, [
-          createVNode(_sfc_main$O, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$m, [
+          createVNode(_sfc_main$V, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$d, [
+        createElementVNode("span", _hoisted_3$f, [
           createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
             class: "label",
             title: unref(isLabelTruncated) ? props.label : void 0
           }, [
-            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$6, "(Missing) ")) : createCommentVNode("", true),
+            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$7, "(Missing) ")) : createCommentVNode("", true),
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.label), 3)
-          ], 8, _hoisted_4$9),
+          ], 8, _hoisted_4$b),
           props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
             ref: subtextEl,
             class: "subtext",
             title: unref(isSubtextTruncated) ? props.subText : void 0
-          }, toDisplayString(props.subText), 9, _hoisted_6$4)) : createCommentVNode("", true)
+          }, toDisplayString(props.subText), 9, _hoisted_6$5)) : createCommentVNode("", true)
         ]),
-        createElementVNode("span", _hoisted_7, [
-          props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(props.shortcut), 1)) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_7$1, [
+          props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_8$1, toDisplayString(props.shortcut), 1)) : createCommentVNode("", true),
           props.trailingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
             size: "small"
-          }, null, 8, ["name"])) : (openBlock(), createElementBlock("span", _hoisted_9))
+          }, null, 8, ["name"])) : (openBlock(), createElementBlock("span", _hoisted_9$1))
         ])
-      ], 10, _hoisted_1$v);
+      ], 10, _hoisted_1$z);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["__scopeId", "data-v-3dac6df5"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-822789ec"]]);
 
-const _sfc_main$M = {  };
+const _sfc_main$T = {  };
 
-const _hoisted_1$u = { class: "kds-list-item-divider" };
+const _hoisted_1$y = { class: "kds-list-item-divider" };
 
 function _sfc_render$8(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$u))
+  return (openBlock(), createElementBlock("hr", _hoisted_1$y))
 }
-const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$M, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
+const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$T, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
 
-const _hoisted_1$t = { class: "kds-list-item-section-title" };
-const _hoisted_2$j = {
+const _hoisted_1$x = { class: "kds-list-item-section-title" };
+const _hoisted_2$l = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$c = ["title"];
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _hoisted_3$e = ["title"];
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -1755,8 +1757,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$l, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -1767,18 +1769,18 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$c)
+        }, toDisplayString(props.label), 9, _hoisted_3$e)
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["__scopeId", "data-v-53382531"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-53382531"]]);
 
-const _hoisted_1$s = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
-const _hoisted_2$i = ["role"];
+const _hoisted_1$w = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_2$k = ["role"];
 const loadingStateText = "Loading entries";
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
@@ -1948,7 +1950,11 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       handleFocus,
       /** Notify the list that its controlling element lost focus */
       handleBlur,
-      activeDescendant: activeId
+      activeDescendant: activeId,
+      /** Moves focus to the list container element */
+      focus: () => {
+        containerEl.value?.focus();
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
@@ -1958,7 +1964,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         "aria-busy": __props.loading,
         "aria-label": props.ariaLabel,
         "aria-activedescendant": !props.controlledExternally && activeId.value ? activeId.value : void 0,
-        class: ["kds-list-container", { standalone: !props.controlledExternally }],
+        class: [
+          "kds-list-container",
+          { standalone: !props.controlledExternally, menu: __props.role === "menu" }
+        ],
         tabindex: props.controlledExternally ? void 0 : 0,
         onKeydown: handleKeydown,
         onFocus: handleFocus,
@@ -2012,31 +2021,76 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             headline: __props.loading ? loadingStateText : __props.emptyText,
             "loading-spinner": __props.loading
           }, null, 8, ["headline", "loading-spinner"])
-        ], 8, _hoisted_2$i)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$s);
+        ], 8, _hoisted_2$k)) : createCommentVNode("", true)
+      ], 16, _hoisted_1$w);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["__scopeId", "data-v-710126a1"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-446a5ba1"]]);
 
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsListContainer
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _hoisted_1$r = ["id", "popover", "role"];
-const _hoisted_2$h = {
+const _hoisted_1$v = { class: "kds-menu-container" };
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+  __name: "KdsMenuContainer",
+  props: {
+    id: {},
+    ariaLabel: { default: "Actions" },
+    items: {},
+    menuMaxHeight: {}
+  },
+  emits: ["itemClick"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = createPropsRestProxy(__props, ["ariaLabel", "menuMaxHeight"]);
+    const emit = __emit;
+    const listContainerEl = useTemplateRef("listContainerEl");
+    const onItemClick = (itemId) => {
+      if (itemId) {
+        emit("itemClick", itemId);
+      }
+    };
+    __expose({
+      focus: () => {
+        listContainerEl.value?.focus();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+        createVNode(KdsListContainer, {
+          id: props.id,
+          ref_key: "listContainerEl",
+          ref: listContainerEl,
+          "possible-values": props.items,
+          "empty-text": "Menu is empty",
+          "aria-label": __props.ariaLabel,
+          role: "menu",
+          style: normalizeStyle({ maxHeight: __props.menuMaxHeight }),
+          onItemClick
+        }, null, 8, ["id", "possible-values", "aria-label", "style"])
+      ]);
+    };
+  }
+});
+
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$Q, [["__scopeId", "data-v-d87656d8"]]);
+
+const _hoisted_1$u = ["id", "popover", "role"];
+const _hoisted_2$j = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     placement: { default: "bottom-left" },
     role: {},
     popoverType: { default: "auto" },
     fullWidth: { type: Boolean, default: false },
+    maxInlineSize: { default: () => void 0 },
     content: {}
   }, {
     "modelValue": { type: Boolean, ...{ default: false } },
@@ -2044,7 +2098,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = createPropsRestProxy(__props, ["placement", "popoverType", "fullWidth"]);
+    const props = createPropsRestProxy(__props, ["placement", "popoverType", "fullWidth", "maxInlineSize"]);
     const open = useModel(__props, "modelValue");
     const popoverEl = useTemplateRef("popoverEl");
     const popoverId = useId();
@@ -2068,26 +2122,26 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         ref: popoverEl,
         class: normalizeClass(["kds-popover", ["floating", __props.placement, { "full-width": __props.fullWidth }]]),
         popover: __props.popoverType,
-        style: normalizeStyle({ "position-anchor": anchorName }),
+        style: normalizeStyle({ "position-anchor": anchorName, "max-inline-size": __props.maxInlineSize }),
         role: props.role,
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$h, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$j, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
-      ], 46, _hoisted_1$r);
+      ], 46, _hoisted_1$u);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["__scopeId", "data-v-914e6d2e"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["__scopeId", "data-v-83c11cee"]]);
 
 const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsPopover
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2120,63 +2174,47 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     });
     const isMenuOpen = ref(false);
     const popoverEl = useTemplateRef("popoverEl");
-    const listContainerEl = useTemplateRef("listContainerEl");
+    const menuContainer = useTemplateRef("menuContainer");
     const menuId = useId();
-    const maxHeightStyle = computed(() => {
-      if (!__props.menuMaxHeight) {
-        return {};
+    watch(isMenuOpen, async (menuOpen) => {
+      if (!menuOpen) {
+        return;
       }
-      return {
-        maxHeight: __props.menuMaxHeight,
-        overflowY: "auto"
-      };
+      await nextTick();
+      menuContainer.value?.focus();
     });
     const onItemClick = (itemId) => {
-      if (!itemId) {
-        return;
-      }
       isMenuOpen.value = false;
       emit("itemClick", itemId);
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$R, mergeProps({
+        createVNode(_sfc_main$Y, mergeProps({
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event)
         }, toggleButtonProps.value, {
           "aria-haspopup": "menu",
           "aria-expanded": isMenuOpen.value,
           "aria-controls": unref(menuId),
-          style: popoverEl.value?.anchorStyle,
-          onFocus: listContainerEl.value?.handleFocus,
-          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"]),
+          style: popoverEl.value?.anchorStyle
+        }), null, 16, ["modelValue", "aria-expanded", "aria-controls", "style"]),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
           modelValue: isMenuOpen.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isMenuOpen.value = $event),
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isMenuOpen.value = $event),
           placement: "bottom-left",
           "aria-label": "Menu"
         }, {
           default: withCtx(() => [
-            createElementVNode("div", {
-              class: "kds-menu-container",
-              style: normalizeStyle(maxHeightStyle.value)
-            }, [
-              createVNode(KdsListContainer, {
-                id: unref(menuId),
-                ref_key: "listContainerEl",
-                ref: listContainerEl,
-                "possible-values": __props.items,
-                "empty-text": "Menu is empty",
-                "aria-label": "Actions",
-                role: "menu",
-                "controlled-externally": "",
-                onItemClick
-              }, null, 8, ["id", "possible-values"])
-            ], 4)
+            createVNode(KdsMenuContainer, {
+              id: unref(menuId),
+              ref_key: "menuContainer",
+              ref: menuContainer,
+              items: props.items,
+              "menu-max-height": __props.menuMaxHeight,
+              onItemClick
+            }, null, 8, ["id", "items", "menu-max-height"])
           ]),
           _: 1
         }, 8, ["modelValue"])
@@ -2185,7 +2223,94 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["__scopeId", "data-v-0257e1cd"]]);
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
+  __name: "KdsSplitButton",
+  props: {
+    size: { default: "medium" },
+    disabled: { type: Boolean },
+    title: {},
+    variant: { default: "filled" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    alternativeActions: {},
+    menuMaxHeight: {}
+  },
+  emits: ["click", "clickItem"],
+  setup(__props, { emit: __emit }) {
+    const props = createPropsRestProxy(__props, ["variant", "size", "alternativeActions", "menuMaxHeight"]);
+    const emit = __emit;
+    const isMenuOpen = ref(false);
+    const popoverEl = useTemplateRef("popoverEl");
+    const menuContainer = useTemplateRef("menuContainer");
+    const menuId = useId();
+    function onItemClick(itemId) {
+      isMenuOpen.value = false;
+      emit("clickItem", itemId);
+    }
+    watch(isMenuOpen, (open) => {
+      if (open) {
+        nextTick(() => menuContainer.value?.focus());
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({
+          "kds-split-button": true,
+          [__props.variant]: true,
+          [__props.size]: true,
+          disabled: props.disabled
+        })
+      }, [
+        createVNode(BaseButton, mergeProps(props, {
+          class: ["kds-split-button-primary", __props.variant],
+          size: __props.size,
+          variant: __props.variant,
+          "remove-border-radius": "right",
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+        }), null, 16, ["class", "size", "variant"]),
+        createVNode(BaseButton, {
+          class: "kds-split-button-secondary",
+          "remove-border-radius": "left",
+          size: __props.size,
+          variant: __props.variant,
+          "leading-icon": "chevron-down",
+          disabled: props.disabled,
+          ariaLabel: "More options",
+          "aria-haspopup": "menu",
+          "aria-expanded": isMenuOpen.value,
+          "aria-controls": unref(menuId),
+          style: normalizeStyle(popoverEl.value?.anchorStyle),
+          onClick: _cache[1] || (_cache[1] = ($event) => isMenuOpen.value = !isMenuOpen.value)
+        }, null, 8, ["size", "variant", "disabled", "aria-expanded", "aria-controls", "style"]),
+        createVNode(KdsPopover, {
+          ref_key: "popoverEl",
+          ref: popoverEl,
+          modelValue: isMenuOpen.value,
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isMenuOpen.value = $event),
+          placement: "bottom-left"
+        }, {
+          default: withCtx(() => [
+            createVNode(KdsMenuContainer, {
+              id: unref(menuId),
+              ref_key: "menuContainer",
+              ref: menuContainer,
+              items: __props.alternativeActions,
+              "menu-max-height": __props.menuMaxHeight,
+              "aria-label": "Actions",
+              onItemClick,
+              onKeydown: _cache[2] || (_cache[2] = withKeys(($event) => isMenuOpen.value = false, ["escape"]))
+            }, null, 8, ["id", "items", "menu-max-height"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ], 2);
+    };
+  }
+});
+
+const KdsSplitButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["__scopeId", "data-v-f9ca012e"]]);
 
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -2201,9 +2326,9 @@ const kdsButtonVariant = {
 };
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
-const _hoisted_1$q = { class: "kds-label-wrapper" };
-const _hoisted_2$g = ["id", "for", "title"];
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = { class: "kds-label-wrapper" };
+const _hoisted_2$i = ["id", "for", "title"];
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -2220,7 +2345,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -2228,7 +2353,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$g),
+        }, toDisplayString(props.label), 9, _hoisted_2$i),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -2239,11 +2364,11 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-13bea091"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["__scopeId", "data-v-13bea091"]]);
 
-const _hoisted_1$p = ["id"];
-const _hoisted_2$f = { class: "subtext-text" };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = ["id"];
+const _hoisted_2$h = { class: "subtext-text" };
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -2274,27 +2399,27 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$f, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$p)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$h, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$s)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["__scopeId", "data-v-2e6ba10c"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["__scopeId", "data-v-2e6ba10c"]]);
 
-const _hoisted_1$o = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$e = { class: "control" };
-const _hoisted_3$b = {
+const _hoisted_1$r = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$g = { class: "control" };
+const _hoisted_3$d = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$8 = { class: "label" };
-const _hoisted_5$5 = ["id"];
-const _hoisted_6$3 = {
+const _hoisted_4$a = { class: "label" };
+const _hoisted_5$6 = ["id"];
+const _hoisted_6$4 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2367,7 +2492,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$e, [
+          createElementVNode("div", _hoisted_2$g, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -2375,16 +2500,16 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
-            createElementVNode("div", _hoisted_4$8, toDisplayString(props.label), 1),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
+            createElementVNode("div", _hoisted_4$a, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
               class: "helper-text"
-            }, toDisplayString(props.helperText), 9, _hoisted_5$5)) : createCommentVNode("", true)
+            }, toDisplayString(props.helperText), 9, _hoisted_5$6)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$o),
-        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
+        ], 10, _hoisted_1$r),
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
             "sub-text": props.subText,
@@ -2397,9 +2522,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-7bfc5667"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["__scopeId", "data-v-7bfc5667"]]);
 
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2429,11 +2554,11 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
-const _hoisted_2$d = ["id"];
-const _hoisted_3$a = ["title"];
-const _hoisted_4$7 = { class: "kds-fieldset-content" };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
+const _hoisted_2$f = ["id"];
+const _hoisted_3$c = ["title"];
+const _hoisted_4$9 = { class: "kds-fieldset-content" };
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "BaseFieldsetWrapper",
   props: {
     id: {},
@@ -2479,14 +2604,14 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             ref: legendTextEl,
             class: "legend-text",
             title: unref(isTruncated) ? props.label : void 0
-          }, toDisplayString(props.label), 9, _hoisted_3$a),
+          }, toDisplayString(props.label), 9, _hoisted_3$c),
           props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
             key: 0,
             content: props.description,
             hidden: !isHovered.value
           }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$d)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_4$7, [
+        ], 8, _hoisted_2$f)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_4$9, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         createVNode(KdsSubText, {
@@ -2496,14 +2621,14 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           validating: props.validating,
           "preserve-sub-text-space": props.preserveSubTextSpace
         }, null, 8, ["id", "sub-text", "error", "validating", "preserve-sub-text-space"])
-      ], 40, _hoisted_1$n);
+      ], 40, _hoisted_1$q);
     };
   }
 });
 
-const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$D, [["__scopeId", "data-v-a44731da"]]);
+const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["__scopeId", "data-v-a44731da"]]);
 
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2582,7 +2707,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-c6536296"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-c6536296"]]);
 
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -2598,19 +2723,19 @@ const kdsCheckboxValue = {
 };
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
 
-const _hoisted_1$m = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$c = { class: "control" };
-const _hoisted_3$9 = {
+const _hoisted_1$p = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$e = { class: "control" };
+const _hoisted_3$b = {
   key: 0,
   class: "dot",
   viewBox: "0 0 2 2",
   "aria-hidden": "true",
   focusable: "false"
 };
-const _hoisted_4$6 = { class: "content" };
-const _hoisted_5$4 = { class: "label" };
-const _hoisted_6$2 = ["id"];
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_4$8 = { class: "content" };
+const _hoisted_5$5 = { class: "label" };
+const _hoisted_6$3 = ["id"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -2650,8 +2775,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$c, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$9, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$e, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$b, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -2659,20 +2784,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$6, [
-          createElementVNode("div", _hoisted_5$4, toDisplayString(props.text), 1),
+        createElementVNode("div", _hoisted_4$8, [
+          createElementVNode("div", _hoisted_5$5, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
             id: `${unref(id)}-helper`,
             class: "helper-text"
-          }, toDisplayString(props.helperText), 9, _hoisted_6$2)) : createCommentVNode("", true)
+          }, toDisplayString(props.helperText), 9, _hoisted_6$3)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$m);
+      ], 10, _hoisted_1$p);
     };
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-f4f6392a"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["__scopeId", "data-v-f4f6392a"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -2794,7 +2919,7 @@ const useRadioSelection = ({
   };
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2869,10 +2994,10 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$A, [["__scopeId", "data-v-d78ed4a2"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-d78ed4a2"]]);
 
-const _hoisted_1$l = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -2922,12 +3047,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$l);
+      ], 10, _hoisted_1$o);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-5c6f0f1f"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-5c6f0f1f"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -2978,7 +3103,7 @@ const useValueSwitchIconHiding = ({
   };
 };
 
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3065,7 +3190,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$y, [["__scopeId", "data-v-640271e0"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$D, [["__scopeId", "data-v-640271e0"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -3085,7 +3210,7 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
 
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -3137,27 +3262,27 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$x, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-5d99c134"]]);
 
-const _hoisted_1$k = {
+const _hoisted_1$n = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$b = {
+const _hoisted_2$d = {
   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", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
-const _hoisted_4$5 = ["aria-disabled"];
-const _hoisted_5$3 = {
+const _hoisted_3$a = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
+const _hoisted_4$7 = ["aria-disabled"];
+const _hoisted_5$4 = {
   key: 4,
   class: "trailing-slot"
 };
-const _hoisted_6$1 = {
+const _hoisted_6$2 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3236,13 +3361,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
           props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.leadingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -3278,7 +3403,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
           onKeydown: _cache[2] || (_cache[2] = ($event) => emit("keydown", $event)),
           onClick: _cache[3] || (_cache[3] = ($event) => emit("click", $event))
-        }, null, 42, _hoisted_3$8),
+        }, null, 42, _hoisted_3$a),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -3287,8 +3412,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$5)) : createCommentVNode("", true),
-        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$U, {
+        }, toDisplayString(props.unit), 11, _hoisted_4$7)) : createCommentVNode("", true),
+        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$$, {
           key: 3,
           class: "clear-button",
           type: "button",
@@ -3299,10 +3424,10 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
-        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
+        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
           createVNode(KdsIcon, {
             name: props.trailingIcon
           }, null, 8, ["name"])
@@ -3312,7 +3437,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$w, [["__scopeId", "data-v-92291903"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-92291903"]]);
 
 const usePointerHandler = (updateFromEvent) => {
   const activePointerId = ref(null);
@@ -3352,7 +3477,7 @@ const usePointerHandler = (updateFromEvent) => {
   };
 };
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3522,7 +3647,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["__scopeId", "data-v-1740ce83"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$A, [["__scopeId", "data-v-1740ce83"]]);
 
 const HEX_RADIX = 16;
 const RGB_MAX = 255;
@@ -3644,9 +3769,9 @@ const hsvToRgb = ({ h, s, v }) => {
 };
 const hsvToHex = (hsv) => rgbToHex(hsvToRgb(hsv));
 
-const _hoisted_1$j = { class: "kds-color-picker" };
-const _hoisted_2$a = ["aria-valuetext"];
-const _hoisted_3$7 = ["aria-valuenow", "aria-valuetext"];
+const _hoisted_1$m = { class: "kds-color-picker" };
+const _hoisted_2$c = ["aria-valuetext"];
+const _hoisted_3$9 = ["aria-valuenow", "aria-valuetext"];
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
 const DEFAULT_VALUE = 0.9;
@@ -3658,7 +3783,7 @@ const KEYBOARD_LARGE_STEP = 0.1;
 const HUE_KEYBOARD_STEP_DEG = 1;
 const HUE_KEYBOARD_LARGE_STEP_DEG = 10;
 const TO_BOTTOM_GRADIENT = "linear-gradient(to bottom, transparent, black)";
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     "modelValue": { default: "" },
@@ -3809,7 +3934,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createElementVNode("div", {
           ref_key: "colorspaceEl",
           ref: colorspaceEl,
@@ -3838,7 +3963,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$a),
+        ], 44, _hoisted_2$c),
         createElementVNode("div", {
           ref_key: "hueEl",
           ref: hueEl,
@@ -3868,7 +3993,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(hueHandleStyle.value)
           }, null, 4)
-        ], 40, _hoisted_3$7),
+        ], 40, _hoisted_3$9),
         createVNode(KdsTextInput, {
           "model-value": modelValue.value,
           ariaLabel: "Color hex value",
@@ -3880,7 +4005,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$u, [["__scopeId", "data-v-74392b20"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-74392b20"]]);
 
 const HEX_LENGTH_1 = 1;
 const HEX_LENGTH_2 = 2;
@@ -3940,7 +4065,7 @@ const useColorInputValidationOnFocusOut = (modelValue) => {
   return { handleFocusOut };
 };
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "KdsColorInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -4003,7 +4128,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["color", "style"])
               ]),
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$R), {
+                createVNode(unref(_sfc_main$Y), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -4043,7 +4168,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "KdsPasswordInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -4104,7 +4229,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              __props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$R, {
+              __props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$Y, {
                 key: 0,
                 modelValue: showValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showValue.value = $event),
@@ -4145,7 +4270,7 @@ const kdsPasswordInputAutocompletes = Object.values(
   kdsPasswordInputAutocomplete
 );
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "KdsUsernameInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -12856,7 +12981,7 @@ const _hoisted_4$1$1 = {
   key: 2,
   class: "vc-day-layer vc-day-box-center-bottom"
 };
-const _hoisted_5$1 = { class: "vc-bars" };
+const _hoisted_5$1$1 = { class: "vc-bars" };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CalendarSlot = resolveComponent("CalendarSlot");
   const _directive_popover = resolveDirective("popover");
@@ -12906,7 +13031,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ])) : createCommentVNode("", true),
     _ctx.hasBars ? (openBlock(), createElementBlock("div", _hoisted_4$1$1, [
-      createElementVNode("div", _hoisted_5$1, [
+      createElementVNode("div", _hoisted_5$1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.bars, ({ key, class: bgClass, style }) => {
           return openBlock(), createElementBlock("span", {
             key,
@@ -13985,15 +14110,15 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = {
+const _hoisted_1$l = {
   key: 0,
   class: "vc-time-header"
 };
-const _hoisted_2$9 = { class: "vc-time-weekday" };
-const _hoisted_3$6 = { class: "vc-time-month" };
-const _hoisted_4$4 = { class: "vc-time-day" };
-const _hoisted_5 = { class: "vc-time-year" };
-const _hoisted_6 = { class: "vc-time-select-group" };
+const _hoisted_2$b = { class: "vc-time-weekday" };
+const _hoisted_3$8 = { class: "vc-time-month" };
+const _hoisted_4$6 = { class: "vc-time-day" };
+const _hoisted_5$3 = { class: "vc-time-year" };
+const _hoisted_6$1 = { class: "vc-time-select-group" };
 const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   __name: "TimePicker",
   props: {
@@ -14026,16 +14151,16 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
       }, [
         createVNode(_sfc_main$i$1, { name: "time-header" }, {
           default: withCtx(() => [
-            unref(showHeader) && unref(date) ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
-              createElementVNode("span", _hoisted_2$9, toDisplayString(unref(locale).formatDate(unref(date), "WWW")), 1),
-              createElementVNode("span", _hoisted_3$6, toDisplayString(unref(locale).formatDate(unref(date), "MMM")), 1),
-              createElementVNode("span", _hoisted_4$4, toDisplayString(unref(locale).formatDate(unref(date), "D")), 1),
-              createElementVNode("span", _hoisted_5, toDisplayString(unref(locale).formatDate(unref(date), "YYYY")), 1)
+            unref(showHeader) && unref(date) ? (openBlock(), createElementBlock("div", _hoisted_1$l, [
+              createElementVNode("span", _hoisted_2$b, toDisplayString(unref(locale).formatDate(unref(date), "WWW")), 1),
+              createElementVNode("span", _hoisted_3$8, toDisplayString(unref(locale).formatDate(unref(date), "MMM")), 1),
+              createElementVNode("span", _hoisted_4$6, toDisplayString(unref(locale).formatDate(unref(date), "D")), 1),
+              createElementVNode("span", _hoisted_5$3, toDisplayString(unref(locale).formatDate(unref(date), "YYYY")), 1)
             ])) : createCommentVNode("", true)
           ]),
           _: 1
         }),
-        createElementVNode("div", _hoisted_6, [
+        createElementVNode("div", _hoisted_6$1, [
           createVNode(_sfc_main$c$1, {
             name: "Clock",
             size: "17"
@@ -14179,7 +14304,7 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$q = defineComponent({
+const _sfc_main$v = defineComponent({
   inheritAttrs: false,
   emits,
   props: propsDef,
@@ -14198,7 +14323,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_DatePickerPopover, normalizeProps(guardReactiveProps(_ctx.$attrs)), null, 16)
   ], 64)) : (openBlock(), createBlock(_component_DatePickerBase, normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), null, 16));
 }
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render]]);
 
 const tryParseAnyDate = (value) => {
   if (!value) {
@@ -14246,7 +14371,7 @@ const formatDateToString = (date) => {
 
 const legacyDateFormat = "yyyy-MM-dd";
 const invalidDateFormatMessage = "Invalid date format. The expected date format is yyyy-MM-dd (e.g. 2026-03-11).";
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "KdsDateInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -14327,7 +14452,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             onBlur: onTextInputBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$R, {
+              createVNode(_sfc_main$Y, {
                 modelValue: popoverIsVisible.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => popoverIsVisible.value = $event),
                 type: "button",
@@ -14382,8 +14507,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = { class: "kds-date-time-format-popover" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = { class: "kds-date-time-format-popover" };
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "DateTimeFormatPopover",
   props: /* @__PURE__ */ mergeModels({
     allDefaultFormats: {},
@@ -14521,7 +14646,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }));
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         modeOptions.value.length > 1 ? (openBlock(), createBlock(KdsValueSwitch, {
           key: 0,
           "model-value": effectiveSelectedMode.value,
@@ -14553,9 +14678,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["__scopeId", "data-v-f75ebe1b"]]);
+const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__scopeId", "data-v-f75ebe1b"]]);
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "KdsDateTimeFormatInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -14602,7 +14727,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               autocomplete: props.autocomplete
             }), {
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$R), {
+                createVNode(unref(_sfc_main$Y), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -14795,7 +14920,7 @@ const createKdsNumberParser = (params) => {
 
 const REPEAT_INITIAL_DELAY_MS = 400;
 const REPEAT_INTERVAL_MS = 100;
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -14981,7 +15106,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$U, {
+              createVNode(_sfc_main$$, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -14994,7 +15119,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 onPointerleave: stopRepeating,
                 onPointercancel: stopRepeating
               }, null, 8, ["ariaLabel", "disabled"]),
-              createVNode(_sfc_main$U, {
+              createVNode(_sfc_main$$, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -15033,78 +15158,17 @@ const wildcardToRegexBody = (pattern) => {
   }
   return body;
 };
-const regexBodyToWildcard = (regexBody) => {
-  let wildcard = "";
-  for (let i = 0; i < regexBody.length; i += 1) {
-    const char = regexBody[i];
-    if (char === "\\") {
-      const next = regexBody[i + 1];
-      if (next === void 0) {
-        return void 0;
-      }
-      wildcard += next;
-      i += 1;
-      continue;
-    }
-    if (char === ".") {
-      const next = regexBody[i + 1];
-      if (next === "*") {
-        wildcard += "*";
-        i += 1;
-        continue;
-      }
-      wildcard += "?";
-      continue;
-    }
-    if (/[[\]{}()+^$|]/.test(char)) {
-      return void 0;
-    }
-    wildcard += char;
-  }
-  return wildcard;
-};
-const CASE_INSENSITIVE_PREFIX = "(?i:";
-const stripOuterGroup = (pattern, prefix) => {
-  const trimmed = pattern.trim();
-  if (trimmed.startsWith(prefix) && trimmed.endsWith(")")) {
-    return trimmed.slice(prefix.length, -1);
-  }
-  return trimmed;
-};
 const buildRegexFromPatternInput = (input, options) => {
   const body = options.useRegex ? input : wildcardToRegexBody(input);
   const grouped = `(?:${body})`;
-  const withCase = options.caseSensitive ? grouped : `${CASE_INSENSITIVE_PREFIX}${grouped})`;
+  const withCase = options.caseSensitive ? grouped : `(?i:${grouped})`;
   if (!options.excludeMatches) {
     return withCase;
   }
   return `^(?!.*${withCase}).*$`;
 };
-const stripOuterNonCapturingGroup = (pattern) => stripOuterGroup(pattern, "(?:");
-const stripCaseInsensitiveWrapper = (pattern) => stripOuterGroup(pattern, CASE_INSENSITIVE_PREFIX);
-const tryParseExcluded = (regex) => {
-  const match = /^\^\(\?!\.\*([\s\S]*)\)\.\*\$$/.exec(regex.trim());
-  if (!match) {
-    return {};
-  }
-  return { excludedInner: match[1] };
-};
-const parseRegexToPatternInputValue = (regex, options) => {
-  if (regex === "") {
-    return "";
-  }
-  const { excludedInner } = tryParseExcluded(regex);
-  const inner = excludedInner ?? regex;
-  const withoutCase = options.caseSensitive ? inner : stripCaseInsensitiveWrapper(inner);
-  const body = stripOuterNonCapturingGroup(withoutCase);
-  if (options.useRegex) {
-    return body;
-  }
-  const wildcard = regexBodyToWildcard(body);
-  return wildcard ?? body;
-};
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "KdsPatternInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -15120,42 +15184,46 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     autocomplete: {}
   }, {
     "modelValue": { default: "" },
-    "modelModifiers": {}
+    "modelModifiers": {},
+    "caseSensitive": { type: Boolean, ...{ default: false } },
+    "caseSensitiveModifiers": {},
+    "excludeMatches": { type: Boolean, ...{
+      default: false
+    } },
+    "excludeMatchesModifiers": {},
+    "useRegex": { type: Boolean, ...{ default: false } },
+    "useRegexModifiers": {}
   }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
+  emits: /* @__PURE__ */ mergeModels(["update:regex"], ["update:modelValue", "update:caseSensitive", "update:excludeMatches", "update:useRegex"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace"]);
-    const regex = useModel(__props, "modelValue");
-    const uiValue = ref("");
-    const caseSensitive = ref(false);
-    const excludeMatches = ref(false);
-    const useRegex = ref(false);
-    const rebuildRegexFromUi = () => {
-      regex.value = buildRegexFromPatternInput(uiValue.value, {
-        caseSensitive: caseSensitive.value,
-        excludeMatches: excludeMatches.value,
-        useRegex: useRegex.value
-      });
-    };
+    const emit = __emit;
+    const modelValue = useModel(__props, "modelValue");
+    const caseSensitive = useModel(__props, "caseSensitive");
+    const excludeMatches = useModel(__props, "excludeMatches");
+    const useRegex = useModel(__props, "useRegex");
     watch(
-      () => regex.value,
-      (newValue) => {
-        uiValue.value = parseRegexToPatternInputValue(newValue, {
-          useRegex: useRegex.value,
-          excludeMatches: excludeMatches.value,
-          caseSensitive: caseSensitive.value
-        });
+      [modelValue, caseSensitive, excludeMatches, useRegex],
+      ([value, cs, em, ur]) => {
+        emit(
+          "update:regex",
+          buildRegexFromPatternInput(value, {
+            caseSensitive: cs,
+            excludeMatches: em,
+            useRegex: ur
+          })
+        );
       },
       { immediate: true }
     );
-    const caseSensitiveAriaLabel = computed(
-      () => caseSensitive.value ? "Match case-sensitive" : "Match case-insensitive"
+    const caseSensitiveTitle = computed(
+      () => caseSensitive.value ? "Match case-insensitive" : "Match case-sensitive"
     );
-    const excludeMatchesAriaLabel = computed(
-      () => excludeMatches.value ? "Exclude matches" : "Include matches"
+    const excludeMatchesTitle = computed(
+      () => excludeMatches.value ? "Include matches" : "Exclude matches"
     );
-    const patternModeAriaLabel = computed(
-      () => useRegex.value ? "Use regex pattern" : "Use wildcard pattern"
+    const patternModeTitle = computed(
+      () => useRegex.value ? "Use wildcard pattern" : "Use regex pattern"
     );
     const baseInput = useTemplateRef("baseInput");
     __expose({
@@ -15172,11 +15240,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ref_key: "baseInput",
             ref: baseInput
           }, slotProps, {
-            modelValue: uiValue.value,
-            "onUpdate:modelValue": [
-              _cache[3] || (_cache[3] = ($event) => uiValue.value = $event),
-              rebuildRegexFromUi
-            ],
+            modelValue: modelValue.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modelValue.value = $event),
             type: "text",
             placeholder: props.placeholder,
             disabled: __props.disabled,
@@ -15186,45 +15251,36 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             clearable: ""
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$R, {
+              createVNode(_sfc_main$Y, {
                 modelValue: caseSensitive.value,
-                "onUpdate:modelValue": [
-                  _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
-                  rebuildRegexFromUi
-                ],
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "case-sensitive",
-                title: caseSensitiveAriaLabel.value,
-                ariaLabel: caseSensitiveAriaLabel.value,
+                title: caseSensitiveTitle.value,
+                ariaLabel: "Case sensitivity",
                 disabled: __props.disabled
-              }, null, 8, ["modelValue", "title", "ariaLabel", "disabled"]),
-              createVNode(_sfc_main$R, {
+              }, null, 8, ["modelValue", "title", "disabled"]),
+              createVNode(_sfc_main$Y, {
                 modelValue: excludeMatches.value,
-                "onUpdate:modelValue": [
-                  _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
-                  rebuildRegexFromUi
-                ],
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "arrows-order",
-                title: excludeMatchesAriaLabel.value,
-                ariaLabel: excludeMatchesAriaLabel.value,
+                title: excludeMatchesTitle.value,
+                ariaLabel: "Exclude matches",
                 disabled: __props.disabled
-              }, null, 8, ["modelValue", "title", "ariaLabel", "disabled"]),
-              createVNode(_sfc_main$R, {
+              }, null, 8, ["modelValue", "title", "disabled"]),
+              createVNode(_sfc_main$Y, {
                 modelValue: useRegex.value,
-                "onUpdate:modelValue": [
-                  _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
-                  rebuildRegexFromUi
-                ],
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "regex",
-                title: patternModeAriaLabel.value,
-                ariaLabel: patternModeAriaLabel.value,
+                title: patternModeTitle.value,
+                ariaLabel: "Regex mode",
                 disabled: __props.disabled
-              }, null, 8, ["modelValue", "title", "ariaLabel", "disabled"])
+              }, null, 8, ["modelValue", "title", "disabled"])
             ]),
             _: 1
           }, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
@@ -15235,7 +15291,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsSearchInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -15356,6 +15412,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             modelValue: resultsOpen.value,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => resultsOpen.value = $event),
             "full-width": "",
+            "max-inline-size": "anchor-size(width)",
             "popover-type": "manual",
             "aria-label": "Search results container"
           }, {
@@ -15386,11 +15443,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$k, [["__scopeId", "data-v-580aa83e"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$p, [["__scopeId", "data-v-b1809b6d"]]);
 
-const _hoisted_1$g = ["rows", "placeholder", "disabled", "autocomplete"];
+const _hoisted_1$j = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "KdsTextarea",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -15451,7 +15508,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             placeholder: __props.placeholder,
             disabled: __props.disabled,
             autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$g), [
+          }), null, 16, _hoisted_1$j), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -15461,20 +15518,20 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextarea = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-bdf12ef9"]]);
+const KdsTextarea = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["__scopeId", "data-v-bdf12ef9"]]);
 
-const _hoisted_1$f = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$8 = {
+const _hoisted_1$i = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
+const _hoisted_2$a = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
 };
-const _hoisted_3$5 = ["id"];
-const _hoisted_4$3 = {
+const _hoisted_3$7 = ["id"];
+const _hoisted_4$5 = {
   class: "trailing",
   "aria-hidden": "true"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "BaseDropdown",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -15546,8 +15603,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$8, [
-          createVNode(_sfc_main$O, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$a, [
+          createVNode(_sfc_main$V, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -15558,23 +15615,28 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             placeholder: !props.text && !__props.disabled,
             missing: __props.missing
           }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$5),
-        createElementVNode("span", _hoisted_4$3, [
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$7),
+        createElementVNode("span", _hoisted_4$5, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
           }, null, 8, ["name"])
         ])
-      ], 42, _hoisted_1$f);
+      ], 42, _hoisted_1$i);
     };
   }
 });
 
-const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-cf3becf9"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__scopeId", "data-v-cf3becf9"]]);
 
-const _hoisted_1$e = { class: "kds-dropdown-container" };
-const _hoisted_2$7 = { class: "kds-dropdown-container-sticky-top" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const DROPDOWN_SEARCH_THRESHOLD = 12;
+
+const _hoisted_1$h = { class: "kds-dropdown-container" };
+const _hoisted_2$9 = {
+  key: 0,
+  class: "kds-dropdown-container-sticky-top"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -15584,10 +15646,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     "modelValue": { default: "" },
     "modelModifiers": {}
   }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
+  emits: /* @__PURE__ */ mergeModels(["select"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
+    const searchable = computed(
+      () => props.possibleValues.length >= DROPDOWN_SEARCH_THRESHOLD
+    );
     const searchValue = ref("");
     const searchEl = useTemplateRef("searchEl");
     const listContainerRef = useTemplateRef("listContainer");
@@ -15637,12 +15703,24 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const hasMultiline = computed(
       () => props.possibleValues.some((o) => o.subText !== void 0)
     );
+    const onItemClick = (id) => {
+      if (id !== void 0) {
+        modelValue.value = id;
+        emit("select", id);
+      }
+    };
     __expose({
-      focus: () => searchEl.value?.focus()
+      focus: () => {
+        if (searchable.value) {
+          searchEl.value?.focus();
+        } else {
+          listContainerRef.value?.focus();
+        }
+      }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("div", _hoisted_2$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -15658,25 +15736,25 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             onFocus: _cache[2] || (_cache[2] = ($event) => listContainerRef.value?.handleFocus()),
             onBlur: _cache[3] || (_cache[3] = ($event) => listContainerRef.value?.handleBlur())
           }, null, 8, ["modelValue", "aria-activedescendant"])
-        ]),
+        ])) : createCommentVNode("", true),
         createVNode(unref(KdsListContainer), {
           ref: "listContainer",
           class: normalizeClass(["kds-dropdown-container-list", { multiline: hasMultiline.value }]),
           "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 && (modelValue.value = $event))
-        }, null, 8, ["class", "possible-values", "loading", "empty-text"])
+          onItemClick
+        }, null, 8, ["class", "possible-values", "loading", "empty-text", "controlled-externally"])
       ]);
     };
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-9f49ff8b"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$m, [["__scopeId", "data-v-db105594"]]);
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -15710,11 +15788,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         nextTick(() => dropdownContainerEl.value?.focus());
       }
     });
-    watch(modelValue, () => {
-      if (open.value) {
-        open.value = false;
-      }
-    });
+    const closeDropdown = () => {
+      open.value = false;
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, {
         id: props.id,
@@ -15748,7 +15824,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             placement: "bottom-left",
             role: "dialog",
             "full-width": "",
-            "aria-label": "Searchable dropdown options"
+            "aria-label": "Dropdown menu"
           }, {
             default: withCtx(() => [
               createVNode(DropdownContainer, {
@@ -15758,7 +15834,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
                 "possible-values": props.possibleValues,
                 loading: __props.loading,
-                "empty-text": "No entries found"
+                "empty-text": "No entries found",
+                onSelect: closeDropdown
               }, null, 8, ["modelValue", "possible-values", "loading"])
             ]),
             _: 1
@@ -15770,9 +15847,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$d = ["disabled"];
-const _hoisted_2$6 = ["title"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["disabled"];
+const _hoisted_2$8 = ["title"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsListItemButton",
   props: {
     label: {},
@@ -15802,21 +15879,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isLabelTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$6)
-      ], 8, _hoisted_1$d);
+        }, toDisplayString(props.label), 9, _hoisted_2$8)
+      ], 8, _hoisted_1$g);
     };
   }
 });
 
-const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-13945d12"]]);
+const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$k, [["__scopeId", "data-v-13945d12"]]);
 
-const _hoisted_1$c = { class: "kds-multi-select-dropdown-options" };
-const _hoisted_2$5 = { class: "kds-multi-select-dropdown-search" };
-const _hoisted_3$4 = {
+const _hoisted_1$f = { class: "kds-multi-select-dropdown-options" };
+const _hoisted_2$7 = { class: "kds-multi-select-dropdown-search" };
+const _hoisted_3$6 = {
   key: 0,
   class: "kds-multi-select-dropdown-footer"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "MultiSelectDropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -15932,8 +16009,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createElementVNode("div", _hoisted_2$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_2$7, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -15962,7 +16039,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           "aria-label": "Dropdown options",
           onItemClick: _cache[4] || (_cache[4] = ($event) => $event !== void 0 && onItemClick($event))
         }, null, 8, ["class", "possible-values", "loading", "empty-text"]),
-        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
+        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
           createVNode(unref(KdsListItemButton), {
             label: anyVisibleSelected.value ? "Clear all" : "Select all",
             "leading-icon": anyVisibleSelected.value ? "trash" : "checkmark",
@@ -15975,9 +16052,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["__scopeId", "data-v-9b631765"]]);
+const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-9b631765"]]);
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "KdsMultiSelectDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -16102,10 +16179,11 @@ const kdsDimensionComponentHeight12p5x = 200;
 const kdsDimensionComponentHeight1p5x = 24;
 const kdsDimensionComponentHeight20x = 320;
 const kdsSpacingContainer0p10x = 1;
+const kdsSpacingContainer0p25x = 4;
 
-const _hoisted_1$b = { class: "kds-resize-handle-area" };
-const _hoisted_2$4 = ["aria-label"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = { class: "kds-resize-handle-area" };
+const _hoisted_2$6 = ["aria-label"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ResizeHandle",
   props: {
     numberOfHandles: { default: 1 },
@@ -16127,7 +16205,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return `calc((100% - ${n - 1} * ${gap}) / ${2 * n})`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedNumberOfHandles.value, (i) => {
           return openBlock(), createElementBlock("button", {
             key: i,
@@ -16136,22 +16214,22 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             type: "button"
           }, [..._cache[0] || (_cache[0] = [
             createElementVNode("span", { class: "kds-resize-handle-line" }, null, -1)
-          ])], 8, _hoisted_2$4);
+          ])], 8, _hoisted_2$6);
         }), 128))
       ]);
     };
   }
 });
 
-const ResizeHandle = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-df3803d4"]]);
+const ResizeHandle = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-df3803d4"]]);
 
-const _hoisted_1$a = {
+const _hoisted_1$d = {
   ref: "content",
   class: "kds-resize-container-content"
 };
 const DEFAULT_INITIAL_HEIGHT = 200;
 const KEYBOARD_RESIZE_STEP = 10;
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "KdsResizeContainer",
   props: {
     height: { default: () => DEFAULT_INITIAL_HEIGHT },
@@ -16214,7 +16292,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["kds-resize-container", { dragging: unref(activePointerId) !== null }])
       }, [
-        createElementVNode("div", _hoisted_1$a, [
+        createElementVNode("div", _hoisted_1$d, [
           renderSlot(_ctx.$slots, "default", { contentStyle: contentStyle.value }, void 0, true)
         ], 512),
         createVNode(ResizeHandle, {
@@ -16231,7 +16309,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsResizeContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__scopeId", "data-v-403e065b"]]);
+const KdsResizeContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-403e065b"]]);
 
 const CLICK_META_KEY_TIMEOUT = 250;
 const useMultiSelectListBoxSelection = ({
@@ -16245,6 +16323,7 @@ const useMultiSelectListBoxSelection = ({
   const isKeyboardNavigating = ref(false);
   const shiftStartIndex = ref(-1);
   const draggingStartIndex = ref(-1);
+  const draggingLastIndex = ref(-1);
   const draggingInverseMode = ref(false);
   const mouseTriggeredFocus = ref(false);
   const selectedSet = computed(() => new Set(modelValue.value));
@@ -16356,6 +16435,7 @@ const useMultiSelectListBoxSelection = ({
     const index = getDataOptionIndex(e.target);
     if (index !== void 0) {
       draggingStartIndex.value = Number(index);
+      draggingLastIndex.value = Number(index);
     }
   };
   const onDrag = (e) => {
@@ -16366,9 +16446,14 @@ const useMultiSelectListBoxSelection = ({
     if (dataIndex === void 0) {
       return;
     }
+    const numericIndex = Number(dataIndex);
+    if (numericIndex === draggingLastIndex.value) {
+      return;
+    }
+    draggingLastIndex.value = numericIndex;
     let sectionValues = getPossibleValuesInSection(
       draggingStartIndex.value,
-      Number(dataIndex)
+      numericIndex
     );
     if (draggingInverseMode.value) {
       sectionValues = modelValue.value.filter(
@@ -16379,6 +16464,7 @@ const useMultiSelectListBoxSelection = ({
   };
   const onStopDrag = () => {
     draggingStartIndex.value = -1;
+    draggingLastIndex.value = -1;
     draggingInverseMode.value = false;
   };
   useMousePressed({
@@ -16513,23 +16599,19 @@ const useMultiSelectListBoxSelection = ({
   };
 };
 
-const _hoisted_1$9 = ["id", "tabindex", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-activedescendant", "aria-disabled", "onKeydown"];
-const _hoisted_2$3 = { class: "kds-multiselect-list-box-content-grid" };
-const _hoisted_3$3 = {
+const _hoisted_1$c = ["id", "tabindex", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-activedescendant", "aria-disabled", "onKeydown"];
+const _hoisted_2$5 = { class: "kds-multiselect-list-box-content-grid" };
+const _hoisted_3$5 = {
   key: 0,
   class: "kds-multiselect-sticky-bottom"
 };
-const _hoisted_4$2 = {
+const _hoisted_4$4 = {
   key: 0,
   class: "kds-multiselect-empty"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "KdsMultiSelectListBox",
   props: /* @__PURE__ */ mergeModels({
-    possibleValues: {},
-    disabled: { type: Boolean, default: false },
-    useResizeHandle: { type: Boolean, default: false },
-    bottomValue: {},
     description: {},
     label: {},
     ariaLabel: {},
@@ -16537,7 +16619,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     subText: {},
     error: { type: Boolean, default: false },
     validating: { type: Boolean, default: false },
-    preserveSubTextSpace: { type: Boolean, default: false }
+    preserveSubTextSpace: { type: Boolean, default: false },
+    possibleValues: {},
+    disabled: { type: Boolean, default: false },
+    useResizeHandle: { type: Boolean, default: false },
+    bottomValue: {},
+    emptyStateLabel: { default: "No entries in this list" },
+    loading: { type: Boolean, default: false }
   }, {
     "modelValue": { default: () => [] },
     "modelModifiers": {}
@@ -16551,44 +16639,45 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         return () => slots.default?.({ contentStyle: void 0 });
       }
     });
-    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "useResizeHandle"]);
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "useResizeHandle", "emptyStateLabel", "loading"]);
     const modelValue = useModel(__props, "modelValue");
+    const effectiveDisabled = computed(() => __props.disabled || __props.loading);
+    const visiblePossibleValues = computed(
+      () => __props.loading ? [] : props.possibleValues
+    );
+    const visibleBottomValue = computed(
+      () => __props.loading ? void 0 : props.bottomValue
+    );
     const emit = __emit;
     const idPrefix = useId();
     const generateOptionId = (itemId) => `${idPrefix}-option-${encodeURIComponent(itemId)}`;
     const allValues = computed(
-      () => props.bottomValue ? [...props.possibleValues, props.bottomValue] : props.possibleValues
+      () => visibleBottomValue.value ? [...visiblePossibleValues.value, visibleBottomValue.value] : visiblePossibleValues.value
     );
-    const bottomIndex = computed(() => props.possibleValues.length);
+    const bottomIndex = computed(() => visiblePossibleValues.value.length);
     const {
       containerProps,
       wrapperProps,
       list: virtualList,
       scrollTo
-    } = useVirtualList(
-      computed(() => props.possibleValues),
-      { itemHeight: OPTION_LINE_HEIGHT }
-    );
-    watch(
-      () => props.possibleValues,
-      () => {
-        const el = containerProps.ref.value;
-        if (!el) {
-          return;
-        }
-        scrollTo(
-          Math.max(
-            Math.min(
-              Math.floor(el.scrollTop / OPTION_LINE_HEIGHT),
-              props.possibleValues.length - 1
-            ),
-            0
-          )
-        );
+    } = useVirtualList(visiblePossibleValues, { itemHeight: OPTION_LINE_HEIGHT });
+    watch(visiblePossibleValues, () => {
+      const el = containerProps.ref.value;
+      if (!el) {
+        return;
       }
-    );
+      scrollTo(
+        Math.max(
+          Math.min(
+            Math.floor(el.scrollTop / OPTION_LINE_HEIGHT),
+            visiblePossibleValues.value.length - 1
+          ),
+          0
+        )
+      );
+    });
     const scrollToIndex = (index) => {
-      if (index === bottomIndex.value && props.bottomValue) {
+      if (index === bottomIndex.value && visibleBottomValue.value) {
         return;
       }
       const item = allValues.value[index];
@@ -16602,7 +16691,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       const itemEl = globalThis.document.getElementById(generateOptionId(item.id));
       if (itemEl) {
         itemEl.scrollIntoView({ block: "nearest" });
-        if (props.bottomValue) {
+        if (visibleBottomValue.value) {
           const stickyEl = el.querySelector(".kds-multiselect-sticky-bottom");
           if (stickyEl) {
             const itemRect = itemEl.getBoundingClientRect();
@@ -16638,37 +16727,37 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     } = useMultiSelectListBoxSelection({
       modelValue,
       allValues,
-      disabled: toRef(() => __props.disabled),
+      disabled: toRef(() => effectiveDisabled.value),
       generateOptionId,
       scrollToIndex
     });
     const handleDblClick = (id, index) => {
-      if (!__props.disabled) {
+      if (!effectiveDisabled.value) {
         emit("doubleClickOnItem", id, index);
       }
     };
     const handleShiftDblClick = () => {
-      if (!__props.disabled) {
+      if (!effectiveDisabled.value) {
         emit("doubleClickShift", modelValue.value);
       }
     };
     const onArrowLeft = () => {
-      if (!__props.disabled) {
+      if (!effectiveDisabled.value) {
         emit("keyArrowLeft", modelValue.value);
       }
     };
     const onArrowRight = () => {
-      if (!__props.disabled) {
+      if (!effectiveDisabled.value) {
         emit("keyArrowRight", modelValue.value);
       }
     };
     const onEnter = () => {
-      if (!__props.disabled) {
+      if (!effectiveDisabled.value) {
         emit("keyEnter", modelValue.value);
       }
     };
     const focus = () => {
-      if (!__props.disabled) {
+      if (!effectiveDisabled.value) {
         containerProps.ref.value?.focus();
       }
     };
@@ -16697,14 +16786,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", mergeProps(unref(containerProps), {
                   id: slotProps.id,
                   role: "listbox",
-                  tabindex: __props.disabled ? -1 : 0,
+                  tabindex: effectiveDisabled.value ? -1 : 0,
                   "aria-multiselectable": "true",
                   "aria-labelledby": slotProps.ariaLabelledby,
                   "aria-describedby": slotProps.ariaDescribedby,
                   "aria-label": slotProps.ariaLabel,
                   "aria-invalid": slotProps.ariaInvalid,
                   "aria-activedescendant": unref(activeDescendantId),
-                  "aria-disabled": __props.disabled,
+                  "aria-disabled": effectiveDisabled.value,
                   class: "kds-multiselect-list-box-list",
                   onKeydown: [
                     _cache[4] || (_cache[4] = withKeys(withModifiers(
@@ -16770,7 +16859,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   onBlur: _cache[17] || (_cache[17] = //@ts-ignore
                   (...args) => unref(onBlur) && unref(onBlur)(...args))
                 }), [
-                  createElementVNode("div", _hoisted_2$3, [
+                  createElementVNode("div", _hoisted_2$5, [
                     createElementVNode("div", mergeProps({ class: "kds-multiselect-list-box-content" }, unref(wrapperProps)), [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualList), ({ data: item, index }) => {
                         return openBlock(), createBlock(unref(KdsListItem), {
@@ -16785,9 +16874,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                           missing: item.missing,
                           "data-option-index": index,
                           selected: unref(isCurrentValue)(item.id),
-                          disabled: __props.disabled,
+                          disabled: effectiveDisabled.value,
                           active: unref(isKeyboardNavigating) && unref(currentKeyNavIndex) === index,
-                          "trailing-icon": item.missing && !__props.disabled ? "trash" : unref(isCurrentValue)(item.id) ? "checkmark" : void 0,
+                          "trailing-icon": item.missing && !effectiveDisabled.value ? "trash" : unref(isCurrentValue)(item.id) ? "checkmark" : void 0,
                           onDblclick: [
                             withModifiers(($event) => handleDblClick(item.id, index), ["exact"]),
                             _cache[0] || (_cache[0] = withModifiers(($event) => handleShiftDblClick(), ["shift"]))
@@ -16796,29 +16885,32 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                         }, null, 8, ["id", "class", "label", "accessory", "missing", "data-option-index", "selected", "disabled", "active", "trailing-icon", "onDblclick", "onClick"]);
                       }), 128))
                     ], 16),
-                    props.bottomValue ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
                       createVNode(unref(KdsListItem), {
-                        id: generateOptionId(props.bottomValue.id),
-                        label: props.bottomValue.text,
-                        accessory: props.bottomValue.accessory,
-                        missing: props.bottomValue.missing,
+                        id: generateOptionId(visibleBottomValue.value.id),
+                        label: visibleBottomValue.value.text,
+                        accessory: visibleBottomValue.value.accessory,
+                        missing: visibleBottomValue.value.missing,
                         "data-option-index": bottomIndex.value,
-                        selected: unref(isCurrentValue)(props.bottomValue.id),
-                        disabled: __props.disabled,
+                        selected: unref(isCurrentValue)(visibleBottomValue.value.id),
+                        disabled: effectiveDisabled.value,
                         active: unref(isKeyboardNavigating) && unref(currentKeyNavIndex) === bottomIndex.value,
                         special: "",
-                        "trailing-icon": props.bottomValue.missing && !__props.disabled ? "trash" : unref(isCurrentValue)(props.bottomValue.id) ? "checkmark" : void 0,
-                        onClick: _cache[1] || (_cache[1] = ($event) => unref(handleClick)($event, props.bottomValue.id, bottomIndex.value)),
+                        "trailing-icon": visibleBottomValue.value.missing && !effectiveDisabled.value ? "trash" : unref(isCurrentValue)(visibleBottomValue.value.id) ? "checkmark" : void 0,
+                        onClick: _cache[1] || (_cache[1] = ($event) => unref(handleClick)($event, visibleBottomValue.value.id, bottomIndex.value)),
                         onDblclick: [
                           _cache[2] || (_cache[2] = withModifiers(($event) => handleShiftDblClick(), ["shift"])),
-                          _cache[3] || (_cache[3] = withModifiers(($event) => handleDblClick(props.bottomValue.id, bottomIndex.value), ["exact"]))
+                          _cache[3] || (_cache[3] = withModifiers(($event) => handleDblClick(visibleBottomValue.value.id, bottomIndex.value), ["exact"]))
                         ]
                       }, null, 8, ["id", "label", "accessory", "missing", "data-option-index", "selected", "disabled", "active", "trailing-icon"])
                     ])) : createCommentVNode("", true)
                   ])
-                ], 16, _hoisted_1$9),
-                props.possibleValues.length === 0 && !props.bottomValue ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
-                  createVNode(KdsEmptyState, { headline: "No entries in this list" })
+                ], 16, _hoisted_1$c),
+                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+                  createVNode(KdsEmptyState, {
+                    headline: __props.loading ? "Loading data…" : __props.emptyStateLabel,
+                    "loading-spinner": __props.loading
+                  }, null, 8, ["headline", "loading-spinner"])
                 ])) : createCommentVNode("", true)
               ], 4)
             ]),
@@ -16831,10 +16923,581 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-6266eeb5"]]);
+const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-9fde3128"]]);
 
-const _hoisted_1$8 = { class: "kds-info-popover-content" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = { class: "kds-list-column" };
+const _hoisted_2$4 = { class: "kds-list-header" };
+const _hoisted_3$4 = { class: "kds-list-label" };
+const _hoisted_4$3 = {
+  key: 0,
+  class: "kds-list-count"
+};
+const _hoisted_5$1 = { class: "kds-button-column" };
+const _hoisted_6 = { class: "kds-list-column" };
+const _hoisted_7 = { class: "kds-list-header" };
+const _hoisted_8 = { class: "kds-list-label" };
+const _hoisted_9 = {
+  key: 0,
+  class: "kds-list-count"
+};
+const UNKNOWN_VALUE_ID = "__unknown-value-option__";
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "TwinListBody",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    possibleValues: {},
+    searchTerm: { default: "" },
+    excludeLabel: { default: "Exclude" },
+    includeLabel: { default: "Include" },
+    unknownValuesText: { default: "Unknown columns" },
+    emptyStateLabel: {},
+    loading: { type: Boolean, default: false }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = createPropsRestProxy(__props, ["disabled", "searchTerm", "excludeLabel", "includeLabel", "unknownValuesText", "loading"]);
+    const modelValue = useModel(__props, "modelValue");
+    const effectiveDisabled = computed(() => __props.disabled || __props.loading);
+    const leftSelected = ref([]);
+    const rightSelected = ref([]);
+    watch(leftSelected, (ids) => {
+      if (ids.length > 0) {
+        rightSelected.value = [];
+      }
+    });
+    watch(rightSelected, (ids) => {
+      if (ids.length > 0) {
+        leftSelected.value = [];
+      }
+    });
+    watch(effectiveDisabled, (isDisabled) => {
+      if (isDisabled) {
+        leftSelected.value = [];
+        rightSelected.value = [];
+      }
+    });
+    const knownIds = computed(
+      () => new Set(props.possibleValues.map((v) => String(v.id)))
+    );
+    const missingExcludedIds = computed(
+      () => modelValue.value.excludedValues.map(String).filter((id) => !knownIds.value.has(id))
+    );
+    const missingIncludedIds = computed(
+      () => modelValue.value.includedValues.map(String).filter((id) => !knownIds.value.has(id))
+    );
+    const excludedItems = computed(() => {
+      const excludedSet = new Set(modelValue.value.excludedValues.map(String));
+      return props.possibleValues.filter((v) => excludedSet.has(String(v.id)));
+    });
+    const includedItems = computed(() => {
+      const includedSet = new Set(modelValue.value.includedValues.map(String));
+      return props.possibleValues.filter((v) => includedSet.has(String(v.id)));
+    });
+    const matchesSearch = (item) => item.text.toLowerCase().includes(__props.searchTerm.toLowerCase());
+    const toMissingOption = (id, selectedSet) => ({
+      id,
+      text: id,
+      missing: true,
+      selected: selectedSet.has(id)
+    });
+    const filteredExcludedItems = computed(
+      () => __props.searchTerm ? excludedItems.value.filter(matchesSearch) : excludedItems.value
+    );
+    const filteredIncludedItems = computed(
+      () => __props.searchTerm ? includedItems.value.filter(matchesSearch) : includedItems.value
+    );
+    const toListOption = (item, selectedSet) => ({
+      id: String(item.id),
+      text: item.text,
+      accessory: item.accessory,
+      selected: selectedSet.has(String(item.id))
+    });
+    const leftOptions = computed(() => {
+      const selectedSet = new Set(leftSelected.value);
+      return [
+        ...missingExcludedIds.value.map((id) => toMissingOption(id, selectedSet)),
+        ...filteredExcludedItems.value.map(
+          (item) => toListOption(item, selectedSet)
+        )
+      ];
+    });
+    const rightOptions = computed(() => {
+      const selectedSet = new Set(rightSelected.value);
+      return [
+        ...missingIncludedIds.value.map((id) => toMissingOption(id, selectedSet)),
+        ...filteredIncludedItems.value.map(
+          (item) => toListOption(item, selectedSet)
+        )
+      ];
+    });
+    const unknownValueOption = computed(() => ({
+      text: __props.unknownValuesText,
+      id: UNKNOWN_VALUE_ID
+    }));
+    const showUnknownValues = computed(
+      () => modelValue.value.includeUnknownValues !== null
+    );
+    const moveRight = (ids) => {
+      if (effectiveDisabled.value) {
+        return;
+      }
+      const idsToMove = new Set([...ids].map(String));
+      if (idsToMove.size === 0) {
+        return;
+      }
+      const moveUnknown = idsToMove.has(UNKNOWN_VALUE_ID);
+      idsToMove.delete(UNKNOWN_VALUE_ID);
+      const missingIds = new Set(missingExcludedIds.value);
+      const knownToMove = new Set(
+        [...idsToMove].filter((id) => !missingIds.has(id))
+      );
+      modelValue.value = {
+        includeUnknownValues: moveUnknown || modelValue.value.includeUnknownValues,
+        excludedValues: modelValue.value.excludedValues.filter(
+          (id) => !idsToMove.has(String(id))
+        ),
+        includedValues: [
+          ...modelValue.value.includedValues,
+          ...modelValue.value.excludedValues.filter(
+            (id) => knownToMove.has(String(id))
+          )
+        ]
+      };
+      rightSelected.value = [
+        ...knownToMove,
+        ...moveUnknown ? [UNKNOWN_VALUE_ID] : []
+      ];
+    };
+    const moveLeft = (ids) => {
+      if (effectiveDisabled.value) {
+        return;
+      }
+      const idsToMove = new Set([...ids].map(String));
+      if (idsToMove.size === 0) {
+        return;
+      }
+      const moveUnknown = idsToMove.has(UNKNOWN_VALUE_ID);
+      idsToMove.delete(UNKNOWN_VALUE_ID);
+      const missingIds = new Set(missingIncludedIds.value);
+      const knownToMove = new Set(
+        [...idsToMove].filter((id) => !missingIds.has(id))
+      );
+      modelValue.value = {
+        includeUnknownValues: !moveUnknown && modelValue.value.includeUnknownValues,
+        includedValues: modelValue.value.includedValues.filter(
+          (id) => !idsToMove.has(String(id))
+        ),
+        excludedValues: [
+          ...modelValue.value.excludedValues,
+          ...modelValue.value.includedValues.filter(
+            (id) => knownToMove.has(String(id))
+          )
+        ]
+      };
+      leftSelected.value = [
+        ...knownToMove,
+        ...moveUnknown ? [UNKNOWN_VALUE_ID] : []
+      ];
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(KdsResizeContainer), {
+        "number-of-handles": 2,
+        height: 320,
+        "min-height": 200,
+        "handle-gap": `${unref(kdsSpacingContainer0p25x) * 2 + unref(kdsDimensionComponentHeight1p5x)}px`
+      }, {
+        default: withCtx(({ contentStyle }) => [
+          createElementVNode("div", {
+            class: "kds-twin-list-body",
+            style: normalizeStyle(contentStyle)
+          }, [
+            createElementVNode("div", _hoisted_1$b, [
+              createElementVNode("div", _hoisted_2$4, [
+                createElementVNode("span", _hoisted_3$4, toDisplayString(__props.excludeLabel), 1),
+                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$3, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
+              ]),
+              createVNode(unref(KdsMultiSelectListBox), {
+                modelValue: leftSelected.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => leftSelected.value = $event),
+                class: "kds-list-box",
+                "possible-values": leftOptions.value,
+                ariaLabel: __props.excludeLabel,
+                disabled: effectiveDisabled.value,
+                loading: __props.loading,
+                "empty-state-label": props.emptyStateLabel,
+                "bottom-value": showUnknownValues.value && modelValue.value.includeUnknownValues === false ? unknownValueOption.value : void 0,
+                onDoubleClickOnItem: _cache[1] || (_cache[1] = ($event) => moveRight(leftSelected.value)),
+                onDoubleClickShift: moveRight,
+                onKeyArrowRight: moveRight,
+                onKeyEnter: moveRight
+              }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "loading", "empty-state-label", "bottom-value"])
+            ]),
+            createElementVNode("div", _hoisted_5$1, [
+              createVNode(unref(_sfc_main$$), {
+                "leading-icon": "chevron-right",
+                ariaLabel: "Move selected values right",
+                title: "Move selected values right",
+                variant: "transparent",
+                size: "small",
+                disabled: effectiveDisabled.value || leftSelected.value.length === 0,
+                onClick: _cache[2] || (_cache[2] = ($event) => moveRight(leftSelected.value))
+              }, null, 8, ["disabled"]),
+              createVNode(unref(_sfc_main$$), {
+                "leading-icon": "chevron-right-double",
+                ariaLabel: "Move all values right",
+                title: "Move all values right",
+                variant: "transparent",
+                size: "small",
+                disabled: effectiveDisabled.value || excludedItems.value.length === 0 && (!showUnknownValues.value || modelValue.value.includeUnknownValues === true),
+                onClick: _cache[3] || (_cache[3] = ($event) => moveRight([
+                  ...modelValue.value.excludedValues,
+                  ...showUnknownValues.value && !modelValue.value.includeUnknownValues ? [UNKNOWN_VALUE_ID] : []
+                ]))
+              }, null, 8, ["disabled"]),
+              createVNode(unref(_sfc_main$$), {
+                "leading-icon": "chevron-left",
+                ariaLabel: "Move selected values left",
+                title: "Move selected values left",
+                variant: "transparent",
+                size: "small",
+                disabled: effectiveDisabled.value || rightSelected.value.length === 0,
+                onClick: _cache[4] || (_cache[4] = ($event) => moveLeft(rightSelected.value))
+              }, null, 8, ["disabled"]),
+              createVNode(unref(_sfc_main$$), {
+                "leading-icon": "chevron-left-double",
+                ariaLabel: "Move all values left",
+                title: "Move all values left",
+                variant: "transparent",
+                size: "small",
+                disabled: effectiveDisabled.value || includedItems.value.length === 0 && (!showUnknownValues.value || modelValue.value.includeUnknownValues === false),
+                onClick: _cache[5] || (_cache[5] = ($event) => moveLeft([
+                  ...modelValue.value.includedValues,
+                  ...showUnknownValues.value && modelValue.value.includeUnknownValues ? [UNKNOWN_VALUE_ID] : []
+                ]))
+              }, null, 8, ["disabled"])
+            ]),
+            createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_7, [
+                createElementVNode("span", _hoisted_8, toDisplayString(__props.includeLabel), 1),
+                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(rightOptions.value.length) + " of " + toDisplayString(includedItems.value.length), 1)) : createCommentVNode("", true)
+              ]),
+              createVNode(unref(KdsMultiSelectListBox), {
+                modelValue: rightSelected.value,
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => rightSelected.value = $event),
+                class: "kds-list-box",
+                "possible-values": rightOptions.value,
+                ariaLabel: __props.includeLabel,
+                disabled: effectiveDisabled.value,
+                loading: __props.loading,
+                "empty-state-label": props.emptyStateLabel,
+                "bottom-value": showUnknownValues.value && modelValue.value.includeUnknownValues === true ? unknownValueOption.value : void 0,
+                onDoubleClickOnItem: _cache[7] || (_cache[7] = ($event) => moveLeft(rightSelected.value)),
+                onDoubleClickShift: moveLeft,
+                onKeyArrowLeft: moveLeft,
+                onKeyEnter: moveLeft
+              }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "loading", "empty-state-label", "bottom-value"])
+            ])
+          ], 4)
+        ]),
+        _: 1
+      }, 8, ["handle-gap"]);
+    };
+  }
+});
+
+const TwinListBody = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["__scopeId", "data-v-e05644d2"]]);
+
+const kdsTwinListSearchMode = {
+  MANUAL: "manual",
+  PATTERN: "pattern",
+  TYPE: "type"
+};
+const kdsTwinListSearchModes = Object.values(kdsTwinListSearchMode);
+
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "TwinListHeader",
+  props: /* @__PURE__ */ mergeModels({
+    filterTypes: { default: () => void 0 },
+    enablePatternFilter: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  }, {
+    "mode": {
+      default: kdsTwinListSearchMode.MANUAL
+    },
+    "modeModifiers": {},
+    "pattern": { default: "" },
+    "patternModifiers": {},
+    "searchTerm": { default: "" },
+    "searchTermModifiers": {},
+    "selectedTypes": {
+      default: () => []
+    },
+    "selectedTypesModifiers": {},
+    "caseSensitive": { type: Boolean, ...{ default: false } },
+    "caseSensitiveModifiers": {},
+    "excludeMatches": { type: Boolean, ...{
+      default: false
+    } },
+    "excludeMatchesModifiers": {},
+    "useRegex": { type: Boolean, ...{ default: false } },
+    "useRegexModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:regex"], ["update:mode", "update:pattern", "update:searchTerm", "update:selectedTypes", "update:caseSensitive", "update:excludeMatches", "update:useRegex"]),
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const mode = useModel(__props, "mode");
+    const pattern = useModel(__props, "pattern");
+    const searchTerm = useModel(__props, "searchTerm");
+    const selectedTypes = useModel(__props, "selectedTypes");
+    const caseSensitive = useModel(__props, "caseSensitive");
+    const excludeMatches = useModel(__props, "excludeMatches");
+    const useRegex = useModel(__props, "useRegex");
+    const modes = computed(() => [
+      { id: kdsTwinListSearchMode.MANUAL, text: "Manual" },
+      ...__props.enablePatternFilter ? [{ id: kdsTwinListSearchMode.PATTERN, text: "Pattern" }] : [],
+      ...__props.filterTypes ? [{ id: kdsTwinListSearchMode.TYPE, text: "Type" }] : []
+    ]);
+    watch(
+      [mode, () => __props.enablePatternFilter, () => __props.filterTypes],
+      () => {
+        if (!modes.value.some(({ id }) => id === mode.value)) {
+          mode.value = kdsTwinListSearchMode.MANUAL;
+        }
+      },
+      { immediate: true }
+    );
+    watch(mode, (newMode, oldMode) => {
+      if (oldMode === kdsTwinListSearchMode.MANUAL && newMode !== kdsTwinListSearchMode.MANUAL) {
+        searchTerm.value = "";
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        modes.value.length > 1 ? (openBlock(), createBlock(unref(KdsValueSwitch), {
+          key: 0,
+          modelValue: mode.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
+          ariaLabel: "Selection mode",
+          disabled: __props.disabled,
+          size: "small",
+          variant: "muted",
+          "possible-values": modes.value
+        }, null, 8, ["modelValue", "disabled", "possible-values"])) : createCommentVNode("", true),
+        mode.value === unref(kdsTwinListSearchMode).MANUAL ? (openBlock(), createBlock(unref(KdsSearchInput), {
+          key: 1,
+          modelValue: searchTerm.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchTerm.value = $event),
+          ariaLabel: "Search values",
+          placeholder: "Search",
+          disabled: __props.disabled
+        }, null, 8, ["modelValue", "disabled"])) : mode.value === unref(kdsTwinListSearchMode).PATTERN ? (openBlock(), createBlock(unref(_sfc_main$q), {
+          key: 2,
+          modelValue: pattern.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => pattern.value = $event),
+          "case-sensitive": caseSensitive.value,
+          "onUpdate:caseSensitive": _cache[3] || (_cache[3] = ($event) => caseSensitive.value = $event),
+          "exclude-matches": excludeMatches.value,
+          "onUpdate:excludeMatches": _cache[4] || (_cache[4] = ($event) => excludeMatches.value = $event),
+          "use-regex": useRegex.value,
+          "onUpdate:useRegex": _cache[5] || (_cache[5] = ($event) => useRegex.value = $event),
+          ariaLabel: "Pattern",
+          placeholder: "Pattern",
+          disabled: __props.disabled,
+          "onUpdate:regex": _cache[6] || (_cache[6] = ($event) => emit("update:regex", $event))
+        }, null, 8, ["modelValue", "case-sensitive", "exclude-matches", "use-regex", "disabled"])) : (openBlock(), createBlock(unref(_sfc_main$i), {
+          key: 3,
+          modelValue: selectedTypes.value,
+          "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => selectedTypes.value = $event),
+          "possible-values": __props.filterTypes ?? [],
+          loading: __props.filterTypes === void 0,
+          ariaLabel: "Selected types",
+          disabled: __props.disabled
+        }, null, 8, ["modelValue", "possible-values", "loading", "disabled"]))
+      ], 64);
+    };
+  }
+});
+
+const _hoisted_1$a = { class: "kds-twin-list" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "KdsTwinList",
+  props: /* @__PURE__ */ mergeModels({
+    description: {},
+    label: {},
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    possibleValues: {},
+    filterTypes: { default: () => void 0 },
+    enablePatternFilter: { type: Boolean, default: false },
+    excludeLabel: {},
+    includeLabel: {},
+    unknownValuesText: {},
+    emptyStateLabel: {},
+    loading: { type: Boolean, default: false }
+  }, {
+    "mode": {
+      default: kdsTwinListSearchMode.MANUAL
+    },
+    "modeModifiers": {},
+    "manuallyIncluded": {
+      default: () => []
+    },
+    "manuallyIncludedModifiers": {},
+    "manuallyExcluded": {
+      default: () => []
+    },
+    "manuallyExcludedModifiers": {},
+    "includeUnknownValues": { type: [Boolean, null], ...{ default: null } },
+    "includeUnknownValuesModifiers": {},
+    "pattern": { default: "" },
+    "patternModifiers": {},
+    "selectedTypes": {
+      default: () => []
+    },
+    "selectedTypesModifiers": {},
+    "caseSensitive": { type: Boolean, ...{ default: false } },
+    "caseSensitiveModifiers": {},
+    "excludeMatches": { type: Boolean, ...{
+      default: false
+    } },
+    "excludeMatchesModifiers": {},
+    "useRegex": { type: Boolean, ...{ default: false } },
+    "useRegexModifiers": {}
+  }),
+  emits: ["update:mode", "update:manuallyIncluded", "update:manuallyExcluded", "update:includeUnknownValues", "update:pattern", "update:selectedTypes", "update:caseSensitive", "update:excludeMatches", "update:useRegex"],
+  setup(__props) {
+    const props = createPropsRestProxy(__props, ["disabled", "possibleValues", "filterTypes", "enablePatternFilter", "loading", "error", "validating", "preserveSubTextSpace"]);
+    const mode = useModel(__props, "mode");
+    const manuallyIncluded = useModel(__props, "manuallyIncluded");
+    const manuallyExcluded = useModel(__props, "manuallyExcluded");
+    const includeUnknownValues = useModel(
+      __props,
+      "includeUnknownValues"
+    );
+    const pattern = useModel(__props, "pattern");
+    const selectedTypes = useModel(__props, "selectedTypes");
+    const caseSensitive = useModel(__props, "caseSensitive");
+    const excludeMatches = useModel(__props, "excludeMatches");
+    const useRegex = useModel(__props, "useRegex");
+    const searchTerm = ref("");
+    const patternRegex = ref("");
+    const allIds = computed(() => __props.possibleValues.map(({ id }) => id));
+    const effectiveBodyModel = computed({
+      get() {
+        switch (mode.value) {
+          case kdsTwinListSearchMode.PATTERN: {
+            const trimmedPattern = patternRegex.value.trim();
+            if (trimmedPattern === "") {
+              const included2 = [];
+              const includedSet2 = new Set(included2);
+              return {
+                includedValues: included2,
+                excludedValues: allIds.value.filter((id) => !includedSet2.has(id)),
+                includeUnknownValues: null
+              };
+            }
+            let regexp = null;
+            try {
+              regexp = new RegExp(`^(?:${trimmedPattern})$`);
+            } catch {
+              regexp = null;
+            }
+            const included = regexp ? __props.possibleValues.filter((item) => regexp.test(item.text)).map(({ id }) => id) : [];
+            const includedSet = new Set(included);
+            return {
+              includedValues: included,
+              excludedValues: allIds.value.filter((id) => !includedSet.has(id)),
+              includeUnknownValues: null
+            };
+          }
+          case kdsTwinListSearchMode.TYPE: {
+            const included = __props.possibleValues.filter((item) => selectedTypes.value.includes(item.type ?? "")).map(({ id }) => id);
+            const includedSet = new Set(included);
+            return {
+              includedValues: included,
+              excludedValues: allIds.value.filter((id) => !includedSet.has(id)),
+              includeUnknownValues: null
+            };
+          }
+          default:
+            return {
+              includedValues: manuallyIncluded.value,
+              excludedValues: manuallyExcluded.value,
+              includeUnknownValues: includeUnknownValues.value
+            };
+        }
+      },
+      set(value) {
+        manuallyIncluded.value = value.includedValues;
+        manuallyExcluded.value = value.excludedValues;
+        includeUnknownValues.value = value.includeUnknownValues;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFieldsetWrapper, {
+        id: props.id,
+        label: props.label,
+        ariaLabel: props.ariaLabel,
+        description: props.description,
+        "sub-text": props.subText,
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$a, [
+            createVNode(_sfc_main$d, {
+              mode: mode.value,
+              "onUpdate:mode": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
+              pattern: pattern.value,
+              "onUpdate:pattern": _cache[1] || (_cache[1] = ($event) => pattern.value = $event),
+              "search-term": searchTerm.value,
+              "onUpdate:searchTerm": _cache[2] || (_cache[2] = ($event) => searchTerm.value = $event),
+              "selected-types": selectedTypes.value,
+              "onUpdate:selectedTypes": _cache[3] || (_cache[3] = ($event) => selectedTypes.value = $event),
+              "case-sensitive": caseSensitive.value,
+              "onUpdate:caseSensitive": _cache[4] || (_cache[4] = ($event) => caseSensitive.value = $event),
+              "exclude-matches": excludeMatches.value,
+              "onUpdate:excludeMatches": _cache[5] || (_cache[5] = ($event) => excludeMatches.value = $event),
+              "use-regex": useRegex.value,
+              "onUpdate:useRegex": _cache[6] || (_cache[6] = ($event) => useRegex.value = $event),
+              disabled: __props.disabled,
+              "filter-types": __props.filterTypes,
+              "enable-pattern-filter": __props.enablePatternFilter,
+              "onUpdate:regex": _cache[7] || (_cache[7] = ($event) => patternRegex.value = $event)
+            }, null, 8, ["mode", "pattern", "search-term", "selected-types", "case-sensitive", "exclude-matches", "use-regex", "disabled", "filter-types", "enable-pattern-filter"]),
+            createVNode(TwinListBody, {
+              modelValue: effectiveBodyModel.value,
+              "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => effectiveBodyModel.value = $event),
+              disabled: __props.disabled || mode.value !== unref(kdsTwinListSearchMode).MANUAL,
+              "possible-values": __props.possibleValues,
+              "search-term": searchTerm.value,
+              "exclude-label": props.excludeLabel,
+              "include-label": props.includeLabel,
+              "unknown-values-text": props.unknownValuesText,
+              "empty-state-label": props.emptyStateLabel,
+              loading: __props.loading
+            }, null, 8, ["modelValue", "disabled", "possible-values", "search-term", "exclude-label", "include-label", "unknown-values-text", "empty-state-label", "loading"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "label", "ariaLabel", "description", "sub-text", "error", "validating", "preserve-sub-text-space"]);
+    };
+  }
+});
+
+const KdsTwinList = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-c46b28b5"]]);
+
+const _hoisted_1$9 = { class: "kds-info-popover-content" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "InfoPopover",
   props: {
     content: {}
@@ -16842,7 +17505,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           createTextVNode(toDisplayString(props.content), 1)
         ], true)
@@ -16851,11 +17514,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const InfoPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-951f2a2b"]]);
+const InfoPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__scopeId", "data-v-951f2a2b"]]);
 
-const _hoisted_1$7 = ["aria-pressed", "aria-expanded", "aria-controls"];
+const _hoisted_1$8 = ["aria-pressed", "aria-expanded", "aria-controls"];
 const TITLE = "Click for more information";
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "KdsInfoToggleButton",
   props: /* @__PURE__ */ mergeModels({
     content: {},
@@ -16897,7 +17560,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             name: "circle-question",
             size: "small"
           })
-        ], 16, _hoisted_1$7),
+        ], 16, _hoisted_1$8),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -16924,18 +17587,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["__scopeId", "data-v-2e9ef96a"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-2e9ef96a"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsInfoToggleButton
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   class: "kds-variable-popover",
   tabindex: "0"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VariablePopover",
   props: {
     content: {}
@@ -16943,7 +17606,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           createTextVNode(toDisplayString(props.content), 1)
         ], true)
@@ -16952,10 +17615,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const VariablePopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["__scopeId", "data-v-8a0c56d0"]]);
+const VariablePopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-8a0c56d0"]]);
 
-const _hoisted_1$5 = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "KdsVariableToggleButton",
   props: /* @__PURE__ */ mergeModels({
     content: {},
@@ -17044,7 +17707,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"])
-        ], 16, _hoisted_1$5),
+        ], 16, _hoisted_1$6),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -17072,10 +17735,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__scopeId", "data-v-b6d29842"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["__scopeId", "data-v-b6d29842"]]);
 
-const _hoisted_1$4 = ["aria-label", "aria-labelledby", "aria-pressed", "disabled"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = ["aria-label", "aria-labelledby", "aria-pressed", "disabled"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "KdsCardClickable",
   props: /* @__PURE__ */ mergeModels({
     variant: { default: "filled" },
@@ -17110,12 +17773,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         onClick: handleClick
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 10, _hoisted_1$4);
+      ], 10, _hoisted_1$5);
     };
   }
 });
 
-const KdsCardClickable = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-4607badd"]]);
+const KdsCardClickable = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["__scopeId", "data-v-4607badd"]]);
 
 const kdsCardVariant = {
   FILLED: "filled",
@@ -17124,7 +17787,7 @@ const kdsCardVariant = {
 };
 const kdsCardVariants = Object.values(kdsCardVariant);
 
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "TabBarItemAccessory",
   props: {
     accessory: {},
@@ -17254,15 +17917,15 @@ const useTabBarAdaptiveLayout = ({
   };
 };
 
-const _hoisted_1$3 = { class: "kds-tab-bar-wrapper" };
-const _hoisted_2$2 = ["id", "title", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"];
-const _hoisted_3$2 = { class: "kds-tab-label" };
-const _hoisted_4$1 = {
+const _hoisted_1$4 = { class: "kds-tab-bar-wrapper" };
+const _hoisted_2$3 = ["id", "title", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick", "onKeydown"];
+const _hoisted_3$3 = { class: "kds-tab-label" };
+const _hoisted_4$2 = {
   key: 1,
   class: "kds-tab-indicator"
 };
 const MIN_TAB_WIDTH_TOKEN = "--kds-dimension-component-width-4x";
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "KdsTabBar",
   props: /* @__PURE__ */ mergeModels({
     tabs: {},
@@ -17386,7 +18049,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", {
           ref_key: "availableWidthContainer",
           ref: availableWidthContainer,
@@ -17416,15 +18079,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               onClick: ($event) => selectTab(tab),
               onKeydown: ($event) => handleKeydown($event, tab)
             }, [
-              tab.accessory && !(tab.accessory.type === "icon" && unref(shouldHideIcons)) ? (openBlock(), createBlock(_sfc_main$4, {
+              tab.accessory && !(tab.accessory.type === "icon" && unref(shouldHideIcons)) ? (openBlock(), createBlock(_sfc_main$6, {
                 key: 0,
                 accessory: tab.accessory,
                 "icon-size": __props.size === "large" ? "large" : "medium",
                 disabled: isTabDisabled(tab)
               }, null, 8, ["accessory", "icon-size", "disabled"])) : createCommentVNode("", true),
-              createElementVNode("span", _hoisted_3$2, toDisplayString(tab.label), 1),
-              modelValue.value === tab.value ? (openBlock(), createElementBlock("span", _hoisted_4$1)) : createCommentVNode("", true)
-            ], 42, _hoisted_2$2);
+              createElementVNode("span", _hoisted_3$3, toDisplayString(tab.label), 1),
+              modelValue.value === tab.value ? (openBlock(), createElementBlock("span", _hoisted_4$2)) : createCommentVNode("", true)
+            ], 42, _hoisted_2$3);
           }), 128))
         ], 2)
       ]);
@@ -17432,7 +18095,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTabBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-d5737ccf"]]);
+const KdsTabBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-d5737ccf"]]);
 
 const kdsTabBarSize = {
   SMALL: "small",
@@ -17440,6 +18103,133 @@ const kdsTabBarSize = {
 };
 const kdsTabBarSizes = Object.values(kdsTabBarSize);
 
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "LoadingSkeletonItem",
+  props: {
+    shape: { default: "text" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["kds-loading-skeleton-item", __props.shape]),
+        "aria-hidden": "true"
+      }, null, 2);
+    };
+  }
+});
+
+const LoadingSkeletonItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$4, [["__scopeId", "data-v-86829b28"]]);
+
+const _hoisted_1$3 = {
+  key: 0,
+  class: "kds-loading-skeleton",
+  "aria-busy": "true"
+};
+const _hoisted_2$2 = {
+  key: 0,
+  class: "kds-loading-skeleton-headline-with-paragraph"
+};
+const _hoisted_3$2 = { class: "kds-loading-skeleton-paragraph-lines" };
+const _hoisted_4$1 = {
+  key: 1,
+  class: "kds-loading-skeleton-input-with-label"
+};
+const _hoisted_5 = { class: "kds-loading-skeleton-list-item-text" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "KdsLoadingSkeleton",
+  props: {
+    variant: { default: "text" },
+    loading: { type: Boolean, default: true },
+    repeat: { default: 1 },
+    repeatGap: { default: "var(--kds-spacing-container-1x)" }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v59c08829": _ctx.repeatGap
+    }));
+    return (_ctx, _cache) => {
+      return __props.loading ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.repeat, (index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: `skeleton-${index}`
+          }, [
+            __props.variant === "headline-with-paragraph" ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+              createVNode(LoadingSkeletonItem, {
+                shape: "text",
+                class: "headline"
+              }),
+              createElementVNode("div", _hoisted_3$2, [
+                createVNode(LoadingSkeletonItem, { shape: "text" }),
+                createVNode(LoadingSkeletonItem, { shape: "text" }),
+                createVNode(LoadingSkeletonItem, { shape: "text" })
+              ])
+            ])) : __props.variant === "input-with-label" ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+              createVNode(LoadingSkeletonItem, {
+                shape: "label",
+                class: "label"
+              }),
+              createVNode(LoadingSkeletonItem, { shape: "input-with-label" })
+            ])) : __props.variant?.startsWith("list-item-") ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass([
+                "kds-loading-skeleton-list-item",
+                {
+                  "kds-loading-skeleton-list-item-large": __props.variant.startsWith("list-item-large"),
+                  "kds-loading-skeleton-list-item-large-with-subtext": __props.variant === "list-item-large-with-subtext",
+                  "kds-loading-skeleton-list-item-small": __props.variant.startsWith("list-item-small")
+                }
+              ])
+            }, [
+              createVNode(LoadingSkeletonItem, {
+                shape: __props.variant.startsWith("list-item-large") ? "icon-large" : "icon-small"
+              }, null, 8, ["shape"]),
+              createElementVNode("div", _hoisted_5, [
+                createVNode(LoadingSkeletonItem, { shape: "text" }),
+                __props.variant.endsWith("subtext") ? (openBlock(), createBlock(LoadingSkeletonItem, {
+                  key: 0,
+                  shape: "text"
+                })) : createCommentVNode("", true)
+              ])
+            ], 2)) : (openBlock(), createBlock(LoadingSkeletonItem, {
+              key: 3,
+              shape: __props.variant
+            }, null, 8, ["shape"]))
+          ], 64);
+        }), 128))
+      ])) : (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, _ctx.$attrs, { "aria-busy": "false" }), [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 16));
+    };
+  }
+});
+
+const KdsLoadingSkeleton = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-e6597718"]]);
+
+const loadingSkeletonItemShape = {
+  TEXT: "text",
+  LABEL: "label",
+  ICON_LARGE: "icon-large",
+  ICON_MEDIUM: "icon-medium",
+  ICON_SMALL: "icon-small",
+  BUTTON_LARGE: "button-large",
+  BUTTON_MEDIUM: "button-medium",
+  BUTTON_SMALL: "button-small",
+  BUTTON_XSMALL: "button-xsmall",
+  CARD: "card",
+  INPUT_WITH_LABEL: "input-with-label"
+};
+const kdsLoadingSkeletonVariant = {
+  ...loadingSkeletonItemShape,
+  HEADLINE_WITH_PARAGRAPH: "headline-with-paragraph",
+  LIST_ITEM_LARGE: "list-item-large",
+  LIST_ITEM_LARGE_WITH_SUBTEXT: "list-item-large-with-subtext",
+  LIST_ITEM_SMALL: "list-item-small",
+  LIST_ITEM_SMALL_WITH_SUBTEXT: "list-item-small-with-subtext"
+};
+const kdsLoadingSkeletonVariants = Object.values(
+  kdsLoadingSkeletonVariant
+);
+
 const createUnwrappedPromise = () => {
   let resolve = () => {
   };
@@ -17518,7 +18308,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$1, toDisplayString(__props.headline), 1),
-          createVNode(_sfc_main$U, {
+          createVNode(_sfc_main$$, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -17791,7 +18581,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1, [
               createElementVNode("div", _hoisted_2, toDisplayString(unref(config).value.message), 1),
               unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                createVNode(_sfc_main$E, {
+                createVNode(_sfc_main$J, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -17806,7 +18596,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           name: "footer",
           fn: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$U, {
+              return openBlock(), createBlock(_sfc_main$$, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -17838,5 +18628,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-41fc8d84"]]);
 
-export { KdsAvatar, KdsBadge, _sfc_main$U as KdsButton, KdsCardClickable, _sfc_main$E as KdsCheckbox, KdsCheckboxGroup, _sfc_main$t as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$p as KdsDateInput, _sfc_main$n as KdsDateTimeFormatInput, _sfc_main$g as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, KdsLink, _sfc_main$T as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$d as KdsMultiSelectDropdown, KdsMultiSelectListBox, _sfc_main$m as KdsNumberInput, _sfc_main$s as KdsPasswordInput, _sfc_main$l as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$R as KdsToggleButton, _sfc_main$r as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$$ as KdsButton, KdsCardClickable, _sfc_main$J as KdsCheckbox, KdsCheckboxGroup, _sfc_main$y as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$u as KdsDateInput, _sfc_main$s as KdsDateTimeFormatInput, _sfc_main$l as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, KdsLink, _sfc_main$_ as KdsLinkButton, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$O as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$i as KdsMultiSelectDropdown, KdsMultiSelectListBox, _sfc_main$r as KdsNumberInput, _sfc_main$x as KdsPasswordInput, _sfc_main$q as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$Y as KdsToggleButton, KdsTwinList, _sfc_main$w 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, 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