@fkui/vue 6.1.0 → 6.3.0

package/dist/cjs/index.cjs.js

@@ -4,7 +4,7 @@ const vue = require("vue");
 const logic = require("@fkui/logic");
 const date = require("@fkui/date");
 const statuses = ["default", "warning", "error", "success", "info"];
-const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
   __name: "FBadge",
   props: {
     /**
@@ -162,10 +162,10 @@ function requireClassofRaw() {
   if (hasRequiredClassofRaw) return classofRaw;
   hasRequiredClassofRaw = 1;
   var uncurryThis = requireFunctionUncurryThis();
-  var toString = uncurryThis({}.toString);
+  var toString2 = uncurryThis({}.toString);
   var stringSlice = uncurryThis("".slice);
   classofRaw = function(it) {
-    return stringSlice(toString(it), 8, -1);
+    return stringSlice(toString2(it), 8, -1);
   };
   return classofRaw;
 }
@@ -234,16 +234,16 @@ function requireIsCallable() {
   };
   return isCallable;
 }
-var isObject;
+var isObject$1;
 var hasRequiredIsObject$1;
 function requireIsObject$1() {
-  if (hasRequiredIsObject$1) return isObject;
+  if (hasRequiredIsObject$1) return isObject$1;
   hasRequiredIsObject$1 = 1;
   var isCallable2 = requireIsCallable();
-  isObject = function(it) {
+  isObject$1 = function(it) {
     return typeof it == "object" ? it !== null : isCallable2(it);
   };
-  return isObject;
+  return isObject$1;
 }
 var getBuiltIn;
 var hasRequiredGetBuiltIn;
@@ -451,10 +451,10 @@ function requireSharedStore() {
   var SHARED = "__core-js_shared__";
   var store = sharedStore.exports = globalThis2[SHARED] || defineGlobalProperty2(SHARED, {});
   (store.versions || (store.versions = [])).push({
-    version: "3.40.0",
+    version: "3.41.0",
     mode: IS_PURE ? "pure" : "global",
     copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
-    license: "https://github.com/zloirock/core-js/blob/v3.40.0/LICENSE",
+    license: "https://github.com/zloirock/core-js/blob/v3.41.0/LICENSE",
     source: "https://github.com/zloirock/core-js"
   });
   return sharedStore.exports;
@@ -503,9 +503,9 @@ function requireUid() {
   var uncurryThis = requireFunctionUncurryThis();
   var id = 0;
   var postfix = Math.random();
-  var toString = uncurryThis(1 .toString);
+  var toString2 = uncurryThis(1 .toString);
   uid = function(key) {
-    return "Symbol(" + (key === void 0 ? "" : key) + ")_" + toString(++id + postfix, 36);
+    return "Symbol(" + (key === void 0 ? "" : key) + ")_" + toString2(++id + postfix, 36);
   };
   return uid;
 }
@@ -766,8 +766,8 @@ function requireWeakMapBasicDetection() {
   hasRequiredWeakMapBasicDetection = 1;
   var globalThis2 = requireGlobalThis();
   var isCallable2 = requireIsCallable();
-  var WeakMap = globalThis2.WeakMap;
-  weakMapBasicDetection = isCallable2(WeakMap) && /native code/.test(String(WeakMap));
+  var WeakMap2 = globalThis2.WeakMap;
+  weakMapBasicDetection = isCallable2(WeakMap2) && /native code/.test(String(WeakMap2));
   return weakMapBasicDetection;
 }
 var sharedKey;
@@ -806,7 +806,7 @@ function requireInternalState() {
   var hiddenKeys2 = requireHiddenKeys();
   var OBJECT_ALREADY_INITIALIZED = "Object already initialized";
   var TypeError2 = globalThis2.TypeError;
-  var WeakMap = globalThis2.WeakMap;
+  var WeakMap2 = globalThis2.WeakMap;
   var set, get, has;
   var enforce = function(it) {
     return has(it) ? get(it) : set(it, {});
@@ -821,7 +821,7 @@ function requireInternalState() {
     };
   };
   if (NATIVE_WEAK_MAP || shared2.state) {
-    var store = shared2.state || (shared2.state = new WeakMap());
+    var store = shared2.state || (shared2.state = new WeakMap2());
     store.get = store.get;
     store.has = store.has;
     store.set = store.set;
@@ -920,7 +920,7 @@ function requireMakeBuiltIn() {
     }
     return value;
   };
-  Function.prototype.toString = makeBuiltIn$1(function toString() {
+  Function.prototype.toString = makeBuiltIn$1(function toString2() {
     return isCallable2(this) && getInternalState(this).source || inspectSource2(this);
   }, "toString");
   return makeBuiltIn.exports;
@@ -1883,7 +1883,7 @@ function requireEs_array_push() {
 requireEs_array_push();
 const Flip = ["horizontal", "vertical"];
 const Rotate = ["90", "180", "270"];
-const _sfc_main$1a = vue.defineComponent({
+const _sfc_main$1d = vue.defineComponent({
   name: "FIcon",
   inheritAttrs: false,
   props: {
@@ -1971,8 +1971,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1$U = ["aria-hidden"];
-const _hoisted_2$F = ["xlink:href"];
+const _hoisted_1$X = ["aria-hidden"];
+const _hoisted_2$G = ["xlink:href"];
 function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps(_ctx.$attrs, {
     focusable: "false",
@@ -1980,9 +1980,9 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": _ctx.ariaHidden
   }), [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("use", {
     "xlink:href": _ctx.spriteId
-  }, null, 8, _hoisted_2$F)], 16, _hoisted_1$U);
+  }, null, 8, _hoisted_2$G)], 16, _hoisted_1$X);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$R]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$R]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -3873,8 +3873,8 @@ function require_WeakMap() {
   if (hasRequired_WeakMap) return _WeakMap;
   hasRequired_WeakMap = 1;
   var getNative = require_getNative(), root = require_root();
-  var WeakMap = getNative(root, "WeakMap");
-  _WeakMap = WeakMap;
+  var WeakMap2 = getNative(root, "WeakMap");
+  _WeakMap = WeakMap2;
   return _WeakMap;
 }
 var _getTag;
@@ -3882,12 +3882,12 @@ var hasRequired_getTag;
 function require_getTag() {
   if (hasRequired_getTag) return _getTag;
   hasRequired_getTag = 1;
-  var DataView2 = require_DataView(), Map2 = require_Map(), Promise2 = require_Promise(), Set = require_Set(), WeakMap = require_WeakMap(), baseGetTag = require_baseGetTag(), toSource = require_toSource();
+  var DataView2 = require_DataView(), Map2 = require_Map(), Promise2 = require_Promise(), Set = require_Set(), WeakMap2 = require_WeakMap(), baseGetTag = require_baseGetTag(), toSource = require_toSource();
   var mapTag = "[object Map]", objectTag = "[object Object]", promiseTag = "[object Promise]", setTag = "[object Set]", weakMapTag = "[object WeakMap]";
   var dataViewTag = "[object DataView]";
-  var dataViewCtorString = toSource(DataView2), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap);
+  var dataViewCtorString = toSource(DataView2), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap2);
   var getTag = baseGetTag;
-  if (DataView2 && getTag(new DataView2(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap && getTag(new WeakMap()) != weakMapTag) {
+  if (DataView2 && getTag(new DataView2(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
     getTag = function(value) {
       var result = baseGetTag(value), Ctor = result == objectTag ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
       if (ctorString) {
@@ -4420,7 +4420,7 @@ function elementIsRadioButton(element) {
 function isHTMLInputElement(element) {
   return element instanceof HTMLInputElement;
 }
-const _sfc_main$19 = vue.defineComponent({
+const _sfc_main$1c = vue.defineComponent({
   name: "FModal",
   components: {
     FIcon
@@ -4600,8 +4600,8 @@ const _sfc_main$19 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$T = ["id"];
-const _hoisted_2$E = {
+const _hoisted_1$W = ["id"];
+const _hoisted_2$F = {
   class: "modal__backdrop"
 };
 const _hoisted_3$w = {
@@ -4630,7 +4630,7 @@ const _hoisted_8$8 = {
 const _hoisted_9$6 = {
   class: "modal__footer"
 };
-const _hoisted_10$4 = {
+const _hoisted_10$3 = {
   class: "modal__shelf"
 };
 const _hoisted_11$3 = ["aria-label"];
@@ -4640,7 +4640,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     id: _ctx.id,
     class: vue.normalizeClass(["modal", _ctx.modalClass])
-  }, [vue.createElementVNode("div", _hoisted_2$E, [vue.createElementVNode("div", {
+  }, [vue.createElementVNode("div", _hoisted_2$F, [vue.createElementVNode("div", {
     class: "modal__outer-container scroll-target",
     tabindex: "-1",
     role: "dialog",
@@ -4652,7 +4652,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createElementVNode("div", _hoisted_4$q, [vue.createElementVNode("div", _hoisted_5$l, [vue.createElementVNode("div", _hoisted_6$g, [vue.createElementVNode("div", {
     tabindex: "0",
     onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusFirst && _ctx.onFocusFirst(...args))
-  }, null, 32), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasHeaderSlot ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_7$d, [vue.renderSlot(_ctx.$slots, "header")], 512)) : vue.createCommentVNode("", true)]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_8$8, [vue.renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_9$6, [vue.renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_10$4, [vue.createElementVNode("button", {
+  }, null, 32), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasHeaderSlot ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_7$d, [vue.renderSlot(_ctx.$slots, "header")], 512)) : vue.createCommentVNode("", true)]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_8$8, [vue.renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_9$6, [vue.renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_10$3, [vue.createElementVNode("button", {
     type: "button",
     class: "close-button",
     "aria-label": _ctx.ariaCloseText,
@@ -4662,9 +4662,9 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   })], 8, _hoisted_11$3), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("div", {
     tabindex: "0",
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
-  }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$T)) : vue.createCommentVNode("", true);
+  }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$W)) : vue.createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$Q]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$Q]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -4693,7 +4693,7 @@ const defaultButtons = [{
   event: "dismiss",
   type: "secondary"
 }];
-const _sfc_main$18 = vue.defineComponent({
+const _sfc_main$1b = vue.defineComponent({
   name: "FConfirmModal",
   components: {
     FModal
@@ -4797,10 +4797,10 @@ const _sfc_main$18 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$V = {
   class: "button-group"
 };
-const _hoisted_2$D = ["onClick"];
+const _hoisted_2$E = ["onClick"];
 const _hoisted_3$v = {
   key: 0,
   class: "sr-only"
@@ -4818,22 +4818,22 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     header: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "heading", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.heading), 1)])]),
     content: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "content", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.content), 1)])]),
-    footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$S, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.preparedButtons, (button) => {
+    footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$V, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.preparedButtons, (button) => {
       return vue.openBlock(), vue.createElementBlock("button", {
         key: button.label,
         type: "button",
         class: vue.normalizeClass([button.classlist, "button-group__item"]),
         onClick: ($event) => _ctx.onClick(button)
-      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$D);
+      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$E);
     }), 128))])]),
     _: 3
   }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
-const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$P]]);
+const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$P]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
 const ALIGNMENT = ["top", "center", "bottom"];
 const FLOAT = ["left", "center", "right"];
-const _sfc_main$17 = vue.defineComponent({
+const _sfc_main$1a = vue.defineComponent({
   name: "IFlex",
   inheritAttrs: true,
   props: {
@@ -4913,8 +4913,8 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass(["iflex", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$O]]);
-const _sfc_main$16 = vue.defineComponent({
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$O]]);
+const _sfc_main$19 = vue.defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
   props: {
@@ -4966,7 +4966,7 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass(["iflex__item", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$N]]);
+const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$N]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -4976,7 +4976,7 @@ function focusError(item) {
   logic.scrollTo(element, window.innerHeight * 0.25);
   logic.focus(focusElement2 ? focusElement2 : element);
 }
-const _sfc_main$15 = vue.defineComponent({
+const _sfc_main$18 = vue.defineComponent({
   name: "FErrorList",
   components: {
     FIcon,
@@ -5032,10 +5032,10 @@ const _sfc_main$15 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$R = {
+const _hoisted_1$U = {
   class: "error-list"
 };
-const _hoisted_2$C = {
+const _hoisted_2$D = {
   key: 0
 };
 const _hoisted_3$u = {
@@ -5049,7 +5049,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_flex_item = vue.resolveComponent("i-flex-item");
   const _component_i_flex = vue.resolveComponent("i-flex");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [vue.createVNode(_component_i_flex, null, {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [vue.createVNode(_component_i_flex, null, {
     default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createBlock(_component_i_flex_item, {
       key: 0,
       shrink: ""
@@ -5068,7 +5068,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     })) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(_component_i_flex_item, {
       grow: ""
     }, {
-      default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$C, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$u, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
+      default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$u, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
         return vue.openBlock(), vue.createElementBlock("li", {
           key: item.id,
           class: vue.normalizeClass(_ctx.liClasses(item))
@@ -5099,7 +5099,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })]);
 }
-const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$M]]);
+const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$M]]);
 var es_iterator_every = {};
 var hasRequiredEs_iterator_every;
 function requireEs_iterator_every() {
@@ -5187,7 +5187,7 @@ function cleanUpElements(vm) {
     }, 0);
   });
 }
-const _sfc_main$14 = vue.defineComponent({
+const _sfc_main$17 = vue.defineComponent({
   name: "FValidationGroup",
   props: {
     /**
@@ -5263,13 +5263,13 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [vue.renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$L]]);
+const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$L]]);
 var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
   FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
   FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
   return FValidationFormAction2;
 })(FValidationFormAction || {});
-const _sfc_main$13 = vue.defineComponent({
+const _sfc_main$16 = vue.defineComponent({
   name: "FValidationForm",
   components: {
     FValidationGroup,
@@ -5408,8 +5408,8 @@ const _sfc_main$13 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$Q = ["id"];
-const _hoisted_2$B = {
+const _hoisted_1$T = ["id"];
+const _hoisted_2$C = {
   key: 0,
   ref: "errors",
   tabindex: "-1",
@@ -5430,19 +5430,19 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
       novalidate: "",
       autocomplete: "off",
       onSubmit: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onSubmit && _ctx.onSubmit(...args), ["prevent"]))
-    }), [_ctx.displayErrors ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_2$B, [vue.createVNode(_component_f_error_list, {
+    }), [_ctx.displayErrors ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_2$C, [vue.createVNode(_component_f_error_list, {
       items: _ctx.errors,
       bullets: _ctx.errorListBullets,
       "before-navigate": _ctx.errorListBeforeNavigate
     }, {
       title: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "error-message")]),
       _: 3
-    }, 8, ["items", "bullets", "before-navigate"])], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$Q)]),
+    }, 8, ["items", "bullets", "before-navigate"])], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$T)]),
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$K]]);
-const _sfc_main$12 = vue.defineComponent({
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$K]]);
+const _sfc_main$15 = vue.defineComponent({
   name: "FFormModal",
   components: {
     FModal,
@@ -5591,10 +5591,10 @@ const _sfc_main$12 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$P = {
+const _hoisted_1$S = {
   class: "button-group"
 };
-const _hoisted_2$A = ["type", "form", "onClick"];
+const _hoisted_2$B = ["type", "form", "onClick"];
 const _hoisted_3$t = {
   key: 0,
   class: "sr-only"
@@ -5623,19 +5623,19 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
       default: vue.withCtx(() => [_cache[0] || (_cache[0] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "input-text-fields")]),
       _: 3
     }, 8, ["id", "before-submit", "before-validation", "use-error-list", "onSubmit", "onCancel"])]),
-    footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$P, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.preparedButtons, (button) => {
+    footer: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$S, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.preparedButtons, (button) => {
       return vue.openBlock(), vue.createElementBlock("button", {
         key: button.label,
         type: button.buttonType,
         class: vue.normalizeClass([button.classlist, "button-group__item"]),
         form: button.buttonType === "submit" ? _ctx.formId : void 0,
         onClick: ($event) => button.buttonType === "button" ? _ctx.onCancel() : false
-      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$t, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$A);
+      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$t, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$B);
     }), 128))])]),
     _: 3
   }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
 }
-const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$J]]);
+const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$J]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -5995,7 +5995,7 @@ const ErrorPlugin = {
     }
   }
 };
-const _sfc_main$11 = vue.defineComponent({
+const _sfc_main$14 = vue.defineComponent({
   name: "FErrorPage",
   props: {
     payload: {
@@ -6005,16 +6005,16 @@ const _sfc_main$11 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$R = {
   "data-test": "f-error-page"
 };
 function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, _cache[0] || (_cache[0] = [vue.createElementVNode("h1", null, "Fel", -1), vue.createTextVNode(), vue.createElementVNode("p", null, "Ett fel har uppstått.", -1), vue.createTextVNode(), vue.createElementVNode("a", {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, _cache[0] || (_cache[0] = [vue.createElementVNode("h1", null, "Fel", -1), vue.createTextVNode(), vue.createElementVNode("p", null, "Ett fel har uppstått.", -1), vue.createTextVNode(), vue.createElementVNode("a", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$I]]);
-const _sfc_main$10 = vue.defineComponent({
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$I]]);
+const _sfc_main$13 = vue.defineComponent({
   name: "FErrorHandlingApp",
   props: {
     defaultComponent: {
@@ -6053,7 +6053,7 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   })]);
 }
-const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$H]]);
+const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$H]]);
 function isMonthBefore(date2, minDate) {
   return Boolean(minDate && date2.isBefore(minDate.startOfMonth()));
 }
@@ -6094,7 +6094,7 @@ function getMessage($t2, date2, minDate, maxDate) {
     });
   }
 }
-const _sfc_main$$ = vue.defineComponent({
+const _sfc_main$12 = vue.defineComponent({
   name: "ICalendarNavbar",
   components: {
     FIcon
@@ -6207,10 +6207,10 @@ const _sfc_main$$ = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$Q = {
   class: "calendar-navbar"
 };
-const _hoisted_2$z = {
+const _hoisted_2$A = {
   class: "calendar-navbar__month",
   tabindex: "-1"
 };
@@ -6224,7 +6224,7 @@ const _hoisted_6$f = {
 };
 function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [vue.createElementVNode("div", _hoisted_2$z, vue.toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("button", {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [vue.createElementVNode("div", _hoisted_2$A, vue.toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("button", {
     ref: "previousButton",
     class: "calendar-navbar__arrow calendar-navbar__arrow--previous",
     type: "button",
@@ -6246,14 +6246,14 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-right"
   }, null, 8, ["class"])], 8, _hoisted_5$j)]);
 }
-const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$G]]);
+const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$G]]);
 function getDayStartOffset(days) {
   return days[0].weekDay - 1;
 }
 function getDayEndOffset(days) {
   return 7 - days[days.length - 1].weekDay;
 }
-const _sfc_main$_ = vue.defineComponent({
+const _sfc_main$11 = vue.defineComponent({
   name: "ICalendarMonthGrid",
   props: {
     /**
@@ -6327,8 +6327,8 @@ const _sfc_main$_ = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$M = ["aria-label"];
-const _hoisted_2$y = {
+const _hoisted_1$P = ["aria-label"];
+const _hoisted_2$z = {
   key: 0,
   class: "calendar-month__col--week"
 };
@@ -6353,7 +6353,7 @@ const _hoisted_9$5 = {
   key: 0,
   "aria-hidden": "true"
 };
-const _hoisted_10$3 = ["colspan"];
+const _hoisted_10$2 = ["colspan"];
 const _hoisted_11$2 = {
   key: 1,
   "aria-hidden": "true"
@@ -6366,7 +6366,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": _ctx.ariaLabel,
     onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusin && _ctx.onFocusin(...args)),
     onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onFocusout && _ctx.onFocusout(...args))
-  }, [vue.createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_2$y)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _cache[3] || (_cache[3] = vue.createElementVNode("col", {
+  }, [vue.createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_2$z)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _cache[3] || (_cache[3] = vue.createElementVNode("col", {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), _cache[5] || (_cache[5] = vue.createElementVNode("col", {
     class: "calendar-month__col--day"
@@ -6416,13 +6416,13 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_10$3)])) : vue.createCommentVNode("", true), _cache[21] || (_cache[21] = vue.createTextVNode()), _ctx.weeks.length < 6 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_11$2, [vue.createElementVNode("td", {
+  }, null, 8, _hoisted_10$2)])) : vue.createCommentVNode("", true), _cache[21] || (_cache[21] = vue.createTextVNode()), _ctx.weeks.length < 6 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_11$2, [vue.createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_12$2)])) : vue.createCommentVNode("", true)])], 40, _hoisted_1$M);
+  }, null, 8, _hoisted_12$2)])) : vue.createCommentVNode("", true)])], 40, _hoisted_1$P);
 }
-const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$F]]);
+const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$F]]);
 const DayStep = {
   ArrowRight: 1,
   ArrowLeft: -1,
@@ -6446,7 +6446,7 @@ function getDayTabindex(date2, active, entry) {
     return date2.day === 1 ? 0 : -1;
   }
 }
-const _sfc_main$Z = vue.defineComponent({
+const _sfc_main$10 = vue.defineComponent({
   name: "ICalendarMonth",
   components: {
     ICalendarMonthGrid
@@ -6536,7 +6536,7 @@ const _sfc_main$Z = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$L = ["data-date", "tabindex", "onClick", "onKeydown"];
+const _hoisted_1$O = ["data-date", "tabindex", "onClick", "onKeydown"];
 function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_month_grid = vue.resolveComponent("i-calendar-month-grid");
   return vue.openBlock(), vue.createBlock(_component_i_calendar_month_grid, {
@@ -6556,12 +6556,12 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     }, [vue.renderSlot(_ctx.$slots, "default", {
       date: date2,
       isFocused: _ctx.isDayFocused(date2)
-    })], 40, _hoisted_1$L)]),
+    })], 40, _hoisted_1$O)]),
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$E]]);
-const _sfc_main$Y = vue.defineComponent({
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$E]]);
+const _sfc_main$$ = vue.defineComponent({
   name: "FCalendar",
   components: {
     ICalendarNavbar,
@@ -6612,13 +6612,13 @@ const _sfc_main$Y = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$N = {
   class: "calendar__wrapper"
 };
 function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_navbar = vue.resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = vue.resolveComponent("i-calendar-month");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [vue.createVNode(_component_i_calendar_navbar, {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [vue.createVNode(_component_i_calendar_navbar, {
     "model-value": _ctx.modelValue,
     "min-date": _ctx.minDate,
     "max-date": _ctx.maxDate,
@@ -6641,7 +6641,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["model-value", "min-date", "max-date", "tab-date", "onClick", "onUpdate:modelValue"])]);
 }
-const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$D]]);
+const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$D]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -6660,7 +6660,7 @@ function getCalendarDaySrText(day, enabled, selected, t) {
   parts.push(day.toString(date.DateFormat.FULL));
   return parts.join(" ");
 }
-const _sfc_main$X = vue.defineComponent({
+const _sfc_main$_ = vue.defineComponent({
   name: "FCalendarDay",
   mixins: [TranslationMixin],
   props: {
@@ -6725,19 +6725,19 @@ const _sfc_main$X = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$J = {
+const _hoisted_1$M = {
   "aria-hidden": "true"
 };
-const _hoisted_2$x = {
+const _hoisted_2$y = {
   class: "sr-only"
 };
 function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("span", {
     class: vue.normalizeClass(_ctx.dayClasses)
-  }, [vue.createElementVNode("span", _hoisted_1$J, vue.toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$x, vue.toDisplayString(_ctx.srText), 1)], 2);
+  }, [vue.createElementVNode("span", _hoisted_1$M, vue.toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$y, vue.toDisplayString(_ctx.srText), 1)], 2);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$C]]);
-function useEventListener(target, event, callback) {
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$C]]);
+function useEventListener$1(target, event, callback) {
   vue.onMounted(() => {
     var _a;
     (_a = vue.toValue(target)) == null ? void 0 : _a.addEventListener(event, callback);
@@ -6757,8 +6757,8 @@ function useSlotUtils() {
     }
   };
 }
-const _hoisted_1$I = ["id"];
-const _hoisted_2$w = {
+const _hoisted_1$L = ["id"];
+const _hoisted_2$x = {
   key: 0,
   class: "card__header"
 };
@@ -6769,7 +6769,7 @@ const _hoisted_4$m = {
   key: 1,
   class: "card__footer"
 };
-const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "FCard",
   props: {
     /**
@@ -6827,7 +6827,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
         id: __props.id,
         class: vue.normalizeClass(cardClass.value),
         onValidity
-      }, [hasHeaderSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$w, [vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps({
+      }, [hasHeaderSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$x, [vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps({
         headingSlotClass: "card__header-label"
       })))])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
         hasError: hasError.value,
@@ -6855,11 +6855,11 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
       })) : vue.createCommentVNode("", true)]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$q, [vue.renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = vue.createTextVNode()), hasFooterSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({
         hasError: hasError.value,
         validationMessage: validationMessage.value
-      })))])) : vue.createCommentVNode("", true)], 42, _hoisted_1$I);
+      })))])) : vue.createCommentVNode("", true)], 42, _hoisted_1$L);
     };
   }
 });
-const _sfc_main$V = vue.defineComponent({
+const _sfc_main$Y = vue.defineComponent({
   name: "FExpand",
   data() {
     return {
@@ -6925,7 +6925,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
-const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$B]]);
+const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$B]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -7210,7 +7210,7 @@ function isTeleportDisabled(options) {
   }
   return disableTeleport;
 }
-const _sfc_main$U = vue.defineComponent({
+const _sfc_main$X = vue.defineComponent({
   name: "IPopup",
   inheritAttrs: false,
   props: {
@@ -7512,7 +7512,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$A]]);
+const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$A]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -7576,7 +7576,7 @@ function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   }
 }
 const POPUP_SPACING = 10;
-const _sfc_main$T = vue.defineComponent({
+const _sfc_main$W = vue.defineComponent({
   name: "IPopupError",
   components: {
     FIcon
@@ -7714,7 +7714,7 @@ const _sfc_main$T = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$K = {
   ref: "wrapper",
   class: "popup-error__wrapper"
 };
@@ -7728,7 +7728,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "popup",
     class: vue.normalizeClass(_ctx.popupClasses),
     "aria-hidden": "true"
-  }, [vue.createElementVNode("div", _hoisted_1$H, [vue.createElementVNode("div", {
+  }, [vue.createElementVNode("div", _hoisted_1$K, [vue.createElementVNode("div", {
     class: vue.normalizeClass(_ctx.arrowClass),
     style: vue.normalizeStyle(_ctx.errorStyle)
   }, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.errorMessage), 1), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("button", {
@@ -7742,7 +7742,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: "button__icon"
   })])], 6)], 512)], 2)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$z]]);
+const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$z]]);
 function numItems(itemHeight, availableHeight, verticalSpacing) {
   const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
   return Math.min(itemsFit, 7);
@@ -7809,12 +7809,12 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
   }
   return void 0;
 }
-const _hoisted_1$G = ["onKeyup"];
-const _hoisted_2$v = {
+const _hoisted_1$J = ["onKeyup"];
+const _hoisted_2$w = {
   ref: "content"
 };
 const teleportDisabled = false;
-const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "IPopupListbox",
   props: {
     isOpen: {
@@ -7836,7 +7836,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     const teleportTarget = vue.computed(() => config.teleportTarget);
     let guessedItemHeight = void 0;
     let verticalSpacing = void 0;
-    useEventListener(__props.anchor, "keyup", onKeyEsc);
+    useEventListener$1(__props.anchor, "keyup", onKeyEsc);
     vue.watchEffect(() => {
       if (wrapperRef.value && __props.activeElement !== void 0) {
         const centerPosition = __props.activeElement.offsetTop - (wrapperRef.value.getBoundingClientRect().height - __props.activeElement.getBoundingClientRect().height) / 2;
@@ -7919,7 +7919,11 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       }
       if (verticalSpacing === void 0) {
         const absWrapper = getAbsolutePosition(wrapperElement);
-        const marginTotal = absWrapper.y * 2;
+        const {
+          marginTop,
+          marginBottom
+        } = getComputedStyle(wrapperElement);
+        const marginTotal = parseInt(marginTop, 10) + parseInt(marginBottom, 10);
         verticalSpacing = Math.ceil(absWrapper.height - contentItemHeigth * __props.numOfItems) + marginTotal;
       }
       wrapperElement.style.overflowY = "auto";
@@ -7931,7 +7935,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         verticalSpacing
       });
       if (rect) {
-        var _offsetRect$x;
+        var _offsetRect$x, _offsetRect$top;
         const {
           top,
           left,
@@ -7940,7 +7944,8 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         } = rect;
         const offsetRect = (_a = wrapperElement == null ? void 0 : wrapperElement.offsetParent) == null ? void 0 : _a.getBoundingClientRect();
         const offsetLeft = (_offsetRect$x = offsetRect == null ? void 0 : offsetRect.x) !== null && _offsetRect$x !== void 0 ? _offsetRect$x : 0;
-        wrapperElement.style.top = `${top}px`;
+        const offSetTop = Math.floor(((_offsetRect$top = offsetRect == null ? void 0 : offsetRect.top) !== null && _offsetRect$top !== void 0 ? _offsetRect$top : 0) + window.scrollY);
+        wrapperElement.style.top = `${top - offSetTop}px`;
         wrapperElement.style.left = `${left - offsetLeft}px`;
         wrapperElement.style.width = `${width}px`;
         contentWrapper.style.maxHeight = `${height}px`;
@@ -7963,7 +7968,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         onKeyup: vue.withKeys(vue.withModifiers(onKeyEsc, ["stop"]), ["esc"]),
         onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
         }, ["stop"]))
-      }), [vue.createElementVNode("div", _hoisted_2$v, [vue.renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$G)], 512)], 8, ["to"])) : vue.createCommentVNode("", true);
+      }), [vue.createElementVNode("div", _hoisted_2$w, [vue.renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$J)], 512)], 8, ["to"])) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -8007,7 +8012,7 @@ async function doMenuAction$2(action, target) {
   }
 }
 const preventKeys$2 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter"];
-const _sfc_main$R = vue.defineComponent({
+const _sfc_main$U = vue.defineComponent({
   name: "IPopupMenu",
   components: {
     IPopup
@@ -8262,8 +8267,8 @@ const _sfc_main$R = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$F = ["aria-label"];
-const _hoisted_2$u = {
+const _hoisted_1$I = ["aria-label"];
+const _hoisted_2$v = {
   role: "menu",
   class: "ipopupmenu__list"
 };
@@ -8288,7 +8293,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     default: vue.withCtx(() => [vue.createElementVNode("nav", {
       class: "ipopupmenu ipopupmenu--vertical",
       "aria-label": _ctx.ariaLabel
-    }, [vue.createElementVNode("ul", _hoisted_2$u, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
+    }, [vue.createElementVNode("ul", _hoisted_2$v, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
       return vue.openBlock(), vue.createElementBlock("li", {
         ref_for: true,
         ref: "items",
@@ -8305,17 +8310,17 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
         target: item.target,
         tabindex: "0"
       }, [_ctx.isSelected(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$h, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
-    }), 128))])], 8, _hoisted_1$F)]),
+    }), 128))])], 8, _hoisted_1$I)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
 }
-const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$y]]);
+const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$y]]);
 const ANIMATION_DURATION = 500;
 const NO_CSS_CLASSES = "";
 const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
 const CLOSED_CSS_CLASS = "animate-expand";
 const ANIMATION_CSS_CLASSES = "animate-expand animate-expand--expanded";
-const _sfc_main$Q = vue.defineComponent({
+const _sfc_main$T = vue.defineComponent({
   name: "IAnimateExpand",
   props: {
     /**
@@ -8507,7 +8512,7 @@ const _sfc_main$Q = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$H = {
   key: 0,
   ref: "content",
   "data-test": "animation-content"
@@ -8516,10 +8521,10 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(_ctx.animationClasses),
     style: vue.normalizeStyle(_ctx.heightStyle)
-  }, [_ctx.shouldVIf ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [vue.renderSlot(_ctx.$slots, "default")], 512)), [[vue.vShow, _ctx.shouldVShow]]) : vue.createCommentVNode("", true)], 6);
+  }, [_ctx.shouldVIf ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [vue.renderSlot(_ctx.$slots, "default")], 512)), [[vue.vShow, _ctx.shouldVShow]]) : vue.createCommentVNode("", true)], 6);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$x]]);
-const _sfc_main$P = vue.defineComponent({
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$x]]);
+const _sfc_main$S = vue.defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
   props: {
@@ -8533,14 +8538,14 @@ const _sfc_main$P = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$D = ["href"];
+const _hoisted_1$G = ["href"];
 function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
-  }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$D);
+  }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$G);
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$w]]);
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$w]]);
 function filterOptions(options, filter2, selectMode) {
   if (logic.isEmpty(filter2) || selectMode) {
     return options;
@@ -8565,10 +8570,10 @@ function useCombobox(inputRef, options, onOptionSelected) {
       }
     };
   }
-  useEventListener(inputRef, "click", onInputClick);
-  useEventListener(inputRef, "focus", onInputFocus);
-  useEventListener(inputRef, "keydown", onInputKeyDown);
-  useEventListener(inputRef, "keyup", onInputKeyUp);
+  useEventListener$1(inputRef, "click", onInputClick);
+  useEventListener$1(inputRef, "focus", onInputFocus);
+  useEventListener$1(inputRef, "keydown", onInputKeyDown);
+  useEventListener$1(inputRef, "keyup", onInputKeyUp);
   const dropdownId = logic.ElementIdService.generateElementId();
   const dropdownIsOpen = vue.ref(false);
   const activeOptionId = logic.ElementIdService.generateElementId();
@@ -8786,12 +8791,12 @@ function useCombobox(inputRef, options, onOptionSelected) {
     }
   }
 }
-const _hoisted_1$C = {
+const _hoisted_1$F = {
   class: "combobox"
 };
-const _hoisted_2$t = ["id"];
+const _hoisted_2$u = ["id"];
 const _hoisted_3$o = ["id", "aria-selected", "onClick"];
-const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "IComboboxDropdown",
   props: {
     id: {},
@@ -8828,7 +8833,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [vue.createVNode(vue.unref(_sfc_main$S), {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [vue.createVNode(vue.unref(_sfc_main$V), {
         "is-open": _ctx.isOpen,
         anchor: _ctx.inputNode,
         "num-of-items": _ctx.options.length,
@@ -8853,14 +8858,14 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
             }]),
             onClick: vue.withModifiers(($event) => onOptionClick(item), ["stop", "prevent"])
           }, vue.toDisplayString(item), 11, _hoisted_3$o);
-        }), 128))], 8, _hoisted_2$t)]),
+        }), 128))], 8, _hoisted_2$u)]),
         _: 1
       }, 8, ["is-open", "anchor", "num-of-items", "active-element"])]);
     };
   }
 });
-const _hoisted_1$B = ["aria-label"];
-const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$E = ["aria-label"];
+const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "IComboboxToggleButton",
   emits: ["toggle"],
   setup(__props, {
@@ -8879,7 +8884,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode(vue.unref(FIcon), {
         name: "arrow-down",
         class: "text-field__icon"
-      })], 8, _hoisted_1$B);
+      })], 8, _hoisted_1$E);
     };
   }
 });
@@ -8981,7 +8986,7 @@ function useHorizontalOffset(options) {
     }, 0);
   }
 }
-const _sfc_main$M = vue.defineComponent({
+const _sfc_main$P = vue.defineComponent({
   name: "FTooltip",
   components: {
     FExpand,
@@ -9140,8 +9145,8 @@ const _sfc_main$M = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$A = ["aria-expanded"];
-const _hoisted_2$s = {
+const _hoisted_1$D = ["aria-expanded"];
+const _hoisted_2$t = {
   class: "icon-stack icon-stack--tooltip"
 };
 const _hoisted_3$n = {
@@ -9169,11 +9174,11 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     type: "button",
     "aria-expanded": _ctx.isOpen,
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickToggle && _ctx.onClickToggle(...args))
-  }, [vue.createElementVNode("span", _hoisted_2$s, [vue.createVNode(_component_f_icon, {
+  }, [vue.createElementVNode("span", _hoisted_2$t, [vue.createVNode(_component_f_icon, {
     name: "circle"
   }), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
     name: "i"
-  }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$n, vue.toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$A)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
+  }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$n, vue.toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
     ref: "wrapper",
     class: "tooltip"
   }, _ctx.$attrs), [_ctx.ready ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$k, [_ctx.hasHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.headerTag), {
@@ -9191,7 +9196,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])])])) : vue.createCommentVNode("", true)], 16)], 64);
 }
-const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$v]]);
+const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$v]]);
 function* labelClasses(options) {
   const {
     labelClass
@@ -9232,7 +9237,7 @@ function isEqual(a, b) {
   }
   return a.every((_, i) => a[i] === b[i]);
 }
-const _sfc_main$L = vue.defineComponent({
+const _sfc_main$O = vue.defineComponent({
   name: "FFieldset",
   components: {
     FIcon
@@ -9460,8 +9465,8 @@ const _sfc_main$L = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$z = ["id"];
-const _hoisted_2$r = {
+const _hoisted_1$C = ["id"];
+const _hoisted_2$s = {
   key: 0,
   class: "sr-only"
 };
@@ -9501,7 +9506,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   }, [(vue.openBlock(), vue.createElementBlock("legend", {
     key: _ctx.legendKey,
     class: vue.normalizeClass(["label", _ctx.legendClass])
-  }, [vue.renderSlot(_ctx.$slots, "label"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.hasCheckbox && _ctx.children.length > 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$r, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.numberOfCheckboxesScreenReaderText), 1)])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "description", {
+  }, [vue.renderSlot(_ctx.$slots, "label"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.hasCheckbox && _ctx.children.length > 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$s, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.numberOfCheckboxesScreenReaderText), 1)])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "description", {
     descriptionClass: _ctx.descriptionClass,
     formatDescriptionClass: _ctx.formatDescriptionClass
   }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
@@ -9527,11 +9532,11 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     name: "error"
   }), vue.createTextVNode(" " + vue.toDisplayString(_ctx.validity.validationMessage), 1)])) : vue.createCommentVNode("", true)])], 2)) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", {
     class: vue.normalizeClass(_ctx.groupContentClass)
-  }, [vue.renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$z);
+  }, [vue.renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$C);
 }
-const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$u]]);
+const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$u]]);
 const anyType$1 = [String, Object, Array, Number, Date, Boolean];
-const _sfc_main$K = vue.defineComponent({
+const _sfc_main$N = vue.defineComponent({
   name: "FCheckboxField",
   inheritAttrs: false,
   props: {
@@ -9717,8 +9722,8 @@ const _sfc_main$K = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$y = ["id", "disabled"];
-const _hoisted_2$q = ["for"];
+const _hoisted_1$B = ["id", "disabled"];
+const _hoisted_2$r = ["for"];
 const _hoisted_3$l = {
   key: 0,
   class: "checkbox__details"
@@ -9740,7 +9745,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.disabled,
     onKeydown: _cache[0] || (_cache[0] = vue.withKeys((...args) => _ctx.onKeydown && _ctx.onKeydown(...args), ["space"])),
     onChange: _cache[1] || (_cache[1] = ($event) => _ctx.updateExpandedFlag())
-  }), null, 16, _hoisted_1$y), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("label", {
+  }), null, 16, _hoisted_1$B), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("label", {
     class: vue.normalizeClass(_ctx.$slots.details ? "checkbox__label checkbox__width" : "checkbox__label"),
     for: _ctx.id
   }, [vue.renderSlot(_ctx.$slots, "default"), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.$slots.details ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -9755,9 +9760,9 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
       height: _ctx.height
     })])) : vue.createCommentVNode("", true)]),
     _: 3
-  }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$q)], 34);
+  }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$r)], 34);
 }
-const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$t]]);
+const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$t]]);
 var es_iterator_some = {};
 var hasRequiredEs_iterator_some;
 function requireEs_iterator_some() {
@@ -9836,7 +9841,7 @@ async function doMenuAction$1(action, target) {
 }
 const preventKeys$1 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter", "Escape"];
 const keyUp = ["ArrowUp", "Up"];
-const _sfc_main$J = vue.defineComponent({
+const _sfc_main$M = vue.defineComponent({
   name: "FContextMenu",
   components: {
     IPopup,
@@ -10000,8 +10005,8 @@ const _sfc_main$J = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$x = ["aria-label"];
-const _hoisted_2$p = {
+const _hoisted_1$A = ["aria-label"];
+const _hoisted_2$q = {
   ref: "contextmenu",
   role: "menu",
   tabindex: "-1",
@@ -10030,7 +10035,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-label": _ctx.ariaLabel,
       onKeyup: _cache[0] || (_cache[0] = (...args) => _ctx.onKeyUp && _ctx.onKeyUp(...args)),
       onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args))
-    }, [vue.createElementVNode("ul", _hoisted_2$p, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.popupItems, (item, index) => {
+    }, [vue.createElementVNode("ul", _hoisted_2$q, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.popupItems, (item, index) => {
       return vue.openBlock(), vue.createElementBlock("li", {
         key: item.key,
         role: "menuitem",
@@ -10049,11 +10054,11 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
         ref_for: true,
         ref: "anchors"
       }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$e)) : vue.createCommentVNode("", true)], 8, _hoisted_3$k);
-    }), 128))], 512)], 40, _hoisted_1$x)]),
+    }), 128))], 512)], 40, _hoisted_1$A)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element"]);
 }
-const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$s]]);
+const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$s]]);
 var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["ADD"] = 0] = "ADD";
   Operation2[Operation2["DELETE"] = 1] = "DELETE";
@@ -10061,13 +10066,13 @@ var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["NONE"] = 3] = "NONE";
   return Operation2;
 })(Operation || {});
-const _hoisted_1$w = {
+const _hoisted_1$z = {
   class: "crud-dataset"
 };
-const _hoisted_2$o = {
+const _hoisted_2$p = {
   key: 0
 };
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "FCrudDataset",
   props: {
     /**
@@ -10297,7 +10302,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
       isFormModalOpen.value = true;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), hasAddSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [vue.createElementVNode("button", {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), hasAddSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [vue.createElementVNode("button", {
         "data-test": "f-crud-dataset-add-button",
         type: "button",
         class: "button button--tertiary crud-dataset__add-button",
@@ -10349,7 +10354,7 @@ function FCrudDatasetInjected() {
     modify: vue.inject("modify")
   };
 }
-const _sfc_main$H = vue.defineComponent({
+const _sfc_main$K = vue.defineComponent({
   name: "FCrudButton",
   components: {
     FIcon
@@ -10405,7 +10410,7 @@ const _sfc_main$H = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$v = {
+const _hoisted_1$y = {
   key: 1,
   class: "sr-only"
 };
@@ -10419,11 +10424,11 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     class: "button__icon",
     name: _ctx.iconName
-  }, null, 8, ["name"])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), !_ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$v, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.buttonText), 1)])])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _ctx.label ? vue.renderSlot(_ctx.$slots, "default", {
+  }, null, 8, ["name"])) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), !_ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$y, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.buttonText), 1)])])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), _ctx.label ? vue.renderSlot(_ctx.$slots, "default", {
     key: 2
   }, () => [vue.createTextVNode(vue.toDisplayString(_ctx.buttonText), 1)]) : vue.createCommentVNode("", true)]);
 }
-const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$r]]);
+const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$r]]);
 function ActivateItemInjected() {
   return {
     registerCallbackAfterItemAdd: vue.inject("registerCallbackAfterItemAdd", () => void 0),
@@ -10507,7 +10512,7 @@ function FTableInjected() {
     renderColumns: vue.inject("renderColumns", false)
   };
 }
-const _sfc_main$G = vue.defineComponent({
+const _sfc_main$J = vue.defineComponent({
   name: "FTableColumn",
   inheritAttrs: false,
   props: {
@@ -10660,7 +10665,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["class", "scope"])) : vue.createCommentVNode("", true);
 }
-const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$q]]);
+const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: vue.inject("sort", () => void 0),
@@ -10668,7 +10673,7 @@ function FSortFilterDatasetInjected() {
     registerCallbackOnMount: vue.inject("registerCallbackOnMount", () => void 0)
   };
 }
-const _sfc_main$F = vue.defineComponent({
+const _sfc_main$I = vue.defineComponent({
   name: "FLabel",
   components: {
     FIcon
@@ -10707,10 +10712,10 @@ const _sfc_main$F = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$u = {
+const _hoisted_1$x = {
   key: 0
 };
-const _hoisted_2$n = {
+const _hoisted_2$o = {
   key: 0,
   ref: "tooltipAttachTo"
 };
@@ -10727,7 +10732,7 @@ const _hoisted_7$a = {
 };
 function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
-  return _ctx.$slots.tooltip ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [_ctx.hasDefaultSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n, [vue.createElementVNode("label", {
+  return _ctx.$slots.tooltip ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [_ctx.hasDefaultSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [vue.createElementVNode("label", {
     class: "label",
     for: _ctx.forProperty
   }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$j)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("label", {
@@ -10752,11 +10757,11 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     name: "error"
   }), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message")])) : vue.createCommentVNode("", true)], 8, _hoisted_6$b));
 }
-const FLabel = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$p]]);
+const FLabel = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$p]]);
 function resolveWidthClass$1(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
-const _sfc_main$E = vue.defineComponent({
+const _sfc_main$H = vue.defineComponent({
   name: "FSelectField",
   components: {
     FIcon,
@@ -10887,7 +10892,7 @@ const _sfc_main$E = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$t = ["id"];
+const _hoisted_1$w = ["id"];
 function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = vue.resolveComponent("f-label");
   const _component_f_icon = vue.resolveComponent("f-icon");
@@ -10925,7 +10930,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     id: _ctx.id,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.vModel = $event),
     class: "select-field__select"
-  }, _ctx.attrs), [vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$t), [[vue.vModelSelect, _ctx.vModel]]), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.hasError && _ctx.textFieldTableMode ? (vue.openBlock(), vue.createBlock(_component_f_icon, {
+  }, _ctx.attrs), [vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$w), [[vue.vModelSelect, _ctx.vModel]]), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.hasError && _ctx.textFieldTableMode ? (vue.openBlock(), vue.createBlock(_component_f_icon, {
     key: 0,
     ref: "icon",
     class: "text-field__icon input-icon select-field__error-popup-icon",
@@ -10935,7 +10940,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-down"
   })], 2)], 34);
 }
-const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$o]]);
+const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$o]]);
 function resolveWidthClass(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
@@ -10979,14 +10984,14 @@ function useTextFieldSetup(props) {
     closeDropdown
   };
 }
-const _sfc_main$D = vue.defineComponent({
+const _sfc_main$G = vue.defineComponent({
   name: "FTextField",
   components: {
     FLabel,
     FIcon,
     IPopupError,
-    IComboboxDropdown: _sfc_main$O,
-    IComboboxToggleButton: _sfc_main$N
+    IComboboxDropdown: _sfc_main$R,
+    IComboboxToggleButton: _sfc_main$Q
   },
   inheritAttrs: false,
   props: {
@@ -11010,11 +11015,12 @@ const _sfc_main$D = vue.defineComponent({
     },
     /**
      * The value for the input.
-     * If the prop is not set undefined will be used.
+     * If the prop is not used or set to undefined
+     * or null then the default value will be used.
      * @model
      */
     modelValue: {
-      type: [String, Number],
+      type: [String, Number, null],
       required: false,
       default: ""
     },
@@ -11317,10 +11323,10 @@ const _sfc_main$D = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$s = {
+const _hoisted_1$v = {
   key: 0
 };
-const _hoisted_2$m = {
+const _hoisted_2$n = {
   key: 0,
   class: "sr-only"
 };
@@ -11354,7 +11360,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id,
     class: vue.normalizeClass(_ctx.labelClass)
   }, vue.createSlots({
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [_ctx.defaultText !== "" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$s, vue.toDisplayString(_ctx.defaultText), 1)) : vue.createCommentVNode("", true)])]),
+    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [_ctx.defaultText !== "" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$v, vue.toDisplayString(_ctx.defaultText), 1)) : vue.createCommentVNode("", true)])]),
     description: vue.withCtx(({
       descriptionClass,
       formatDescriptionClass
@@ -11364,7 +11370,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, () => [_ctx.descriptionText ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 0,
       class: vue.normalizeClass(descriptionClass)
-    }, [_ctx.descriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$m, vue.toDisplayString(_ctx.descriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.descriptionText), 1)], 2)) : vue.createCommentVNode("", true), _cache[9] || (_cache[9] = vue.createTextVNode()), _ctx.discreteDescriptionText ? (vue.openBlock(), vue.createElementBlock("span", {
+    }, [_ctx.descriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$n, vue.toDisplayString(_ctx.descriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.descriptionText), 1)], 2)) : vue.createCommentVNode("", true), _cache[9] || (_cache[9] = vue.createTextVNode()), _ctx.discreteDescriptionText ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 1,
       class: vue.normalizeClass(formatDescriptionClass)
     }, [_ctx.discreteDescriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$i, vue.toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : vue.createCommentVNode("", true)])]),
@@ -11423,8 +11429,8 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     onClose: _ctx.onDropdownClose
   }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node", "onSelect", "onClose"])) : vue.createCommentVNode("", true)], 2);
 }
-const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$n]]);
-const _sfc_main$C = vue.defineComponent({
+const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$n]]);
+const _sfc_main$F = vue.defineComponent({
   name: "FEmailTextField",
   components: {
     FTextField
@@ -11448,7 +11454,7 @@ const _sfc_main$C = vue.defineComponent({
      * @model
      */
     modelValue: {
-      type: String,
+      type: [String, null],
       required: false,
       default: void 0
     },
@@ -11540,7 +11546,7 @@ const _sfc_main$C = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$r = {
+const _hoisted_1$u = {
   key: 0
 };
 function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11557,7 +11563,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     onValidity: _ctx.onValidity,
     onPendingValidity: _ctx.onPendingValidity
   }), {
-    "error-message": vue.withCtx(() => [_ctx.showPasteErrorMessage ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$r, vue.toDisplayString(_ctx.pasteErrorText), 1)) : vue.createCommentVNode("", true)]),
+    "error-message": vue.withCtx(() => [_ctx.showPasteErrorMessage ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$u, vue.toDisplayString(_ctx.pasteErrorText), 1)) : vue.createCommentVNode("", true)]),
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.defaultText), 1)]), _cache[2] || (_cache[2] = vue.createTextVNode())]),
     _: 3
   }, 16, ["id", "maxlength", "model-value", "onChange", "onBlur", "onUpdate:modelValue", "onValidity", "onPendingValidity"]), _cache[3] || (_cache[3] = vue.createTextVNode()), _ctx.extendedValidation ? (vue.openBlock(), vue.createBlock(_component_f_text_field, {
@@ -11573,8 +11579,8 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue", "maxlength", "onPaste"])) : vue.createCommentVNode("", true)]);
 }
-const FEmailTextField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$m]]);
-const _sfc_main$B = vue.defineComponent({
+const FEmailTextField = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$m]]);
+const _sfc_main$E = vue.defineComponent({
   name: "FPhoneTextField",
   components: {
     FTextField
@@ -11594,11 +11600,12 @@ const _sfc_main$B = vue.defineComponent({
     },
     /**
      * The value for the input.
-     * If the prop is not set undefined will be used.
+     * If the prop is not used or set to undefined
+     * or null then the default value will be used.
      * @model
      */
     modelValue: {
-      type: String,
+      type: [String, null],
       required: false,
       default: void 0
     },
@@ -11701,8 +11708,8 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue", "maxlength"])) : vue.createCommentVNode("", true)]);
 }
-const FPhoneTextField = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$l]]);
-const _sfc_main$A = vue.defineComponent({
+const FPhoneTextField = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$l]]);
+const _sfc_main$D = vue.defineComponent({
   name: "FCurrencyTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11737,7 +11744,7 @@ const _sfc_main$A = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$z = vue.defineComponent({
+const _sfc_main$C = vue.defineComponent({
   name: "FSearchTextField",
   components: {
     FTextField,
@@ -11750,7 +11757,7 @@ const _sfc_main$z = vue.defineComponent({
       default: () => logic.ElementIdService.generateElementId()
     },
     modelValue: {
-      type: String,
+      type: [String, null],
       required: false,
       default: ""
     },
@@ -11772,7 +11779,8 @@ const _sfc_main$z = vue.defineComponent({
   },
   computed: {
     canClear() {
-      return this.modelValue !== "";
+      const isEmpty = this.modelValue === void 0 || this.modelValue === null || this.modelValue === "";
+      return !isEmpty;
     }
   },
   methods: {
@@ -11797,7 +11805,7 @@ const _sfc_main$z = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$q = {
+const _hoisted_1$t = {
   class: "sr-only"
 };
 function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11846,12 +11854,12 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     }, [vue.createVNode(_component_f_icon, {
       name: "cross",
       class: "clear-button__icon"
-    }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$q, vue.toDisplayString(_ctx.clearableScreenReaderText), 1)])]),
+    }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_1$t, vue.toDisplayString(_ctx.clearableScreenReaderText), 1)])]),
     key: "1"
   } : void 0]), 1040, ["id", "maxlength", "model-value", "onChange", "onInput", "onBlur", "onUpdate"])]);
 }
-const FSearchTextField = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$k]]);
-const _sfc_main$y = vue.defineComponent({
+const FSearchTextField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$k]]);
+const _sfc_main$B = vue.defineComponent({
   name: "FBankAccountNumberTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11880,7 +11888,7 @@ const _sfc_main$y = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$x = vue.defineComponent({
+const _sfc_main$A = vue.defineComponent({
   name: "FBankgiroTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11912,7 +11920,7 @@ const _sfc_main$x = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$w = vue.defineComponent({
+const _sfc_main$z = vue.defineComponent({
   name: "FClearingnumberTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11944,7 +11952,7 @@ const _sfc_main$w = vue.defineComponent({
 function defaultFormatter$1(modelValue) {
   return logic.formatNumber(modelValue, this.decimals);
 }
-const _sfc_main$v = vue.defineComponent({
+const _sfc_main$y = vue.defineComponent({
   name: "FNumericTextField",
   extends: FTextField,
   props: {
@@ -11981,7 +11989,7 @@ const _sfc_main$v = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$u = vue.defineComponent({
+const _sfc_main$x = vue.defineComponent({
   name: "FPersonnummerTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12021,7 +12029,7 @@ const _sfc_main$u = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$t = vue.defineComponent({
+const _sfc_main$w = vue.defineComponent({
   name: "FPlusgiroTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12053,7 +12061,7 @@ const _sfc_main$t = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$s = vue.defineComponent({
+const _sfc_main$v = vue.defineComponent({
   name: "FPostalCodeTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12090,7 +12098,7 @@ const _sfc_main$s = vue.defineComponent({
 function defaultFormatter(modelValue) {
   return logic.formatPercent(modelValue, this.decimals);
 }
-const _sfc_main$r = vue.defineComponent({
+const _sfc_main$u = vue.defineComponent({
   name: "FPercentTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12138,7 +12146,7 @@ const _sfc_main$r = vue.defineComponent({
     logic.ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$q = vue.defineComponent({
+const _sfc_main$t = vue.defineComponent({
   name: "FOrganisationsnummerTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12246,10 +12254,10 @@ function filter(list, filterAttributes, searchString) {
   const searchTerms = searchString.split(/\s+/).map((word) => word.toLocaleLowerCase());
   return list.filter((item) => includesAllSearchTerms(item, filterAttributes, searchTerms));
 }
-const _hoisted_1$p = {
+const _hoisted_1$s = {
   class: "sort-filter-dataset"
 };
-const _hoisted_2$l = {
+const _hoisted_2$m = {
   class: "sort-filter-dataset__search"
 };
 const _hoisted_3$h = {
@@ -12266,7 +12274,7 @@ const _hoisted_6$9 = {
   }
 };
 const _hoisted_7$8 = ["value"];
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "FSortFilterDataset",
   props: {
     /**
@@ -12452,7 +12460,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [vue.createVNode(vue.unref(IFlex), {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [vue.createVNode(vue.unref(IFlex), {
         collapse: "",
         gap: "3x",
         wrap: ""
@@ -12477,7 +12485,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
               shrink: "",
               align: "center"
             }, {
-              default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_2$l, [vue.createVNode(vue.unref(FIcon), {
+              default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_2$m, [vue.createVNode(vue.unref(FIcon), {
                 name: "search",
                 class: "sort-filter-dataset__search__magnify-icon"
               }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createVNode(vue.unref(FTextField), {
@@ -12535,8 +12543,8 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$o = ["tabindex"];
-const _hoisted_2$k = {
+const _hoisted_1$r = ["tabindex"];
+const _hoisted_2$l = {
   key: 0
 };
 const _hoisted_3$g = {
@@ -12554,7 +12562,7 @@ const _hoisted_7$7 = {
   key: 1
 };
 const _hoisted_8$5 = ["colspan"];
-const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -12700,7 +12708,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createElementVNode("table", vue.mergeProps({
         class: ["table", tableClasses.value],
         tabindex: tabindex.value
-      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$k, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$l, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("col", {
           key: column.id,
           class: vue.normalizeClass(column.size)
@@ -12733,7 +12741,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
         }, {
           row
         }))]);
-      }), 128))])], 16, _hoisted_1$o)], 2);
+      }), 128))])], 16, _hoisted_1$r)], 2);
     };
   }
 });
@@ -12812,7 +12820,7 @@ function getDisplayMonth(minDate, maxDate, selectedDate, initialMonth) {
   }
   return month || date.FDate.now().startOfMonth();
 }
-const _sfc_main$n = vue.defineComponent({
+const _sfc_main$q = vue.defineComponent({
   name: "FDatepickerField",
   components: {
     FCalendar,
@@ -13070,11 +13078,11 @@ const _sfc_main$n = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$n = {
+const _hoisted_1$q = {
   ref: "component",
   class: "datepicker-field"
 };
-const _hoisted_2$j = ["disabled", "aria-expanded"];
+const _hoisted_2$k = ["disabled", "aria-expanded"];
 const _hoisted_3$f = {
   class: "sr-only"
 };
@@ -13087,7 +13095,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_calendar_day = vue.resolveComponent("f-calendar-day");
   const _component_f_calendar = vue.resolveComponent("f-calendar");
   const _component_i_popup = vue.resolveComponent("i-popup");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [vue.createElementVNode("div", {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [vue.createElementVNode("div", {
     ref: "calendarInputs",
     onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusoutTextFieldButton && _ctx.onFocusoutTextFieldButton(...args))
   }, [vue.createVNode(_component_f_text_field, vue.mergeProps(_ctx.$attrs, {
@@ -13126,7 +13134,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onClickCalendarButton())
     }, [vue.createVNode(_component_f_icon, {
       name: "calendar"
-    }), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$f, vue.toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$j)]),
+    }), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$f, vue.toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.datepicker-field.label", "Datum")), 1)]), _cache[7] || (_cache[7] = vue.createTextVNode()), _cache[8] || (_cache[8] = vue.createTextVNode()), _cache[9] || (_cache[9] = vue.createTextVNode()), _cache[10] || (_cache[10] = vue.createTextVNode())]),
     _: 2
   }, [_ctx.$slots.tooltip ? {
@@ -13177,11 +13185,11 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["is-open", "anchor", "inline", "onOpen", "onClose"])], 512);
 }
-const FDatepickerField = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$j]]);
+const FDatepickerField = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$j]]);
 function isDialogueTreeEndQuestion(value) {
   return Boolean(value.userData);
 }
-const _sfc_main$m = vue.defineComponent({
+const _sfc_main$p = vue.defineComponent({
   name: "FDialogueTree",
   components: {
     FIcon
@@ -13259,17 +13267,17 @@ const _sfc_main$m = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$m = {
+const _hoisted_1$p = {
   class: "dialogue-tree"
 };
-const _hoisted_2$i = {
+const _hoisted_2$j = {
   key: 0,
   class: "dialogue-tree__list"
 };
 const _hoisted_3$e = ["onClick"];
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [_ctx.options.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2$i, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option, index) => {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [_ctx.options.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2$j, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option, index) => {
     return vue.openBlock(), vue.createElementBlock("li", {
       key: option.label,
       class: "dialogue-tree__list-item"
@@ -13287,8 +13295,8 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     userData: _ctx.userData
   })))]);
 }
-const FDialogueTree = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$i]]);
-const _sfc_main$l = vue.defineComponent({
+const FDialogueTree = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$i]]);
+const _sfc_main$o = vue.defineComponent({
   name: "FExpandablePanel",
   components: {
     FIcon,
@@ -13362,8 +13370,8 @@ const _sfc_main$l = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$l = ["aria-expanded", "aria-controls"];
-const _hoisted_2$h = {
+const _hoisted_1$o = ["aria-expanded", "aria-controls"];
+const _hoisted_2$i = {
   class: "expandable-panel__icon"
 };
 const _hoisted_3$d = {
@@ -13395,7 +13403,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickHeadingButton && _ctx.onClickHeadingButton(...args))
-    }), [vue.createElementVNode("span", _hoisted_2$h, [vue.createElementVNode("span", _hoisted_3$d, [vue.createVNode(_component_f_icon, {
+    }), [vue.createElementVNode("span", _hoisted_2$i, [vue.createElementVNode("span", _hoisted_3$d, [vue.createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "dash"
@@ -13408,7 +13416,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
       })
     }, [vue.createElementVNode("span", _hoisted_5$9, vue.toDisplayString(_ctx.screenReaderNotificationText), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "bell"
-    })], 8, _hoisted_4$b)) : vue.createCommentVNode("", true)], 16, _hoisted_1$l)]),
+    })], 8, _hoisted_4$b)) : vue.createCommentVNode("", true)], 16, _hoisted_1$o)]),
     _: 3
   })), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createVNode(_component_f_expand, null, {
     default: vue.withCtx(() => [vue.withDirectives(vue.createElementVNode("div", {
@@ -13418,8 +13426,8 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })], 2);
 }
-const FExpandablePanel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$h]]);
-const _sfc_main$k = vue.defineComponent({
+const FExpandablePanel = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$h]]);
+const _sfc_main$n = vue.defineComponent({
   name: "FExpandableParagraph",
   components: {
     FIcon,
@@ -13501,8 +13509,8 @@ const _sfc_main$k = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$k = ["aria-expanded", "aria-controls"];
-const _hoisted_2$g = {
+const _hoisted_1$n = ["aria-expanded", "aria-controls"];
+const _hoisted_2$h = {
   class: "expandable-paragraph__icon"
 };
 const _hoisted_3$c = {
@@ -13537,11 +13545,11 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickMinimize && _ctx.onClickMinimize(...args))
-    }), [vue.createElementVNode("span", _hoisted_2$g, [vue.createElementVNode("span", _hoisted_3$c, [vue.createVNode(_component_f_icon, {
+    }), [vue.createElementVNode("span", _hoisted_2$h, [vue.createElementVNode("span", _hoisted_3$c, [vue.createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "dash"
-    })])]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "title")], 16, _hoisted_1$k)]),
+    })])]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "title")], 16, _hoisted_1$n)]),
     _: 3
   }, 8, ["class"])), _cache[3] || (_cache[3] = vue.createTextVNode()), _ctx.hasRelatedSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$a, [vue.renderSlot(_ctx.$slots, "related")])) : vue.createCommentVNode("", true)], 2), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createVNode(_component_f_expand, null, {
     default: vue.withCtx(() => [vue.withDirectives(vue.createElementVNode("div", {
@@ -13551,7 +13559,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })], 2);
 }
-const FExpandableParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$g]]);
+const FExpandableParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$g]]);
 const DEFAULT_ICON = "file";
 const iconMap = {
   "image/*": "pic",
@@ -13560,7 +13568,7 @@ const iconMap = {
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "doc",
   "application/vnd.openxmlformats-officedocument.wordprocessingml.template": "doc"
 };
-const _sfc_main$j = vue.defineComponent({
+const _sfc_main$m = vue.defineComponent({
   name: "FFileItem",
   components: {
     FIcon
@@ -13639,10 +13647,10 @@ const _sfc_main$j = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$j = {
+const _hoisted_1$m = {
   class: "file-item"
 };
-const _hoisted_2$f = {
+const _hoisted_2$g = {
   class: "file-item__row"
 };
 const _hoisted_3$b = ["id"];
@@ -13661,7 +13669,7 @@ const _hoisted_7$4 = {
 };
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [vue.createElementVNode("div", _hoisted_2$f, [vue.createElementVNode("a", vue.mergeProps({
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [vue.createElementVNode("div", _hoisted_2$g, [vue.createElementVNode("a", vue.mergeProps({
     id: _ctx.id,
     class: "file-item__file-open"
   }, _ctx.$attrs), [vue.createElementVNode("div", _hoisted_4$9, [vue.createVNode(_component_f_icon, {
@@ -13672,8 +13680,8 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     class: "file-item__separator"
   }, null, -1))]);
 }
-const FFileItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$f]]);
-const _sfc_main$i = vue.defineComponent({
+const FFileItem = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$f]]);
+const _sfc_main$l = vue.defineComponent({
   name: "FFileSelector",
   components: {
     FIcon
@@ -13734,14 +13742,14 @@ const _sfc_main$i = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$i = {
+const _hoisted_1$l = {
   class: "file-selector"
 };
-const _hoisted_2$e = ["id", "aria-labelledby", "aria-disabled"];
+const _hoisted_2$f = ["id", "aria-labelledby", "aria-disabled"];
 const _hoisted_3$a = ["id", "for"];
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [vue.createElementVNode("input", vue.mergeProps({
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [vue.createElementVNode("input", vue.mergeProps({
     id: _ctx.id,
     ref: "file-selector",
     type: "file",
@@ -13749,7 +13757,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-disabled": _ctx.ariaDisabled ? "true" : void 0
   }, _ctx.attrs, {
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
-  }), null, 16, _hoisted_2$e), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("label", {
+  }), null, 16, _hoisted_2$f), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("label", {
     id: _ctx.labelId,
     role: "button",
     class: vue.normalizeClass([_ctx.labelClass, "button button--tertiary button--medium"]),
@@ -13760,7 +13768,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     name: "paper-clip"
   }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$a)]);
 }
-const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$e]]);
+const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$e]]);
 const keybindings = {
   Up: focusTrAbove,
   Down: focusTrBelow,
@@ -13846,11 +13854,14 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
   }
   function expandableRows(row) {
     const expandableRows2 = row[expandableAttribute];
-    if (typeof expandableRows2 === "undefined") {
+    if (expandableRows2 === void 0 || expandableRows2 === null) {
       return void 0;
     }
     if (!Array.isArray(expandableRows2)) {
-      throw new Error(`Expandable rows must be a ListArray`);
+      throw new Error(`Expandable rows must be an array`);
+    }
+    if (expandableRows2.length === 0) {
+      return void 0;
     }
     return expandableRows2;
   }
@@ -13869,8 +13880,8 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     hasExpandableContent
   };
 }
-const _hoisted_1$h = ["role"];
-const _hoisted_2$d = {
+const _hoisted_1$k = ["role"];
+const _hoisted_2$e = {
   key: 0
 };
 const _hoisted_3$9 = {
@@ -13898,7 +13909,7 @@ const _hoisted_8$3 = {
 const _hoisted_9$3 = {
   class: "sr-only"
 };
-const _hoisted_10$2 = ["innerHTML"];
+const _hoisted_10$1 = ["innerHTML"];
 const _hoisted_11$1 = {
   key: 1,
   class: "table__column__description"
@@ -13934,7 +13945,7 @@ const _hoisted_21 = {
   key: 1
 };
 const _hoisted_22 = ["colspan"];
-const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -14123,13 +14134,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     });
     vue.provide("textFieldTableMode", true);
     vue.provide("renderColumns", vue.computed(() => props.rows.length > 0));
-    vue.watch(() => props.rows, () => {
-      if (props.modelValue) {
-        selectedRows.value = props.modelValue.filter((row) => {
-          return includeItem(row, props.rows, props.keyAttribute);
-        });
-      }
-    }, {
+    vue.watch(() => props.rows, () => setSelectedRows(), {
       immediate: true,
       deep: true
     });
@@ -14145,6 +14150,10 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     }, {
       immediate: true
     });
+    vue.watch(() => props.modelValue, () => setSelectedRows(), {
+      immediate: true,
+      deep: true
+    });
     function updateTr(tbodyElement) {
       const trElements = [].slice.call(tbodyElement.children);
       const trInteractableElements = trElements.filter((tr2) => {
@@ -14234,6 +14243,15 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       updateVModelWithSelectedRows();
       (_b = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy) == null ? void 0 : _b.$forceUpdate();
     }
+    function setSelectedRows() {
+      if (!props.modelValue || !props.modelValue.length) {
+        selectedRows.value = [];
+        return;
+      }
+      selectedRows.value = props.modelValue.filter((row) => {
+        return includeItem(row, props.rows, props.keyAttribute);
+      });
+    }
     function updateVModelWithSelectedRows() {
       if (props.modelValue) {
         emit("update:modelValue", selectedRows.value);
@@ -14317,7 +14335,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), vue.createElementVNode("table", vue.mergeProps({
         class: ["table", tableClasses.value],
         role: tableRole.value
-      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$d, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$e, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("col", {
           key: column.id,
           class: vue.normalizeClass(column.size)
@@ -14331,7 +14349,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           click: () => onClickColumnHeader(column)
         } : {}, true)), [vue.createElementVNode("span", {
           innerHTML: escapeNewlines(column.title)
-        }, null, 8, _hoisted_10$2), _cache[2] || (_cache[2] = vue.createTextVNode()), column.sortable ? (vue.openBlock(), vue.createBlock(vue.unref(FIcon), {
+        }, null, 8, _hoisted_10$1), _cache[2] || (_cache[2] = vue.createTextVNode()), column.sortable ? (vue.openBlock(), vue.createBlock(vue.unref(FIcon), {
           key: 0,
           class: vue.normalizeClass(iconClasses2(column)),
           name: iconName(column)
@@ -14401,11 +14419,11 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         colspan: nbOfColumns.value
       }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[12] || (_cache[12] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
         row: {}
-      })))])) : vue.createCommentVNode("", true)]))], 16, _hoisted_1$h)], 2);
+      })))])) : vue.createCommentVNode("", true)]))], 16, _hoisted_1$k)], 2);
     };
   }
 });
-const _sfc_main$g = vue.defineComponent({
+const _sfc_main$j = vue.defineComponent({
   name: "FLayoutApplicationTemplate",
   computed: {
     showHeader() {
@@ -14430,10 +14448,10 @@ const _sfc_main$g = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$g = {
+const _hoisted_1$j = {
   class: "layout-application-template"
 };
-const _hoisted_2$c = {
+const _hoisted_2$d = {
   key: 0,
   ref: "header",
   class: "layout-application-template__header"
@@ -14450,11 +14468,11 @@ const _hoisted_5$5 = {
   class: "layout-application-template__footer"
 };
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [_ctx.showHeader || _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$c, [_ctx.showHeader ? vue.renderSlot(_ctx.$slots, "header", {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [_ctx.showHeader || _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$d, [_ctx.showHeader ? vue.renderSlot(_ctx.$slots, "header", {
     key: 0
   }) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_3$8, [vue.renderSlot(_ctx.$slots, "top-navigation")])) : vue.createCommentVNode("", true)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("main", _hoisted_4$7, [vue.renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.showFooter ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_5$5, [vue.renderSlot(_ctx.$slots, "footer")])) : vue.createCommentVNode("", true)], 512)]);
 }
-const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$d]]);
+const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
   if (target === null) {
     return {};
@@ -14555,7 +14573,7 @@ function useLayoutPanel(options) {
     rightPrimaryClasses
   };
 }
-const _sfc_main$f = vue.defineComponent({
+const _sfc_main$i = vue.defineComponent({
   name: "FLayoutLeftPanel",
   components: {
     FIcon
@@ -14640,10 +14658,10 @@ const _sfc_main$f = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$i = {
   class: "layout-navigation"
 };
-const _hoisted_2$b = ["aria-expanded"];
+const _hoisted_2$c = ["aria-expanded"];
 const _hoisted_3$7 = {
   class: "layout-navigation__navigation__inner"
 };
@@ -14653,7 +14671,7 @@ const _hoisted_4$6 = {
 };
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [vue.createElementVNode("nav", {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [vue.createElementVNode("nav", {
     id: "layout-navigation__navigation",
     class: "layout-navigation__navigation",
     style: vue.normalizeStyle(_ctx.navigationStyle),
@@ -14696,13 +14714,13 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     class: "layout-navigation__navigation__border__dot"
   }, null, -1), vue.createTextVNode(), vue.createElementVNode("div", {
     class: "layout-navigation__navigation__border__dot"
-  }, null, -1)]), 32)) : vue.createCommentVNode("", true)], 12, _hoisted_2$b), _cache[14] || (_cache[14] = vue.createTextVNode()), vue.createElementVNode("div", {
+  }, null, -1)]), 32)) : vue.createCommentVNode("", true)], 12, _hoisted_2$c), _cache[14] || (_cache[14] = vue.createTextVNode()), vue.createElementVNode("div", {
     id: "layout-navigation__primary",
     class: vue.normalizeClass(["layout-navigation__primary", _ctx.leftPrimaryClasses]),
     style: vue.normalizeStyle(_ctx.primaryStyle)
   }, [vue.renderSlot(_ctx.$slots, "default")], 6)]);
 }
-const FLayoutLeftPanel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$c]]);
+const FLayoutLeftPanel = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$c]]);
 class FRightPanelServiceImpl {
   constructor() {
     _defineProperty(this, "focusedElementBeforeOpenining", null);
@@ -14732,7 +14750,7 @@ class FRightPanelServiceImpl {
   }
 }
 const FLayoutRightPanelService = new FRightPanelServiceImpl();
-const _sfc_main$e = vue.defineComponent({
+const _sfc_main$h = vue.defineComponent({
   name: "FLayoutRightPanel",
   components: {
     FIcon
@@ -14849,15 +14867,15 @@ const _sfc_main$e = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$h = {
   class: "layout-secondary"
 };
-const _hoisted_2$a = {
+const _hoisted_2$b = {
   class: "layout-secondary__secondary__inner"
 };
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [vue.createElementVNode("div", {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [vue.createElementVNode("div", {
     id: "layout-secondary__primary",
     class: vue.normalizeClass(["layout-secondary__primary", _ctx.rightPrimaryClasses]),
     style: vue.normalizeStyle(_ctx.primaryStyle)
@@ -14874,7 +14892,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     class: "layout-secondary__secondary__border__dot"
   }, null, -1), vue.createTextVNode(), vue.createElementVNode("div", {
     class: "layout-secondary__secondary__border__dot"
-  }, null, -1)]), 32), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_2$a, [vue.createElementVNode("div", {
+  }, null, -1)]), 32), _cache[9] || (_cache[9] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_2$b, [vue.createElementVNode("div", {
     ref: "title",
     class: "layout-secondary__secondary__inner__title",
     style: vue.normalizeStyle(_ctx.contentStyle)
@@ -14894,33 +14912,32 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])], 6)])], 4)) : vue.createCommentVNode("", true)]);
 }
-const FLayoutRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$b]]);
-const _hoisted_1$d = {
+const FLayoutRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$b]]);
+const _hoisted_1$g = {
   key: 0,
   class: "list"
 };
-const _hoisted_2$9 = {
+const _hoisted_2$a = {
   key: 0,
   class: "list__item"
 };
 const _hoisted_3$6 = {
   class: "list__item__itempane"
 };
-const _hoisted_4$5 = ["tabindex"];
-const _hoisted_5$4 = ["id", "aria-labelledby", "tabindex", "onKeydown"];
-const _hoisted_6$3 = ["onClick"];
-const _hoisted_7$2 = {
+const _hoisted_4$5 = ["id", "aria-labelledby", "tabindex", "onKeydown"];
+const _hoisted_5$4 = ["onClick"];
+const _hoisted_6$3 = {
   class: "list__item__selectpane__input"
 };
-const _hoisted_8$2 = ["id"];
-const _hoisted_9$2 = {
+const _hoisted_7$2 = ["id"];
+const _hoisted_8$2 = {
   key: 0,
   class: "list__item"
 };
-const _hoisted_10$1 = {
+const _hoisted_9$2 = {
   class: "list__item__itempane"
 };
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "FList",
   props: {
     /**
@@ -15144,7 +15161,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       return props.checkbox && itemEquals(activeItem.value, item, props.keyAttribute);
     }
     return (_ctx, _cache) => {
-      return !__props.selectable ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$d, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+      return !__props.selectable ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$g, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
         return vue.openBlock(), vue.createElementBlock("li", {
           key: itemKey(item),
           class: "list__item"
@@ -15157,12 +15174,11 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
         }, {
           item
         }))], 512)]);
-      }), 128)), _cache[0] || (_cache[0] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$9, [vue.createElementVNode("div", _hoisted_3$6, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
+      }), 128)), _cache[0] || (_cache[0] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$a, [vue.createElementVNode("div", _hoisted_3$6, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
         key: 1,
         ref_key: "ulElement",
         ref: ulElement,
-        class: "list list--hover",
-        tabindex: __props.checkbox ? 0 : void 0
+        class: "list list--hover"
       }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index) => {
         return vue.openBlock(), vue.createElementBlock("li", {
           id: getItemId(item),
@@ -15177,7 +15193,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           class: "list__item__selectpane",
           onClick: vue.withModifiers(($event) => onSelect(item), ["self"])
-        }, [vue.createElementVNode("div", _hoisted_7$2, [vue.createVNode(vue.unref(FCheckboxField), {
+        }, [vue.createElementVNode("div", _hoisted_6$3, [vue.createVNode(vue.unref(FCheckboxField), {
           value: true,
           "model-value": isSelected(item),
           onClick: vue.withModifiers(($event) => onSelect(item), ["self"])
@@ -15189,9 +15205,9 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
             ref_for: true
           }, {
             item
-          }))], 8, _hoisted_8$2)]),
+          }))], 8, _hoisted_7$2)]),
           _: 2
-        }, 1032, ["model-value", "onClick"])])], 8, _hoisted_6$3)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.checkbox ? "div" : "a"), {
+        }, 1032, ["model-value", "onClick"])])], 8, _hoisted_5$4)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.checkbox ? "div" : "a"), {
           ref_for: true,
           ref: "listItemPanes",
           href: !__props.checkbox ? "javascript:" : void 0,
@@ -15204,12 +15220,12 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
             item
           }))]),
           _: 2
-        }, 1032, ["href", "onClick"]))], 42, _hoisted_5$4);
-      }), 128)), _cache[2] || (_cache[2] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$2, [vue.createElementVNode("div", _hoisted_10$1, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)], 8, _hoisted_4$5));
+        }, 1032, ["href", "onClick"]))], 42, _hoisted_4$5);
+      }), 128)), _cache[2] || (_cache[2] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_8$2, [vue.createElementVNode("div", _hoisted_9$2, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)], 512));
     };
   }
 });
-const _sfc_main$c = vue.defineComponent({
+const _sfc_main$f = vue.defineComponent({
   name: "FLoader",
   mixins: [TranslationMixin],
   inheritAttrs: false,
@@ -15321,10 +15337,10 @@ const _sfc_main$c = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$c = {
+const _hoisted_1$f = {
   class: "loader__backdrop"
 };
-const _hoisted_2$8 = {
+const _hoisted_2$9 = {
   role: "alert"
 };
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
@@ -15333,7 +15349,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.teleportDisabled
   }, [vue.withDirectives(vue.createElementVNode("div", vue.mergeProps(_ctx.$attrs, {
     class: ["loader", _ctx.classes]
-  }), [vue.createElementVNode("div", _hoisted_1$c, [_cache[0] || (_cache[0] = vue.createElementVNode("div", {
+  }), [vue.createElementVNode("div", _hoisted_1$f, [_cache[0] || (_cache[0] = vue.createElementVNode("div", {
     class: "loader__wrapper"
   }, [vue.createElementVNode("div", {
     class: "loader__spinner-1 loader__spinner"
@@ -15371,10 +15387,10 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       "loader--delay": _ctx.delay
     }]),
     tabindex: "-1"
-  }, [vue.createElementVNode("span", _hoisted_2$8, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.loader.wait.text", _ctx.defaultLoadingText)), 1)])])], 2)])], 16), [[vue.vShow, _ctx.show]])], 8, ["to", "disabled"]);
+  }, [vue.createElementVNode("span", _hoisted_2$9, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.loader.wait.text", _ctx.defaultLoadingText)), 1)])])], 2)])], 16), [[vue.vShow, _ctx.show]])], 8, ["to", "disabled"]);
 }
-const FLoader = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$a]]);
-const _hoisted_1$b = ["aria-label"];
+const FLoader = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$a]]);
+const _hoisted_1$e = ["aria-label"];
 const __default__ = vue.defineComponent({
   computed: {
     ariaLabel() {
@@ -15386,7 +15402,7 @@ const __default__ = vue.defineComponent({
     }
   }
 });
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   __name: "FLogo",
   props: {
@@ -15410,7 +15426,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(`logo logo--${props.size}`),
         "aria-label": _ctx.ariaLabel,
         role: "img"
-      }, null, 10, _hoisted_1$b);
+      }, null, 10, _hoisted_1$e);
     };
   }
 });
@@ -15440,7 +15456,7 @@ const iconClasses = {
     screenReaderContextDefault: "Informationsmeddelande"
   }
 };
-const _sfc_main$a = vue.defineComponent({
+const _sfc_main$d = vue.defineComponent({
   name: "FMessageBox",
   components: {
     FIcon,
@@ -15530,7 +15546,7 @@ const _sfc_main$a = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$d = {
   key: 0,
   class: "sr-only"
 };
@@ -15540,7 +15556,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_flex = vue.resolveComponent("i-flex");
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["message-box", [_ctx.messageBoxType, _ctx.bannerType]])
-  }, [_ctx.provideScreenReaderContext ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, vue.toDisplayString(_ctx.screenReaderContext()), 1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_i_flex, {
+  }, [_ctx.provideScreenReaderContext ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$d, vue.toDisplayString(_ctx.screenReaderContext()), 1)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_i_flex, {
     gap: "2x"
   }, {
     default: vue.withCtx(() => [_ctx.layout === "short" ? (vue.openBlock(), vue.createBlock(_component_i_flex_item, {
@@ -15572,7 +15588,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })], 2);
 }
-const FMessageBox = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9]]);
+const FMessageBox = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$9]]);
 function findOverflowIndex(totalWidth, elements) {
   let sum = 0;
   const index = elements.findIndex((element) => {
@@ -15622,7 +15638,7 @@ const upKeys = ["Up", "ArrowUp"];
 const downKeys = ["Down", "ArrowDown"];
 const verticalKeys = [...upKeys, ...downKeys];
 const preventKeys = ["Tab", "Left", "Right", "ArrowLeft", "ArrowRight", "Home", "End", " ", "Spacebar", "Enter", ...verticalKeys];
-const _sfc_main$9 = vue.defineComponent({
+const _sfc_main$c = vue.defineComponent({
   name: "FNavigationMenu",
   components: {
     FIcon,
@@ -15955,8 +15971,8 @@ const _sfc_main$9 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$9 = ["aria-label"];
-const _hoisted_2$7 = ["data-ref-index", "onClick"];
+const _hoisted_1$c = ["aria-label"];
+const _hoisted_2$8 = ["data-ref-index", "onClick"];
 const _hoisted_3$5 = {
   class: "imenu__list__anchor-container"
 };
@@ -16007,7 +16023,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       target: item.target,
       class: "imenu__list__anchor",
       role: "menuitem"
-    }, [_ctx.showItemSrText(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$3, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedItemSrText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$4)])], 10, _hoisted_2$7);
+    }, [_ctx.showItemSrText(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$3, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedItemSrText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$4)])], 10, _hoisted_2$8);
   }), 128)), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.hasOverflow ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_6$2, [vue.createElementVNode("div", {
     ref: "popup-item",
     class: vue.normalizeClass(_ctx.popupItemClasses),
@@ -16036,11 +16052,11 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     "enable-keyboard-navigation": "",
     onSelect: _ctx.onPopupMenuItemSelected,
     onClose: _cache[5] || (_cache[5] = ($event) => _ctx.togglePopup(false))
-  }, null, 8, ["modelValue", "focused-item", "items", "is-open", "anchor", "selected-menu-item-screen-reader-text", "aria-label", "onSelect"])], 10, _hoisted_1$9);
+  }, null, 8, ["modelValue", "focused-item", "items", "is-open", "anchor", "selected-menu-item-screen-reader-text", "aria-label", "onSelect"])], 10, _hoisted_1$c);
 }
-const FNavigationMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8]]);
+const FNavigationMenu = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$8]]);
 const EVENTS = ["online", "offline"];
-const _sfc_main$8 = vue.defineComponent({
+const _sfc_main$b = vue.defineComponent({
   name: "FOffline",
   components: {
     FIcon,
@@ -16088,8 +16104,8 @@ const _sfc_main$8 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$8 = ["role"];
-const _hoisted_2$6 = {
+const _hoisted_1$b = ["role"];
+const _hoisted_2$7 = {
   key: 0,
   class: "offline"
 };
@@ -16108,7 +16124,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "offline",
     class: "offline__wrapper",
     role: _ctx.role
-  }, [!_ctx.isOnline ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [vue.createVNode(_component_i_flex, {
+  }, [!_ctx.isOnline ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [vue.createVNode(_component_i_flex, {
     gap: "2x"
   }, {
     default: vue.withCtx(() => [vue.createVNode(_component_i_flex_item, {
@@ -16134,10 +16150,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   })])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.withDirectives(vue.createElementVNode("span", {
     class: "sr-only",
     "aria-hidden": _ctx.shouldNotRead ? "true" : void 0
-  }, "\n            Din internetuppkoppling fungerar igen\n        ", 8, _hoisted_5$2), [[vue.vShow, _ctx.isOnline]])], 8, _hoisted_1$8);
+  }, "\n            Din internetuppkoppling fungerar igen\n        ", 8, _hoisted_5$2), [[vue.vShow, _ctx.isOnline]])], 8, _hoisted_1$b);
 }
-const FOffline = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]]);
-const _sfc_main$7 = vue.defineComponent({
+const FOffline = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$7]]);
+const _sfc_main$a = vue.defineComponent({
   name: "FOutputField",
   components: {
     FLabel
@@ -16170,13 +16186,13 @@ const _sfc_main$7 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$a = {
   class: "output-field"
 };
-const _hoisted_2$5 = ["id", "for"];
+const _hoisted_2$6 = ["id", "for"];
 function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = vue.resolveComponent("f-label");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [vue.createVNode(_component_f_label, {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createVNode(_component_f_label, {
     for: _ctx.id
   }, vue.createSlots({
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "label")]),
@@ -16189,10 +16205,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     id: _ctx.id,
     for: _ctx.htmlFor,
     class: "output-field__output"
-  }, _ctx.$attrs), [vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_2$5)]);
+  }, _ctx.$attrs), [vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_2$6)]);
 }
-const FOutputField = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6]]);
-const _sfc_main$6 = vue.defineComponent({
+const FOutputField = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$6]]);
+const _sfc_main$9 = vue.defineComponent({
   name: "FPageHeader",
   components: {
     ISkipLink
@@ -16239,10 +16255,10 @@ const _sfc_main$6 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$9 = {
   class: "page-header__root"
 };
-const _hoisted_2$4 = {
+const _hoisted_2$5 = {
   key: 0
 };
 const _hoisted_3$3 = {
@@ -16261,7 +16277,7 @@ const _hoisted_6$1 = {
 };
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_skip_link = vue.resolveComponent("i-skip-link");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [_ctx.skipLinkAnchor ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_2$4, [vue.createVNode(_component_i_skip_link, {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [_ctx.skipLinkAnchor ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_2$5, [vue.createVNode(_component_i_skip_link, {
     href: _ctx.skipLinkAnchor
   }, {
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "skip-link-text")]),
@@ -16273,17 +16289,316 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_5$1, [vue.createElementVNode("div", _hoisted_6$1, [vue.renderSlot(_ctx.$slots, "right")])])], 512)]);
 }
-const FPageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5]]);
-const _hoisted_1$5 = {
+const FPageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$5]]);
+const layoutRegister = {};
+function getLayout(name) {
+  var _layoutRegister$name;
+  return (_layoutRegister$name = layoutRegister[name]) !== null && _layoutRegister$name !== void 0 ? _layoutRegister$name : null;
+}
+function setLayout(name, layout) {
+  layoutRegister[name] = layout;
+}
+function defineLayout(definition) {
+  return normalizeDefinition(definition);
+}
+function registerLayout(definition) {
+  setLayout(definition.name, normalizeDefinition(definition));
+}
+function normalizeDefinition(definition) {
+  return {
+    name: definition.name,
+    areas: normalizeAreasDefinition(definition.areas)
+  };
+}
+function normalizeAreasDefinition(areas) {
+  return Object.fromEntries(Object.entries(areas).map(([key, area]) => {
+    var _area$scroll;
+    return [key, {
+      attachPanel: area.attachPanel,
+      direction: area.direction,
+      scroll: (_area$scroll = area.scroll) !== null && _area$scroll !== void 0 ? _area$scroll : false
+    }];
+  }));
+}
+function _checkPrivateRedeclaration(e, t) {
+  if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _classPrivateFieldInitSpec(e, t, a) {
+  _checkPrivateRedeclaration(e, t), t.set(e, a);
+}
+function _assertClassBrand(e, t, n) {
+  if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+  throw new TypeError("Private element is not present on this object");
+}
+function _classPrivateFieldGet2(s, a) {
+  return s.get(_assertClassBrand(s, a));
+}
+function _classPrivateFieldSet2(s, a, r) {
+  return s.set(_assertClassBrand(s, a), r), r;
+}
+const VAR_NAME_AREA = "--f-layout-area";
+const VAR_NAME_ATTACH_PANEL = "--f-layout-panel";
+const VAR_NAME_DIRECTION = "--f-layout-direction";
+registerLayout({
+  name: "simple",
+  areas: {
+    header: {
+      attachPanel: "none",
+      direction: "column"
+    },
+    content: {
+      attachPanel: "none",
+      direction: "column",
+      scroll: true
+    },
+    footer: {
+      attachPanel: "none",
+      direction: "column"
+    }
+  }
+});
+registerLayout({
+  name: "left-panel",
+  areas: {
+    header: {
+      attachPanel: "none",
+      direction: "column"
+    },
+    left: {
+      attachPanel: "left",
+      direction: "column"
+    },
+    content: {
+      attachPanel: "none",
+      direction: "column",
+      scroll: true
+    },
+    footer: {
+      attachPanel: "none",
+      direction: "column"
+    }
+  }
+});
+registerLayout({
+  name: "right-panel",
+  areas: {
+    header: {
+      attachPanel: "none",
+      direction: "column"
+    },
+    right: {
+      attachPanel: "right",
+      direction: "column"
+    },
+    content: {
+      attachPanel: "none",
+      direction: "column",
+      scroll: true
+    },
+    footer: {
+      attachPanel: "none",
+      direction: "column"
+    }
+  }
+});
+registerLayout({
+  name: "three-column",
+  areas: {
+    header: {
+      attachPanel: "top",
+      direction: "column"
+    },
+    left: {
+      attachPanel: "left",
+      direction: "column"
+    },
+    right: {
+      attachPanel: "right",
+      direction: "column"
+    },
+    content: {
+      attachPanel: "none",
+      direction: "column",
+      scroll: true
+    },
+    footer: {
+      attachPanel: "bottom",
+      direction: "column"
+    }
+  }
+});
+const styleContent = ':host {\n    display: block;\n}\n\n.page-layout {\n    display: grid;\n    height: 100cqh;\n    width: min(100%, 100cqw);\n\n    &[part~="simple"] {\n        grid-template:\n            "header" min-content\n            "content" 1fr\n            "footer" min-content\n            / 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="left-panel"] {\n        grid-template:\n            "header header" min-content\n            "left content" 1fr\n            "footer footer" min-content\n            / min-content 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"] {\n            background: var(--fkds-color-background-secondary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="right-panel"] {\n        grid-template:\n            "header header" min-content\n            "content right" 1fr\n            "footer footer" min-content\n            / 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="three-column"] {\n        grid-template:\n            "header header header" min-content\n            "left content right" 1fr\n            "footer footer footer" min-content\n            / min-content 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"],\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n}\n\n.page-layout__area {\n    display: flex;\n    position: relative;\n\n    &[data-direction="column"] {\n        flex-direction: column;\n    }\n\n    &[data-direction="row"] {\n        flex-direction: row;\n    }\n\n    &[data-scroll] {\n        overflow-y: auto;\n    }\n\n    &:empty {\n        display: none;\n    }\n}\n\n:host ::slotted(*) {\n    display: contents;\n}\n';
+const stubLayout = defineLayout({
+  name: "",
+  areas: {}
+});
+function getSlotNames(element) {
+  return Array.from(element.querySelectorAll(":scope > [slot]"), (it) => it.slot);
+}
+var _wrapper = /* @__PURE__ */ new WeakMap();
+var _elements = /* @__PURE__ */ new WeakMap();
+var _layout = /* @__PURE__ */ new WeakMap();
+var _observer = /* @__PURE__ */ new WeakMap();
+var _slotNames = /* @__PURE__ */ new WeakMap();
+class PageLayout extends HTMLElement {
+  constructor() {
+    super();
+    _classPrivateFieldInitSpec(this, _wrapper, void 0);
+    _classPrivateFieldInitSpec(this, _elements, {});
+    _classPrivateFieldInitSpec(this, _layout, stubLayout);
+    _classPrivateFieldInitSpec(this, _observer, void 0);
+    _classPrivateFieldInitSpec(this, _slotNames, []);
+    _classPrivateFieldSet2(_wrapper, this, document.createElement("div"));
+    _classPrivateFieldSet2(_observer, this, new MutationObserver(() => {
+      this.slotNames = getSlotNames(this);
+    }));
+  }
+  /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type -- this one is better to infer or each attribute would have to be duplicated */
+  static get observedAttributes() {
+    return ["layout"];
+  }
+  connectedCallback() {
+    this.slotNames = getSlotNames(this);
+    _classPrivateFieldGet2(_observer, this).observe(this, {
+      childList: true
+    });
+    const shadow = this.attachShadow({
+      mode: "open"
+    });
+    const style = document.createElement("style");
+    style.textContent = styleContent;
+    shadow.append(style);
+    shadow.append(_classPrivateFieldGet2(_wrapper, this));
+  }
+  disconnectedCallback() {
+    _classPrivateFieldGet2(_observer, this).disconnect();
+  }
+  attributeChangedCallback(name, _oldValue, value) {
+    switch (name) {
+      case "layout": {
+        var _getLayout;
+        const part = ["grid", value].filter(Boolean).join(" ");
+        _classPrivateFieldGet2(_wrapper, this).className = "page-layout";
+        _classPrivateFieldGet2(_wrapper, this).setAttribute("part", part);
+        _classPrivateFieldSet2(_layout, this, (_getLayout = getLayout(value)) !== null && _getLayout !== void 0 ? _getLayout : stubLayout);
+        this.updateSlotElements();
+        break;
+      }
+    }
+  }
+  get slotNames() {
+    return _classPrivateFieldGet2(_slotNames, this);
+  }
+  set slotNames(slots) {
+    _classPrivateFieldSet2(_slotNames, this, slots);
+    this.updateSlotElements();
+  }
+  updateSlotElements() {
+    const wrapper = _classPrivateFieldGet2(_wrapper, this);
+    const layout = _classPrivateFieldGet2(_layout, this);
+    for (const slot of _classPrivateFieldGet2(_slotNames, this)) {
+      const existing = _classPrivateFieldGet2(_elements, this)[slot];
+      const element = existing !== null && existing !== void 0 ? existing : document.createElement("div");
+      const area = layout.areas[slot];
+      if (!area) {
+        continue;
+      }
+      const {
+        attachPanel: attach,
+        direction,
+        scroll
+      } = area;
+      element.className = "";
+      element.classList.add("page-layout__area");
+      element.setAttribute("part", ["area", slot].join(" "));
+      element.setAttribute("data-direction", direction);
+      if (scroll) {
+        element.setAttribute("data-scroll", "true");
+      } else {
+        element.removeAttribute("data-scroll");
+      }
+      element.style.setProperty("grid-area", slot);
+      element.style.setProperty(VAR_NAME_AREA, `"${slot}"`);
+      element.style.setProperty(VAR_NAME_ATTACH_PANEL, `"${attach}"`);
+      element.style.setProperty(VAR_NAME_DIRECTION, `"${direction}"`);
+      if (!existing) {
+        const slotElement = document.createElement("slot");
+        slotElement.name = slot;
+        element.append(slotElement);
+        wrapper.append(element);
+        _classPrivateFieldGet2(_elements, this)[slot] = element;
+      }
+    }
+  }
+}
+const _hoisted_1$8 = ["slot"];
+const tagName$1 = `ce-page-layout`;
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FPageLayout",
+  props: {
+    layout: {}
+  },
+  setup(__props) {
+    const slots = vue.useSlots();
+    const slotNames = vue.computed(() => {
+      return Object.keys(slots);
+    });
+    vue.onMounted(() => {
+      if (!customElements.get(tagName$1)) {
+        customElements.define(tagName$1, PageLayout);
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName$1), {
+        layout: _ctx.layout
+      }, {
+        default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(slotNames.value, (slot) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: slot,
+            slot
+          }, [vue.renderSlot(_ctx.$slots, slot)], 8, _hoisted_1$8);
+        }), 128))]),
+        _: 3
+      }, 8, ["layout"]);
+    };
+  }
+});
+function getProperty(style, key) {
+  const value = style.getPropertyValue(key);
+  if (value === "") {
+    return null;
+  } else {
+    return JSON.parse(value);
+  }
+}
+function useAreaData(element) {
+  const area = vue.ref(null);
+  const attachPanel = vue.ref(null);
+  const direction = vue.ref(null);
+  vue.watchEffect(() => {
+    if (element.value) {
+      const style = getComputedStyle(element.value);
+      area.value = getProperty(style, VAR_NAME_AREA);
+      attachPanel.value = getProperty(style, VAR_NAME_ATTACH_PANEL);
+      direction.value = getProperty(style, VAR_NAME_DIRECTION);
+    }
+  });
+  return {
+    area,
+    attachPanel,
+    direction
+  };
+}
+const _hoisted_1$7 = {
   class: "progress"
 };
-const _hoisted_2$3 = ["aria-label", "aria-valuenow", "aria-valuetext"];
+const _hoisted_2$4 = ["aria-label", "aria-valuenow", "aria-valuetext"];
 const _hoisted_3$2 = {
   class: "sr-only"
 };
 const MIN_VALUE = 0;
 const MAX_VALUE = 100;
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "FProgressbar",
   props: {
     /**
@@ -16322,10 +16637,10 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const ariaLabel = props.ariaLabel;
-    function clamp(val) {
+    function clamp2(val) {
       return Math.round(Math.min(Math.max(val || 0, MIN_VALUE), MAX_VALUE));
     }
-    const progressValueNow = vue.computed(() => clamp(props.value));
+    const progressValueNow = vue.computed(() => clamp2(props.value));
     const cssWidth = vue.computed(() => `width: ${progressValueNow.value}%`);
     const progressBarClass = vue.computed(() => {
       if (progressValueNow.value === MIN_VALUE) {
@@ -16340,7 +16655,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       return `${props.valueText.replace("%VALUE%", progressValueNow.value.toString())}`;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [vue.createElementVNode("span", {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [vue.createElementVNode("span", {
         class: vue.normalizeClass(["progress__meter", progressBarClass.value]),
         role: "progressbar",
         "aria-label": vue.unref(ariaLabel),
@@ -16349,12 +16664,12 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         "aria-valuenow": progressValueNow.value,
         "aria-valuetext": progressText.value,
         style: vue.normalizeStyle(cssWidth.value)
-      }, [vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(progressText.value), 1)], 14, _hoisted_2$3)]);
+      }, [vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
     };
   }
 });
 const anyType = [String, Object, Array, Number, Date, Boolean];
-const _sfc_main$4 = vue.defineComponent({
+const _sfc_main$6 = vue.defineComponent({
   name: "FRadioField",
   inheritAttrs: false,
   props: {
@@ -16510,8 +16825,8 @@ const _sfc_main$4 = vue.defineComponent({
     }
   }
 });
-const _hoisted_1$4 = ["id", "disabled"];
-const _hoisted_2$2 = ["for"];
+const _hoisted_1$6 = ["id", "disabled"];
+const _hoisted_2$3 = ["for"];
 const _hoisted_3$1 = {
   key: 0,
   class: "radio-button__details"
@@ -16529,7 +16844,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     type: "radio",
     class: "radio-button__input",
     disabled: _ctx.disabled
-  }, _ctx.attrs), null, 16, _hoisted_1$4), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("label", {
+  }, _ctx.attrs), null, 16, _hoisted_1$6), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("label", {
     class: vue.normalizeClass(_ctx.$slots.details ? "radio-button__label radio-button__width" : "radio-button__label"),
     for: _ctx.id
   }, [vue.renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.$slots.details ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -16544,9 +16859,463 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       height: _ctx.height
     })])) : vue.createCommentVNode("", true)]),
     _: 3
-  }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$2)], 34);
+  }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$3)], 34);
 }
-const FRadioField = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const FRadioField = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$4]]);
+function tryOnScopeDispose(fn2) {
+  if (vue.getCurrentScope()) {
+    vue.onScopeDispose(fn2);
+    return true;
+  }
+  return false;
+}
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function watchImmediate(source, cb, options) {
+  return vue.watch(
+    source,
+    cb,
+    {
+      ...options,
+      immediate: true
+    }
+  );
+}
+const defaultWindow = isClient ? window : void 0;
+function unrefElement(elRef) {
+  var _a;
+  const plain = vue.toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function useEventListener(...args) {
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn2) => fn2());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const firstParamTargets = vue.computed(() => {
+    const test = toArray(vue.toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  const stopWatch = watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+        toArray(vue.toValue(firstParamTargets.value ? args[1] : args[0])),
+        toArray(vue.unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        vue.toValue(firstParamTargets.value ? args[3] : args[2])
+      ];
+    },
+    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
+      cleanup();
+      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
+        return;
+      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+      cleanups.push(
+        ...raw_targets.flatMap(
+          (el) => raw_events.flatMap(
+            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(cleanup);
+  return stop;
+}
+const keymap = {
+  left: {
+    ArrowLeft: "decrease",
+    ArrowRight: "increase",
+    Home: "minimize",
+    End: "maximize"
+  },
+  right: {
+    ArrowLeft: "increase",
+    ArrowRight: "decrease",
+    Home: "minimize",
+    End: "maximize"
+  },
+  top: {
+    ArrowUp: "decrease",
+    ArrowDown: "increase",
+    Home: "minimize",
+    End: "maximize"
+  },
+  bottom: {
+    ArrowUp: "increase",
+    ArrowDown: "decrease",
+    Home: "minimize",
+    End: "maximize"
+  },
+  none: {}
+};
+function useKeyboardHandler(options) {
+  const {
+    attachment,
+    separator
+  } = options;
+  useEventListener(separator, "keydown", (event) => {
+    if (!attachment.value) {
+      return;
+    }
+    const action = keymap[attachment.value][event.key];
+    if (action) {
+      event.preventDefault();
+      options[action]();
+    }
+  });
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function usePointerHandler(options) {
+  const {
+    separator,
+    attachment
+  } = options;
+  const invert = vue.computed(() => {
+    if (attachment.value === "right" || attachment.value === "bottom") {
+      return -1;
+    }
+    return 1;
+  });
+  const orientation = vue.computed(() => {
+    if (attachment.value === "top" || attachment.value === "bottom") {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  });
+  useEventListener(separator, "pointerdown", (event) => {
+    const {
+      isPrimary,
+      button,
+      target,
+      pointerId
+    } = event;
+    if (!separator.value) {
+      return;
+    }
+    if (!isPrimary || button !== 0 || target !== separator.value) {
+      return;
+    }
+    const separatorElement = separator.value;
+    const property = orientation.value === "horizontal" ? "clientY" : "clientX";
+    const reference = event[property];
+    const resize = createResizer();
+    function onPointerMove(event2) {
+      if (event2.pointerId === pointerId) {
+        resize(event2[property] - reference);
+      }
+    }
+    function onLostPointerCapture(event2) {
+      if (event2.pointerId === pointerId) {
+        separatorElement.removeEventListener("pointermove", onPointerMove);
+        separatorElement.removeEventListener("lostpointercapture", onLostPointerCapture);
+      }
+    }
+    onPointerMove(event);
+    separatorElement.addEventListener("lostpointercapture", onLostPointerCapture);
+    separatorElement.addEventListener("pointermove", onPointerMove);
+    separatorElement.setPointerCapture(pointerId);
+    event.preventDefault();
+  });
+  function createResizer() {
+    const {
+      min,
+      max,
+      current: value
+    } = options.state.value;
+    return (amount) => {
+      options.movement(clamp(value + amount * invert.value, min, max));
+    };
+  }
+}
+function computeCssValue(raw, total, auto) {
+  if (raw.endsWith("px")) {
+    return parseInt(raw.slice(0, -2), 10);
+  } else if (raw.endsWith("%")) {
+    const value = parseInt(raw.slice(0, -1), 10);
+    const percent = value / 100;
+    return percent * total;
+  } else if (raw === "0") {
+    return 0;
+  } else if (raw === "auto") {
+    return auto;
+  } else {
+    throw new Error(`Cant parse size from "${raw}"`);
+  }
+}
+function aggregateCssValue(raw, total, auto, take) {
+  if (raw === "auto") {
+    return auto;
+  }
+  const parts = raw.split(/\s+/).map((it) => it.trim());
+  const parsed = parts.map((it) => computeCssValue(it, total, auto));
+  return take(...parsed);
+}
+function useStorage(options) {
+  const {
+    state,
+    storageKey
+  } = options;
+  const loaded = vue.ref(false);
+  let last = -1;
+  vue.watchEffect(() => {
+    if (!loaded.value) {
+      return;
+    }
+    if (!storageKey.value) {
+      return;
+    }
+    if (state.value.current < 0 || state.value.current === last) {
+      return;
+    }
+    const json = JSON.stringify(state.value.current);
+    window.localStorage.setItem(storageKey.value, json);
+    last = state.value.current;
+  });
+  vue.watchEffect(() => {
+    if (!storageKey.value) {
+      return;
+    }
+    const json = window.localStorage.getItem(storageKey.value);
+    if (json) {
+      const value = JSON.parse(json);
+      state.value.current = clamp(value, state.value.min, state.value.max);
+      last = value;
+    }
+    loaded.value = true;
+  });
+}
+const _hoisted_1$5 = ["aria-orientation"];
+const _hoisted_2$2 = ["aria-orientation"];
+const STEP_SIZE = 10;
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FResizePane.ce",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    min: {
+      default: "0",
+      type: String
+    },
+    max: {
+      default: "100%",
+      type: String
+    },
+    initial: {
+      default: "50%",
+      type: String
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const root = vue.shallowRef();
+    const content = vue.ref();
+    const separator = vue.ref();
+    const state = vue.ref({
+      min: -1,
+      max: -1,
+      current: -1
+    });
+    const separatorSize = vue.ref(0);
+    const layoutSize = vue.ref(0);
+    const storageKey = vue.computed(() => area.value ? `layout/${area.value}/size` : null);
+    const {
+      attachPanel: attachment,
+      area
+    } = useAreaData(root);
+    useKeyboardHandler({
+      increase() {
+        state.value.current = Math.min(state.value.current + STEP_SIZE, state.value.max);
+      },
+      decrease() {
+        state.value.current = Math.max(state.value.current - STEP_SIZE, state.value.min);
+      },
+      maximize() {
+        state.value.current = state.value.max;
+      },
+      minimize() {
+        state.value.current = state.value.min;
+      },
+      attachment,
+      separator
+    });
+    useStorage({
+      state,
+      storageKey
+    });
+    usePointerHandler({
+      movement(value) {
+        state.value.current = value;
+      },
+      separator,
+      state,
+      attachment
+    });
+    const minSize = vue.computed(() => {
+      const total = layoutSize.value;
+      return Math.floor(aggregateCssValue(props.min, total, 0, Math.max) + separatorSize.value);
+    });
+    const maxSize = vue.computed(() => {
+      const total = layoutSize.value;
+      return Math.floor(aggregateCssValue(props.max, total, total, Math.min) + separatorSize.value);
+    });
+    const initialSize = vue.computed(() => {
+      const total = layoutSize.value;
+      return Math.floor(computeCssValue(props.initial, total, total * 0.5));
+    });
+    const orientation = vue.computed(() => {
+      if (attachment.value === "top" || attachment.value === "bottom") {
+        return "horizontal";
+      } else {
+        return "vertical";
+      }
+    });
+    const layoutElement = vue.computed(() => {
+      var _host$closest;
+      if (!root.value) {
+        return void 0;
+      }
+      const shadow = root.value.getRootNode();
+      const host = shadow.host;
+      return (_host$closest = host.closest("ce-page-layout")) !== null && _host$closest !== void 0 ? _host$closest : void 0;
+    });
+    vue.watchEffect(() => {
+      const {
+        min,
+        max,
+        current: value
+      } = state.value;
+      if (root.value) {
+        root.value.style.setProperty("--size", `${String(value)}px`);
+        root.value.style.setProperty("--min", `${min}px`);
+        root.value.style.setProperty("--max", `${max}px`);
+      }
+      if (separator.value) {
+        separator.value.setAttribute("aria-valuemin", String(Math.floor(min)));
+        separator.value.setAttribute("aria-valuemax", String(Math.floor(max)));
+        separator.value.setAttribute("aria-valuenow", String(Math.floor(value)));
+      }
+    });
+    vue.onMounted(() => {
+      if (separator.value) {
+        const {
+          flexBasis
+        } = getComputedStyle(separator.value);
+        separatorSize.value = computeCssValue(flexBasis, 0, 0);
+      }
+      layoutSize.value = getLayoutSize();
+      state.value = {
+        min: minSize.value,
+        max: maxSize.value,
+        current: clamp(initialSize.value, minSize.value, maxSize.value)
+      };
+    });
+    useEventListener$1(window, "resize", logic.debounce(onResize, 20));
+    function onResize() {
+      layoutSize.value = getLayoutSize();
+      state.value = {
+        min: minSize.value,
+        max: maxSize.value,
+        current: initialSize.value
+      };
+    }
+    function getLayoutSize() {
+      if (!layoutElement.value) {
+        return 0;
+      }
+      switch (orientation.value) {
+        case "horizontal": {
+          return layoutElement.value.offsetHeight;
+        }
+        case "vertical": {
+          return layoutElement.value.offsetWidth;
+        }
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: vue.normalizeClass(["resize", `resize--${vue.unref(attachment)}`])
+      }, [vue.createElementVNode("div", {
+        ref_key: "content",
+        ref: content,
+        class: "resize__content"
+      }, [vue.renderSlot(_ctx.$slots, "content")], 512), _cache[0] || (_cache[0] = vue.createTextVNode()), !props.disabled ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        ref_key: "separator",
+        ref: separator,
+        role: "separator",
+        class: "resize__handle",
+        tabindex: "0",
+        "aria-orientation": orientation.value
+      }, null, 8, _hoisted_1$5)) : (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        role: "separator",
+        class: "resize__handle disabled",
+        "aria-orientation": orientation.value
+      }, null, 8, _hoisted_2$2))], 2);
+    };
+  }
+});
+const _style_0 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--left {\n  flex-direction: row;\n  width: var(--size);\n}\n.resize--right {\n  flex-direction: row-reverse;\n  width: var(--size);\n}\n.resize--top {\n  flex-direction: column;\n  height: var(--size);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n  height: var(--size);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--left .resize__content, .resize--right .resize__content {\n  min-width: calc(var(--min) - 2px);\n  max-width: calc(var(--max) - 2px);\n}\n.resize--top .resize__content, .resize--bottom .resize__content {\n  min-height: calc(var(--min) - 2px);\n  max-height: calc(var(--max) - 2px);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n  /* disable regular focus indicator as this component has its own */\n  /* when focus by keyboard we dont want the delay or transition */\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}\n.resize--left .resize__handle {\n  left: 2px;\n}\n.resize--right .resize__handle {\n  right: 2px;\n}\n.resize--top .resize__handle {\n  top: 2px;\n}\n.resize--bottom .resize__handle {\n  bottom: 2px;\n}';
+const FResizePane = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0]]]);
+const _hoisted_1$4 = {
+  slot: "content"
+};
+const tagName = "ce-resize-pane";
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FResizePane",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    min: {
+      default: "0"
+    },
+    max: {
+      default: "100%"
+    },
+    initial: {
+      default: "50%"
+    }
+  },
+  setup(__props) {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, vue.defineCustomElement(FResizePane));
+    }
+    const props = __props;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName), vue.normalizeProps(vue.guardReactiveProps(props)), {
+        default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "default")])]),
+        _: 3
+      }, 16);
+    };
+  }
+});
 const _sfc_main$3 = vue.defineComponent({
   name: "FStaticField",
   components: {
@@ -17318,20 +18087,20 @@ exports.ErrorData = ErrorData;
 exports.ErrorPlugin = ErrorPlugin;
 exports.ErrorViewData = ErrorViewData;
 exports.EventBus = EventBus;
-exports.FBadge = _sfc_main$1b;
-exports.FBankAccountNumberTextField = _sfc_main$y;
-exports.FBankgiroTextField = _sfc_main$x;
+exports.FBadge = _sfc_main$1e;
+exports.FBankAccountNumberTextField = _sfc_main$B;
+exports.FBankgiroTextField = _sfc_main$A;
 exports.FCalendar = FCalendar;
 exports.FCalendarDay = FCalendarDay;
-exports.FCard = _sfc_main$W;
+exports.FCard = _sfc_main$Z;
 exports.FCheckboxField = FCheckboxField;
-exports.FClearingnumberTextField = _sfc_main$w;
+exports.FClearingnumberTextField = _sfc_main$z;
 exports.FConfirmModal = FConfirmModal;
 exports.FContextMenu = FContextMenu;
 exports.FCrudButton = FCrudButton;
-exports.FCrudDataset = _sfc_main$I;
-exports.FCurrencyTextField = _sfc_main$A;
-exports.FDataTable = _sfc_main$o;
+exports.FCrudDataset = _sfc_main$L;
+exports.FCurrencyTextField = _sfc_main$D;
+exports.FDataTable = _sfc_main$r;
 exports.FDatepickerField = FDatepickerField;
 exports.FDialogueTree = FDialogueTree;
 exports.FEmailTextField = FEmailTextField;
@@ -17346,34 +18115,36 @@ exports.FFileSelector = FFileSelector;
 exports.FFormModal = FFormModal;
 exports.FFormModalAction = FValidationFormAction;
 exports.FIcon = FIcon;
-exports.FInteractiveTable = _sfc_main$h;
+exports.FInteractiveTable = _sfc_main$k;
 exports.FKUIConfigButtonOrder = FKUIConfigButtonOrder;
 exports.FLabel = FLabel;
 exports.FLayoutApplicationTemplate = FLayoutApplicationTemplate;
 exports.FLayoutLeftPanel = FLayoutLeftPanel;
 exports.FLayoutRightPanel = FLayoutRightPanel;
 exports.FLayoutRightPanelService = FLayoutRightPanelService;
-exports.FList = _sfc_main$d;
+exports.FList = _sfc_main$g;
 exports.FLoader = FLoader;
-exports.FLogo = _sfc_main$b;
+exports.FLogo = _sfc_main$e;
 exports.FMessageBox = FMessageBox;
 exports.FModal = FModal;
 exports.FNavigationMenu = FNavigationMenu;
-exports.FNumericTextField = _sfc_main$v;
+exports.FNumericTextField = _sfc_main$y;
 exports.FOffline = FOffline;
-exports.FOrganisationsnummerTextField = _sfc_main$q;
+exports.FOrganisationsnummerTextField = _sfc_main$t;
 exports.FOutputField = FOutputField;
 exports.FPageHeader = FPageHeader;
-exports.FPercentTextField = _sfc_main$r;
-exports.FPersonnummerTextField = _sfc_main$u;
+exports.FPageLayout = _sfc_main$8;
+exports.FPercentTextField = _sfc_main$u;
+exports.FPersonnummerTextField = _sfc_main$x;
 exports.FPhoneTextField = FPhoneTextField;
-exports.FPlusgiroTextField = _sfc_main$t;
-exports.FPostalCodeTextField = _sfc_main$s;
-exports.FProgressbar = _sfc_main$5;
+exports.FPlusgiroTextField = _sfc_main$w;
+exports.FPostalCodeTextField = _sfc_main$v;
+exports.FProgressbar = _sfc_main$7;
 exports.FRadioField = FRadioField;
+exports.FResizePane = _sfc_main$4;
 exports.FSearchTextField = FSearchTextField;
 exports.FSelectField = FSelectField;
-exports.FSortFilterDataset = _sfc_main$p;
+exports.FSortFilterDataset = _sfc_main$s;
 exports.FSortFilterDatasetInjected = FSortFilterDatasetInjected;
 exports.FStaticField = FStaticField;
 exports.FTableColumn = FTableColumn;
@@ -17394,13 +18165,13 @@ exports.IAnimateExpand = IAnimateExpand;
 exports.ICalendarMonth = ICalendarMonth;
 exports.ICalendarMonthGrid = ICalendarMonthGrid;
 exports.ICalendarNavbar = ICalendarNavbar;
-exports.IComboboxDropdown = _sfc_main$O;
-exports.IComboboxToggleButton = _sfc_main$N;
+exports.IComboboxDropdown = _sfc_main$R;
+exports.IComboboxToggleButton = _sfc_main$Q;
 exports.IFlex = IFlex;
 exports.IFlexItem = IFlexItem;
 exports.IPopup = IPopup;
 exports.IPopupError = IPopupError;
-exports.IPopupListbox = _sfc_main$S;
+exports.IPopupListbox = _sfc_main$V;
 exports.IPopupMenu = IPopupMenu;
 exports.ISkipLink = ISkipLink;
 exports.IValidationForm = FValidationForm;
@@ -17449,10 +18220,12 @@ exports.refIsElementArray = refIsElementArray;
 exports.refIsHTMLElementArray = refIsHTMLElementArray;
 exports.refIsVue = refIsVue;
 exports.refIsVueArray = refIsVueArray;
+exports.registerLayout = registerLayout;
 exports.renderSlotText = renderSlotText;
 exports.setRunningContext = setRunningContext;
 exports.tableScrollClasses = tableScrollClasses;
 exports.tooltipAttachTo = tooltipAttachTo;
+exports.useAreaData = useAreaData;
 exports.useCombobox = useCombobox;
 exports.useModal = useModal;
 exports.useSlotUtils = useSlotUtils;