@knime/kds-components 0.16.1 → 0.17.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, shallowRef, toRef, unref, createBlock, resolveDynamicComponent, createCommentVNode, normalizeStyle, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h, useSlots, getCurrentInstance, useModel, mergeModels, useId, nextTick, toHandlers, Fragment, renderList, withModifiers, watchEffect, useAttrs, defineAsyncComponent, onBeforeUpdate, normalizeProps, guardReactiveProps, withDirectives, vModelText, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
+import { 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, withDirectives, vModelText, createTextVNode, useCssVars, mergeDefaults, createSlots } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, useElementSize } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$z = ["role", "title", "aria-hidden", "aria-label"];
-const _hoisted_2$i = ["src"];
-const _hoisted_3$b = {
+const _hoisted_1$C = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_2$k = ["src"];
+const _hoisted_3$c = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -59,10 +59,10 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$i)) : (openBlock(), createElementBlock("div", _hoisted_3$b, [
+        }, null, 40, _hoisted_2$k)) : (openBlock(), createElementBlock("div", _hoisted_3$c, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$z);
+      ], 10, _hoisted_1$C);
     };
   }
 });
@@ -75,7 +75,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-d6a313f1"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-d6a313f1"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -85,10 +85,10 @@ const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	});
 };
 
-const useIcon = ({
+function useIcon({
   name,
   folder
-}) => {
+}) {
   const iconCache = /* @__PURE__ */ new Map();
   const iconComponent = shallowRef(null);
   watch(
@@ -102,16 +102,20 @@ const useIcon = ({
         const module = await __variableDynamicImportRuntimeHelper((/* #__PURE__ */ Object.assign({"../../../node_modules/@knime/kds-styles/dist/img/icons/add-user.svg": () => import('./add-user-BBT39sTb.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/ai-general.svg": () => import('./ai-general-xv5Ym88e.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/annotation-mode.svg": () => import('./annotation-mode-C0YL12XP.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/arrow-down.svg": () => import('./arrow-down-D8Q9vZG_.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/arrow-up.svg": () => import('./arrow-up-DJlZjTYZ.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/arrows-expand.svg": () => import('./arrows-expand-eXIczgyQ.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/arrows-move.svg": () => import('./arrows-move-CDiEl6Ry.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/arrows-order.svg": () => import('./arrows-order-DMoJXS-I.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/back.svg": () => import('./back-D1kA9zuH.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/bold.svg": () => import('./bold-C8dRggXe.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/calendar.svg": () => import('./calendar-B6v1nLjF.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/case-sensitive.svg": () => import('./case-sensitive-CHP-__99.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/center-aligned.svg": () => import('./center-aligned--zRFP8Lf.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/checkmark.svg": () => import('./checkmark-DOn23D5R.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/chevron-down.svg": () => import('./chevron-down-BsSG_C_8.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/chevron-left-double.svg": () => import('./chevron-left-double-D-EEhZoy.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/chevron-left.svg": () => import('./chevron-left-BKFnSetN.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/chevron-right-double.svg": () => import('./chevron-right-double-BgfwXKBg.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/chevron-right.svg": () => import('./chevron-right-CozOeJxa.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/chevron-up.svg": () => import('./chevron-up-FA-c_L5N.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/circle-error.svg": () => import('./circle-error-CwUp2gKh.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/circle-info.svg": () => import('./circle-info-CcCjmOUH.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/circle-question.svg": () => import('./circle-question-TFLpel6L.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/circle-success.svg": () => import('./circle-success-CGkhxpZE.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/cloud-download.svg": () => import('./cloud-download-CstHUDZv.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/cloud-knime.svg": () => import('./cloud-knime-CpZfWe3J.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/cloud-pending-changes.svg": () => import('./cloud-pending-changes-CWBUkOnb.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/cloud-synced.svg": () => import('./cloud-synced-DlT_4y5Q.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/cloud-upload.svg": () => import('./cloud-upload-DQvu_3cc.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/cloud-workflow.svg": () => import('./cloud-workflow-Bo_4KHLP.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/code-block.svg": () => import('./code-block-DrOaCM3g.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/color-picker.svg": () => import('./color-picker-k6GkGnF5.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/comment.svg": () => import('./comment-DL9ZR-vM.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/component.svg": () => import('./component-BArrSsoi.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/connection.svg": () => import('./connection-cIDhN_bU.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/copy.svg": () => import('./copy-DAYm6-mo.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/cursor.svg": () => import('./cursor-DSIjd7yc.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/data-app.svg": () => import('./data-app-BHCZS7qU.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/data-value-view.svg": () => import('./data-value-view-DZAfZGqs.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/date-time.svg": () => import('./date-time-C3cmSAQm.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/db-database.svg": () => import('./db-database-DYNQa14y.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/db-schema.svg": () => import('./db-schema-C4gtYXvd.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/db-table-view.svg": () => import('./db-table-view-CcF1plGQ.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/db-table.svg": () => import('./db-table-DifKATf6.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/deploy.svg": () => import('./deploy-Dr6jEhZU.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/detect.svg": () => import('./detect-DkQik2ep.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/divider.svg": () => import('./divider-Bhqt1kvt.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/duration.svg": () => import('./duration-Dfp9ox2I.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/edit.svg": () => import('./edit-Bg040TR4.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/education.svg": () => import('./education-CsB0t7AG.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/error-panel.svg": () => import('./error-panel-BCvYjM5m.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/execute-all.svg": () => import('./execute-all-JZlJ6VtK.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/execute.svg": () => import('./execute-CDtz4PKy.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/expand-panel.svg": () => import('./expand-panel-C0-YqxWN.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/extension-community.svg": () => import('./extension-community-BL7uY2lh.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/extension.svg": () => import('./extension-DV2OG2b-.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/external-link.svg": () => import('./external-link-D6c_uzZp.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/eye.svg": () => import('./eye-DIQBS75n.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/file-export.svg": () => import('./file-export-Cm5xiHIP.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/file-text.svg": () => import('./file-text-DCIkmzWQ.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/file.svg": () => import('./file-D-fzxVWf.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/filter.svg": () => import('./filter-BCzsHR5o.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/flow-variable-default.svg": () => import('./flow-variable-default-D8YRzPWl.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/flow-variable-in-out.svg": () => import('./flow-variable-in-out-v434yDUG.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/flow-variable-in.svg": () => import('./flow-variable-in-BiO5ppkU.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/flow-variable-out.svg": () => import('./flow-variable-out-BuATVHTL.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/folder-plus.svg": () => import('./folder-plus-0Z-aPAxX.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/folder-workflow.svg": () => import('./folder-workflow-hjaE8p-i.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/folder.svg": () => import('./folder-xz8Bw1k6.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/forum.svg": () => import('./forum-CunE8Bpo.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/function-catalog.svg": () => import('./function-catalog-CRXmv7AG.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/home.svg": () => import('./home-CW06ROg3.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/import.svg": () => import('./import-Bjz9KZM-.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/info.svg": () => import('./info-C8GezBIf.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/interval.svg": () => import('./interval-CzQaVMPH.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/italic.svg": () => import('./italic-B6SY7x6N.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/key.svg": () => import('./key-9hybjORk.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/layout-editor.svg": () => import('./layout-editor-At6vQ3aU.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/left-aligned.svg": () => import('./left-aligned-C90MrNJd.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/like.svg": () => import('./like-BwC1fMTh.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/limit.svg": () => import('./limit-D84DMtQW.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/link.svg": () => import('./link-DH0XmQMp.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/linked-metanode.svg": () => import('./linked-metanode-ojS3JQJp.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/list-bulletpoint.svg": () => import('./list-bulletpoint-BLPnukaY.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/list-number.svg": () => import('./list-number-C47JfmdB.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/list-thumbs.svg": () => import('./list-thumbs-F5ICnK4Z.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/list.svg": () => import('./list-CQmzxqnp.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/local-filesystem.svg": () => import('./local-filesystem-fyrwOsG5.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/lock.svg": () => import('./lock-B9qCq8wW.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/metanode.svg": () => import('./metanode-BOoscDpe.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/mini-map.svg": () => import('./mini-map-DKez_1T0.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/minimize-dialog.svg": () => import('./minimize-dialog-CsKInFjQ.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/minimize-side-panel.svg": () => import('./minimize-side-panel-DOe27uOi.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/minus.svg": () => import('./minus-CUOnFK-_.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/more-actions.svg": () => import('./more-actions-r1Ai1cv8.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/node-stack.svg": () => import('./node-stack-B2-NOdn1.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/nodes-align-horiz.svg": () => import('./nodes-align-horiz-BNN1SQyE.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/nodes-align-vert.svg": () => import('./nodes-align-vert-JG8gmWk5.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/open-in-new-window.svg": () => import('./open-in-new-window-BAU_-IMl.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/pan-mode.svg": () => import('./pan-mode-CGVZU5HB.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/parameter.svg": () => import('./parameter-D3NI1oyc.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/pending-changes.svg": () => import('./pending-changes-BvFdyKn8.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/placeholder.svg": () => import('./placeholder-CIq-OFkj.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/plus.svg": () => import('./plus-BGcbvgG4.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/quote.svg": () => import('./quote-BhPMewQl.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/re-execution.svg": () => import('./re-execution-CPa8UUdU.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/redo.svg": () => import('./redo-BjctXrq6.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/regex.svg": () => import('./regex-CErlWJQW.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/reload.svg": () => import('./reload-CDm_DDdP.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/rename.svg": () => import('./rename-Cyk_xng4.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/replace.svg": () => import('./replace-9aOLtKuD.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/reset-all.svg": () => import('./reset-all-Buf5y-HV.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/resume-execution.svg": () => import('./resume-execution-CRqaKZqz.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/right-aligned.svg": () => import('./right-aligned-2BkZ58o-.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/rocket.svg": () => import('./rocket-Bs46VoUh.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/save-as.svg": () => import('./save-as-CTnCvHfQ.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/save.svg": () => import('./save-B7DzWjxS.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/schedule.svg": () => import('./schedule-DuSqromp.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/search.svg": () => import('./search-gykfARpE.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/secret-store.svg": () => import('./secret-store-_ZlpQRjr.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/selected-cancel.svg": () => import('./selected-cancel-CS3Gep56.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/selected-execution.svg": () => import('./selected-execution-BJxjtKXq.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/selected-reset.svg": () => import('./selected-reset-SMx6XDk5.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/send.svg": () => import('./send-G2BlBsxu.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/server-rack-workflow.svg": () => import('./server-rack-workflow-CBhKbyGY.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/service.svg": () => import('./service-9hAt2V0T.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/settings.svg": () => import('./settings-BLMTAq-1.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/share.svg": () => import('./share-BIrWLTtn.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/shortcuts.svg": () => import('./shortcuts-fbNZWoSf.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/sort-ascending.svg": () => import('./sort-ascending-DNyV4Drg.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/sort-descending.svg": () => import('./sort-descending-BdIGPn-9.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/space-local.svg": () => import('./space-local-D4kTqwrB.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/space-private.svg": () => import('./space-private-D06CTwvE.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/space.svg": () => import('./space-fMpb-o4-.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/stepwise-execution.svg": () => import('./stepwise-execution-C1mAO3z_.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/stop.svg": () => import('./stop-Cgmy2iPY.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/strikethrough.svg": () => import('./strikethrough-DG4Ejxqk.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/team.svg": () => import('./team-CtZLwOou.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/text.svg": () => import('./text-DFu-L62Z.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/textstyles.svg": () => import('./textstyles-j0GQtKYE.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/thumbs-down.svg": () => import('./thumbs-down-CiozrdIW.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/thumbs-up.svg": () => import('./thumbs-up-E4uRtjhi.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/time.svg": () => import('./time-DU80J5X8.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/to-bottom.svg": () => import('./to-bottom-B8wat1Dk.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/to-top.svg": () => import('./to-top-CCAfU4xz.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/trash.svg": () => import('./trash-Dq5FHwNO.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/trigger.svg": () => import('./trigger-Qns9VYQG.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/underline.svg": () => import('./underline-CDZcVZHB.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/undo.svg": () => import('./undo-CnghWcXK.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/unlink.svg": () => import('./unlink-CL0kTZX2.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/user.svg": () => import('./user-DTq28OjK.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/version.svg": () => import('./version-CSTTEeam.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/view-cards.svg": () => import('./view-cards-DS0Cpf95.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/warning.svg": () => import('./warning-CJC1Oij-.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/workflow.svg": () => import('./workflow-n50o8jCH.js'),"../../../node_modules/@knime/kds-styles/dist/img/icons/x-close.svg": () => import('./x-close-D-oEO9N9.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/audio-datatype.svg": () => import('./audio-datatype-DyzJTMxb.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/binary-object-datatype.svg": () => import('./binary-object-datatype-DHZPEEoV.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/bit-byte-vector-datatype.svg": () => import('./bit-byte-vector-datatype-XJ0yjm_4.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/boolean-datatype.svg": () => import('./boolean-datatype-B0SBV35e.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/collection-list-datatype.svg": () => import('./collection-list-datatype-DDLoFog9.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/collection-set-datatype.svg": () => import('./collection-set-datatype-QGQHiErr.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/date-datatype.svg": () => import('./date-datatype-DX2o-Qoi.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/date-time-local-datatype.svg": () => import('./date-time-local-datatype-BRveWl93.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/date-time-zoned-datatype.svg": () => import('./date-time-zoned-datatype-CvUpjzJk.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/default-extension-datatype.svg": () => import('./default-extension-datatype-C7jbGM5d.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/document-datatype.svg": () => import('./document-datatype-CmWsp5e8.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/duration-date-based-datatype.svg": () => import('./duration-date-based-datatype-ZMMDq_rT.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/duration-time-based-datatype.svg": () => import('./duration-time-based-datatype-DWj4ALsB.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/geo-datatype.svg": () => import('./geo-datatype-CTQgQTql.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/helm-datatype.svg": () => import('./helm-datatype-XIlHXQBP.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/image-png-datatype.svg": () => import('./image-png-datatype-CtnGTQlX.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/image-svg-datatype.svg": () => import('./image-svg-datatype-DgySAOGM.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/json-datatype.svg": () => import('./json-datatype-DgHr_Q8U.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/labeling-datatype.svg": () => import('./labeling-datatype-CGG_DguN.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/linear-notation-molecule.svg": () => import('./linear-notation-molecule-CepA_vEp.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/message-datatype.svg": () => import('./message-datatype-Ds55YGMQ.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/microscope.svg": () => import('./microscope-CPwlykKH.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/model-pmml-datatype.svg": () => import('./model-pmml-datatype-kXlL8AWg.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/molecule.svg": () => import('./molecule-CT71Yhf1.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/number-double-datatype.svg": () => import('./number-double-datatype-B6nc4th6.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/number-double-vector-datatype.svg": () => import('./number-double-vector-datatype-D3rzzxjM.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/number-integer-datatype.svg": () => import('./number-integer-datatype-BWoQkZ03.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/path-datatype.svg": () => import('./path-datatype-BD3D-7dL.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/string-datatype.svg": () => import('./string-datatype-CHI_qvxE.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/string-vector-datatype.svg": () => import('./string-vector-datatype-DhgtZI8f.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/subgraph-datatype.svg": () => import('./subgraph-datatype-BHBSS1-Z.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/term-datatype.svg": () => import('./term-datatype-CRrmVXQx.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/test-tube.svg": () => import('./test-tube-BsB8mbus.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/time-datatype.svg": () => import('./time-datatype-CBnmuYLa.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/tool-datatype.svg": () => import('./tool-datatype-l6cMJHHd.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/unknown-datatype.svg": () => import('./unknown-datatype-BEY7muOy.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/uri-datatype.svg": () => import('./uri-datatype-CJhmCZiq.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-boolean.svg": () => import('./variable-boolean-BzyG4BGV.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-collection-boolean.svg": () => import('./variable-collection-boolean-nWAd6a7R.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-collection-double.svg": () => import('./variable-collection-double-h0sMrPKC.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-collection-integer.svg": () => import('./variable-collection-integer-BZEs4wch.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-collection-string.svg": () => import('./variable-collection-string-BPIuxyHK.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-conda-environment.svg": () => import('./variable-conda-environment-DZ5kqmc5.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-credential.svg": () => import('./variable-credential-D32ztDmY.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-integer.svg": () => import('./variable-integer-CtoE3pq3.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-number-double.svg": () => import('./variable-number-double-D5CGjCM8.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-path.svg": () => import('./variable-path-Dyuv7RmO.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-string.svg": () => import('./variable-string-JWu8Gafe.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/variable-unknown.svg": () => import('./variable-unknown-DYSdcnPs.js'),"../../../node_modules/@knime/kds-styles/dist/img/type-icons/xml-datatype.svg": () => import('./xml-datatype-BlUTXDpw.js')})), `../../../node_modules/@knime/kds-styles/dist/img/${folder}/${newName}.svg`, 10);
         iconCache.set(newName, module.default);
         iconComponent.value = module.default;
-      } catch (_error) {
+      } catch (error) {
+        console.error(
+          `Failed to load icon "${newName}" from folder "${folder}":`,
+          error
+        );
         iconComponent.value = null;
       }
     },
     { immediate: true }
   );
   return iconComponent;
-};
+}
 
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -137,7 +141,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-4da5bf3e"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-4da5bf3e"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -463,8 +467,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$y = ["title"];
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _hoisted_1$B = ["title"];
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -505,12 +509,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$y);
+      ], 10, _hoisted_1$B);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-806087da"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-806087da"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -527,8 +531,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$x = { class: "label-wrapper" };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _hoisted_1$A = { class: "label-wrapper" };
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -550,13 +554,13 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$x, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$A, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-0dc42bfc"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-0dc42bfc"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -575,8 +579,8 @@ const kdsColorSwatchSize = {
 };
 const kdsColorSwatchSizes = Object.values(kdsColorSwatchSize);
 
-const _hoisted_1$w = ["role", "title", "aria-hidden", "aria-label"];
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_1$z = ["role", "title", "aria-hidden", "aria-label"];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -611,12 +615,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({ backgroundColor: backgroundColor.value }),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$w);
+      }, null, 14, _hoisted_1$z);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-bdb3dd24"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-bdb3dd24"]]);
 
 const kdsDarkModeType = {
   LIGHT: "light",
@@ -736,9 +740,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$v = ["title", "aria-label"];
-const _hoisted_2$h = ["title"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$y = ["title", "aria-label"];
+const _hoisted_2$j = ["title"];
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -767,13 +771,13 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$h)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$v);
+        }, toDisplayString(props.label), 9, _hoisted_2$j)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$y);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-4dec8e94"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-3bd44b22"]]);
 
 const kdsLiveStatusStatus = {
   RED: "red",
@@ -789,8 +793,8 @@ const kdsLiveStatusSize = {
 };
 const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
 
-const _hoisted_1$u = ["data-style"];
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$x = ["data-style"];
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -815,12 +819,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$u);
+      ])], 10, _hoisted_1$x);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-74bb7c3d"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-74bb7c3d"]]);
 
 const kdsLoadingSpinnerVariant = {
   ON_PRIMARY: "onPrimary",
@@ -830,14 +834,14 @@ const kdsLoadingSpinnerVariants = Object.values(
   kdsLoadingSpinnerVariant
 );
 
-const _hoisted_1$t = ["role"];
-const _hoisted_2$g = { class: "header" };
-const _hoisted_3$a = { class: "headline" };
+const _hoisted_1$w = ["role"];
+const _hoisted_2$i = { class: "header" };
+const _hoisted_3$b = { class: "headline" };
 const _hoisted_4$7 = {
   key: 0,
   class: "body"
 };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "KdsInlineMessage",
   props: {
     headline: {},
@@ -868,21 +872,21 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: role.value
       }, [
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(KdsIcon, {
             class: "icon",
             name: iconName.value,
             size: "small"
           }, null, 8, ["name"]),
-          createElementVNode("div", _hoisted_3$a, toDisplayString(props.headline), 1)
+          createElementVNode("div", _hoisted_3$b, toDisplayString(props.headline), 1)
         ]),
         props.description ? (openBlock(), createElementBlock("div", _hoisted_4$7, toDisplayString(props.description), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$t);
+      ], 10, _hoisted_1$w);
     };
   }
 });
 
-const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-3d79be7c"]]);
+const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-3d79be7c"]]);
 
 const kdsInlineMessageVariant = {
   ERROR: "error",
@@ -892,11 +896,11 @@ const kdsInlineMessageVariant = {
 };
 const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
 
-const _hoisted_1$s = {
+const _hoisted_1$v = {
   key: 0,
   class: "label"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -955,7 +959,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$s, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$v, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -968,9 +972,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-b0f9559f"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-b0f9559f"]]);
 
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -1023,7 +1027,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -1059,7 +1063,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -1094,9 +1098,9 @@ const kdsToggleButtonVariant = {
 };
 const kdsToggleButtonVariants = Object.values(kdsToggleButtonVariant);
 
-const _hoisted_1$r = ["data-visible"];
-const _hoisted_2$f = ["data-visible"];
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = ["data-visible"];
+const _hoisted_2$h = ["data-visible"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "KdsProgressButton",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "medium" },
@@ -1159,7 +1163,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 name: props.leadingIcon,
                 size: iconSize.value
               }, null, 8, ["name", "size"])
-            ], 8, _hoisted_1$r),
+            ], 8, _hoisted_1$u),
             createElementVNode("span", {
               class: "spinner",
               "data-visible": state.value === "progress"
@@ -1168,7 +1172,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 size: iconSize.value,
                 variant: props.variant === "filled" ? "onPrimary" : "onSurface"
               }, null, 8, ["size", "variant"])
-            ], 8, _hoisted_2$f)
+            ], 8, _hoisted_2$h)
           ], 2)
         ]),
         _: 1
@@ -1177,7 +1181,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-ec08a9ba"]]);
+const KdsProgressButton = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-ec08a9ba"]]);
 
 const kdsProgressButtonState = {
   DEFAULT: "default",
@@ -1187,9 +1191,9 @@ const kdsProgressButtonState = {
 };
 const kdsProgressButtonStates = Object.values(kdsProgressButtonState);
 
-const _hoisted_1$q = { class: "kds-empty-state" };
-const _hoisted_2$e = { class: "kds-empty-state-headline" };
-const _hoisted_3$9 = {
+const _hoisted_1$t = { class: "kds-empty-state" };
+const _hoisted_2$g = { class: "kds-empty-state-headline" };
+const _hoisted_3$a = {
   key: 1,
   class: "kds-empty-state-description"
 };
@@ -1197,7 +1201,7 @@ const _hoisted_4$6 = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -1213,10 +1217,10 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$D : _sfc_main$E
+      () => isLinkButton.value ? _sfc_main$I : _sfc_main$J
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         props.loadingSpinner ? (openBlock(), createBlock(KdsLoadingSpinner, {
           key: 0,
           "data-testid": "loading-spinner",
@@ -1224,8 +1228,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$e, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$9, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        createElementVNode("p", _hoisted_2$g, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$a, toDisplayString(props.description), 1)) : createCommentVNode("", true),
         props.button ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
             onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
@@ -1236,9 +1240,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-02149081"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-02149081"]]);
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -1289,27 +1293,28 @@ const kdsListItemVariant = {
   LARGE: "large"
 };
 
-const _hoisted_1$p = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$d = {
+const _hoisted_1$s = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_2$f = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$8 = { class: "content" };
+const _hoisted_3$9 = { class: "content" };
 const _hoisted_4$5 = ["title"];
 const _hoisted_5$3 = {
   key: 0,
   class: "prefix"
 };
 const _hoisted_6$3 = ["title"];
-const _hoisted_7 = {
-  key: 1,
-  class: "trailing-item"
-};
+const _hoisted_7 = { class: "trailing-item" };
 const _hoisted_8 = {
   key: 0,
   class: "shortcut"
 };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_9 = {
+  key: 2,
+  class: "trailing-item-reserve-space"
+};
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
@@ -1363,14 +1368,14 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
-          createVNode(_sfc_main$z, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$f, [
+          createVNode(_sfc_main$E, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$8, [
+        createElementVNode("span", _hoisted_3$9, [
           createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
@@ -1390,37 +1395,37 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             title: unref(isSubtextTruncated) ? props.subText : void 0
           }, toDisplayString(props.subText), 9, _hoisted_6$3)) : createCommentVNode("", true)
         ]),
-        props.shortcut || props.trailingIcon ? (openBlock(), createElementBlock("span", _hoisted_7, [
+        createElementVNode("span", _hoisted_7, [
           props.shortcut ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(props.shortcut), 1)) : createCommentVNode("", true),
           props.trailingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
             size: "small"
-          }, null, 8, ["name"])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$p);
+          }, null, 8, ["name"])) : (openBlock(), createElementBlock("span", _hoisted_9))
+        ])
+      ], 10, _hoisted_1$s);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-1d081212"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-7fba4bc1"]]);
 
-const _sfc_main$x = {  };
+const _sfc_main$C = {  };
 
-const _hoisted_1$o = { class: "kds-list-item-divider" };
+const _hoisted_1$r = { class: "kds-list-item-divider" };
 
 function _sfc_render(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$o))
+  return (openBlock(), createElementBlock("hr", _hoisted_1$r))
 }
-const ListItemDivider = /*#__PURE__*/_export_sfc(_sfc_main$x, [['render',_sfc_render],['__scopeId',"data-v-3ee92695"]]);
+const ListItemDivider = /*#__PURE__*/_export_sfc(_sfc_main$C, [['render',_sfc_render],['__scopeId',"data-v-3ee92695"]]);
 
-const _hoisted_1$n = { class: "kds-list-item-section-title" };
-const _hoisted_2$c = {
+const _hoisted_1$q = { class: "kds-list-item-section-title" };
+const _hoisted_2$e = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$7 = ["title"];
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _hoisted_3$8 = ["title"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -1431,8 +1436,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$e, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -1443,21 +1448,22 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$7)
+        }, toDisplayString(props.label), 9, _hoisted_3$8)
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-53382531"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-53382531"]]);
 
-const _hoisted_1$m = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
-const _hoisted_2$b = ["role"];
+const _hoisted_1$p = ["role", "aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_2$d = ["role"];
 const loadingStateText = "Loading entries";
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
+    variant: { default: kdsListItemVariant.SMALL },
     emptyText: { default: "" },
     loading: { type: Boolean, default: false },
     ariaLabel: {},
@@ -1511,21 +1517,32 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const enabledValues = computed(
       () => selectableValues.value.filter((o) => !o.disabled)
     );
-    watch([enabledValues, () => props.loading], ([values, loading]) => {
-      const isValid = (id) => id !== void 0 && values.some((o) => o.id === id);
-      if (activeId.value !== void 0 && !isValid(activeId.value)) {
-        if (values.length > 0) {
-          activeId.value = values[0].id;
-        } else {
-          activeId.value = selectableValues.value.length === 0 ? emptyOptionId : void 0;
-        }
+    const enabledIds = computed(() => enabledValues.value.map((o) => o.id));
+    let prevEnabledIds = [];
+    const firstEnabledOrEmpty = (values) => {
+      if (values.length > 0) {
+        return values[0].id;
       }
-      if (!isValid(lastActiveId.value)) {
-        lastActiveId.value = void 0;
+      return selectableValues.value.length === 0 ? emptyOptionId : void 0;
+    };
+    const idsChanged = (a, b) => a.length !== b.length || a.some((id, i) => id !== b[i]);
+    const getResetActiveId = (values) => {
+      if (activeId.value === void 0) {
+        return activeId.value;
       }
-      if (loading) {
-        activeId.value = emptyOptionId;
+      if (isFocused.value && idsChanged(enabledIds.value, prevEnabledIds)) {
+        return firstEnabledOrEmpty(values);
       }
+      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);
+      const lastIdStillValid = values.some((o) => o.id === lastActiveId.value);
+      if (!lastIdStillValid) {
+        lastActiveId.value = void 0;
+      }
+      prevEnabledIds = enabledIds.value;
       nextTick(scrollToView);
     });
     const findEnabledIndex = (id) => id === void 0 ? -1 : enabledValues.value.findIndex((o) => o.id === id);
@@ -1610,18 +1627,14 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         "aria-busy": props.loading,
         "aria-label": props.ariaLabel,
         "aria-activedescendant": !props.controlledExternally && activeId.value ? activeId.value : void 0,
-        class: "kds-list-container",
-        tabindex: props.controlledExternally ? void 0 : 0
-      }, toHandlers(
-        props.controlledExternally ? { mousemove: onMousemove, mouseleave: onMouseLeave } : {
-          keydown: handleKeydown,
-          focus: handleFocus,
-          blur: handleBlur,
-          mousemove: onMousemove,
-          mouseleave: onMouseLeave
-        },
-        true
-      )), [
+        class: ["kds-list-container", { standalone: !props.controlledExternally }],
+        tabindex: props.controlledExternally ? void 0 : 0,
+        onKeydown: handleKeydown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onMousemove,
+        onMouseleave: onMouseLeave
+      }), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(prefixedValues.value, (item, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: item.id
@@ -1643,11 +1656,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               active: activeId.value === item.id,
               special: item.special,
               missing: item.missing,
-              "trailing-icon": item.selected ? "checkmark" : void 0,
+              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()),
-              onClick: withModifiers(($event) => emit("itemClick", toOptionId(item.id)), ["stop"])
-            }, null, 8, ["id", "accessory", "label", "sub-text", "selected", "disabled", "active", "special", "missing", "trailing-icon", "role", "onClick"])),
+              onClick: ($event) => !item.disabled && emit("itemClick", toOptionId(item.id))
+            }, null, 8, ["id", "accessory", "label", "sub-text", "selected", "disabled", "active", "special", "missing", "variant", "trailing-icon", "role", "onClick"])),
             item.separator && index < prefixedValues.value.length - 1 ? (openBlock(), createBlock(ListItemDivider, {
               key: 2,
               role: "presentation",
@@ -1667,20 +1681,20 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             headline: props.loading ? loadingStateText : props.emptyText,
             "loading-spinner": props.loading
           }, null, 8, ["headline", "loading-spinner"])
-        ], 8, _hoisted_2$b)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$m);
+        ], 8, _hoisted_2$d)) : createCommentVNode("", true)
+      ], 16, _hoisted_1$p);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-1178b83b"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e3d86a4e"]]);
 
-const _hoisted_1$l = ["id", "role", "aria-label"];
-const _hoisted_2$a = {
+const _hoisted_1$o = ["id", "role", "aria-label"];
+const _hoisted_2$c = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     placement: { default: "bottom-left" },
@@ -1721,16 +1735,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         onToggle: _cache[0] || (_cache[0] = ($event) => open.value = $event.newState === "open")
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$a, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$c, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
-      ], 46, _hoisted_1$l);
+      ], 46, _hoisted_1$o);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-09124386"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-09124386"]]);
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1780,7 +1794,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$C, mergeProps({
+        createVNode(_sfc_main$H, mergeProps({
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event)
         }, toggleButtonProps.value, {
@@ -1825,7 +1839,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuButton = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-23e9404d"]]);
+const KdsMenuButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-23e9404d"]]);
 
 const kdsButtonSize = {
   XSMALL: "xsmall",
@@ -1841,9 +1855,9 @@ const kdsButtonVariant = {
 };
 const kdsButtonVariants = Object.values(kdsButtonVariant);
 
-const _hoisted_1$k = { class: "kds-label-wrapper" };
-const _hoisted_2$9 = ["id", "for", "title"];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = { class: "kds-label-wrapper" };
+const _hoisted_2$b = ["id", "for", "title"];
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -1860,7 +1874,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -1868,7 +1882,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$9),
+        }, toDisplayString(props.label), 9, _hoisted_2$b),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -1879,11 +1893,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-1a5dc1ba"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-1a5dc1ba"]]);
 
-const _hoisted_1$j = ["id"];
-const _hoisted_2$8 = { class: "subtext-text" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["id"];
+const _hoisted_2$a = { class: "subtext-text" };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -1914,17 +1928,17 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$8, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$j)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$a, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$m)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-df9a85a4"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-df9a85a4"]]);
 
-const _hoisted_1$i = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$7 = { class: "control" };
-const _hoisted_3$6 = {
+const _hoisted_1$l = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$9 = { class: "control" };
+const _hoisted_3$7 = {
   key: 0,
   class: "content"
 };
@@ -1934,7 +1948,7 @@ const _hoisted_6$2 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2007,7 +2021,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$7, [
+          createElementVNode("div", _hoisted_2$9, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -2015,7 +2029,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
             createElementVNode("div", _hoisted_4$4, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
@@ -2023,7 +2037,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
               class: "helper-text"
             }, toDisplayString(props.helperText), 9, _hoisted_5$2)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$i),
+        ], 10, _hoisted_1$l),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -2037,9 +2051,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-32f17780"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-32f17780"]]);
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -2071,8 +2085,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckboxGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2156,12 +2170,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: hasError.value
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$h);
+      ], 8, _hoisted_1$k);
     };
   }
 });
 
-const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-c38eeda5"]]);
+const KdsCheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-c38eeda5"]]);
 
 const kdsCheckboxGroupAlignment = {
   VERTICAL: "vertical",
@@ -2177,9 +2191,9 @@ const kdsCheckboxValue = {
 };
 const kdsCheckboxValues = Object.values(kdsCheckboxValue);
 
-const _hoisted_1$g = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
-const _hoisted_2$6 = { class: "control" };
-const _hoisted_3$5 = {
+const _hoisted_1$j = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$8 = { class: "control" };
+const _hoisted_3$6 = {
   key: 0,
   class: "dot",
   viewBox: "0 0 2 2",
@@ -2189,7 +2203,7 @@ const _hoisted_3$5 = {
 const _hoisted_4$3 = { class: "content" };
 const _hoisted_5$1 = { class: "label" };
 const _hoisted_6$1 = ["id"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButton",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -2229,8 +2243,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         type: "button",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$6, [
-          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$5, [..._cache[0] || (_cache[0] = [
+        createElementVNode("div", _hoisted_2$8, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$6, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "1",
               cy: "1",
@@ -2246,12 +2260,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             class: "helper-text"
           }, toDisplayString(props.helperText), 9, _hoisted_6$1)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$g);
+      ], 10, _hoisted_1$j);
     };
   }
 });
 
-const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-27c361e4"]]);
+const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-27c361e4"]]);
 
 const useRadioSelection = ({
   selectedId,
@@ -2373,8 +2387,8 @@ const useRadioSelection = ({
   };
 };
 
-const _hoisted_1$f = ["id", "aria-labelledby", "aria-describedby"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = ["id", "aria-labelledby", "aria-describedby"];
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "KdsRadioButtonGroup",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2453,15 +2467,15 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: unref(hasError)
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 8, _hoisted_1$f);
+      ], 8, _hoisted_1$i);
     };
   }
 });
 
-const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-9cc4dcdd"]]);
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-9cc4dcdd"]]);
 
-const _hoisted_1$e = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = ["aria-checked", "aria-label", "disabled", "tabindex", "title"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "ValueSwitchItem",
   props: {
     selected: { type: Boolean },
@@ -2511,12 +2525,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           name: props.trailingIcon,
           size: props.size
         }, null, 8, ["name", "size"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$e);
+      ], 10, _hoisted_1$h);
     };
   }
 });
 
-const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-93f3f577"]]);
+const ValueSwitchItem = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-93f3f577"]]);
 
 const useValueSwitchIconHiding = ({
   width,
@@ -2567,8 +2581,8 @@ const useValueSwitchIconHiding = ({
   };
 };
 
-const _hoisted_1$d = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["id", "aria-invalid", "aria-labelledby", "aria-describedby"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "KdsValueSwitch",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -2661,12 +2675,12 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           "preserve-sub-text-space": props.preserveSubTextSpace,
           error: props.error
         }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-      ], 10, _hoisted_1$d);
+      ], 10, _hoisted_1$g);
     };
   }
 });
 
-const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-666d4c10"]]);
+const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-666d4c10"]]);
 
 const kdsRadioButtonGroupAlignment = {
   VERTICAL: "vertical",
@@ -2686,7 +2700,7 @@ const kdsValueSwitchVariant = {
 };
 const kdsValueSwitchVariants = Object.values(kdsValueSwitchVariant);
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -2738,17 +2752,17 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-5d99c134"]]);
 
-const _hoisted_1$c = {
+const _hoisted_1$f = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$5 = {
+const _hoisted_2$7 = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$4 = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant"];
+const _hoisted_3$5 = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant"];
 const _hoisted_4$2 = ["aria-disabled"];
 const _hoisted_5 = {
   key: 4,
@@ -2758,7 +2772,7 @@ const _hoisted_6 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: { default: void 0 },
@@ -2784,7 +2798,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     ariaActivedescendant: { default: void 0 },
     unit: { default: void 0 },
     inputmode: { default: void 0 },
-    clearable: { type: Boolean, default: false }
+    clearable: { type: Boolean, default: false },
+    pattern: { default: void 0 }
   }, {
     "modelValue": { default: "" },
     "modelModifiers": {}
@@ -2832,13 +2847,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
           props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.leadingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -2858,6 +2873,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           "aria-describedby": props.ariaDescribedby,
           "aria-invalid": props.ariaInvalid,
           role: props.role,
+          pattern: props.pattern,
           "aria-valuenow": props.ariaValuenow,
           "aria-valuemin": props.ariaValuemin,
           "aria-valuemax": props.ariaValuemax,
@@ -2869,7 +2885,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
           onKeydown: _cache[2] || (_cache[2] = ($event) => emit("keydown", $event)),
           onClick: _cache[3] || (_cache[3] = ($event) => emit("click", $event))
-        }, null, 42, _hoisted_3$4),
+        }, null, 42, _hoisted_3$5),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -2879,7 +2895,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           }),
           "aria-disabled": props.disabled || void 0
         }, toDisplayString(props.unit), 11, _hoisted_4$2)) : createCommentVNode("", true),
-        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$E, {
+        props.clearable && hasValue.value && !props.disabled ? (openBlock(), createBlock(_sfc_main$J, {
           key: 3,
           class: "clear-button",
           type: "button",
@@ -2903,9 +2919,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-fad4fd1f"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-8815d034"]]);
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3111,9 +3127,9 @@ const usePointerHandler = (updateFromEvent) => {
   };
 };
 
-const _hoisted_1$b = { class: "kds-color-picker" };
-const _hoisted_2$4 = ["aria-valuetext"];
-const _hoisted_3$3 = ["aria-valuenow", "aria-valuetext"];
+const _hoisted_1$e = { class: "kds-color-picker" };
+const _hoisted_2$6 = ["aria-valuetext"];
+const _hoisted_3$4 = ["aria-valuenow", "aria-valuetext"];
 const DEFAULT_HUE_DEG = 270;
 const DEFAULT_SATURATION = 0.8;
 const DEFAULT_VALUE = 0.9;
@@ -3125,7 +3141,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$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     "modelValue": { default: "" },
@@ -3276,7 +3292,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", {
           ref_key: "colorspaceEl",
           ref: colorspaceEl,
@@ -3307,7 +3323,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(colorspaceHandleStyle.value)
           }, null, 4)
-        ], 44, _hoisted_2$4),
+        ], 44, _hoisted_2$6),
         createElementVNode("div", {
           ref_key: "hueEl",
           ref: hueEl,
@@ -3339,8 +3355,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             class: "handle",
             style: normalizeStyle(hueHandleStyle.value)
           }, null, 4)
-        ], 40, _hoisted_3$3),
-        createVNode(_sfc_main$h, {
+        ], 40, _hoisted_3$4),
+        createVNode(_sfc_main$m, {
           "model-value": modelValue.value,
           "aria-label": "Color hex value",
           placeholder: "#FFFFFF",
@@ -3351,7 +3367,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-180fafdd"]]);
+const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-180fafdd"]]);
 
 const HEX_LENGTH_1 = 1;
 const HEX_LENGTH_2 = 2;
@@ -3411,7 +3427,7 @@ const useColorInputValidationOnFocusOut = (modelValue) => {
   return { handleFocusOut };
 };
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "KdsColorInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3470,7 +3486,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["color", "style"])
               ]),
               trailing: withCtx(() => [
-                createVNode(unref(_sfc_main$C), {
+                createVNode(unref(_sfc_main$H), {
                   modelValue: open.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => open.value = $event),
                   size: "xsmall",
@@ -3510,6 +3526,282 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$d = { class: "kds-date-time-format-popover" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "DateTimeFormatPopover",
+  props: /* @__PURE__ */ mergeModels({
+    allDefaultFormats: {},
+    allowedFormats: {}
+  }, {
+    "selection": { default: "" },
+    "selectionModifiers": {}
+  }),
+  emits: ["update:selection"],
+  setup(__props) {
+    const props = __props;
+    const selection = useModel(__props, "selection");
+    const temporalTypeToModeLabel = {
+      DATE: "Date",
+      DATE_TIME: "Date & Time",
+      TIME: "Time",
+      ZONED_DATE_TIME: "Zoned Date & Time"
+    };
+    const categoryToLocaleLabel = {
+      RECENT: "Recent",
+      STANDARD: "ISO",
+      EUROPEAN: "European",
+      AMERICAN: "United States"
+    };
+    const typedDateFormats = computed(() => {
+      const entries = props.allDefaultFormats;
+      if (props.allowedFormats === void 0) {
+        return entries;
+      }
+      if (props.allowedFormats.length === 0) {
+        return [];
+      }
+      const allowed = new Set(props.allowedFormats);
+      return entries.filter((entry) => allowed.has(entry.temporalType));
+    });
+    const modeOptions = computed(() => {
+      const seen = /* @__PURE__ */ new Set();
+      const options = [];
+      for (const entry of typedDateFormats.value) {
+        const label = temporalTypeToModeLabel[entry.temporalType];
+        if (!seen.has(label)) {
+          seen.add(label);
+          options.push(label);
+        }
+      }
+      return options;
+    });
+    const localeOptions = computed(() => {
+      const recent = categoryToLocaleLabel.RECENT;
+      const seen = /* @__PURE__ */ new Set();
+      const options = [recent];
+      seen.add(recent);
+      for (const entry of typedDateFormats.value) {
+        const label = categoryToLocaleLabel[entry.category];
+        if (!seen.has(label)) {
+          seen.add(label);
+          options.push(label);
+        }
+      }
+      return options;
+    });
+    const selectedFormatEntry = computed(() => {
+      if (!selection.value) {
+        return null;
+      }
+      return typedDateFormats.value.find((entry) => entry.format === selection.value) ?? null;
+    });
+    const selectedMode = ref(void 0);
+    const selectedLocale = ref(void 0);
+    const selectedModeFromModel = computed(() => {
+      const entry = selectedFormatEntry.value;
+      return entry ? temporalTypeToModeLabel[entry.temporalType] : null;
+    });
+    const selectedLocaleFromModel = computed(() => {
+      const entry = selectedFormatEntry.value;
+      return entry ? categoryToLocaleLabel[entry.category] : null;
+    });
+    const effectiveSelectedMode = computed(() => {
+      const modes = modeOptions.value;
+      if (modes.length === 0) {
+        return "";
+      }
+      const manual = selectedMode.value;
+      if (manual && modes.includes(manual)) {
+        return manual;
+      }
+      const fromModel = selectedModeFromModel.value;
+      if (fromModel && modes.includes(fromModel)) {
+        return fromModel;
+      }
+      return modes[0];
+    });
+    const effectiveSelectedLocale = computed(() => {
+      const locales = localeOptions.value;
+      if (locales.length === 0) {
+        return "";
+      }
+      const manual = selectedLocale.value;
+      if (manual && locales.includes(manual)) {
+        return manual;
+      }
+      const fromModel = selectedLocaleFromModel.value;
+      if (fromModel && locales.includes(fromModel)) {
+        return fromModel;
+      }
+      return locales[0];
+    });
+    const internalOptionsByModeAndLocale = computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const entry of typedDateFormats.value) {
+        const modeLabel = temporalTypeToModeLabel[entry.temporalType];
+        const localeLabel = categoryToLocaleLabel[entry.category];
+        const key = `${modeLabel}__${localeLabel}`;
+        const options = map.get(key) ?? [];
+        options.push({
+          id: encodeURIComponent(entry.format),
+          text: entry.format,
+          subText: entry.example
+        });
+        map.set(key, options);
+      }
+      return map;
+    });
+    const possibleFormats = computed(() => {
+      const mode = effectiveSelectedMode.value;
+      const locale = effectiveSelectedLocale.value;
+      if (!mode || !locale) {
+        return [];
+      }
+      const key = `${mode}__${locale}`;
+      const options = internalOptionsByModeAndLocale.value.get(key) ?? [];
+      return options.map((option) => ({
+        ...option,
+        selected: option.id === encodeURIComponent(selection.value)
+      }));
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        modeOptions.value.length > 1 ? (openBlock(), createBlock(KdsValueSwitch, {
+          key: 0,
+          "model-value": effectiveSelectedMode.value,
+          size: "small",
+          "possible-values": modeOptions.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => {
+            selectedMode.value = value;
+          })
+        }, null, 8, ["model-value", "possible-values"])) : createCommentVNode("", true),
+        localeOptions.value.length > 1 ? (openBlock(), createBlock(KdsValueSwitch, {
+          key: 1,
+          "model-value": effectiveSelectedLocale.value,
+          size: "small",
+          "possible-values": localeOptions.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => {
+            selectedLocale.value = value;
+          })
+        }, null, 8, ["model-value", "possible-values"])) : createCommentVNode("", true),
+        createVNode(unref(KdsListContainer), {
+          class: "kds-date-time-format-popover-list",
+          "aria-label": "Date/time formats",
+          variant: "large",
+          "possible-values": possibleFormats.value,
+          "empty-text": "No recently used formats",
+          onItemClick: _cache[2] || (_cache[2] = ($event) => selection.value = decodeURIComponent($event))
+        }, null, 8, ["possible-values"])
+      ]);
+    };
+  }
+});
+
+const DateTimeFormatPopover = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-892448f6"]]);
+
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "KdsDateTimeFormatInput",
+  props: /* @__PURE__ */ mergeModels({
+    description: {},
+    label: {},
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false },
+    placeholder: { default: "Format" },
+    disabled: { type: Boolean, default: false },
+    autocomplete: {},
+    allowedFormats: {},
+    allDefaultFormats: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const open = ref(false);
+    const popoverEl = useTemplateRef("popoverEl");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx((slotProps) => [
+          createElementVNode("div", {
+            style: normalizeStyle(popoverEl.value?.anchorStyle)
+          }, [
+            createVNode(BaseInput, mergeProps(slotProps, {
+              modelValue: modelValue.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+              type: "text",
+              placeholder: props.placeholder,
+              disabled: props.disabled,
+              error: props.error,
+              validating: props.validating,
+              autocomplete: props.autocomplete
+            }), {
+              trailing: withCtx(() => [
+                createVNode(unref(_sfc_main$H), {
+                  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",
+                  "aria-controls": popoverEl.value?.popoverId,
+                  "aria-expanded": open.value,
+                  "aria-haspopup": "dialog",
+                  disabled: props.disabled,
+                  title: open.value ? "Close date/time format picker" : "Open date/time format picker"
+                }, null, 8, ["modelValue", "aria-controls", "aria-expanded", "disabled", "title"])
+              ]),
+              _: 1
+            }, 16, ["modelValue", "placeholder", "disabled", "error", "validating", "autocomplete"]),
+            createVNode(KdsPopover, {
+              ref_key: "popoverEl",
+              ref: popoverEl,
+              modelValue: open.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+              placement: "bottom-right",
+              "popover-aria-label": "Date time format selection dialog"
+            }, {
+              default: withCtx(() => [
+                createVNode(DateTimeFormatPopover, {
+                  selection: modelValue.value,
+                  "all-default-formats": props.allDefaultFormats,
+                  "allowed-formats": props.allowedFormats,
+                  "onUpdate:selection": _cache[2] || (_cache[2] = ($event) => {
+                    modelValue.value = $event;
+                    open.value = false;
+                  })
+                }, null, 8, ["selection", "all-default-formats", "allowed-formats"])
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ], 4)
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+
+const kdsTemporalType = {
+  DATE: "DATE",
+  TIME: "TIME",
+  DATE_TIME: "DATE_TIME",
+  ZONED_DATE_TIME: "ZONED_DATE_TIME"
+};
+const kdsTemporalTypes = Object.values(kdsTemporalType);
+const kdsDateFormatCategory = {
+  RECENT: "RECENT",
+  STANDARD: "STANDARD",
+  EUROPEAN: "EUROPEAN",
+  AMERICAN: "AMERICAN"
+};
+const kdsDateFormatCategories = Object.values(kdsDateFormatCategory);
+
 const additionalGroupSeparators = [" ", " ", " "];
 const decimalSeparatorSample = 1.1;
 const groupSeparatorSample = 1000.1;
@@ -3518,7 +3810,7 @@ const countFractionDigits = (value) => {
     return 0;
   }
   const exp = value.toExponential();
-  const match = exp.match(/^[-+]?(\d+)(?:\.(\d+))?e([+-]?\d+)$/i);
+  const match = /^[-+]?(\d+)(?:\.(\d+))?e([+-]?\d+)$/i.exec(exp);
   if (!match) {
     return 0;
   }
@@ -3563,7 +3855,7 @@ const createKdsNumberParser = (params) => {
   };
   const roundToStep = (value) => {
     if (!Number.isFinite(value)) {
-      return NaN;
+      return Number.NaN;
     }
     const step = params.step;
     if (!Number.isFinite(step) || step <= 0) {
@@ -3585,42 +3877,51 @@ const createKdsNumberParser = (params) => {
     // Note: whitespace is removed earlier; we don't accept grouping separators here.
     /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/.test(normalized)
   );
-  const parseFromInput = (value) => {
+  const parseWithLocaleDecimal = (input, localeDecimal) => {
+    const withoutGrouping = removeGroupingSeparators(input);
+    const normalized = withoutGrouping.split(localeDecimal).join(".");
+    if (!isValidNormalizedNumber(normalized)) {
+      return Number.NaN;
+    }
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : Number.NaN;
+  };
+  const parseWithFallbackDot = (input) => {
+    const lastDotIndex = input.lastIndexOf(".");
+    const digitsAfterDot = input.slice(lastDotIndex + 1);
+    const looksLikeDecimal = digitsAfterDot.length > 0 && digitsAfterDot.length <= 2;
+    const normalized = looksLikeDecimal ? `${removeGroupingSeparators(input.slice(0, lastDotIndex))}.${removeGroupingSeparators(
+      digitsAfterDot
+    )}` : removeGroupingSeparators(input);
+    if (!isValidNormalizedNumber(normalized)) {
+      return Number.NaN;
+    }
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : Number.NaN;
+  };
+  const parseWithoutLocaleDecimal = (input) => {
+    const normalized = removeGroupingSeparators(input);
+    if (!isValidNormalizedNumber(normalized)) {
+      return Number.NaN;
+    }
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : Number.NaN;
+  };
+  function parseFromInput(value) {
     const trimmed = value.trim();
     if (trimmed.length === 0) {
-      return NaN;
+      return Number.NaN;
     }
     const localeDecimal = decimalSeparator;
     const hasLocaleDecimal = localeDecimal.length > 0 && trimmed.includes(localeDecimal);
     if (hasLocaleDecimal) {
-      const withoutGrouping = removeGroupingSeparators(trimmed);
-      const normalized2 = withoutGrouping.split(localeDecimal).join(".");
-      if (!isValidNormalizedNumber(normalized2)) {
-        return NaN;
-      }
-      const parsed2 = Number.parseFloat(normalized2);
-      return Number.isFinite(parsed2) ? parsed2 : NaN;
+      return parseWithLocaleDecimal(trimmed, localeDecimal);
     }
     if (localeDecimal !== "." && trimmed.includes(".")) {
-      const lastDotIndex = trimmed.lastIndexOf(".");
-      const digitsAfterDot = trimmed.slice(lastDotIndex + 1);
-      const looksLikeDecimal = digitsAfterDot.length > 0 && digitsAfterDot.length <= 2;
-      const normalized2 = looksLikeDecimal ? `${removeGroupingSeparators(trimmed.slice(0, lastDotIndex))}.${removeGroupingSeparators(
-        digitsAfterDot
-      )}` : removeGroupingSeparators(trimmed);
-      if (!isValidNormalizedNumber(normalized2)) {
-        return NaN;
-      }
-      const parsed2 = Number.parseFloat(normalized2);
-      return Number.isFinite(parsed2) ? parsed2 : NaN;
+      return parseWithFallbackDot(trimmed);
     }
-    const normalized = removeGroupingSeparators(trimmed);
-    if (!isValidNormalizedNumber(normalized)) {
-      return NaN;
-    }
-    const parsed = Number.parseFloat(normalized);
-    return Number.isFinite(parsed) ? parsed : NaN;
-  };
+    return parseWithoutLocaleDecimal(trimmed);
+  }
   return {
     locale: params.locale,
     decimalSeparator,
@@ -3632,7 +3933,7 @@ const createKdsNumberParser = (params) => {
   };
 };
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "KdsNumberInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3785,7 +4086,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$E, {
+              createVNode(_sfc_main$J, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -3794,7 +4095,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 disabled: !canDecrease.value,
                 onClick: _cache[0] || (_cache[0] = ($event) => adjustByStep(-1))
               }, null, 8, ["aria-label", "disabled"]),
-              createVNode(_sfc_main$E, {
+              createVNode(_sfc_main$J, {
                 type: "button",
                 size: "xsmall",
                 variant: "outlined",
@@ -3813,7 +4114,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const escapeRegex = (value) => value.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
 const wildcardToRegexBody = (pattern) => {
   let body = "";
   for (const char of pattern) {
@@ -3879,7 +4180,7 @@ const buildRegexFromPatternInput = (input, options) => {
 const stripOuterNonCapturingGroup = (pattern) => stripOuterGroup(pattern, "(?:");
 const stripCaseInsensitiveWrapper = (pattern) => stripOuterGroup(pattern, CASE_INSENSITIVE_PREFIX);
 const tryParseExcluded = (regex) => {
-  const match = regex.trim().match(/^\^\(\?!\.\*([\s\S]*)\)\.\*\$$/);
+  const match = /^\^\(\?!\.\*([\s\S]*)\)\.\*\$$/.exec(regex.trim());
   if (!match) {
     return {};
   }
@@ -3890,7 +4191,7 @@ const parseRegexToPatternInputValue = (regex, options) => {
     return "";
   }
   const { excludedInner } = tryParseExcluded(regex);
-  const inner = excludedInner === void 0 ? regex : excludedInner;
+  const inner = excludedInner ?? regex;
   const withoutCase = options.caseSensitive ? inner : stripCaseInsensitiveWrapper(inner);
   const body = stripOuterNonCapturingGroup(withoutCase);
   if (options.useRegex) {
@@ -3900,7 +4201,7 @@ const parseRegexToPatternInputValue = (regex, options) => {
   return wildcard ?? body;
 };
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "KdsPatternInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -3978,7 +4279,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             clearable: ""
           }), {
             trailing: withCtx(() => [
-              createVNode(_sfc_main$C, {
+              createVNode(_sfc_main$H, {
                 modelValue: caseSensitive.value,
                 "onUpdate:modelValue": [
                   _cache[0] || (_cache[0] = ($event) => caseSensitive.value = $event),
@@ -3991,7 +4292,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 "aria-label": caseSensitiveAriaLabel.value,
                 disabled: props.disabled
               }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$C, {
+              createVNode(_sfc_main$H, {
                 modelValue: excludeMatches.value,
                 "onUpdate:modelValue": [
                   _cache[1] || (_cache[1] = ($event) => excludeMatches.value = $event),
@@ -4004,7 +4305,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 "aria-label": excludeMatchesAriaLabel.value,
                 disabled: props.disabled
               }, null, 8, ["modelValue", "title", "aria-label", "disabled"]),
-              createVNode(_sfc_main$C, {
+              createVNode(_sfc_main$H, {
                 modelValue: useRegex.value,
                 "onUpdate:modelValue": [
                   _cache[2] || (_cache[2] = ($event) => useRegex.value = $event),
@@ -4027,7 +4328,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "KdsSearchInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -4081,8 +4382,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = ["rows", "placeholder", "disabled", "autocomplete"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = ["rows", "placeholder", "disabled", "autocomplete"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "KdsTextarea",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -4139,7 +4440,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             placeholder: props.placeholder,
             disabled: props.disabled,
             autocomplete: props.autocomplete
-          }), null, 16, _hoisted_1$a), [
+          }), null, 16, _hoisted_1$c), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -4149,20 +4450,20 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a2df5fed"]]);
+const KdsTextarea = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-7a6592b5"]]);
 
-const _hoisted_1$9 = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$3 = {
+const _hoisted_1$b = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
+const _hoisted_2$5 = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
 };
-const _hoisted_3$2 = ["id"];
+const _hoisted_3$3 = ["id"];
 const _hoisted_4$1 = {
   class: "trailing",
   "aria-hidden": "true"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "BaseDropdown",
   props: /* @__PURE__ */ mergeModels({
     text: { default: void 0 },
@@ -4234,8 +4535,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$3, [
-          createVNode(_sfc_main$z, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$5, [
+          createVNode(_sfc_main$E, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -4243,33 +4544,33 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         createElementVNode("span", {
           id: unref(valueTextId),
           class: normalizeClass(["text", {
-            placeholder: !props.text,
+            placeholder: !props.text && !props.disabled,
             missing: props.missing
           }])
-        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$2),
+        }, toDisplayString(props.text ?? props.placeholder), 11, _hoisted_3$3),
         createElementVNode("span", _hoisted_4$1, [
           createVNode(KdsIcon, {
             name: open.value ? "chevron-up" : "chevron-down",
             size: "small"
           }, null, 8, ["name"])
         ])
-      ], 42, _hoisted_1$9);
+      ], 42, _hoisted_1$b);
     };
   }
 });
 
-const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-f1917c48"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-bdb9c0d3"]]);
 
-const _hoisted_1$8 = { class: "kds-dropdown-container" };
-const _hoisted_2$2 = { class: "kds-dropdown-container-sticky-top" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { class: "kds-dropdown-container" };
+const _hoisted_2$4 = { class: "kds-dropdown-container-sticky-top" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
     loading: { type: Boolean },
     possibleValues: {}
   }, {
-    "modelValue": { default: null },
+    "modelValue": { default: "" },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
@@ -4281,7 +4582,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const listContainerRef = useTemplateRef("listContainer");
     const optionsWithSyntheticMissing = computed(
       () => {
-        if (modelValue.value === null) {
+        if (!modelValue.value) {
           return props.possibleValues;
         }
         const hasSelected = props.possibleValues.some(
@@ -4329,8 +4630,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       focus: () => searchEl.value?.focus()
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
-        createElementVNode("div", _hoisted_2$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+        createElementVNode("div", _hoisted_2$4, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -4362,9 +4663,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-15e753c9"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-9e62fb49"]]);
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -4380,7 +4681,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     validating: { type: Boolean, default: false },
     preserveSubTextSpace: { type: Boolean, default: false }
   }, {
-    "modelValue": { default: null },
+    "modelValue": { default: "" },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
@@ -4418,11 +4719,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           createVNode(BaseDropdown, mergeProps(slotProps, {
             open: open.value,
             "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
-            text: modelValue.value !== null && !selectedOption.value ? `(Missing) ${modelValue.value}` : selectedOption.value?.text,
+            text: modelValue.value && !selectedOption.value ? `(Missing) ${modelValue.value}` : selectedOption.value?.text,
             placeholder: props.placeholder,
             disabled: props.disabled,
             error: props.error,
-            missing: modelValue.value !== null && !selectedOption.value,
+            missing: !!modelValue.value && !selectedOption.value,
             accessory: selectedOption.value?.accessory,
             style: popoverEl.value?.anchorStyle,
             "popover-id": popoverEl.value?.popoverId,
@@ -4458,6 +4759,334 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$9 = ["disabled"];
+const _hoisted_2$3 = ["title"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "KdsListItemButton",
+  props: {
+    label: {},
+    leadingIcon: {},
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const labelEl = useTemplateRef("labelEl");
+    const { isTruncated: isLabelTruncated } = useKdsIsTruncated(labelEl);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        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
+        }, 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$3)
+      ], 8, _hoisted_1$9);
+    };
+  }
+});
+
+const KdsListItemButton = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-ba674605"]]);
+
+const _hoisted_1$8 = { class: "kds-multi-select-dropdown-options" };
+const _hoisted_2$2 = { class: "kds-multi-select-dropdown-search" };
+const _hoisted_3$2 = {
+  key: 0,
+  class: "kds-multi-select-dropdown-footer"
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "MultiSelectDropdownContainer",
+  props: /* @__PURE__ */ mergeModels({
+    emptyText: {},
+    loading: { type: Boolean, default: false },
+    possibleValues: {},
+    allowNewValues: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {},
+    "searchValue": { default: "" },
+    "searchValueModifiers": {}
+  }),
+  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 emit = __emit;
+    const modelValue = useModel(__props, "modelValue");
+    const searchValue = useModel(__props, "searchValue");
+    const searchEl = useTemplateRef("searchEl");
+    const listContainerRef = useTemplateRef("listContainer");
+    const initialSelectedIds = ref(/* @__PURE__ */ new Set());
+    const knownIds = computed(() => new Set(props.possibleValues.map((o) => o.id)));
+    const syntheticMissingOptions = computed(
+      () => modelValue.value.filter((id) => !knownIds.value.has(id)).map((id) => ({ id, text: id }))
+    );
+    const filteredOptions = computed(() => {
+      const normalizedQuery = searchValue.value.trim().toLowerCase();
+      if (normalizedQuery.length === 0) {
+        return props.possibleValues;
+      }
+      return props.possibleValues.filter(
+        (option) => option.text.toLowerCase().includes(normalizedQuery)
+      );
+    });
+    const canAddNewValue = computed(() => {
+      const trimmed = searchValue.value.trim();
+      if (!props.allowNewValues || trimmed.length === 0) {
+        return false;
+      }
+      const lower = trimmed.toLowerCase();
+      const existsInOptions = props.possibleValues.some(
+        (o) => o.text.toLowerCase() === lower
+      );
+      const idCollision = knownIds.value.has(trimmed);
+      const alreadySelected = modelValue.value.includes(trimmed);
+      return !existsInOptions && !idCollision && !alreadySelected;
+    });
+    const listOptions = computed(() => {
+      const selectedSet = new Set(modelValue.value);
+      const addNewItem = canAddNewValue.value ? [
+        {
+          id: ADD_NEW_VALUE_ID,
+          text: searchValue.value.trim(),
+          accessory: { type: "icon", name: "plus" },
+          separator: true
+        }
+      ] : [];
+      const missingItems = syntheticMissingOptions.value.map(
+        (option) => ({
+          id: option.id,
+          text: option.text,
+          selected: true,
+          missing: true
+        })
+      );
+      const regularItems = filteredOptions.value.map((option) => ({
+        id: option.id,
+        text: option.text,
+        subText: option.subText,
+        special: option.special,
+        accessory: option.accessory,
+        selected: selectedSet.has(option.id),
+        disabled: option.disabled
+      })).slice().sort(
+        (a, b) => Number(initialSelectedIds.value.has(b.id)) - Number(initialSelectedIds.value.has(a.id))
+      );
+      return [...addNewItem, ...missingItems, ...regularItems];
+    });
+    const visibleEnabledIds = computed(
+      () => filteredOptions.value.filter((o) => !o.disabled).map((o) => o.id)
+    );
+    const anyVisibleSelected = computed(
+      () => visibleEnabledIds.value.some((id) => modelValue.value.includes(id))
+    );
+    const onItemClick = (id) => {
+      if (id === ADD_NEW_VALUE_ID) {
+        const trimmed = searchValue.value.trim();
+        if (trimmed.length > 0) {
+          emit("addValue", trimmed);
+          searchValue.value = "";
+        }
+        return;
+      }
+      modelValue.value = modelValue.value.includes(id) ? modelValue.value.filter((entryId) => entryId !== id) : [...modelValue.value, id];
+    };
+    const onSelectAllOrClearAll = () => {
+      const ids = new Set(visibleEnabledIds.value);
+      if (anyVisibleSelected.value) {
+        modelValue.value = modelValue.value.filter((id) => !ids.has(id));
+      } else {
+        const alreadySelected = new Set(modelValue.value);
+        const toAdd = visibleEnabledIds.value.filter(
+          (id) => !alreadySelected.has(id)
+        );
+        modelValue.value = [...modelValue.value, ...toAdd];
+      }
+    };
+    __expose({
+      focus: () => {
+        initialSelectedIds.value = new Set(modelValue.value);
+        searchEl.value?.focus();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createElementVNode("div", _hoisted_2$2, [
+          createVNode(BaseInput, {
+            ref_key: "searchEl",
+            ref: searchEl,
+            modelValue: searchValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
+            type: "search",
+            placeholder: "Search",
+            "aria-label": "Filter options",
+            "aria-activedescendant": listContainerRef.value?.activeDescendant,
+            "leading-icon": "search",
+            clearable: true,
+            onKeydown: _cache[1] || (_cache[1] = ($event) => listContainerRef.value?.handleKeydown($event)),
+            onFocus: _cache[2] || (_cache[2] = ($event) => listContainerRef.value?.handleFocus()),
+            onBlur: _cache[3] || (_cache[3] = ($event) => listContainerRef.value?.handleBlur())
+          }, null, 8, ["modelValue", "aria-activedescendant"])
+        ]),
+        createVNode(unref(KdsListContainer), {
+          ref: "listContainer",
+          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,
+          "empty-text": props.emptyText,
+          "controlled-externally": "",
+          "aria-label": "Dropdown options",
+          onItemClick
+        }, null, 8, ["class", "possible-values", "loading", "empty-text"]),
+        !props.loading && visibleEnabledIds.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+          createVNode(unref(KdsListItemButton), {
+            label: anyVisibleSelected.value ? "Clear all" : "Select all",
+            "leading-icon": anyVisibleSelected.value ? "trash" : "checkmark",
+            disabled: filteredOptions.value.every((o) => o.disabled),
+            onClick: onSelectAllOrClearAll
+          }, null, 8, ["label", "leading-icon", "disabled"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const MultiSelectDropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-361c57bf"]]);
+
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "KdsMultiSelectDropdown",
+  props: /* @__PURE__ */ mergeModels({
+    placeholder: { default: "Select" },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    possibleValues: {},
+    description: {},
+    label: {},
+    ariaLabel: {},
+    id: {},
+    subText: {},
+    error: { type: Boolean, default: false },
+    validating: { type: Boolean, default: false },
+    preserveSubTextSpace: { type: Boolean, default: false },
+    allowNewValues: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const open = ref(false);
+    const dropdownContainerEl = useTemplateRef("dropdownContainerEl");
+    const popoverEl = useTemplateRef("popoverEl");
+    watchEffect(() => {
+      if (open.value) {
+        nextTick(() => dropdownContainerEl.value?.focus());
+      }
+    });
+    const addedOptions = ref([]);
+    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));
+      return [...props.possibleValues, ...deduped];
+    });
+    const optionById = computed(
+      () => new Map(allPossibleValues.value.map((item) => [item.id, item]))
+    );
+    const missingIds = computed(
+      () => modelValue.value.filter((id) => !optionById.value.has(id))
+    );
+    const summary = computed(() => {
+      if (modelValue.value.length === 0) {
+        return void 0;
+      }
+      if (missingIds.value.length > 0) {
+        return `(Missing) ${missingIds.value[0]}`;
+      }
+      return `Selected (${modelValue.value.length}/${allPossibleValues.value.length})`;
+    });
+    const onAddValue = (text) => {
+      addedOptions.value = [...addedOptions.value, { id: text, text }];
+      modelValue.value = [...modelValue.value, text];
+    };
+    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) => [
+          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,
+            missing: missingIds.value.length > 0,
+            style: popoverEl.value?.anchorStyle,
+            "popover-id": popoverEl.value?.popoverId,
+            onClick: _cache[1] || (_cache[1] = ($event) => open.value = !open.value)
+          }), null, 16, ["open", "text", "placeholder", "disabled", "error", "missing", "style", "popover-id"]),
+          createVNode(KdsPopover, {
+            ref_key: "popoverEl",
+            ref: popoverEl,
+            modelValue: open.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+            placement: "bottom-left",
+            role: "dialog",
+            "full-width": "",
+            "popover-aria-label": "Multi select dropdown options"
+          }, {
+            default: withCtx(() => [
+              createVNode(MultiSelectDropdownContainer, {
+                ref_key: "dropdownContainerEl",
+                ref: dropdownContainerEl,
+                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,
+                "empty-text": "No entries found",
+                onAddValue
+              }, null, 8, ["modelValue", "possible-values", "loading", "allow-new-values"])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["id", "label", "aria-label", "description", "sub-text", "error", "validating", "preserve-sub-text-space"]);
+    };
+  }
+});
+
 const _hoisted_1$7 = { class: "kds-info-popover-content" };
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "InfoPopover",
@@ -4831,7 +5460,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$1, toDisplayString(props.headline), 1),
-          createVNode(_sfc_main$E, {
+          createVNode(_sfc_main$J, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -5104,7 +5733,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$p, {
+                createVNode(_sfc_main$u, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -5119,7 +5748,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$E, {
+              return openBlock(), createBlock(_sfc_main$J, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -5151,5 +5780,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-41fc8d84"]]);
 
-export { KdsAvatar, KdsBadge, _sfc_main$E as KdsButton, KdsCardClickable, _sfc_main$p as KdsCheckbox, KdsCheckboxGroup, _sfc_main$f as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$8 as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$D as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$e as KdsNumberInput, _sfc_main$d as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$c as KdsSearchInput, KdsSubText, _sfc_main$h as KdsTextInput, KdsTextarea, _sfc_main$C as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAvatar, KdsBadge, _sfc_main$J as KdsButton, KdsCardClickable, _sfc_main$u as KdsCheckbox, KdsCheckboxGroup, _sfc_main$k as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$i as KdsDateTimeFormatInput, _sfc_main$b as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$I as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$8 as KdsMultiSelectDropdown, _sfc_main$h as KdsNumberInput, _sfc_main$g as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$f as KdsSearchInput, KdsSubText, _sfc_main$m as KdsTextInput, KdsTextarea, _sfc_main$H as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map