@knime/kds-components 0.22.2 → 0.22.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, withKeys, defineAsyncComponent, onBeforeUpdate, withModifiers, reactive, onMounted, onUnmounted, toRefs, normalizeProps, inject, withDirectives, provide, guardReactiveProps, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, onBeforeUnmount, vModelText, useCssVars, createSlots } from 'vue';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, withKeys, defineAsyncComponent, onBeforeUpdate, withModifiers, onBeforeUnmount, useCssVars, reactive, onMounted, onUnmounted, toRefs, normalizeProps, inject, withDirectives, provide, guardReactiveProps, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, vModelText, createSlots } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$K = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$s = ["src"];
-const _hoisted_3$i = {
+const _hoisted_1$M = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$t = ["src"];
+const _hoisted_3$j = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -59,10 +59,10 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$s)) : (openBlock(), createElementBlock("div", _hoisted_3$i, [
+        }, null, 40, _hoisted_2$t)) : (openBlock(), createElementBlock("div", _hoisted_3$j, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$K);
+      ], 10, _hoisted_1$M);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc$1 = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$18, [["__scopeId", "data-v-c90668bf"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$1a, [["__scopeId", "data-v-c90668bf"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -117,7 +117,7 @@ function useIcon({
   return iconComponent;
 }
 
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -146,7 +146,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$17, [["__scopeId", "data-v-fb124eb6"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$19, [["__scopeId", "data-v-fb124eb6"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -483,8 +483,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$J = ["title"];
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$L = ["title"];
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -524,12 +524,12 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$J);
+      ], 10, _hoisted_1$L);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$16, [["__scopeId", "data-v-3b8ebdbd"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$18, [["__scopeId", "data-v-3b8ebdbd"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -546,8 +546,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$I = { class: "label-wrapper" };
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$K = { class: "label-wrapper" };
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -569,13 +569,13 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$I, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$K, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$15, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$17, [["__scopeId", "data-v-df64f7cf"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -594,8 +594,14 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$H = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$J = ["role", "title", "aria-hidden", "aria-label"];
+const RGBA_SHORT_HEX_LENGTH = 4;
+const RGBA_LONG_HEX_LENGTH = 8;
+const ALPHA_NIBBLE_INDEX = 3;
+const ALPHA_BYTE_START = 6;
+const RGB_SHORT_HEX_LENGTH = 3;
+const RGB_LONG_HEX_LENGTH = 6;
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -614,12 +620,52 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
       other: "var(--kds-color-nodes-and-variables-other)"
     };
     const isKdsColorSwatchType = (value) => Object.hasOwn(typeToTokenColor, value);
+    const isTransparentAlphaHexColor = (value) => {
+      const withoutHash = value.startsWith("#") ? value.slice(1) : value;
+      if (withoutHash.length === RGBA_SHORT_HEX_LENGTH) {
+        return withoutHash[ALPHA_NIBBLE_INDEX].toLowerCase() !== "f";
+      }
+      if (withoutHash.length === RGBA_LONG_HEX_LENGTH) {
+        return withoutHash.slice(ALPHA_BYTE_START).toLowerCase() !== "ff";
+      }
+      return false;
+    };
+    const toOpaqueHexColor = (value) => {
+      const withoutHash = value.startsWith("#") ? value.slice(1) : value;
+      if (withoutHash.length === RGBA_SHORT_HEX_LENGTH) {
+        return `#${withoutHash.slice(0, RGB_SHORT_HEX_LENGTH)}`;
+      }
+      if (withoutHash.length === RGBA_LONG_HEX_LENGTH) {
+        return `#${withoutHash.slice(0, RGB_LONG_HEX_LENGTH)}`;
+      }
+      return value;
+    };
     const backgroundColor = computed(() => {
       if (isKdsColorSwatchType(props.color)) {
         return typeToTokenColor[props.color];
       }
       return props.color;
     });
+    const showAlphaPreview = computed(
+      () => !isKdsColorSwatchType(props.color) && isTransparentAlphaHexColor(props.color)
+    );
+    const swatchStyle = computed(() => {
+      if (!showAlphaPreview.value) {
+        return { backgroundColor: backgroundColor.value };
+      }
+      const opaqueColor = toOpaqueHexColor(props.color);
+      return {
+        backgroundImage: `
+      linear-gradient(to right, ${backgroundColor.value} 0 50%, ${opaqueColor} 50% 100%),
+      repeating-conic-gradient(
+        var(--kds-color-background-neutral-active) 0 25%,
+        var(--kds-color-surface-default) 0 50%
+      )
+    `,
+        backgroundSize: "100% 100%, var(--kds-color-swatch-checker-size) var(--kds-color-swatch-checker-size)",
+        backgroundPosition: "0 0, 0 0"
+      };
+    });
     const accessibleTitle = computed(() => props.title?.trim() ?? "");
     const hasTitle = computed(() => accessibleTitle.value.length > 0);
     return (_ctx, _cache) => {
@@ -627,15 +673,15 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         role: hasTitle.value ? "img" : "presentation",
         class: normalizeClass(["kds-color-swatch", __props.size]),
         title: hasTitle.value ? accessibleTitle.value : void 0,
-        style: normalizeStyle({ backgroundColor: backgroundColor.value }),
+        style: normalizeStyle(swatchStyle.value),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$H);
+      }, null, 14, _hoisted_1$J);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$14, [["__scopeId", "data-v-2e300e76"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$16, [["__scopeId", "data-v-91e0130d"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -755,9 +801,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$G = ["title", "aria-label"];
-const _hoisted_2$r = ["title"];
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$I = ["title", "aria-label"];
+const _hoisted_2$s = ["title"];
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -786,13 +832,13 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$r)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$G);
+        }, toDisplayString(__props.label), 9, _hoisted_2$s)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$I);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$13, [["__scopeId", "data-v-01555495"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$15, [["__scopeId", "data-v-01555495"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -808,8 +854,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$F = ["data-style"];
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$H = ["data-style"];
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -834,12 +880,12 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$F);
+      ])], 10, _hoisted_1$H);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$12, [["__scopeId", "data-v-54835dc0"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$14, [["__scopeId", "data-v-54835dc0"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -849,14 +895,14 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$E = ["role"];
-const _hoisted_2$q = { class: "header" };
-const _hoisted_3$h = { class: "headline" };
-const _hoisted_4$d = {
+const _hoisted_1$G = ["role"];
+const _hoisted_2$r = { class: "header" };
+const _hoisted_3$i = { class: "headline" };
+const _hoisted_4$e = {
   key: 0,
   class: "body"
 };
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
     headline: {},
@@ -887,21 +933,21 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$q, [
+        createElementVNode("div", _hoisted_2$r, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$h, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$i, toDisplayString(props.headline), 1)
         ]),
-        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$d, toDisplayString(props.description), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$E);
+        props.description ? (openBlock(), createElementBlock("div", _hoisted_4$e, toDisplayString(props.description), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$G);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$11, [["__scopeId", "data-v-af14056f"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$13, [["__scopeId", "data-v-af14056f"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -911,11 +957,11 @@ const kdsInlineMessageVariant = {
 };
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
-const _hoisted_1$D = {
+const _hoisted_1$F = {
   key: 0,
   class: "label"
 };
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -976,7 +1022,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$D, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$F, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -989,9 +1035,9 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$10, [["__scopeId", "data-v-a696a1ec"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$12, [["__scopeId", "data-v-a696a1ec"]]);
 
-const _sfc_main$$ = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -1045,7 +1091,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$_ = /* @__PURE__ */ defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -1264,12 +1310,12 @@ function prettyBytes(number, options) {
 	return applyFixedWidth(result, options.fixedWidth);
 }
 
-const _hoisted_1$C = { class: "label" };
-const _hoisted_2$p = {
+const _hoisted_1$E = { class: "label" };
+const _hoisted_2$q = {
   key: 1,
   class: "file-size"
 };
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "KdsLink",
   props: {
     to: {},
@@ -1369,13 +1415,13 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         onClick
       }, {
         default: withCtx(() => [
-          createElementVNode("span", _hoisted_1$C, toDisplayString(__props.label), 1),
+          createElementVNode("span", _hoisted_1$E, toDisplayString(__props.label), 1),
           variant.value === "external" ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: "external-link",
             size: "xsmall"
           })) : createCommentVNode("", true),
-          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$p, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
+          normalizedFileSize.value ? (openBlock(), createElementBlock("span", _hoisted_2$q, toDisplayString(normalizedFileSize.value), 1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["class", "to", "download", "target", "rel", "title", "aria-disabled"]);
@@ -1383,9 +1429,9 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLink = /* @__PURE__ */ _export_sfc$1(_sfc_main$Z, [["__scopeId", "data-v-65e776f1"]]);
+const KdsLink = /* @__PURE__ */ _export_sfc$1(_sfc_main$$, [["__scopeId", "data-v-65e776f1"]]);
 
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1421,9 +1467,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
-const _hoisted_1$B = ["data-visible"];
-const _hoisted_2$o = ["data-visible"];
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _hoisted_1$D = ["data-visible"];
+const _hoisted_2$p = ["data-visible"];
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1484,7 +1530,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$B),
+            ], 8, _hoisted_1$D),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
@@ -1493,7 +1539,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$o)
+            ], 8, _hoisted_2$p)
           ], 2)
         ]),
         _: 1
@@ -1502,7 +1548,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$X, [["__scopeId", "data-v-d38d7ade"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$Z, [["__scopeId", "data-v-d38d7ade"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1512,17 +1558,17 @@ const kdsProgressButtonState = {
 };
 const kdsProgressButtonStates = Object.values(kdsProgressButtonState);
 
-const _hoisted_1$A = { class: "kds-empty-state" };
-const _hoisted_2$n = { class: "kds-empty-state-headline" };
-const _hoisted_3$g = {
+const _hoisted_1$C = { class: "kds-empty-state" };
+const _hoisted_2$o = { class: "kds-empty-state-headline" };
+const _hoisted_3$h = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$c = {
+const _hoisted_4$d = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -1538,10 +1584,10 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$_ : _sfc_main$$
+      () => isLinkButton.value ? _sfc_main$10 : _sfc_main$11
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$A, [
+      return openBlock(), createElementBlock("div", _hoisted_1$C, [
         props.loadingSpinner ? (openBlock(), createBlock(KdsLoadingSpinner, {
           key: 0,
           "data-testid": "loading-spinner",
@@ -1549,9 +1595,9 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$n, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$g, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
+        createElementVNode("p", _hoisted_2$o, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$h, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$d, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
             onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
           }), null, 16))
@@ -1561,9 +1607,9 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-5da4d570"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$Y, [["__scopeId", "data-v-5da4d570"]]);
 
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -1614,13 +1660,13 @@ const kdsListItemVariant = {
   LARGE: "large"
 };
 
-const _hoisted_1$z = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$m = {
+const _hoisted_1$B = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_2$n = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$f = { class: "content" };
-const _hoisted_4$b = ["title"];
+const _hoisted_3$g = { class: "content" };
+const _hoisted_4$c = ["title"];
 const _hoisted_5$7 = {
   key: 0,
   class: "prefix"
@@ -1635,7 +1681,7 @@ const _hoisted_9$1 = {
   key: 2,
   class: "trailing-item-reserve-space"
 };
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
@@ -1689,14 +1735,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$m, [
-          createVNode(_sfc_main$V, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$n, [
+          createVNode(_sfc_main$X, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$f, [
+        createElementVNode("span", _hoisted_3$g, [
           createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
@@ -1707,7 +1753,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.label), 3)
-          ], 8, _hoisted_4$b),
+          ], 8, _hoisted_4$c),
           props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
@@ -1724,29 +1770,29 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             size: "small"
           }, null, 8, ["name"])) : (openBlock(), createElementBlock("span", _hoisted_9$1))
         ])
-      ], 10, _hoisted_1$z);
+      ], 10, _hoisted_1$B);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-822789ec"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-822789ec"]]);
 
-const _sfc_main$T = {  };
+const _sfc_main$V = {  };
 
-const _hoisted_1$y = { class: "kds-list-item-divider" };
+const _hoisted_1$A = { class: "kds-list-item-divider" };
 
 function _sfc_render$8(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$y))
+  return (openBlock(), createElementBlock("hr", _hoisted_1$A))
 }
-const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$T, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
+const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$V, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
 
-const _hoisted_1$x = { class: "kds-list-item-section-title" };
-const _hoisted_2$l = {
+const _hoisted_1$z = { class: "kds-list-item-section-title" };
+const _hoisted_2$m = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$e = ["title"];
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _hoisted_3$f = ["title"];
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -1757,8 +1803,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$z, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$m, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -1769,18 +1815,18 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$e)
+        }, toDisplayString(props.label), 9, _hoisted_3$f)
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-53382531"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-53382531"]]);
 
-const _hoisted_1$w = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
-const _hoisted_2$k = ["role"];
+const _hoisted_1$y = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_2$l = ["role"];
 const loadingStateText = "Loading entries";
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
@@ -2050,21 +2096,21 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             headline: __props.loading ? loadingStateText : __props.emptyText,
             "loading-spinner": __props.loading
           }, null, 8, ["headline", "loading-spinner"])
-        ], 8, _hoisted_2$k)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$w);
+        ], 8, _hoisted_2$l)) : createCommentVNode("", true)
+      ], 16, _hoisted_1$y);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-d8750fc1"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$T, [["__scopeId", "data-v-d8750fc1"]]);
 
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsListContainer
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _hoisted_1$v = { class: "kds-menu-container" };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$x = { class: "kds-menu-container" };
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
     id: {},
@@ -2088,7 +2134,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createVNode(KdsListContainer, {
           id: props.id,
           ref_key: "listContainerEl",
@@ -2105,14 +2151,14 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$Q, [["__scopeId", "data-v-d87656d8"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-d87656d8"]]);
 
-const _hoisted_1$u = ["id", "popover", "role"];
-const _hoisted_2$j = {
+const _hoisted_1$w = ["id", "popover", "role"];
+const _hoisted_2$k = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     placement: { default: "bottom-left" },
@@ -2156,21 +2202,21 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$j, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$k, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
-      ], 46, _hoisted_1$u);
+      ], 46, _hoisted_1$w);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["__scopeId", "data-v-83c11cee"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-83c11cee"]]);
 
 const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsPopover
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2218,7 +2264,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$Y, mergeProps({
+        createVNode(_sfc_main$_, mergeProps({
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event)
         }, toggleButtonProps.value, {
@@ -2252,7 +2298,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "KdsSplitButton",
   props: {
     size: { default: "medium" },
@@ -2339,7 +2385,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSplitButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["__scopeId", "data-v-f9ca012e"]]);
+const KdsSplitButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["__scopeId", "data-v-f9ca012e"]]);
 
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -2355,9 +2401,9 @@ const kdsButtonVariant = {
 };
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
-const _hoisted_1$t = { class: "kds-label-wrapper" };
-const _hoisted_2$i = ["id", "for", "title"];
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$v = { class: "kds-label-wrapper" };
+const _hoisted_2$j = ["id", "for", "title"];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -2374,7 +2420,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -2382,7 +2428,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$i),
+        }, toDisplayString(props.label), 9, _hoisted_2$j),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -2393,11 +2439,11 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["__scopeId", "data-v-13bea091"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$O, [["__scopeId", "data-v-13bea091"]]);
 
-const _hoisted_1$s = ["id"];
-const _hoisted_2$h = { class: "subtext-text" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = ["id"];
+const _hoisted_2$i = { class: "subtext-text" };
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -2428,27 +2474,27 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$h, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$s)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$i, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$u)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["__scopeId", "data-v-2e6ba10c"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$N, [["__scopeId", "data-v-2e6ba10c"]]);
 
-const _hoisted_1$r = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$g = { class: "control" };
-const _hoisted_3$d = {
+const _hoisted_1$t = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$h = { class: "control" };
+const _hoisted_3$e = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$a = { class: "label" };
+const _hoisted_4$b = { class: "label" };
 const _hoisted_5$6 = ["id"];
 const _hoisted_6$4 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2521,7 +2567,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$g, [
+          createElementVNode("div", _hoisted_2$h, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -2529,15 +2575,15 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
-            createElementVNode("div", _hoisted_4$a, toDisplayString(props.label), 1),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$e, [
+            createElementVNode("div", _hoisted_4$b, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
               class: "helper-text"
             }, toDisplayString(props.helperText), 9, _hoisted_5$6)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$r),
+        ], 10, _hoisted_1$t),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -2551,9 +2597,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["__scopeId", "data-v-7bfc5667"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["__scopeId", "data-v-7bfc5667"]]);
 
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2583,11 +2629,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$q = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
-const _hoisted_2$f = ["id"];
-const _hoisted_3$c = ["title"];
-const _hoisted_4$9 = { class: "kds-fieldset-content" };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby"];
+const _hoisted_2$g = ["id"];
+const _hoisted_3$d = ["title"];
+const _hoisted_4$a = { class: "kds-fieldset-content" };
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "BaseFieldsetWrapper",
   props: {
     id: {},
@@ -2633,14 +2679,14 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             ref: legendTextEl,
             class: "legend-text",
             title: unref(isTruncated) ? props.label : void 0
-          }, toDisplayString(props.label), 9, _hoisted_3$c),
+          }, toDisplayString(props.label), 9, _hoisted_3$d),
           props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
             key: 0,
             content: props.description,
             hidden: !isHovered.value
           }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
-        ], 8, _hoisted_2$f)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_4$9, [
+        ], 8, _hoisted_2$g)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_4$a, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
         createVNode(KdsSubText, {
@@ -2650,14 +2696,14 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           validating: props.validating,
           "preserve-sub-text-space": props.preserveSubTextSpace
         }, null, 8, ["id", "sub-text", "error", "validating", "preserve-sub-text-space"])
-      ], 40, _hoisted_1$q);
+      ], 40, _hoisted_1$s);
     };
   }
 });
 
-const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["__scopeId", "data-v-a44731da"]]);
+const BaseFieldsetWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["__scopeId", "data-v-a44731da"]]);
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2736,7 +2782,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-c6536296"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["__scopeId", "data-v-c6536296"]]);
 
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -2752,19 +2798,19 @@ const kdsCheckboxValue = {
 };
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
 
-const _hoisted_1$p = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$e = { class: "control" };
-const _hoisted_3$b = {
+const _hoisted_1$r = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$f = { class: "control" };
+const _hoisted_3$c = {
   key: 0,
   class: "dot",
   viewBox: "0 0 2 2",
   "aria-hidden": "true",
   focusable: "false"
 };
-const _hoisted_4$8 = { class: "content" };
+const _hoisted_4$9 = { class: "content" };
 const _hoisted_5$5 = { class: "label" };
 const _hoisted_6$3 = ["id"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -2804,8 +2850,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$e, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$b, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$f, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$c, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -2813,7 +2859,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             }, null, -1)
           ])])) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_4$8, [
+        createElementVNode("div", _hoisted_4$9, [
           createElementVNode("div", _hoisted_5$5, toDisplayString(props.text), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -2821,12 +2867,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             class: "helper-text"
           }, toDisplayString(props.helperText), 9, _hoisted_6$3)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$p);
+      ], 10, _hoisted_1$r);
     };
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["__scopeId", "data-v-f4f6392a"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["__scopeId", "data-v-f4f6392a"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -2948,7 +2994,7 @@ const useRadioSelection = ({
   };
 };
 
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3023,10 +3069,10 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-d78ed4a2"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-d78ed4a2"]]);
 
-const _hoisted_1$o = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -3076,12 +3122,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$o);
+      ], 10, _hoisted_1$q);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-5c6f0f1f"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["__scopeId", "data-v-5c6f0f1f"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -3132,7 +3178,7 @@ const useValueSwitchIconHiding = ({
   };
 };
 
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3219,7 +3265,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$D, [["__scopeId", "data-v-640271e0"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-640271e0"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -3239,7 +3285,7 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
 
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -3291,18 +3337,18 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-5d99c134"]]);
 
-const _hoisted_1$n = {
+const _hoisted_1$p = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$d = {
+const _hoisted_2$e = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$a = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
-const _hoisted_4$7 = ["aria-disabled"];
+const _hoisted_3$b = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
+const _hoisted_4$8 = ["aria-disabled"];
 const _hoisted_5$4 = {
   key: 4,
   class: "trailing-slot"
@@ -3311,7 +3357,7 @@ const _hoisted_6$2 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -3390,13 +3436,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$p, [
           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$d, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -3432,7 +3478,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
           onKeydown: _cache[2] || (_cache[2] = ($event) => emit("keydown", $event)),
           onClick: _cache[3] || (_cache[3] = ($event) => emit("click", $event))
-        }, null, 42, _hoisted_3$a),
+        }, null, 42, _hoisted_3$b),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -3441,8 +3487,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$7)) : createCommentVNode("", true),
-        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$$, {
+        }, toDisplayString(props.unit), 11, _hoisted_4$8)) : createCommentVNode("", true),
+        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$11, {
           key: 3,
           class: "clear-button",
           type: "button",
@@ -3466,7 +3512,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-92291903"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$D, [["__scopeId", "data-v-92291903"]]);
 
 const usePointerHandler = (updateFromEvent) => {
   const activePointerId = ref(null);
@@ -3506,8 +3552,141 @@ const usePointerHandler = (updateFromEvent) => {
   };
 };
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
-  __name: "KdsTextInput",
+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 = /^[-+]?(\d+)(?:\.(\d+))?e([+-]?\d+)$/i.exec(exp);
+  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 Number.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 parseWithLocaleDecimal = (input, localeDecimal) => {
+    const withoutGrouping = removeGroupingSeparators(input);
+    const normalized = withoutGrouping.split(localeDecimal).join(".");
+    if (!isValidNormalizedNumber(normalized)) {
+      return Number.NaN;
+    }
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : Number.NaN;
+  };
+  const parseWithFallbackDot = (input) => {
+    const lastDotIndex = input.lastIndexOf(".");
+    const digitsAfterDot = input.slice(lastDotIndex + 1);
+    const looksLikeDecimal = digitsAfterDot.length > 0 && digitsAfterDot.length <= 2;
+    const normalized = looksLikeDecimal ? `${removeGroupingSeparators(input.slice(0, lastDotIndex))}.${removeGroupingSeparators(
+      digitsAfterDot
+    )}` : removeGroupingSeparators(input);
+    if (!isValidNormalizedNumber(normalized)) {
+      return Number.NaN;
+    }
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : Number.NaN;
+  };
+  const parseWithoutLocaleDecimal = (input) => {
+    const normalized = removeGroupingSeparators(input);
+    if (!isValidNormalizedNumber(normalized)) {
+      return Number.NaN;
+    }
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : Number.NaN;
+  };
+  function parseFromInput(value) {
+    const trimmed = value.trim();
+    if (trimmed.length === 0) {
+      return Number.NaN;
+    }
+    const localeDecimal = decimalSeparator;
+    const hasLocaleDecimal = localeDecimal.length > 0 && trimmed.includes(localeDecimal);
+    if (hasLocaleDecimal) {
+      return parseWithLocaleDecimal(trimmed, localeDecimal);
+    }
+    if (localeDecimal !== "." && trimmed.includes(".")) {
+      return parseWithFallbackDot(trimmed);
+    }
+    return parseWithoutLocaleDecimal(trimmed);
+  }
+  return {
+    locale: params.locale,
+    decimalSeparator,
+    groupSeparator,
+    stepFractionDigits,
+    formatForDisplay,
+    parseFromInput,
+    roundToStep
+  };
+};
+
+const REPEAT_INITIAL_DELAY_MS = 400;
+const REPEAT_INTERVAL_MS = 100;
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
     label: {},
@@ -3520,32 +3699,254 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     placeholder: {},
     disabled: { type: Boolean, default: false },
     autocomplete: {},
-    suggestions: {},
-    suggestionsHeadline: {}
+    unit: { default: "" },
+    min: {},
+    max: {},
+    step: { default: 1 }
   }, {
-    "modelValue": { default: "" },
+    "modelValue": { default: Number.NaN },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace"]);
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "unit", "step"]);
     const modelValue = useModel(__props, "modelValue");
-    const baseInput = useTemplateRef("baseInput");
-    const popoverRef = useTemplateRef("popoverRef");
-    const listContainerRef = useTemplateRef("listContainerRef");
-    const popoverOpen = ref(false);
     const isFocused = ref(false);
-    const hasSuggestions = computed(() => Boolean(props.suggestions?.length));
-    const filteredSuggestions = computed(() => {
-      if (!props.suggestions) {
-        return [];
-      }
-      const query = modelValue.value.trim().toLowerCase();
-      const suggestionOptions = props.suggestions.filter((s) => query.length === 0 || s.toLowerCase().includes(query)).map((s, index) => ({
-        id: String(index),
-        text: s
-      }));
-      if (props.suggestionsHeadline && suggestionOptions.length > 0) {
+    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(
+      () => modelValue.value,
+      (next) => {
+        if (isFocused.value) {
+          return;
+        }
+        localValue.value = numberParser.value.formatForDisplay(next);
+      },
+      { immediate: true }
+    );
+    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 baseInput = useTemplateRef("baseInput");
+    let repeatTimer = null;
+    let isStepping = false;
+    const handleBlur = () => {
+      if (isStepping) {
+        baseInput.value?.focus();
+        return;
+      }
+      isFocused.value = false;
+      const parsed = numberParser.value.parseFromInput(localValue.value);
+      const normalized = clamp(parsed);
+      modelValue.value = normalized;
+      localValue.value = numberParser.value.formatForDisplay(normalized);
+    };
+    const stopRepeating = () => {
+      if (repeatTimer !== null) {
+        clearTimeout(repeatTimer);
+        repeatTimer = null;
+      }
+      isStepping = false;
+    };
+    const startRepeating = (direction) => {
+      stopRepeating();
+      isStepping = true;
+      adjustByStep(direction);
+      repeatTimer = setTimeout(function tick() {
+        adjustByStep(direction);
+        repeatTimer = setTimeout(tick, REPEAT_INTERVAL_MS);
+      }, REPEAT_INITIAL_DELAY_MS);
+    };
+    onBeforeUnmount(stopRepeating);
+    const handleButtonClick = (direction, event) => {
+      if (event.detail !== 0) {
+        return;
+      }
+      adjustByStep(direction);
+    };
+    __expose({
+      focus: () => baseInput.value?.focus()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
+      }), {
+        default: withCtx((slotProps) => [
+          createVNode(BaseInput, mergeProps({
+            ref_key: "baseInput",
+            ref: baseInput
+          }, slotProps, {
+            "model-value": localValue.value,
+            type: "text",
+            inputmode: Number.isInteger(__props.step) ? "numeric" : "decimal",
+            placeholder: props.placeholder,
+            disabled: __props.disabled,
+            error: __props.error,
+            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[4] || (_cache[4] = ($event) => isFocused.value = true),
+            onBlur: handleBlur
+          }), {
+            trailing: withCtx(() => [
+              createVNode(_sfc_main$11, {
+                type: "button",
+                size: "xsmall",
+                variant: "outlined",
+                "leading-icon": "minus",
+                ariaLabel: `Decrease ${props.label ?? props.ariaLabel}`,
+                disabled: !canDecrease.value,
+                onClick: _cache[0] || (_cache[0] = ($event) => handleButtonClick(-1, $event)),
+                onPointerdown: _cache[1] || (_cache[1] = ($event) => startRepeating(-1)),
+                onPointerup: stopRepeating,
+                onPointerleave: stopRepeating,
+                onPointercancel: stopRepeating
+              }, null, 8, ["ariaLabel", "disabled"]),
+              createVNode(_sfc_main$11, {
+                type: "button",
+                size: "xsmall",
+                variant: "outlined",
+                "leading-icon": "plus",
+                ariaLabel: `Increase ${props.label ?? props.ariaLabel}`,
+                disabled: !canIncrease.value,
+                onClick: _cache[2] || (_cache[2] = ($event) => handleButtonClick(1, $event)),
+                onPointerdown: _cache[3] || (_cache[3] = ($event) => startRepeating(1)),
+                onPointerup: stopRepeating,
+                onPointerleave: stopRepeating,
+                onPointercancel: stopRepeating
+              }, null, 8, ["ariaLabel", "disabled"])
+            ]),
+            _: 1
+          }, 16, ["model-value", "inputmode", "placeholder", "disabled", "error", "autocomplete", "unit", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"])
+        ]),
+        _: 1
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
+    };
+  }
+});
+
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
+  __name: "KdsTextInput",
+  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: {},
+    suggestions: {},
+    suggestionsHeadline: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace"]);
+    const modelValue = useModel(__props, "modelValue");
+    const baseInput = useTemplateRef("baseInput");
+    const popoverRef = useTemplateRef("popoverRef");
+    const listContainerRef = useTemplateRef("listContainerRef");
+    const popoverOpen = ref(false);
+    const isFocused = ref(false);
+    const hasSuggestions = computed(() => Boolean(props.suggestions?.length));
+    const filteredSuggestions = computed(() => {
+      if (!props.suggestions) {
+        return [];
+      }
+      const query = modelValue.value.trim().toLowerCase();
+      const suggestionOptions = props.suggestions.filter((s) => query.length === 0 || s.toLowerCase().includes(query)).map((s, index) => ({
+        id: String(index),
+        text: s
+      }));
+      if (props.suggestionsHeadline && suggestionOptions.length > 0) {
         suggestionOptions.unshift({
           id: "suggestion-headline-id",
           text: props.suggestionsHeadline,
@@ -3676,7 +4077,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$A, [["__scopeId", "data-v-1740ce83"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-1740ce83"]]);
 
 const HEX_RADIX = 16;
 const RGB_MAX = 255;
@@ -3693,6 +4094,9 @@ 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 HEX_ALPHA_START = HEX_BLUE_START + HEX_PAIR_LENGTH;
+const FULL_HEX_COLOR_LENGTH = 9;
+const HEX_WITH_HASH_LENGTH$1 = 7;
 const clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
 const round$1 = (value) => Math.round(value);
 const padHex = (value) => value.toString(HEX_RADIX).padStart(2, "0");
@@ -3706,12 +4110,16 @@ const normalizeHexColor = (value) => {
     const [r, g, b] = withoutHash.split("");
     return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
   }
-  if (/^[0-9a-fA-F]{6}$/.test(withoutHash)) {
+  if (/^[0-9a-fA-F]{4}$/.test(withoutHash)) {
+    const [r, g, b, a] = withoutHash.split("");
+    return `#${r}${r}${g}${g}${b}${b}${a}${a}`.toUpperCase();
+  }
+  if (/^([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(withoutHash)) {
     return `#${withoutHash}`.toUpperCase();
   }
   return null;
 };
-const hexToRgb = (hex) => {
+const hexToRgba = (hex) => {
   const normalized = normalizeHexColor(hex);
   if (!normalized) {
     return null;
@@ -3728,7 +4136,12 @@ const hexToRgb = (hex) => {
     normalized.slice(HEX_BLUE_START, HEX_BLUE_START + HEX_PAIR_LENGTH),
     HEX_RADIX
   );
-  return { r, g, b };
+  const hasAlpha = normalized.length === FULL_HEX_COLOR_LENGTH;
+  const a = hasAlpha ? Number.parseInt(
+    normalized.slice(HEX_ALPHA_START, HEX_ALPHA_START + HEX_PAIR_LENGTH),
+    HEX_RADIX
+  ) / RGB_MAX : 1;
+  return { r, g, b, a };
 };
 const rgbToHex = ({ r, g, b }) => {
   const rr = clamp$1(round$1(r), 0, RGB_MAX);
@@ -3736,6 +4149,10 @@ const rgbToHex = ({ r, g, b }) => {
   const bb = clamp$1(round$1(b), 0, RGB_MAX);
   return `#${padHex(rr)}${padHex(gg)}${padHex(bb)}`.toUpperCase();
 };
+const rgbaToHex = ({ r, g, b, a }) => {
+  const alpha = clamp$1(round$1(a * RGB_MAX), 0, RGB_MAX);
+  return `${rgbToHex({ r, g, b })}${padHex(alpha)}`.toUpperCase();
+};
 const rgbToHsv = ({ r, g, b }) => {
   const rr = clamp$1(r / RGB_MAX, 0, 1);
   const gg = clamp$1(g / RGB_MAX, 0, 1);
@@ -3796,46 +4213,153 @@ const hsvToRgb = ({ h, s, v }) => {
     b: round$1((bPrime + m) * RGB_MAX)
   };
 };
-const hsvToHex = (hsv) => rgbToHex(hsvToRgb(hsv));
+const removeAlphaFromHexInput = (next) => {
+  const trimmed = next.trim();
+  const hasHash = trimmed.startsWith("#");
+  const withoutHash = hasHash ? trimmed.slice(1) : trimmed;
+  if (/^[0-9a-fA-F]{8}$/.test(withoutHash)) {
+    const rgbWithoutAlpha = withoutHash.slice(0, HEX_WITH_HASH_LENGTH$1 - 1);
+    return hasHash ? `#${rgbWithoutAlpha}` : rgbWithoutAlpha;
+  }
+  return next;
+};
 
-const _hoisted_1$m = { class: "kds-color-picker" };
-const _hoisted_2$c = ["aria-valuetext"];
-const _hoisted_3$9 = ["aria-valuenow", "aria-valuetext"];
-const DEFAULT_HUE_DEG = 270;
-const DEFAULT_SATURATION = 0.8;
-const DEFAULT_VALUE = 0.9;
-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$z = /* @__PURE__ */ defineComponent({
-  __name: "ColorPicker",
-  props: {
-    "modelValue": { default: "" },
-    "modelModifiers": {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props) {
+const _hoisted_1$o = ["aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"];
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  __name: "ColorPickerSlider",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    valueNow: {},
+    valueMin: {},
+    valueMax: {},
+    valueText: {},
+    min: {},
+    max: {},
+    step: {},
+    largeStep: {}
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v087094b8": handlePosition.value
+    }));
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const sliderEl = useTemplateRef("sliderEl");
+    const setFromPointerEvent = (event) => {
+      const el = sliderEl.value;
+      if (!el) {
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const x = (event.clientX - rect.left) / rect.width;
+      const ratio = clamp$1(x, 0, 1);
+      modelValue.value = props.min + ratio * (props.max - props.min);
+    };
+    const { onPointerDown, onPointerMove, onPointerUp } = usePointerHandler(setFromPointerEvent);
+    const onKeyDown = (event) => {
+      const delta = event.shiftKey ? props.largeStep : props.step;
+      let handled = true;
+      switch (event.key) {
+        case "ArrowLeft":
+          modelValue.value = clamp$1(modelValue.value - delta, props.min, props.max);
+          break;
+        case "ArrowRight":
+          modelValue.value = clamp$1(modelValue.value + delta, props.min, props.max);
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+      }
+    };
+    const handlePosition = computed(() => {
+      const ratio = (modelValue.value - props.min) / (props.max - props.min);
+      return `${clamp$1(ratio, 0, 1) * 100}%`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "sliderEl",
+        ref: sliderEl,
+        class: "kds-color-picker-slider",
+        role: "slider",
+        "aria-label": __props.label,
+        "aria-valuenow": __props.valueNow,
+        "aria-valuemin": __props.valueMin,
+        "aria-valuemax": __props.valueMax,
+        "aria-valuetext": __props.valueText,
+        tabindex: "0",
+        onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(onPointerDown) && unref(onPointerDown)(...args)),
+        onPointermove: _cache[1] || (_cache[1] = withModifiers(
+          //@ts-ignore
+          (...args) => unref(onPointerMove) && unref(onPointerMove)(...args),
+          ["prevent"]
+        )),
+        onPointerup: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => unref(onPointerUp) && unref(onPointerUp)(...args)),
+        onPointercancel: _cache[3] || (_cache[3] = //@ts-ignore
+        (...args) => unref(onPointerUp) && unref(onPointerUp)(...args)),
+        onLostpointercapture: _cache[4] || (_cache[4] = //@ts-ignore
+        (...args) => unref(onPointerUp) && unref(onPointerUp)(...args)),
+        onKeydown: onKeyDown
+      }, [..._cache[5] || (_cache[5] = [
+        createElementVNode("div", { class: "handle" }, null, -1)
+      ])], 40, _hoisted_1$o);
+    };
+  }
+});
+
+const ColorPickerSlider = /* @__PURE__ */ _export_sfc$1(_sfc_main$A, [["__scopeId", "data-v-f4be2bd4"]]);
+
+const _hoisted_1$n = { class: "kds-color-picker" };
+const _hoisted_2$d = ["aria-valuetext"];
+const _hoisted_3$a = { class: "value-inputs" };
+const DEFAULT_HUE_DEG = 270;
+const DEFAULT_SATURATION = 0.8;
+const DEFAULT_VALUE = 0.9;
+const DEFAULT_ALPHA = 1;
+const HUE_MAX_DEG = 360;
+const HUE_MAX_EXCLUSIVE_DEG = 359.999;
+const PERCENT = 100;
+const HEX_WITH_HASH_LENGTH = 7;
+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$z = /* @__PURE__ */ defineComponent({
+  __name: "ColorPicker",
+  props: {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v535b907d": alphaBackgroundImage.value
+    }));
     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 alpha = ref(DEFAULT_ALPHA);
     const hasPendingInternalModelUpdate = ref(false);
-    const syncFromModelValue = (next) => {
-      const rgb = hexToRgb(next);
-      if (!rgb) {
+    const updateHsvFromHex = (hex) => {
+      const rgba = hexToRgba(hex);
+      if (!rgba) {
         return;
       }
-      const hsv = rgbToHsv(rgb);
+      const hsv = rgbToHsv(rgba);
       hue.value = hsv.h;
       saturation.value = hsv.s;
       value.value = hsv.v;
+      alpha.value = rgba.a;
     };
     watch(
       () => modelValue.value,
@@ -3844,17 +4368,25 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           hasPendingInternalModelUpdate.value = false;
           return;
         }
-        syncFromModelValue(next);
+        updateHsvFromHex(next);
       },
       { immediate: true }
     );
-    const currentHex = computed(
-      () => hsvToHex({
+    const hexInputValue = computed(() => removeAlphaFromHexInput(modelValue.value));
+    const currentRgb = computed(
+      () => hsvToRgb({
         h: hue.value,
         s: saturation.value,
         v: value.value
       })
     );
+    const currentHex = computed(() => {
+      const hex = rgbaToHex({
+        ...currentRgb.value,
+        a: alpha.value
+      });
+      return alpha.value === DEFAULT_ALPHA ? hex.slice(0, HEX_WITH_HASH_LENGTH) : hex;
+    });
     const hueRgb = computed(() => hsvToRgb({ h: hue.value, s: 1, v: 1 }));
     const colorspaceBackground = computed(() => {
       const { r, g, b } = hueRgb.value;
@@ -3866,9 +4398,16 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       left: `${saturation.value * 100}%`,
       top: `${(1 - value.value) * 100}%`
     }));
-    const hueHandleStyle = computed(() => ({
-      left: `${hue.value / HUE_MAX_DEG * PERCENT}%`
-    }));
+    const alphaBackgroundImage = computed(() => {
+      const { r, g, b } = currentRgb.value;
+      return `
+    linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgb(${r}, ${g}, ${b})),
+    repeating-conic-gradient(
+      var(--kds-color-background-neutral-active) 0 25%,
+      var(--kds-color-surface-default) 0 50%
+    )
+  `;
+    });
     const setModelValueFromHsv = () => {
       hasPendingInternalModelUpdate.value = true;
       modelValue.value = currentHex.value;
@@ -3881,18 +4420,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       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 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));
+      saturation.value = clamp$1(x, 0, 1);
+      value.value = 1 - clamp$1(y, 0, 1);
       setModelValueFromHsv();
     };
     const {
@@ -3900,18 +4429,22 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       onPointerMove: onColorspacePointerMove,
       onPointerUp: onColorspacePointerUp
     } = usePointerHandler(updateFromColorspaceEvent);
-    const {
-      onPointerDown: onHuePointerDown,
-      onPointerMove: onHuePointerMove,
-      onPointerUp: onHuePointerUp
-    } = usePointerHandler(updateFromHueEvent);
     const updateFromTextValue = (next) => {
       modelValue.value = next;
-      const normalized = normalizeHexColor(next);
+    };
+    const onHexInputFocusOut = () => {
+      const normalized = normalizeHexColor(modelValue.value);
       if (normalized) {
-        syncFromModelValue(normalized);
+        modelValue.value = normalized;
       }
     };
+    const updateFromAlphaNumberInput = (next) => {
+      if (!Number.isFinite(next)) {
+        return;
+      }
+      alpha.value = clamp$1(next / PERCENT, 0, 1);
+      setModelValueFromHsv();
+    };
     const saturationPercent = computed(
       () => Math.round(saturation.value * PERCENT)
     );
@@ -3920,6 +4453,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       () => `Saturation ${saturationPercent.value} percent, brightness ${valuePercent.value} percent`
     );
     const hueValueText = computed(() => `${Math.round(hue.value)} degrees`);
+    const alphaPercent = computed(() => Math.round(alpha.value * PERCENT));
+    const alphaValueText = computed(() => `${alphaPercent.value} percent`);
     const onColorspaceKeyDown = (event) => {
       const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
       let handled = true;
@@ -3944,26 +4479,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
         setModelValueFromHsv();
       }
     };
-    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$1(hue.value - step, 0, HUE_MAX_EXCLUSIVE_DEG);
-          break;
-        case "ArrowRight":
-          hue.value = clamp$1(hue.value + step, 0, HUE_MAX_EXCLUSIVE_DEG);
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        event.preventDefault();
-        setModelValueFromHsv();
-      }
-    };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", {
           ref_key: "colorspaceEl",
           ref: colorspaceEl,
@@ -3974,11 +4491,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           "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"]
-          )),
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => unref(onColorspacePointerDown) && unref(onColorspacePointerDown)(...args)),
           onPointermove: _cache[1] || (_cache[1] = withModifiers(
             //@ts-ignore
             (...args) => unref(onColorspacePointerMove) && unref(onColorspacePointerMove)(...args),
@@ -3994,57 +4508,74 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$c),
-        createElementVNode("div", {
-          ref_key: "hueEl",
-          ref: hueEl,
+        ], 44, _hoisted_2$d),
+        createVNode(ColorPickerSlider, {
+          modelValue: hue.value,
+          "onUpdate:modelValue": [
+            _cache[4] || (_cache[4] = ($event) => hue.value = $event),
+            setModelValueFromHsv
+          ],
           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"]
-          )),
-          onLostpointercapture: _cache[6] || (_cache[6] = //@ts-ignore
-          (...args) => unref(onHuePointerUp) && unref(onHuePointerUp)(...args)),
-          onPointerup: _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$9),
-        createVNode(KdsTextInput, {
-          "model-value": modelValue.value,
-          ariaLabel: "Color hex value",
-          placeholder: "#FFFFFF",
-          "onUpdate:modelValue": updateFromTextValue
-        }, null, 8, ["model-value"])
+          label: "Hue",
+          "value-now": Math.round(hue.value),
+          "value-min": 0,
+          "value-max": HUE_MAX_DEG,
+          "value-text": hueValueText.value,
+          min: 0,
+          max: HUE_MAX_EXCLUSIVE_DEG,
+          step: HUE_KEYBOARD_STEP_DEG,
+          "large-step": HUE_KEYBOARD_LARGE_STEP_DEG
+        }, null, 8, ["modelValue", "value-now", "value-text"]),
+        createVNode(ColorPickerSlider, {
+          modelValue: alpha.value,
+          "onUpdate:modelValue": [
+            _cache[5] || (_cache[5] = ($event) => alpha.value = $event),
+            setModelValueFromHsv
+          ],
+          class: "alpha",
+          label: "Alpha",
+          "value-now": alphaPercent.value,
+          "value-min": 0,
+          "value-max": PERCENT,
+          "value-text": alphaValueText.value,
+          min: 0,
+          max: 1,
+          step: KEYBOARD_STEP,
+          "large-step": KEYBOARD_LARGE_STEP
+        }, null, 8, ["modelValue", "value-now", "value-text"]),
+        createElementVNode("div", _hoisted_3$a, [
+          createVNode(KdsTextInput, {
+            "model-value": hexInputValue.value,
+            ariaLabel: "Color hex value",
+            placeholder: "#FFFFFF",
+            "onUpdate:modelValue": updateFromTextValue,
+            onFocusout: onHexInputFocusOut
+          }, null, 8, ["model-value"]),
+          createVNode(_sfc_main$C, {
+            "model-value": alphaPercent.value,
+            ariaLabel: "Alpha percentage",
+            min: 0,
+            max: PERCENT,
+            step: 1,
+            unit: "%",
+            "onUpdate:modelValue": updateFromAlphaNumberInput
+          }, null, 8, ["model-value"])
+        ])
       ]);
     };
   }
 });
 
-const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-d2bb72e0"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-2daeaa68"]]);
 
 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 HEX_LENGTH_8 = 8;
+const FULLY_OPAQUE_ALPHA_SUFFIX = "FF";
+const normalizeOpaqueAlpha = (normalizedHexWithHash) => normalizedHexWithHash.length === HEX_LENGTH_8 + 1 && normalizedHexWithHash.endsWith(FULLY_OPAQUE_ALPHA_SUFFIX) ? normalizedHexWithHash.slice(0, HEX_LENGTH_6 + 1) : normalizedHexWithHash;
 const normalize = (value, fallbackValue) => {
   const trimmed = value.trim();
   if (trimmed.length === 0) {
@@ -4060,13 +4591,22 @@ const normalize = (value, fallbackValue) => {
   if (withoutHash.length === HEX_LENGTH_2) {
     return `#${withoutHash.repeat(HEX_LENGTH_3)}`.toUpperCase();
   }
-  if (withoutHash.length === HEX_LENGTH_3 || withoutHash.length === HEX_LENGTH_4) {
+  if (withoutHash.length === HEX_LENGTH_3) {
     const [r, g, b] = withoutHash;
     return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
   }
+  if (withoutHash.length === HEX_LENGTH_4) {
+    const [r, g, b, a] = withoutHash;
+    return normalizeOpaqueAlpha(
+      `#${r}${r}${g}${g}${b}${b}${a}${a}`.toUpperCase()
+    );
+  }
   if (withoutHash.length === HEX_LENGTH_6) {
     return `#${withoutHash}`.toUpperCase();
   }
+  if (withoutHash.length === HEX_LENGTH_8) {
+    return normalizeOpaqueAlpha(`#${withoutHash}`.toUpperCase());
+  }
   return fallbackValue;
 };
 const useColorInputValidationOnFocusOut = (modelValue) => {
@@ -4075,8 +4615,10 @@ const useColorInputValidationOnFocusOut = (modelValue) => {
     modelValue,
     (value) => {
       const withoutHash = value.startsWith("#") ? value.slice(1) : value;
-      if (/^[0-9a-fA-F]{6}$/.test(withoutHash)) {
-        lastValidHexColor.value = `#${withoutHash.toUpperCase()}`;
+      if ((withoutHash.length === HEX_LENGTH_6 || withoutHash.length === HEX_LENGTH_8) && /^[0-9a-fA-F]+$/.test(withoutHash)) {
+        lastValidHexColor.value = normalizeOpaqueAlpha(
+          `#${withoutHash.toUpperCase()}`
+        );
       }
     },
     { immediate: true }
@@ -4161,7 +4703,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["color", "style"])
               ]),
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$Y), {
+                createVNode(unref(_sfc_main$_), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -4262,7 +4804,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              __props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$Y, {
+              __props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$_, {
                 key: 0,
                 modelValue: showValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showValue.value = $event),
@@ -14143,13 +14685,13 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = {
+const _hoisted_1$m = {
   key: 0,
   class: "vc-time-header"
 };
-const _hoisted_2$b = { class: "vc-time-weekday" };
-const _hoisted_3$8 = { class: "vc-time-month" };
-const _hoisted_4$6 = { class: "vc-time-day" };
+const _hoisted_2$c = { class: "vc-time-weekday" };
+const _hoisted_3$9 = { class: "vc-time-month" };
+const _hoisted_4$7 = { class: "vc-time-day" };
 const _hoisted_5$3 = { class: "vc-time-year" };
 const _hoisted_6$1 = { class: "vc-time-select-group" };
 const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
@@ -14184,10 +14726,10 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
       }, [
         createVNode(_sfc_main$i$1, { name: "time-header" }, {
           default: withCtx(() => [
-            unref(showHeader) && unref(date) ? (openBlock(), createElementBlock("div", _hoisted_1$l, [
-              createElementVNode("span", _hoisted_2$b, toDisplayString(unref(locale).formatDate(unref(date), "WWW")), 1),
-              createElementVNode("span", _hoisted_3$8, toDisplayString(unref(locale).formatDate(unref(date), "MMM")), 1),
-              createElementVNode("span", _hoisted_4$6, toDisplayString(unref(locale).formatDate(unref(date), "D")), 1),
+            unref(showHeader) && unref(date) ? (openBlock(), createElementBlock("div", _hoisted_1$m, [
+              createElementVNode("span", _hoisted_2$c, toDisplayString(unref(locale).formatDate(unref(date), "WWW")), 1),
+              createElementVNode("span", _hoisted_3$9, toDisplayString(unref(locale).formatDate(unref(date), "MMM")), 1),
+              createElementVNode("span", _hoisted_4$7, toDisplayString(unref(locale).formatDate(unref(date), "D")), 1),
               createElementVNode("span", _hoisted_5$3, toDisplayString(unref(locale).formatDate(unref(date), "YYYY")), 1)
             ])) : createCommentVNode("", true)
           ]),
@@ -14485,7 +15027,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             onBlur: onTextInputBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$_, {
                 modelValue: popoverIsVisible.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => popoverIsVisible.value = $event),
                 type: "button",
@@ -14540,7 +15082,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "kds-date-time-format-popover" };
+const _hoisted_1$l = { class: "kds-date-time-format-popover" };
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "DateTimeFormatPopover",
   props: /* @__PURE__ */ mergeModels({
@@ -14679,7 +15221,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       }));
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         modeOptions.value.length > 1 ? (openBlock(), createBlock(KdsValueSwitch, {
           key: 0,
           "model-value": effectiveSelectedMode.value,
@@ -14725,390 +15267,20 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     validating: { type: Boolean, default: false },
     preserveSubTextSpace: { type: Boolean, default: false },
     placeholder: { default: "Format" },
-    disabled: { type: Boolean, default: false },
-    autocomplete: {},
-    allowedFormats: {},
-    allDefaultFormats: {}
-  }, {
-    "modelValue": { default: "" },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "placeholder"]);
-    const modelValue = useModel(__props, "modelValue");
-    const open = ref(false);
-    const popoverEl = useTemplateRef("popoverEl");
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
-        error: __props.error,
-        validating: __props.validating,
-        "preserve-sub-text-space": __props.preserveSubTextSpace
-      }), {
-        default: withCtx((slotProps) => [
-          createElementVNode("div", {
-            style: normalizeStyle(popoverEl.value?.anchorStyle)
-          }, [
-            createVNode(BaseInput, mergeProps(slotProps, {
-              modelValue: modelValue.value,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
-              type: "text",
-              placeholder: __props.placeholder,
-              disabled: __props.disabled,
-              error: __props.error,
-              validating: __props.validating,
-              autocomplete: props.autocomplete
-            }), {
-              trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$Y), {
-                  modelValue: open.value,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
-                  size: "xsmall",
-                  variant: "outlined",
-                  "leading-icon": "date-time",
-                  ariaLabel: "Open date/time format picker",
-                  "aria-controls": popoverEl.value?.popoverId,
-                  "aria-expanded": open.value,
-                  "aria-haspopup": "dialog",
-                  disabled: __props.disabled,
-                  title: open.value ? "Close date/time format picker" : "Open date/time format picker"
-                }, null, 8, ["modelValue", "aria-controls", "aria-expanded", "disabled", "title"])
-              ]),
-              _: 1
-            }, 16, ["modelValue", "placeholder", "disabled", "error", "validating", "autocomplete"]),
-            createVNode(KdsPopover, {
-              ref_key: "popoverEl",
-              ref: popoverEl,
-              modelValue: open.value,
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
-              placement: "bottom-right",
-              "aria-label": "Date time format selection dialog"
-            }, {
-              default: withCtx(() => [
-                createVNode(DateTimeFormatPopover, {
-                  selection: modelValue.value,
-                  "all-default-formats": props.allDefaultFormats,
-                  "allowed-formats": props.allowedFormats,
-                  "onUpdate:selection": _cache[2] || (_cache[2] = ($event) => {
-                    modelValue.value = $event;
-                    open.value = false;
-                  })
-                }, null, 8, ["selection", "all-default-formats", "allowed-formats"])
-              ]),
-              _: 1
-            }, 8, ["modelValue"])
-          ], 4)
-        ]),
-        _: 1
-      }, 16, ["error", "validating", "preserve-sub-text-space"]);
-    };
-  }
-});
-
-const kdsTemporalType = {
-  DATE: "DATE",
-  TIME: "TIME",
-  DATE_TIME: "DATE_TIME",
-  ZONED_DATE_TIME: "ZONED_DATE_TIME"
-};
-const kdsTemporalTypes = Object.values(kdsTemporalType);
-const kdsDateFormatCategory = {
-  RECENT: "RECENT",
-  STANDARD: "STANDARD",
-  EUROPEAN: "EUROPEAN",
-  AMERICAN: "AMERICAN"
-};
-const kdsDateFormatCategories = Object.values(kdsDateFormatCategory);
-
-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 = /^[-+]?(\d+)(?:\.(\d+))?e([+-]?\d+)$/i.exec(exp);
-  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 Number.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 parseWithLocaleDecimal = (input, localeDecimal) => {
-    const withoutGrouping = removeGroupingSeparators(input);
-    const normalized = withoutGrouping.split(localeDecimal).join(".");
-    if (!isValidNormalizedNumber(normalized)) {
-      return Number.NaN;
-    }
-    const parsed = Number.parseFloat(normalized);
-    return Number.isFinite(parsed) ? parsed : Number.NaN;
-  };
-  const parseWithFallbackDot = (input) => {
-    const lastDotIndex = input.lastIndexOf(".");
-    const digitsAfterDot = input.slice(lastDotIndex + 1);
-    const looksLikeDecimal = digitsAfterDot.length > 0 && digitsAfterDot.length <= 2;
-    const normalized = looksLikeDecimal ? `${removeGroupingSeparators(input.slice(0, lastDotIndex))}.${removeGroupingSeparators(
-      digitsAfterDot
-    )}` : removeGroupingSeparators(input);
-    if (!isValidNormalizedNumber(normalized)) {
-      return Number.NaN;
-    }
-    const parsed = Number.parseFloat(normalized);
-    return Number.isFinite(parsed) ? parsed : Number.NaN;
-  };
-  const parseWithoutLocaleDecimal = (input) => {
-    const normalized = removeGroupingSeparators(input);
-    if (!isValidNormalizedNumber(normalized)) {
-      return Number.NaN;
-    }
-    const parsed = Number.parseFloat(normalized);
-    return Number.isFinite(parsed) ? parsed : Number.NaN;
-  };
-  function parseFromInput(value) {
-    const trimmed = value.trim();
-    if (trimmed.length === 0) {
-      return Number.NaN;
-    }
-    const localeDecimal = decimalSeparator;
-    const hasLocaleDecimal = localeDecimal.length > 0 && trimmed.includes(localeDecimal);
-    if (hasLocaleDecimal) {
-      return parseWithLocaleDecimal(trimmed, localeDecimal);
-    }
-    if (localeDecimal !== "." && trimmed.includes(".")) {
-      return parseWithFallbackDot(trimmed);
-    }
-    return parseWithoutLocaleDecimal(trimmed);
-  }
-  return {
-    locale: params.locale,
-    decimalSeparator,
-    groupSeparator,
-    stepFractionDigits,
-    formatForDisplay,
-    parseFromInput,
-    roundToStep
-  };
-};
-
-const REPEAT_INITIAL_DELAY_MS = 400;
-const REPEAT_INTERVAL_MS = 100;
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  __name: "KdsNumberInput",
-  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: {},
-    unit: { default: "" },
-    min: {},
-    max: {},
-    step: { default: 1 }
-  }, {
-    "modelValue": { default: Number.NaN },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props, { expose: __expose }) {
-    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "unit", "step"]);
-    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(
-      () => modelValue.value,
-      (next) => {
-        if (isFocused.value) {
-          return;
-        }
-        localValue.value = numberParser.value.formatForDisplay(next);
-      },
-      { immediate: true }
-    );
-    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 baseInput = useTemplateRef("baseInput");
-    let repeatTimer = null;
-    let isStepping = false;
-    const handleBlur = () => {
-      if (isStepping) {
-        baseInput.value?.focus();
-        return;
-      }
-      isFocused.value = false;
-      const parsed = numberParser.value.parseFromInput(localValue.value);
-      const normalized = clamp(parsed);
-      modelValue.value = normalized;
-      localValue.value = numberParser.value.formatForDisplay(normalized);
-    };
-    const stopRepeating = () => {
-      if (repeatTimer !== null) {
-        clearTimeout(repeatTimer);
-        repeatTimer = null;
-      }
-      isStepping = false;
-    };
-    const startRepeating = (direction) => {
-      stopRepeating();
-      isStepping = true;
-      adjustByStep(direction);
-      repeatTimer = setTimeout(function tick() {
-        adjustByStep(direction);
-        repeatTimer = setTimeout(tick, REPEAT_INTERVAL_MS);
-      }, REPEAT_INITIAL_DELAY_MS);
-    };
-    onBeforeUnmount(stopRepeating);
-    const handleButtonClick = (direction, event) => {
-      if (event.detail !== 0) {
-        return;
-      }
-      adjustByStep(direction);
-    };
-    __expose({
-      focus: () => baseInput.value?.focus()
-    });
+    disabled: { type: Boolean, default: false },
+    autocomplete: {},
+    allowedFormats: {},
+    allDefaultFormats: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "placeholder"]);
+    const modelValue = useModel(__props, "modelValue");
+    const open = ref(false);
+    const popoverEl = useTemplateRef("popoverEl");
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
         error: __props.error,
@@ -15116,58 +15288,58 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         "preserve-sub-text-space": __props.preserveSubTextSpace
       }), {
         default: withCtx((slotProps) => [
-          createVNode(BaseInput, mergeProps({
-            ref_key: "baseInput",
-            ref: baseInput
-          }, slotProps, {
-            "model-value": localValue.value,
-            type: "text",
-            inputmode: Number.isInteger(__props.step) ? "numeric" : "decimal",
-            placeholder: props.placeholder,
-            disabled: __props.disabled,
-            error: __props.error,
-            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[4] || (_cache[4] = ($event) => isFocused.value = true),
-            onBlur: handleBlur
-          }), {
-            trailing: withCtx(() => [
-              createVNode(_sfc_main$$, {
-                type: "button",
-                size: "xsmall",
-                variant: "outlined",
-                "leading-icon": "minus",
-                ariaLabel: `Decrease ${props.label ?? props.ariaLabel}`,
-                disabled: !canDecrease.value,
-                onClick: _cache[0] || (_cache[0] = ($event) => handleButtonClick(-1, $event)),
-                onPointerdown: _cache[1] || (_cache[1] = ($event) => startRepeating(-1)),
-                onPointerup: stopRepeating,
-                onPointerleave: stopRepeating,
-                onPointercancel: stopRepeating
-              }, null, 8, ["ariaLabel", "disabled"]),
-              createVNode(_sfc_main$$, {
-                type: "button",
-                size: "xsmall",
-                variant: "outlined",
-                "leading-icon": "plus",
-                ariaLabel: `Increase ${props.label ?? props.ariaLabel}`,
-                disabled: !canIncrease.value,
-                onClick: _cache[2] || (_cache[2] = ($event) => handleButtonClick(1, $event)),
-                onPointerdown: _cache[3] || (_cache[3] = ($event) => startRepeating(1)),
-                onPointerup: stopRepeating,
-                onPointerleave: stopRepeating,
-                onPointercancel: stopRepeating
-              }, null, 8, ["ariaLabel", "disabled"])
-            ]),
-            _: 1
-          }, 16, ["model-value", "inputmode", "placeholder", "disabled", "error", "autocomplete", "unit", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"])
+          createElementVNode("div", {
+            style: normalizeStyle(popoverEl.value?.anchorStyle)
+          }, [
+            createVNode(BaseInput, mergeProps(slotProps, {
+              modelValue: modelValue.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+              type: "text",
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              error: __props.error,
+              validating: __props.validating,
+              autocomplete: props.autocomplete
+            }), {
+              trailing: withCtx(() => [
+                createVNode(unref(_sfc_main$_), {
+                  modelValue: open.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+                  size: "xsmall",
+                  variant: "outlined",
+                  "leading-icon": "date-time",
+                  ariaLabel: "Open date/time format picker",
+                  "aria-controls": popoverEl.value?.popoverId,
+                  "aria-expanded": open.value,
+                  "aria-haspopup": "dialog",
+                  disabled: __props.disabled,
+                  title: open.value ? "Close date/time format picker" : "Open date/time format picker"
+                }, null, 8, ["modelValue", "aria-controls", "aria-expanded", "disabled", "title"])
+              ]),
+              _: 1
+            }, 16, ["modelValue", "placeholder", "disabled", "error", "validating", "autocomplete"]),
+            createVNode(KdsPopover, {
+              ref_key: "popoverEl",
+              ref: popoverEl,
+              modelValue: open.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+              placement: "bottom-right",
+              "aria-label": "Date time format selection dialog"
+            }, {
+              default: withCtx(() => [
+                createVNode(DateTimeFormatPopover, {
+                  selection: modelValue.value,
+                  "all-default-formats": props.allDefaultFormats,
+                  "allowed-formats": props.allowedFormats,
+                  "onUpdate:selection": _cache[2] || (_cache[2] = ($event) => {
+                    modelValue.value = $event;
+                    open.value = false;
+                  })
+                }, null, 8, ["selection", "all-default-formats", "allowed-formats"])
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ], 4)
         ]),
         _: 1
       }, 16, ["error", "validating", "preserve-sub-text-space"]);
@@ -15175,6 +15347,21 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
+const kdsTemporalType = {
+  DATE: "DATE",
+  TIME: "TIME",
+  DATE_TIME: "DATE_TIME",
+  ZONED_DATE_TIME: "ZONED_DATE_TIME"
+};
+const kdsTemporalTypes = Object.values(kdsTemporalType);
+const kdsDateFormatCategory = {
+  RECENT: "RECENT",
+  STANDARD: "STANDARD",
+  EUROPEAN: "EUROPEAN",
+  AMERICAN: "AMERICAN"
+};
+const kdsDateFormatCategories = Object.values(kdsDateFormatCategory);
+
 const escapeRegex = (value) => value.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
 const wildcardToRegexBody = (pattern) => {
   let body = "";
@@ -15201,7 +15388,7 @@ const buildRegexFromPatternInput = (input, options) => {
   return `^(?!.*${withCase}).*$`;
 };
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "KdsPatternInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -15284,7 +15471,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             clearable: ""
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$_, {
                 modelValue: caseSensitive.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
                 size: "xsmall",
@@ -15294,7 +15481,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 ariaLabel: "Case sensitivity",
                 disabled: __props.disabled
               }, null, 8, ["modelValue", "title", "disabled"]),
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$_, {
                 modelValue: excludeMatches.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
                 size: "xsmall",
@@ -15304,7 +15491,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 ariaLabel: "Exclude matches",
                 disabled: __props.disabled
               }, null, 8, ["modelValue", "title", "disabled"]),
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$_, {
                 modelValue: useRegex.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
                 size: "xsmall",
@@ -15324,7 +15511,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "KdsSearchInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -15476,11 +15663,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$p, [["__scopeId", "data-v-b1809b6d"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$q, [["__scopeId", "data-v-b1809b6d"]]);
 
-const _hoisted_1$j = ["rows", "placeholder", "disabled", "autocomplete"];
+const _hoisted_1$k = ["rows", "placeholder", "disabled", "autocomplete"];
 const DEFAULT_ROWS = 3;
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsTextarea",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -15541,7 +15728,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             placeholder: __props.placeholder,
             disabled: __props.disabled,
             autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$j), [
+          }), null, 16, _hoisted_1$k), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -15551,20 +15738,20 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextarea = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["__scopeId", "data-v-bdf12ef9"]]);
+const KdsTextarea = /* @__PURE__ */ _export_sfc$1(_sfc_main$p, [["__scopeId", "data-v-bdf12ef9"]]);
 
-const _hoisted_1$i = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$a = {
+const _hoisted_1$j = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
+const _hoisted_2$b = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
 };
-const _hoisted_3$7 = ["id"];
-const _hoisted_4$5 = {
+const _hoisted_3$8 = ["id"];
+const _hoisted_4$6 = {
   class: "trailing",
   "aria-hidden": "true"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "BaseDropdown",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -15636,8 +15823,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$a, [
-          createVNode(_sfc_main$V, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$b, [
+          createVNode(_sfc_main$X, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -15648,28 +15835,28 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             placeholder: !props.text && !__props.disabled,
             missing: __props.missing
           }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$7),
-        createElementVNode("span", _hoisted_4$5, [
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$8),
+        createElementVNode("span", _hoisted_4$6, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
           }, null, 8, ["name"])
         ])
-      ], 42, _hoisted_1$i);
+      ], 42, _hoisted_1$j);
     };
   }
 });
 
-const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__scopeId", "data-v-cf3becf9"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["__scopeId", "data-v-cf3becf9"]]);
 
 const DROPDOWN_SEARCH_THRESHOLD = 12;
 
-const _hoisted_1$h = { class: "kds-dropdown-container" };
-const _hoisted_2$9 = {
+const _hoisted_1$i = { class: "kds-dropdown-container" };
+const _hoisted_2$a = {
   key: 0,
   class: "kds-dropdown-container-sticky-top"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -15752,8 +15939,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -15785,9 +15972,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$m, [["__scopeId", "data-v-db105594"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$n, [["__scopeId", "data-v-db105594"]]);
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -15880,9 +16067,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = ["disabled"];
-const _hoisted_2$8 = ["title"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = ["disabled"];
+const _hoisted_2$9 = ["title"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsListItemButton",
   props: {
     label: {},
@@ -15912,21 +16099,21 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isLabelTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$8)
-      ], 8, _hoisted_1$g);
+        }, toDisplayString(props.label), 9, _hoisted_2$9)
+      ], 8, _hoisted_1$h);
     };
   }
 });
 
-const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$k, [["__scopeId", "data-v-13945d12"]]);
+const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$l, [["__scopeId", "data-v-13945d12"]]);
 
-const _hoisted_1$f = { class: "kds-multi-select-dropdown-options" };
-const _hoisted_2$7 = { class: "kds-multi-select-dropdown-search" };
-const _hoisted_3$6 = {
+const _hoisted_1$g = { class: "kds-multi-select-dropdown-options" };
+const _hoisted_2$8 = { class: "kds-multi-select-dropdown-search" };
+const _hoisted_3$7 = {
   key: 0,
   class: "kds-multi-select-dropdown-footer"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "MultiSelectDropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -16042,8 +16229,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        createElementVNode("div", _hoisted_2$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        createElementVNode("div", _hoisted_2$8, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -16072,7 +16259,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           "aria-label": "Dropdown options",
           onItemClick: _cache[4] || (_cache[4] = ($event) => $event !== void 0 && onItemClick($event))
         }, null, 8, ["class", "possible-values", "loading", "empty-text"]),
-        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
+        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
           createVNode(unref(KdsListItemButton), {
             label: anyVisibleSelected.value ? "Clear all" : "Select all",
             "leading-icon": anyVisibleSelected.value ? "trash" : "checkmark",
@@ -16085,9 +16272,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-9b631765"]]);
+const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$k, [["__scopeId", "data-v-9b631765"]]);
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "KdsMultiSelectDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -16214,9 +16401,9 @@ const kdsDimensionComponentHeight20x = 320;
 const kdsSpacingContainer0p10x = 1;
 const kdsSpacingContainer0p25x = 4;
 
-const _hoisted_1$e = { class: "kds-resize-handle-area" };
-const _hoisted_2$6 = ["aria-label"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "kds-resize-handle-area" };
+const _hoisted_2$7 = ["aria-label"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ResizeHandle",
   props: {
     numberOfHandles: { default: 1 },
@@ -16238,7 +16425,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return `calc((100% - ${n - 1} * ${gap}) / ${2 * n})`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedNumberOfHandles.value, (i) => {
           return openBlock(), createElementBlock("button", {
             key: i,
@@ -16247,22 +16434,22 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             type: "button"
           }, [..._cache[0] || (_cache[0] = [
             createElementVNode("span", { class: "kds-resize-handle-line" }, null, -1)
-          ])], 8, _hoisted_2$6);
+          ])], 8, _hoisted_2$7);
         }), 128))
       ]);
     };
   }
 });
 
-const ResizeHandle = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-df3803d4"]]);
+const ResizeHandle = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-df3803d4"]]);
 
-const _hoisted_1$d = {
+const _hoisted_1$e = {
   ref: "content",
   class: "kds-resize-container-content"
 };
 const DEFAULT_INITIAL_HEIGHT = 200;
 const KEYBOARD_RESIZE_STEP = 10;
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "KdsResizeContainer",
   props: {
     height: { default: () => DEFAULT_INITIAL_HEIGHT },
@@ -16325,7 +16512,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["kds-resize-container", { dragging: unref(activePointerId) !== null }])
       }, [
-        createElementVNode("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_1$e, [
           renderSlot(_ctx.$slots, "default", { contentStyle: contentStyle.value }, void 0, true)
         ], 512),
         createVNode(ResizeHandle, {
@@ -16343,7 +16530,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsResizeContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-46b33b01"]]);
+const KdsResizeContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-46b33b01"]]);
 
 const CLICK_META_KEY_TIMEOUT = 250;
 const useMultiSelectListBoxSelection = ({
@@ -16635,17 +16822,17 @@ const useMultiSelectListBoxSelection = ({
   };
 };
 
-const _hoisted_1$c = ["id", "tabindex", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-activedescendant", "aria-disabled", "onKeydown"];
-const _hoisted_2$5 = { class: "kds-multiselect-list-box-content-grid" };
-const _hoisted_3$5 = {
+const _hoisted_1$d = ["id", "tabindex", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-activedescendant", "aria-disabled", "onKeydown"];
+const _hoisted_2$6 = { class: "kds-multiselect-list-box-content-grid" };
+const _hoisted_3$6 = {
   key: 0,
   class: "kds-multiselect-sticky-bottom"
 };
-const _hoisted_4$4 = {
+const _hoisted_4$5 = {
   key: 0,
   class: "kds-multiselect-empty"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "KdsMultiSelectListBox",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -16816,7 +17003,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(({ contentStyle }) => [
               createElementVNode("div", {
-                class: "kds-multiselect-list-box",
+                class: normalizeClass([
+                  "kds-multiselect-list-box",
+                  { error: __props.error, disabled: effectiveDisabled.value }
+                ]),
                 style: normalizeStyle(contentStyle)
               }, [
                 createElementVNode("div", mergeProps(unref(containerProps), {
@@ -16895,7 +17085,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   onBlur: _cache[17] || (_cache[17] = //@ts-ignore
                   (...args) => unref(onBlur) && unref(onBlur)(...args))
                 }), [
-                  createElementVNode("div", _hoisted_2$5, [
+                  createElementVNode("div", _hoisted_2$6, [
                     createElementVNode("div", mergeProps({ class: "kds-multiselect-list-box-content" }, unref(wrapperProps)), [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualList), ({ data: item, index }) => {
                         return openBlock(), createBlock(unref(KdsListItem), {
@@ -16908,20 +17098,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                           label: item.text,
                           accessory: item.accessory,
                           missing: item.missing,
+                          special: item.special,
                           "data-option-index": index,
                           selected: unref(isCurrentValue)(item.id),
                           disabled: effectiveDisabled.value,
                           active: unref(isKeyboardNavigating) && unref(currentKeyNavIndex) === index,
-                          "trailing-icon": item.missing && !effectiveDisabled.value ? "trash" : unref(isCurrentValue)(item.id) ? "checkmark" : void 0,
+                          "trailing-icon": unref(isCurrentValue)(item.id) ? "checkmark" : void 0,
                           onDblclick: [
                             withModifiers(($event) => handleDblClick(item.id, index), ["exact"]),
                             _cache[0] || (_cache[0] = withModifiers(($event) => handleShiftDblClick(), ["shift"]))
                           ],
                           onClick: ($event) => unref(handleClick)($event, item.id, index)
-                        }, null, 8, ["id", "class", "label", "accessory", "missing", "data-option-index", "selected", "disabled", "active", "trailing-icon", "onDblclick", "onClick"]);
+                        }, null, 8, ["id", "class", "label", "accessory", "missing", "special", "data-option-index", "selected", "disabled", "active", "trailing-icon", "onDblclick", "onClick"]);
                       }), 128))
                     ], 16),
-                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+                    visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
                       createVNode(unref(KdsListItem), {
                         id: generateOptionId(visibleBottomValue.value.id),
                         label: visibleBottomValue.value.text,
@@ -16932,7 +17123,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                         disabled: effectiveDisabled.value,
                         active: unref(isKeyboardNavigating) && unref(currentKeyNavIndex) === bottomIndex.value,
                         special: "",
-                        "trailing-icon": visibleBottomValue.value.missing && !effectiveDisabled.value ? "trash" : unref(isCurrentValue)(visibleBottomValue.value.id) ? "checkmark" : void 0,
+                        "trailing-icon": unref(isCurrentValue)(visibleBottomValue.value.id) ? "checkmark" : void 0,
                         onClick: _cache[1] || (_cache[1] = ($event) => unref(handleClick)($event, visibleBottomValue.value.id, bottomIndex.value)),
                         onDblclick: [
                           _cache[2] || (_cache[2] = withModifiers(($event) => handleShiftDblClick(), ["shift"])),
@@ -16941,14 +17132,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                       }, null, 8, ["id", "label", "accessory", "missing", "data-option-index", "selected", "disabled", "active", "trailing-icon"])
                     ])) : createCommentVNode("", true)
                   ])
-                ], 16, _hoisted_1$c),
-                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+                ], 16, _hoisted_1$d),
+                visiblePossibleValues.value.length === 0 && !visibleBottomValue.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
                   createVNode(KdsEmptyState, {
                     headline: __props.loading ? "Loading data…" : __props.emptyStateLabel,
                     "loading-spinner": __props.loading
                   }, null, 8, ["headline", "loading-spinner"])
                 ])) : createCommentVNode("", true)
-              ], 4)
+              ], 6)
             ]),
             _: 2
           }, 1032, ["height", "min-height"]))
@@ -16959,12 +17150,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-9fde3128"]]);
+const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-24af1af0"]]);
 
-const _hoisted_1$b = { class: "kds-list-column" };
-const _hoisted_2$4 = { class: "kds-list-header" };
-const _hoisted_3$4 = { class: "kds-list-label" };
-const _hoisted_4$3 = {
+const _hoisted_1$c = { class: "kds-list-column" };
+const _hoisted_2$5 = { class: "kds-list-header" };
+const _hoisted_3$5 = { class: "kds-list-label" };
+const _hoisted_4$4 = {
   key: 0,
   class: "kds-list-count"
 };
@@ -16977,10 +17168,11 @@ const _hoisted_9 = {
   class: "kds-list-count"
 };
 const UNKNOWN_VALUE_ID = "__unknown-value-option__";
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "TwinListBody",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
     possibleValues: {},
     searchTerm: { default: "" },
     excludeLabel: { default: "Exclude" },
@@ -16994,7 +17186,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = createPropsRestProxy(__props, ["disabled", "searchTerm", "excludeLabel", "includeLabel", "unknownValuesText", "loading"]);
+    const props = createPropsRestProxy(__props, ["disabled", "error", "searchTerm", "excludeLabel", "includeLabel", "unknownValuesText", "loading"]);
     const modelValue = useModel(__props, "modelValue");
     const effectiveDisabled = computed(() => __props.disabled || __props.loading);
     const leftSelected = ref([]);
@@ -17150,10 +17342,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             class: "kds-twin-list-body",
             style: normalizeStyle(contentStyle)
           }, [
-            createElementVNode("div", _hoisted_1$b, [
-              createElementVNode("div", _hoisted_2$4, [
-                createElementVNode("span", _hoisted_3$4, toDisplayString(__props.excludeLabel), 1),
-                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$3, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
+            createElementVNode("div", _hoisted_1$c, [
+              createElementVNode("div", _hoisted_2$5, [
+                createElementVNode("span", _hoisted_3$5, toDisplayString(__props.excludeLabel), 1),
+                !__props.loading && __props.searchTerm ? (openBlock(), createElementBlock("span", _hoisted_4$4, toDisplayString(leftOptions.value.length) + " of " + toDisplayString(excludedItems.value.length), 1)) : createCommentVNode("", true)
               ]),
               createVNode(unref(KdsMultiSelectListBox), {
                 modelValue: leftSelected.value,
@@ -17162,6 +17354,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 "possible-values": leftOptions.value,
                 ariaLabel: __props.excludeLabel,
                 disabled: effectiveDisabled.value,
+                error: __props.error,
                 loading: __props.loading,
                 "empty-state-label": props.emptyStateLabel,
                 "bottom-value": showUnknownValues.value && modelValue.value.includeUnknownValues === false ? unknownValueOption.value : void 0,
@@ -17169,10 +17362,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 onDoubleClickShift: moveRight,
                 onKeyArrowRight: moveRight,
                 onKeyEnter: moveRight
-              }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "loading", "empty-state-label", "bottom-value"])
+              }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "error", "loading", "empty-state-label", "bottom-value"])
             ]),
             createElementVNode("div", _hoisted_5$1, [
-              createVNode(unref(_sfc_main$$), {
+              createVNode(unref(_sfc_main$11), {
                 "leading-icon": "chevron-right",
                 ariaLabel: "Move selected values right",
                 title: "Move selected values right",
@@ -17181,7 +17374,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 disabled: effectiveDisabled.value || leftSelected.value.length === 0,
                 onClick: _cache[2] || (_cache[2] = ($event) => moveRight(leftSelected.value))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$$), {
+              createVNode(unref(_sfc_main$11), {
                 "leading-icon": "chevron-right-double",
                 ariaLabel: "Move all values right",
                 title: "Move all values right",
@@ -17193,7 +17386,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   ...showUnknownValues.value && !modelValue.value.includeUnknownValues ? [UNKNOWN_VALUE_ID] : []
                 ]))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$$), {
+              createVNode(unref(_sfc_main$11), {
                 "leading-icon": "chevron-left",
                 ariaLabel: "Move selected values left",
                 title: "Move selected values left",
@@ -17202,7 +17395,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 disabled: effectiveDisabled.value || rightSelected.value.length === 0,
                 onClick: _cache[4] || (_cache[4] = ($event) => moveLeft(rightSelected.value))
               }, null, 8, ["disabled"]),
-              createVNode(unref(_sfc_main$$), {
+              createVNode(unref(_sfc_main$11), {
                 "leading-icon": "chevron-left-double",
                 ariaLabel: "Move all values left",
                 title: "Move all values left",
@@ -17227,6 +17420,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 "possible-values": rightOptions.value,
                 ariaLabel: __props.includeLabel,
                 disabled: effectiveDisabled.value,
+                error: __props.error,
                 loading: __props.loading,
                 "empty-state-label": props.emptyStateLabel,
                 "bottom-value": showUnknownValues.value && modelValue.value.includeUnknownValues === true ? unknownValueOption.value : void 0,
@@ -17234,7 +17428,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 onDoubleClickShift: moveLeft,
                 onKeyArrowLeft: moveLeft,
                 onKeyEnter: moveLeft
-              }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "loading", "empty-state-label", "bottom-value"])
+              }, null, 8, ["modelValue", "possible-values", "ariaLabel", "disabled", "error", "loading", "empty-state-label", "bottom-value"])
             ])
           ], 4)
         ]),
@@ -17244,7 +17438,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TwinListBody = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["__scopeId", "data-v-e05644d2"]]);
+const TwinListBody = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-8a9e1b15"]]);
 
 const kdsTwinListSearchMode = {
   MANUAL: "manual",
@@ -17253,7 +17447,7 @@ const kdsTwinListSearchMode = {
 };
 const kdsTwinListSearchModes = Object.values(kdsTwinListSearchMode);
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "TwinListHeader",
   props: /* @__PURE__ */ mergeModels({
     filterTypes: { default: () => void 0 },
@@ -17329,7 +17523,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           ariaLabel: "Search values",
           placeholder: "Search",
           disabled: __props.disabled
-        }, null, 8, ["modelValue", "disabled"])) : mode.value === unref(kdsTwinListSearchMode).PATTERN ? (openBlock(), createBlock(unref(_sfc_main$q), {
+        }, null, 8, ["modelValue", "disabled"])) : mode.value === unref(kdsTwinListSearchMode).PATTERN ? (openBlock(), createBlock(unref(_sfc_main$r), {
           key: 2,
           modelValue: pattern.value,
           "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => pattern.value = $event),
@@ -17343,7 +17537,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           placeholder: "Pattern",
           disabled: __props.disabled,
           "onUpdate:regex": _cache[6] || (_cache[6] = ($event) => emit("update:regex", $event))
-        }, null, 8, ["modelValue", "case-sensitive", "exclude-matches", "use-regex", "disabled"])) : (openBlock(), createBlock(unref(_sfc_main$i), {
+        }, null, 8, ["modelValue", "case-sensitive", "exclude-matches", "use-regex", "disabled"])) : (openBlock(), createBlock(unref(_sfc_main$j), {
           key: 3,
           modelValue: selectedTypes.value,
           "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => selectedTypes.value = $event),
@@ -17357,8 +17551,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "kds-twin-list" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = { class: "kds-twin-list" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "KdsTwinList",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -17489,8 +17683,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         "preserve-sub-text-space": __props.preserveSubTextSpace
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
-            createVNode(_sfc_main$d, {
+          createElementVNode("div", _hoisted_1$b, [
+            createVNode(_sfc_main$e, {
               mode: mode.value,
               "onUpdate:mode": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
               pattern: pattern.value,
@@ -17514,6 +17708,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               modelValue: effectiveBodyModel.value,
               "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => effectiveBodyModel.value = $event),
               disabled: __props.disabled || mode.value !== unref(kdsTwinListSearchMode).MANUAL,
+              error: __props.error,
               "possible-values": __props.possibleValues,
               "search-term": searchTerm.value,
               "exclude-label": props.excludeLabel,
@@ -17521,7 +17716,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               "unknown-values-text": props.unknownValuesText,
               "empty-state-label": props.emptyStateLabel,
               loading: __props.loading
-            }, null, 8, ["modelValue", "disabled", "possible-values", "search-term", "exclude-label", "include-label", "unknown-values-text", "empty-state-label", "loading"])
+            }, null, 8, ["modelValue", "disabled", "error", "possible-values", "search-term", "exclude-label", "include-label", "unknown-values-text", "empty-state-label", "loading"])
           ])
         ]),
         _: 1
@@ -17530,7 +17725,214 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTwinList = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-c46b28b5"]]);
+const KdsTwinList = /* @__PURE__ */ _export_sfc$1(_sfc_main$d, [["__scopeId", "data-v-1a9327b5"]]);
+
+const useSortableListBoxReorder = ({
+  orderedIds,
+  selection,
+  disabled
+}) => {
+  const selectedIndices = computed(() => {
+    const selected = new Set(selection.value);
+    return orderedIds.value.map((id, i) => ({ id, index: i })).filter((v) => selected.has(v.id)).map((v) => v.index);
+  });
+  const canMoveUp = computed(
+    () => !disabled.value && selectedIndices.value.length > 0 && selectedIndices.value[0] > 0
+  );
+  const canMoveDown = computed(
+    () => !disabled.value && selectedIndices.value.length > 0 && selectedIndices.value[selectedIndices.value.length - 1] < orderedIds.value.length - 1
+  );
+  const reorder = (direction) => {
+    const ids = [...orderedIds.value];
+    const indices = selectedIndices.value;
+    if (indices.length === 0) {
+      return ids;
+    }
+    const movingIds = indices.map((i) => ids[i]);
+    const indexSet = new Set(indices);
+    const remaining = ids.filter((_, i) => !indexSet.has(i));
+    let insertAt;
+    if (direction === "top") {
+      insertAt = 0;
+    } else if (direction === "bottom") {
+      insertAt = remaining.length;
+    } else if (direction === "up") {
+      insertAt = Math.max(0, indices[0] - 1);
+    } else {
+      insertAt = Math.min(
+        remaining.length,
+        indices[indices.length - 1] - indices.length + 2
+      );
+    }
+    remaining.splice(insertAt, 0, ...movingIds);
+    return remaining;
+  };
+  const sortByText = (ascending, optionLookup) => {
+    const sorted = [...orderedIds.value].sort((a, b) => {
+      const textA = optionLookup.get(a)?.text ?? a;
+      const textB = optionLookup.get(b)?.text ?? b;
+      return ascending ? textA.localeCompare(textB) : textB.localeCompare(textA);
+    });
+    return sorted;
+  };
+  return {
+    selectedIndices,
+    canMoveUp,
+    canMoveDown,
+    reorder,
+    sortByText
+  };
+};
+
+const _hoisted_1$a = { class: "kds-sortable-list-box-wrapper" };
+const _hoisted_2$4 = { class: "kds-sortable-top-buttons" };
+const _hoisted_3$4 = { class: "kds-sortable-top-buttons-left" };
+const _hoisted_4$3 = { class: "kds-sortable-footer-buttons" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "KdsSortableListBox",
+  props: /* @__PURE__ */ mergeModels({
+    possibleValues: {},
+    disabled: { type: Boolean, default: false },
+    description: {},
+    label: {},
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const formFieldProps = createPropsRestProxy(__props, ["possibleValues", "disabled", "error", "validating", "preserveSubTextSpace"]);
+    const modelValue = useModel(__props, "modelValue");
+    const selection = ref([]);
+    const optionLookup = computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const option of __props.possibleValues) {
+        map.set(option.id, option);
+      }
+      return map;
+    });
+    const orderedOptions = computed(
+      () => modelValue.value.map(
+        (id) => optionLookup.value.get(id) ?? { id, text: id, missing: true }
+      )
+    );
+    const listBoxRef = useTemplateRef("listBoxRef");
+    const { canMoveUp, canMoveDown, reorder, sortByText } = useSortableListBoxReorder({
+      orderedIds: modelValue,
+      selection,
+      disabled: toRef(() => __props.disabled)
+    });
+    const applyReorder = (newOrder) => {
+      modelValue.value = newOrder;
+    };
+    const moveUp = () => canMoveUp.value && applyReorder(reorder("up"));
+    const moveDown = () => canMoveDown.value && applyReorder(reorder("down"));
+    const moveToTop = () => canMoveUp.value && applyReorder(reorder("top"));
+    const moveToBottom = () => canMoveDown.value && applyReorder(reorder("bottom"));
+    const resetOrder = () => applyReorder(__props.possibleValues.map((option) => option.id));
+    const focus = () => listBoxRef.value?.focus();
+    __expose({ focus });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFieldsetWrapper, mergeProps(formFieldProps, {
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
+      }), {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$a, [
+            createElementVNode("div", _hoisted_2$4, [
+              createElementVNode("div", _hoisted_3$4, [
+                createVNode(_sfc_main$11, {
+                  size: "small",
+                  variant: "transparent",
+                  "leading-icon": "sort-descending",
+                  label: "A – Z",
+                  disabled: __props.disabled,
+                  onClick: _cache[0] || (_cache[0] = ($event) => applyReorder(unref(sortByText)(true, optionLookup.value)))
+                }, null, 8, ["disabled"]),
+                createVNode(_sfc_main$11, {
+                  size: "small",
+                  variant: "transparent",
+                  "leading-icon": "sort-ascending",
+                  label: "Z – A",
+                  disabled: __props.disabled,
+                  onClick: _cache[1] || (_cache[1] = ($event) => applyReorder(unref(sortByText)(false, optionLookup.value)))
+                }, null, 8, ["disabled"])
+              ]),
+              createVNode(_sfc_main$11, {
+                size: "small",
+                variant: "transparent",
+                destructive: "",
+                label: "Reset all",
+                disabled: __props.disabled,
+                onClick: resetOrder
+              }, null, 8, ["disabled"])
+            ]),
+            createVNode(KdsMultiSelectListBox, {
+              ref_key: "listBoxRef",
+              ref: listBoxRef,
+              modelValue: selection.value,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selection.value = $event),
+              "possible-values": orderedOptions.value,
+              disabled: __props.disabled,
+              error: __props.error,
+              "use-resize-handle": true,
+              ariaLabel: formFieldProps.label ?? formFieldProps.ariaLabel ?? ""
+              /* fallback only for TS */
+            }, null, 8, ["modelValue", "possible-values", "disabled", "error", "ariaLabel"]),
+            createElementVNode("div", _hoisted_4$3, [
+              createVNode(_sfc_main$11, {
+                size: "small",
+                variant: "transparent",
+                "leading-icon": "to-top",
+                label: "Top",
+                title: "Move to top",
+                disabled: __props.disabled || !unref(canMoveUp),
+                onClick: moveToTop
+              }, null, 8, ["disabled"]),
+              createVNode(_sfc_main$11, {
+                size: "small",
+                variant: "transparent",
+                "leading-icon": "to-bottom",
+                label: "Bottom",
+                title: "Move to bottom",
+                disabled: __props.disabled || !unref(canMoveDown),
+                onClick: moveToBottom
+              }, null, 8, ["disabled"]),
+              createVNode(_sfc_main$11, {
+                size: "small",
+                variant: "transparent",
+                "leading-icon": "arrow-up",
+                label: "Up",
+                title: "Move up",
+                disabled: __props.disabled || !unref(canMoveUp),
+                onClick: moveUp
+              }, null, 8, ["disabled"]),
+              createVNode(_sfc_main$11, {
+                size: "small",
+                variant: "transparent",
+                "leading-icon": "arrow-down",
+                label: "Down",
+                title: "Move down",
+                disabled: __props.disabled || !unref(canMoveDown),
+                onClick: moveDown
+              }, null, 8, ["disabled"])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
+    };
+  }
+});
+
+const KdsSortableListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-ee7b63e2"]]);
 
 const _hoisted_1$9 = { class: "kds-info-popover-content" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
@@ -18344,7 +18746,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$1, toDisplayString(__props.headline), 1),
-          createVNode(_sfc_main$$, {
+          createVNode(_sfc_main$11, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -18617,7 +19019,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$J, {
+                createVNode(_sfc_main$L, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -18632,7 +19034,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$$, {
+              return openBlock(), createBlock(_sfc_main$11, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -18664,5 +19066,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-41fc8d84"]]);
 
-export { KdsAvatar, KdsBadge, _sfc_main$$ as KdsButton, KdsCardClickable, _sfc_main$J as KdsCheckbox, KdsCheckboxGroup, _sfc_main$y as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$u as KdsDateInput, _sfc_main$s as KdsDateTimeFormatInput, _sfc_main$l as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, KdsLink, _sfc_main$_ as KdsLinkButton, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$O as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$i as KdsMultiSelectDropdown, KdsMultiSelectListBox, _sfc_main$r as KdsNumberInput, _sfc_main$x as KdsPasswordInput, _sfc_main$q as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$Y as KdsToggleButton, KdsTwinList, _sfc_main$w as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$11 as KdsButton, KdsCardClickable, _sfc_main$L as KdsCheckbox, KdsCheckboxGroup, _sfc_main$y as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$u as KdsDateInput, _sfc_main$s as KdsDateTimeFormatInput, _sfc_main$m as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, KdsLink, _sfc_main$10 as KdsLinkButton, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$Q as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$j as KdsMultiSelectDropdown, _sfc_main$C as KdsNumberInput, _sfc_main$x as KdsPasswordInput, _sfc_main$r as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$_ as KdsToggleButton, KdsTwinList, _sfc_main$w as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map