@knime/kds-components 0.13.2 → 0.15.0

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, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, watchEffect, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, createVNode, defineAsyncComponent, useId, Fragment, renderList, onBeforeUpdate, nextTick, watchEffect, withModifiers, normalizeProps, guardReactiveProps, withDirectives, vModelText, toHandlers, 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$r = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$b = ["src"];
-const _hoisted_3$6 = {
+const _hoisted_1$w = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$f = ["src"];
+const _hoisted_3$9 = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -59,10 +59,10 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$b)) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
+        }, null, 40, _hoisted_2$f)) : (openBlock(), createElementBlock("div", _hoisted_3$9, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$r);
+      ], 10, _hoisted_1$w);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-d6a313f1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-d6a313f1"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -111,11 +111,12 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
-    size: { default: "medium" }
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -123,12 +124,12 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return unref(iconComponent) ? (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent)), {
         key: 0,
-        class: normalizeClass(["kds-icon", props.size]),
+        class: normalizeClass(["kds-icon", props.size, { disabled: __props.disabled }]),
         "aria-hidden": "true",
         focusable: "false"
       }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
         key: 1,
-        class: normalizeClass(["kds-icon", props.size]),
+        class: normalizeClass(["kds-icon", props.size, { disabled: __props.disabled }]),
         "aria-hidden": "true",
         focusable: "false"
       }, null, 2));
@@ -136,7 +137,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3a57d423"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-4da5bf3e"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -462,13 +463,14 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$q = ["title"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$v = ["title"];
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
     iconTitle: { default: "Unknown Data Type" },
-    size: { default: "medium" }
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: false }
   },
   setup(__props) {
     const DATA_TYPE_SIZE_TO_ICON_SIZE = {
@@ -495,7 +497,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["kds-data-type-icon-container", __props.size]),
+        class: normalizeClass(["kds-data-type-icon-container", __props.size, { disabled: __props.disabled }]),
         title: props.iconTitle
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent)), {
@@ -503,12 +505,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$q);
+      ], 10, _hoisted_1$v);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-d7166d18"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-806087da"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -525,8 +527,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$p = { class: "label-wrapper" };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = { class: "label-wrapper" };
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -548,13 +550,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           name: __props.icon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$p, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$u, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-5c6c74a8"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-5c6c74a8"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -573,8 +575,8 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$o = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = ["role", "title", "aria-hidden", "aria-label"];
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -609,12 +611,12 @@ const _sfc_main$x = /* @__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$o);
+      }, null, 14, _hoisted_1$t);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-bdb3dd24"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-bdb3dd24"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -734,9 +736,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$n = ["title", "aria-label"];
-const _hoisted_2$a = ["title"];
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = ["title", "aria-label"];
+const _hoisted_2$e = ["title"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -765,13 +767,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$a)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$n);
+        }, toDisplayString(props.label), 9, _hoisted_2$e)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$s);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-4dec8e94"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-4dec8e94"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -787,8 +789,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$m = ["data-style"];
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["data-style"];
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -813,12 +815,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$m);
+      ])], 10, _hoisted_1$r);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-74bb7c3d"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-74bb7c3d"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -828,11 +830,11 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$l = {
+const _hoisted_1$q = {
   key: 0,
   class: "label"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -891,7 +893,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$l, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$q, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -904,9 +906,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-b0f9559f"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-b0f9559f"]]);
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -959,7 +961,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -995,7 +997,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1030,9 +1032,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
-const _hoisted_1$k = ["data-visible"];
-const _hoisted_2$9 = ["data-visible"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = ["data-visible"];
+const _hoisted_2$d = ["data-visible"];
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1095,7 +1097,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$k),
+            ], 8, _hoisted_1$p),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
@@ -1104,7 +1106,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$9)
+            ], 8, _hoisted_2$d)
           ], 2)
         ]),
         _: 1
@@ -1113,7 +1115,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-ec08a9ba"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-ec08a9ba"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1137,9 +1139,9 @@ const kdsButtonVariant = {
 };
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
-const _hoisted_1$j = { class: "kds-label-wrapper" };
-const _hoisted_2$8 = ["id", "for", "title"];
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = { class: "kds-label-wrapper" };
+const _hoisted_2$c = ["id", "for", "title"];
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -1156,7 +1158,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -1164,7 +1166,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$8),
+        }, toDisplayString(props.label), 9, _hoisted_2$c),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -1175,11 +1177,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-1a5dc1ba"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-1a5dc1ba"]]);
 
-const _hoisted_1$i = ["id"];
-const _hoisted_2$7 = { class: "subtext-text" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = ["id"];
+const _hoisted_2$b = { class: "subtext-text" };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -1210,27 +1212,27 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$7, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$i)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$b, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$n)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-df9a85a4"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-df9a85a4"]]);
 
-const _hoisted_1$h = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$6 = { class: "control" };
-const _hoisted_3$5 = {
+const _hoisted_1$m = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$a = { class: "control" };
+const _hoisted_3$8 = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$4 = { class: "label" };
-const _hoisted_5$2 = ["id"];
-const _hoisted_6$1 = {
+const _hoisted_4$6 = { class: "label" };
+const _hoisted_5$3 = ["id"];
+const _hoisted_6$3 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1303,7 +1305,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$6, [
+          createElementVNode("div", _hoisted_2$a, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -1311,16 +1313,16 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
-            createElementVNode("div", _hoisted_4$4, toDisplayString(props.label), 1),
+          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$2)) : createCommentVNode("", true)
+            }, toDisplayString(props.helperText), 9, _hoisted_5$3)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$h),
-        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+        ], 10, _hoisted_1$m),
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
             "sub-text": props.subText,
@@ -1333,9 +1335,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-32f17780"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-32f17780"]]);
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1367,8 +1369,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -1452,12 +1454,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: hasError.value
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$g);
+      ], 8, _hoisted_1$l);
     };
   }
 });
 
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-c38eeda5"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-c38eeda5"]]);
 
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -1473,19 +1475,19 @@ const kdsCheckboxValue = {
 };
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
 
-const _hoisted_1$f = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$5 = { class: "control" };
-const _hoisted_3$4 = {
+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$3 = { class: "content" };
-const _hoisted_5$1 = { class: "label" };
-const _hoisted_6 = ["id"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+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: {},
@@ -1525,8 +1527,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$5, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$4, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$9, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$7, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -1534,20 +1536,20 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$3, [
-          createElementVNode("div", _hoisted_5$1, toDisplayString(props.text), 1),
+        createElementVNode("div", _hoisted_4$5, [
+          createElementVNode("div", _hoisted_5$2, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
             id: `${unref(id)}-helper`,
             class: "helper-text"
-          }, toDisplayString(props.helperText), 9, _hoisted_6)) : createCommentVNode("", true)
+          }, toDisplayString(props.helperText), 9, _hoisted_6$2)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$f);
+      ], 10, _hoisted_1$k);
     };
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-27c361e4"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-27c361e4"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -1669,8 +1671,8 @@ const useRadioSelection = ({
   };
 };
 
-const _hoisted_1$e = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -1749,15 +1751,15 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: unref(hasError)
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$e);
+      ], 8, _hoisted_1$j);
     };
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-9cc4dcdd"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-9cc4dcdd"]]);
 
-const _hoisted_1$d = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -1807,12 +1809,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$d);
+      ], 10, _hoisted_1$i);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-93f3f577"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-93f3f577"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -1863,8 +1865,8 @@ const useValueSwitchIconHiding = ({
   };
 };
 
-const _hoisted_1$c = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -1957,12 +1959,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: props.error
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 10, _hoisted_1$c);
+      ], 10, _hoisted_1$h);
     };
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-666d4c10"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-666d4c10"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -1982,7 +1984,62 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+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);
+    };
+  }
+});
+
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-9125d023"]]);
+
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -2034,38 +2091,39 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-5d99c134"]]);
 
-const _hoisted_1$b = {
+const _hoisted_1$f = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$4 = ["id", "value", "type", "inputmode", "placeholder", "disabled", "readonly", "required", "name", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"];
-const _hoisted_3$3 = ["aria-disabled"];
-const _hoisted_4$2 = {
-  key: 3,
-  class: "trailing-slot"
+const _hoisted_2$7 = {
+  key: 1,
+  class: "leading-slot"
 };
-const _hoisted_5 = {
+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 = {
   key: 4,
+  class: "trailing-slot"
+};
+const _hoisted_6$1 = {
+  key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
-    id: {},
+    id: { default: void 0 },
     type: { default: "text" },
     min: { default: void 0 },
     max: { default: void 0 },
     step: { default: void 0 },
     placeholder: { default: void 0 },
     disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
     leadingIcon: { default: void 0 },
     trailingIcon: { default: void 0 },
     error: { type: Boolean, default: false },
-    name: { default: void 0 },
     autocomplete: { default: void 0 },
     ariaLabel: { default: void 0 },
     ariaLabelledby: { default: void 0 },
@@ -2076,6 +2134,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     ariaValuemin: { default: void 0 },
     ariaValuemax: { default: void 0 },
     ariaValuetext: { default: void 0 },
+    ariaActivedescendant: { default: void 0 },
     unit: { default: void 0 },
     inputmode: { default: void 0 },
     clearable: { type: Boolean, default: false }
@@ -2126,12 +2185,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
           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, [
+          renderSlot(_ctx.$slots, "leading", {}, void 0, true)
+        ])) : createCommentVNode("", true),
         createElementVNode("input", {
           id: props.id,
           ref: "input",
@@ -2140,9 +2202,6 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           inputmode: props.inputmode,
           placeholder: props.placeholder,
           disabled: props.disabled,
-          readonly: props.readonly,
-          required: props.required,
-          name: props.name,
           autocomplete: props.autocomplete,
           min: props.min,
           max: props.max,
@@ -2156,24 +2215,25 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "aria-valuemin": props.ariaValuemin,
           "aria-valuemax": props.ariaValuemax,
           "aria-valuetext": props.ariaValuetext,
+          "aria-activedescendant": props.ariaActivedescendant,
           class: normalizeClass({ "input-field": true, "has-value": hasValue.value }),
           onInput: handleInput,
           onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
           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_2$4),
+        }, null, 42, _hoisted_3$6),
         props.unit ? (openBlock(), createElementBlock("span", {
-          key: 1,
+          key: 2,
           class: normalizeClass({
             unit: true,
             placeholder: showUnitPlaceholder.value,
             disabled: props.disabled
           }),
           "aria-disabled": props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_3$3)) : createCommentVNode("", true),
-        props.clearable && hasValue.value && !props.disabled && !props.readonly ? (openBlock(), createBlock(_sfc_main$t, {
-          key: 2,
+        }, toDisplayString(props.unit), 11, _hoisted_4$4)) : createCommentVNode("", true),
+        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$B, {
+          key: 3,
           class: "clear-button",
           type: "button",
           size: "xsmall",
@@ -2183,10 +2243,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
-        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_5, [
+        props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
           createVNode(KdsIcon, {
             name: props.trailingIcon
           }, null, 8, ["name"])
@@ -2196,132 +2256,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-375bc2d8"]]);
-
-const additionalGroupSeparators = [" ", " ", " "];
-const decimalSeparatorSample = 1.1;
-const groupSeparatorSample = 1000.1;
-const countFractionDigits = (value) => {
-  if (!Number.isFinite(value)) {
-    return 0;
-  }
-  const exp = value.toExponential();
-  const match = exp.match(/^[-+]?(\d+)(?:\.(\d+))?e([+-]?\d+)$/i);
-  if (!match) {
-    return 0;
-  }
-  const fractionDigitsInMantissa = match[2]?.length ?? 0;
-  const exponent = Number.parseInt(match[3], 10);
-  if (exponent >= 0) {
-    return Math.max(0, fractionDigitsInMantissa - exponent);
-  }
-  return fractionDigitsInMantissa + Math.abs(exponent);
-};
-const createKdsNumberParser = (params) => {
-  const formatter = new Intl.NumberFormat(params.locale);
-  const decimalSeparator = formatter.formatToParts(decimalSeparatorSample).find((part) => part.type === "decimal")?.value ?? ".";
-  const groupSeparator = formatter.formatToParts(groupSeparatorSample).find((part) => part.type === "group")?.value ?? ",";
-  const removeGroupingSeparators = (input) => [groupSeparator, ...additionalGroupSeparators].reduce(
-    (acc, groupSep) => groupSep.length > 0 ? acc.split(groupSep).join("") : acc,
-    input
-  );
-  const formattersByMaxDecimals = /* @__PURE__ */ new Map();
-  const getFormatterForMaxDecimals = (maxDecimals) => {
-    const cached = formattersByMaxDecimals.get(maxDecimals);
-    if (cached) {
-      return cached;
-    }
-    const created = new Intl.NumberFormat(params.locale, {
-      useGrouping: false,
-      minimumFractionDigits: 0,
-      maximumFractionDigits: maxDecimals
-    });
-    formattersByMaxDecimals.set(maxDecimals, created);
-    return created;
-  };
-  const stepFractionDigits = countFractionDigits(params.step);
-  const precisionFactor = Number(`1e${stepFractionDigits}`);
-  const formatForDisplay = (value) => {
-    if (!Number.isFinite(value)) {
-      return "";
-    }
-    const valueDecimals = countFractionDigits(value);
-    const maxDecimals = Math.max(stepFractionDigits, valueDecimals);
-    return getFormatterForMaxDecimals(maxDecimals).format(value);
-  };
-  const roundToStep = (value) => {
-    if (!Number.isFinite(value)) {
-      return NaN;
-    }
-    const step = params.step;
-    if (!Number.isFinite(step) || step <= 0) {
-      return value;
-    }
-    if (!Number.isFinite(precisionFactor) || precisionFactor <= 0) {
-      return value;
-    }
-    const scaledNext = Math.round(value * precisionFactor);
-    const scaledStep = Math.round(step * precisionFactor);
-    if (scaledStep === 0) {
-      return value;
-    }
-    const roundedScaled = Math.round(scaledNext / scaledStep) * scaledStep;
-    return roundedScaled / precisionFactor;
-  };
-  const isValidNormalizedNumber = (normalized) => (
-    // Accept plain decimals as well as scientific notation.
-    // Note: whitespace is removed earlier; we don't accept grouping separators here.
-    /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/.test(normalized)
-  );
-  const parseFromInput = (value) => {
-    const trimmed = value.trim();
-    if (trimmed.length === 0) {
-      return NaN;
-    }
-    const localeDecimal = decimalSeparator;
-    const hasLocaleDecimal = localeDecimal.length > 0 && trimmed.includes(localeDecimal);
-    if (hasLocaleDecimal) {
-      const withoutGrouping = removeGroupingSeparators(trimmed);
-      const normalized2 = withoutGrouping.split(localeDecimal).join(".");
-      if (!isValidNormalizedNumber(normalized2)) {
-        return NaN;
-      }
-      const parsed2 = Number.parseFloat(normalized2);
-      return Number.isFinite(parsed2) ? parsed2 : NaN;
-    }
-    if (localeDecimal !== "." && trimmed.includes(".")) {
-      const lastDotIndex = trimmed.lastIndexOf(".");
-      const digitsAfterDot = trimmed.slice(lastDotIndex + 1);
-      const looksLikeDecimal = digitsAfterDot.length > 0 && digitsAfterDot.length <= 2;
-      const normalized2 = looksLikeDecimal ? `${removeGroupingSeparators(trimmed.slice(0, lastDotIndex))}.${removeGroupingSeparators(
-        digitsAfterDot
-      )}` : removeGroupingSeparators(trimmed);
-      if (!isValidNormalizedNumber(normalized2)) {
-        return NaN;
-      }
-      const parsed2 = Number.parseFloat(normalized2);
-      return Number.isFinite(parsed2) ? parsed2 : NaN;
-    }
-    const normalized = removeGroupingSeparators(trimmed);
-    if (!isValidNormalizedNumber(normalized)) {
-      return NaN;
-    }
-    const parsed = Number.parseFloat(normalized);
-    return Number.isFinite(parsed) ? parsed : NaN;
-  };
-  return {
-    locale: params.locale,
-    decimalSeparator,
-    groupSeparator,
-    stepFractionDigits,
-    formatForDisplay,
-    parseFromInput,
-    roundToStep
-  };
-};
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-fad4fd1f"]]);
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "KdsNumberInput",
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
     label: {},
@@ -2333,173 +2271,583 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     preserveSubTextSpace: { type: Boolean, default: false },
     placeholder: {},
     disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
-    name: {},
-    autocomplete: {},
-    unit: { default: "" },
-    min: {},
-    max: {},
-    step: { default: 1 }
+    autocomplete: {}
   }, {
-    "modelValue": { default: NaN },
+    "modelValue": { default: "" },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const isFocused = ref(false);
-    const localValue = ref("");
-    const numberParser = computed(
-      () => createKdsNumberParser({ locale: "en-US", step: props.step })
-    );
-    const ariaValuenow = computed(
-      () => Number.isFinite(modelValue.value) ? modelValue.value : void 0
-    );
-    const ariaValuetext = computed(() => {
-      if (!Number.isFinite(modelValue.value)) {
-        return void 0;
-      }
-      return numberParser.value.formatForDisplay(modelValue.value);
+    const baseInput = useTemplateRef("baseInput");
+    __expose({
+      focus: () => baseInput.value?.focus()
     });
-    const clamp = (value) => {
-      if (!Number.isFinite(value)) {
-        return NaN;
-      }
-      let result = value;
-      if (props.min !== void 0 && !Number.isNaN(props.min)) {
-        result = Math.max(props.min, result);
-      }
-      if (props.max !== void 0 && !Number.isNaN(props.max)) {
-        result = Math.min(props.max, result);
+    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: "text",
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            error: props.error,
+            autocomplete: props.autocomplete
+          }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+
+const HEX_RADIX = 16;
+const RGB_MAX = 255;
+const HUE_MAX_DEG$1 = 360;
+const HUE_SECTOR_DEG = 60;
+const HUE_SECTOR_COUNT = 6;
+const HUE_OFFSET_FOR_MAX_G = 2;
+const HUE_OFFSET_FOR_MAX_B = 4;
+const HUE_SECTOR_INDEX_2 = 2;
+const HUE_SECTOR_INDEX_3 = 3;
+const HUE_SECTOR_INDEX_4 = 4;
+const HUE_SECTOR_INDEX_5 = 5;
+const HEX_PAIR_LENGTH = 2;
+const HEX_RED_START = 1;
+const HEX_GREEN_START = HEX_RED_START + HEX_PAIR_LENGTH;
+const HEX_BLUE_START = HEX_GREEN_START + HEX_PAIR_LENGTH;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const round = (value) => Math.round(value);
+const padHex = (value) => value.toString(HEX_RADIX).padStart(2, "0");
+const normalizeHexColor = (value) => {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+  const withoutHash = trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
+  if (/^[0-9a-fA-F]{3}$/.test(withoutHash)) {
+    const [r, g, b] = withoutHash.split("");
+    return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(withoutHash)) {
+    return `#${withoutHash}`.toUpperCase();
+  }
+  return null;
+};
+const hexToRgb = (hex) => {
+  const normalized = normalizeHexColor(hex);
+  if (!normalized) {
+    return null;
+  }
+  const r = Number.parseInt(
+    normalized.slice(HEX_RED_START, HEX_RED_START + HEX_PAIR_LENGTH),
+    HEX_RADIX
+  );
+  const g = Number.parseInt(
+    normalized.slice(HEX_GREEN_START, HEX_GREEN_START + HEX_PAIR_LENGTH),
+    HEX_RADIX
+  );
+  const b = Number.parseInt(
+    normalized.slice(HEX_BLUE_START, HEX_BLUE_START + HEX_PAIR_LENGTH),
+    HEX_RADIX
+  );
+  return { r, g, b };
+};
+const rgbToHex = ({ r, g, b }) => {
+  const rr = clamp(round(r), 0, RGB_MAX);
+  const gg = clamp(round(g), 0, RGB_MAX);
+  const bb = clamp(round(b), 0, RGB_MAX);
+  return `#${padHex(rr)}${padHex(gg)}${padHex(bb)}`.toUpperCase();
+};
+const rgbToHsv = ({ r, g, b }) => {
+  const rr = clamp(r / RGB_MAX, 0, 1);
+  const gg = clamp(g / RGB_MAX, 0, 1);
+  const bb = clamp(b / RGB_MAX, 0, 1);
+  const max = Math.max(rr, gg, bb);
+  const min = Math.min(rr, gg, bb);
+  const delta = max - min;
+  const v = max;
+  const s = max === 0 ? 0 : delta / max;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rr) {
+      h = (gg - bb) / delta % HUE_SECTOR_COUNT;
+    } else if (max === gg) {
+      h = (bb - rr) / delta + HUE_OFFSET_FOR_MAX_G;
+    } else {
+      h = (rr - gg) / delta + HUE_OFFSET_FOR_MAX_B;
+    }
+    h *= HUE_SECTOR_DEG;
+    if (h < 0) {
+      h += HUE_MAX_DEG$1;
+    }
+  }
+  return { h, s, v };
+};
+const hsvToRgb = ({ h, s, v }) => {
+  const hh = (h % HUE_MAX_DEG$1 + HUE_MAX_DEG$1) % HUE_MAX_DEG$1;
+  const ss = clamp(s, 0, 1);
+  const vv = clamp(v, 0, 1);
+  const c = vv * ss;
+  const x = c * (1 - Math.abs(hh / HUE_SECTOR_DEG % 2 - 1));
+  const m = vv - c;
+  let rPrime = 0;
+  let gPrime = 0;
+  let bPrime = 0;
+  if (hh < HUE_SECTOR_DEG) {
+    rPrime = c;
+    gPrime = x;
+  } else if (hh < HUE_SECTOR_INDEX_2 * HUE_SECTOR_DEG) {
+    rPrime = x;
+    gPrime = c;
+  } else if (hh < HUE_SECTOR_INDEX_3 * HUE_SECTOR_DEG) {
+    gPrime = c;
+    bPrime = x;
+  } else if (hh < HUE_SECTOR_INDEX_4 * HUE_SECTOR_DEG) {
+    gPrime = x;
+    bPrime = c;
+  } else if (hh < HUE_SECTOR_INDEX_5 * HUE_SECTOR_DEG) {
+    rPrime = x;
+    bPrime = c;
+  } else {
+    rPrime = c;
+    bPrime = x;
+  }
+  return {
+    r: round((rPrime + m) * RGB_MAX),
+    g: round((gPrime + m) * RGB_MAX),
+    b: round((bPrime + m) * RGB_MAX)
+  };
+};
+const hsvToHex = (hsv) => rgbToHex(hsvToRgb(hsv));
+
+const usePointerHandler = (updateFromEvent) => {
+  const activePointerId = ref(null);
+  const onPointerDown = (event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.currentTarget;
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    activePointerId.value = event.pointerId;
+    target.setPointerCapture(event.pointerId);
+    updateFromEvent(event);
+  };
+  const onPointerMove = (event) => {
+    if (activePointerId.value !== event.pointerId) {
+      return;
+    }
+    updateFromEvent(event);
+  };
+  const endPointerInteraction = (event) => {
+    if (activePointerId.value !== event.pointerId) {
+      return;
+    }
+    const target = event.currentTarget;
+    if (target instanceof HTMLElement && target.hasPointerCapture(event.pointerId)) {
+      target.releasePointerCapture(event.pointerId);
+    }
+    activePointerId.value = null;
+  };
+  return {
+    activePointerId,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: endPointerInteraction
+  };
+};
+
+const _hoisted_1$e = { class: "kds-color-picker" };
+const _hoisted_2$6 = ["aria-valuetext"];
+const _hoisted_3$5 = ["aria-valuenow", "aria-valuetext"];
+const DEFAULT_HUE_DEG = 270;
+const DEFAULT_SATURATION = 0.8;
+const DEFAULT_VALUE = 0.9;
+const HUE_MAX_DEG = 360;
+const HUE_MAX_EXCLUSIVE_DEG = 359.999;
+const PERCENT = 100;
+const KEYBOARD_STEP = 0.01;
+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({
+  __name: "ColorPicker",
+  props: {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const colorspaceEl = ref(null);
+    const hueEl = ref(null);
+    const hue = ref(DEFAULT_HUE_DEG);
+    const saturation = ref(DEFAULT_SATURATION);
+    const value = ref(DEFAULT_VALUE);
+    const hasPendingInternalModelUpdate = ref(false);
+    const syncFromModelValue = (next) => {
+      const rgb = hexToRgb(next);
+      if (!rgb) {
+        return;
       }
-      return result;
+      const hsv = rgbToHsv(rgb);
+      hue.value = hsv.h;
+      saturation.value = hsv.s;
+      value.value = hsv.v;
     };
     watch(
       () => modelValue.value,
       (next) => {
-        if (isFocused.value) {
+        if (hasPendingInternalModelUpdate.value) {
+          hasPendingInternalModelUpdate.value = false;
           return;
         }
-        localValue.value = numberParser.value.formatForDisplay(next);
+        syncFromModelValue(next);
       },
       { immediate: true }
     );
-    const canDecrease = computed(() => {
-      if (props.disabled || props.readonly) {
-        return false;
-      }
-      if (props.min === void 0 || Number.isNaN(props.min)) {
-        return true;
-      }
-      if (Number.isNaN(modelValue.value)) {
-        return true;
-      }
-      return modelValue.value > props.min;
+    const currentHex = computed(
+      () => hsvToHex({
+        h: hue.value,
+        s: saturation.value,
+        v: value.value
+      })
+    );
+    const hueRgb = computed(() => hsvToRgb({ h: hue.value, s: 1, v: 1 }));
+    const colorspaceBackground = computed(() => {
+      const { r, g, b } = hueRgb.value;
+      return {
+        background: `${TO_BOTTOM_GRADIENT}, linear-gradient(to right, white, rgb(${r}, ${g}, ${b}))`
+      };
     });
-    const canIncrease = computed(() => {
-      if (props.disabled || props.readonly) {
-        return false;
-      }
-      if (props.max === void 0 || Number.isNaN(props.max)) {
-        return true;
-      }
-      if (Number.isNaN(modelValue.value)) {
-        return true;
+    const colorspaceHandleStyle = computed(() => ({
+      left: `${saturation.value * 100}%`,
+      top: `${(1 - value.value) * 100}%`
+    }));
+    const hueHandleStyle = computed(() => ({
+      left: `${hue.value / HUE_MAX_DEG * PERCENT}%`
+    }));
+    const setModelValueFromHsv = () => {
+      hasPendingInternalModelUpdate.value = true;
+      modelValue.value = currentHex.value;
+    };
+    const updateFromColorspaceEvent = (event) => {
+      const el = colorspaceEl.value;
+      if (!el) {
+        return;
       }
-      return modelValue.value < props.max;
-    });
-    const adjustByStep = (direction) => {
-      if (props.step <= 0) {
+      const rect = el.getBoundingClientRect();
+      const x = (event.clientX - rect.left) / rect.width;
+      const y = (event.clientY - rect.top) / rect.height;
+      saturation.value = Math.min(1, Math.max(0, x));
+      value.value = 1 - Math.min(1, Math.max(0, y));
+      setModelValueFromHsv();
+    };
+    const updateFromHueEvent = (event) => {
+      const el = hueEl.value;
+      if (!el) {
         return;
       }
-      const base = Number.isFinite(modelValue.value) ? modelValue.value : numberParser.value.parseFromInput(localValue.value);
-      const nextRaw = Number.isFinite(base) ? base + direction * props.step : 0;
-      const rounded = numberParser.value.roundToStep(nextRaw);
-      const next = clamp(rounded);
+      const rect = el.getBoundingClientRect();
+      const x = (event.clientX - rect.left) / rect.width;
+      hue.value = Math.min(HUE_MAX_EXCLUSIVE_DEG, Math.max(0, x * HUE_MAX_DEG));
+      setModelValueFromHsv();
+    };
+    const {
+      onPointerDown: onColorspacePointerDown,
+      onPointerMove: onColorspacePointerMove,
+      onPointerUp: onColorspacePointerUp
+    } = usePointerHandler(updateFromColorspaceEvent);
+    const {
+      onPointerDown: onHuePointerDown,
+      onPointerMove: onHuePointerMove,
+      onPointerUp: onHuePointerUp
+    } = usePointerHandler(updateFromHueEvent);
+    const updateFromTextValue = (next) => {
       modelValue.value = next;
-      localValue.value = numberParser.value.formatForDisplay(next);
+      const normalized = normalizeHexColor(next);
+      if (normalized) {
+        syncFromModelValue(normalized);
+      }
     };
-    const handleKeydown = (event) => {
-      if (props.disabled || props.readonly) {
-        return;
+    const saturationPercent = computed(
+      () => Math.round(saturation.value * PERCENT)
+    );
+    const valuePercent = computed(() => Math.round(value.value * PERCENT));
+    const colorspaceValueText = computed(
+      () => `Saturation ${saturationPercent.value} percent, brightness ${valuePercent.value} percent`
+    );
+    const hueValueText = computed(() => `${Math.round(hue.value)} degrees`);
+    const onColorspaceKeyDown = (event) => {
+      const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+      let handled = true;
+      switch (event.key) {
+        case "ArrowLeft":
+          saturation.value = clamp(saturation.value - step, 0, 1);
+          break;
+        case "ArrowRight":
+          saturation.value = clamp(saturation.value + step, 0, 1);
+          break;
+        case "ArrowUp":
+          value.value = clamp(value.value + step, 0, 1);
+          break;
+        case "ArrowDown":
+          value.value = clamp(value.value - step, 0, 1);
+          break;
+        default:
+          handled = false;
       }
-      if (event.key === "ArrowUp" && canIncrease.value) {
+      if (handled) {
         event.preventDefault();
-        adjustByStep(1);
-        return;
+        setModelValueFromHsv();
       }
-      if (event.key === "ArrowDown" && canDecrease.value) {
+    };
+    const onHueKeyDown = (event) => {
+      const step = event.shiftKey ? HUE_KEYBOARD_LARGE_STEP_DEG : HUE_KEYBOARD_STEP_DEG;
+      let handled = true;
+      switch (event.key) {
+        case "ArrowLeft":
+          hue.value = clamp(hue.value - step, 0, HUE_MAX_EXCLUSIVE_DEG);
+          break;
+        case "ArrowRight":
+          hue.value = clamp(hue.value + step, 0, HUE_MAX_EXCLUSIVE_DEG);
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
         event.preventDefault();
-        adjustByStep(-1);
+        setModelValueFromHsv();
       }
     };
-    const handleUpdateModelValue = (value) => {
-      localValue.value = value;
-      modelValue.value = numberParser.value.parseFromInput(value);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createElementVNode("div", {
+          ref_key: "colorspaceEl",
+          ref: colorspaceEl,
+          class: "colorspace",
+          role: "slider",
+          "aria-label": "Color selection",
+          "aria-roledescription": "2D color slider",
+          "aria-valuetext": colorspaceValueText.value,
+          style: normalizeStyle(colorspaceBackground.value),
+          tabindex: "0",
+          onPointerdown: _cache[0] || (_cache[0] = withModifiers(
+            //@ts-ignore
+            (...args) => unref(onColorspacePointerDown) && unref(onColorspacePointerDown)(...args),
+            ["prevent"]
+          )),
+          onPointermove: _cache[1] || (_cache[1] = withModifiers(
+            //@ts-ignore
+            (...args) => unref(onColorspacePointerMove) && unref(onColorspacePointerMove)(...args),
+            ["prevent"]
+          )),
+          onPointerup: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => unref(onColorspacePointerUp) && unref(onColorspacePointerUp)(...args)),
+          onPointercancel: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => unref(onColorspacePointerUp) && unref(onColorspacePointerUp)(...args)),
+          onKeydown: onColorspaceKeyDown
+        }, [
+          createElementVNode("div", {
+            class: "handle",
+            style: normalizeStyle(colorspaceHandleStyle.value)
+          }, null, 4)
+        ], 44, _hoisted_2$6),
+        createElementVNode("div", {
+          ref_key: "hueEl",
+          ref: hueEl,
+          class: "hue",
+          role: "slider",
+          "aria-label": "Hue",
+          "aria-valuenow": Math.round(hue.value),
+          "aria-valuemin": "0",
+          "aria-valuemax": HUE_MAX_DEG,
+          "aria-valuetext": hueValueText.value,
+          tabindex: "0",
+          onPointerdown: _cache[4] || (_cache[4] = withModifiers(
+            //@ts-ignore
+            (...args) => unref(onHuePointerDown) && unref(onHuePointerDown)(...args),
+            ["prevent"]
+          )),
+          onPointermove: _cache[5] || (_cache[5] = withModifiers(
+            //@ts-ignore
+            (...args) => unref(onHuePointerMove) && unref(onHuePointerMove)(...args),
+            ["prevent"]
+          )),
+          onPointerup: _cache[6] || (_cache[6] = //@ts-ignore
+          (...args) => unref(onHuePointerUp) && unref(onHuePointerUp)(...args)),
+          onPointercancel: _cache[7] || (_cache[7] = //@ts-ignore
+          (...args) => unref(onHuePointerUp) && unref(onHuePointerUp)(...args)),
+          onKeydown: onHueKeyDown
+        }, [
+          createElementVNode("div", {
+            class: "handle",
+            style: normalizeStyle(hueHandleStyle.value)
+          }, null, 4)
+        ], 40, _hoisted_3$5),
+        createVNode(_sfc_main$l, {
+          "model-value": modelValue.value,
+          "aria-label": "Color hex value",
+          placeholder: "#FFFFFF",
+          "onUpdate:modelValue": updateFromTextValue
+        }, null, 8, ["model-value"])
+      ]);
     };
-    const handleBlur = () => {
-      isFocused.value = false;
-      const parsed = numberParser.value.parseFromInput(localValue.value);
-      const normalized = clamp(parsed);
+  }
+});
+
+const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-180fafdd"]]);
+
+const HEX_LENGTH_1 = 1;
+const HEX_LENGTH_2 = 2;
+const HEX_LENGTH_3 = 3;
+const HEX_LENGTH_4 = 4;
+const HEX_LENGTH_6 = 6;
+const normalize = (value, fallbackValue) => {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return fallbackValue;
+  }
+  const withoutHash = trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
+  if (!/^[0-9a-fA-F]+$/.test(withoutHash)) {
+    return fallbackValue;
+  }
+  if (withoutHash.length === HEX_LENGTH_1) {
+    return `#${withoutHash.repeat(HEX_LENGTH_6)}`.toUpperCase();
+  }
+  if (withoutHash.length === HEX_LENGTH_2) {
+    return `#${withoutHash.repeat(HEX_LENGTH_3)}`.toUpperCase();
+  }
+  if (withoutHash.length === HEX_LENGTH_3 || withoutHash.length === HEX_LENGTH_4) {
+    const [r, g, b] = withoutHash;
+    return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
+  }
+  if (withoutHash.length === HEX_LENGTH_6) {
+    return `#${withoutHash}`.toUpperCase();
+  }
+  return fallbackValue;
+};
+const useColorInputValidationOnFocusOut = (modelValue) => {
+  const lastValidHexColor = ref("");
+  watch(
+    modelValue,
+    (value) => {
+      const withoutHash = value.startsWith("#") ? value.slice(1) : value;
+      if (/^[0-9a-fA-F]{6}$/.test(withoutHash)) {
+        lastValidHexColor.value = `#${withoutHash.toUpperCase()}`;
+      }
+    },
+    { immediate: true }
+  );
+  const handleFocusOut = (event) => {
+    const currentTarget = event.currentTarget;
+    if (!(currentTarget instanceof HTMLElement)) {
+      return;
+    }
+    const nextFocusedElement = event.relatedTarget;
+    if (nextFocusedElement instanceof Node && currentTarget.contains(nextFocusedElement)) {
+      return;
+    }
+    const normalized = normalize(modelValue.value, lastValidHexColor.value);
+    if (normalized !== void 0) {
       modelValue.value = normalized;
-      localValue.value = numberParser.value.formatForDisplay(normalized);
-    };
-    const baseInput = useTemplateRef("baseInput");
-    __expose({
-      focus: () => baseInput.value?.focus()
-    });
+    }
+  };
+  return { handleFocusOut };
+};
+
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "KdsColorInput",
+  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: "#FFFFFF" },
+    disabled: { type: Boolean, default: false },
+    autocomplete: { default: void 0 }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const open = ref(false);
+    const popoverEl = useTemplateRef("popoverEl");
+    const swatchColor = computed(
+      () => normalizeHexColor(modelValue.value) ?? "#FFFFFF"
+    );
+    const { handleFocusOut } = useColorInputValidationOnFocusOut(modelValue);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
         default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps({
-            ref_key: "baseInput",
-            ref: baseInput
-          }, slotProps, {
-            "model-value": localValue.value,
-            type: "text",
-            inputmode: props.step >= 1 ? "numeric" : "decimal",
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            readonly: props.readonly,
-            required: props.required,
-            error: props.error,
-            name: props.name,
-            autocomplete: props.autocomplete,
-            unit: props.unit,
-            role: "spinbutton",
-            "aria-valuenow": ariaValuenow.value,
-            "aria-valuemin": props.min,
-            "aria-valuemax": props.max,
-            "aria-valuetext": ariaValuetext.value,
-            "onUpdate:modelValue": handleUpdateModelValue,
-            onKeydown: handleKeydown,
-            onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
-            onBlur: handleBlur
-          }), {
-            trailing: withCtx(() => [
-              createVNode(_sfc_main$t, {
-                type: "button",
-                size: "xsmall",
-                variant: "outlined",
-                "leading-icon": "minus",
-                "aria-label": `Decrease ${props.label ?? props.ariaLabel}`,
-                disabled: !canDecrease.value,
-                onClick: _cache[0] || (_cache[0] = ($event) => adjustByStep(-1))
-              }, null, 8, ["aria-label", "disabled"]),
-              createVNode(_sfc_main$t, {
-                type: "button",
-                size: "xsmall",
-                variant: "outlined",
-                "leading-icon": "plus",
-                "aria-label": `Increase ${props.label ?? props.ariaLabel}`,
-                disabled: !canIncrease.value,
-                onClick: _cache[1] || (_cache[1] = ($event) => adjustByStep(1))
-              }, null, 8, ["aria-label", "disabled"])
-            ]),
-            _: 1
-          }, 16, ["model-value", "inputmode", "placeholder", "disabled", "readonly", "required", "error", "name", "autocomplete", "unit", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"])
+          createElementVNode("div", {
+            style: normalizeStyle(popoverEl.value?.anchorStyle),
+            onFocusout: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => unref(handleFocusOut) && unref(handleFocusOut)(...args))
+          }, [
+            createVNode(BaseInput, mergeProps(slotProps, {
+              modelValue: modelValue.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+              placeholder: props.placeholder,
+              disabled: props.disabled,
+              error: props.error,
+              autocomplete: props.autocomplete
+            }), {
+              leading: withCtx(() => [
+                createVNode(KdsColorSwatch, {
+                  size: "large",
+                  color: swatchColor.value,
+                  "aria-hidden": true
+                }, null, 8, ["color"])
+              ]),
+              trailing: withCtx(() => [
+                createVNode(unref(_sfc_main$z), {
+                  modelValue: open.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+                  size: "xsmall",
+                  variant: "outlined",
+                  "leading-icon": "color-picker",
+                  "aria-label": "Open color picker",
+                  "aria-controls": popoverEl.value?.popoverId,
+                  "aria-haspopup": "dialog",
+                  disabled: props.disabled,
+                  title: open.value ? "Close color picker" : "Open color picker"
+                }, null, 8, ["modelValue", "aria-controls", "disabled", "title"])
+              ]),
+              _: 1
+            }, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"]),
+            createVNode(KdsPopover, {
+              ref_key: "popoverEl",
+              ref: popoverEl,
+              modelValue: open.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+              placement: "bottom-right",
+              "popover-aria-label": "Color picker"
+            }, {
+              default: withCtx(() => [
+                createVNode(ColorPicker, {
+                  modelValue: modelValue.value,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event)
+                }, null, 8, ["modelValue"])
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ], 36)
         ]),
         _: 1
       }, 16);
@@ -2507,95 +2855,130 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const wildcardToRegexBody = (pattern) => {
-  let body = "";
-  for (const char of pattern) {
-    if (char === "*") {
-      body += ".*";
-      continue;
-    }
-    if (char === "?") {
-      body += ".";
-      continue;
-    }
-    body += escapeRegex(char);
+const additionalGroupSeparators = [" ", " ", " "];
+const decimalSeparatorSample = 1.1;
+const groupSeparatorSample = 1000.1;
+const countFractionDigits = (value) => {
+  if (!Number.isFinite(value)) {
+    return 0;
   }
-  return body;
+  const exp = value.toExponential();
+  const match = exp.match(/^[-+]?(\d+)(?:\.(\d+))?e([+-]?\d+)$/i);
+  if (!match) {
+    return 0;
+  }
+  const fractionDigitsInMantissa = match[2]?.length ?? 0;
+  const exponent = Number.parseInt(match[3], 10);
+  if (exponent >= 0) {
+    return Math.max(0, fractionDigitsInMantissa - exponent);
+  }
+  return fractionDigitsInMantissa + Math.abs(exponent);
 };
-const regexBodyToWildcard = (regexBody) => {
-  let wildcard = "";
-  for (let i = 0; i < regexBody.length; i += 1) {
-    const char = regexBody[i];
-    if (char === "\\") {
-      const next = regexBody[i + 1];
-      if (next === void 0) {
-        return void 0;
+const createKdsNumberParser = (params) => {
+  const formatter = new Intl.NumberFormat(params.locale);
+  const decimalSeparator = formatter.formatToParts(decimalSeparatorSample).find((part) => part.type === "decimal")?.value ?? ".";
+  const groupSeparator = formatter.formatToParts(groupSeparatorSample).find((part) => part.type === "group")?.value ?? ",";
+  const removeGroupingSeparators = (input) => [groupSeparator, ...additionalGroupSeparators].reduce(
+    (acc, groupSep) => groupSep.length > 0 ? acc.split(groupSep).join("") : acc,
+    input
+  );
+  const formattersByMaxDecimals = /* @__PURE__ */ new Map();
+  const getFormatterForMaxDecimals = (maxDecimals) => {
+    const cached = formattersByMaxDecimals.get(maxDecimals);
+    if (cached) {
+      return cached;
+    }
+    const created = new Intl.NumberFormat(params.locale, {
+      useGrouping: false,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: maxDecimals
+    });
+    formattersByMaxDecimals.set(maxDecimals, created);
+    return created;
+  };
+  const stepFractionDigits = countFractionDigits(params.step);
+  const precisionFactor = Number(`1e${stepFractionDigits}`);
+  const formatForDisplay = (value) => {
+    if (!Number.isFinite(value)) {
+      return "";
+    }
+    const valueDecimals = countFractionDigits(value);
+    const maxDecimals = Math.max(stepFractionDigits, valueDecimals);
+    return getFormatterForMaxDecimals(maxDecimals).format(value);
+  };
+  const roundToStep = (value) => {
+    if (!Number.isFinite(value)) {
+      return NaN;
+    }
+    const step = params.step;
+    if (!Number.isFinite(step) || step <= 0) {
+      return value;
+    }
+    if (!Number.isFinite(precisionFactor) || precisionFactor <= 0) {
+      return value;
+    }
+    const scaledNext = Math.round(value * precisionFactor);
+    const scaledStep = Math.round(step * precisionFactor);
+    if (scaledStep === 0) {
+      return value;
+    }
+    const roundedScaled = Math.round(scaledNext / scaledStep) * scaledStep;
+    return roundedScaled / precisionFactor;
+  };
+  const isValidNormalizedNumber = (normalized) => (
+    // Accept plain decimals as well as scientific notation.
+    // Note: whitespace is removed earlier; we don't accept grouping separators here.
+    /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/.test(normalized)
+  );
+  const parseFromInput = (value) => {
+    const trimmed = value.trim();
+    if (trimmed.length === 0) {
+      return NaN;
+    }
+    const localeDecimal = decimalSeparator;
+    const hasLocaleDecimal = localeDecimal.length > 0 && trimmed.includes(localeDecimal);
+    if (hasLocaleDecimal) {
+      const withoutGrouping = removeGroupingSeparators(trimmed);
+      const normalized2 = withoutGrouping.split(localeDecimal).join(".");
+      if (!isValidNormalizedNumber(normalized2)) {
+        return NaN;
       }
-      wildcard += next;
-      i += 1;
-      continue;
+      const parsed2 = Number.parseFloat(normalized2);
+      return Number.isFinite(parsed2) ? parsed2 : NaN;
     }
-    if (char === ".") {
-      const next = regexBody[i + 1];
-      if (next === "*") {
-        wildcard += "*";
-        i += 1;
-        continue;
+    if (localeDecimal !== "." && trimmed.includes(".")) {
+      const lastDotIndex = trimmed.lastIndexOf(".");
+      const digitsAfterDot = trimmed.slice(lastDotIndex + 1);
+      const looksLikeDecimal = digitsAfterDot.length > 0 && digitsAfterDot.length <= 2;
+      const normalized2 = looksLikeDecimal ? `${removeGroupingSeparators(trimmed.slice(0, lastDotIndex))}.${removeGroupingSeparators(
+        digitsAfterDot
+      )}` : removeGroupingSeparators(trimmed);
+      if (!isValidNormalizedNumber(normalized2)) {
+        return NaN;
       }
-      wildcard += "?";
-      continue;
+      const parsed2 = Number.parseFloat(normalized2);
+      return Number.isFinite(parsed2) ? parsed2 : NaN;
     }
-    if (/[[\]{}()+^$|]/.test(char)) {
-      return void 0;
+    const normalized = removeGroupingSeparators(trimmed);
+    if (!isValidNormalizedNumber(normalized)) {
+      return NaN;
     }
-    wildcard += char;
-  }
-  return wildcard;
-};
-const CASE_INSENSITIVE_PREFIX = "(?i:";
-const stripOuterGroup = (pattern, prefix) => {
-  const trimmed = pattern.trim();
-  if (trimmed.startsWith(prefix) && trimmed.endsWith(")")) {
-    return trimmed.slice(prefix.length, -1);
-  }
-  return trimmed;
-};
-const buildRegexFromPatternInput = (input, options) => {
-  const body = options.useRegex ? input : wildcardToRegexBody(input);
-  const grouped = `(?:${body})`;
-  const withCase = options.caseSensitive ? grouped : `${CASE_INSENSITIVE_PREFIX}${grouped})`;
-  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 parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : NaN;
+  };
+  return {
+    locale: params.locale,
+    decimalSeparator,
+    groupSeparator,
+    stepFractionDigits,
+    formatForDisplay,
+    parseFromInput,
+    roundToStep
+  };
 };
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "KdsPatternInput",
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
     label: {},
@@ -2607,240 +2990,1118 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     preserveSubTextSpace: { type: Boolean, default: false },
     placeholder: {},
     disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
-    name: {},
-    autocomplete: {}
+    autocomplete: {},
+    unit: { default: "" },
+    min: {},
+    max: {},
+    step: { default: 1 }
   }, {
-    "modelValue": { default: "" },
+    "modelValue": { default: Number.NaN },
     "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
-      });
+    const modelValue = useModel(__props, "modelValue");
+    const isFocused = ref(false);
+    const localValue = ref("");
+    const numberParser = computed(
+      () => createKdsNumberParser({ locale: "en-US", step: props.step })
+    );
+    const ariaValuenow = computed(
+      () => Number.isFinite(modelValue.value) ? modelValue.value : void 0
+    );
+    const ariaValuetext = computed(() => {
+      if (!Number.isFinite(modelValue.value)) {
+        return void 0;
+      }
+      return numberParser.value.formatForDisplay(modelValue.value);
+    });
+    const clamp = (value) => {
+      if (!Number.isFinite(value)) {
+        return Number.NaN;
+      }
+      let result = value;
+      if (props.min !== void 0 && !Number.isNaN(props.min)) {
+        result = Math.max(props.min, result);
+      }
+      if (props.max !== void 0 && !Number.isNaN(props.max)) {
+        result = Math.min(props.max, result);
+      }
+      return result;
     };
     watch(
-      () => regex.value,
-      (newValue) => {
-        uiValue.value = parseRegexToPatternInputValue(newValue, {
-          useRegex: useRegex.value,
-          excludeMatches: excludeMatches.value,
-          caseSensitive: caseSensitive.value
-        });
+      () => modelValue.value,
+      (next) => {
+        if (isFocused.value) {
+          return;
+        }
+        localValue.value = numberParser.value.formatForDisplay(next);
       },
       { 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
-            ],
+    const canDecrease = computed(() => {
+      if (props.disabled) {
+        return false;
+      }
+      if (props.min === void 0 || Number.isNaN(props.min)) {
+        return true;
+      }
+      if (Number.isNaN(modelValue.value)) {
+        return true;
+      }
+      return modelValue.value > props.min;
+    });
+    const canIncrease = computed(() => {
+      if (props.disabled) {
+        return false;
+      }
+      if (props.max === void 0 || Number.isNaN(props.max)) {
+        return true;
+      }
+      if (Number.isNaN(modelValue.value)) {
+        return true;
+      }
+      return modelValue.value < props.max;
+    });
+    const adjustByStep = (direction) => {
+      if (props.step <= 0) {
+        return;
+      }
+      const base = Number.isFinite(modelValue.value) ? modelValue.value : numberParser.value.parseFromInput(localValue.value);
+      const nextRaw = Number.isFinite(base) ? base + direction * props.step : 0;
+      const rounded = numberParser.value.roundToStep(nextRaw);
+      const next = clamp(rounded);
+      modelValue.value = next;
+      localValue.value = numberParser.value.formatForDisplay(next);
+    };
+    const handleKeydown = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      if (event.key === "ArrowUp" && canIncrease.value) {
+        event.preventDefault();
+        adjustByStep(1);
+        return;
+      }
+      if (event.key === "ArrowDown" && canDecrease.value) {
+        event.preventDefault();
+        adjustByStep(-1);
+      }
+    };
+    const handleUpdateModelValue = (value) => {
+      localValue.value = value;
+      modelValue.value = numberParser.value.parseFromInput(value);
+    };
+    const handleBlur = () => {
+      isFocused.value = false;
+      const parsed = numberParser.value.parseFromInput(localValue.value);
+      const normalized = clamp(parsed);
+      modelValue.value = normalized;
+      localValue.value = numberParser.value.formatForDisplay(normalized);
+    };
+    const baseInput = useTemplateRef("baseInput");
+    __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, {
+            "model-value": localValue.value,
             type: "text",
+            inputmode: props.step >= 1 ? "numeric" : "decimal",
             placeholder: props.placeholder,
             disabled: props.disabled,
-            readonly: props.readonly,
-            required: props.required,
             error: props.error,
-            name: props.name,
             autocomplete: props.autocomplete,
-            "leading-icon": "filter",
-            clearable: ""
+            unit: props.unit,
+            role: "spinbutton",
+            "aria-valuenow": ariaValuenow.value,
+            "aria-valuemin": props.min,
+            "aria-valuemax": props.max,
+            "aria-valuetext": ariaValuetext.value,
+            "onUpdate:modelValue": handleUpdateModelValue,
+            onKeydown: handleKeydown,
+            onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
+            onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$r, {
-                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 || props.readonly
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$r, {
-                modelValue: excludeMatches.value,
-                "onUpdate:modelValue": [
-                  _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
-                  rebuildRegexFromUi
-                ],
+              createVNode(_sfc_main$B, {
+                type: "button",
                 size: "xsmall",
                 variant: "outlined",
-                "leading-icon": "arrows-order",
-                title: excludeMatchesAriaLabel.value,
-                "aria-label": excludeMatchesAriaLabel.value,
-                disabled: props.disabled || props.readonly
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$r, {
-                modelValue: useRegex.value,
-                "onUpdate:modelValue": [
-                  _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
-                  rebuildRegexFromUi
-                ],
+                "leading-icon": "minus",
+                "aria-label": `Decrease ${props.label ?? props.ariaLabel}`,
+                disabled: !canDecrease.value,
+                onClick: _cache[0] || (_cache[0] = ($event) => adjustByStep(-1))
+              }, null, 8, ["aria-label", "disabled"]),
+              createVNode(_sfc_main$B, {
+                type: "button",
                 size: "xsmall",
                 variant: "outlined",
-                "leading-icon": "regex",
-                title: patternModeAriaLabel.value,
-                "aria-label": patternModeAriaLabel.value,
-                disabled: props.disabled || props.readonly
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"])
+                "leading-icon": "plus",
+                "aria-label": `Increase ${props.label ?? props.ariaLabel}`,
+                disabled: !canIncrease.value,
+                onClick: _cache[1] || (_cache[1] = ($event) => adjustByStep(1))
+              }, null, 8, ["aria-label", "disabled"])
             ]),
             _: 1
-          }, 16, ["modelValue", "placeholder", "disabled", "readonly", "required", "error", "name", "autocomplete"])
+          }, 16, ["model-value", "inputmode", "placeholder", "disabled", "error", "autocomplete", "unit", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"])
         ]),
         _: 1
       }, 16);
     };
-  }
-});
-
-const _sfc_main$c = /* @__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 },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
-    name: {},
-    autocomplete: {}
-  }, {
-    "modelValue": { default: "" },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const modelValue = useModel(__props, "modelValue");
-    const baseInput = useTemplateRef("baseInput");
+  }
+});
+
+const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const wildcardToRegexBody = (pattern) => {
+  let body = "";
+  for (const char of pattern) {
+    if (char === "*") {
+      body += ".*";
+      continue;
+    }
+    if (char === "?") {
+      body += ".";
+      continue;
+    }
+    body += escapeRegex(char);
+  }
+  return body;
+};
+const regexBodyToWildcard = (regexBody) => {
+  let wildcard = "";
+  for (let i = 0; i < regexBody.length; i += 1) {
+    const char = regexBody[i];
+    if (char === "\\") {
+      const next = regexBody[i + 1];
+      if (next === void 0) {
+        return void 0;
+      }
+      wildcard += next;
+      i += 1;
+      continue;
+    }
+    if (char === ".") {
+      const next = regexBody[i + 1];
+      if (next === "*") {
+        wildcard += "*";
+        i += 1;
+        continue;
+      }
+      wildcard += "?";
+      continue;
+    }
+    if (/[[\]{}()+^$|]/.test(char)) {
+      return void 0;
+    }
+    wildcard += char;
+  }
+  return wildcard;
+};
+const CASE_INSENSITIVE_PREFIX = "(?i:";
+const stripOuterGroup = (pattern, prefix) => {
+  const trimmed = pattern.trim();
+  if (trimmed.startsWith(prefix) && trimmed.endsWith(")")) {
+    return trimmed.slice(prefix.length, -1);
+  }
+  return trimmed;
+};
+const buildRegexFromPatternInput = (input, options) => {
+  const body = options.useRegex ? input : wildcardToRegexBody(input);
+  const grouped = `(?:${body})`;
+  const withCase = options.caseSensitive ? grouped : `${CASE_INSENSITIVE_PREFIX}${grouped})`;
+  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);
+    };
+  }
+});
+
+const _hoisted_1$d = ["rows", "placeholder", "disabled", "autocomplete"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "KdsTextarea",
+  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: "" },
+    disabled: { type: Boolean, default: false },
+    autocomplete: {},
+    rows: { default: 3 }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  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;
+      }
+    };
+    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);
+    };
+  }
+});
+
+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: {},
+    description: {},
+    button: {}
+  },
+  emits: ["buttonClick"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    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
+    );
+    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)
+      ]);
+    };
+  }
+});
+
+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 _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "KdsListItem",
+  props: {
+    id: {},
+    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 }) {
+    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();
+        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)
+        ]),
+        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);
+    };
+  }
+});
+
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-fca25fc2"]]);
+
+const _hoisted_1$9 = ["aria-label", "aria-activedescendant", "tabindex"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "KdsListContainer",
+  props: {
+    possibleValues: {},
+    emptyText: { default: "" },
+    ariaLabel: {},
+    controlledExternally: { type: Boolean }
+  },
+  emits: ["itemClick"],
+  setup(__props, { expose: __expose, 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;
+        }
+      }
+      if (!isValid(lastActiveId.value)) {
+        lastActiveId.value = void 0;
+      }
+      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 (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();
+          }
+          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({
-      focus: () => baseInput.value?.focus()
+      /** 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(), 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,
-            readonly: props.readonly,
-            required: props.required,
-            error: props.error,
-            name: props.name,
-            autocomplete: props.autocomplete,
-            "leading-icon": "search",
-            clearable: true
-          }), null, 16, ["modelValue", "placeholder", "disabled", "readonly", "required", "error", "name", "autocomplete"])
-        ]),
-        _: 1
-      }, 16);
+      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);
     };
   }
 });
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "KdsTextInput",
+const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-bfdaa003"]]);
+
+const _hoisted_1$8 = { class: "kds-dropdown-container" };
+const _hoisted_2$2 = { class: "kds-dropdown-container-sticky-top" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "DropdownContainer",
   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 },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
-    name: {},
-    autocomplete: {}
+    emptyText: {},
+    possibleValues: {}
   }, {
-    "modelValue": { default: "" },
+    "modelValue": { default: null },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
-    const baseInput = useTemplateRef("baseInput");
+    const searchValue = ref("");
+    const searchEl = useTemplateRef("searchEl");
+    const listContainerRef = useTemplateRef("listContainer");
+    const optionsWithSyntheticMissing = computed(
+      () => {
+        if (modelValue.value === null) {
+          return props.possibleValues;
+        }
+        const hasSelected = props.possibleValues.some(
+          (o) => o.id === modelValue.value
+        );
+        if (hasSelected) {
+          return props.possibleValues;
+        }
+        return [
+          {
+            id: modelValue.value,
+            text: modelValue.value,
+            missing: true
+          },
+          ...props.possibleValues
+        ];
+      }
+    );
+    const filteredOptions = computed(() => {
+      const normalizedQuery = searchValue.value.trim().toLowerCase();
+      const base = optionsWithSyntheticMissing.value;
+      if (normalizedQuery.length === 0) {
+        return base;
+      }
+      return base.filter(
+        (option) => option.text.toLowerCase().includes(normalizedQuery)
+      );
+    });
+    const listOptions = computed(
+      () => filteredOptions.value.map((option) => ({
+        id: option.id,
+        text: option.text,
+        subText: option.subText,
+        accessory: option.accessory,
+        disabled: option.disabled || option.missing,
+        selected: option.id === modelValue.value,
+        special: option.special,
+        missing: option.missing
+      }))
+    );
+    const hasMultiline = computed(
+      () => props.possibleValues.some((o) => o.subText !== void 0)
+    );
     __expose({
-      focus: () => baseInput.value?.focus()
+      focus: () => searchEl.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: "text",
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            readonly: props.readonly,
-            required: props.required,
-            error: props.error,
-            name: props.name,
-            autocomplete: props.autocomplete
-          }), null, 16, ["modelValue", "placeholder", "disabled", "readonly", "required", "error", "name", "autocomplete"])
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createElementVNode("div", _hoisted_2$2, [
+          createVNode(BaseInput, {
+            ref_key: "searchEl",
+            ref: searchEl,
+            modelValue: searchValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
+            type: "search",
+            placeholder: "Search",
+            "aria-label": "Filter options",
+            "aria-activedescendant": listContainerRef.value?.activeDescendant,
+            "leading-icon": "search",
+            clearable: true,
+            onKeydown: _cache[1] || (_cache[1] = ($event) => listContainerRef.value?.handleKeydown($event)),
+            onFocus: _cache[2] || (_cache[2] = ($event) => listContainerRef.value?.handleFocus()),
+            onBlur: _cache[3] || (_cache[3] = ($event) => listContainerRef.value?.handleBlur())
+          }, null, 8, ["modelValue", "aria-activedescendant"])
         ]),
-        _: 1
-      }, 16);
+        createVNode(unref(KdsListContainer), {
+          ref: "listContainer",
+          class: normalizeClass(["kds-dropdown-container-list", { multiline: hasMultiline.value }]),
+          "possible-values": listOptions.value,
+          "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"])
+      ]);
     };
   }
 });
 
-const _hoisted_1$a = ["rows", "placeholder", "disabled", "readonly", "required", "name", "autocomplete"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "KdsTextarea",
+const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-dd55ee4d"]]);
+
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
+    placeholder: { default: "Select" },
+    disabled: { type: Boolean, default: false },
+    possibleValues: {},
     description: {},
     label: {},
     ariaLabel: {},
@@ -2848,128 +4109,87 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     subText: {},
     error: { type: Boolean, default: false },
     validating: { type: Boolean, default: false },
-    preserveSubTextSpace: { type: Boolean, default: false },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
-    name: {},
-    autocomplete: {},
-    rows: { default: 3 }
+    preserveSubTextSpace: { type: Boolean, default: false }
   }, {
-    "modelValue": { default: "" },
+    "modelValue": { default: null },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
+  setup(__props) {
     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;
+    const open = ref(false);
+    const popoverEl = useTemplateRef("popoverEl");
+    const dropdownContainerEl = useTemplateRef("dropdownContainerEl");
+    const selectedOption = computed(
+      () => props.possibleValues.find((o) => o.id === modelValue.value)
+    );
+    watchEffect(() => {
+      if (open.value) {
+        nextTick(() => dropdownContainerEl.value?.focus());
       }
-      element.style.height = `${scrollHeight}px`;
-    }
-    useResizeObserver(textareaElement, resize);
-    watch(modelValue, resize, { immediate: true });
-    __expose({
-      focus: () => {
-        textareaElement.value?.focus();
+    });
+    watch(modelValue, () => {
+      if (open.value) {
+        open.value = false;
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+      return openBlock(), createBlock(BaseFormFieldWrapper, {
+        id: props.id,
+        label: props.label,
+        "aria-label": props.ariaLabel,
+        description: props.description,
+        "sub-text": props.subText,
+        error: props.error,
+        validating: props.validating,
+        "preserve-sub-text-space": props.preserveSubTextSpace
+      }, {
         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,
+          createVNode(BaseDropdown, mergeProps(slotProps, {
+            open: open.value,
+            "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+            text: modelValue.value !== null && !selectedOption.value ? `(Missing) ${modelValue.value}` : selectedOption.value?.text,
             placeholder: props.placeholder,
             disabled: props.disabled,
-            readonly: props.readonly,
-            required: props.required,
-            name: props.name,
-            autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$a), [
-            [vModelText, modelValue.value]
-          ])
+            error: props.error,
+            missing: modelValue.value !== null && !selectedOption.value,
+            accessory: selectedOption.value?.accessory,
+            style: popoverEl.value?.anchorStyle,
+            "popover-id": popoverEl.value?.popoverId,
+            onClick: _cache[1] || (_cache[1] = ($event) => open.value = !open.value)
+          }), null, 16, ["open", "text", "placeholder", "disabled", "error", "missing", "accessory", "style", "popover-id"]),
+          createVNode(KdsPopover, {
+            ref_key: "popoverEl",
+            ref: popoverEl,
+            modelValue: open.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+            placement: "bottom-left",
+            role: "dialog",
+            "full-width": "",
+            "popover-aria-label": "Searchable dropdown options"
+          }, {
+            default: withCtx(() => [
+              createVNode(DropdownContainer, {
+                ref_key: "dropdownContainerEl",
+                ref: dropdownContainerEl,
+                modelValue: modelValue.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
+                "possible-values": props.possibleValues,
+                "empty-text": "No entries found"
+              }, null, 8, ["modelValue", "possible-values"])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
         ]),
         _: 1
-      }, 16);
-    };
-  }
-});
-
-const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-2e4d2d42"]]);
-
-const _hoisted_1$9 = ["id", "role", "aria-label"];
-const _hoisted_2$3 = {
-  key: 0,
-  class: "kds-popover-default-content"
-};
-const _sfc_main$9 = /* @__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$3, toDisplayString(props.content), 1)) : createCommentVNode("", true)
-        ], true) : createCommentVNode("", true)
-      ], 46, _hoisted_1$9);
+      }, 8, ["id", "label", "aria-label", "description", "sub-text", "error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9125d023"]]);
-
-const _hoisted_1$8 = { class: "kds-info-popover-content" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "kds-info-popover-content" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "InfoPopover",
   props: {
     content: {}
@@ -2977,7 +4197,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           createTextVNode(toDisplayString(props.content), 1)
         ], true)
@@ -2986,11 +4206,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const InfoPopover = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-951f2a2b"]]);
+const InfoPopover = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-951f2a2b"]]);
 
-const _hoisted_1$7 = ["aria-pressed", "aria-expanded", "aria-controls"];
+const _hoisted_1$6 = ["aria-pressed", "aria-expanded", "aria-controls"];
 const TITLE = "Click for more information";
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "KdsInfoToggleButton",
   props: /* @__PURE__ */ mergeModels({
     content: {},
@@ -3032,7 +4252,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             name: "circle-question",
             size: "small"
           })
-        ], 16, _hoisted_1$7),
+        ], 16, _hoisted_1$6),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -3058,15 +4278,15 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-f98c9924"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f98c9924"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsInfoToggleButton
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _hoisted_1$6 = { class: "kds-variable-popover" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "kds-variable-popover" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VariablePopover",
   props: {
     content: {}
@@ -3074,7 +4294,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           createTextVNode(toDisplayString(props.content), 1)
         ], true)
@@ -3083,10 +4303,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const VariablePopover = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-54c206b9"]]);
+const VariablePopover = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-54c206b9"]]);
 
-const _hoisted_1$5 = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["title", "aria-label", "aria-pressed", "aria-expanded", "aria-controls"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "KdsVariableToggleButton",
   props: /* @__PURE__ */ mergeModels({
     content: {},
@@ -3175,7 +4395,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"])
-        ], 16, _hoisted_1$5),
+        ], 16, _hoisted_1$4),
         createVNode(KdsPopover, {
           ref_key: "popoverEl",
           ref: popoverEl,
@@ -3201,50 +4421,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1541cbb3"]]);
-
-const _hoisted_1$4 = { class: "kds-empty-state" };
-const _hoisted_2$2 = { class: "kds-empty-state-headline" };
-const _hoisted_3$2 = {
-  key: 0,
-  class: "kds-empty-state-description"
-};
-const _hoisted_4$1 = {
-  key: 1,
-  class: "kds-empty-state-action"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "KdsEmptyState",
-  props: {
-    headline: {},
-    description: {},
-    button: {}
-  },
-  emits: ["buttonClick"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const isLinkButton = computed(
-      () => props.button && "to" in props.button && props.button.to !== void 0
-    );
-    const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$s : _sfc_main$t
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createElementVNode("p", _hoisted_2$2, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$2, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
-          (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
-            onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
-          }), null, 16))
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-
-const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-b4af30cf"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-1541cbb3"]]);
 
 const _hoisted_1$3 = ["aria-label", "aria-labelledby", "aria-pressed", "disabled"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
@@ -3381,7 +4558,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$1, toDisplayString(props.title), 1),
-          createVNode(_sfc_main$t, {
+          createVNode(_sfc_main$B, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -3654,7 +4831,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$m, {
+                createVNode(_sfc_main$u, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -3669,7 +4846,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$t, {
+              return openBlock(), createBlock(_sfc_main$B, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -3701,5 +4878,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67e036b5"]]);
 
-export { KdsAvatar, KdsBadge, _sfc_main$t as KdsButton, KdsCardClickable, _sfc_main$m as KdsCheckbox, KdsCheckboxGroup, KdsColorSwatch, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$s as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$b as KdsTextInput, KdsTextarea, _sfc_main$r 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, 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$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, 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, 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