npm - @knime/kds-components - Versions diffs - 0.19.0 → 0.20.0 - Mend

@knime/kds-components 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (622) hide show

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, defineAsyncComponent, onBeforeUpdate, withModifiers, normalizeProps, guardReactiveProps, reactive, onMounted, onUnmounted, toRefs, inject, withKeys, withDirectives, provide, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, onBeforeUnmount, vModelText, useCssVars, mergeDefaults, createSlots } from 'vue';
-import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize, useTemplateRefsList } from '@vueuse/core';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, Fragment, renderList, watchEffect, useAttrs, defineAsyncComponent, onBeforeUpdate, withModifiers, reactive, onMounted, onUnmounted, toRefs, normalizeProps, inject, withKeys, withDirectives, provide, guardReactiveProps, createTextVNode, isRef, resolveComponent, Transition, resolveDirective, toHandlers, onBeforeUnmount, vModelText, useCssVars, createSlots } from 'vue';
+import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
 import './index.css';const kdsAvatarSize = {
   SMALL: "small",
@@ -9,23 +9,23 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
-const _hoisted_1$E = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$n = ["src"];
+const _hoisted_1$H = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$o = ["src"];
 const _hoisted_3$f = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
-    src: { default: void 0 },
-    size: { default: kdsAvatarSize.XLARGE },
-    title: { default: void 0 }
+    src: {},
+    size: { default: () => kdsAvatarSize.XLARGE },
+    title: {}
   },
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["size"]);
     const imageLoadFailed = ref(false);
     watch(
       () => props.src,
@@ -46,7 +46,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["kds-avatar", props.size]),
+        class: normalizeClass(["kds-avatar", __props.size]),
         role: hasTitle.value ? "img" : "presentation",
         title: hasTitle.value ? accessibleTitle.value : void 0,
         "aria-hidden": !hasTitle.value ? "true" : void 0,
@@ -59,10 +59,10 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$n)) : (openBlock(), createElementBlock("div", _hoisted_3$f, [
+        }, null, 40, _hoisted_2$o)) : (openBlock(), createElementBlock("div", _hoisted_3$f, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$E);
+      ], 10, _hoisted_1$H);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc$1 = (sfc, props) => {
   return target;
 };
-const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$Y, [["__scopeId", "data-v-d6a313f1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc$1(_sfc_main$$, [["__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$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -125,17 +125,20 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false }
   },
   setup(__props) {
-    const props = __props;
-    const iconComponent = useIcon({ name: toRef(props, "name"), folder: "icons" });
+    const props = createPropsRestProxy(__props, ["size", "disabled"]);
+    const iconComponent = useIcon({
+      name: toRef(() => props.name),
+      folder: "icons"
+    });
     return (_ctx, _cache) => {
       return unref(iconComponent) ? (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent)), {
         key: 0,
-        class: normalizeClass(["kds-icon", props.size, { disabled: __props.disabled }]),
+        class: normalizeClass(["kds-icon", __props.size, { disabled: __props.disabled }]),
         "aria-hidden": "true",
         focusable: "false"
       }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
         key: 1,
-        class: normalizeClass(["kds-icon", props.size, { disabled: __props.disabled }]),
+        class: normalizeClass(["kds-icon", __props.size, { disabled: __props.disabled }]),
         "aria-hidden": "true",
         focusable: "false"
       }, null, 2));
@@ -143,7 +146,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$X, [["__scopeId", "data-v-4da5bf3e"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc$1(_sfc_main$_, [["__scopeId", "data-v-fb124eb6"]]);
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -471,8 +474,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
-const _hoisted_1$D = ["title"];
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _hoisted_1$G = ["title"];
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -486,18 +489,17 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
       medium: "small",
       small: "xsmall"
     };
-    const props = __props;
-    const iconSize = computed(() => DATA_TYPE_SIZE_TO_ICON_SIZE[props.size]);
+    const iconSize = computed(() => DATA_TYPE_SIZE_TO_ICON_SIZE[__props.size]);
     const isIconName = (value) => typeIconNames.includes(value);
     const isTypeId = (value) => Object.keys(ID_TO_ICON_MAP).includes(value);
     const iconName = computed(() => {
-      if (isIconName(props.iconName)) {
-        return props.iconName;
+      if (isIconName(__props.iconName)) {
+        return __props.iconName;
       }
-      if (isTypeId(props.iconName)) {
-        return ID_TO_ICON_MAP[props.iconName];
+      if (isTypeId(__props.iconName)) {
+        return ID_TO_ICON_MAP[__props.iconName];
       }
-      return props.iconName.startsWith("org.knime") ? "default-extension-datatype" : "unknown-datatype";
+      return __props.iconName.startsWith("org.knime") ? "default-extension-datatype" : "unknown-datatype";
     });
     const iconComponent = useIcon({
       name: iconName,
@@ -506,19 +508,19 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["kds-data-type-icon-container", __props.size, { disabled: __props.disabled }]),
-        title: props.iconTitle
+        title: __props.iconTitle
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent)), {
           class: normalizeClass(["kds-icon", "kds-data-type-icon", iconSize.value]),
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$D);
+      ], 10, _hoisted_1$G);
     };
   }
 });
-const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-806087da"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc$1(_sfc_main$Z, [["__scopeId", "data-v-3b8ebdbd"]]);
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -535,14 +537,14 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
-const _hoisted_1$C = { class: "label-wrapper" };
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _hoisted_1$F = { class: "label-wrapper" };
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
-    variant: { default: kdsBadgeVariant.NEUTRAL },
-    size: { default: kdsBadgeSize.XSMALL },
-    leadingIcon: { default: void 0 }
+    variant: { default: () => kdsBadgeVariant.NEUTRAL },
+    size: { default: () => kdsBadgeSize.XSMALL },
+    leadingIcon: {}
   },
   setup(__props) {
     const sizeToIconSize = {
@@ -558,13 +560,13 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$C, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$F, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
-const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$V, [["__scopeId", "data-v-0dc42bfc"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc$1(_sfc_main$Y, [["__scopeId", "data-v-df64f7cf"]]);
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -583,16 +585,16 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
-const _hoisted_1$B = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _hoisted_1$E = ["role", "title", "aria-hidden", "aria-label"];
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
-    size: { default: kdsColorSwatchSize.SMALL },
-    title: { default: void 0 }
+    size: { default: () => kdsColorSwatchSize.SMALL },
+    title: {}
   },
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["size"]);
     const typeToTokenColor = {
       learner: "var(--kds-color-nodes-and-variables-learner)",
       manipulator: "var(--kds-color-nodes-and-variables-manipulator)",
@@ -614,17 +616,17 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
         role: hasTitle.value ? "img" : "presentation",
-        class: normalizeClass(["kds-color-swatch", props.size]),
+        class: normalizeClass(["kds-color-swatch", __props.size]),
         title: hasTitle.value ? accessibleTitle.value : void 0,
         style: normalizeStyle({ backgroundColor: backgroundColor.value }),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$B);
+      }, null, 14, _hoisted_1$E);
     };
   }
 });
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-bdb3dd24"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc$1(_sfc_main$X, [["__scopeId", "data-v-2e300e76"]]);
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -744,44 +746,44 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
-const _hoisted_1$A = ["title", "aria-label"];
-const _hoisted_2$m = ["title"];
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _hoisted_1$D = ["title", "aria-label"];
+const _hoisted_2$n = ["title"];
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
     size: { default: "medium" },
     label: { default: "" },
-    title: { default: void 0 }
+    title: {}
   },
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["status", "size", "label"]);
     const accessibleTitle = computed(
-      () => props.title?.trim() || `Status is ${props.status}`
+      () => props.title?.trim() || `Status is ${__props.status}`
     );
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
-        class: normalizeClass(["kds-live-status", props.status, `size-${props.size}`]),
+        class: normalizeClass(["kds-live-status", __props.status, `size-${__props.size}`]),
         role: "img",
         title: accessibleTitle.value,
         "aria-label": accessibleTitle.value
       }, [
         _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
-        props.label ? (openBlock(), createElementBlock("span", {
+        __props.label ? (openBlock(), createElementBlock("span", {
           key: 0,
           ref_key: "labelEl",
           ref: labelEl,
           class: "label",
-          title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$m)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$A);
+          title: unref(isTruncated) ? __props.label : void 0
+        }, toDisplayString(__props.label), 9, _hoisted_2$n)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$D);
     };
   }
 });
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$T, [["__scopeId", "data-v-3bd44b22"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc$1(_sfc_main$W, [["__scopeId", "data-v-01555495"]]);
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -797,8 +799,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
-const _hoisted_1$z = ["data-style"];
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _hoisted_1$C = ["data-style"];
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -823,12 +825,12 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$z);
+      ])], 10, _hoisted_1$C);
     };
   }
 });
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$S, [["__scopeId", "data-v-74bb7c3d"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc$1(_sfc_main$V, [["__scopeId", "data-v-54835dc0"]]);
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -838,25 +840,25 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
-const _hoisted_1$y = ["role"];
-const _hoisted_2$l = { class: "header" };
+const _hoisted_1$B = ["role"];
+const _hoisted_2$m = { class: "header" };
 const _hoisted_3$e = { class: "headline" };
 const _hoisted_4$a = {
   key: 0,
   class: "body"
 };
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
     headline: {},
-    description: { default: void 0 },
+    description: {},
     variant: { default: "info" }
   },
   setup(__props) {
-    const props = __props;
-    const classes = computed(() => ["kds-inline-message", props.variant]);
+    const props = createPropsRestProxy(__props, ["variant"]);
+    const classes = computed(() => ["kds-inline-message", __props.variant]);
     const iconName = computed(() => {
-      switch (props.variant) {
+      switch (__props.variant) {
         case "success":
           return "circle-success";
         case "error":
@@ -869,14 +871,14 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       }
     });
     const role = computed(
-      () => props.variant === "warning" || props.variant === "error" ? "alert" : "status"
+      () => __props.variant === "warning" || __props.variant === "error" ? "alert" : "status"
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$l, [
+        createElementVNode("div", _hoisted_2$m, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
@@ -885,12 +887,12 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_3$e, toDisplayString(props.headline), 1)
         ]),
         props.description ? (openBlock(), createElementBlock("div", _hoisted_4$a, toDisplayString(props.description), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$y);
+      ], 10, _hoisted_1$B);
     };
   }
 });
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$R, [["__scopeId", "data-v-3d79be7c"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc$1(_sfc_main$U, [["__scopeId", "data-v-af14056f"]]);
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -900,11 +902,11 @@ const kdsInlineMessageVariant = {
 };
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
-const _hoisted_1$x = {
+const _hoisted_1$A = {
   key: 0,
   class: "label"
 };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -923,34 +925,34 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["component", "size", "destructive", "success", "error", "disabled", "toggled"]);
     const emit = __emit;
     const classes = computed(() => [
       "button",
-      props.size,
+      __props.size,
       props.variant,
-      { destructive: props.destructive },
-      { disabled: props.disabled },
-      { toggled: props.toggled },
-      { success: props.success },
-      { error: props.error }
+      { destructive: __props.destructive },
+      { disabled: __props.disabled },
+      { toggled: __props.toggled },
+      { success: __props.success },
+      { error: __props.error }
     ]);
     const iconSize = computed(() => {
-      if (props.size === "xsmall") {
+      if (__props.size === "xsmall") {
         return "small";
       } else {
-        return props.size;
+        return __props.size;
       }
     });
     function onClick(e) {
-      if (!props.disabled) {
+      if (!__props.disabled) {
         emit("click", e);
       }
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.component), {
         class: normalizeClass(classes.value),
-        disabled: props.disabled,
+        disabled: __props.disabled,
         title: props.title,
         "aria-label": props.ariaLabel,
         onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
@@ -963,7 +965,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$x, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$A, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -976,9 +978,9 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
-const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$Q, [["__scopeId", "data-v-b0f9559f"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$T, [["__scopeId", "data-v-20cfd7e3"]]);
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -993,12 +995,13 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["variant"]);
     const emit = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        variant: __props.variant,
         onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16);
+      }), null, 16, ["variant"]);
     };
   }
 });
@@ -1031,7 +1034,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -1044,13 +1047,13 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     ariaLabel: {},
     destructive: { type: Boolean },
     to: {},
-    download: { type: Boolean, default: void 0 },
+    download: { type: Boolean },
     target: { default: null },
     rel: { default: null }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["variant", "download", "rel", "target"]);
     const component = computed(() => {
       if (props.disabled) {
         return "button";
@@ -1060,14 +1063,18 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        variant: __props.variant,
+        download: __props.download,
+        rel: __props.rel,
+        target: __props.target,
         component: component.value,
         onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16, ["component"]);
+      }), null, 16, ["variant", "download", "rel", "target", "component"]);
     };
   }
 });
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1084,14 +1091,15 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["variant"]);
     const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        variant: __props.variant,
         toggled: modelValue.value,
         "aria-pressed": modelValue.value,
         onClick: _cache[0] || (_cache[0] = ($event) => modelValue.value = !modelValue.value)
-      }), null, 16, ["toggled", "aria-pressed"]);
+      }), null, 16, ["variant", "toggled", "aria-pressed"]);
     };
   }
 });
@@ -1102,9 +1110,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
-const _hoisted_1$w = ["data-visible"];
-const _hoisted_2$k = ["data-visible"];
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$z = ["data-visible"];
+const _hoisted_2$l = ["data-visible"];
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1122,14 +1130,14 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["click"], ["update:state"]),
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["variant", "size", "disabled"]);
     const emit = __emit;
     const state = useModel(__props, "state");
     const iconSize = computed(() => {
-      if (props.size === "xsmall") {
+      if (__props.size === "xsmall") {
         return "small";
       }
-      return props.size;
+      return __props.size;
     });
     function onClick(event) {
       event.preventDefault();
@@ -1139,15 +1147,13 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       emit("click", event);
     }
     const baseButtonProps = computed(() => ({
-      variant: props.variant,
-      size: props.size,
-      disabled: props.disabled,
+      ...props,
+      variant: __props.variant,
+      size: __props.size,
+      disabled: __props.disabled,
       success: state.value === "success",
       error: state.value === "error",
-      title: props.ariaLabel,
-      label: props.label,
-      leadingIcon: props.leadingIcon,
-      ariaLabel: props.ariaLabel
+      title: props.ariaLabel
     }));
     return (_ctx, _cache) => {
       return openBlock(), createBlock(BaseButton, mergeProps(baseButtonProps.value, {
@@ -1167,16 +1173,16 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$w),
+            ], 8, _hoisted_1$z),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
             }, [
               createVNode(KdsLoadingSpinner, {
                 size: iconSize.value,
-                variant: props.variant === "filled" ? "onPrimary" : "onSurface"
+                variant: __props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$k)
+            ], 8, _hoisted_2$l)
           ], 2)
         ]),
         _: 1
@@ -1185,7 +1191,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["__scopeId", "data-v-ec08a9ba"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$P, [["__scopeId", "data-v-d38d7ade"]]);
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1195,8 +1201,8 @@ const kdsProgressButtonState = {
 };
 const kdsProgressButtonStates = Object.values(kdsProgressButtonState);
-const _hoisted_1$v = { class: "kds-empty-state" };
-const _hoisted_2$j = { class: "kds-empty-state-headline" };
+const _hoisted_1$y = { class: "kds-empty-state" };
+const _hoisted_2$k = { class: "kds-empty-state-headline" };
 const _hoisted_3$d = {
   key: 1,
   class: "kds-empty-state-description"
@@ -1205,7 +1211,7 @@ const _hoisted_4$9 = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -1221,10 +1227,10 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$O : _sfc_main$P
+      () => isLinkButton.value ? _sfc_main$R : _sfc_main$S
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$y, [
         props.loadingSpinner ? (openBlock(), createBlock(KdsLoadingSpinner, {
           key: 0,
           "data-testid": "loading-spinner",
@@ -1232,7 +1238,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$j, toDisplayString(props.headline), 1),
+        createElementVNode("p", _hoisted_2$k, toDisplayString(props.headline), 1),
         props.description ? (openBlock(), createElementBlock("p", _hoisted_3$d, toDisplayString(props.description), 1)) : createCommentVNode("", true),
         props.button ? (openBlock(), createElementBlock("div", _hoisted_4$9, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
@@ -1244,9 +1250,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$L, [["__scopeId", "data-v-02149081"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc$1(_sfc_main$O, [["__scopeId", "data-v-02149081"]]);
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -1254,7 +1260,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false }
   },
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled"]);
     return (_ctx, _cache) => {
       return props.accessory.type === "avatar" ? (openBlock(), createBlock(KdsAvatar, {
         key: 0,
@@ -1271,12 +1277,12 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         key: 2,
         name: props.accessory.name,
         size: props.size,
-        disabled: props.disabled
+        disabled: __props.disabled
       }, null, 8, ["name", "size", "disabled"])) : props.accessory.type === "dataType" ? (openBlock(), createBlock(KdsDataType, {
         key: 3,
         "icon-name": props.accessory.name,
         size: props.size,
-        disabled: props.disabled
+        disabled: __props.disabled
       }, null, 8, ["icon-name", "size", "disabled"])) : props.accessory.type === "liveStatus" ? (openBlock(), createBlock(unref(KdsLiveStatus), {
         key: 4,
         status: props.accessory.status,
@@ -1297,8 +1303,8 @@ const kdsListItemVariant = {
   LARGE: "large"
 };
-const _hoisted_1$u = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$i = {
+const _hoisted_1$x = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_2$j = {
   key: 0,
   class: "accessory"
 };
@@ -1318,16 +1324,16 @@ const _hoisted_9 = {
   key: 2,
   class: "trailing-item-reserve-space"
 };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
     label: {},
-    accessory: { default: void 0 },
-    subText: { default: void 0 },
-    variant: { default: kdsListItemVariant.SMALL },
-    shortcut: { default: void 0 },
-    trailingIcon: { default: void 0 },
+    accessory: {},
+    subText: {},
+    variant: { default: () => kdsListItemVariant.SMALL },
+    shortcut: {},
+    trailingIcon: {},
     special: { type: Boolean, default: false },
     selected: { type: Boolean, default: false },
     active: { type: Boolean, default: false },
@@ -1337,13 +1343,13 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["variant", "special", "selected", "active", "missing", "disabled", "role"]);
     const emit = __emit;
     const accessorySize = computed(
-      () => props.variant === kdsListItemVariant.LARGE ? kdsListItemAccessorySize.LARGE : kdsListItemAccessorySize.SMALL
+      () => __props.variant === kdsListItemVariant.LARGE ? kdsListItemAccessorySize.LARGE : kdsListItemAccessorySize.SMALL
     );
     const onClick = (event) => {
-      if (props.disabled) {
+      if (__props.disabled) {
         event.stopPropagation();
         event.preventDefault();
         return;
@@ -1357,26 +1363,26 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         id: props.id,
-        role: props.role,
-        "aria-selected": props.role === "option" ? props.selected : void 0,
-        "aria-disabled": props.disabled,
+        role: __props.role,
+        "aria-selected": __props.role === "option" ? __props.selected : void 0,
+        "aria-disabled": __props.disabled,
         class: normalizeClass([
           "kds-list-item",
-          props.variant,
+          __props.variant,
           {
-            selected: props.selected,
-            active: props.active,
-            missing: props.missing,
-            disabled: props.disabled
+            selected: __props.selected,
+            active: __props.active,
+            missing: __props.missing,
+            disabled: __props.disabled
           }
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$i, [
-          createVNode(_sfc_main$K, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$j, [
+          createVNode(_sfc_main$N, {
             accessory: props.accessory,
             size: accessorySize.value,
-            disabled: props.disabled
+            disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_3$c, [
@@ -1386,9 +1392,9 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             class: "label",
             title: unref(isLabelTruncated) ? props.label : void 0
           }, [
-            props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$6, "(Missing) ")) : createCommentVNode("", true),
+            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$6, "(Missing) ")) : createCommentVNode("", true),
             createElementVNode("span", {
-              class: normalizeClass({ special: props.special })
+              class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.label), 3)
           ], 8, _hoisted_4$8),
           props.subText ? (openBlock(), createElementBlock("span", {
@@ -1407,29 +1413,29 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             size: "small"
           }, null, 8, ["name"])) : (openBlock(), createElementBlock("span", _hoisted_9))
         ])
-      ], 10, _hoisted_1$u);
+      ], 10, _hoisted_1$x);
     };
   }
 });
-const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["__scopeId", "data-v-7fba4bc1"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$M, [["__scopeId", "data-v-3dac6df5"]]);
-const _sfc_main$I = {  };
+const _sfc_main$L = {  };
-const _hoisted_1$t = { class: "kds-list-item-divider" };
+const _hoisted_1$w = { class: "kds-list-item-divider" };
 function _sfc_render$8(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$t))
+  return (openBlock(), createElementBlock("hr", _hoisted_1$w))
 }
-const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$I, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
+const ListItemDivider = /*#__PURE__*/_export_sfc$1(_sfc_main$L, [['render',_sfc_render$8],['__scopeId',"data-v-3ee92695"]]);
-const _hoisted_1$s = { class: "kds-list-item-section-title" };
-const _hoisted_2$h = {
+const _hoisted_1$v = { class: "kds-list-item-section-title" };
+const _hoisted_2$i = {
   key: 0,
   class: "icon"
 };
 const _hoisted_3$b = ["title"];
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -1440,8 +1446,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$i, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -1458,16 +1464,16 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-53382531"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc$1(_sfc_main$K, [["__scopeId", "data-v-53382531"]]);
-const _hoisted_1$r = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
-const _hoisted_2$g = ["role"];
+const _hoisted_1$u = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_2$h = ["role"];
 const loadingStateText = "Loading entries";
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
-    variant: { default: kdsListItemVariant.SMALL },
+    variant: { default: () => kdsListItemVariant.SMALL },
     emptyText: { default: "" },
     loading: { type: Boolean, default: false },
     ariaLabel: {},
@@ -1477,7 +1483,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   },
   emits: ["itemClick"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["emptyText", "variant", "loading", "role", "allowNoSelection"]);
     const emit = __emit;
     const idPrefix = useId();
     const emptyOptionId = `${idPrefix}-empty`;
@@ -1488,7 +1494,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       return elementId?.slice(idPrefix.length + 1);
     }
     const prefixedValues = computed(
-      () => (props.loading ? [] : props.possibleValues).map((o) => ({
+      () => (__props.loading ? [] : props.possibleValues).map((o) => ({
         ...o,
         id: `${idPrefix}-${o.id}`
       }))
@@ -1501,7 +1507,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const isFocused = ref(false);
     const containerEl = useTemplateRef("containerEl");
     const listItemRole = computed(() => {
-      return props.role === "listbox" ? "option" : "menuitem";
+      return __props.role === "listbox" ? "option" : "menuitem";
     });
     function scrollToView() {
       if (!activeId.value || !containerEl.value) {
@@ -1546,8 +1552,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       const stillValid = values.some((o) => o.id === activeId.value);
       return stillValid ? activeId.value : firstEnabledOrEmpty(values);
     };
-    watch([enabledValues, () => props.loading], ([values, loading]) => {
-      activeId.value = loading ? emptyOptionId : getResetActiveId(values);
+    watch([enabledValues, () => __props.loading], ([values, isLoading]) => {
+      activeId.value = isLoading ? emptyOptionId : getResetActiveId(values);
       const lastIdStillValid = values.some((o) => o.id === lastActiveId.value);
       if (!lastIdStillValid) {
         lastActiveId.value = void 0;
@@ -1558,7 +1564,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const findEnabledIndex = (id) => id === void 0 ? -1 : enabledValues.value.findIndex((o) => o.id === id);
     const handleFocus = () => {
       isFocused.value = true;
-      if (activeId.value === void 0 && !props.allowNoSelection) {
+      if (activeId.value === void 0 && !__props.allowNoSelection) {
         activeId.value = lastActiveId.value ?? enabledValues.value[0]?.id;
       }
     };
@@ -1572,12 +1578,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         return enabledValues.value[0].id;
       }
       if (currentIndex >= enabledValues.value.length - 1) {
-        return props.allowNoSelection ? void 0 : enabledValues.value[0].id;
+        return __props.allowNoSelection ? void 0 : enabledValues.value[0].id;
       }
       return enabledValues.value[currentIndex + 1].id;
     };
     const moveUp = (currentIndex) => {
-      if (props.allowNoSelection && currentIndex === 0) {
+      if (__props.allowNoSelection && currentIndex === 0) {
         return void 0;
       }
       if (currentIndex <= 0) {
@@ -1639,8 +1645,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
         ref_key: "containerEl",
         ref: containerEl,
-        role: props.role,
-        "aria-busy": props.loading,
+        role: __props.role,
+        "aria-busy": __props.loading,
         "aria-label": props.ariaLabel,
         "aria-activedescendant": !props.controlledExternally && activeId.value ? activeId.value : void 0,
         class: ["kds-list-container", { standalone: !props.controlledExternally }],
@@ -1672,7 +1678,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
               active: activeId.value === item.id,
               special: item.special,
               missing: item.missing,
-              variant: props.variant,
+              variant: __props.variant,
               "trailing-icon": item.missing && !item.disabled ? "trash" : item.selected ? "checkmark" : void 0,
               role: listItemRole.value,
               onMousedown: _cache[0] || (_cache[0] = ($event) => props.controlledExternally && $event.preventDefault()),
@@ -1694,32 +1700,32 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           class: "kds-list-container-empty"
         }, [
           createVNode(KdsEmptyState, {
-            headline: props.loading ? loadingStateText : props.emptyText,
-            "loading-spinner": props.loading
+            headline: __props.loading ? loadingStateText : __props.emptyText,
+            "loading-spinner": __props.loading
           }, null, 8, ["headline", "loading-spinner"])
-        ], 8, _hoisted_2$g)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$r);
+        ], 8, _hoisted_2$h)) : createCommentVNode("", true)
+      ], 16, _hoisted_1$u);
     };
   }
 });
-const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["__scopeId", "data-v-9b505d0b"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$J, [["__scopeId", "data-v-710126a1"]]);
 const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsListContainer
 }, Symbol.toStringTag, { value: 'Module' }));
-const _hoisted_1$q = ["id", "popover", "role"];
-const _hoisted_2$f = {
+const _hoisted_1$t = ["id", "popover", "role"];
+const _hoisted_2$g = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     placement: { default: "bottom-left" },
-    role: { default: void 0 },
+    role: {},
     popoverType: { default: "auto" },
     fullWidth: { type: Boolean, default: false },
     content: {}
@@ -1729,7 +1735,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["placement", "popoverType", "fullWidth"]);
     const open = useModel(__props, "modelValue");
     const popoverEl = useTemplateRef("popoverEl");
     const popoverId = useId();
@@ -1751,28 +1757,28 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         id: unref(popoverId),
         ref_key: "popoverEl",
         ref: popoverEl,
-        class: normalizeClass(["kds-popover", ["floating", props.placement, { "full-width": props.fullWidth }]]),
-        popover: props.popoverType,
+        class: normalizeClass(["kds-popover", ["floating", __props.placement, { "full-width": __props.fullWidth }]]),
+        popover: __props.popoverType,
         style: normalizeStyle({ "position-anchor": anchorName }),
         role: props.role,
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$f, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$g, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
-      ], 46, _hoisted_1$q);
+      ], 46, _hoisted_1$t);
     };
   }
 });
-const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-6e5d3976"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$I, [["__scopeId", "data-v-914e6d2e"]]);
 const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   default: KdsPopover
 }, Symbol.toStringTag, { value: 'Module' }));
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1787,32 +1793,32 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     trailingIcon: {},
     ariaLabel: {},
     items: {},
-    menuMaxHeight: { default: void 0 }
+    menuMaxHeight: {}
   },
   emits: ["itemClick"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["variant", "menuMaxHeight"]);
     const attrs = useAttrs();
     const emit = __emit;
     const toggleButtonProps = computed(() => {
-      const { items: _items, menuMaxHeight: _menuMaxHeight, ...rest } = props;
+      const { items: _items, ...rest } = props;
       const {
         modelValue: _modelValue,
         "onUpdate:modelValue": _onUpdateModelValue,
         ...safeAttrs
       } = attrs;
-      return { ...safeAttrs, ...rest };
+      return { ...safeAttrs, ...rest, variant: __props.variant };
     });
     const isMenuOpen = ref(false);
     const popoverEl = useTemplateRef("popoverEl");
     const listContainerEl = useTemplateRef("listContainerEl");
     const menuId = useId();
     const maxHeightStyle = computed(() => {
-      if (!props.menuMaxHeight) {
+      if (!__props.menuMaxHeight) {
         return {};
       }
       return {
-        maxHeight: props.menuMaxHeight,
+        maxHeight: __props.menuMaxHeight,
         overflowY: "auto"
       };
     });
@@ -1825,7 +1831,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$N, mergeProps({
+        createVNode(_sfc_main$Q, mergeProps({
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event)
         }, toggleButtonProps.value, {
@@ -1870,7 +1876,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsMenuButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-b9edc498"]]);
+const KdsMenuButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$H, [["__scopeId", "data-v-0257e1cd"]]);
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -1886,26 +1892,26 @@ const kdsButtonVariant = {
 };
 const kdsButtonVariants = Object.values(kdsButtonVariant);
-const _hoisted_1$p = { class: "kds-label-wrapper" };
-const _hoisted_2$e = ["id", "for", "title"];
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = { class: "kds-label-wrapper" };
+const _hoisted_2$f = ["id", "for", "title"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
     id: {},
     for: {},
-    description: { default: void 0 },
+    description: {},
     showDescriptionButton: { type: Boolean, default: false }
   },
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["showDescriptionButton"]);
     const KdsInfoToggleButton = defineAsyncComponent(
       () => Promise.resolve().then(() => KdsInfoToggleButton$1)
     );
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -1913,22 +1919,22 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$e),
+        }, toDisplayString(props.label), 9, _hoisted_2$f),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
-          hidden: !props.showDescriptionButton
+          hidden: !__props.showDescriptionButton
         }, null, 8, ["content", "hidden"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$D, [["__scopeId", "data-v-11fbd55f"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc$1(_sfc_main$G, [["__scopeId", "data-v-13bea091"]]);
-const _hoisted_1$o = ["id"];
-const _hoisted_2$d = { class: "subtext-text" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["id"];
+const _hoisted_2$e = { class: "subtext-text" };
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -1938,37 +1944,37 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     preserveSubTextSpace: { type: Boolean, default: false }
   },
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["error", "validating", "preserveSubTextSpace"]);
     return (_ctx, _cache) => {
-      return props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
+      return props.subText || __props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
         key: 0,
         id: props.id,
         class: normalizeClass({
           subtext: true,
-          error: props.error
+          error: __props.error
         })
       }, [
-        props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
+        __props.error && props.subText ? (openBlock(), createBlock(KdsIcon, {
           key: 0,
           name: "circle-error",
           size: "small",
           "aria-label": "Error"
-        })) : props.validating && props.subText ? (openBlock(), createBlock(KdsLoadingSpinner, {
+        })) : __props.validating && props.subText ? (openBlock(), createBlock(KdsLoadingSpinner, {
           key: 1,
           size: "small",
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$d, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$o)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$e, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$r)) : createCommentVNode("", true);
     };
   }
 });
-const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-df9a85a4"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc$1(_sfc_main$F, [["__scopeId", "data-v-2e6ba10c"]]);
-const _hoisted_1$n = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$c = { class: "control" };
+const _hoisted_1$q = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$d = { class: "control" };
 const _hoisted_3$a = {
   key: 0,
   class: "content"
@@ -1979,7 +1985,7 @@ const _hoisted_6$3 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1995,7 +2001,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error"]);
     const modelValue = useModel(__props, "modelValue");
     const helperId = useId();
     const descriptionId = useId();
@@ -2027,7 +2033,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       return ids.length > 0 ? ids.join(" ") : void 0;
     });
     const handleClick = () => {
-      if (props.disabled) {
+      if (__props.disabled) {
         return;
       }
       modelValue.value = isIndeterminate.value ? true : !isChecked.value;
@@ -2039,20 +2045,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             checkbox: true,
             checked: isChecked.value,
             indeterminate: isIndeterminate.value,
-            disabled: props.disabled,
-            error: props.error
+            disabled: __props.disabled,
+            error: __props.error
           }),
-          disabled: props.disabled,
+          disabled: __props.disabled,
           title: props.title,
           "aria-label": props.title,
           "aria-checked": ariaChecked.value,
           "aria-describedby": ariaDescribedBy.value,
-          "aria-invalid": props.error,
+          "aria-invalid": __props.error,
           type: "button",
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$c, [
+          createElementVNode("div", _hoisted_2$d, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -2068,13 +2074,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               class: "helper-text"
             }, toDisplayString(props.helperText), 9, _hoisted_5$5)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$n),
+        ], 10, _hoisted_1$q),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
             "sub-text": props.subText,
             "preserve-sub-text-space": props.preserveSubTextSpace,
-            error: props.error
+            error: __props.error
           }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
         ])) : createCommentVNode("", true)
       ]);
@@ -2082,9 +2088,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
-const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-32f17780"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc$1(_sfc_main$E, [["__scopeId", "data-v-7bfc5667"]]);
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2099,25 +2105,23 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseCheckbox, {
+      return openBlock(), createBlock(BaseCheckbox, mergeProps({
         modelValue: modelValue.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-        disabled: props.disabled,
-        error: props.error,
-        label: props.label,
-        title: props.title,
-        "sub-text": props.subText,
-        "preserve-sub-text-space": props.preserveSubTextSpace
-      }, null, 8, ["modelValue", "disabled", "error", "label", "title", "sub-text", "preserve-sub-text-space"]);
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+      }, props, {
+        disabled: __props.disabled,
+        error: __props.error,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
+      }), null, 16, ["modelValue", "disabled", "error", "preserve-sub-text-space"]);
     };
   }
 });
-const _hoisted_1$m = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2134,7 +2138,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error", "alignment"]);
     const modelValue = useModel(__props, "modelValue");
     const possibleValues = computed(
       () => props.possibleValues.map((o) => {
@@ -2146,10 +2150,10 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     );
     const labelId = useId();
     const descriptionId = useId();
-    const isOptionDisabled = (index) => props.disabled || possibleValues.value[index]?.disabled === true;
-    const isHorizontal = computed(() => props.alignment === "horizontal");
+    const isOptionDisabled = (index) => __props.disabled || possibleValues.value[index]?.disabled === true;
+    const isHorizontal = computed(() => __props.alignment === "horizontal");
     const hasError = computed(
-      () => props.error || possibleValues.value.some((o) => o.error)
+      () => __props.error || possibleValues.value.some((o) => o.error)
     );
     const isChecked = (id) => modelValue.value.includes(id);
     const handleCheckboxChange = (index, checked) => {
@@ -2185,7 +2189,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               class: "option"
             }, [
               createVNode(BaseCheckbox, {
-                disabled: props.disabled || option.disabled,
+                disabled: __props.disabled || option.disabled,
                 error: option.error,
                 "helper-text": option.helperText,
                 label: option.text,
@@ -2201,12 +2205,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: hasError.value
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$m);
+      ], 8, _hoisted_1$p);
     };
   }
 });
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-c38eeda5"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-e2e58cad"]]);
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -2222,8 +2226,8 @@ const kdsCheckboxValue = {
 };
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
-const _hoisted_1$l = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$b = { class: "control" };
+const _hoisted_1$o = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$c = { class: "control" };
 const _hoisted_3$9 = {
   key: 0,
   class: "dot",
@@ -2234,7 +2238,7 @@ const _hoisted_3$9 = {
 const _hoisted_4$6 = { class: "content" };
 const _hoisted_5$4 = { class: "label" };
 const _hoisted_6$2 = ["id"];
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -2247,11 +2251,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error"]);
     const modelValue = useModel(__props, "modelValue");
     const id = useId();
     const handleClick = () => {
-      if (props.disabled) {
+      if (__props.disabled) {
         return;
       }
       if (!modelValue.value) {
@@ -2262,19 +2266,19 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("button", {
         "aria-checked": modelValue.value,
         "aria-describedby": props.helperText ? `${unref(id)}-helper` : void 0,
-        "aria-invalid": props.error,
+        "aria-invalid": __props.error,
         class: normalizeClass({
           radio: true,
           selected: modelValue.value,
-          disabled: props.disabled,
-          error: props.error
+          disabled: __props.disabled,
+          error: __props.error
         }),
-        disabled: props.disabled,
+        disabled: __props.disabled,
         role: "radio",
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$b, [
+        createElementVNode("div", _hoisted_2$c, [
           modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$9, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
@@ -2291,12 +2295,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             class: "helper-text"
           }, toDisplayString(props.helperText), 9, _hoisted_6$2)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$l);
+      ], 10, _hoisted_1$o);
     };
   }
 });
-const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$y, [["__scopeId", "data-v-27c361e4"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-f4f6392a"]]);
 const useRadioSelection = ({
   selectedId,
@@ -2418,8 +2422,8 @@ const useRadioSelection = ({
   };
 };
-const _hoisted_1$k = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2435,7 +2439,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "alignment"]);
     const modelValue = useModel(__props, "modelValue");
     const options = computed(
       () => props.possibleValues.map((o) => {
@@ -2452,7 +2456,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const { tabIndexForOption, handleClick, handleKeyDown, hasError } = useRadioSelection({
       selectedId: modelValue,
       options,
-      globalDisable: computed(() => props.disabled),
+      globalDisable: computed(() => __props.disabled),
       optionContainer
     });
     return (_ctx, _cache) => {
@@ -2471,7 +2475,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           ref_key: "optionContainer",
           ref: optionContainer,
-          class: normalizeClass({ options: true, horizontal: props.alignment === "horizontal" })
+          class: normalizeClass({ options: true, horizontal: __props.alignment === "horizontal" })
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option, index) => {
             return openBlock(), createElementBlock("div", {
@@ -2479,7 +2483,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               class: "option"
             }, [
               createVNode(KdsRadioButton, {
-                disabled: props.disabled || option.disabled,
+                disabled: __props.disabled || option.disabled,
                 error: option.error,
                 "helper-text": option.helperText,
                 text: option.text,
@@ -2498,22 +2502,22 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: unref(hasError)
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$k);
+      ], 8, _hoisted_1$n);
     };
   }
 });
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$x, [["__scopeId", "data-v-9cc4dcdd"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc$1(_sfc_main$A, [["__scopeId", "data-v-206fe061"]]);
-const _hoisted_1$j = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
     disabled: { type: Boolean, default: false },
     size: { default: "medium" },
     variant: { default: "default" },
-    tabIndex: { default: void 0 },
+    tabIndex: {},
     hideIcons: { type: Boolean },
     text: {},
     leadingIcon: {},
@@ -2521,7 +2525,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     title: {}
   },
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "size", "variant", "tabIndex"]);
     const optionTextEl = useTemplateRef("optionTextEl");
     const { isTruncated } = useKdsIsTruncated(optionTextEl);
     return (_ctx, _cache) => {
@@ -2532,18 +2536,18 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         class: normalizeClass({
           option: true,
           selected: props.selected,
-          disabled: props.disabled,
-          "variant-muted": props.variant === "muted",
-          "size-small": props.size === "small"
+          disabled: __props.disabled,
+          "variant-muted": __props.variant === "muted",
+          "size-small": __props.size === "small"
         }),
-        disabled: props.disabled,
-        tabindex: props.tabIndex,
+        disabled: __props.disabled,
+        tabindex: __props.tabIndex,
         title: props.title ?? (unref(isTruncated) && props.text ? props.text : void 0)
       }, [
         props.leadingIcon && (!props.hideIcons || !props.text) ? (openBlock(), createBlock(KdsIcon, {
           key: 0,
           name: props.leadingIcon,
-          size: props.size
+          size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
         props.text ? (openBlock(), createElementBlock("span", {
           key: 1,
@@ -2554,14 +2558,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         props.trailingIcon && !props.hideIcons ? (openBlock(), createBlock(KdsIcon, {
           key: 2,
           name: props.trailingIcon,
-          size: props.size
+          size: __props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$j);
+      ], 10, _hoisted_1$m);
     };
   }
 });
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$w, [["__scopeId", "data-v-93f3f577"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc$1(_sfc_main$z, [["__scopeId", "data-v-65986f11"]]);
 const useValueSwitchIconHiding = ({
   width,
@@ -2612,8 +2616,8 @@ const useValueSwitchIconHiding = ({
   };
 };
-const _hoisted_1$i = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2631,7 +2635,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "size", "variant"]);
     const modelValue = useModel(__props, "modelValue");
     const options = computed(
       () => props.possibleValues.map((o) => {
@@ -2655,7 +2659,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const { tabIndexForOption, handleClick, handleKeyDown } = useRadioSelection({
       selectedId: modelValue,
       options,
-      globalDisable: computed(() => props.disabled),
+      globalDisable: computed(() => __props.disabled),
       optionContainer
     });
     return (_ctx, _cache) => {
@@ -2666,7 +2670,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         role: "radiogroup",
         class: normalizeClass({
           "value-switch": true,
-          "size-small": props.size === "small"
+          "size-small": __props.size === "small"
         }),
         "aria-invalid": props.error || void 0,
         "aria-labelledby": props.label ? unref(labelId) : void 0,
@@ -2690,14 +2694,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             }, { ref_for: true }, option, {
               "hide-icons": unref(shouldHideIcons),
               selected: modelValue.value === option.id,
-              disabled: props.disabled || option.disabled,
-              size: props.size,
-              variant: props.variant,
+              disabled: __props.disabled || option.disabled,
+              size: __props.size,
+              variant: __props.variant,
               "tab-index": unref(tabIndexForOption)(index),
-              title: option.title,
               onClick: () => unref(handleClick)(index),
               onKeydown: ($event) => unref(handleKeyDown)($event, index)
-            }), null, 16, ["hide-icons", "selected", "disabled", "size", "variant", "tab-index", "title", "onClick", "onKeydown"]);
+            }), null, 16, ["hide-icons", "selected", "disabled", "size", "variant", "tab-index", "onClick", "onKeydown"]);
           }), 128))
         ], 2),
         createVNode(KdsSubText, {
@@ -2706,12 +2709,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: props.error
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$l);
     };
   }
 });
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["__scopeId", "data-v-666d4c10"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc$1(_sfc_main$y, [["__scopeId", "data-v-2800bea3"]]);
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -2731,7 +2734,7 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -2783,13 +2786,13 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$u, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc$1(_sfc_main$x, [["__scopeId", "data-v-5d99c134"]]);
-const _hoisted_1$h = {
+const _hoisted_1$k = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$a = {
+const _hoisted_2$b = {
   key: 1,
   class: "leading-slot"
 };
@@ -2803,45 +2806,45 @@ const _hoisted_6$1 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
-    id: { default: void 0 },
+    id: {},
     type: { default: "text" },
-    min: { default: void 0 },
-    max: { default: void 0 },
-    ariaExpanded: { type: Boolean, default: void 0 },
-    step: { default: void 0 },
-    placeholder: { default: void 0 },
+    min: {},
+    max: {},
+    ariaExpanded: { type: Boolean, default: () => void 0 },
+    step: {},
+    placeholder: {},
     disabled: { type: Boolean, default: false },
-    leadingIcon: { default: void 0 },
-    trailingIcon: { default: void 0 },
+    leadingIcon: {},
+    trailingIcon: {},
     error: { type: Boolean, default: false },
-    autocomplete: { default: void 0 },
-    ariaLabel: { default: void 0 },
-    ariaLabelledby: { default: void 0 },
-    ariaDescribedby: { default: void 0 },
-    ariaInvalid: { type: Boolean, default: void 0 },
-    role: { default: void 0 },
-    ariaValuenow: { default: void 0 },
-    ariaValuemin: { default: void 0 },
-    ariaValuemax: { default: void 0 },
-    ariaValuetext: { default: void 0 },
-    ariaActivedescendant: { default: void 0 },
-    ariaHaspopup: { default: void 0 },
-    ariaControls: { default: void 0 },
-    ariaAutocomplete: { default: void 0 },
-    unit: { default: void 0 },
-    inputmode: { default: void 0 },
+    autocomplete: {},
+    ariaLabel: {},
+    ariaLabelledby: {},
+    ariaDescribedby: {},
+    ariaInvalid: { type: Boolean, default: () => void 0 },
+    role: {},
+    ariaValuenow: {},
+    ariaValuemin: {},
+    ariaValuemax: {},
+    ariaValuetext: {},
+    ariaActivedescendant: {},
+    ariaHaspopup: {},
+    ariaControls: {},
+    ariaAutocomplete: {},
+    unit: {},
+    inputmode: {},
     clearable: { type: Boolean, default: false },
-    pattern: { default: void 0 }
+    pattern: {}
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
   }),
   emits: /* @__PURE__ */ mergeModels(["focus", "blur", "keydown", "input", "click"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["type", "disabled", "error", "clearable", "ariaExpanded", "ariaInvalid"]);
     const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
     const inputRef = useTemplateRef("input");
@@ -2877,28 +2880,28 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass({
           container: true,
-          error: props.error,
-          disabled: props.disabled
+          error: __props.error,
+          disabled: __props.disabled
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
           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$a, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
           id: props.id,
           ref: "input",
           value: modelValue.value,
-          type: props.type,
+          type: __props.type,
           inputmode: props.inputmode,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: __props.disabled,
           autocomplete: props.autocomplete,
           min: props.min,
           max: props.max,
@@ -2906,7 +2909,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           "aria-label": props.ariaLabel,
           "aria-labelledby": props.ariaLabelledby,
           "aria-describedby": props.ariaDescribedby,
-          "aria-invalid": props.ariaInvalid,
+          "aria-invalid": __props.ariaInvalid,
           role: props.role,
           pattern: props.pattern,
           "aria-valuenow": props.ariaValuenow,
@@ -2916,7 +2919,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           "aria-activedescendant": props.ariaActivedescendant,
           "aria-haspopup": props.ariaHaspopup,
           "aria-controls": props.ariaControls,
-          "aria-expanded": props.ariaExpanded,
+          "aria-expanded": __props.ariaExpanded,
           "aria-autocomplete": props.ariaAutocomplete,
           class: normalizeClass({ "input-field": true, "has-value": hasValue.value }),
           onInput: handleInput,
@@ -2930,18 +2933,18 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           class: normalizeClass({
             unit: true,
             placeholder: showUnitPlaceholder.value,
-            disabled: props.disabled
+            disabled: __props.disabled
           }),
-          "aria-disabled": props.disabled || void 0
+          "aria-disabled": __props.disabled || void 0
         }, toDisplayString(props.unit), 11, _hoisted_4$5)) : createCommentVNode("", true),
-        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$P, {
+        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$S, {
           key: 3,
           class: "clear-button",
           type: "button",
           size: "xsmall",
           variant: "transparent",
           "leading-icon": "x-close",
-          "aria-label": "Clear",
+          ariaLabel: "Clear",
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
@@ -2958,7 +2961,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
-const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$t, [["__scopeId", "data-v-380127b2"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$w, [["__scopeId", "data-v-92291903"]]);
 const usePointerHandler = (updateFromEvent) => {
   const activePointerId = ref(null);
@@ -2998,7 +3001,7 @@ const usePointerHandler = (updateFromEvent) => {
   };
 };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3019,7 +3022,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const baseInput = useTemplateRef("baseInput");
     const popoverRef = useTemplateRef("popoverRef");
@@ -3101,9 +3104,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         "aria-label": props.ariaLabel,
         description: props.description,
         "sub-text": props.subText,
-        error: props.error,
-        validating: props.validating,
-        "preserve-sub-text-space": props.preserveSubTextSpace
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
       }, {
         default: withCtx((slotProps) => [
           createVNode(BaseInput, mergeProps({
@@ -3114,8 +3117,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             type: "text",
             placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
+            disabled: __props.disabled,
+            error: __props.error,
             autocomplete: hasSuggestions.value ? "off" : props.autocomplete,
             role: hasSuggestions.value ? "combobox" : void 0,
             "aria-haspopup": hasSuggestions.value ? "listbox" : void 0,
@@ -3159,7 +3162,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$s, [["__scopeId", "data-v-e06ba773"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$v, [["__scopeId", "data-v-5a8cd710"]]);
 const HEX_RADIX = 16;
 const RGB_MAX = 255;
@@ -3281,8 +3284,8 @@ const hsvToRgb = ({ h, s, v }) => {
 };
 const hsvToHex = (hsv) => rgbToHex(hsvToRgb(hsv));
-const _hoisted_1$g = { class: "kds-color-picker" };
-const _hoisted_2$9 = ["aria-valuetext"];
+const _hoisted_1$j = { class: "kds-color-picker" };
+const _hoisted_2$a = ["aria-valuetext"];
 const _hoisted_3$7 = ["aria-valuenow", "aria-valuetext"];
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
@@ -3295,7 +3298,7 @@ const KEYBOARD_LARGE_STEP = 0.1;
 const HUE_KEYBOARD_STEP_DEG = 1;
 const HUE_KEYBOARD_LARGE_STEP_DEG = 10;
 const TO_BOTTOM_GRADIENT = "linear-gradient(to bottom, transparent, black)";
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     "modelValue": { default: "" },
@@ -3446,7 +3449,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         createElementVNode("div", {
           ref_key: "colorspaceEl",
           ref: colorspaceEl,
@@ -3475,7 +3478,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$9),
+        ], 44, _hoisted_2$a),
         createElementVNode("div", {
           ref_key: "hueEl",
           ref: hueEl,
@@ -3508,7 +3511,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         ], 40, _hoisted_3$7),
         createVNode(KdsTextInput, {
           "model-value": modelValue.value,
-          "aria-label": "Color hex value",
+          ariaLabel: "Color hex value",
           placeholder: "#FFFFFF",
           "onUpdate:modelValue": updateFromTextValue
         }, null, 8, ["model-value"])
@@ -3517,7 +3520,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
-const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$r, [["__scopeId", "data-v-2a488ace"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$u, [["__scopeId", "data-v-74392b20"]]);
 const HEX_LENGTH_1 = 1;
 const HEX_LENGTH_2 = 2;
@@ -3577,7 +3580,7 @@ const useColorInputValidationOnFocusOut = (modelValue) => {
   return { handleFocusOut };
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "KdsColorInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3590,14 +3593,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     preserveSubTextSpace: { type: Boolean, default: false },
     placeholder: { default: "#FFFFFF" },
     disabled: { type: Boolean, default: false },
-    autocomplete: { default: void 0 }
+    autocomplete: {}
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const open = ref(false);
     const popoverEl = useTemplateRef("popoverEl");
@@ -3606,12 +3609,16 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     );
     const { handleFocusOut } = useColorInputValidationOnFocusOut(modelValue);
     const onClickColorSwatch = () => {
-      if (!props.disabled) {
+      if (!__props.disabled) {
         open.value = !open.value;
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+      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),
@@ -3621,9 +3628,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             createVNode(BaseInput, mergeProps(slotProps, {
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
-              placeholder: props.placeholder,
-              disabled: props.disabled,
-              error: props.error,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              error: __props.error,
               autocomplete: props.autocomplete
             }), {
               leading: withCtx(() => [
@@ -3631,21 +3638,21 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                   size: "large",
                   color: swatchColor.value,
                   "aria-hidden": true,
-                  style: normalizeStyle({ cursor: props.disabled ? "default" : "pointer" }),
+                  style: normalizeStyle({ cursor: __props.disabled ? "default" : "pointer" }),
                   onClick: onClickColorSwatch
                 }, null, 8, ["color", "style"])
               ]),
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$N), {
+                createVNode(unref(_sfc_main$Q), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
                   variant: "outlined",
                   "leading-icon": "color-picker",
-                  "aria-label": "Open color picker",
+                  ariaLabel: "Open color picker",
                   "aria-controls": popoverEl.value?.popoverId,
                   "aria-haspopup": "dialog",
-                  disabled: props.disabled,
+                  disabled: __props.disabled,
                   title: open.value ? "Close color picker" : "Open color picker"
                 }, null, 8, ["modelValue", "aria-controls", "disabled", "title"])
               ]),
@@ -3671,12 +3678,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ], 36)
         ]),
         _: 1
-      }, 16);
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "KdsPasswordInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3699,13 +3706,13 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "variant", "showVisibilityToggle"]);
     const modelValue = useModel(__props, "modelValue");
     const showValue = ref(false);
     const preventBlurFromToggle = ref(false);
     const input = useTemplateRef("input");
     const effectiveToggleLabel = computed(
-      () => props.toggleLabel ?? (props.variant === "key" ? "Key" : "Password")
+      () => props.toggleLabel ?? (__props.variant === "key" ? "Key" : "Password")
     );
     const handleBlur = () => {
       if (preventBlurFromToggle.value) {
@@ -3716,7 +3723,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       focus: () => input.value?.focus()
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+      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: "input",
@@ -3724,16 +3735,16 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           }, slotProps, {
             modelValue: modelValue.value,
             "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modelValue.value = $event),
-            type: showValue.value && props.showVisibilityToggle ? "text" : "password",
-            "leading-icon": props.variant === "key" ? "key" : "lock",
+            type: showValue.value && __props.showVisibilityToggle ? "text" : "password",
+            "leading-icon": __props.variant === "key" ? "key" : "lock",
             placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
+            disabled: __props.disabled,
+            error: __props.error,
             autocomplete: props.autocomplete,
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$N, {
+              __props.showVisibilityToggle ? (openBlock(), createBlock(_sfc_main$Q, {
                 key: 0,
                 modelValue: showValue.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showValue.value = $event),
@@ -3741,20 +3752,20 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 variant: "outlined",
                 size: "xsmall",
                 "leading-icon": "eye",
-                "aria-label": showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
+                ariaLabel: showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
                 title: showValue.value ? `Hide ${effectiveToggleLabel.value}` : `Show ${effectiveToggleLabel.value}`,
-                disabled: props.disabled,
+                disabled: __props.disabled,
                 onPointerdown: _cache[1] || (_cache[1] = ($event) => preventBlurFromToggle.value = true),
                 onPointerup: _cache[2] || (_cache[2] = ($event) => preventBlurFromToggle.value = false),
                 onPointercancel: _cache[3] || (_cache[3] = ($event) => preventBlurFromToggle.value = false),
                 onClick: _cache[4] || (_cache[4] = ($event) => preventBlurFromToggle.value = false)
-              }, null, 8, ["modelValue", "aria-label", "title", "disabled"])) : createCommentVNode("", true)
+              }, null, 8, ["modelValue", "ariaLabel", "title", "disabled"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 16, ["modelValue", "type", "leading-icon", "placeholder", "disabled", "error", "autocomplete"])
         ]),
         _: 1
-      }, 16);
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
@@ -3774,7 +3785,7 @@ const kdsPasswordInputAutocompletes = Object.values(
   kdsPasswordInputAutocomplete
 );
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "KdsUsernameInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3794,14 +3805,18 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const baseInput = useTemplateRef("baseInput");
     __expose({
       focus: () => baseInput.value?.focus()
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+      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",
@@ -3812,13 +3827,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             type: "text",
             "leading-icon": "user",
             placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
+            disabled: __props.disabled,
+            error: __props.error,
             autocomplete: props.autocomplete
           }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
         ]),
         _: 1
-      }, 16);
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
@@ -11620,11 +11635,11 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
 }
 const Popover = /* @__PURE__ */ _export_sfc(_sfc_main$k$1, [["render", _sfc_render$7]]);
 const _hoisted_1$c$1 = { class: "vc-day-popover-row" };
-const _hoisted_2$7 = {
+const _hoisted_2$7$1 = {
   key: 0,
   class: "vc-day-popover-row-indicator"
 };
-const _hoisted_3$5 = { class: "vc-day-popover-row-label" };
+const _hoisted_3$5$1 = { class: "vc-day-popover-row-label" };
 const _sfc_main$j$1 = /* @__PURE__ */ defineComponent({
   __name: "PopoverRow",
   props: {
@@ -11660,12 +11675,12 @@ const _sfc_main$j$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c$1, [
-        indicator.value ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
+        indicator.value ? (openBlock(), createElementBlock("div", _hoisted_2$7$1, [
           createElementVNode("span", {
             class: normalizeClass(indicator.value.class)
           }, null, 2)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$5, [
+        createElementVNode("div", _hoisted_3$5$1, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(_ctx.attribute.popover ? _ctx.attribute.popover.label : "No content provided"), 1)
           ])
@@ -11830,7 +11845,7 @@ const _hoisted_3$4$1 = {
   type: "button",
   class: "vc-title"
 };
-const _hoisted_4$3 = ["disabled"];
+const _hoisted_4$3$1 = ["disabled"];
 const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
   __name: "CalendarHeader",
   props: {
@@ -11984,7 +11999,7 @@ const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"])
-        ], 40, _hoisted_4$3)) : createCommentVNode("", true)
+        ], 40, _hoisted_4$3$1)) : createCommentVNode("", true)
       ], 6);
     };
   }
@@ -13610,11 +13625,11 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$i = {
   key: 0,
   class: "vc-time-header"
 };
-const _hoisted_2$8 = { class: "vc-time-weekday" };
+const _hoisted_2$9 = { class: "vc-time-weekday" };
 const _hoisted_3$6 = { class: "vc-time-month" };
 const _hoisted_4$4 = { class: "vc-time-day" };
 const _hoisted_5 = { class: "vc-time-year" };
@@ -13651,8 +13666,8 @@ 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$f, [
-              createElementVNode("span", _hoisted_2$8, toDisplayString(unref(locale).formatDate(unref(date), "WWW")), 1),
+            unref(showHeader) && unref(date) ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
+              createElementVNode("span", _hoisted_2$9, toDisplayString(unref(locale).formatDate(unref(date), "WWW")), 1),
               createElementVNode("span", _hoisted_3$6, toDisplayString(unref(locale).formatDate(unref(date), "MMM")), 1),
               createElementVNode("span", _hoisted_4$4, toDisplayString(unref(locale).formatDate(unref(date), "D")), 1),
               createElementVNode("span", _hoisted_5, toDisplayString(unref(locale).formatDate(unref(date), "YYYY")), 1)
@@ -13804,7 +13819,7 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$n = defineComponent({
+const _sfc_main$q = defineComponent({
   inheritAttrs: false,
   emits,
   props: propsDef,
@@ -13823,7 +13838,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(_component_DatePickerPopover, normalizeProps(guardReactiveProps(_ctx.$attrs)), null, 16)
   ], 64)) : (openBlock(), createBlock(_component_DatePickerBase, normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), null, 16));
 }
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render]]);
 const tryParseAnyDate = (value) => {
   if (!value) {
@@ -13871,7 +13886,7 @@ const formatDateToString = (date) => {
 const legacyDateFormat = "yyyy-MM-dd";
 const invalidDateFormatMessage = "Invalid date format. The expected date format is yyyy-MM-dd (e.g. 2026-03-11).";
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsDateInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -13952,14 +13967,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             onBlur: onTextInputBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$Q, {
                 modelValue: popoverIsVisible.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => popoverIsVisible.value = $event),
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "calendar",
-                "aria-label": "Open date picker",
+                ariaLabel: "Open date picker",
                 disabled: __props.disabled,
                 "aria-controls": popoverRef.value?.popoverId,
                 "aria-haspopup": "dialog",
@@ -14007,8 +14022,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
-const _hoisted_1$e = { class: "kds-date-time-format-popover" };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "kds-date-time-format-popover" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "DateTimeFormatPopover",
   props: /* @__PURE__ */ mergeModels({
     allDefaultFormats: {},
@@ -14146,7 +14161,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       }));
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         modeOptions.value.length > 1 ? (openBlock(), createBlock(KdsValueSwitch, {
           key: 0,
           "model-value": effectiveSelectedMode.value,
@@ -14178,9 +14193,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
-const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$l, [["__scopeId", "data-v-f75ebe1b"]]);
+const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$o, [["__scopeId", "data-v-f75ebe1b"]]);
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "KdsDateTimeFormatInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -14202,12 +14217,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __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, normalizeProps(guardReactiveProps(props)), {
+      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)
@@ -14216,24 +14235,24 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               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,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              error: __props.error,
+              validating: __props.validating,
               autocomplete: props.autocomplete
             }), {
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$N), {
+                createVNode(unref(_sfc_main$Q), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
                   variant: "outlined",
                   "leading-icon": "date-time",
-                  "aria-label": "Open date/time format picker",
+                  ariaLabel: "Open date/time format picker",
                   "aria-controls": popoverEl.value?.popoverId,
                   "aria-expanded": open.value,
                   "aria-haspopup": "dialog",
-                  disabled: props.disabled,
+                  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"])
               ]),
@@ -14263,7 +14282,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           ], 4)
         ]),
         _: 1
-      }, 16);
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
@@ -14416,7 +14435,7 @@ const createKdsNumberParser = (params) => {
 const REPEAT_INITIAL_DELAY_MS = 400;
 const REPEAT_INTERVAL_MS = 100;
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -14440,12 +14459,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
+    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 })
+      () => createKdsNumberParser({ locale: "en-US", step: __props.step })
     );
     const ariaValuenow = computed(
       () => Number.isFinite(modelValue.value) ? modelValue.value : void 0
@@ -14480,7 +14499,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     const canDecrease = computed(() => {
-      if (props.disabled) {
+      if (__props.disabled) {
         return false;
       }
       if (props.min === void 0 || Number.isNaN(props.min)) {
@@ -14492,7 +14511,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return modelValue.value > props.min;
     });
     const canIncrease = computed(() => {
-      if (props.disabled) {
+      if (__props.disabled) {
         return false;
       }
       if (props.max === void 0 || Number.isNaN(props.max)) {
@@ -14504,18 +14523,18 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return modelValue.value < props.max;
     });
     const adjustByStep = (direction) => {
-      if (props.step <= 0) {
+      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 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) {
+      if (__props.disabled) {
         return;
       }
       if (event.key === "ArrowUp" && canIncrease.value) {
@@ -14573,7 +14592,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       focus: () => baseInput.value?.focus()
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+      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",
@@ -14581,12 +14604,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           }, slotProps, {
             "model-value": localValue.value,
             type: "text",
-            inputmode: Number.isInteger(props.step) ? "numeric" : "decimal",
+            inputmode: Number.isInteger(__props.step) ? "numeric" : "decimal",
             placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
+            disabled: __props.disabled,
+            error: __props.error,
             autocomplete: props.autocomplete,
-            unit: props.unit,
+            unit: __props.unit,
             role: "spinbutton",
             "aria-valuenow": ariaValuenow.value,
             "aria-valuemin": props.min,
@@ -14598,38 +14621,38 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$P, {
+              createVNode(_sfc_main$S, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "minus",
-                "aria-label": `Decrease ${props.label ?? props.ariaLabel}`,
+                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, ["aria-label", "disabled"]),
-              createVNode(_sfc_main$P, {
+              }, null, 8, ["ariaLabel", "disabled"]),
+              createVNode(_sfc_main$S, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
                 "leading-icon": "plus",
-                "aria-label": `Increase ${props.label ?? props.ariaLabel}`,
+                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, ["aria-label", "disabled"])
+              }, null, 8, ["ariaLabel", "disabled"])
             ]),
             _: 1
           }, 16, ["model-value", "inputmode", "placeholder", "disabled", "error", "autocomplete", "unit", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext"])
         ]),
         _: 1
-      }, 16);
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
@@ -14721,7 +14744,7 @@ const parseRegexToPatternInputValue = (regex, options) => {
   return wildcard ?? body;
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsPatternInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -14741,7 +14764,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace"]);
     const regex = useModel(__props, "modelValue");
     const uiValue = ref("");
     const caseSensitive = ref(false);
@@ -14779,7 +14802,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       focus: () => baseInput.value?.focus()
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+      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",
@@ -14792,14 +14819,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ],
             type: "text",
             placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
+            disabled: __props.disabled,
+            error: __props.error,
             autocomplete: props.autocomplete,
             "leading-icon": "filter",
             clearable: ""
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$Q, {
                 modelValue: caseSensitive.value,
                 "onUpdate:modelValue": [
                   _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
@@ -14809,10 +14836,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 variant: "outlined",
                 "leading-icon": "case-sensitive",
                 title: caseSensitiveAriaLabel.value,
-                "aria-label": caseSensitiveAriaLabel.value,
-                disabled: props.disabled
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$N, {
+                ariaLabel: caseSensitiveAriaLabel.value,
+                disabled: __props.disabled
+              }, null, 8, ["modelValue", "title", "ariaLabel", "disabled"]),
+              createVNode(_sfc_main$Q, {
                 modelValue: excludeMatches.value,
                 "onUpdate:modelValue": [
                   _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
@@ -14822,10 +14849,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 variant: "outlined",
                 "leading-icon": "arrows-order",
                 title: excludeMatchesAriaLabel.value,
-                "aria-label": excludeMatchesAriaLabel.value,
-                disabled: props.disabled
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$N, {
+                ariaLabel: excludeMatchesAriaLabel.value,
+                disabled: __props.disabled
+              }, null, 8, ["modelValue", "title", "ariaLabel", "disabled"]),
+              createVNode(_sfc_main$Q, {
                 modelValue: useRegex.value,
                 "onUpdate:modelValue": [
                   _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
@@ -14835,20 +14862,20 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 variant: "outlined",
                 "leading-icon": "regex",
                 title: patternModeAriaLabel.value,
-                "aria-label": patternModeAriaLabel.value,
-                disabled: props.disabled
-              }, null, 8, ["modelValue", "title", "aria-label", "disabled"])
+                ariaLabel: patternModeAriaLabel.value,
+                disabled: __props.disabled
+              }, null, 8, ["modelValue", "title", "ariaLabel", "disabled"])
             ]),
             _: 1
           }, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
         ]),
         _: 1
-      }, 16);
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsSearchInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -14876,7 +14903,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const KdsListContainer = defineAsyncComponent(
       () => Promise.resolve().then(() => KdsListContainer$1)
     );
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const emit = __emit;
     const baseInput = useTemplateRef("baseInput");
@@ -14999,10 +15026,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-622ba27e"]]);
+const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$k, [["__scopeId", "data-v-580aa83e"]]);
-const _hoisted_1$d = ["rows", "placeholder", "disabled", "autocomplete"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["rows", "placeholder", "disabled", "autocomplete"];
+const DEFAULT_ROWS = 3;
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "KdsTextarea",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -15016,15 +15044,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     placeholder: { default: "" },
     disabled: { type: Boolean, default: false },
     autocomplete: {},
-    rows: { default: 3 }
+    rows: { default: () => DEFAULT_ROWS }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
-    const normalizedRows = computed(() => Math.max(1, props.rows));
+    const props = createPropsRestProxy(__props, ["placeholder", "rows", "disabled", "error", "validating", "preserveSubTextSpace"]);
+    const normalizedRows = computed(() => Math.max(1, __props.rows));
     const modelValue = useModel(__props, "modelValue");
     const textareaElement = useTemplateRef("textareaElement");
     function resize() {
@@ -15048,62 +15076,66 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+      return openBlock(), createBlock(BaseFormFieldWrapper, mergeProps(props, {
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
+      }), {
         default: withCtx((slotProps) => [
           withDirectives(createElementVNode("textarea", mergeProps(slotProps, {
             ref_key: "textareaElement",
             ref: textareaElement,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-            class: { invalid: props.error },
+            class: { invalid: __props.error },
             rows: normalizedRows.value,
-            placeholder: props.placeholder,
-            disabled: props.disabled,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
             autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$d), [
+          }), null, 16, _hoisted_1$g), [
             [vModelText, modelValue.value]
           ])
         ]),
         _: 1
-      }, 16);
+      }, 16, ["error", "validating", "preserve-sub-text-space"]);
     };
   }
 });
-const KdsTextarea = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-7a6592b5"]]);
+const KdsTextarea = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-bdf12ef9"]]);
-const _hoisted_1$c = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$6 = {
+const _hoisted_1$f = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
+const _hoisted_2$8 = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
 };
-const _hoisted_3$4 = ["id"];
-const _hoisted_4$2 = {
+const _hoisted_3$5 = ["id"];
+const _hoisted_4$3 = {
   class: "trailing",
   "aria-hidden": "true"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "BaseDropdown",
   props: /* @__PURE__ */ mergeModels({
-    text: { default: void 0 },
+    text: {},
     placeholder: {},
     disabled: { type: Boolean, default: false },
     error: { type: Boolean, default: false },
     missing: { type: Boolean, default: false },
-    accessory: { default: void 0 },
-    id: { default: void 0 },
-    ariaLabelledby: { default: void 0 },
-    ariaDescribedby: { default: void 0 },
-    ariaLabel: { default: void 0 },
-    ariaInvalid: { type: Boolean, default: void 0 },
-    popoverId: { default: void 0 }
+    accessory: {},
+    id: {},
+    ariaLabelledby: {},
+    ariaDescribedby: {},
+    ariaLabel: {},
+    ariaInvalid: { type: Boolean, default: () => void 0 },
+    popoverId: {}
   }, {
     "open": { type: Boolean, ...{ default: false } },
     "openModifiers": {}
   }),
   emits: /* @__PURE__ */ mergeModels(["click", "keydown"], ["update:open"]),
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled", "error", "missing", "ariaInvalid"]);
     const open = useModel(__props, "open");
     const valueTextId = useId();
     const ariaLabelledby = computed(() => {
@@ -15124,7 +15156,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     });
     const emit = __emit;
     const onKeydown = (event) => {
-      if (props.disabled) {
+      if (__props.disabled) {
         return;
       }
       emit("keydown", event);
@@ -15141,21 +15173,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         id: props.id,
-        class: normalizeClass(["kds-dropdown-trigger-button", { error: props.error }]),
+        class: normalizeClass(["kds-dropdown-trigger-button", { error: __props.error }]),
         type: "button",
         "aria-expanded": open.value,
         "aria-labelledby": ariaLabelledby.value,
         "aria-describedby": props.ariaDescribedby,
         "aria-label": effectiveAriaLabel.value,
-        "aria-invalid": props.ariaInvalid,
+        "aria-invalid": __props.ariaInvalid,
         "aria-controls": props.popoverId,
         "aria-haspopup": "dialog",
-        disabled: props.disabled,
-        onClick: _cache[0] || (_cache[0] = ($event) => !props.disabled && emit("click")),
+        disabled: __props.disabled,
+        onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$6, [
-          createVNode(_sfc_main$K, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$8, [
+          createVNode(_sfc_main$N, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -15163,26 +15195,26 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         createElementVNode("span", {
           id: unref(valueTextId),
           class: normalizeClass(["text", {
-            placeholder: !props.text && !props.disabled,
-            missing: props.missing
+            placeholder: !props.text && !__props.disabled,
+            missing: __props.missing
           }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$4),
-        createElementVNode("span", _hoisted_4$2, [
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$5),
+        createElementVNode("span", _hoisted_4$3, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
           }, null, 8, ["name"])
         ])
-      ], 42, _hoisted_1$c);
+      ], 42, _hoisted_1$f);
     };
   }
 });
-const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-bdb9c0d3"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-cf3becf9"]]);
-const _hoisted_1$b = { class: "kds-dropdown-container" };
-const _hoisted_2$5 = { class: "kds-dropdown-container-sticky-top" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = { class: "kds-dropdown-container" };
+const _hoisted_2$7 = { class: "kds-dropdown-container-sticky-top" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -15249,8 +15281,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       focus: () => searchEl.value?.focus()
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createElementVNode("div", _hoisted_2$7, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -15282,9 +15314,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
-const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["__scopeId", "data-v-9f49ff8b"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-9f49ff8b"]]);
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -15305,7 +15337,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "loading", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const open = ref(false);
     const popoverEl = useTemplateRef("popoverEl");
@@ -15330,18 +15362,18 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         "aria-label": props.ariaLabel,
         description: props.description,
         "sub-text": props.subText,
-        error: props.error,
-        validating: props.validating,
-        "preserve-sub-text-space": props.preserveSubTextSpace
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
       }, {
         default: withCtx((slotProps) => [
           createVNode(BaseDropdown, mergeProps(slotProps, {
             open: open.value,
             "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
             text: modelValue.value && !selectedOption.value ? `(Missing) ${modelValue.value}` : selectedOption.value?.text,
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
+            error: __props.error,
             missing: !!modelValue.value && !selectedOption.value,
             accessory: selectedOption.value?.accessory,
             style: popoverEl.value?.anchorStyle,
@@ -15365,7 +15397,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 modelValue: modelValue.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
                 "possible-values": props.possibleValues,
-                loading: props.loading,
+                loading: __props.loading,
                 "empty-text": "No entries found"
               }, null, 8, ["modelValue", "possible-values", "loading"])
             ]),
@@ -15378,9 +15410,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
-const _hoisted_1$a = ["disabled"];
-const _hoisted_2$4 = ["title"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["disabled"];
+const _hoisted_2$6 = ["title"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "KdsListItemButton",
   props: {
     label: {},
@@ -15389,42 +15421,42 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["disabled"]);
     const emit = __emit;
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated: isLabelTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         type: "button",
-        disabled: props.disabled,
+        disabled: __props.disabled,
         class: "kds-list-item-button",
         onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
       }, [
         createVNode(unref(KdsIcon), {
           name: props.leadingIcon,
           size: "small",
-          disabled: props.disabled
+          disabled: __props.disabled
         }, null, 8, ["name", "disabled"]),
         createElementVNode("span", {
           ref_key: "labelEl",
           ref: labelEl,
           class: "label",
           title: unref(isLabelTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$4)
-      ], 8, _hoisted_1$a);
+        }, toDisplayString(props.label), 9, _hoisted_2$6)
+      ], 8, _hoisted_1$d);
     };
   }
 });
-const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-ba674605"]]);
+const KdsListItemButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-13945d12"]]);
-const _hoisted_1$9 = { class: "kds-multi-select-dropdown-options" };
-const _hoisted_2$3 = { class: "kds-multi-select-dropdown-search" };
-const _hoisted_3$3 = {
+const _hoisted_1$c = { class: "kds-multi-select-dropdown-options" };
+const _hoisted_2$5 = { class: "kds-multi-select-dropdown-search" };
+const _hoisted_3$4 = {
   key: 0,
   class: "kds-multi-select-dropdown-footer"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "MultiSelectDropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -15440,7 +15472,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["addValue"], ["update:modelValue", "update:searchValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const ADD_NEW_VALUE_ID = `__kds-add-new-${useId()}__`;
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["loading", "allowNewValues"]);
     const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
     const searchValue = useModel(__props, "searchValue");
@@ -15462,7 +15494,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     });
     const canAddNewValue = computed(() => {
       const trimmed = searchValue.value.trim();
-      if (!props.allowNewValues || trimmed.length === 0) {
+      if (!__props.allowNewValues || trimmed.length === 0) {
         return false;
       }
       const lower = trimmed.toLowerCase();
@@ -15540,8 +15572,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createElementVNode("div", _hoisted_2$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_2$5, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -15563,14 +15595,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["kds-multi-select-dropdown-list", {
             multiline: props.possibleValues.some((o) => o.subText !== void 0)
           }]),
-          "possible-values": props.loading ? [] : listOptions.value,
-          loading: props.loading,
+          "possible-values": __props.loading ? [] : listOptions.value,
+          loading: __props.loading,
           "empty-text": props.emptyText,
           "controlled-externally": "",
           "aria-label": "Dropdown options",
           onItemClick: _cache[4] || (_cache[4] = ($event) => $event !== void 0 && onItemClick($event))
         }, null, 8, ["class", "possible-values", "loading", "empty-text"]),
-        !props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+        !__props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
           createVNode(unref(KdsListItemButton), {
             label: anyVisibleSelected.value ? "Clear all" : "Select all",
             "leading-icon": anyVisibleSelected.value ? "trash" : "checkmark",
@@ -15583,9 +15615,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
-const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__scopeId", "data-v-be1b84c3"]]);
+const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["__scopeId", "data-v-9b631765"]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "KdsMultiSelectDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -15607,7 +15639,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["placeholder", "disabled", "loading", "allowNewValues", "error", "validating", "preserveSubTextSpace"]);
     const modelValue = useModel(__props, "modelValue");
     const open = ref(false);
     const dropdownContainerEl = useTemplateRef("dropdownContainerEl");
@@ -15618,14 +15650,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
     });
     const addedOptions = ref([]);
-    watch(
-      [() => props.possibleValues, () => props.allowNewValues],
-      ([, allowNew]) => {
-        if (!allowNew) {
-          addedOptions.value = [];
-        }
+    watch([() => props.possibleValues, () => __props.allowNewValues], ([, allowNew]) => {
+      if (!allowNew) {
+        addedOptions.value = [];
       }
-    );
+    });
     const allPossibleValues = computed(() => {
       const baseIds = new Set(props.possibleValues.map((o) => o.id));
       const deduped = addedOptions.value.filter((o) => !baseIds.has(o.id));
@@ -15660,18 +15689,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         "aria-label": props.ariaLabel,
         description: props.description,
         "sub-text": props.subText,
-        error: props.error,
-        validating: props.validating,
-        "preserve-sub-text-space": props.preserveSubTextSpace
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
       }, {
         default: withCtx((slotProps) => [
           createVNode(BaseDropdown, mergeProps(slotProps, {
             open: open.value,
             "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
             text: summary.value,
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            error: props.error,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
+            error: __props.error,
             missing: missingIds.value.length > 0,
             style: popoverEl.value?.anchorStyle,
             "popover-id": popoverEl.value?.popoverId,
@@ -15694,8 +15723,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 modelValue: modelValue.value,
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modelValue.value = $event),
                 "possible-values": allPossibleValues.value,
-                loading: props.loading,
-                "allow-new-values": props.allowNewValues,
+                loading: __props.loading,
+                "allow-new-values": __props.allowNewValues,
                 "empty-text": "No entries found",
                 onAddValue
               }, null, 8, ["modelValue", "possible-values", "loading", "allow-new-values"])
@@ -15709,6 +15738,741 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
+const kdsDimensionComponentHeight12p5x = 200;
+const kdsDimensionComponentHeight1p5x = 24;
+const kdsDimensionComponentHeight20x = 320;
+const kdsSpacingContainer0p10x = 1;
+const _hoisted_1$b = { class: "kds-resize-handle-area" };
+const _hoisted_2$4 = ["aria-label"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "ResizeHandle",
+  props: {
+    numberOfHandles: { default: 1 },
+    handleGap: { default: "0px" }
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v1dcb931e": _ctx.handleGap,
+      "v4bcf7fe4": handleWidth.value
+    }));
+    const normalizedNumberOfHandles = computed(() => {
+      const raw = Math.floor(__props.numberOfHandles);
+      return Math.max(1, raw || 1);
+    });
+    const hasMultipleHandles = computed(() => normalizedNumberOfHandles.value > 1);
+    const handleWidth = computed(() => {
+      const n = normalizedNumberOfHandles.value;
+      const gap = __props.handleGap;
+      return `calc((100% - ${n - 1} * ${gap}) / ${2 * n})`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedNumberOfHandles.value, (i) => {
+          return openBlock(), createElementBlock("button", {
+            key: i,
+            class: "kds-resize-handle",
+            "aria-label": hasMultipleHandles.value ? `Resize vertically (handle ${i} of ${normalizedNumberOfHandles.value})` : "Resize vertically",
+            type: "button"
+          }, [..._cache[0] || (_cache[0] = [
+            createElementVNode("span", { class: "kds-resize-handle-line" }, null, -1)
+          ])], 8, _hoisted_2$4);
+        }), 128))
+      ]);
+    };
+  }
+});
+const ResizeHandle = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-df3803d4"]]);
+const _hoisted_1$a = {
+  ref: "content",
+  class: "kds-resize-container-content"
+};
+const DEFAULT_INITIAL_HEIGHT = 200;
+const KEYBOARD_RESIZE_STEP = 10;
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "KdsResizeContainer",
+  props: {
+    height: { default: () => DEFAULT_INITIAL_HEIGHT },
+    minHeight: { default: 0 },
+    maxHeight: {},
+    numberOfHandles: { default: 1 },
+    handleGap: { default: "0px" }
+  },
+  setup(__props) {
+    const clamp = (value) => Math.max(
+      __props.minHeight,
+      __props.maxHeight === void 0 ? value : Math.min(value, __props.maxHeight)
+    );
+    const currentHeight = ref(clamp(__props.height));
+    const isMaximized = ref(false);
+    const contentRef = useTemplateRef("content");
+    const heightAtDragStart = ref(0);
+    const startY = ref(null);
+    const { activePointerId, onPointerDown, onPointerMove, onPointerUp } = usePointerHandler((event) => {
+      if (startY.value === null) {
+        startY.value = event.clientY;
+        heightAtDragStart.value = contentRef.value?.getBoundingClientRect().height ?? currentHeight.value;
+        currentHeight.value = clamp(heightAtDragStart.value);
+        isMaximized.value = false;
+        return;
+      }
+      currentHeight.value = clamp(
+        heightAtDragStart.value + event.clientY - startY.value
+      );
+    });
+    watch(activePointerId, (id) => {
+      if (id === null) {
+        startY.value = null;
+      }
+    });
+    const toggleMaximized = () => {
+      isMaximized.value = !isMaximized.value;
+    };
+    const onKeydown = (event) => {
+      const renderedHeight = contentRef.value?.getBoundingClientRect().height ?? currentHeight.value;
+      if (event.key === "ArrowDown") {
+        currentHeight.value = clamp(renderedHeight + KEYBOARD_RESIZE_STEP);
+        isMaximized.value = false;
+        event.preventDefault();
+      } else if (event.key === "ArrowUp") {
+        currentHeight.value = clamp(renderedHeight - KEYBOARD_RESIZE_STEP);
+        isMaximized.value = false;
+        event.preventDefault();
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggleMaximized();
+      }
+    };
+    const contentStyle = computed(() => ({
+      minBlockSize: `${__props.minHeight}px`,
+      blockSize: isMaximized.value ? "fit-content" : `${currentHeight.value}px`,
+      maxBlockSize: __props.maxHeight === void 0 ? void 0 : `${__props.maxHeight}px`
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["kds-resize-container", { dragging: unref(activePointerId) !== null }])
+      }, [
+        createElementVNode("div", _hoisted_1$a, [
+          renderSlot(_ctx.$slots, "default", { contentStyle: contentStyle.value }, void 0, true)
+        ], 512),
+        createVNode(ResizeHandle, {
+          "number-of-handles": __props.numberOfHandles,
+          "handle-gap": __props.handleGap,
+          onPointerdown: unref(onPointerDown),
+          onPointermove: withModifiers(unref(onPointerMove), ["prevent"]),
+          onLostpointercapture: unref(onPointerUp),
+          onKeydown,
+          onDblclick: toggleMaximized
+        }, null, 8, ["number-of-handles", "handle-gap", "onPointerdown", "onPointermove", "onLostpointercapture"])
+      ], 2);
+    };
+  }
+});
+const KdsResizeContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__scopeId", "data-v-403e065b"]]);
+const CLICK_META_KEY_TIMEOUT = 250;
+const useMultiSelectListBoxSelection = ({
+  modelValue,
+  allValues,
+  disabled,
+  generateOptionId,
+  scrollToIndex
+}) => {
+  const currentKeyNavIndex = ref(-1);
+  const isKeyboardNavigating = ref(false);
+  const shiftStartIndex = ref(-1);
+  const draggingStartIndex = ref(-1);
+  const draggingInverseMode = ref(false);
+  const mouseTriggeredFocus = ref(false);
+  const selectedSet = computed(() => new Set(modelValue.value));
+  const isCurrentValue = (id) => selectedSet.value.has(id);
+  const activeDescendantId = computed(() => {
+    if (!isKeyboardNavigating.value) {
+      return void 0;
+    }
+    const item = allValues.value[currentKeyNavIndex.value];
+    return item ? generateOptionId(item.id) : void 0;
+  });
+  const setSelectedNoShiftReset = (values) => {
+    modelValue.value = values;
+  };
+  const setSelected = (values) => {
+    shiftStartIndex.value = -1;
+    setSelectedNoShiftReset(values);
+  };
+  const toggleSelection = (value) => {
+    if (selectedSet.value.has(value)) {
+      setSelected(modelValue.value.filter((v) => v !== value));
+    } else {
+      setSelected([...modelValue.value, value]);
+    }
+  };
+  const setSelectedToIndex = (index) => {
+    const item = allValues.value[index];
+    if (item) {
+      setSelected([item.id]);
+    }
+  };
+  watch(
+    () => allValues.value.length,
+    (length) => {
+      const maxIndex = length - 1;
+      if (maxIndex < 0) {
+        currentKeyNavIndex.value = -1;
+      } else {
+        currentKeyNavIndex.value = Math.min(
+          Math.max(currentKeyNavIndex.value, 0),
+          maxIndex
+        );
+      }
+      if (isKeyboardNavigating.value) {
+        setSelectedToIndex(currentKeyNavIndex.value);
+      }
+    }
+  );
+  const getPossibleValuesInSection = (first, second) => {
+    const start = Math.max(0, Math.min(first, second));
+    const end = Math.max(0, first, second);
+    return allValues.value.slice(start, end + 1).map((x) => x.id);
+  };
+  const handleCtrlClick = (value, index) => {
+    currentKeyNavIndex.value = index;
+    toggleSelection(value);
+  };
+  let metaClickTimer = null;
+  const cancelPendingMetaClick = () => {
+    if (metaClickTimer !== null) {
+      clearTimeout(metaClickTimer);
+      metaClickTimer = null;
+    }
+  };
+  const debouncedHandleCtrlClick = (value, index) => {
+    cancelPendingMetaClick();
+    metaClickTimer = setTimeout(() => {
+      handleCtrlClick(value, index);
+      metaClickTimer = null;
+    }, CLICK_META_KEY_TIMEOUT);
+  };
+  const handleClick = (event, value, index) => {
+    if (disabled.value) {
+      return;
+    }
+    isKeyboardNavigating.value = false;
+    cancelPendingMetaClick();
+    event.preventDefault();
+    if (event.metaKey) {
+      debouncedHandleCtrlClick(value, index);
+      return;
+    }
+    if (event.ctrlKey) {
+      handleCtrlClick(value, index);
+      return;
+    }
+    if (event.shiftKey) {
+      setSelectedNoShiftReset(
+        getPossibleValuesInSection(currentKeyNavIndex.value, index)
+      );
+      return;
+    }
+    currentKeyNavIndex.value = index;
+    setSelected([value]);
+  };
+  const getDataOptionIndex = (target) => target.closest("[data-option-index]")?.dataset.optionIndex;
+  const onStartDrag = (e) => {
+    if (disabled.value) {
+      return;
+    }
+    mouseTriggeredFocus.value = true;
+    isKeyboardNavigating.value = false;
+    if (e.shiftKey) {
+      return;
+    }
+    if (e.ctrlKey || e.metaKey) {
+      draggingInverseMode.value = true;
+    }
+    const index = getDataOptionIndex(e.target);
+    if (index !== void 0) {
+      draggingStartIndex.value = Number(index);
+    }
+  };
+  const onDrag = (e) => {
+    if (draggingStartIndex.value === -1) {
+      return;
+    }
+    const dataIndex = getDataOptionIndex(e.target);
+    if (dataIndex === void 0) {
+      return;
+    }
+    let sectionValues = getPossibleValuesInSection(
+      draggingStartIndex.value,
+      Number(dataIndex)
+    );
+    if (draggingInverseMode.value) {
+      sectionValues = modelValue.value.filter(
+        (x) => !sectionValues.includes(x)
+      );
+    }
+    setSelected(sectionValues);
+  };
+  const onStopDrag = () => {
+    draggingStartIndex.value = -1;
+    draggingInverseMode.value = false;
+  };
+  useMousePressed({
+    touch: false,
+    drag: false,
+    onReleased: onStopDrag
+  });
+  const isOutOfRange = (index) => index < 0 || index >= allValues.value.length;
+  const navigateTo = (next, select) => {
+    if (select === "shift") {
+      if (shiftStartIndex.value === -1) {
+        shiftStartIndex.value = Math.max(0, currentKeyNavIndex.value);
+      }
+      setSelectedNoShiftReset(
+        getPossibleValuesInSection(shiftStartIndex.value, next)
+      );
+    } else {
+      setSelectedToIndex(next);
+    }
+    currentKeyNavIndex.value = next;
+    scrollToIndex(next);
+  };
+  const onArrowDown = () => {
+    if (disabled.value || isOutOfRange(currentKeyNavIndex.value + 1)) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(currentKeyNavIndex.value + 1, "single");
+  };
+  const onArrowUp = () => {
+    if (disabled.value || isOutOfRange(currentKeyNavIndex.value - 1)) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(currentKeyNavIndex.value - 1, "single");
+  };
+  const onArrowDownShift = () => {
+    if (disabled.value || isOutOfRange(currentKeyNavIndex.value + 1)) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(currentKeyNavIndex.value + 1, "shift");
+  };
+  const onArrowUpShift = () => {
+    if (disabled.value || isOutOfRange(currentKeyNavIndex.value - 1)) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(currentKeyNavIndex.value - 1, "shift");
+  };
+  const onEndKey = () => {
+    if (disabled.value || allValues.value.length === 0) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(allValues.value.length - 1, "single");
+  };
+  const onHomeKey = () => {
+    if (disabled.value || allValues.value.length === 0) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(0, "single");
+  };
+  const onEndKeyShift = () => {
+    if (disabled.value || allValues.value.length === 0) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(allValues.value.length - 1, "shift");
+  };
+  const onHomeKeyShift = () => {
+    if (disabled.value || allValues.value.length === 0) {
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    navigateTo(0, "shift");
+  };
+  const onCtrlA = () => {
+    if (!disabled.value) {
+      isKeyboardNavigating.value = true;
+      setSelected(allValues.value.map((x) => x.id));
+    }
+  };
+  const onFocus = () => {
+    if (disabled.value || mouseTriggeredFocus.value) {
+      mouseTriggeredFocus.value = false;
+      return;
+    }
+    isKeyboardNavigating.value = true;
+    if (allValues.value.length > 0) {
+      if (currentKeyNavIndex.value < 0) {
+        currentKeyNavIndex.value = 0;
+      }
+      setSelected([allValues.value[currentKeyNavIndex.value].id]);
+    }
+  };
+  const onBlur = () => {
+    isKeyboardNavigating.value = false;
+  };
+  onMounted(() => {
+    const lastItem = modelValue.value[modelValue.value.length - 1];
+    if (lastItem) {
+      const idx = allValues.value.findIndex((x) => x.id === lastItem);
+      if (idx >= 0) {
+        currentKeyNavIndex.value = idx;
+      }
+    }
+  });
+  onBeforeUnmount(() => {
+    cancelPendingMetaClick();
+  });
+  return {
+    currentKeyNavIndex,
+    isKeyboardNavigating,
+    isCurrentValue,
+    activeDescendantId,
+    handleClick,
+    onStartDrag,
+    onDrag,
+    onArrowDown,
+    onArrowUp,
+    onArrowDownShift,
+    onArrowUpShift,
+    onEndKey,
+    onHomeKey,
+    onEndKeyShift,
+    onHomeKeyShift,
+    onCtrlA,
+    onFocus,
+    onBlur
+  };
+};
+const _hoisted_1$9 = ["id", "tabindex", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-activedescendant", "aria-disabled", "onKeydown"];
+const _hoisted_2$3 = { class: "kds-multiselect-list-box-content-grid" };
+const _hoisted_3$3 = {
+  key: 0,
+  class: "kds-multiselect-sticky-bottom"
+};
+const _hoisted_4$2 = {
+  key: 0,
+  class: "kds-multiselect-empty"
+};
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "KdsMultiSelectListBox",
+  props: /* @__PURE__ */ mergeModels({
+    possibleValues: {},
+    disabled: { type: Boolean, default: false },
+    useResizeHandle: { type: Boolean, default: false },
+    bottomValue: {},
+    description: {},
+    label: {},
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["doubleClickOnItem", "doubleClickShift", "keyArrowLeft", "keyArrowRight", "keyEnter"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const OPTION_LINE_HEIGHT = kdsDimensionComponentHeight1p5x + kdsSpacingContainer0p10x;
+    const PassThroughResizeContainer = defineComponent({
+      inheritAttrs: false,
+      setup(_, { slots }) {
+        return () => slots.default?.({ contentStyle: void 0 });
+      }
+    });
+    const props = createPropsRestProxy(__props, ["disabled", "error", "validating", "preserveSubTextSpace", "useResizeHandle"]);
+    const modelValue = useModel(__props, "modelValue");
+    const emit = __emit;
+    const idPrefix = useId();
+    const generateOptionId = (itemId) => `${idPrefix}-option-${encodeURIComponent(itemId)}`;
+    const allValues = computed(
+      () => props.bottomValue ? [...props.possibleValues, props.bottomValue] : props.possibleValues
+    );
+    const bottomIndex = computed(() => props.possibleValues.length);
+    const {
+      containerProps,
+      wrapperProps,
+      list: virtualList,
+      scrollTo
+    } = useVirtualList(
+      computed(() => props.possibleValues),
+      { itemHeight: OPTION_LINE_HEIGHT }
+    );
+    watch(
+      () => props.possibleValues,
+      () => {
+        const el = containerProps.ref.value;
+        if (!el) {
+          return;
+        }
+        scrollTo(
+          Math.max(
+            Math.min(
+              Math.floor(el.scrollTop / OPTION_LINE_HEIGHT),
+              props.possibleValues.length - 1
+            ),
+            0
+          )
+        );
+      }
+    );
+    const scrollToIndex = (index) => {
+      if (index === bottomIndex.value && props.bottomValue) {
+        return;
+      }
+      const item = allValues.value[index];
+      if (!item) {
+        return;
+      }
+      const el = containerProps.ref.value;
+      if (!el) {
+        return;
+      }
+      const itemEl = globalThis.document.getElementById(generateOptionId(item.id));
+      if (itemEl) {
+        itemEl.scrollIntoView({ block: "nearest" });
+        if (props.bottomValue) {
+          const stickyEl = el.querySelector(".kds-multiselect-sticky-bottom");
+          if (stickyEl) {
+            const itemRect = itemEl.getBoundingClientRect();
+            const stickyRect = stickyEl.getBoundingClientRect();
+            if (itemRect.bottom > stickyRect.top) {
+              el.scrollTop += itemRect.bottom - stickyRect.top;
+            }
+          }
+        }
+      } else {
+        scrollTo(index);
+      }
+    };
+    const {
+      currentKeyNavIndex,
+      isKeyboardNavigating,
+      isCurrentValue,
+      activeDescendantId,
+      handleClick,
+      onStartDrag,
+      onDrag,
+      onArrowDown,
+      onArrowUp,
+      onArrowDownShift,
+      onArrowUpShift,
+      onEndKey,
+      onHomeKey,
+      onEndKeyShift,
+      onHomeKeyShift,
+      onCtrlA,
+      onFocus,
+      onBlur
+    } = useMultiSelectListBoxSelection({
+      modelValue,
+      allValues,
+      disabled: toRef(() => __props.disabled),
+      generateOptionId,
+      scrollToIndex
+    });
+    const handleDblClick = (id, index) => {
+      if (!__props.disabled) {
+        emit("doubleClickOnItem", id, index);
+      }
+    };
+    const handleShiftDblClick = () => {
+      if (!__props.disabled) {
+        emit("doubleClickShift", modelValue.value);
+      }
+    };
+    const onArrowLeft = () => {
+      if (!__props.disabled) {
+        emit("keyArrowLeft", modelValue.value);
+      }
+    };
+    const onArrowRight = () => {
+      if (!__props.disabled) {
+        emit("keyArrowRight", modelValue.value);
+      }
+    };
+    const onEnter = () => {
+      if (!__props.disabled) {
+        emit("keyEnter", modelValue.value);
+      }
+    };
+    const focus = () => {
+      if (!__props.disabled) {
+        containerProps.ref.value?.focus();
+      }
+    };
+    __expose({ focus });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, {
+        id: props.id,
+        label: props.label,
+        "aria-label": props.ariaLabel,
+        description: props.description,
+        "sub-text": props.subText,
+        error: __props.error,
+        validating: __props.validating,
+        "preserve-sub-text-space": __props.preserveSubTextSpace
+      }, {
+        default: withCtx((slotProps) => [
+          (openBlock(), createBlock(resolveDynamicComponent(__props.useResizeHandle ? KdsResizeContainer : unref(PassThroughResizeContainer)), {
+            height: unref(kdsDimensionComponentHeight20x),
+            "min-height": unref(kdsDimensionComponentHeight12p5x)
+          }, {
+            default: withCtx(({ contentStyle }) => [
+              createElementVNode("div", {
+                class: "kds-multiselect-list-box",
+                style: normalizeStyle(contentStyle)
+              }, [
+                createElementVNode("div", mergeProps(unref(containerProps), {
+                  id: slotProps.id,
+                  role: "listbox",
+                  tabindex: __props.disabled ? -1 : 0,
+                  "aria-multiselectable": "true",
+                  "aria-labelledby": slotProps.ariaLabelledby,
+                  "aria-describedby": slotProps.ariaDescribedby,
+                  "aria-label": slotProps.ariaLabel,
+                  "aria-invalid": slotProps.ariaInvalid,
+                  "aria-activedescendant": unref(activeDescendantId),
+                  "aria-disabled": __props.disabled,
+                  class: "kds-multiselect-list-box-list",
+                  onKeydown: [
+                    _cache[4] || (_cache[4] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onCtrlA) && unref(onCtrlA)(...args),
+                      ["ctrl", "prevent", "exact"]
+                    ), ["a"])),
+                    _cache[5] || (_cache[5] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onCtrlA) && unref(onCtrlA)(...args),
+                      ["meta", "prevent", "exact"]
+                    ), ["a"])),
+                    _cache[6] || (_cache[6] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onArrowUp) && unref(onArrowUp)(...args),
+                      ["prevent", "exact"]
+                    ), ["up"])),
+                    _cache[7] || (_cache[7] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onArrowDown) && unref(onArrowDown)(...args),
+                      ["prevent", "exact"]
+                    ), ["down"])),
+                    _cache[8] || (_cache[8] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onArrowUpShift) && unref(onArrowUpShift)(...args),
+                      ["shift", "prevent", "exact"]
+                    ), ["up"])),
+                    _cache[9] || (_cache[9] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onArrowDownShift) && unref(onArrowDownShift)(...args),
+                      ["shift", "prevent", "exact"]
+                    ), ["down"])),
+                    withKeys(withModifiers(onArrowLeft, ["prevent", "exact"]), ["left"]),
+                    withKeys(withModifiers(onArrowRight, ["prevent", "exact"]), ["right"]),
+                    withKeys(withModifiers(onEnter, ["prevent", "exact"]), ["enter"]),
+                    _cache[10] || (_cache[10] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onHomeKey) && unref(onHomeKey)(...args),
+                      ["prevent", "exact"]
+                    ), ["home"])),
+                    _cache[11] || (_cache[11] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onEndKey) && unref(onEndKey)(...args),
+                      ["prevent", "exact"]
+                    ), ["end"])),
+                    _cache[12] || (_cache[12] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onHomeKeyShift) && unref(onHomeKeyShift)(...args),
+                      ["shift", "prevent", "exact"]
+                    ), ["home"])),
+                    _cache[13] || (_cache[13] = withKeys(withModifiers(
+                      //@ts-ignore
+                      (...args) => unref(onEndKeyShift) && unref(onEndKeyShift)(...args),
+                      ["shift", "prevent", "exact"]
+                    ), ["end"]))
+                  ],
+                  onMousedown: _cache[14] || (_cache[14] = //@ts-ignore
+                  (...args) => unref(onStartDrag) && unref(onStartDrag)(...args)),
+                  onMousemove: _cache[15] || (_cache[15] = //@ts-ignore
+                  (...args) => unref(onDrag) && unref(onDrag)(...args)),
+                  onFocus: _cache[16] || (_cache[16] = //@ts-ignore
+                  (...args) => unref(onFocus) && unref(onFocus)(...args)),
+                  onBlur: _cache[17] || (_cache[17] = //@ts-ignore
+                  (...args) => unref(onBlur) && unref(onBlur)(...args))
+                }), [
+                  createElementVNode("div", _hoisted_2$3, [
+                    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), {
+                          id: generateOptionId(item.id),
+                          key: `listbox-${item.id}`,
+                          class: normalizeClass([
+                            "kds-multiselect-list-box-item",
+                            { "kds-multiselect-list-box-item-first": index === 0 }
+                          ]),
+                          label: item.text,
+                          accessory: item.accessory,
+                          missing: item.missing,
+                          "data-option-index": index,
+                          selected: unref(isCurrentValue)(item.id),
+                          disabled: __props.disabled,
+                          active: unref(isKeyboardNavigating) && unref(currentKeyNavIndex) === index,
+                          "trailing-icon": item.missing && !__props.disabled ? "trash" : 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"]);
+                      }), 128))
+                    ], 16),
+                    props.bottomValue ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+                      createVNode(unref(KdsListItem), {
+                        id: generateOptionId(props.bottomValue.id),
+                        label: props.bottomValue.text,
+                        accessory: props.bottomValue.accessory,
+                        missing: props.bottomValue.missing,
+                        "data-option-index": bottomIndex.value,
+                        selected: unref(isCurrentValue)(props.bottomValue.id),
+                        disabled: __props.disabled,
+                        active: unref(isKeyboardNavigating) && unref(currentKeyNavIndex) === bottomIndex.value,
+                        special: "",
+                        "trailing-icon": props.bottomValue.missing && !__props.disabled ? "trash" : unref(isCurrentValue)(props.bottomValue.id) ? "checkmark" : void 0,
+                        onClick: _cache[1] || (_cache[1] = ($event) => unref(handleClick)($event, props.bottomValue.id, bottomIndex.value)),
+                        onDblclick: [
+                          _cache[2] || (_cache[2] = withModifiers(($event) => handleShiftDblClick(), ["shift"])),
+                          _cache[3] || (_cache[3] = withModifiers(($event) => handleDblClick(props.bottomValue.id, bottomIndex.value), ["exact"]))
+                        ]
+                      }, null, 8, ["id", "label", "accessory", "missing", "data-option-index", "selected", "disabled", "active", "trailing-icon"])
+                    ])) : createCommentVNode("", true)
+                  ])
+                ], 16, _hoisted_1$9),
+                props.possibleValues.length === 0 && !props.bottomValue ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+                  createVNode(KdsEmptyState, { headline: "No entries in this list" })
+                ])) : createCommentVNode("", true)
+              ], 4)
+            ]),
+            _: 2
+          }, 1032, ["height", "min-height"]))
+        ]),
+        _: 1
+      }, 8, ["id", "label", "aria-label", "description", "sub-text", "error", "validating", "preserve-sub-text-space"]);
+    };
+  }
+});
+const KdsMultiSelectListBox = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-6266eeb5"]]);
 const _hoisted_1$8 = { class: "kds-info-popover-content" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "InfoPopover",
@@ -15742,7 +16506,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["hidden"]);
     const modelValue = useModel(__props, "modelValue");
     const popoverEl = useTemplateRef("popoverEl");
     const isHovered = ref(false);
@@ -15753,7 +16517,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           class: {
             "info-toggle-button": true,
             selected: modelValue.value,
-            hidden: props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
+            hidden: __props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
           },
           title: TITLE,
           "aria-label": TITLE,
@@ -15800,7 +16564,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["__scopeId", "data-v-b1e3f011"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["__scopeId", "data-v-2e9ef96a"]]);
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -15845,19 +16609,19 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["inSet", "outSet", "error", "hidden"]);
     const modelValue = useModel(__props, "modelValue");
     const popoverEl = useTemplateRef("popoverEl");
     const isHovered = ref(false);
     const isFocused = ref(false);
     const iconState = computed(() => {
-      if (props.inSet && props.outSet) {
+      if (__props.inSet && __props.outSet) {
         return "in-out";
       }
-      if (props.inSet) {
+      if (__props.inSet) {
         return "in";
       }
-      if (props.outSet) {
+      if (__props.outSet) {
         return "out";
       }
       return "none";
@@ -15888,7 +16652,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
     const title = computed(() => {
       const baseTitle = baseTitleByState[iconState.value];
-      if (!props.error) {
+      if (!__props.error) {
         return baseTitle;
       }
       return errorTitleByState[iconState.value] ?? baseTitle;
@@ -15898,9 +16662,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         createElementVNode("button", mergeProps(_ctx.$attrs, {
           class: {
             "variable-toggle-button": true,
-            error: props.error,
-            "pressed-or-set": modelValue.value || props.inSet || props.outSet,
-            hidden: props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
+            error: __props.error,
+            "pressed-or-set": modelValue.value || __props.inSet || __props.outSet,
+            hidden: __props.hidden && !modelValue.value && !isHovered.value && !isFocused.value
           },
           title: title.value,
           "aria-label": title.value,
@@ -15948,7 +16712,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__scopeId", "data-v-f4f626d4"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__scopeId", "data-v-b6d29842"]]);
 const _hoisted_1$4 = ["aria-label", "aria-labelledby", "aria-pressed", "disabled"];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
@@ -16152,16 +16916,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v6a57ab00": minTabWidthCss
+      "c97fca9c": minTabWidthCss
     }));
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["size", "fullWidth", "disabled"]);
     const modelValue = useModel(__props, "modelValue");
     const tabEls = useTemplateRefsList();
     const getTabEl = (value) => {
       const idx = props.tabs.findIndex((t) => t.value === value);
       return tabEls.value[idx];
     };
-    const isTabDisabled = (tab) => props.disabled || tab.disabled;
+    const isTabDisabled = (tab) => __props.disabled || tab.disabled;
     const selectTab = (tab) => {
       if (!isTabDisabled(tab) && modelValue.value !== tab.value) {
         modelValue.value = tab.value;
@@ -16208,14 +16972,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       width,
       tabs: toRef(props, "tabs"),
       containerEl: availableWidthContainer,
-      fullWidth: toRef(props, "fullWidth"),
+      fullWidth: toRef(() => __props.fullWidth),
       minTabWidth: MIN_TAB_WIDTH_TOKEN
     });
     const minTabWidthCss = `var(${minTabWidth})`;
     const tabBarClass = computed(() => ({
       "kds-tab-bar": true,
-      [`kds-tab-bar-${props.size}`]: true,
-      "kds-tab-bar-full-width": props.fullWidth
+      [`kds-tab-bar-${__props.size}`]: true,
+      "kds-tab-bar-full-width": __props.fullWidth
     }));
     const focusableTabValue = computed(() => {
       const enabledTabs = getEnabledTabs();
@@ -16246,7 +17010,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     );
     const getTabTitle = (tab) => truncatedTabs.value.has(tab.value) ? tab.title ?? tab.label : void 0;
     watch(
-      () => [props.tabs, props.disabled, modelValue.value],
+      () => [props.tabs, __props.disabled, modelValue.value],
       () => {
         const enabledTabs = getEnabledTabs();
         const isCurrentSelectionValid = enabledTabs.some(
@@ -16295,7 +17059,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               tab.accessory && !(tab.accessory.type === "icon" && unref(shouldHideIcons)) ? (openBlock(), createBlock(_sfc_main$4, {
                 key: 0,
                 accessory: tab.accessory,
-                "icon-size": props.size === "large" ? "large" : "medium",
+                "icon-size": __props.size === "large" ? "large" : "medium",
                 disabled: isTabDisabled(tab)
               }, null, 8, ["accessory", "icon-size", "disabled"])) : createCommentVNode("", true),
               createElementVNode("span", _hoisted_3$2, toDisplayString(tab.label), 1),
@@ -16308,7 +17072,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsTabBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-5cb2cbc0"]]);
+const KdsTabBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-d5737ccf"]]);
 const kdsTabBarSize = {
   SMALL: "small",
@@ -16356,19 +17120,12 @@ const kdsModalVariant = {
   PLAIN: "plain"
 };
 const kdsModalVariants = Object.values(kdsModalVariant);
-const kdsModalLayoutPropsDefault = {
-  headline: "",
-  variant: kdsModalVariant.PADDED,
-  overflow: "auto",
-  leadingIcon: void 0
-};
-const kdsModalPropsDefault = {
-  active: false,
+({
+  variant: kdsModalVariant.PADDED});
+({
   height: kdsModalHeight.AUTO,
   width: kdsModalWidth.MEDIUM,
-  closedby: kdsModalClosedBy.CLOSEREQUEST,
-  ...kdsModalLayoutPropsDefault
-};
+  closedby: kdsModalClosedBy.CLOSEREQUEST});
 const _hoisted_1$2 = { class: "modal-header" };
 const _hoisted_2$1 = { class: "modal-header-headline" };
@@ -16380,18 +17137,18 @@ const _hoisted_4 = {
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsModalLayout",
-  props: /* @__PURE__ */ mergeDefaults({
-    headline: {},
-    variant: {},
+  props: {
+    headline: { default: "" },
+    variant: { default: () => kdsModalVariant.PADDED },
     leadingIcon: {},
-    overflow: {},
+    overflow: { default: "auto" },
     onClose: { type: Function }
-  }, kdsModalLayoutPropsDefault),
+  },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v55fe64da": _ctx.overflow
+      "v81addf0a": _ctx.overflow
     }));
-    const props = __props;
+    const props = createPropsRestProxy(__props, ["headline", "variant", "overflow"]);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("header", _hoisted_1$2, [
@@ -16400,12 +17157,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             name: props.leadingIcon,
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_2$1, toDisplayString(props.headline), 1),
-          createVNode(_sfc_main$P, {
+          createElementVNode("div", _hoisted_2$1, toDisplayString(__props.headline), 1),
+          createVNode(_sfc_main$S, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
             title: "Close",
+            ariaLabel: "Close",
             onClick: props.onClose
           }, null, 8, ["onClick"])
         ]),
@@ -16423,36 +17181,35 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsModalLayout = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__scopeId", "data-v-b2e57108"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__scopeId", "data-v-62740dc9"]]);
 const _hoisted_1$1 = ["closedby"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
-  props: /* @__PURE__ */ mergeDefaults({
+  props: {
     leadingIcon: {},
-    headline: {},
-    variant: {},
-    width: {},
-    height: {},
-    active: { type: Boolean },
-    closedby: {},
-    overflow: {}
-  }, kdsModalPropsDefault),
+    headline: { default: "" },
+    variant: { default: () => kdsModalVariant.PADDED },
+    width: { default: () => kdsModalWidth.MEDIUM },
+    height: { default: () => kdsModalHeight.AUTO },
+    active: { type: Boolean, default: false },
+    closedby: { default: () => kdsModalClosedBy.CLOSEREQUEST },
+    overflow: { default: "auto" }
+  },
   emits: ["close", "closed"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v073dd16a": _ctx.overflow
+      "v5b2d4b6a": _ctx.overflow
     }));
-    const props = __props;
     const emit = __emit;
     const dialog = useTemplateRef("dialogElement");
     const onClose = (event) => {
       emit("close", event);
     };
     watch(
-      () => props.active,
-      async (active) => {
-        if (active) {
+      () => __props.active,
+      async (isActive) => {
+        if (isActive) {
           await nextTick();
           dialog.value?.showModal();
         } else {
@@ -16461,7 +17218,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    const renderDialog = ref(props.active);
+    const renderDialog = ref(__props.active);
     const removeDialog = () => {
       if (!renderDialog.value) {
         return;
@@ -16470,7 +17227,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emit("closed");
     };
     watch(
-      () => props.active,
+      () => __props.active,
       async (value, lastValue) => {
         if (value === false && lastValue === true) {
           if (dialog.value) {
@@ -16528,7 +17285,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
-const KdsModal = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__scopeId", "data-v-5a8d7ce3"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__scopeId", "data-v-f4a6776f"]]);
 const defaultCancelButton = {
   type: "cancel",
@@ -16674,7 +17431,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$A, {
+                createVNode(_sfc_main$D, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -16689,7 +17446,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$P, {
+              return openBlock(), createBlock(_sfc_main$S, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -16721,5 +17478,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-41fc8d84"]]);
-export { KdsAvatar, KdsBadge, _sfc_main$P as KdsButton, KdsCardClickable, _sfc_main$A as KdsCheckbox, KdsCheckboxGroup, _sfc_main$q as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$m as KdsDateInput, _sfc_main$k as KdsDateTimeFormatInput, _sfc_main$d as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$O as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$a as KdsMultiSelectDropdown, _sfc_main$j as KdsNumberInput, _sfc_main$p as KdsPasswordInput, _sfc_main$i as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$N as KdsToggleButton, _sfc_main$o as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$S as KdsButton, KdsCardClickable, _sfc_main$D as KdsCheckbox, KdsCheckboxGroup, _sfc_main$t as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$p as KdsDateInput, _sfc_main$n as KdsDateTimeFormatInput, _sfc_main$g as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$R as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$d as KdsMultiSelectDropdown, KdsMultiSelectListBox, _sfc_main$m as KdsNumberInput, _sfc_main$s as KdsPasswordInput, _sfc_main$l as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$Q as KdsToggleButton, _sfc_main$r as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map