@knime/kds-components 0.15.1 → 0.16.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, watchEffect, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, toHandlers, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, toHandlers, Fragment, renderList, withModifiers, watchEffect, useAttrs, defineAsyncComponent, onBeforeUpdate, normalizeProps, guardReactiveProps, withDirectives, vModelText, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize } 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$x = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$g = ["src"];
-const _hoisted_3$a = {
+const _hoisted_1$z = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$i = ["src"];
+const _hoisted_3$b = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -59,10 +59,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$g)) : (openBlock(), createElementBlock("div", _hoisted_3$a, [
+        }, null, 40, _hoisted_2$i)) : (openBlock(), createElementBlock("div", _hoisted_3$b, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$x);
+      ], 10, _hoisted_1$z);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-d6a313f1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-d6a313f1"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -111,7 +111,7 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -137,7 +137,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-4da5bf3e"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-4da5bf3e"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -463,8 +463,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$w = ["title"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$y = ["title"];
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -505,12 +505,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$w);
+      ], 10, _hoisted_1$y);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-806087da"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-806087da"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -527,14 +527,14 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$v = { class: "label-wrapper" };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$x = { class: "label-wrapper" };
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
     variant: { default: kdsBadgeVariant.NEUTRAL },
     size: { default: kdsBadgeSize.XSMALL },
-    icon: { default: void 0 }
+    leadingIcon: { default: void 0 }
   },
   setup(__props) {
     const sizeToIconSize = {
@@ -545,18 +545,18 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", {
         class: normalizeClass(["kds-badge", __props.size, __props.variant])
       }, [
-        __props.icon ? (openBlock(), createBlock(unref(KdsIcon), {
+        __props.leadingIcon ? (openBlock(), createBlock(unref(KdsIcon), {
           key: 0,
-          name: __props.icon,
+          name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$v, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$x, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-5c6c74a8"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-0dc42bfc"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -575,8 +575,8 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$u = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _hoisted_1$w = ["role", "title", "aria-hidden", "aria-label"];
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -611,12 +611,12 @@ const _sfc_main$G = /* @__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$u);
+      }, null, 14, _hoisted_1$w);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-bdb3dd24"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-bdb3dd24"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -736,9 +736,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$t = ["title", "aria-label"];
-const _hoisted_2$f = ["title"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _hoisted_1$v = ["title", "aria-label"];
+const _hoisted_2$h = ["title"];
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -767,13 +767,13 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$f)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$t);
+        }, toDisplayString(props.label), 9, _hoisted_2$h)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$v);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-4dec8e94"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-4dec8e94"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -789,8 +789,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$s = ["data-style"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = ["data-style"];
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -815,12 +815,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$s);
+      ])], 10, _hoisted_1$u);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-74bb7c3d"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-74bb7c3d"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -830,18 +830,18 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$r = ["role"];
-const _hoisted_2$e = { class: "header" };
-const _hoisted_3$9 = { class: "title" };
+const _hoisted_1$t = ["role"];
+const _hoisted_2$g = { class: "header" };
+const _hoisted_3$a = { class: "headline" };
 const _hoisted_4$7 = {
   key: 0,
   class: "body"
 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
-    title: {},
-    message: { default: void 0 },
+    headline: {},
+    description: { default: void 0 },
     variant: { default: "info" }
   },
   setup(__props) {
@@ -868,21 +868,21 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$e, [
+        createElementVNode("div", _hoisted_2$g, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$9, toDisplayString(props.title), 1)
+          createElementVNode("div", _hoisted_3$a, toDisplayString(props.headline), 1)
         ]),
-        props.message ? (openBlock(), createElementBlock("div", _hoisted_4$7, toDisplayString(props.message), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$r);
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$7, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$t);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-ab9855b7"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-3d79be7c"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -892,11 +892,11 @@ const kdsInlineMessageVariant = {
 };
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
-const _hoisted_1$q = {
+const _hoisted_1$s = {
   key: 0,
   class: "label"
 };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -955,7 +955,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$q, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$s, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -968,9 +968,9 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-b0f9559f"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-b0f9559f"]]);
 
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -1023,7 +1023,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -1059,7 +1059,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1094,9 +1094,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
-const _hoisted_1$p = ["data-visible"];
-const _hoisted_2$d = ["data-visible"];
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["data-visible"];
+const _hoisted_2$f = ["data-visible"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1159,7 +1159,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$p),
+            ], 8, _hoisted_1$r),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
@@ -1168,7 +1168,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$d)
+            ], 8, _hoisted_2$f)
           ], 2)
         ]),
         _: 1
@@ -1177,7 +1177,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-ec08a9ba"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-ec08a9ba"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1187,384 +1187,1024 @@ const kdsProgressButtonState = {
 };
 const kdsProgressButtonStates = Object.values(kdsProgressButtonState);
 
-const kdsButtonSize = {
-  XSMALL: "xsmall",
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large"
+const _hoisted_1$q = { class: "kds-empty-state" };
+const _hoisted_2$e = { class: "kds-empty-state-headline" };
+const _hoisted_3$9 = {
+  key: 1,
+  class: "kds-empty-state-description"
 };
-const kdsButtonSizes = Object.values(kdsButtonSize);
-const kdsButtonVariant = {
-  FILLED: "filled",
-  OUTLINED: "outlined",
-  TRANSPARENT: "transparent"
+const _hoisted_4$6 = {
+  key: 2,
+  class: "kds-empty-state-action"
 };
-const kdsButtonVariants = Object.values(kdsButtonVariant);
-
-const _hoisted_1$o = { class: "kds-label-wrapper" };
-const _hoisted_2$c = ["id", "for", "title"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
-  __name: "KdsLabel",
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  __name: "KdsEmptyState",
   props: {
-    label: {},
-    id: {},
-    for: {},
-    description: { default: void 0 },
-    showDescriptionButton: { type: Boolean, default: false }
+    headline: {},
+    description: {},
+    button: {},
+    loadingSpinner: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["buttonClick"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
-    const KdsInfoToggleButton = defineAsyncComponent(
-      () => Promise.resolve().then(() => KdsInfoToggleButton$1)
+    const emit = __emit;
+    const isLinkButton = computed(
+      () => props.button && "to" in props.button && props.button.to !== void 0
+    );
+    const buttonComponent = computed(
+      () => isLinkButton.value ? _sfc_main$D : _sfc_main$E
     );
-    const labelEl = useTemplateRef("labelEl");
-    const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
-        createElementVNode("label", {
-          id: props.id,
-          ref_key: "labelEl",
-          ref: labelEl,
-          for: props.for,
-          class: "label",
-          title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$c),
-        props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+        props.loadingSpinner ? (openBlock(), createBlock(KdsLoadingSpinner, {
           key: 0,
-          content: props.description,
-          hidden: !props.showDescriptionButton
-        }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
+          "data-testid": "loading-spinner",
+          size: "large",
+          variant: "onSurface",
+          "aria-hidden": "true"
+        })) : createCommentVNode("", true),
+        createElementVNode("p", _hoisted_2$e, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$9, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
+          (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
+          }), null, 16))
+        ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-1a5dc1ba"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-02149081"]]);
 
-const _hoisted_1$n = ["id"];
-const _hoisted_2$b = { class: "subtext-text" };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  __name: "KdsSubText",
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  __name: "ListItemAccessory",
   props: {
-    id: {},
-    subText: {},
-    error: { type: Boolean, default: false },
-    validating: { type: Boolean, default: false },
-    preserveSubTextSpace: { type: Boolean, default: false }
+    accessory: {},
+    size: {},
+    disabled: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
+      return props.accessory.type === "avatar" ? (openBlock(), createBlock(KdsAvatar, {
         key: 0,
-        id: props.id,
-        class: normalizeClass({
-          subtext: true,
-          error: props.error
-        })
-      }, [
-        props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
-          key: 0,
-          name: "circle-error",
-          size: "small",
-          "aria-label": "Error"
-        })) : props.validating && props.subText ? (openBlock(), createBlock(KdsLoadingSpinner, {
-          key: 1,
-          size: "small",
-          variant: "onSurface",
-          "aria-hidden": "true"
-        })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$b, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$n)) : createCommentVNode("", true);
+        title: props.accessory.title,
+        src: props.accessory.src,
+        initials: props.accessory.initials,
+        size: props.size
+      }, null, 8, ["title", "src", "initials", "size"])) : props.accessory.type === "colorSwatch" ? (openBlock(), createBlock(KdsColorSwatch, {
+        key: 1,
+        color: props.accessory.color,
+        title: props.accessory.title,
+        size: props.size
+      }, null, 8, ["color", "title", "size"])) : props.accessory.type === "icon" ? (openBlock(), createBlock(KdsIcon, {
+        key: 2,
+        name: props.accessory.name,
+        size: props.size,
+        disabled: props.disabled
+      }, null, 8, ["name", "size", "disabled"])) : props.accessory.type === "dataType" ? (openBlock(), createBlock(KdsDataType, {
+        key: 3,
+        "icon-name": props.accessory.name,
+        size: props.size,
+        disabled: props.disabled
+      }, null, 8, ["icon-name", "size", "disabled"])) : props.accessory.type === "liveStatus" ? (openBlock(), createBlock(unref(KdsLiveStatus), {
+        key: 4,
+        status: props.accessory.status,
+        title: props.accessory.title,
+        size: props.size
+      }, null, 8, ["status", "title", "size"])) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-df9a85a4"]]);
+const kdsListItemAccessorySize = {
+  SMALL: "small",
+  LARGE: "large"
+};
+
+const kdsListItemVariant = {
+  SMALL: "small",
+  LARGE: "large"
+};
 
-const _hoisted_1$m = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$a = { class: "control" };
-const _hoisted_3$8 = {
+const _hoisted_1$p = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_2$d = {
   key: 0,
-  class: "content"
+  class: "accessory"
 };
-const _hoisted_4$6 = { class: "label" };
-const _hoisted_5$3 = ["id"];
-const _hoisted_6$3 = {
+const _hoisted_3$8 = { class: "content" };
+const _hoisted_4$5 = ["title"];
+const _hoisted_5$3 = {
   key: 0,
-  class: "subtext-wrapper"
+  class: "prefix"
 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
-  __name: "BaseCheckbox",
-  props: /* @__PURE__ */ mergeModels({
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    subText: {},
-    preserveSubTextSpace: { type: Boolean },
+const _hoisted_6$3 = ["title"];
+const _hoisted_7 = {
+  key: 1,
+  class: "trailing-item"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "shortcut"
+};
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  __name: "KdsListItem",
+  props: {
+    id: {},
     label: {},
-    title: {},
-    helperText: {}
-  }, {
-    "modelValue": { default: false },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
+    accessory: { default: void 0 },
+    subText: { default: void 0 },
+    variant: { default: kdsListItemVariant.SMALL },
+    shortcut: { default: void 0 },
+    trailingIcon: { default: void 0 },
+    special: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false },
+    active: { type: Boolean, default: false },
+    missing: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    role: { default: "option" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    const helperId = useId();
-    const descriptionId = useId();
-    const isChecked = computed(() => modelValue.value === true);
-    const isIndeterminate = computed(() => modelValue.value === "indeterminate");
-    const icon = computed(() => {
-      if (isChecked.value) {
-        return "checkmark";
-      }
-      if (isIndeterminate.value) {
-        return "minus";
-      }
-      return null;
-    });
-    const ariaChecked = computed(() => {
-      if (isIndeterminate.value) {
-        return "mixed";
-      }
-      return isChecked.value;
-    });
-    const ariaDescribedBy = computed(() => {
-      const ids = [];
-      if (props.helperText) {
-        ids.push(helperId);
-      }
-      if (props.subText) {
-        ids.push(descriptionId);
-      }
-      return ids.length > 0 ? ids.join(" ") : void 0;
-    });
-    const handleClick = () => {
+    const emit = __emit;
+    const accessorySize = computed(
+      () => props.variant === kdsListItemVariant.LARGE ? kdsListItemAccessorySize.LARGE : kdsListItemAccessorySize.SMALL
+    );
+    const onClick = (event) => {
       if (props.disabled) {
+        event.stopPropagation();
+        event.preventDefault();
         return;
       }
-      modelValue.value = isIndeterminate.value ? true : !isChecked.value;
+      emit("click", event);
     };
+    const labelEl = useTemplateRef("labelEl");
+    const { isTruncated: isLabelTruncated } = useKdsIsTruncated(labelEl);
+    const subtextEl = useTemplateRef("subtextEl");
+    const { isTruncated: isSubtextTruncated } = useKdsIsTruncated(subtextEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createElementVNode("button", {
-          class: normalizeClass({
-            checkbox: true,
-            checked: isChecked.value,
-            indeterminate: isIndeterminate.value,
-            disabled: props.disabled,
-            error: props.error
-          }),
-          disabled: props.disabled,
-          title: props.title,
-          "aria-label": props.title,
-          "aria-checked": ariaChecked.value,
-          "aria-describedby": ariaDescribedBy.value,
-          "aria-invalid": props.error,
-          type: "button",
-          role: "checkbox",
-          onClick: handleClick
-        }, [
-          createElementVNode("div", _hoisted_2$a, [
-            icon.value ? (openBlock(), createBlock(KdsIcon, {
-              key: 0,
-              name: icon.value,
-              class: "icon",
-              size: "xsmall"
-            }, null, 8, ["name"])) : createCommentVNode("", true)
-          ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
-            createElementVNode("div", _hoisted_4$6, toDisplayString(props.label), 1),
-            props.helperText ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              id: unref(helperId),
-              class: "helper-text"
-            }, toDisplayString(props.helperText), 9, _hoisted_5$3)) : createCommentVNode("", true)
-          ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$m),
-        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
-          createVNode(KdsSubText, {
-            id: unref(descriptionId),
-            "sub-text": props.subText,
-            "preserve-sub-text-space": props.preserveSubTextSpace,
-            error: props.error
-          }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
+      return openBlock(), createElementBlock("div", {
+        id: props.id,
+        role: props.role,
+        "aria-selected": props.role === "option" ? props.selected : void 0,
+        "aria-disabled": props.disabled,
+        class: normalizeClass([
+          "kds-list-item",
+          props.variant,
+          {
+            selected: props.selected,
+            active: props.active,
+            missing: props.missing,
+            disabled: props.disabled
+          }
+        ]),
+        onClick
+      }, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
+          createVNode(_sfc_main$z, {
+            accessory: props.accessory,
+            size: accessorySize.value,
+            disabled: props.disabled
+          }, null, 8, ["accessory", "size", "disabled"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_3$8, [
+          createElementVNode("span", {
+            ref_key: "labelEl",
+            ref: labelEl,
+            class: "label",
+            title: unref(isLabelTruncated) ? props.label : void 0
+          }, [
+            props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$3, "(Missing) ")) : createCommentVNode("", true),
+            createElementVNode("span", {
+              class: normalizeClass({ special: props.special })
+            }, toDisplayString(props.label), 3)
+          ], 8, _hoisted_4$5),
+          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$3)) : createCommentVNode("", true)
+        ]),
+        props.shortcut || props.trailingIcon ? (openBlock(), createElementBlock("span", _hoisted_7, [
+          props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(props.shortcut), 1)) : createCommentVNode("", true),
+          props.trailingIcon ? (openBlock(), createBlock(KdsIcon, {
+            key: 1,
+            name: props.trailingIcon,
+            size: "small"
+          }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ]);
+      ], 10, _hoisted_1$p);
     };
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-32f17780"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-1d081212"]]);
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  __name: "KdsCheckbox",
-  props: /* @__PURE__ */ mergeModels({
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    subText: {},
-    preserveSubTextSpace: { type: Boolean, default: false },
+const _sfc_main$x = {  };
+
+const _hoisted_1$o = { class: "kds-list-item-divider" };
+
+function _sfc_render(_ctx, _cache) {
+  return (openBlock(), createElementBlock("hr", _hoisted_1$o))
+}
+const ListItemDivider = /*#__PURE__*/_export_sfc(_sfc_main$x, [['render',_sfc_render],['__scopeId',"data-v-3ee92695"]]);
+
+const _hoisted_1$n = { class: "kds-list-item-section-title" };
+const _hoisted_2$c = {
+  key: 0,
+  class: "icon"
+};
+const _hoisted_3$7 = ["title"];
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  __name: "ListItemSectionTitle",
+  props: {
     label: {},
-    title: {}
-  }, {
-    "modelValue": { default: false },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
+    leadingIcon: {}
+  },
   setup(__props) {
     const props = __props;
-    const modelValue = useModel(__props, "modelValue");
+    const labelEl = useTemplateRef("labelEl");
+    const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseCheckbox, {
-        modelValue: modelValue.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-        disabled: props.disabled,
-        error: props.error,
-        label: props.label,
-        title: props.title,
-        "sub-text": props.subText,
-        "preserve-sub-text-space": props.preserveSubTextSpace
-      }, null, 8, ["modelValue", "disabled", "error", "label", "title", "sub-text", "preserve-sub-text-space"]);
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$c, [
+          createVNode(KdsIcon, {
+            name: props.leadingIcon,
+            size: "small"
+          }, null, 8, ["name"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("span", {
+          ref_key: "labelEl",
+          ref: labelEl,
+          class: "label",
+          title: unref(isTruncated) ? props.label : void 0
+        }, toDisplayString(props.label), 9, _hoisted_3$7)
+      ]);
     };
   }
 });
 
-const _hoisted_1$l = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  __name: "KdsCheckboxGroup",
-  props: /* @__PURE__ */ mergeModels({
-    id: {},
-    label: {},
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-53382531"]]);
+
+const _hoisted_1$m = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_2$b = ["role"];
+const loadingStateText = "Loading entries";
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "KdsListContainer",
+  props: {
     possibleValues: {},
-    alignment: { default: "vertical" },
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    subText: {},
-    preserveSubTextSpace: { type: Boolean }
-  }, {
-    "modelValue": { default: [] },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
+    emptyText: { default: "" },
+    loading: { type: Boolean, default: false },
+    ariaLabel: {},
+    controlledExternally: { type: Boolean },
+    role: { default: "listbox" }
+  },
+  emits: ["itemClick"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    const possibleValues = computed(
-      () => props.possibleValues.map((o) => {
-        if (typeof o === "string") {
-          return { text: o, id: o };
-        }
-        return o;
-      })
+    const emit = __emit;
+    const idPrefix = useId();
+    const toOptionId = (elementId) => elementId.slice(idPrefix.length + 1);
+    const emptyOptionId = `${idPrefix}-empty`;
+    const prefixedValues = computed(
+      () => (props.loading ? [] : props.possibleValues).map((o) => ({
+        ...o,
+        id: `${idPrefix}-${o.id}`
+      }))
     );
-    const labelId = useId();
-    const descriptionId = useId();
-    const isOptionDisabled = (index) => props.disabled || possibleValues.value[index]?.disabled === true;
-    const isHorizontal = computed(() => props.alignment === "horizontal");
-    const hasError = computed(
-      () => props.error || possibleValues.value.some((o) => o.error)
+    const selectableValues = computed(
+      () => prefixedValues.value.filter((o) => !o.sectionHeadline)
     );
-    const isChecked = (id) => modelValue.value.includes(id);
-    const handleCheckboxChange = (index, checked) => {
-      if (isOptionDisabled(index)) {
+    const activeId = ref(void 0);
+    const lastActiveId = ref(void 0);
+    const isFocused = ref(false);
+    const containerEl = useTemplateRef("containerEl");
+    const listItemRole = computed(() => {
+      return props.role === "listbox" ? "option" : "menuitem";
+    });
+    function scrollToView() {
+      if (!activeId.value || !containerEl.value) {
         return;
       }
-      const option = possibleValues.value[index];
-      if (checked === true) {
-        modelValue.value = [...modelValue.value, option.id];
-        return;
+      containerEl.value?.querySelector(`#${CSS.escape(activeId.value)}`)?.scrollIntoView({ block: "nearest" });
+    }
+    const onMouseLeave = () => {
+      if (!isFocused.value) {
+        activeId.value = void 0;
       }
-      modelValue.value = modelValue.value.filter((v) => v !== option.id);
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: props.id,
-        class: "checkbox-group",
-        role: "group",
-        "aria-labelledby": props.label ? unref(labelId) : void 0,
-        "aria-describedby": props.subText ? unref(descriptionId) : void 0
-      }, [
-        props.label ? (openBlock(), createBlock(KdsLabel, {
-          key: 0,
-          id: unref(labelId),
-          label: props.label
-        }, null, 8, ["id", "label"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass({ options: true, horizontal: isHorizontal.value })
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(possibleValues.value, (option, index) => {
-            return openBlock(), createElementBlock("div", {
-              key: option.id,
-              class: "option"
-            }, [
-              createVNode(BaseCheckbox, {
-                disabled: props.disabled || option.disabled,
-                error: option.error,
-                "helper-text": option.helperText,
-                label: option.text,
-                "model-value": isChecked(option.id),
-                "onUpdate:modelValue": (checked) => handleCheckboxChange(index, checked)
-              }, null, 8, ["disabled", "error", "helper-text", "label", "model-value", "onUpdate:modelValue"])
-            ]);
-          }), 128))
-        ], 2),
-        createVNode(KdsSubText, {
-          id: unref(descriptionId),
-          "sub-text": props.subText,
-          "preserve-sub-text-space": props.preserveSubTextSpace,
-          error: hasError.value
-        }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$l);
+    const onMousemove = (event) => {
+      const target = event.target?.closest?.(
+        `[role="${listItemRole.value}"]`
+      );
+      if (target instanceof HTMLElement && target.id && target.getAttribute("aria-disabled") !== "true") {
+        activeId.value = target.id;
+      } else if (!isFocused.value) {
+        activeId.value = void 0;
+      }
     };
-  }
-});
-
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-c38eeda5"]]);
-
-const kdsCheckboxGroupAlignment = {
-  VERTICAL: "vertical",
-  HORIZONTAL: "horizontal"
-};
-const kdsCheckboxGroupAlignments = Object.values(
-  kdsCheckboxGroupAlignment
-);
-const kdsCheckboxValue = {
-  CHECKED: true,
-  UNCHECKED: false,
-  INDETERMINATE: "indeterminate"
-};
-const kdsCheckboxValues = Object.values(kdsCheckboxValue);
-
-const _hoisted_1$k = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$9 = { class: "control" };
-const _hoisted_3$7 = {
-  key: 0,
-  class: "dot",
-  viewBox: "0 0 2 2",
-  "aria-hidden": "true",
-  focusable: "false"
-};
-const _hoisted_4$5 = { class: "content" };
-const _hoisted_5$2 = { class: "label" };
-const _hoisted_6$2 = ["id"];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  __name: "KdsRadioButton",
-  props: /* @__PURE__ */ mergeModels({
-    text: {},
-    helperText: {},
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false }
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    const id = useId();
+    const enabledValues = computed(
+      () => selectableValues.value.filter((o) => !o.disabled)
+    );
+    watch([enabledValues, () => props.loading], ([values, loading]) => {
+      const isValid = (id) => id !== void 0 && values.some((o) => o.id === id);
+      if (activeId.value !== void 0 && !isValid(activeId.value)) {
+        if (values.length > 0) {
+          activeId.value = values[0].id;
+        } else {
+          activeId.value = selectableValues.value.length === 0 ? emptyOptionId : void 0;
+        }
+      }
+      if (!isValid(lastActiveId.value)) {
+        lastActiveId.value = void 0;
+      }
+      if (loading) {
+        activeId.value = emptyOptionId;
+      }
+      nextTick(scrollToView);
+    });
+    const findEnabledIndex = (id) => id === void 0 ? -1 : enabledValues.value.findIndex((o) => o.id === id);
+    const handleFocus = () => {
+      isFocused.value = true;
+      if (activeId.value === void 0) {
+        activeId.value = lastActiveId.value ?? enabledValues.value[0]?.id;
+      }
+    };
+    const handleBlur = () => {
+      isFocused.value = false;
+      lastActiveId.value = activeId.value;
+      activeId.value = void 0;
+    };
+    const handleKeydown = (event) => {
+      if (enabledValues.value.length === 0) {
+        return;
+      }
+      const currentIndex = findEnabledIndex(activeId.value);
+      switch (event.key) {
+        case "ArrowDown": {
+          const nextIndex = currentIndex < 0 || currentIndex >= enabledValues.value.length - 1 ? 0 : currentIndex + 1;
+          activeId.value = enabledValues.value[nextIndex].id;
+          scrollToView();
+          event.preventDefault();
+          break;
+        }
+        case "ArrowUp": {
+          const nextIndex = currentIndex <= 0 ? enabledValues.value.length - 1 : currentIndex - 1;
+          activeId.value = enabledValues.value[nextIndex].id;
+          scrollToView();
+          event.preventDefault();
+          break;
+        }
+        case "Enter":
+          if (event.target instanceof HTMLElement && ["BUTTON"].includes(event.target.tagName) && event.target.ariaExpanded === "false") {
+            break;
+          }
+          if (activeId.value) {
+            emit("itemClick", toOptionId(activeId.value));
+            event.preventDefault();
+          }
+          break;
+        case " ":
+          if (event.target instanceof HTMLElement && ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName)) {
+            break;
+          }
+          if (event.target instanceof HTMLElement && ["BUTTON"].includes(event.target.tagName) && event.target.ariaExpanded === "false") {
+            break;
+          }
+          if (activeId.value) {
+            emit("itemClick", toOptionId(activeId.value));
+            event.preventDefault();
+          }
+          break;
+        case "Home":
+          activeId.value = enabledValues.value[0].id;
+          scrollToView();
+          event.preventDefault();
+          break;
+        case "End":
+          activeId.value = enabledValues.value[enabledValues.value.length - 1].id;
+          scrollToView();
+          event.preventDefault();
+          break;
+      }
+    };
+    __expose({
+      /** Forward a keydown event to the list for keyboard navigation */
+      handleKeydown,
+      /** Notify the list that its controlling element received focus */
+      handleFocus,
+      /** Notify the list that its controlling element lost focus */
+      handleBlur,
+      activeDescendant: activeId
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+        ref_key: "containerEl",
+        ref: containerEl,
+        role: props.role,
+        "aria-busy": props.loading,
+        "aria-label": props.ariaLabel,
+        "aria-activedescendant": !props.controlledExternally && activeId.value ? activeId.value : void 0,
+        class: "kds-list-container",
+        tabindex: props.controlledExternally ? void 0 : 0
+      }, toHandlers(
+        props.controlledExternally ? { mousemove: onMousemove, mouseleave: onMouseLeave } : {
+          keydown: handleKeydown,
+          focus: handleFocus,
+          blur: handleBlur,
+          mousemove: onMousemove,
+          mouseleave: onMouseLeave
+        },
+        true
+      )), [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(prefixedValues.value, (item, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            item.sectionHeadline ? (openBlock(), createBlock(ListItemSectionTitle, {
+              key: 0,
+              label: item.text,
+              "leading-icon": item.sectionHeadlineIcon,
+              role: "presentation",
+              "aria-hidden": "true"
+            }, null, 8, ["label", "leading-icon"])) : (openBlock(), createBlock(unref(KdsListItem), {
+              key: 1,
+              id: item.id,
+              accessory: item.accessory,
+              label: item.text,
+              "sub-text": item.subText,
+              selected: item.selected,
+              disabled: item.disabled,
+              active: activeId.value === item.id,
+              special: item.special,
+              missing: item.missing,
+              "trailing-icon": item.selected ? "checkmark" : void 0,
+              role: listItemRole.value,
+              onMousedown: _cache[0] || (_cache[0] = ($event) => props.controlledExternally && $event.preventDefault()),
+              onClick: withModifiers(($event) => emit("itemClick", toOptionId(item.id)), ["stop"])
+            }, null, 8, ["id", "accessory", "label", "sub-text", "selected", "disabled", "active", "special", "missing", "trailing-icon", "role", "onClick"])),
+            item.separator && index < prefixedValues.value.length - 1 ? (openBlock(), createBlock(ListItemDivider, {
+              key: 2,
+              role: "presentation",
+              "aria-hidden": "true"
+            })) : createCommentVNode("", true)
+          ], 64);
+        }), 128)),
+        selectableValues.value.length === 0 ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: emptyOptionId,
+          role: listItemRole.value,
+          "aria-disabled": "true",
+          "aria-selected": "false",
+          class: "kds-list-container-empty"
+        }, [
+          createVNode(KdsEmptyState, {
+            headline: props.loading ? loadingStateText : props.emptyText,
+            "loading-spinner": props.loading
+          }, null, 8, ["headline", "loading-spinner"])
+        ], 8, _hoisted_2$b)) : createCommentVNode("", true)
+      ], 16, _hoisted_1$m);
+    };
+  }
+});
+
+const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-1178b83b"]]);
+
+const _hoisted_1$l = ["id", "role", "aria-label"];
+const _hoisted_2$a = {
+  key: 0,
+  class: "kds-popover-default-content"
+};
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  __name: "KdsPopover",
+  props: /* @__PURE__ */ mergeModels({
+    placement: { default: "bottom-left" },
+    role: { default: void 0 },
+    fullWidth: { type: Boolean, default: false },
+    popoverAriaLabel: {},
+    content: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const open = useModel(__props, "modelValue");
+    const popoverEl = useTemplateRef("popoverEl");
+    const popoverId = useId();
+    const anchorName = `--anchor-${popoverId}`;
+    watchEffect(() => {
+      if (open.value) {
+        popoverEl.value?.showPopover?.();
+      } else {
+        popoverEl.value?.hidePopover?.();
+      }
+    });
+    const anchorStyle = { "anchor-name": anchorName };
+    __expose({ anchorStyle, popoverId });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: unref(popoverId),
+        ref_key: "popoverEl",
+        ref: popoverEl,
+        class: normalizeClass(["kds-popover", ["floating", props.placement, { "full-width": props.fullWidth }]]),
+        popover: "auto",
+        style: normalizeStyle({ "position-anchor": anchorName }),
+        role: props.role,
+        "aria-label": props.popoverAriaLabel,
+        onToggle: _cache[0] || (_cache[0] = ($event) => open.value = $event.newState === "open")
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$a, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+        ], true)
+      ], 46, _hoisted_1$l);
+    };
+  }
+});
+
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-09124386"]]);
+
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "KdsMenuButton",
+  props: {
+    size: {},
+    disabled: { type: Boolean },
+    title: {},
+    variant: { default: "outlined" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    items: {},
+    menuMaxHeight: { default: void 0 }
+  },
+  emits: ["itemClick"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const emit = __emit;
+    const toggleButtonProps = computed(() => {
+      const { items: _items, menuMaxHeight: _menuMaxHeight, ...rest } = props;
+      const {
+        modelValue: _modelValue,
+        "onUpdate:modelValue": _onUpdateModelValue,
+        ...safeAttrs
+      } = attrs;
+      return { ...safeAttrs, ...rest };
+    });
+    const isMenuOpen = ref(false);
+    const popoverEl = useTemplateRef("popoverEl");
+    const listContainerEl = useTemplateRef("listContainerEl");
+    const menuId = useId();
+    const maxHeightStyle = computed(() => {
+      if (!props.menuMaxHeight) {
+        return {};
+      }
+      return {
+        maxHeight: props.menuMaxHeight,
+        overflowY: "auto"
+      };
+    });
+    const onItemClick = (itemId) => {
+      isMenuOpen.value = false;
+      emit("itemClick", itemId);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$C, 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: listContainerEl.value?.handleKeydown,
+          onBlur: _cache[1] || (_cache[1] = ($event) => isMenuOpen.value = false)
+        }), null, 16, ["modelValue", "aria-expanded", "aria-controls", "style", "onFocus", "onKeydown"]),
+        createVNode(KdsPopover, {
+          ref_key: "popoverEl",
+          ref: popoverEl,
+          modelValue: isMenuOpen.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isMenuOpen.value = $event),
+          placement: "bottom-left",
+          "popover-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)
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ], 64);
+    };
+  }
+});
+
+const KdsMenuButton = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-23e9404d"]]);
+
+const kdsButtonSize = {
+  XSMALL: "xsmall",
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+const kdsButtonSizes = Object.values(kdsButtonSize);
+const kdsButtonVariant = {
+  FILLED: "filled",
+  OUTLINED: "outlined",
+  TRANSPARENT: "transparent"
+};
+const kdsButtonVariants = Object.values(kdsButtonVariant);
+
+const _hoisted_1$k = { class: "kds-label-wrapper" };
+const _hoisted_2$9 = ["id", "for", "title"];
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  __name: "KdsLabel",
+  props: {
+    label: {},
+    id: {},
+    for: {},
+    description: { default: void 0 },
+    showDescriptionButton: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const KdsInfoToggleButton = defineAsyncComponent(
+      () => Promise.resolve().then(() => KdsInfoToggleButton$1)
+    );
+    const labelEl = useTemplateRef("labelEl");
+    const { isTruncated } = useKdsIsTruncated(labelEl);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createElementVNode("label", {
+          id: props.id,
+          ref_key: "labelEl",
+          ref: labelEl,
+          for: props.for,
+          class: "label",
+          title: unref(isTruncated) ? props.label : void 0
+        }, toDisplayString(props.label), 9, _hoisted_2$9),
+        props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
+          key: 0,
+          content: props.description,
+          hidden: !props.showDescriptionButton
+        }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-1a5dc1ba"]]);
+
+const _hoisted_1$j = ["id"];
+const _hoisted_2$8 = { class: "subtext-text" };
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "KdsSubText",
+  props: {
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        id: props.id,
+        class: normalizeClass({
+          subtext: true,
+          error: props.error
+        })
+      }, [
+        props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
+          key: 0,
+          name: "circle-error",
+          size: "small",
+          "aria-label": "Error"
+        })) : props.validating && props.subText ? (openBlock(), createBlock(KdsLoadingSpinner, {
+          key: 1,
+          size: "small",
+          variant: "onSurface",
+          "aria-hidden": "true"
+        })) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2$8, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$j)) : createCommentVNode("", true);
+    };
+  }
+});
+
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-df9a85a4"]]);
+
+const _hoisted_1$i = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$7 = { class: "control" };
+const _hoisted_3$6 = {
+  key: 0,
+  class: "content"
+};
+const _hoisted_4$4 = { class: "label" };
+const _hoisted_5$2 = ["id"];
+const _hoisted_6$2 = {
+  key: 0,
+  class: "subtext-wrapper"
+};
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "BaseCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    subText: {},
+    preserveSubTextSpace: { type: Boolean },
+    label: {},
+    title: {},
+    helperText: {}
+  }, {
+    "modelValue": { default: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const helperId = useId();
+    const descriptionId = useId();
+    const isChecked = computed(() => modelValue.value === true);
+    const isIndeterminate = computed(() => modelValue.value === "indeterminate");
+    const icon = computed(() => {
+      if (isChecked.value) {
+        return "checkmark";
+      }
+      if (isIndeterminate.value) {
+        return "minus";
+      }
+      return null;
+    });
+    const ariaChecked = computed(() => {
+      if (isIndeterminate.value) {
+        return "mixed";
+      }
+      return isChecked.value;
+    });
+    const ariaDescribedBy = computed(() => {
+      const ids = [];
+      if (props.helperText) {
+        ids.push(helperId);
+      }
+      if (props.subText) {
+        ids.push(descriptionId);
+      }
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    });
+    const handleClick = () => {
+      if (props.disabled) {
+        return;
+      }
+      modelValue.value = isIndeterminate.value ? true : !isChecked.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("button", {
+          class: normalizeClass({
+            checkbox: true,
+            checked: isChecked.value,
+            indeterminate: isIndeterminate.value,
+            disabled: props.disabled,
+            error: props.error
+          }),
+          disabled: props.disabled,
+          title: props.title,
+          "aria-label": props.title,
+          "aria-checked": ariaChecked.value,
+          "aria-describedby": ariaDescribedBy.value,
+          "aria-invalid": props.error,
+          type: "button",
+          role: "checkbox",
+          onClick: handleClick
+        }, [
+          createElementVNode("div", _hoisted_2$7, [
+            icon.value ? (openBlock(), createBlock(KdsIcon, {
+              key: 0,
+              name: icon.value,
+              class: "icon",
+              size: "xsmall"
+            }, null, 8, ["name"])) : createCommentVNode("", true)
+          ]),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
+            createElementVNode("div", _hoisted_4$4, toDisplayString(props.label), 1),
+            props.helperText ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              id: unref(helperId),
+              class: "helper-text"
+            }, toDisplayString(props.helperText), 9, _hoisted_5$2)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ], 10, _hoisted_1$i),
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+          createVNode(KdsSubText, {
+            id: unref(descriptionId),
+            "sub-text": props.subText,
+            "preserve-sub-text-space": props.preserveSubTextSpace,
+            error: props.error
+          }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-32f17780"]]);
+
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "KdsCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    subText: {},
+    preserveSubTextSpace: { type: Boolean, default: false },
+    label: {},
+    title: {}
+  }, {
+    "modelValue": { default: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseCheckbox, {
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        disabled: props.disabled,
+        error: props.error,
+        label: props.label,
+        title: props.title,
+        "sub-text": props.subText,
+        "preserve-sub-text-space": props.preserveSubTextSpace
+      }, null, 8, ["modelValue", "disabled", "error", "label", "title", "sub-text", "preserve-sub-text-space"]);
+    };
+  }
+});
+
+const _hoisted_1$h = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "KdsCheckboxGroup",
+  props: /* @__PURE__ */ mergeModels({
+    id: {},
+    label: {},
+    possibleValues: {},
+    alignment: { default: "vertical" },
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    subText: {},
+    preserveSubTextSpace: { type: Boolean }
+  }, {
+    "modelValue": { default: [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const possibleValues = computed(
+      () => props.possibleValues.map((o) => {
+        if (typeof o === "string") {
+          return { text: o, id: o };
+        }
+        return o;
+      })
+    );
+    const labelId = useId();
+    const descriptionId = useId();
+    const isOptionDisabled = (index) => props.disabled || possibleValues.value[index]?.disabled === true;
+    const isHorizontal = computed(() => props.alignment === "horizontal");
+    const hasError = computed(
+      () => props.error || possibleValues.value.some((o) => o.error)
+    );
+    const isChecked = (id) => modelValue.value.includes(id);
+    const handleCheckboxChange = (index, checked) => {
+      if (isOptionDisabled(index)) {
+        return;
+      }
+      const option = possibleValues.value[index];
+      if (checked === true) {
+        modelValue.value = [...modelValue.value, option.id];
+        return;
+      }
+      modelValue.value = modelValue.value.filter((v) => v !== option.id);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: props.id,
+        class: "checkbox-group",
+        role: "group",
+        "aria-labelledby": props.label ? unref(labelId) : void 0,
+        "aria-describedby": props.subText ? unref(descriptionId) : void 0
+      }, [
+        props.label ? (openBlock(), createBlock(KdsLabel, {
+          key: 0,
+          id: unref(labelId),
+          label: props.label
+        }, null, 8, ["id", "label"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({ options: true, horizontal: isHorizontal.value })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(possibleValues.value, (option, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: option.id,
+              class: "option"
+            }, [
+              createVNode(BaseCheckbox, {
+                disabled: props.disabled || option.disabled,
+                error: option.error,
+                "helper-text": option.helperText,
+                label: option.text,
+                "model-value": isChecked(option.id),
+                "onUpdate:modelValue": (checked) => handleCheckboxChange(index, checked)
+              }, null, 8, ["disabled", "error", "helper-text", "label", "model-value", "onUpdate:modelValue"])
+            ]);
+          }), 128))
+        ], 2),
+        createVNode(KdsSubText, {
+          id: unref(descriptionId),
+          "sub-text": props.subText,
+          "preserve-sub-text-space": props.preserveSubTextSpace,
+          error: hasError.value
+        }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
+      ], 8, _hoisted_1$h);
+    };
+  }
+});
+
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-c38eeda5"]]);
+
+const kdsCheckboxGroupAlignment = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal"
+};
+const kdsCheckboxGroupAlignments = Object.values(
+  kdsCheckboxGroupAlignment
+);
+const kdsCheckboxValue = {
+  CHECKED: true,
+  UNCHECKED: false,
+  INDETERMINATE: "indeterminate"
+};
+const kdsCheckboxValues = Object.values(kdsCheckboxValue);
+
+const _hoisted_1$g = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$6 = { class: "control" };
+const _hoisted_3$5 = {
+  key: 0,
+  class: "dot",
+  viewBox: "0 0 2 2",
+  "aria-hidden": "true",
+  focusable: "false"
+};
+const _hoisted_4$3 = { class: "content" };
+const _hoisted_5$1 = { class: "label" };
+const _hoisted_6$1 = ["id"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "KdsRadioButton",
+  props: /* @__PURE__ */ mergeModels({
+    text: {},
+    helperText: {},
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const id = useId();
     const handleClick = () => {
       if (props.disabled) {
         return;
@@ -1589,8 +2229,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$9, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$7, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$6, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$5, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -1598,20 +2238,20 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$5, [
-          createElementVNode("div", _hoisted_5$2, toDisplayString(props.text), 1),
+        createElementVNode("div", _hoisted_4$3, [
+          createElementVNode("div", _hoisted_5$1, 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$1)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$k);
+      ], 10, _hoisted_1$g);
     };
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-27c361e4"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-27c361e4"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -1733,8 +2373,8 @@ const useRadioSelection = ({
   };
 };
 
-const _hoisted_1$j = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -1813,15 +2453,15 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: unref(hasError)
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$j);
+      ], 8, _hoisted_1$f);
     };
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-9cc4dcdd"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-9cc4dcdd"]]);
 
-const _hoisted_1$i = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -1871,12 +2511,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$e);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-93f3f577"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-93f3f577"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -1927,8 +2567,8 @@ const useValueSwitchIconHiding = ({
   };
 };
 
-const _hoisted_1$h = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2013,95 +2653,40 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               onClick: () => unref(handleClick)(index),
               onKeydown: ($event) => unref(handleKeyDown)($event, index)
             }), null, 16, ["hide-icons", "selected", "disabled", "size", "variant", "tab-index", "title", "onClick", "onKeydown"]);
-          }), 128))
-        ], 2),
-        createVNode(KdsSubText, {
-          id: unref(descriptionId),
-          "sub-text": props.subText,
-          "preserve-sub-text-space": props.preserveSubTextSpace,
-          error: props.error
-        }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 10, _hoisted_1$h);
-    };
-  }
-});
-
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-666d4c10"]]);
-
-const kdsRadioButtonGroupAlignment = {
-  VERTICAL: "vertical",
-  HORIZONTAL: "horizontal"
-};
-const kdsRadioButtonGroupAlignments = Object.values(
-  kdsRadioButtonGroupAlignment
-);
-const kdsValueSwitchSize = {
-  SMALL: "small",
-  MEDIUM: "medium"
-};
-const kdsValueSwitchSizes = Object.values(kdsValueSwitchSize);
-const kdsValueSwitchVariant = {
-  DEFAULT: "default",
-  MUTED: "muted"
-};
-const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
-
-const _hoisted_1$g = ["id", "role", "aria-label"];
-const _hoisted_2$8 = {
-  key: 0,
-  class: "kds-popover-default-content"
-};
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  __name: "KdsPopover",
-  props: /* @__PURE__ */ mergeModels({
-    placement: { default: "bottom-left" },
-    role: { default: "dialog" },
-    fullWidth: { type: Boolean, default: false },
-    popoverAriaLabel: {},
-    content: {}
-  }, {
-    "modelValue": { type: Boolean, ...{ default: false } },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const open = useModel(__props, "modelValue");
-    const popoverEl = useTemplateRef("popoverEl");
-    const popoverId = useId();
-    const anchorName = `--anchor-${popoverId}`;
-    watchEffect(() => {
-      if (open.value) {
-        popoverEl.value?.showPopover?.();
-      } else {
-        popoverEl.value?.hidePopover?.();
-      }
-    });
-    const anchorStyle = { "anchor-name": anchorName };
-    __expose({ anchorStyle, popoverId });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: unref(popoverId),
-        ref_key: "popoverEl",
-        ref: popoverEl,
-        class: normalizeClass(["kds-popover", ["floating", props.placement, { "full-width": props.fullWidth }]]),
-        popover: "auto",
-        style: normalizeStyle({ "position-anchor": anchorName }),
-        role: props.role,
-        "aria-label": props.popoverAriaLabel,
-        onToggle: _cache[0] || (_cache[0] = ($event) => open.value = $event.newState === "open")
-      }, [
-        open.value ? renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$8, toDisplayString(props.content), 1)) : createCommentVNode("", true)
-        ], true) : createCommentVNode("", true)
-      ], 46, _hoisted_1$g);
+          }), 128))
+        ], 2),
+        createVNode(KdsSubText, {
+          id: unref(descriptionId),
+          "sub-text": props.subText,
+          "preserve-sub-text-space": props.preserveSubTextSpace,
+          error: props.error
+        }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
+      ], 10, _hoisted_1$d);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-9125d023"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-666d4c10"]]);
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const kdsRadioButtonGroupAlignment = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal"
+};
+const kdsRadioButtonGroupAlignments = Object.values(
+  kdsRadioButtonGroupAlignment
+);
+const kdsValueSwitchSize = {
+  SMALL: "small",
+  MEDIUM: "medium"
+};
+const kdsValueSwitchSizes = Object.values(kdsValueSwitchSize);
+const kdsValueSwitchVariant = {
+  DEFAULT: "default",
+  MUTED: "muted"
+};
+const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
+
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -2153,27 +2738,27 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-5d99c134"]]);
 
-const _hoisted_1$f = {
+const _hoisted_1$c = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$7 = {
+const _hoisted_2$5 = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$6 = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant"];
-const _hoisted_4$4 = ["aria-disabled"];
-const _hoisted_5$1 = {
+const _hoisted_3$4 = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant"];
+const _hoisted_4$2 = ["aria-disabled"];
+const _hoisted_5 = {
   key: 4,
   class: "trailing-slot"
 };
-const _hoisted_6$1 = {
+const _hoisted_6 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: { default: void 0 },
@@ -2247,13 +2832,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
           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$7, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -2284,7 +2869,7 @@ const _sfc_main$m = /* @__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$6),
+        }, null, 42, _hoisted_3$4),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -2293,8 +2878,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             disabled: props.disabled
           }),
           "aria-disabled": props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$4)) : createCommentVNode("", true),
-        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$B, {
+        }, toDisplayString(props.unit), 11, _hoisted_4$2)) : createCommentVNode("", true),
+        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$E, {
           key: 3,
           class: "clear-button",
           type: "button",
@@ -2305,10 +2890,10 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
-        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6, [
           createVNode(KdsIcon, {
             name: props.trailingIcon
           }, null, 8, ["name"])
@@ -2318,9 +2903,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-fad4fd1f"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-fad4fd1f"]]);
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -2526,9 +3111,9 @@ const usePointerHandler = (updateFromEvent) => {
   };
 };
 
-const _hoisted_1$e = { class: "kds-color-picker" };
-const _hoisted_2$6 = ["aria-valuetext"];
-const _hoisted_3$5 = ["aria-valuenow", "aria-valuetext"];
+const _hoisted_1$b = { class: "kds-color-picker" };
+const _hoisted_2$4 = ["aria-valuetext"];
+const _hoisted_3$3 = ["aria-valuenow", "aria-valuetext"];
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
 const DEFAULT_VALUE = 0.9;
@@ -2540,7 +3125,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$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     "modelValue": { default: "" },
@@ -2691,7 +3276,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", {
           ref_key: "colorspaceEl",
           ref: colorspaceEl,
@@ -2722,7 +3307,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$6),
+        ], 44, _hoisted_2$4),
         createElementVNode("div", {
           ref_key: "hueEl",
           ref: hueEl,
@@ -2754,8 +3339,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(hueHandleStyle.value)
           }, null, 4)
-        ], 40, _hoisted_3$5),
-        createVNode(_sfc_main$l, {
+        ], 40, _hoisted_3$3),
+        createVNode(_sfc_main$h, {
           "model-value": modelValue.value,
           "aria-label": "Color hex value",
           placeholder: "#FFFFFF",
@@ -2766,7 +3351,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-180fafdd"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-180fafdd"]]);
 
 const HEX_LENGTH_1 = 1;
 const HEX_LENGTH_2 = 2;
@@ -2826,7 +3411,7 @@ const useColorInputValidationOnFocusOut = (modelValue) => {
   return { handleFocusOut };
 };
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "KdsColorInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -2854,6 +3439,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       () => normalizeHexColor(modelValue.value) ?? "#FFFFFF"
     );
     const { handleFocusOut } = useColorInputValidationOnFocusOut(modelValue);
+    const onClickColorSwatch = () => {
+      if (!props.disabled) {
+        open.value = !open.value;
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
         default: withCtx((slotProps) => [
@@ -2874,11 +3464,13 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 createVNode(KdsColorSwatch, {
                   size: "large",
                   color: swatchColor.value,
-                  "aria-hidden": true
-                }, null, 8, ["color"])
+                  "aria-hidden": true,
+                  style: normalizeStyle({ cursor: props.disabled ? "default" : "pointer" }),
+                  onClick: onClickColorSwatch
+                }, null, 8, ["color", "style"])
               ]),
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$z), {
+                createVNode(unref(_sfc_main$C), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -2899,6 +3491,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               modelValue: open.value,
               "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
               placement: "bottom-right",
+              role: "dialog",
               "popover-aria-label": "Color picker"
             }, {
               default: withCtx(() => [
@@ -3039,7 +3632,7 @@ const createKdsNumberParser = (params) => {
   };
 };
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3192,7 +3785,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$B, {
+              createVNode(_sfc_main$E, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -3201,7 +3794,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 disabled: !canDecrease.value,
                 onClick: _cache[0] || (_cache[0] = ($event) => adjustByStep(-1))
               }, null, 8, ["aria-label", "disabled"]),
-              createVNode(_sfc_main$B, {
+              createVNode(_sfc_main$E, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -3270,227 +3863,45 @@ 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})`;
-  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 = regex.trim().match(/^\^\(\?!\.\*([\s\S]*)\)\.\*\$$/);
-  if (!match) {
-    return {};
-  }
-  return { excludedInner: match[1] };
-};
-const parseRegexToPatternInputValue = (regex, options) => {
-  if (regex === "") {
-    return "";
-  }
-  const { excludedInner } = tryParseExcluded(regex);
-  const inner = excludedInner === void 0 ? regex : excludedInner;
-  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$h = /* @__PURE__ */ defineComponent({
-  __name: "KdsPatternInput",
-  props: /* @__PURE__ */ mergeModels({
-    description: {},
-    label: {},
-    ariaLabel: {},
-    id: {},
-    subText: {},
-    error: { type: Boolean, default: false },
-    validating: { type: Boolean, default: false },
-    preserveSubTextSpace: { type: Boolean, default: false },
-    placeholder: {},
-    disabled: { type: Boolean, default: false },
-    autocomplete: {}
-  }, {
-    "modelValue": { default: "" },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const 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
-      });
-    };
-    watch(
-      () => regex.value,
-      (newValue) => {
-        uiValue.value = parseRegexToPatternInputValue(newValue, {
-          useRegex: useRegex.value,
-          excludeMatches: excludeMatches.value,
-          caseSensitive: caseSensitive.value
-        });
-      },
-      { immediate: true }
-    );
-    const caseSensitiveAriaLabel = computed(
-      () => caseSensitive.value ? "Match case-sensitive" : "Match case-insensitive"
-    );
-    const excludeMatchesAriaLabel = computed(
-      () => excludeMatches.value ? "Exclude matches" : "Include matches"
-    );
-    const patternModeAriaLabel = computed(
-      () => useRegex.value ? "Use regex pattern" : "Use wildcard pattern"
-    );
-    const baseInput = useTemplateRef("baseInput");
-    __expose({
-      focus: () => baseInput.value?.focus()
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
-        default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps({
-            ref_key: "baseInput",
-            ref: baseInput
-          }, slotProps, {
-            modelValue: uiValue.value,
-            "onUpdate:modelValue": [
-              _cache[3] || (_cache[3] = ($event) => uiValue.value = $event),
-              rebuildRegexFromUi
-            ],
-            type: "text",
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
-            autocomplete: props.autocomplete,
-            "leading-icon": "filter",
-            clearable: ""
-          }), {
-            trailing: withCtx(() => [
-              createVNode(_sfc_main$z, {
-                modelValue: caseSensitive.value,
-                "onUpdate:modelValue": [
-                  _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
-                  rebuildRegexFromUi
-                ],
-                size: "xsmall",
-                variant: "outlined",
-                "leading-icon": "case-sensitive",
-                title: caseSensitiveAriaLabel.value,
-                "aria-label": caseSensitiveAriaLabel.value,
-                disabled: props.disabled
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$z, {
-                modelValue: excludeMatches.value,
-                "onUpdate:modelValue": [
-                  _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
-                  rebuildRegexFromUi
-                ],
-                size: "xsmall",
-                variant: "outlined",
-                "leading-icon": "arrows-order",
-                title: excludeMatchesAriaLabel.value,
-                "aria-label": excludeMatchesAriaLabel.value,
-                disabled: props.disabled
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$z, {
-                modelValue: useRegex.value,
-                "onUpdate:modelValue": [
-                  _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
-                  rebuildRegexFromUi
-                ],
-                size: "xsmall",
-                variant: "outlined",
-                "leading-icon": "regex",
-                title: patternModeAriaLabel.value,
-                "aria-label": patternModeAriaLabel.value,
-                disabled: props.disabled
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"])
-            ]),
-            _: 1
-          }, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
-        ]),
-        _: 1
-      }, 16);
-    };
-  }
-});
-
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "KdsSearchInput",
-  props: /* @__PURE__ */ mergeModels({
-    description: {},
-    label: {},
-    ariaLabel: {},
-    id: {},
-    subText: {},
-    error: { type: Boolean, default: false },
-    validating: { type: Boolean, default: false },
-    preserveSubTextSpace: { type: Boolean, default: false },
-    placeholder: { default: "Search" },
-    disabled: { type: Boolean, default: false },
-    autocomplete: {}
-  }, {
-    "modelValue": { default: "" },
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["focus", "blur", "keydown"], ["update:modelValue"]),
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    const emit = __emit;
-    const baseInput = useTemplateRef("baseInput");
-    __expose({
-      focus: () => baseInput.value?.focus()
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
-        default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps({
-            ref_key: "baseInput",
-            ref: baseInput
-          }, slotProps, {
-            modelValue: modelValue.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-            type: "search",
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
-            autocomplete: props.autocomplete,
-            "leading-icon": "search",
-            clearable: true,
-            onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event)),
-            onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event)),
-            onKeydown: _cache[3] || (_cache[3] = ($event) => emit("keydown", $event))
-          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
-        ]),
-        _: 1
-      }, 16);
-    };
+    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})`;
+  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 = regex.trim().match(/^\^\(\?!\.\*([\s\S]*)\)\.\*\$$/);
+  if (!match) {
+    return {};
+  }
+  return { excludedInner: match[1] };
+};
+const parseRegexToPatternInputValue = (regex, options) => {
+  if (regex === "") {
+    return "";
+  }
+  const { excludedInner } = tryParseExcluded(regex);
+  const inner = excludedInner === void 0 ? regex : excludedInner;
+  const withoutCase = options.caseSensitive ? inner : stripCaseInsensitiveWrapper(inner);
+  const body = stripOuterNonCapturingGroup(withoutCase);
+  if (options.useRegex) {
+    return body;
+  }
+  const wildcard = regexBodyToWildcard(body);
+  return wildcard ?? body;
+};
 
-const _hoisted_1$d = ["rows", "placeholder", "disabled", "autocomplete"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "KdsTextarea",
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "KdsPatternInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
     label: {},
@@ -3500,10 +3911,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     error: { type: Boolean, default: false },
     validating: { type: Boolean, default: false },
     preserveSubTextSpace: { type: Boolean, default: false },
-    placeholder: { default: "" },
+    placeholder: {},
     disabled: { type: Boolean, default: false },
-    autocomplete: {},
-    rows: { default: 3 }
+    autocomplete: {}
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
@@ -3511,550 +3921,344 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const normalizedRows = computed(() => Math.max(1, props.rows));
-    const modelValue = useModel(__props, "modelValue");
-    const textareaElement = useTemplateRef("textareaElement");
-    function resize() {
-      const element = textareaElement.value;
-      if (!element) {
-        return;
-      }
-      element.style.height = "auto";
-      const scrollHeight = element.scrollHeight;
-      const offsetHeight = element.offsetHeight;
-      if (scrollHeight <= offsetHeight) {
-        return;
-      }
-      element.style.height = `${scrollHeight}px`;
-    }
-    useResizeObserver(textareaElement, resize);
-    watch(modelValue, resize, { immediate: true });
-    __expose({
-      focus: () => {
-        textareaElement.value?.focus();
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
-        default: withCtx((slotProps) => [
-          withDirectives(createElementVNode("textarea", mergeProps(slotProps, {
-            ref_key: "textareaElement",
-            ref: textareaElement,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-            class: { invalid: props.error },
-            rows: normalizedRows.value,
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$d), [
-            [vModelText, modelValue.value]
-          ])
-        ]),
-        _: 1
-      }, 16);
-    };
-  }
-});
-
-const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-a2df5fed"]]);
-
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "ListItemAccessory",
-  props: {
-    accessory: {},
-    size: {},
-    disabled: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return props.accessory.type === "avatar" ? (openBlock(), createBlock(KdsAvatar, {
-        key: 0,
-        title: props.accessory.title,
-        src: props.accessory.src,
-        initials: props.accessory.initials,
-        size: props.size
-      }, null, 8, ["title", "src", "initials", "size"])) : props.accessory.type === "colorSwatch" ? (openBlock(), createBlock(KdsColorSwatch, {
-        key: 1,
-        color: props.accessory.color,
-        title: props.accessory.title,
-        size: props.size
-      }, null, 8, ["color", "title", "size"])) : props.accessory.type === "icon" ? (openBlock(), createBlock(KdsIcon, {
-        key: 2,
-        name: props.accessory.name,
-        size: props.size,
-        disabled: props.disabled
-      }, null, 8, ["name", "size", "disabled"])) : props.accessory.type === "dataType" ? (openBlock(), createBlock(KdsDataType, {
-        key: 3,
-        "icon-name": props.accessory.name,
-        size: props.size,
-        disabled: props.disabled
-      }, null, 8, ["icon-name", "size", "disabled"])) : props.accessory.type === "liveStatus" ? (openBlock(), createBlock(unref(KdsLiveStatus), {
-        key: 4,
-        status: props.accessory.status,
-        title: props.accessory.title,
-        size: props.size
-      }, null, 8, ["status", "title", "size"])) : createCommentVNode("", true);
-    };
-  }
-});
-
-const _hoisted_1$c = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$5 = {
-  key: 0,
-  class: "leading",
-  "aria-hidden": "true"
-};
-const _hoisted_3$4 = ["id"];
-const _hoisted_4$3 = {
-  class: "trailing",
-  "aria-hidden": "true"
-};
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "BaseDropdown",
-  props: /* @__PURE__ */ mergeModels({
-    text: { default: void 0 },
-    placeholder: {},
-    disabled: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    missing: { type: Boolean, default: false },
-    accessory: { default: void 0 },
-    id: { default: void 0 },
-    ariaLabelledby: { default: void 0 },
-    ariaDescribedby: { default: void 0 },
-    ariaLabel: { default: void 0 },
-    ariaInvalid: { type: Boolean, default: void 0 },
-    popoverId: { default: void 0 }
-  }, {
-    "open": { type: Boolean, ...{ default: false } },
-    "openModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["click", "keydown"], ["update:open"]),
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const open = useModel(__props, "open");
-    const valueTextId = useId();
-    const ariaLabelledby = computed(() => {
-      if (props.ariaLabel) {
-        return void 0;
-      }
-      if (!props.ariaLabelledby) {
-        return valueTextId;
-      }
-      return `${props.ariaLabelledby} ${valueTextId}`;
-    });
-    const effectiveAriaLabel = computed(() => {
-      if (!props.ariaLabel) {
-        return void 0;
-      }
-      const displayText = props.text ?? props.placeholder;
-      return `${props.ariaLabel}, ${displayText}`;
-    });
-    const emit = __emit;
-    const onKeydown = (event) => {
-      if (props.disabled) {
-        return;
-      }
-      emit("keydown", event);
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowUp":
-          event.preventDefault();
-          if (!open.value) {
-            open.value = true;
-          }
-          break;
-      }
+    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
+      });
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        id: props.id,
-        class: normalizeClass(["kds-dropdown-trigger-button", { error: props.error }]),
-        type: "button",
-        "aria-expanded": open.value,
-        "aria-labelledby": ariaLabelledby.value,
-        "aria-describedby": props.ariaDescribedby,
-        "aria-label": effectiveAriaLabel.value,
-        "aria-invalid": props.ariaInvalid,
-        "aria-controls": props.popoverId,
-        "aria-haspopup": "dialog",
-        disabled: props.disabled,
-        onClick: _cache[0] || (_cache[0] = ($event) => !props.disabled && emit("click")),
-        onKeydown
-      }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$5, [
-          createVNode(_sfc_main$e, {
-            accessory: props.accessory,
-            size: "medium"
-          }, null, 8, ["accessory"])
-        ])) : createCommentVNode("", true),
-        createElementVNode("span", {
-          id: unref(valueTextId),
-          class: normalizeClass(["text", {
-            placeholder: !props.text,
-            missing: props.missing
-          }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$4),
-        createElementVNode("span", _hoisted_4$3, [
-          createVNode(KdsIcon, {
-            name: open.value ? "chevron-up" : "chevron-down",
-            size: "small"
-          }, null, 8, ["name"])
-        ])
-      ], 42, _hoisted_1$c);
+    watch(
+      () => regex.value,
+      (newValue) => {
+        uiValue.value = parseRegexToPatternInputValue(newValue, {
+          useRegex: useRegex.value,
+          excludeMatches: excludeMatches.value,
+          caseSensitive: caseSensitive.value
+        });
+      },
+      { immediate: true }
+    );
+    const caseSensitiveAriaLabel = computed(
+      () => caseSensitive.value ? "Match case-sensitive" : "Match case-insensitive"
+    );
+    const excludeMatchesAriaLabel = computed(
+      () => excludeMatches.value ? "Exclude matches" : "Include matches"
+    );
+    const patternModeAriaLabel = computed(
+      () => useRegex.value ? "Use regex pattern" : "Use wildcard pattern"
+    );
+    const baseInput = useTemplateRef("baseInput");
+    __expose({
+      focus: () => baseInput.value?.focus()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx((slotProps) => [
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
+            modelValue: uiValue.value,
+            "onUpdate:modelValue": [
+              _cache[3] || (_cache[3] = ($event) => uiValue.value = $event),
+              rebuildRegexFromUi
+            ],
+            type: "text",
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            error: props.error,
+            autocomplete: props.autocomplete,
+            "leading-icon": "filter",
+            clearable: ""
+          }), {
+            trailing: withCtx(() => [
+              createVNode(_sfc_main$C, {
+                modelValue: caseSensitive.value,
+                "onUpdate:modelValue": [
+                  _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
+                  rebuildRegexFromUi
+                ],
+                size: "xsmall",
+                variant: "outlined",
+                "leading-icon": "case-sensitive",
+                title: caseSensitiveAriaLabel.value,
+                "aria-label": caseSensitiveAriaLabel.value,
+                disabled: props.disabled
+              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
+              createVNode(_sfc_main$C, {
+                modelValue: excludeMatches.value,
+                "onUpdate:modelValue": [
+                  _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
+                  rebuildRegexFromUi
+                ],
+                size: "xsmall",
+                variant: "outlined",
+                "leading-icon": "arrows-order",
+                title: excludeMatchesAriaLabel.value,
+                "aria-label": excludeMatchesAriaLabel.value,
+                disabled: props.disabled
+              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
+              createVNode(_sfc_main$C, {
+                modelValue: useRegex.value,
+                "onUpdate:modelValue": [
+                  _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
+                  rebuildRegexFromUi
+                ],
+                size: "xsmall",
+                variant: "outlined",
+                "leading-icon": "regex",
+                title: patternModeAriaLabel.value,
+                "aria-label": patternModeAriaLabel.value,
+                disabled: props.disabled
+              }, null, 8, ["modelValue", "title", "aria-label", "disabled"])
+            ]),
+            _: 1
+          }, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
+        ]),
+        _: 1
+      }, 16);
     };
   }
 });
 
-const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-f1917c48"]]);
-
-const _hoisted_1$b = { class: "kds-empty-state" };
-const _hoisted_2$4 = { class: "kds-empty-state-headline" };
-const _hoisted_3$3 = {
-  key: 0,
-  class: "kds-empty-state-description"
-};
-const _hoisted_4$2 = {
-  key: 1,
-  class: "kds-empty-state-action"
-};
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "KdsEmptyState",
-  props: {
-    headline: {},
+  __name: "KdsSearchInput",
+  props: /* @__PURE__ */ mergeModels({
     description: {},
-    button: {}
-  },
-  emits: ["buttonClick"],
-  setup(__props, { emit: __emit }) {
+    label: {},
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false },
+    placeholder: { default: "Search" },
+    disabled: { type: Boolean, default: false },
+    autocomplete: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["focus", "blur", "keydown"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const modelValue = useModel(__props, "modelValue");
     const emit = __emit;
-    const isLinkButton = computed(
-      () => props.button && "to" in props.button && props.button.to !== void 0
-    );
-    const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$A : _sfc_main$B
-    );
+    const baseInput = useTemplateRef("baseInput");
+    __expose({
+      focus: () => baseInput.value?.focus()
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("p", _hoisted_2$4, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$3, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
-          (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
-            onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
-          }), null, 16))
-        ])) : createCommentVNode("", true)
-      ]);
+      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx((slotProps) => [
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
+            modelValue: modelValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            type: "search",
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            error: props.error,
+            autocomplete: props.autocomplete,
+            "leading-icon": "search",
+            clearable: true,
+            onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event)),
+            onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event)),
+            onKeydown: _cache[3] || (_cache[3] = ($event) => emit("keydown", $event))
+          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
+        ]),
+        _: 1
+      }, 16);
     };
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-b4af30cf"]]);
-
-const kdsListItemAccessorySize = {
-  SMALL: "small",
-  LARGE: "large"
-};
-
-const kdsListItemVariant = {
-  SMALL: "small",
-  LARGE: "large"
-};
-
-const _hoisted_1$a = ["id", "aria-selected", "aria-disabled"];
-const _hoisted_2$3 = {
-  key: 0,
-  class: "accessory"
-};
-const _hoisted_3$2 = { class: "content" };
-const _hoisted_4$1 = ["title"];
-const _hoisted_5 = {
-  key: 0,
-  class: "prefix"
-};
-const _hoisted_6 = ["title"];
-const _hoisted_7 = {
-  key: 1,
-  class: "trailing-item"
-};
-const _hoisted_8 = {
-  key: 0,
-  class: "shortcut"
-};
+const _hoisted_1$a = ["rows", "placeholder", "disabled", "autocomplete"];
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "KdsListItem",
-  props: {
-    id: {},
+  __name: "KdsTextarea",
+  props: /* @__PURE__ */ mergeModels({
+    description: {},
     label: {},
-    accessory: { default: void 0 },
-    subText: { default: void 0 },
-    variant: { default: kdsListItemVariant.SMALL },
-    shortcut: { default: void 0 },
-    trailingIcon: { default: void 0 },
-    special: { type: Boolean, default: false },
-    selected: { type: Boolean, default: false },
-    active: { type: Boolean, default: false },
-    missing: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false },
+    autocomplete: {},
+    rows: { default: 3 }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
     const props = __props;
-    const emit = __emit;
-    const accessorySize = computed(
-      () => props.variant === kdsListItemVariant.LARGE ? kdsListItemAccessorySize.LARGE : kdsListItemAccessorySize.SMALL
-    );
-    const onClick = (event) => {
-      if (props.disabled) {
-        event.stopPropagation();
-        event.preventDefault();
+    const normalizedRows = computed(() => Math.max(1, props.rows));
+    const modelValue = useModel(__props, "modelValue");
+    const textareaElement = useTemplateRef("textareaElement");
+    function resize() {
+      const element = textareaElement.value;
+      if (!element) {
         return;
       }
-      emit("click", event);
-    };
-    const labelEl = useTemplateRef("labelEl");
-    const { isTruncated: isLabelTruncated } = useKdsIsTruncated(labelEl);
-    const subtextEl = useTemplateRef("subtextEl");
-    const { isTruncated: isSubtextTruncated } = useKdsIsTruncated(subtextEl);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: props.id,
-        role: "option",
-        "aria-selected": props.selected,
-        "aria-disabled": props.disabled,
-        class: normalizeClass([
-          "kds-list-item",
-          props.variant,
-          {
-            selected: props.selected,
-            active: props.active,
-            missing: props.missing,
-            disabled: props.disabled
-          }
-        ]),
-        onClick
-      }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$3, [
-          createVNode(_sfc_main$e, {
-            accessory: props.accessory,
-            size: accessorySize.value,
-            disabled: props.disabled
-          }, null, 8, ["accessory", "size", "disabled"])
-        ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$2, [
-          createElementVNode("span", {
-            ref_key: "labelEl",
-            ref: labelEl,
-            class: "label",
-            title: unref(isLabelTruncated) ? props.label : void 0
-          }, [
-            props.missing ? (openBlock(), createElementBlock("span", _hoisted_5, "(Missing) ")) : createCommentVNode("", true),
-            createElementVNode("span", {
-              class: normalizeClass({ special: props.special })
-            }, toDisplayString(props.label), 3)
-          ], 8, _hoisted_4$1),
-          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)) : createCommentVNode("", true)
+      element.style.height = "auto";
+      const scrollHeight = element.scrollHeight;
+      const offsetHeight = element.offsetHeight;
+      if (scrollHeight <= offsetHeight) {
+        return;
+      }
+      element.style.height = `${scrollHeight}px`;
+    }
+    useResizeObserver(textareaElement, resize);
+    watch(modelValue, resize, { immediate: true });
+    __expose({
+      focus: () => {
+        textareaElement.value?.focus();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx((slotProps) => [
+          withDirectives(createElementVNode("textarea", mergeProps(slotProps, {
+            ref_key: "textareaElement",
+            ref: textareaElement,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            class: { invalid: props.error },
+            rows: normalizedRows.value,
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            autocomplete: props.autocomplete
+          }), null, 16, _hoisted_1$a), [
+            [vModelText, modelValue.value]
+          ])
         ]),
-        props.shortcut || props.trailingIcon ? (openBlock(), createElementBlock("span", _hoisted_7, [
-          props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(props.shortcut), 1)) : createCommentVNode("", true),
-          props.trailingIcon ? (openBlock(), createBlock(KdsIcon, {
-            key: 1,
-            name: props.trailingIcon,
-            size: "small"
-          }, null, 8, ["name"])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$a);
+        _: 1
+      }, 16);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-fca25fc2"]]);
+const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a2df5fed"]]);
 
-const _hoisted_1$9 = ["aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_1$9 = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
+const _hoisted_2$3 = {
+  key: 0,
+  class: "leading",
+  "aria-hidden": "true"
+};
+const _hoisted_3$2 = ["id"];
+const _hoisted_4$1 = {
+  class: "trailing",
+  "aria-hidden": "true"
+};
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "KdsListContainer",
-  props: {
-    possibleValues: {},
-    emptyText: { default: "" },
-    ariaLabel: {},
-    controlledExternally: { type: Boolean }
-  },
-  emits: ["itemClick"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  __name: "BaseDropdown",
+  props: /* @__PURE__ */ mergeModels({
+    text: { default: void 0 },
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    missing: { type: Boolean, default: false },
+    accessory: { default: void 0 },
+    id: { default: void 0 },
+    ariaLabelledby: { default: void 0 },
+    ariaDescribedby: { default: void 0 },
+    ariaLabel: { default: void 0 },
+    ariaInvalid: { type: Boolean, default: void 0 },
+    popoverId: { default: void 0 }
+  }, {
+    "open": { type: Boolean, ...{ default: false } },
+    "openModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["click", "keydown"], ["update:open"]),
+  setup(__props, { emit: __emit }) {
     const props = __props;
-    const emit = __emit;
-    const idPrefix = useId();
-    const toOptionId = (elementId) => elementId.slice(idPrefix.length + 1);
-    const emptyOptionId = `${idPrefix}-empty`;
-    const prefixedValues = computed(
-      () => props.possibleValues.map((o) => ({ ...o, id: `${idPrefix}-${o.id}` }))
-    );
-    const activeId = ref(void 0);
-    const lastActiveId = ref(void 0);
-    const isFocused = ref(false);
-    const containerEl = useTemplateRef("containerEl");
-    function scrollToView() {
-      if (!activeId.value || !containerEl.value) {
-        return;
-      }
-      containerEl.value?.querySelector(`#${CSS.escape(activeId.value)}`)?.scrollIntoView({ block: "nearest" });
-    }
-    const onMouseLeave = () => {
-      if (!isFocused.value) {
-        activeId.value = void 0;
-      }
-    };
-    const onMousemove = (event) => {
-      const target = event.target?.closest?.('[role="option"]');
-      if (target instanceof HTMLElement && target.id && target.getAttribute("aria-disabled") !== "true") {
-        activeId.value = target.id;
-      }
-    };
-    const enabledValues = computed(
-      () => prefixedValues.value.filter((o) => !o.disabled)
-    );
-    watch(enabledValues, (values) => {
-      const isValid = (id) => id !== void 0 && values.some((o) => o.id === id);
-      if (activeId.value !== void 0 && !isValid(activeId.value)) {
-        if (values.length > 0) {
-          activeId.value = values[0].id;
-        } else {
-          activeId.value = prefixedValues.value.length === 0 ? emptyOptionId : void 0;
-        }
+    const open = useModel(__props, "open");
+    const valueTextId = useId();
+    const ariaLabelledby = computed(() => {
+      if (props.ariaLabel) {
+        return void 0;
       }
-      if (!isValid(lastActiveId.value)) {
-        lastActiveId.value = void 0;
+      if (!props.ariaLabelledby) {
+        return valueTextId;
       }
-      nextTick(scrollToView);
+      return `${props.ariaLabelledby} ${valueTextId}`;
     });
-    const findEnabledIndex = (id) => id === void 0 ? -1 : enabledValues.value.findIndex((o) => o.id === id);
-    const handleFocus = () => {
-      isFocused.value = true;
-      if (activeId.value === void 0) {
-        activeId.value = lastActiveId.value ?? enabledValues.value[0]?.id;
+    const effectiveAriaLabel = computed(() => {
+      if (!props.ariaLabel) {
+        return void 0;
       }
-    };
-    const handleBlur = () => {
-      isFocused.value = false;
-      lastActiveId.value = activeId.value;
-      activeId.value = void 0;
-    };
-    const handleKeydown = (event) => {
-      if (enabledValues.value.length === 0) {
+      const displayText = props.text ?? props.placeholder;
+      return `${props.ariaLabel}, ${displayText}`;
+    });
+    const emit = __emit;
+    const onKeydown = (event) => {
+      if (props.disabled) {
         return;
       }
-      const currentIndex = findEnabledIndex(activeId.value);
+      emit("keydown", event);
       switch (event.key) {
-        case "ArrowDown": {
-          const nextIndex = currentIndex < 0 || currentIndex >= enabledValues.value.length - 1 ? 0 : currentIndex + 1;
-          activeId.value = enabledValues.value[nextIndex].id;
-          scrollToView();
-          event.preventDefault();
-          break;
-        }
-        case "ArrowUp": {
-          const nextIndex = currentIndex <= 0 ? enabledValues.value.length - 1 : currentIndex - 1;
-          activeId.value = enabledValues.value[nextIndex].id;
-          scrollToView();
+        case "ArrowDown":
+        case "ArrowUp":
           event.preventDefault();
-          break;
-        }
-        case "Enter":
-          if (activeId.value) {
-            emit("itemClick", toOptionId(activeId.value));
-            event.preventDefault();
-          }
-          break;
-        case " ":
-          if (event.target instanceof HTMLElement && ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName)) {
-            break;
-          }
-          if (activeId.value) {
-            emit("itemClick", toOptionId(activeId.value));
-            event.preventDefault();
+          if (!open.value) {
+            open.value = true;
           }
           break;
-        case "Home":
-          activeId.value = enabledValues.value[0].id;
-          scrollToView();
-          event.preventDefault();
-          break;
-        case "End":
-          activeId.value = enabledValues.value[enabledValues.value.length - 1].id;
-          scrollToView();
-          event.preventDefault();
-          break;
       }
     };
-    __expose({
-      /** Forward a keydown event to the list for keyboard navigation */
-      handleKeydown,
-      /** Notify the list that its controlling element received focus */
-      handleFocus,
-      /** Notify the list that its controlling element lost focus */
-      handleBlur,
-      activeDescendant: activeId
-    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        ref_key: "containerEl",
-        ref: containerEl,
-        role: "listbox",
-        "aria-label": props.ariaLabel,
-        "aria-activedescendant": !props.controlledExternally && activeId.value ? activeId.value : void 0,
-        class: "kds-list-container",
-        tabindex: props.controlledExternally ? void 0 : 0
-      }, toHandlers(
-        props.controlledExternally ? { mousemove: onMousemove, mouseleave: onMouseLeave } : {
-          keydown: handleKeydown,
-          focus: handleFocus,
-          blur: handleBlur,
-          mousemove: onMousemove,
-          mouseleave: onMouseLeave
-        },
-        true
-      )), [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(prefixedValues.value, (item) => {
-          return openBlock(), createBlock(unref(KdsListItem), {
-            id: item.id,
-            key: item.id,
-            accessory: item.accessory,
-            label: item.text,
-            "sub-text": item.subText,
-            selected: item.selected,
-            disabled: item.disabled,
-            active: activeId.value === item.id,
-            special: item.special,
-            missing: item.missing,
-            "trailing-icon": item.selected ? "checkmark" : void 0,
-            onMousedown: _cache[0] || (_cache[0] = ($event) => props.controlledExternally && $event.preventDefault()),
-            onClick: withModifiers(($event) => emit("itemClick", toOptionId(item.id)), ["stop"])
-          }, null, 8, ["id", "accessory", "label", "sub-text", "selected", "disabled", "active", "special", "missing", "trailing-icon", "onClick"]);
-        }), 128)),
-        prefixedValues.value.length === 0 ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          id: emptyOptionId,
-          role: "option",
-          "aria-disabled": "true",
-          "aria-selected": void 0,
-          class: "kds-list-container-empty"
-        }, [
-          createVNode(KdsEmptyState, {
-            headline: props.emptyText
-          }, null, 8, ["headline"])
-        ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$9);
+      return openBlock(), createElementBlock("button", {
+        id: props.id,
+        class: normalizeClass(["kds-dropdown-trigger-button", { error: props.error }]),
+        type: "button",
+        "aria-expanded": open.value,
+        "aria-labelledby": ariaLabelledby.value,
+        "aria-describedby": props.ariaDescribedby,
+        "aria-label": effectiveAriaLabel.value,
+        "aria-invalid": props.ariaInvalid,
+        "aria-controls": props.popoverId,
+        "aria-haspopup": "dialog",
+        disabled: props.disabled,
+        onClick: _cache[0] || (_cache[0] = ($event) => !props.disabled && emit("click")),
+        onKeydown
+      }, [
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$3, [
+          createVNode(_sfc_main$z, {
+            accessory: props.accessory,
+            size: "medium"
+          }, null, 8, ["accessory"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("span", {
+          id: unref(valueTextId),
+          class: normalizeClass(["text", {
+            placeholder: !props.text,
+            missing: props.missing
+          }])
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$2),
+        createElementVNode("span", _hoisted_4$1, [
+          createVNode(KdsIcon, {
+            name: open.value ? "chevron-up" : "chevron-down",
+            size: "small"
+          }, null, 8, ["name"])
+        ])
+      ], 42, _hoisted_1$9);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-bfdaa003"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-f1917c48"]]);
 
 const _hoisted_1$8 = { class: "kds-dropdown-container" };
 const _hoisted_2$2 = { class: "kds-dropdown-container-sticky-top" };
@@ -4062,6 +4266,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
+    loading: { type: Boolean },
     possibleValues: {}
   }, {
     "modelValue": { default: null },
@@ -4145,24 +4350,26 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         createVNode(unref(KdsListContainer), {
           ref: "listContainer",
           class: normalizeClass(["kds-dropdown-container-list", { multiline: hasMultiline.value }]),
-          "possible-values": listOptions.value,
+          "possible-values": props.loading ? [] : listOptions.value,
+          loading: props.loading,
           "empty-text": props.emptyText,
           "controlled-externally": "",
           "aria-label": "Dropdown options",
           onItemClick: _cache[4] || (_cache[4] = ($event) => modelValue.value = $event)
-        }, null, 8, ["class", "possible-values", "empty-text"])
+        }, null, 8, ["class", "possible-values", "loading", "empty-text"])
       ]);
     };
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-dd55ee4d"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-15e753c9"]]);
 
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
     disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
     possibleValues: {},
     description: {},
     label: {},
@@ -4238,8 +4445,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 modelValue: modelValue.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
                 "possible-values": props.possibleValues,
+                loading: props.loading,
                 "empty-text": "No entries found"
-              }, null, 8, ["modelValue", "possible-values"])
+              }, null, 8, ["modelValue", "possible-values", "loading"])
             ]),
             _: 1
           }, 8, ["modelValue"])
@@ -4321,6 +4529,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           modelValue: modelValue.value,
           "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
           placement: "top-right",
+          role: "dialog",
           "popover-aria-label": "Description"
         }, {
           default: withCtx(() => [
@@ -4340,7 +4549,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f98c9924"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-d865cc89"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -4464,17 +4673,19 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           modelValue: modelValue.value,
           "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
           placement: "bottom-right",
+          role: "dialog",
           "popover-aria-label": "Flow Variable settings"
         }, {
           default: withCtx(() => [
-            createVNode(VariablePopover, {
+            modelValue.value ? (openBlock(), createBlock(VariablePopover, {
+              key: 0,
               content: props.content
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ]),
               _: 3
-            }, 8, ["content"])
+            }, 8, ["content"])) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["modelValue"])
@@ -4483,7 +4694,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-1541cbb3"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-f362911c"]]);
 
 const _hoisted_1$3 = ["aria-label", "aria-labelledby", "aria-pressed", "disabled"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
@@ -4576,10 +4787,10 @@ const kdsModalVariant = {
 };
 const kdsModalVariants = Object.values(kdsModalVariant);
 const kdsModalLayoutPropsDefault = {
-  title: "",
+  headline: "",
   variant: kdsModalVariant.PADDED,
   overflow: "auto",
-  icon: void 0
+  leadingIcon: void 0
 };
 const kdsModalPropsDefault = {
   active: false,
@@ -4590,7 +4801,7 @@ const kdsModalPropsDefault = {
 };
 
 const _hoisted_1$2 = { class: "modal-header" };
-const _hoisted_2$1 = { class: "modal-header-title" };
+const _hoisted_2$1 = { class: "modal-header-headline" };
 const _hoisted_3$1 = ["data-variant"];
 const _hoisted_4 = {
   key: 0,
@@ -4600,27 +4811,27 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsModalLayout",
   props: /* @__PURE__ */ mergeDefaults({
-    title: {},
+    headline: {},
     variant: {},
-    icon: {},
+    leadingIcon: {},
     overflow: {},
     onClose: { type: Function }
   }, kdsModalLayoutPropsDefault),
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v670bbff1": _ctx.overflow
+      "v55fe64da": _ctx.overflow
     }));
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("header", _hoisted_1$2, [
-          props.icon ? (openBlock(), createBlock(KdsIcon, {
+          props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
-            name: props.icon,
+            name: props.leadingIcon,
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2$1, toDisplayString(props.title), 1),
-          createVNode(_sfc_main$B, {
+          createElementVNode("div", _hoisted_2$1, toDisplayString(props.headline), 1),
+          createVNode(_sfc_main$E, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -4642,14 +4853,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ff11e839"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b2e57108"]]);
 
 const _hoisted_1$1 = ["closedby"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
   props: /* @__PURE__ */ mergeDefaults({
-    icon: {},
-    title: {},
+    leadingIcon: {},
+    headline: {},
     variant: {},
     width: {},
     height: {},
@@ -4660,7 +4871,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: ["close", "closed"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v6fde1eb1": _ctx.overflow
+      "v073dd16a": _ctx.overflow
     }));
     const props = __props;
     const emit = __emit;
@@ -4720,15 +4931,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onCancel: withModifiers(onClose, ["prevent"])
       }, [
         renderSlot(_ctx.$slots, "default", {
-          title: __props.title,
-          icon: __props.icon,
+          headline: __props.headline,
+          leadingIcon: __props.leadingIcon,
           variant: __props.variant,
           overflow: __props.overflow,
           onClose
         }, () => [
           createVNode(KdsModalLayout, {
-            title: __props.title,
-            icon: __props.icon,
+            headline: __props.headline,
+            "leading-icon": __props.leadingIcon,
             variant: __props.variant,
             overflow: __props.overflow,
             onClose
@@ -4740,14 +4951,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "footer", {}, void 0, true)
             ]),
             _: 3
-          }, 8, ["title", "icon", "variant", "overflow"])
+          }, 8, ["headline", "leading-icon", "variant", "overflow"])
         ], true)
       ], 42, _hoisted_1$1)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f7b58ae1"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5a8d7ce3"]]);
 
 const defaultCancelButton = {
   type: "cancel",
@@ -4871,10 +5082,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!config.value) {
         return {};
       }
-      const { icon, title, height, width, variant, overflow, closedby } = config.value.value;
+      const { leadingIcon, headline, height, width, variant, overflow, closedby } = config.value.value;
       return {
-        icon,
-        title,
+        leadingIcon,
+        headline,
         height,
         width,
         variant,
@@ -4893,7 +5104,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$u, {
+                createVNode(_sfc_main$p, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -4908,7 +5119,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$B, {
+              return openBlock(), createBlock(_sfc_main$E, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -4938,7 +5149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67e036b5"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-41fc8d84"]]);
 
-export { KdsAvatar, KdsBadge, _sfc_main$B as KdsButton, KdsCardClickable, _sfc_main$u as KdsCheckbox, KdsCheckboxGroup, _sfc_main$j as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$8 as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$A as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$i as KdsNumberInput, _sfc_main$h as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$g as KdsSearchInput, KdsSubText, _sfc_main$l as KdsTextInput, KdsTextarea, _sfc_main$z as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$E as KdsButton, KdsCardClickable, _sfc_main$p as KdsCheckbox, KdsCheckboxGroup, _sfc_main$f as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$8 as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$D as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$h as KdsTextInput, KdsTextarea, _sfc_main$C as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map