@fkui/vue 6.0.1 → 6.2.0

package/dist/esm/index.esm.js

@@ -1,8 +1,8 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, createApp, resolveComponent, createCommentVNode, withKeys, createVNode, toDisplayString, createBlock, withCtx, Fragment, renderList, withModifiers, isVNode, Comment, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, ref, normalizeProps, guardReactiveProps, unref, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, toRefs } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, createApp, resolveComponent, createCommentVNode, withKeys, createVNode, toDisplayString, createBlock, withCtx, Fragment, renderList, withModifiers, isVNode, Comment, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, ref, normalizeProps, guardReactiveProps, unref, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, onUpdated, toRefs } from "vue";
 import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, findTabbableElements, popFocus, pushFocus, scrollTo, documentOrderComparator, ValidationService, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, isEmpty, deepClone, parseNumber, formatNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, parsePersonnummer, formatPersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, focusFirst, removeFocusListener, restoreFocus, saveFocus, addFocusListener, DomUtils } from "@fkui/logic";
 import { groupByWeek, getWeekdayNamings, FDate, DateFormat } from "@fkui/date";
 const statuses = ["default", "warning", "error", "success", "info"];
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "FBadge",
   props: {
     /**
@@ -764,8 +764,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;
@@ -804,7 +804,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, {});
@@ -819,7 +819,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;
@@ -1881,7 +1881,7 @@ function requireEs_array_push() {
 requireEs_array_push();
 const Flip = ["horizontal", "vertical"];
 const Rotate = ["90", "180", "270"];
-const _sfc_main$1a = defineComponent({
+const _sfc_main$1b = defineComponent({
   name: "FIcon",
   inheritAttrs: false,
   props: {
@@ -1969,18 +1969,18 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1$U = ["aria-hidden"];
+const _hoisted_1$V = ["aria-hidden"];
 const _hoisted_2$F = ["xlink:href"];
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
     focusable: "false",
     class: ["icon", [_ctx.spriteKey, ..._ctx.modifiers]],
     "aria-hidden": _ctx.ariaHidden
   }), [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("use", {
     "xlink:href": _ctx.spriteId
-  }, null, 8, _hoisted_2$F)], 16, _hoisted_1$U);
+  }, null, 8, _hoisted_2$F)], 16, _hoisted_1$V);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$W]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$R]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -3871,8 +3871,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;
@@ -3880,12 +3880,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) {
@@ -4418,7 +4418,7 @@ function elementIsRadioButton(element) {
 function isHTMLInputElement(element) {
   return element instanceof HTMLInputElement;
 }
-const _sfc_main$19 = defineComponent({
+const _sfc_main$1a = defineComponent({
   name: "FModal",
   components: {
     FIcon
@@ -4598,7 +4598,7 @@ const _sfc_main$19 = defineComponent({
     }
   }
 });
-const _hoisted_1$T = ["id"];
+const _hoisted_1$U = ["id"];
 const _hoisted_2$E = {
   class: "modal__backdrop"
 };
@@ -4632,7 +4632,7 @@ const _hoisted_10$4 = {
   class: "modal__shelf"
 };
 const _hoisted_11$3 = ["aria-label"];
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return _ctx.isOpen ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -4660,9 +4660,9 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
   })], 8, _hoisted_11$3), _cache[8] || (_cache[8] = createTextVNode()), createElementVNode("div", {
     tabindex: "0",
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
-  }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$T)) : createCommentVNode("", true);
+  }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$U)) : createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$V]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$Q]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -4691,7 +4691,7 @@ const defaultButtons = [{
   event: "dismiss",
   type: "secondary"
 }];
-const _sfc_main$18 = defineComponent({
+const _sfc_main$19 = defineComponent({
   name: "FConfirmModal",
   components: {
     FModal
@@ -4795,7 +4795,7 @@ const _sfc_main$18 = defineComponent({
     }
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$T = {
   class: "button-group"
 };
 const _hoisted_2$D = ["onClick"];
@@ -4803,7 +4803,7 @@ const _hoisted_3$v = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_modal = resolveComponent("f-modal");
   return openBlock(), createBlock(_component_f_modal, {
     fullscreen: _ctx.fullscreen,
@@ -4816,7 +4816,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     header: withCtx(() => [renderSlot(_ctx.$slots, "heading", {}, () => [createTextVNode(toDisplayString(_ctx.heading), 1)])]),
     content: withCtx(() => [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(_ctx.content), 1)])]),
-    footer: withCtx(() => [createElementVNode("div", _hoisted_1$S, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.preparedButtons, (button) => {
+    footer: withCtx(() => [createElementVNode("div", _hoisted_1$T, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.preparedButtons, (button) => {
       return openBlock(), createElementBlock("button", {
         key: button.label,
         type: "button",
@@ -4827,11 +4827,11 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
-const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$U]]);
+const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["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 = defineComponent({
+const _sfc_main$18 = defineComponent({
   name: "IFlex",
   inheritAttrs: true,
   props: {
@@ -4906,13 +4906,13 @@ const _sfc_main$17 = defineComponent({
     }
   }
 });
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["iflex", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$T]]);
-const _sfc_main$16 = defineComponent({
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$O]]);
+const _sfc_main$17 = defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
   props: {
@@ -4959,12 +4959,12 @@ const _sfc_main$16 = defineComponent({
     }
   }
 });
-function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["iflex__item", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$S]]);
+const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$N]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -4974,7 +4974,7 @@ function focusError(item) {
   scrollTo(element, window.innerHeight * 0.25);
   focus$1(focusElement2 ? focusElement2 : element);
 }
-const _sfc_main$15 = defineComponent({
+const _sfc_main$16 = defineComponent({
   name: "FErrorList",
   components: {
     FIcon,
@@ -5030,7 +5030,7 @@ const _sfc_main$15 = defineComponent({
     }
   }
 });
-const _hoisted_1$R = {
+const _hoisted_1$S = {
   class: "error-list"
 };
 const _hoisted_2$C = {
@@ -5043,11 +5043,11 @@ const _hoisted_4$p = ["onClick"];
 const _hoisted_5$k = {
   class: "error-list__link"
 };
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_i_flex_item = resolveComponent("i-flex-item");
   const _component_i_flex = resolveComponent("i-flex");
-  return openBlock(), createElementBlock("div", _hoisted_1$R, [createVNode(_component_i_flex, null, {
+  return openBlock(), createElementBlock("div", _hoisted_1$S, [createVNode(_component_i_flex, null, {
     default: withCtx(() => [_ctx.hasTitleSlot ? (openBlock(), createBlock(_component_i_flex_item, {
       key: 0,
       shrink: ""
@@ -5097,7 +5097,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })]);
 }
-const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$R]]);
+const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$M]]);
 var es_iterator_every = {};
 var hasRequiredEs_iterator_every;
 function requireEs_iterator_every() {
@@ -5185,7 +5185,7 @@ function cleanUpElements(vm) {
     }, 0);
   });
 }
-const _sfc_main$14 = defineComponent({
+const _sfc_main$15 = defineComponent({
   name: "FValidationGroup",
   props: {
     /**
@@ -5255,19 +5255,19 @@ const _sfc_main$14 = defineComponent({
     }
   }
 });
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     onComponentValidity: _cache[0] || (_cache[0] = (...args) => _ctx.onComponentValidity && _ctx.onComponentValidity(...args)),
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$Q]]);
+const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["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 = defineComponent({
+const _sfc_main$14 = defineComponent({
   name: "FValidationForm",
   components: {
     FValidationGroup,
@@ -5406,14 +5406,14 @@ const _sfc_main$13 = defineComponent({
     }
   }
 });
-const _hoisted_1$Q = ["id"];
+const _hoisted_1$R = ["id"];
 const _hoisted_2$B = {
   key: 0,
   ref: "errors",
   tabindex: "-1",
   role: "group"
 };
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_error_list = resolveComponent("f-error-list");
   const _component_f_validation_group = resolveComponent("f-validation-group");
   return openBlock(), createBlock(_component_f_validation_group, {
@@ -5435,12 +5435,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     }, {
       title: withCtx(() => [renderSlot(_ctx.$slots, "error-message")]),
       _: 3
-    }, 8, ["items", "bullets", "before-navigate"])], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$Q)]),
+    }, 8, ["items", "bullets", "before-navigate"])], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$R)]),
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$P]]);
-const _sfc_main$12 = defineComponent({
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$K]]);
+const _sfc_main$13 = defineComponent({
   name: "FFormModal",
   components: {
     FModal,
@@ -5589,7 +5589,7 @@ const _sfc_main$12 = defineComponent({
     }
   }
 });
-const _hoisted_1$P = {
+const _hoisted_1$Q = {
   class: "button-group"
 };
 const _hoisted_2$A = ["type", "form", "onClick"];
@@ -5597,7 +5597,7 @@ const _hoisted_3$t = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_validation_form = resolveComponent("f-validation-form");
   const _component_f_modal = resolveComponent("f-modal");
   return openBlock(), createBlock(_component_f_modal, {
@@ -5621,7 +5621,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
       default: withCtx(() => [_cache[0] || (_cache[0] = createTextVNode()), renderSlot(_ctx.$slots, "input-text-fields")]),
       _: 3
     }, 8, ["id", "before-submit", "before-validation", "use-error-list", "onSubmit", "onCancel"])]),
-    footer: withCtx(() => [createElementVNode("div", _hoisted_1$P, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.preparedButtons, (button) => {
+    footer: withCtx(() => [createElementVNode("div", _hoisted_1$Q, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.preparedButtons, (button) => {
       return openBlock(), createElementBlock("button", {
         key: button.label,
         type: button.buttonType,
@@ -5633,7 +5633,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
 }
-const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$O]]);
+const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$J]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -5993,7 +5993,7 @@ const ErrorPlugin = {
     }
   }
 };
-const _sfc_main$11 = defineComponent({
+const _sfc_main$12 = defineComponent({
   name: "FErrorPage",
   props: {
     payload: {
@@ -6003,16 +6003,16 @@ const _sfc_main$11 = defineComponent({
     }
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$P = {
   "data-test": "f-error-page"
 };
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$O, _cache[0] || (_cache[0] = [createElementVNode("h1", null, "Fel", -1), createTextVNode(), createElementVNode("p", null, "Ett fel har uppstått.", -1), createTextVNode(), createElementVNode("a", {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$P, _cache[0] || (_cache[0] = [createElementVNode("h1", null, "Fel", -1), createTextVNode(), createElementVNode("p", null, "Ett fel har uppstått.", -1), createTextVNode(), createElementVNode("a", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$N]]);
-const _sfc_main$10 = defineComponent({
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$I]]);
+const _sfc_main$11 = defineComponent({
   name: "FErrorHandlingApp",
   props: {
     defaultComponent: {
@@ -6041,7 +6041,7 @@ const _sfc_main$10 = defineComponent({
     });
   }
 });
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", null, [_ctx.hasError ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.errorComponent), {
     key: 0,
     payload: _ctx.payload
@@ -6051,7 +6051,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   })]);
 }
-const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$M]]);
+const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$H]]);
 function isMonthBefore(date, minDate) {
   return Boolean(minDate && date.isBefore(minDate.startOfMonth()));
 }
@@ -6092,7 +6092,7 @@ function getMessage($t2, date, minDate, maxDate) {
     });
   }
 }
-const _sfc_main$$ = defineComponent({
+const _sfc_main$10 = defineComponent({
   name: "ICalendarNavbar",
   components: {
     FIcon
@@ -6205,7 +6205,7 @@ const _sfc_main$$ = defineComponent({
     }
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$O = {
   class: "calendar-navbar"
 };
 const _hoisted_2$z = {
@@ -6220,9 +6220,9 @@ const _hoisted_5$j = ["aria-disabled", "aria-live"];
 const _hoisted_6$f = {
   class: "sr-only"
 };
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$N, [createElementVNode("div", _hoisted_2$z, toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("button", {
+  return openBlock(), createElementBlock("div", _hoisted_1$O, [createElementVNode("div", _hoisted_2$z, toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("button", {
     ref: "previousButton",
     class: "calendar-navbar__arrow calendar-navbar__arrow--previous",
     type: "button",
@@ -6244,14 +6244,14 @@ function _sfc_render$L(_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$L]]);
+const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["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$_ = defineComponent({
+const _sfc_main$$ = defineComponent({
   name: "ICalendarMonthGrid",
   props: {
     /**
@@ -6325,7 +6325,7 @@ const _sfc_main$_ = defineComponent({
     }
   }
 });
-const _hoisted_1$M = ["aria-label"];
+const _hoisted_1$N = ["aria-label"];
 const _hoisted_2$y = {
   key: 0,
   class: "calendar-month__col--week"
@@ -6338,23 +6338,26 @@ const _hoisted_3$r = {
 };
 const _hoisted_4$n = ["title"];
 const _hoisted_5$i = {
+  key: 1
+};
+const _hoisted_6$e = {
   key: 0,
   class: "calendar-month__cell calendar-month__cell--week-number",
   "aria-hidden": "true"
 };
-const _hoisted_6$e = ["colspan"];
 const _hoisted_7$c = ["colspan"];
-const _hoisted_8$7 = {
+const _hoisted_8$7 = ["colspan"];
+const _hoisted_9$5 = {
   key: 0,
   "aria-hidden": "true"
 };
-const _hoisted_9$5 = ["colspan"];
-const _hoisted_10$3 = {
+const _hoisted_10$3 = ["colspan"];
+const _hoisted_11$2 = {
   key: 1,
   "aria-hidden": "true"
 };
-const _hoisted_11$2 = ["colspan"];
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_12$2 = ["colspan"];
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("table", {
     class: "calendar-month__table",
     role: "grid",
@@ -6379,19 +6382,20 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     return openBlock(), createElementBlock("th", {
       key: weekday.name,
       scope: "col",
+      "aria-hidden": "true",
       class: "calendar-month__header-cell"
-    }, [createElementVNode("abbr", {
+    }, [_ctx.showShortWeekdays ? (openBlock(), createElementBlock("abbr", {
+      key: 0,
       title: weekday.name
-    }, toDisplayString(_ctx.showShortWeekdays ? weekday.shortName : weekday.name), 9, _hoisted_4$n)]);
+    }, toDisplayString(weekday.shortName), 9, _hoisted_4$n)) : (openBlock(), createElementBlock("span", _hoisted_5$i, toDisplayString(weekday.name), 1))]);
   }), 128))])]), _cache[23] || (_cache[23] = createTextVNode()), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weeks, (week) => {
     return openBlock(), createElementBlock("tr", {
       key: week.week
-    }, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("td", _hoisted_5$i, toDisplayString(week.week), 1)) : createCommentVNode("", true), _cache[17] || (_cache[17] = createTextVNode()), _ctx.getDayStartOffset(week.days) ? (openBlock(), createElementBlock("td", {
+    }, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("td", _hoisted_6$e, toDisplayString(week.week), 1)) : createCommentVNode("", true), _cache[17] || (_cache[17] = createTextVNode()), _ctx.getDayStartOffset(week.days) ? (openBlock(), createElementBlock("td", {
       key: 1,
       class: "calendar-month__cell",
-      colspan: _ctx.getDayStartOffset(week.days),
-      "aria-hidden": "true"
-    }, null, 8, _hoisted_6$e)) : createCommentVNode("", true), _cache[18] || (_cache[18] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day) => {
+      colspan: _ctx.getDayStartOffset(week.days)
+    }, null, 8, _hoisted_7$c)) : createCommentVNode("", true), _cache[18] || (_cache[18] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(week.days, (day) => {
       return openBlock(), createElementBlock("td", {
         key: day.toString(),
         class: "calendar-month__cell",
@@ -6405,18 +6409,18 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
       class: "calendar-month__cell",
       colspan: _ctx.getDayEndOffset(week.days),
       "aria-hidden": "true"
-    }, null, 8, _hoisted_7$c)) : createCommentVNode("", true)]);
-  }), 128)), _cache[20] || (_cache[20] = createTextVNode()), _ctx.weeks.length < 5 ? (openBlock(), createElementBlock("tr", _hoisted_8$7, [createElementVNode("td", {
+    }, null, 8, _hoisted_8$7)) : createCommentVNode("", true)]);
+  }), 128)), _cache[20] || (_cache[20] = createTextVNode()), _ctx.weeks.length < 5 ? (openBlock(), createElementBlock("tr", _hoisted_9$5, [createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_9$5)])) : createCommentVNode("", true), _cache[21] || (_cache[21] = createTextVNode()), _ctx.weeks.length < 6 ? (openBlock(), createElementBlock("tr", _hoisted_10$3, [createElementVNode("td", {
+  }, null, 8, _hoisted_10$3)])) : createCommentVNode("", true), _cache[21] || (_cache[21] = createTextVNode()), _ctx.weeks.length < 6 ? (openBlock(), createElementBlock("tr", _hoisted_11$2, [createElementVNode("td", {
     class: "calendar-month__cell",
     colspan: _ctx.totalCols,
     "aria-hidden": "true"
-  }, null, 8, _hoisted_11$2)])) : createCommentVNode("", true)])], 40, _hoisted_1$M);
+  }, null, 8, _hoisted_12$2)])) : createCommentVNode("", true)])], 40, _hoisted_1$N);
 }
-const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$K]]);
+const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$F]]);
 const DayStep = {
   ArrowRight: 1,
   ArrowLeft: -1,
@@ -6440,7 +6444,7 @@ function getDayTabindex(date, active, entry) {
     return date.day === 1 ? 0 : -1;
   }
 }
-const _sfc_main$Z = defineComponent({
+const _sfc_main$_ = defineComponent({
   name: "ICalendarMonth",
   components: {
     ICalendarMonthGrid
@@ -6530,8 +6534,8 @@ const _sfc_main$Z = defineComponent({
     }
   }
 });
-const _hoisted_1$L = ["data-date", "tabindex", "onClick", "onKeydown"];
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$M = ["data-date", "tabindex", "onClick", "onKeydown"];
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_month_grid = resolveComponent("i-calendar-month-grid");
   return openBlock(), createBlock(_component_i_calendar_month_grid, {
     value: _ctx.modelValue
@@ -6550,12 +6554,12 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     }, [renderSlot(_ctx.$slots, "default", {
       date,
       isFocused: _ctx.isDayFocused(date)
-    })], 40, _hoisted_1$L)]),
+    })], 40, _hoisted_1$M)]),
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$J]]);
-const _sfc_main$Y = defineComponent({
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$E]]);
+const _sfc_main$Z = defineComponent({
   name: "FCalendar",
   components: {
     ICalendarNavbar,
@@ -6606,13 +6610,13 @@ const _sfc_main$Y = defineComponent({
     }
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$L = {
   class: "calendar__wrapper"
 };
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_navbar = resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = resolveComponent("i-calendar-month");
-  return openBlock(), createElementBlock("div", _hoisted_1$K, [createVNode(_component_i_calendar_navbar, {
+  return openBlock(), createElementBlock("div", _hoisted_1$L, [createVNode(_component_i_calendar_navbar, {
     "model-value": _ctx.modelValue,
     "min-date": _ctx.minDate,
     "max-date": _ctx.maxDate,
@@ -6635,7 +6639,7 @@ function _sfc_render$I(_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$I]]);
+const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$D]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -6654,7 +6658,7 @@ function getCalendarDaySrText(day, enabled, selected, t) {
   parts.push(day.toString(DateFormat.FULL));
   return parts.join(" ");
 }
-const _sfc_main$X = defineComponent({
+const _sfc_main$Y = defineComponent({
   name: "FCalendarDay",
   mixins: [TranslationMixin],
   props: {
@@ -6719,18 +6723,18 @@ const _sfc_main$X = defineComponent({
     }
   }
 });
-const _hoisted_1$J = {
+const _hoisted_1$K = {
   "aria-hidden": "true"
 };
 const _hoisted_2$x = {
   class: "sr-only"
 };
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", {
     class: normalizeClass(_ctx.dayClasses)
-  }, [createElementVNode("span", _hoisted_1$J, toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$x, toDisplayString(_ctx.srText), 1)], 2);
+  }, [createElementVNode("span", _hoisted_1$K, toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$x, toDisplayString(_ctx.srText), 1)], 2);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$H]]);
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$C]]);
 function useEventListener(target, event, callback) {
   onMounted(() => {
     var _a;
@@ -6744,14 +6748,14 @@ function useEventListener(target, event, callback) {
 function useSlotUtils() {
   const $slots = useSlots();
   return {
-    hasSlot(name) {
+    hasSlot(...args) {
       return hasSlot({
         $slots
-      }, name);
+      }, ...args);
     }
   };
 }
-const _hoisted_1$I = ["id"];
+const _hoisted_1$J = ["id"];
 const _hoisted_2$w = {
   key: 0,
   class: "card__header"
@@ -6763,7 +6767,7 @@ const _hoisted_4$m = {
   key: 1,
   class: "card__footer"
 };
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "FCard",
   props: {
     /**
@@ -6849,11 +6853,11 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
       })) : createCommentVNode("", true)]), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$q, [renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = createTextVNode()), hasFooterSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4$m, [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
         hasError: hasError.value,
         validationMessage: validationMessage.value
-      })))])) : createCommentVNode("", true)], 42, _hoisted_1$I);
+      })))])) : createCommentVNode("", true)], 42, _hoisted_1$J);
     };
   }
 });
-const _sfc_main$V = defineComponent({
+const _sfc_main$W = defineComponent({
   name: "FExpand",
   data() {
     return {
@@ -6907,7 +6911,7 @@ const _sfc_main$V = defineComponent({
     }
   }
 });
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, {
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -6919,7 +6923,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
-const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$G]]);
+const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$B]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -7204,7 +7208,7 @@ function isTeleportDisabled(options) {
   }
   return disableTeleport;
 }
-const _sfc_main$U = defineComponent({
+const _sfc_main$V = defineComponent({
   name: "IPopup",
   inheritAttrs: false,
   props: {
@@ -7485,7 +7489,7 @@ const _sfc_main$U = defineComponent({
     }
   }
 });
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.isOpen ? (openBlock(), createBlock(Teleport, {
     key: 0,
     to: _ctx.teleportTarget,
@@ -7506,7 +7510,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : createCommentVNode("", true);
 }
-const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$F]]);
+const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$A]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -7570,7 +7574,7 @@ function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   }
 }
 const POPUP_SPACING = 10;
-const _sfc_main$T = defineComponent({
+const _sfc_main$U = defineComponent({
   name: "IPopupError",
   components: {
     FIcon
@@ -7621,6 +7625,9 @@ const _sfc_main$T = defineComponent({
     },
     errorStyle() {
       return `--i-popup-error-offset: ${this.arrowOffset}px`;
+    },
+    teleportTarget() {
+      return config.teleportTarget;
     }
   },
   watch: {
@@ -7705,21 +7712,21 @@ const _sfc_main$T = defineComponent({
     }
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$I = {
   ref: "wrapper",
   class: "popup-error__wrapper"
 };
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return _ctx.isOpen ? (openBlock(), createBlock(Teleport, {
     key: 0,
-    to: "body",
+    to: _ctx.teleportTarget,
     disabled: _ctx.teleportDisabled
   }, [createElementVNode("div", {
     ref: "popup",
     class: normalizeClass(_ctx.popupClasses),
     "aria-hidden": "true"
-  }, [createElementVNode("div", _hoisted_1$H, [createElementVNode("div", {
+  }, [createElementVNode("div", _hoisted_1$I, [createElementVNode("div", {
     class: normalizeClass(_ctx.arrowClass),
     style: normalizeStyle(_ctx.errorStyle)
   }, [createElementVNode("span", null, toDisplayString(_ctx.errorMessage), 1), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("button", {
@@ -7731,9 +7738,9 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createVNode(_component_f_icon, {
     name: "close",
     class: "button__icon"
-  })])], 6)], 512)], 2)], 8, ["disabled"])) : createCommentVNode("", true);
+  })])], 6)], 512)], 2)], 8, ["to", "disabled"])) : createCommentVNode("", true);
 }
-const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$E]]);
+const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$z]]);
 function numItems(itemHeight, availableHeight, verticalSpacing) {
   const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
   return Math.min(itemsFit, 7);
@@ -7800,12 +7807,12 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
   }
   return void 0;
 }
-const _hoisted_1$G = ["onKeyup"];
+const _hoisted_1$H = ["onKeyup"];
 const _hoisted_2$v = {
   ref: "content"
 };
 const teleportDisabled = false;
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "IPopupListbox",
   props: {
     isOpen: {
@@ -7910,7 +7917,11 @@ const _sfc_main$S = /* @__PURE__ */ 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";
@@ -7922,7 +7933,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         verticalSpacing
       });
       if (rect) {
-        var _offsetRect$x;
+        var _offsetRect$x, _offsetRect$top;
         const {
           top,
           left,
@@ -7931,7 +7942,8 @@ const _sfc_main$S = /* @__PURE__ */ 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`;
@@ -7954,7 +7966,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         onKeyup: withKeys(withModifiers(onKeyEsc, ["stop"]), ["esc"]),
         onClick: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["stop"]))
-      }), [createElementVNode("div", _hoisted_2$v, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$G)], 512)], 8, ["to"])) : createCommentVNode("", true);
+      }), [createElementVNode("div", _hoisted_2$v, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$H)], 512)], 8, ["to"])) : createCommentVNode("", true);
     };
   }
 });
@@ -7998,7 +8010,7 @@ async function doMenuAction$2(action, target) {
   }
 }
 const preventKeys$2 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter"];
-const _sfc_main$R = defineComponent({
+const _sfc_main$S = defineComponent({
   name: "IPopupMenu",
   components: {
     IPopup
@@ -8253,7 +8265,7 @@ const _sfc_main$R = defineComponent({
     }
   }
 });
-const _hoisted_1$F = ["aria-label"];
+const _hoisted_1$G = ["aria-label"];
 const _hoisted_2$u = {
   role: "menu",
   class: "ipopupmenu__list"
@@ -8264,7 +8276,7 @@ const _hoisted_5$h = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_popup = resolveComponent("i-popup");
   return openBlock(), createBlock(_component_i_popup, {
     class: "ipopupmenu",
@@ -8296,17 +8308,17 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
         target: item.target,
         tabindex: "0"
       }, [_ctx.isSelected(index) ? (openBlock(), createElementBlock("span", _hoisted_5$h, [createElementVNode("span", null, toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
-    }), 128))])], 8, _hoisted_1$F)]),
+    }), 128))])], 8, _hoisted_1$G)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
 }
-const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$D]]);
+const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["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 = defineComponent({
+const _sfc_main$R = defineComponent({
   name: "IAnimateExpand",
   props: {
     /**
@@ -8498,19 +8510,19 @@ const _sfc_main$Q = defineComponent({
     }
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$F = {
   key: 0,
   ref: "content",
   "data-test": "animation-content"
 };
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.animationClasses),
     style: normalizeStyle(_ctx.heightStyle)
-  }, [_ctx.shouldVIf ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$E, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.shouldVShow]]) : createCommentVNode("", true)], 6);
+  }, [_ctx.shouldVIf ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$F, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.shouldVShow]]) : createCommentVNode("", true)], 6);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$C]]);
-const _sfc_main$P = defineComponent({
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$x]]);
+const _sfc_main$Q = defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
   props: {
@@ -8524,14 +8536,14 @@ const _sfc_main$P = defineComponent({
     }
   }
 });
-const _hoisted_1$D = ["href"];
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$E = ["href"];
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
-  }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$D);
+  }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$E);
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$B]]);
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$w]]);
 function filterOptions(options, filter2, selectMode) {
   if (isEmpty(filter2) || selectMode) {
     return options;
@@ -8777,12 +8789,12 @@ function useCombobox(inputRef, options, onOptionSelected) {
     }
   }
 }
-const _hoisted_1$C = {
+const _hoisted_1$D = {
   class: "combobox"
 };
 const _hoisted_2$t = ["id"];
 const _hoisted_3$o = ["id", "aria-selected", "onClick"];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "IComboboxDropdown",
   props: {
     id: {},
@@ -8819,7 +8831,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$C, [createVNode(unref(_sfc_main$S), {
+      return openBlock(), createElementBlock("div", _hoisted_1$D, [createVNode(unref(_sfc_main$T), {
         "is-open": _ctx.isOpen,
         anchor: _ctx.inputNode,
         "num-of-items": _ctx.options.length,
@@ -8850,8 +8862,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$B = ["aria-label"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_1$C = ["aria-label"];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "IComboboxToggleButton",
   emits: ["toggle"],
   setup(__props, {
@@ -8870,7 +8882,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       }, [createVNode(unref(FIcon), {
         name: "arrow-down",
         class: "text-field__icon"
-      })], 8, _hoisted_1$B);
+      })], 8, _hoisted_1$C);
     };
   }
 });
@@ -8972,7 +8984,7 @@ function useHorizontalOffset(options) {
     }, 0);
   }
 }
-const _sfc_main$M = defineComponent({
+const _sfc_main$N = defineComponent({
   name: "FTooltip",
   components: {
     FExpand,
@@ -9131,7 +9143,7 @@ const _sfc_main$M = defineComponent({
     }
   }
 });
-const _hoisted_1$A = ["aria-expanded"];
+const _hoisted_1$B = ["aria-expanded"];
 const _hoisted_2$s = {
   class: "icon-stack icon-stack--tooltip"
 };
@@ -9149,7 +9161,7 @@ const _hoisted_5$g = {
 const _hoisted_6$d = {
   class: "tooltip__footer"
 };
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock(Fragment, null, [(openBlock(), createBlock(Teleport, {
     disabled: _ctx.iconTarget === null,
@@ -9164,7 +9176,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     name: "circle"
   }), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_f_icon, {
     name: "i"
-  }), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("span", _hoisted_3$n, toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$A)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("div", mergeProps({
+  }), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("span", _hoisted_3$n, toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$B)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("div", mergeProps({
     ref: "wrapper",
     class: "tooltip"
   }, _ctx.$attrs), [_ctx.ready ? (openBlock(), createElementBlock("div", _hoisted_4$k, [_ctx.hasHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.headerTag), {
@@ -9182,7 +9194,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])])])) : createCommentVNode("", true)], 16)], 64);
 }
-const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$A]]);
+const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$v]]);
 function* labelClasses(options) {
   const {
     labelClass
@@ -9223,7 +9235,7 @@ function isEqual(a, b) {
   }
   return a.every((_, i) => a[i] === b[i]);
 }
-const _sfc_main$L = defineComponent({
+const _sfc_main$M = defineComponent({
   name: "FFieldset",
   components: {
     FIcon
@@ -9451,7 +9463,7 @@ const _sfc_main$L = defineComponent({
     }
   }
 });
-const _hoisted_1$z = ["id"];
+const _hoisted_1$A = ["id"];
 const _hoisted_2$r = {
   key: 0,
   class: "sr-only"
@@ -9483,7 +9495,7 @@ const _hoisted_9$4 = {
   key: 0,
   class: "label__message label__message--error"
 };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("fieldset", {
     id: _ctx.id,
@@ -9518,11 +9530,11 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     name: "error"
   }), createTextVNode(" " + toDisplayString(_ctx.validity.validationMessage), 1)])) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), _cache[9] || (_cache[9] = createTextVNode()), createElementVNode("div", {
     class: normalizeClass(_ctx.groupContentClass)
-  }, [renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$z);
+  }, [renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$A);
 }
-const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$z]]);
+const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$u]]);
 const anyType$1 = [String, Object, Array, Number, Date, Boolean];
-const _sfc_main$K = defineComponent({
+const _sfc_main$L = defineComponent({
   name: "FCheckboxField",
   inheritAttrs: false,
   props: {
@@ -9708,7 +9720,7 @@ const _sfc_main$K = defineComponent({
     }
   }
 });
-const _hoisted_1$y = ["id", "disabled"];
+const _hoisted_1$z = ["id", "disabled"];
 const _hoisted_2$q = ["for"];
 const _hoisted_3$l = {
   key: 0,
@@ -9718,7 +9730,7 @@ const _hoisted_4$i = {
   key: 0,
   class: "checkbox__details"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["checkbox", _ctx.disabledClass]),
     onValidity: _cache[2] || (_cache[2] = (...args) => _ctx.onValidity && _ctx.onValidity(...args))
@@ -9731,7 +9743,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.disabled,
     onKeydown: _cache[0] || (_cache[0] = 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] = createTextVNode()), createElementVNode("label", {
+  }), null, 16, _hoisted_1$z), _cache[9] || (_cache[9] = createTextVNode()), createElementVNode("label", {
     class: normalizeClass(_ctx.$slots.details ? "checkbox__label checkbox__width" : "checkbox__label"),
     for: _ctx.id
   }, [renderSlot(_ctx.$slots, "default"), _cache[8] || (_cache[8] = createTextVNode()), _ctx.$slots.details ? (openBlock(), createElementBlock(Fragment, {
@@ -9748,7 +9760,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)], 10, _hoisted_2$q)], 34);
 }
-const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$y]]);
+const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$t]]);
 var es_iterator_some = {};
 var hasRequiredEs_iterator_some;
 function requireEs_iterator_some() {
@@ -9827,7 +9839,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 = defineComponent({
+const _sfc_main$K = defineComponent({
   name: "FContextMenu",
   components: {
     IPopup,
@@ -9991,7 +10003,7 @@ const _sfc_main$J = defineComponent({
     }
   }
 });
-const _hoisted_1$x = ["aria-label"];
+const _hoisted_1$y = ["aria-label"];
 const _hoisted_2$p = {
   ref: "contextmenu",
   role: "menu",
@@ -10004,7 +10016,7 @@ const _hoisted_5$e = {
   key: 0,
   class: "contextmenu__separator"
 };
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_i_popup = resolveComponent("i-popup");
   return openBlock(), createBlock(_component_i_popup, {
@@ -10040,11 +10052,11 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
         ref_for: true,
         ref: "anchors"
       }, toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (openBlock(), createElementBlock("hr", _hoisted_5$e)) : createCommentVNode("", true)], 8, _hoisted_3$k);
-    }), 128))], 512)], 40, _hoisted_1$x)]),
+    }), 128))], 512)], 40, _hoisted_1$y)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element"]);
 }
-const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$x]]);
+const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$s]]);
 var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["ADD"] = 0] = "ADD";
   Operation2[Operation2["DELETE"] = 1] = "DELETE";
@@ -10052,30 +10064,14 @@ var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["NONE"] = 3] = "NONE";
   return Operation2;
 })(Operation || {});
-const _sfc_main$I = defineComponent({
-  name: "FCrudDataset",
-  components: {
-    FFormModal,
-    FConfirmModal,
-    FIcon
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      delete: (item) => {
-        this.deleteItem(item);
-      },
-      modify: (item) => {
-        this.updateItem(item);
-      },
-      registerCallbackAfterItemAdd: (callback) => {
-        this.callbackAfterItemAdd = callback;
-      },
-      registerCallbackBeforeItemDelete: (callback) => {
-        this.callbackBeforeItemDelete = callback;
-      }
-    };
-  },
+const _hoisted_1$x = {
+  class: "crud-dataset"
+};
+const _hoisted_2$o = {
+  key: 0
+};
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
+  __name: "FCrudDataset",
   props: {
     /**
      * The list of items that should be deleted, modified or added to.
@@ -10159,25 +10155,24 @@ const _sfc_main$I = defineComponent({
     }
   },
   emits: ["created", "deleted", "updated", "update:modelValue"],
-  data() {
-    return {
-      result: [],
-      Operation,
-      operation: Operation.NONE,
-      item: null,
-      originalItemToUpdate: null,
-      isFormModalOpen: false,
-      isConfirmModalOpen: false,
-      callbackAfterItemAdd() {
-      },
-      callbackBeforeItemDelete() {
-      }
-    };
-  },
-  computed: {
-    formModalButtons() {
-      const confirmButtonText = this.operation === Operation.ADD ? this.$t("fkui.crud-dataset.modal.confirm.add", "Lägg till") : this.$t("fkui.crud-dataset.modal.confirm.modify", "Spara");
-      const cancelButtonText = this.operation === Operation.ADD ? this.$t("fkui.crud-dataset.modal.cancel.add", "Avbryt") : this.$t("fkui.crud-dataset.modal.cancel.modify", "Avbryt");
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const slots = useSlots();
+    const result = ref([]);
+    const operation = ref(Operation.NONE);
+    const item = ref(null);
+    const originalItemToUpdate = ref(null);
+    const isFormModalOpen = ref(false);
+    const isConfirmModalOpen = ref(false);
+    const callbackAfterItemAdd = ref(() => ({}));
+    const callbackBeforeItemDelete = ref(() => ({}));
+    const props = __props;
+    const emit = __emit;
+    const formModalButtons = computed(() => {
+      const confirmButtonText = operation.value === Operation.ADD ? $t2("fkui.crud-dataset.modal.confirm.add", "Lägg till") : $t2("fkui.crud-dataset.modal.confirm.modify", "Spara");
+      const cancelButtonText = operation.value === Operation.ADD ? $t2("fkui.crud-dataset.modal.cancel.add", "Avbryt") : $t2("fkui.crud-dataset.modal.cancel.modify", "Avbryt");
       return [{
         label: confirmButtonText,
         event: "confirm",
@@ -10189,182 +10184,175 @@ const _sfc_main$I = defineComponent({
         type: "secondary",
         submitButton: false
       }];
-    },
-    confirmDeleteButtons() {
+    });
+    const confirmDeleteButtons = computed(() => {
       return [{
-        label: this.$t("fkui.crud-dataset.modal.confirm.delete", "Ja, ta bort"),
+        label: $t2("fkui.crud-dataset.modal.confirm.delete", "Ja, ta bort"),
         type: "primary",
         event: "confirm"
       }, {
-        label: this.$t("fkui.crud-dataset.modal.cancel.delete", "Nej, avbryt"),
+        label: $t2("fkui.crud-dataset.modal.cancel.delete", "Nej, avbryt"),
         type: "secondary"
       }];
-    },
-    hasAddSlot() {
-      return Boolean(this.$slots.add);
-    },
-    hasDeleteSlot() {
-      return Boolean(this.$slots.delete);
-    },
-    hasModifySlot() {
-      return Boolean(this.$slots.modify);
-    },
-    formModalHeader() {
-      return this.operation === Operation.ADD ? this.addNewModalHeader : this.modifyModalHeader;
-    }
-  },
-  watch: {
-    modelValue: {
-      immediate: true,
-      deep: true,
-      handler(data) {
-        this.result = [...data];
+    });
+    const hasAddSlot = computed(() => {
+      return Boolean(slots.add);
+    });
+    const hasDeleteSlot = computed(() => {
+      return Boolean(slots.delete);
+    });
+    const hasModifySlot = computed(() => {
+      return Boolean(slots.modify);
+    });
+    const formModalHeader = computed(() => {
+      return operation.value === Operation.ADD ? props.addNewModalHeader : props.modifyModalHeader;
+    });
+    provide("delete", deleteItem);
+    provide("modify", updateItem);
+    provide("registerCallbackAfterItemAdd", (callback) => {
+      callbackAfterItemAdd.value = callback;
+    });
+    provide("registerCallbackBeforeItemDelete", (callback) => {
+      callbackBeforeItemDelete.value = callback;
+    });
+    onMounted(() => {
+      if (!hasAddSlot.value && !hasDeleteSlot.value && !hasModifySlot.value) {
+        throw Error("At least one template of the following must be defined. #add, #delete or #modify");
       }
-    }
-  },
-  mounted() {
-    if (!this.hasAddSlot && !this.hasDeleteSlot && !this.hasModifySlot) {
-      throw Error("Atleast one template of the following must be defined. #add, #delete or #modify");
-    }
-  },
-  methods: {
-    createItem() {
-      if (!this.hasAddSlot) {
+    });
+    watch(() => props.modelValue, (data) => {
+      result.value = [...data];
+    }, {
+      immediate: true,
+      deep: true
+    });
+    function createItem() {
+      if (!hasAddSlot.value) {
         throw Error("No template is defined for #add");
       }
-      this.operation = Operation.ADD;
-      this.item = this.beforeCreate ? this.beforeCreate() : {};
-      this.isFormModalOpen = true;
-    },
-    deleteItem(item) {
-      if (!this.hasDeleteSlot) {
+      operation.value = Operation.ADD;
+      item.value = props.beforeCreate ? props.beforeCreate() : {};
+      isFormModalOpen.value = true;
+    }
+    function deleteItem(current) {
+      if (!hasDeleteSlot.value) {
         throw Error("No template is defined for #delete");
       }
-      this.operation = Operation.DELETE;
-      this.item = item;
-      this.isConfirmModalOpen = true;
-    },
-    onDeleteConfirm() {
-      if (!this.item) {
+      operation.value = Operation.DELETE;
+      item.value = current;
+      isConfirmModalOpen.value = true;
+    }
+    function onDeleteConfirm() {
+      if (!item.value) {
         return;
       }
-      this.callbackBeforeItemDelete(this.item);
-      this.result = this.result.filter((item) => item !== this.item);
-      this.$emit("deleted", this.item);
-      this.$emit("update:modelValue", this.result);
-      alertScreenReader(this.$t("fkui.crud-dataset.aria-live.delete", "Raden har tagits bort"), {
+      callbackBeforeItemDelete.value(item.value);
+      result.value = result.value.filter((it) => it !== item.value);
+      emit("deleted", item.value);
+      emit("update:modelValue", result.value);
+      alertScreenReader($t2("fkui.crud-dataset.aria-live.delete", "Raden har tagits bort"), {
         assertive: true
       });
-    },
-    onDeleteClose(e) {
-      this.onModalClose();
-      if (e.reason === "close" && this.onCancel) {
-        this.onCancel();
+    }
+    function onDeleteClose(e) {
+      onModalClose();
+      if (e.reason === "close" && props.onCancel) {
+        props.onCancel();
       }
-    },
-    onModalClose() {
-      this.isFormModalOpen = false;
-      this.isConfirmModalOpen = false;
-    },
-    onFormModalSubmit() {
-      if (!this.item) {
+    }
+    function onModalClose() {
+      isFormModalOpen.value = false;
+      isConfirmModalOpen.value = false;
+    }
+    function onFormModalSubmit() {
+      if (!item.value) {
         return;
       }
-      if (this.operation === Operation.ADD) {
-        this.result.push(this.item);
-        this.$emit("created", this.item);
-        this.$emit("update:modelValue", this.result);
-        this.callbackAfterItemAdd(this.item);
-        alertScreenReader(this.$t("fkui.crud-dataset.aria-live.add", "En rad har lagts till"), {
+      if (operation.value === Operation.ADD) {
+        result.value.push(item.value);
+        emit("created", item.value);
+        emit("update:modelValue", result.value);
+        callbackAfterItemAdd.value(item.value);
+        alertScreenReader($t2("fkui.crud-dataset.aria-live.add", "En rad har lagts till"), {
           assertive: true
         });
-      } else if (this.operation === Operation.MODIFY) {
-        if (this.originalItemToUpdate) {
-          Object.assign(this.originalItemToUpdate, this.item);
+      } else if (operation.value === Operation.MODIFY) {
+        if (originalItemToUpdate.value) {
+          Object.assign(originalItemToUpdate.value, item.value);
         } else {
-          this.originalItemToUpdate = this.item;
+          originalItemToUpdate.value = item.value;
         }
-        this.$emit("updated", this.originalItemToUpdate);
-        this.$emit("update:modelValue", this.result);
-        alertScreenReader(this.$t("fkui.crud-dataset.aria-live.modify", "Raden har ändrats"), {
+        emit("updated", originalItemToUpdate.value);
+        emit("update:modelValue", result.value);
+        alertScreenReader($t2("fkui.crud-dataset.aria-live.modify", "Raden har ändrats"), {
           assertive: true
         });
       }
-      this.isFormModalOpen = false;
-    },
-    updateItem(item) {
-      if (!this.hasModifySlot) {
+      isFormModalOpen.value = false;
+    }
+    function updateItem(current) {
+      if (!hasModifySlot.value) {
         throw Error("No template is defined for #modify");
       }
-      this.operation = Operation.MODIFY;
-      this.originalItemToUpdate = item;
-      this.item = deepClone(item);
-      this.isFormModalOpen = true;
+      operation.value = Operation.MODIFY;
+      originalItemToUpdate.value = current;
+      item.value = deepClone(current);
+      isFormModalOpen.value = true;
     }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), hasAddSlot.value ? (openBlock(), createElementBlock("div", _hoisted_2$o, [createElementVNode("button", {
+        "data-test": "f-crud-dataset-add-button",
+        type: "button",
+        class: "button button--tertiary crud-dataset__add-button",
+        onClick: _cache[0] || (_cache[0] = ($event) => createItem())
+      }, [createVNode(unref(FIcon), {
+        class: "button__icon",
+        name: "plus"
+      }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "add-button", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), createVNode(unref(FFormModal), {
+        "is-open": isFormModalOpen.value,
+        "aria-close-text": unref($t2)("fkui.crud-dataset.modal.close", "Stäng"),
+        buttons: formModalButtons.value,
+        "use-error-list": false,
+        "before-submit": __props.beforeSubmit,
+        "before-validation": __props.beforeValidation,
+        "on-cancel": __props.onCancel,
+        onClose: onModalClose,
+        onCancel: __props.onCancel,
+        onSubmit: onFormModalSubmit
+      }, {
+        header: withCtx(() => [createTextVNode(toDisplayString(formModalHeader.value), 1)]),
+        "input-text-fields": withCtx(() => [operation.value === unref(Operation).ADD ? renderSlot(_ctx.$slots, "add", normalizeProps(mergeProps({
+          key: 0
+        }, {
+          item: item.value
+        }))) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), operation.value === unref(Operation).MODIFY ? renderSlot(_ctx.$slots, "modify", normalizeProps(mergeProps({
+          key: 1
+        }, {
+          item: item.value
+        }))) : createCommentVNode("", true)]),
+        _: 3
+      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[7] || (_cache[7] = createTextVNode()), createVNode(unref(FConfirmModal), {
+        "is-open": isConfirmModalOpen.value,
+        buttons: confirmDeleteButtons.value,
+        onConfirm: onDeleteConfirm,
+        onClose: onDeleteClose
+      }, {
+        heading: withCtx(() => [createTextVNode(toDisplayString(__props.deleteModalHeader), 1)]),
+        content: withCtx(() => [renderSlot(_ctx.$slots, "delete", normalizeProps(guardReactiveProps({
+          item: item.value
+        })))]),
+        _: 3
+      }, 8, ["is-open", "buttons"])]);
+    };
   }
 });
-const _hoisted_1$w = {
-  class: "crud-dataset"
-};
-const _hoisted_2$o = {
-  key: 0
-};
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_icon = resolveComponent("f-icon");
-  const _component_f_form_modal = resolveComponent("f-form-modal");
-  const _component_f_confirm_modal = resolveComponent("f-confirm-modal");
-  return openBlock(), createElementBlock("div", _hoisted_1$w, [renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), _ctx.hasAddSlot ? (openBlock(), createElementBlock("div", _hoisted_2$o, [createElementVNode("button", {
-    "data-test": "f-crud-dataset-add-button",
-    type: "button",
-    class: "button button--tertiary crud-dataset__add-button",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.createItem())
-  }, [createVNode(_component_f_icon, {
-    class: "button__icon",
-    name: "plus"
-  }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "add-button", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), createVNode(_component_f_form_modal, {
-    "is-open": _ctx.isFormModalOpen,
-    "aria-close-text": _ctx.$t("fkui.crud-dataset.modal.close", "Stäng"),
-    buttons: _ctx.formModalButtons,
-    "use-error-list": false,
-    "before-submit": _ctx.beforeSubmit,
-    "before-validation": _ctx.beforeValidation,
-    "on-cancel": _ctx.onCancel,
-    onClose: _ctx.onModalClose,
-    onCancel: _ctx.onCancel,
-    onSubmit: _ctx.onFormModalSubmit
-  }, {
-    header: withCtx(() => [createTextVNode(toDisplayString(_ctx.formModalHeader), 1)]),
-    "input-text-fields": withCtx(() => [_ctx.operation === _ctx.Operation.ADD ? renderSlot(_ctx.$slots, "add", normalizeProps(mergeProps({
-      key: 0
-    }, {
-      item: _ctx.item
-    }))) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _ctx.operation === _ctx.Operation.MODIFY ? renderSlot(_ctx.$slots, "modify", normalizeProps(mergeProps({
-      key: 1
-    }, {
-      item: _ctx.item
-    }))) : createCommentVNode("", true)]),
-    _: 3
-  }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onClose", "onCancel", "onSubmit"]), _cache[7] || (_cache[7] = createTextVNode()), createVNode(_component_f_confirm_modal, {
-    "is-open": _ctx.isConfirmModalOpen,
-    buttons: _ctx.confirmDeleteButtons,
-    onConfirm: _ctx.onDeleteConfirm,
-    onClose: _ctx.onDeleteClose
-  }, {
-    heading: withCtx(() => [createTextVNode(toDisplayString(_ctx.deleteModalHeader), 1)]),
-    content: withCtx(() => [renderSlot(_ctx.$slots, "delete", normalizeProps(guardReactiveProps({
-      item: _ctx.item
-    })))]),
-    _: 3
-  }, 8, ["is-open", "buttons", "onConfirm", "onClose"])]);
-}
-const FCrudDataset = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$w]]);
 function FCrudDatasetInjected() {
   return {
     delete: inject("delete"),
     modify: inject("modify")
   };
 }
-const _sfc_main$H = defineComponent({
+const _sfc_main$I = defineComponent({
   name: "FCrudButton",
   components: {
     FIcon
@@ -10420,11 +10408,11 @@ const _sfc_main$H = defineComponent({
     }
   }
 });
-const _hoisted_1$v = {
+const _hoisted_1$w = {
   key: 1,
   class: "sr-only"
 };
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("button", {
     type: "button",
@@ -10434,11 +10422,11 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     class: "button__icon",
     name: _ctx.iconName
-  }, null, 8, ["name"])) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), !_ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$v, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.buttonText), 1)])])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _ctx.label ? renderSlot(_ctx.$slots, "default", {
+  }, null, 8, ["name"])) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), !_ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$w, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.buttonText), 1)])])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _ctx.label ? renderSlot(_ctx.$slots, "default", {
     key: 2
   }, () => [createTextVNode(toDisplayString(_ctx.buttonText), 1)]) : createCommentVNode("", true)]);
 }
-const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$v]]);
+const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$r]]);
 function ActivateItemInjected() {
   return {
     registerCallbackAfterItemAdd: inject("registerCallbackAfterItemAdd", () => void 0),
@@ -10522,7 +10510,7 @@ function FTableInjected() {
     renderColumns: inject("renderColumns", false)
   };
 }
-const _sfc_main$G = defineComponent({
+const _sfc_main$H = defineComponent({
   name: "FTableColumn",
   inheritAttrs: false,
   props: {
@@ -10663,7 +10651,7 @@ const _sfc_main$G = defineComponent({
     });
   }
 });
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.renderColumns && _ctx.visible ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), mergeProps({
     key: 0,
     class: _ctx.classes,
@@ -10675,7 +10663,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["class", "scope"])) : createCommentVNode("", true);
 }
-const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$u]]);
+const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: inject("sort", () => void 0),
@@ -10683,7 +10671,7 @@ function FSortFilterDatasetInjected() {
     registerCallbackOnMount: inject("registerCallbackOnMount", () => void 0)
   };
 }
-const _sfc_main$F = defineComponent({
+const _sfc_main$G = defineComponent({
   name: "FLabel",
   components: {
     FIcon
@@ -10722,7 +10710,7 @@ const _sfc_main$F = defineComponent({
     }
   }
 });
-const _hoisted_1$u = {
+const _hoisted_1$v = {
   key: 0
 };
 const _hoisted_2$n = {
@@ -10740,9 +10728,9 @@ const _hoisted_7$a = {
   key: 0,
   class: "label__message label__message--error"
 };
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return _ctx.$slots.tooltip ? (openBlock(), createElementBlock("div", _hoisted_1$u, [_ctx.hasDefaultSlot ? (openBlock(), createElementBlock("div", _hoisted_2$n, [createElementVNode("label", {
+  return _ctx.$slots.tooltip ? (openBlock(), createElementBlock("div", _hoisted_1$v, [_ctx.hasDefaultSlot ? (openBlock(), createElementBlock("div", _hoisted_2$n, [createElementVNode("label", {
     class: "label",
     for: _ctx.forProperty
   }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$j)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (openBlock(), createElementBlock("label", {
@@ -10767,11 +10755,11 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     name: "error"
   }), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "error-message")])) : createCommentVNode("", true)], 8, _hoisted_6$b));
 }
-const FLabel = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$t]]);
+const FLabel = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["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 = defineComponent({
+const _sfc_main$F = defineComponent({
   name: "FSelectField",
   components: {
     FIcon,
@@ -10902,8 +10890,8 @@ const _sfc_main$E = defineComponent({
     }
   }
 });
-const _hoisted_1$t = ["id"];
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$u = ["id"];
+function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = resolveComponent("f-label");
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("div", {
@@ -10940,7 +10928,7 @@ function _sfc_render$s(_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), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$t), [[vModelSelect, _ctx.vModel]]), _cache[5] || (_cache[5] = createTextVNode()), _ctx.hasError && _ctx.textFieldTableMode ? (openBlock(), createBlock(_component_f_icon, {
+  }, _ctx.attrs), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$u), [[vModelSelect, _ctx.vModel]]), _cache[5] || (_cache[5] = createTextVNode()), _ctx.hasError && _ctx.textFieldTableMode ? (openBlock(), createBlock(_component_f_icon, {
     key: 0,
     ref: "icon",
     class: "text-field__icon input-icon select-field__error-popup-icon",
@@ -10950,7 +10938,7 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-down"
   })], 2)], 34);
 }
-const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$s]]);
+const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$o]]);
 function resolveWidthClass(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
@@ -10994,14 +10982,14 @@ function useTextFieldSetup(props) {
     closeDropdown
   };
 }
-const _sfc_main$D = defineComponent({
+const _sfc_main$E = defineComponent({
   name: "FTextField",
   components: {
     FLabel,
     FIcon,
     IPopupError,
-    IComboboxDropdown: _sfc_main$O,
-    IComboboxToggleButton: _sfc_main$N
+    IComboboxDropdown: _sfc_main$P,
+    IComboboxToggleButton: _sfc_main$O
   },
   inheritAttrs: false,
   props: {
@@ -11332,7 +11320,7 @@ const _sfc_main$D = defineComponent({
     }
   }
 });
-const _hoisted_1$s = {
+const _hoisted_1$t = {
   key: 0
 };
 const _hoisted_2$m = {
@@ -11355,7 +11343,7 @@ const _hoisted_7$9 = {
   key: 3,
   class: "text-field__append-inner"
 };
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = resolveComponent("f-label");
   const _component_f_icon = resolveComponent("f-icon");
   const _component_i_popup_error = resolveComponent("i-popup-error");
@@ -11369,7 +11357,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id,
     class: normalizeClass(_ctx.labelClass)
   }, createSlots({
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [_ctx.defaultText !== "" ? (openBlock(), createElementBlock("span", _hoisted_1$s, toDisplayString(_ctx.defaultText), 1)) : createCommentVNode("", true)])]),
+    default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [_ctx.defaultText !== "" ? (openBlock(), createElementBlock("span", _hoisted_1$t, toDisplayString(_ctx.defaultText), 1)) : createCommentVNode("", true)])]),
     description: withCtx(({
       descriptionClass,
       formatDescriptionClass
@@ -11438,8 +11426,8 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     onClose: _ctx.onDropdownClose
   }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node", "onSelect", "onClose"])) : createCommentVNode("", true)], 2);
 }
-const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$r]]);
-const _sfc_main$C = defineComponent({
+const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$n]]);
+const _sfc_main$D = defineComponent({
   name: "FEmailTextField",
   components: {
     FTextField
@@ -11555,10 +11543,10 @@ const _sfc_main$C = defineComponent({
     }
   }
 });
-const _hoisted_1$r = {
+const _hoisted_1$s = {
   key: 0
 };
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_text_field = resolveComponent("f-text-field");
   return openBlock(), createElementBlock("div", null, [createVNode(_component_f_text_field, mergeProps({
     id: _ctx.id,
@@ -11572,7 +11560,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     onValidity: _ctx.onValidity,
     onPendingValidity: _ctx.onPendingValidity
   }), {
-    "error-message": withCtx(() => [_ctx.showPasteErrorMessage ? (openBlock(), createElementBlock("span", _hoisted_1$r, toDisplayString(_ctx.pasteErrorText), 1)) : createCommentVNode("", true)]),
+    "error-message": withCtx(() => [_ctx.showPasteErrorMessage ? (openBlock(), createElementBlock("span", _hoisted_1$s, toDisplayString(_ctx.pasteErrorText), 1)) : createCommentVNode("", true)]),
     default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.defaultText), 1)]), _cache[2] || (_cache[2] = createTextVNode())]),
     _: 3
   }, 16, ["id", "maxlength", "model-value", "onChange", "onBlur", "onUpdate:modelValue", "onValidity", "onPendingValidity"]), _cache[3] || (_cache[3] = createTextVNode()), _ctx.extendedValidation ? (openBlock(), createBlock(_component_f_text_field, {
@@ -11588,8 +11576,8 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue", "maxlength", "onPaste"])) : createCommentVNode("", true)]);
 }
-const FEmailTextField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$q]]);
-const _sfc_main$B = defineComponent({
+const FEmailTextField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$m]]);
+const _sfc_main$C = defineComponent({
   name: "FPhoneTextField",
   components: {
     FTextField
@@ -11689,7 +11677,7 @@ const _sfc_main$B = defineComponent({
     }
   }
 });
-function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_text_field = resolveComponent("f-text-field");
   return openBlock(), createElementBlock("div", null, [createVNode(_component_f_text_field, mergeProps({
     id: _ctx.id,
@@ -11716,8 +11704,8 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue", "maxlength"])) : createCommentVNode("", true)]);
 }
-const FPhoneTextField = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$p]]);
-const _sfc_main$A = defineComponent({
+const FPhoneTextField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$l]]);
+const _sfc_main$B = defineComponent({
   name: "FCurrencyTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11752,7 +11740,7 @@ const _sfc_main$A = defineComponent({
     ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$z = defineComponent({
+const _sfc_main$A = defineComponent({
   name: "FSearchTextField",
   components: {
     FTextField,
@@ -11812,10 +11800,10 @@ const _sfc_main$z = defineComponent({
     }
   }
 });
-const _hoisted_1$q = {
+const _hoisted_1$r = {
   class: "sr-only"
 };
-function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_f_text_field = resolveComponent("f-text-field");
   return openBlock(), createElementBlock("div", null, [createVNode(_component_f_text_field, mergeProps({
@@ -11861,12 +11849,12 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createVNode(_component_f_icon, {
       name: "cross",
       class: "clear-button__icon"
-    }), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("span", _hoisted_1$q, toDisplayString(_ctx.clearableScreenReaderText), 1)])]),
+    }), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("span", _hoisted_1$r, 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$o]]);
-const _sfc_main$y = defineComponent({
+const FSearchTextField = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$k]]);
+const _sfc_main$z = defineComponent({
   name: "FBankAccountNumberTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11895,7 +11883,7 @@ const _sfc_main$y = defineComponent({
     ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$x = defineComponent({
+const _sfc_main$y = defineComponent({
   name: "FBankgiroTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11927,7 +11915,7 @@ const _sfc_main$x = defineComponent({
     ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$w = defineComponent({
+const _sfc_main$x = defineComponent({
   name: "FClearingnumberTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -11959,7 +11947,7 @@ const _sfc_main$w = defineComponent({
 function defaultFormatter$1(modelValue) {
   return formatNumber(modelValue, this.decimals);
 }
-const _sfc_main$v = defineComponent({
+const _sfc_main$w = defineComponent({
   name: "FNumericTextField",
   extends: FTextField,
   props: {
@@ -11996,7 +11984,7 @@ const _sfc_main$v = defineComponent({
     ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$u = defineComponent({
+const _sfc_main$v = defineComponent({
   name: "FPersonnummerTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12036,7 +12024,7 @@ const _sfc_main$u = defineComponent({
     ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$t = defineComponent({
+const _sfc_main$u = defineComponent({
   name: "FPlusgiroTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12068,7 +12056,7 @@ const _sfc_main$t = defineComponent({
     ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$s = defineComponent({
+const _sfc_main$t = defineComponent({
   name: "FPostalCodeTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12105,7 +12093,7 @@ const _sfc_main$s = defineComponent({
 function defaultFormatter(modelValue) {
   return formatPercent(modelValue, this.decimals);
 }
-const _sfc_main$r = defineComponent({
+const _sfc_main$s = defineComponent({
   name: "FPercentTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12153,7 +12141,7 @@ const _sfc_main$r = defineComponent({
     ValidationService.validateElement(inputElement);
   }
 });
-const _sfc_main$q = defineComponent({
+const _sfc_main$r = defineComponent({
   name: "FOrganisationsnummerTextField",
   extends: FTextField,
   mixins: [TranslationMixin],
@@ -12261,39 +12249,28 @@ function filter(list, filterAttributes, searchString) {
   const searchTerms = searchString.split(/\s+/).map((word) => word.toLocaleLowerCase());
   return list.filter((item) => includesAllSearchTerms(item, filterAttributes, searchTerms));
 }
-const _sfc_main$p = defineComponent({
-  name: "FSortFilterDataset",
-  components: {
-    FSelectField,
-    FTextField,
-    FIcon,
-    IFlex,
-    IFlexItem
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      sort: (attribute, ascending) => {
-        const foundAttribute = this.sortOrders.find((item) => item.attribute === attribute && item.ascending === ascending);
-        if (foundAttribute) {
-          this.sortAttribute = foundAttribute;
-        } else {
-          this.sortAttribute = {
-            attribute: "",
-            ascending: false
-          };
-        }
-        this.sortFilterData();
-        this.$emit("usedSortAttributes", this.sortAttribute);
-      },
-      registerCallbackOnSort: (callback) => {
-        this.tableCallbackOnSort = callback;
-      },
-      registerCallbackOnMount: (callback) => {
-        this.tableCallbackSortableColumns = callback;
-      }
-    };
-  },
+const _hoisted_1$q = {
+  class: "sort-filter-dataset"
+};
+const _hoisted_2$l = {
+  class: "sort-filter-dataset__search"
+};
+const _hoisted_3$h = {
+  class: "sr-only"
+};
+const _hoisted_4$e = ["title"];
+const _hoisted_5$b = {
+  class: "sr-only"
+};
+const _hoisted_6$9 = {
+  value: {
+    attribute: "",
+    ascending: false
+  }
+};
+const _hoisted_7$8 = ["value"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "FSortFilterDataset",
   props: {
     /**
      * The data that you wish to sort or filter.
@@ -12342,7 +12319,7 @@ const _sfc_main$p = defineComponent({
     placeholderFilter: {
       type: String,
       required: false,
-      default: TranslationMixin.methods.$t("fkui.sort-filter-dataset.placeholder.filter", "Sök")
+      default: TranslationService.provider.translate("fkui.sort-filter-dataset.placeholder.filter", "Sök")
     },
     /**
      * The order the data will be sorted by if defaultSortAttribute has been set.
@@ -12354,243 +12331,237 @@ const _sfc_main$p = defineComponent({
     }
   },
   emits: ["datasetSorted", "usedSortAttributes"],
-  data() {
-    return {
-      searchString: "",
-      sortAttribute: {
-        attribute: "",
-        ascending: false
-      },
-      sortFilterResult: [],
-      tableCallbackOnSort: () => {
-        return;
-      },
-      tableCallbackSortableColumns: () => {
-        return;
-      }
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const searchString = ref("");
+    const sortAttribute = ref({
+      attribute: "",
+      name: "",
+      ascendingName: "",
+      ascending: false,
+      id: 0
+    });
+    const sortFilterResult = ref([]);
+    const debouncedFilterResultset = debounce(filterResultset, 250);
+    let tableCallbackOnSort = () => {
     };
-  },
-  computed: {
-    showClearButton() {
-      return this.searchString.length > 0;
-    },
-    sortOrders() {
+    let tableCallbackSortableColumns = () => {
+    };
+    const props = __props;
+    const emit = __emit;
+    const showClearButton = computed(() => {
+      return searchString.value.length > 0;
+    });
+    const sortOrders = computed(() => {
       const arr = [];
       let id = 0;
-      Object.keys(this.sortableAttributes).forEach((key) => {
+      Object.keys(props.sortableAttributes).forEach((key) => {
         arr.push({
           attribute: key,
-          name: this.sortableAttributes[key],
-          ascendingName: this.$t("fkui.sort-filter-dataset.label.ascending", "stigande"),
+          name: props.sortableAttributes[key],
+          ascendingName: $t2("fkui.sort-filter-dataset.label.ascending", "stigande"),
           ascending: true,
           id: id++
         });
         arr.push({
           attribute: key,
-          name: this.sortableAttributes[key],
-          ascendingName: this.$t("fkui.sort-filter-dataset.label.descending", "fallande"),
+          name: props.sortableAttributes[key],
+          ascendingName: $t2("fkui.sort-filter-dataset.label.descending", "fallande"),
           ascending: false,
           id: id++
         });
       });
       return arr;
-    },
-    filterAttributes() {
-      return Object.keys(this.sortableAttributes);
-    }
-  },
-  watch: {
-    data: {
-      immediate: true,
-      deep: true,
-      handler: function() {
-        if (this.defaultSortAttribute !== "") {
-          const foundAttribute = this.sortOrders.find((item) => item.attribute === this.defaultSortAttribute && item.ascending === this.defaultSortAscending);
-          if (foundAttribute) {
-            this.sortAttribute = foundAttribute;
-          }
+    });
+    const filterAttributes = computed(() => {
+      return Object.keys(props.sortableAttributes);
+    });
+    provide("sort", (attribute, ascending) => {
+      const foundAttribute = sortOrders.value.find((item) => {
+        return item.attribute === attribute && item.ascending === ascending;
+      });
+      if (foundAttribute) {
+        sortAttribute.value = foundAttribute;
+      } else {
+        sortAttribute.value = {
+          attribute: "",
+          ascending: false
+        };
+      }
+      sortFilterData();
+      emit("usedSortAttributes", sortAttribute.value);
+    });
+    provide("registerCallbackOnSort", (callback) => {
+      tableCallbackOnSort = callback;
+    });
+    provide("registerCallbackOnMount", (callback) => {
+      tableCallbackSortableColumns = callback;
+    });
+    onMounted(() => {
+      tableCallbackSortableColumns(Object.keys(props.sortableAttributes));
+    });
+    watch(() => props.data, () => {
+      if (props.defaultSortAttribute !== "") {
+        const foundAttribute = sortOrders.value.find((item) => {
+          return item.attribute === props.defaultSortAttribute && item.ascending === props.defaultSortAscending;
+        });
+        if (foundAttribute) {
+          sortAttribute.value = foundAttribute;
         }
-        this.sortFilterData();
       }
-    }
-  },
-  created() {
-    this.debouncedFilterResultset = debounce(this.filterResultset, 250).bind(this);
-  },
-  mounted() {
-    this.tableCallbackSortableColumns(Object.keys(this.sortableAttributes));
-  },
-  methods: {
-    sortFilterData() {
-      const filteredData = filter(this.data, this.filterAttributes, this.searchString);
-      if (this.sortAttribute.attribute === "") {
-        this.sortFilterResult = filteredData;
+      sortFilterData();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    function sortFilterData() {
+      const filteredData = filter(props.data, filterAttributes.value, searchString.value);
+      if (sortAttribute.value.attribute === "") {
+        sortFilterResult.value = filteredData;
       } else {
-        this.sortFilterResult = sort([...filteredData], this.sortAttribute.attribute, this.sortAttribute.ascending);
+        sortFilterResult.value = sort([...filteredData], sortAttribute.value.attribute, sortAttribute.value.ascending);
       }
-      this.$nextTick(() => {
-        this.tableCallbackOnSort(this.sortAttribute.attribute, this.sortAttribute.ascending);
+      nextTick(() => {
+        tableCallbackOnSort(sortAttribute.value.attribute, sortAttribute.value.ascending);
       });
-      this.$emit("datasetSorted", this.sortFilterResult);
-    },
-    onChangeSortAttribute() {
-      this.sortFilterData();
-      this.$emit("usedSortAttributes", this.sortAttribute);
-    },
-    onSearchInput(event) {
-      this.searchString = event.target.value;
-      this.debouncedFilterResultset();
-    },
-    onClickClearSearch() {
-      this.searchString = "";
-      this.sortFilterData();
-      const input = this.$el.querySelector(".text-field--inline input");
+      emit("datasetSorted", sortFilterResult.value);
+    }
+    function onChangeSortAttribute() {
+      sortFilterData();
+      emit("usedSortAttributes", sortAttribute.value);
+    }
+    function onSearchInput(event) {
+      searchString.value = event.target.value;
+      debouncedFilterResultset();
+    }
+    function onClickClearSearch() {
+      searchString.value = "";
+      sortFilterData();
+      const input = useTemplateRef("search-field").value;
       focus$1(input);
-    },
-    debouncedFilterResultset() {
-    },
-    filterResultset() {
-      this.sortFilterData();
-      if (this.searchString === "") {
-        alertScreenReader(this.$t("fkui.sort-filter-dataset.aria-live.empty", "Sök redigera Sök tom"));
+    }
+    function filterResultset() {
+      sortFilterData();
+      if (searchString.value === "") {
+        alertScreenReader($t2("fkui.sort-filter-dataset.aria-live.empty", "Sök redigera Sök tom"));
       } else {
-        const searchAriaLive = this.$t("fkui.sort-filter-dataset.aria-live.search", `Din sökning på "{{ search }}" gav {{ result }} träffar.`, {
-          result: this.sortFilterResult.length,
-          search: this.searchString
+        const searchAriaLive = $t2("fkui.sort-filter-dataset.aria-live.search", `Din sökning på "{{ search }}" gav {{ result }} träffar.`, {
+          result: sortFilterResult.value.length,
+          search: searchString.value
         });
         alertScreenReader(searchAriaLive);
       }
     }
-  }
-});
-const _hoisted_1$p = {
-  class: "sort-filter-dataset"
-};
-const _hoisted_2$l = {
-  class: "sort-filter-dataset__search"
-};
-const _hoisted_3$h = {
-  class: "sr-only"
-};
-const _hoisted_4$e = ["title"];
-const _hoisted_5$b = {
-  class: "sr-only"
-};
-const _hoisted_6$9 = {
-  value: {
-    attribute: "",
-    ascending: false
-  }
-};
-const _hoisted_7$8 = ["value"];
-function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_i_flex_item = resolveComponent("i-flex-item");
-  const _component_f_icon = resolveComponent("f-icon");
-  const _component_f_text_field = resolveComponent("f-text-field");
-  const _component_f_select_field = resolveComponent("f-select-field");
-  const _component_i_flex = resolveComponent("i-flex");
-  return openBlock(), createElementBlock("div", _hoisted_1$p, [createVNode(_component_i_flex, {
-    collapse: "",
-    gap: "3x",
-    wrap: ""
-  }, {
-    default: withCtx(() => [createVNode(_component_i_flex_item, {
-      shrink: "",
-      align: "center"
-    }, {
-      default: withCtx(() => [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
-        slotClass: "sort-filter-dataset__toolbar__header"
-      })))]),
-      _: 3
-    }), _cache[9] || (_cache[9] = createTextVNode()), createVNode(_component_i_flex_item, {
-      grow: ""
-    }, {
-      default: withCtx(() => [createVNode(_component_i_flex, {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [createVNode(unref(IFlex), {
         collapse: "",
-        float: "right"
+        gap: "3x",
+        wrap: ""
       }, {
-        default: withCtx(() => [_ctx.showFilter ? (openBlock(), createBlock(_component_i_flex_item, {
-          key: 0,
+        default: withCtx(() => [createVNode(unref(IFlexItem), {
           shrink: "",
           align: "center"
         }, {
-          default: withCtx(() => [createElementVNode("div", _hoisted_2$l, [createVNode(_component_f_icon, {
-            name: "search",
-            class: "sort-filter-dataset__search__magnify-icon"
-          }), _cache[4] || (_cache[4] = createTextVNode()), createVNode(_component_f_text_field, {
-            modelValue: _ctx.searchString,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.searchString = $event),
-            inline: "",
-            placeholder: _ctx.placeholderFilter,
-            maxlength: "64",
-            onInput: _ctx.onSearchInput
-          }, {
-            default: withCtx(() => [createElementVNode("span", _hoisted_3$h, toDisplayString(_ctx.placeholderFilter), 1)]),
-            _: 1
-          }, 8, ["modelValue", "placeholder", "onInput"]), _cache[5] || (_cache[5] = createTextVNode()), _ctx.showClearButton ? (openBlock(), createElementBlock("button", {
-            key: 0,
-            type: "button",
-            class: "button button--discrete sort-filter-dataset__search__close-icon",
-            title: _ctx.$t("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält"),
-            onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClickClearSearch && _ctx.onClickClearSearch(...args))
-          }, [createVNode(_component_f_icon, {
-            name: "close"
-          }), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("span", _hoisted_5$b, toDisplayString(_ctx.$t("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält")), 1)], 8, _hoisted_4$e)) : createCommentVNode("", true)])]),
-          _: 1
-        })) : createCommentVNode("", true), _cache[8] || (_cache[8] = createTextVNode()), _ctx.showSort ? (openBlock(), createBlock(_component_i_flex_item, {
-          key: 1,
-          shrink: "",
-          align: "center"
+          default: withCtx(() => [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
+            slotClass: "sort-filter-dataset__toolbar__header"
+          })))]),
+          _: 3
+        }), _cache[8] || (_cache[8] = createTextVNode()), createVNode(unref(IFlexItem), {
+          grow: ""
         }, {
-          default: withCtx(() => [createVNode(_component_f_select_field, {
-            modelValue: _ctx.sortAttribute,
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.sortAttribute = $event),
-            class: "sort-filter-dataset__sort",
-            inline: "",
-            onChange: _ctx.onChangeSortAttribute
+          default: withCtx(() => [createVNode(unref(IFlex), {
+            collapse: "",
+            float: "right"
           }, {
-            label: withCtx(() => [createTextVNode(toDisplayString(_ctx.$t("fkui.sort-filter-dataset.label.sort", "Sortera på")), 1)]),
-            default: withCtx(() => [_cache[6] || (_cache[6] = createTextVNode()), createElementVNode("option", _hoisted_6$9, toDisplayString(_ctx.$t("fkui.sort-filter-dataset.label.unsorted", "Välj")), 1), _cache[7] || (_cache[7] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortOrders, (sortOrder) => {
-              return openBlock(), createElementBlock("option", {
-                key: sortOrder.id,
-                value: sortOrder
-              }, toDisplayString(sortOrder.name) + " (" + toDisplayString(sortOrder.ascendingName) + ")\n                            ", 9, _hoisted_7$8);
-            }), 128))]),
+            default: withCtx(() => [__props.showFilter ? (openBlock(), createBlock(unref(IFlexItem), {
+              key: 0,
+              shrink: "",
+              align: "center"
+            }, {
+              default: withCtx(() => [createElementVNode("div", _hoisted_2$l, [createVNode(unref(FIcon), {
+                name: "search",
+                class: "sort-filter-dataset__search__magnify-icon"
+              }), _cache[3] || (_cache[3] = createTextVNode()), createVNode(unref(FTextField), {
+                ref: "search-field",
+                modelValue: searchString.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchString.value = $event),
+                inline: "",
+                placeholder: __props.placeholderFilter,
+                maxlength: "64",
+                onInput: onSearchInput
+              }, {
+                default: withCtx(() => [createElementVNode("span", _hoisted_3$h, toDisplayString(__props.placeholderFilter), 1)]),
+                _: 1
+              }, 8, ["modelValue", "placeholder"]), _cache[4] || (_cache[4] = createTextVNode()), showClearButton.value ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: "button button--discrete sort-filter-dataset__search__close-icon",
+                title: unref($t2)("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält"),
+                onClick: onClickClearSearch
+              }, [createVNode(unref(FIcon), {
+                name: "close"
+              }), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("span", _hoisted_5$b, toDisplayString(unref($t2)("fkui.sort-filter-dataset.clear.filter", "Rensa sökfält")), 1)], 8, _hoisted_4$e)) : createCommentVNode("", true)])]),
+              _: 1
+            })) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), __props.showSort ? (openBlock(), createBlock(unref(IFlexItem), {
+              key: 1,
+              shrink: "",
+              align: "center"
+            }, {
+              default: withCtx(() => [createVNode(unref(FSelectField), {
+                modelValue: sortAttribute.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => sortAttribute.value = $event),
+                class: "sort-filter-dataset__sort",
+                inline: "",
+                onChange: onChangeSortAttribute
+              }, {
+                label: withCtx(() => [createTextVNode(toDisplayString(unref($t2)("fkui.sort-filter-dataset.label.sort", "Sortera på")), 1)]),
+                default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode()), createElementVNode("option", _hoisted_6$9, toDisplayString(unref($t2)("fkui.sort-filter-dataset.label.unsorted", "Välj")), 1), _cache[6] || (_cache[6] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(sortOrders.value, (sortOrder) => {
+                  return openBlock(), createElementBlock("option", {
+                    key: sortOrder.id,
+                    value: sortOrder
+                  }, toDisplayString(sortOrder.name) + " (" + toDisplayString(sortOrder.ascendingName) + ")\n                            ", 9, _hoisted_7$8);
+                }), 128))]),
+                _: 1
+              }, 8, ["modelValue"])]),
+              _: 1
+            })) : createCommentVNode("", true)]),
             _: 1
-          }, 8, ["modelValue", "onChange"])]),
+          })]),
           _: 1
-        })) : createCommentVNode("", true)]),
-        _: 1
-      })]),
-      _: 1
-    })]),
-    _: 3
-  }), _cache[10] || (_cache[10] = createTextVNode()), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-    sortFilterResult: _ctx.sortFilterResult
-  })))]);
-}
-const FSortFilterDataset = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$n]]);
-const _sfc_main$o = defineComponent({
-  name: "FDataTable",
-  components: {
-    FIcon
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      addColumn: (column) => {
-        if (column.type === FTableColumnType.ACTION) {
-          throw new Error("Cannot use action column in FDataTable component");
-        }
-        this.columns = addColumn(this.columns, column);
-      },
-      setVisibilityColumn: (id, visible) => {
-        setVisibilityColumn(this.columns, id, visible);
-      },
-      textFieldTableMode: true
+        })]),
+        _: 3
+      }), _cache[9] || (_cache[9] = createTextVNode()), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+        sortFilterResult: sortFilterResult.value
+      })))]);
     };
+  }
+});
+const _hoisted_1$p = ["tabindex"];
+const _hoisted_2$k = {
+  key: 0
+};
+const _hoisted_3$g = {
+  class: "table__row"
+};
+const _hoisted_4$d = ["innerHTML"];
+const _hoisted_5$a = {
+  key: 1,
+  class: "table__column__description"
+};
+const _hoisted_6$8 = {
+  key: 0
+};
+const _hoisted_7$7 = {
+  key: 1
+};
+const _hoisted_8$5 = ["colspan"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
   },
-  inheritAttrs: false,
+  __name: "FDataTable",
   props: {
     /**
      * The rows to be listed.
@@ -12633,67 +12604,80 @@ const _sfc_main$o = defineComponent({
       }
     }
   },
-  setup(props) {
-    provide("renderColumns", computed(() => props.rows.length > 0));
-    return FSortFilterDatasetInjected();
-  },
-  data() {
-    return {
-      columns: []
-    };
-  },
-  computed: {
-    hasCaption() {
-      return hasSlot(this, "caption", {}, {
+  setup(__props) {
+    const $t2 = useTranslate();
+    const {
+      hasSlot: hasSlot2
+    } = useSlotUtils();
+    const {
+      sort: sort2,
+      registerCallbackOnSort,
+      registerCallbackOnMount
+    } = FSortFilterDatasetInjected();
+    const columns = ref([]);
+    const props = __props;
+    const hasCaption = computed(() => {
+      return hasSlot2("caption", {}, {
         stripClasses: []
       });
-    },
-    tableClasses() {
+    });
+    const tableClasses = computed(() => {
       const classes = [];
-      if (this.striped) {
+      if (props.striped) {
         classes.push("table--striped");
       }
       return classes;
-    },
-    isEmpty() {
-      return this.rows.length === 0;
-    },
-    visibleColumns() {
-      return this.columns.filter((col) => col.visible);
-    },
-    wrapperClasses() {
-      return tableScrollClasses(this.scroll);
-    },
-    tabindex() {
-      return this.scroll !== TableScroll.NONE ? 0 : void 0;
-    }
-  },
-  mounted() {
-    this.registerCallbackOnSort(this.callbackOnSort);
-    this.registerCallbackOnMount(this.callbackSortableColumns);
-  },
-  methods: {
-    rowKey(item) {
-      const key = item[this.keyAttribute];
+    });
+    const isEmpty2 = computed(() => {
+      return props.rows.length === 0;
+    });
+    const visibleColumns = computed(() => {
+      return columns.value.filter((col) => col.visible);
+    });
+    const wrapperClasses = computed(() => {
+      return tableScrollClasses(props.scroll);
+    });
+    const tabindex = computed(() => {
+      return props.scroll !== TableScroll.NONE ? 0 : void 0;
+    });
+    provide("addColumn", (column) => {
+      if (column.type === FTableColumnType.ACTION) {
+        throw new Error("Cannot use action column in FDataTable component");
+      }
+      columns.value = addColumn(columns.value, column);
+    });
+    provide("setVisibilityColumn", (id, visible) => {
+      setVisibilityColumn(columns.value, id, visible);
+    });
+    provide("textFieldTableMode", true);
+    provide("renderColumns", computed(() => {
+      return props.rows.length > 0;
+    }));
+    onMounted(() => {
+      registerCallbackOnSort(callbackOnSort);
+      registerCallbackOnMount(callbackSortableColumns);
+    });
+    function rowKey(item) {
+      const key = item[props.keyAttribute];
       if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${this.keyAttribute}]' is missing in row`);
+        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in row`);
       }
       return String(key);
-    },
-    columnClasses(column) {
+    }
+    function columnClasses(column) {
       const classes = ["table__column", `table__column--${column.type}`, column.size];
       if (column.sortable) {
         classes.push("table__column--sortable");
       }
       return classes;
-    },
-    iconClasses(column) {
+    }
+    function iconClasses2(column) {
       return getSortableIconClasses(column);
-    },
-    iconName(column) {
+    }
+    function iconName(column) {
       return getSortableIconName(column);
-    },
-    onClickColumnHeader(column) {
+    }
+    function onClickColumnHeader(column) {
       if (!column.sortable) {
         return;
       }
@@ -12702,81 +12686,60 @@ const _sfc_main$o = defineComponent({
         columnName = "";
         column.sort = FTableColumnSort.UNSORTED;
       }
-      this.sort(columnName, column.sort !== FTableColumnSort.ASCENDING);
-    },
-    callbackOnSort(columnName, ascending) {
-      updateSortOrder(this.columns, columnName, ascending);
-    },
-    callbackSortableColumns(columnNames) {
-      setSortableColumns(this.columns, columnNames);
-    },
-    escapeNewlines(value) {
+      sort2(columnName, column.sort !== FTableColumnSort.ASCENDING);
+    }
+    function callbackOnSort(columnName, ascending) {
+      updateSortOrder(columns.value, columnName, ascending);
+    }
+    function callbackSortableColumns(columnNames) {
+      setSortableColumns(columns.value, columnNames);
+    }
+    function escapeNewlines(value) {
       return value.replace(/\n/g, "<br/>");
     }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(wrapperClasses.value)
+      }, [createElementVNode("table", mergeProps({
+        class: ["table", tableClasses.value],
+        tabindex: tabindex.value
+      }, _ctx.$attrs), [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$k, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("colgroup", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+        return openBlock(), createElementBlock("col", {
+          key: column.id,
+          class: normalizeClass(column.size)
+        }, null, 2);
+      }), 128))]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_3$g, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column) => {
+        return openBlock(), createElementBlock("th", mergeProps({
+          key: column.id,
+          scope: "col",
+          class: columnClasses(column)
+        }, toHandlers(column.sortable ? {
+          click: () => onClickColumnHeader(column)
+        } : {}, true)), [createElementVNode("span", {
+          innerHTML: escapeNewlines(column.title)
+        }, null, 8, _hoisted_4$d), _cache[0] || (_cache[0] = createTextVNode()), column.sortable ? (openBlock(), createBlock(unref(FIcon), {
+          key: 0,
+          class: normalizeClass(iconClasses2(column)),
+          name: iconName(column)
+        }, null, 8, ["class", "name"])) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), column.description ? (openBlock(), createElementBlock("span", _hoisted_5$a, toDisplayString(column.description), 1)) : createCommentVNode("", true)], 16);
+      }), 128))])]), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("tbody", null, [isEmpty2.value && columns.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6$8, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+        row: {}
+      })))])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("tr", _hoisted_7$7, [createElementVNode("td", {
+        class: "table__column table__column--action",
+        colspan: columns.value.length
+      }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row) => {
+        return openBlock(), createElementBlock("tr", {
+          key: rowKey(row),
+          class: "table__row"
+        }, [renderSlot(_ctx.$slots, "default", mergeProps({
+          ref_for: true
+        }, {
+          row
+        }))]);
+      }), 128))])], 16, _hoisted_1$p)], 2);
+    };
   }
 });
-const _hoisted_1$o = ["tabindex"];
-const _hoisted_2$k = {
-  key: 0
-};
-const _hoisted_3$g = {
-  class: "table__row"
-};
-const _hoisted_4$d = ["innerHTML"];
-const _hoisted_5$a = {
-  key: 1,
-  class: "table__column__description"
-};
-const _hoisted_6$8 = {
-  key: 0
-};
-const _hoisted_7$7 = {
-  key: 1
-};
-const _hoisted_8$5 = ["colspan"];
-function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.wrapperClasses)
-  }, [createElementVNode("table", mergeProps({
-    class: ["table", _ctx.tableClasses],
-    tabindex: _ctx.tabindex
-  }, _ctx.$attrs), [_ctx.hasCaption ? (openBlock(), createElementBlock("caption", _hoisted_2$k, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("colgroup", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column) => {
-    return openBlock(), createElementBlock("col", {
-      key: column.id,
-      class: normalizeClass(column.size)
-    }, null, 2);
-  }), 128))]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_3$g, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleColumns, (column) => {
-    return openBlock(), createElementBlock("th", mergeProps({
-      key: column.id,
-      scope: "col",
-      class: _ctx.columnClasses(column)
-    }, toHandlers(column.sortable ? {
-      click: () => _ctx.onClickColumnHeader(column)
-    } : {}, true)), [createElementVNode("span", {
-      innerHTML: _ctx.escapeNewlines(column.title)
-    }, null, 8, _hoisted_4$d), _cache[0] || (_cache[0] = createTextVNode()), column.sortable ? (openBlock(), createBlock(_component_f_icon, {
-      key: 0,
-      class: normalizeClass(_ctx.iconClasses(column)),
-      name: _ctx.iconName(column)
-    }, null, 8, ["class", "name"])) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), column.description ? (openBlock(), createElementBlock("span", _hoisted_5$a, toDisplayString(column.description), 1)) : createCommentVNode("", true)], 16);
-  }), 128))])]), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("tbody", null, [_ctx.isEmpty && _ctx.columns.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6$8, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-    row: {}
-  })))])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _ctx.isEmpty ? (openBlock(), createElementBlock("tr", _hoisted_7$7, [createElementVNode("td", {
-    class: "table__column table__column--action",
-    colspan: _ctx.columns.length
-  }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (row) => {
-    return openBlock(), createElementBlock("tr", {
-      key: _ctx.rowKey(row),
-      class: "table__row"
-    }, [renderSlot(_ctx.$slots, "default", mergeProps({
-      ref_for: true
-    }, {
-      row
-    }))]);
-  }), 128))])], 16, _hoisted_1$o)], 2);
-}
-const FDataTable = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$m]]);
 function isDayEnabled(day, config2) {
   return passesMinDate(day, config2.minDate) && passesMaxDate(day, config2.maxDate) && passesInvalidDates(day, config2.invalidDates) && passesInvalidWeekdays(day, config2.invalidWeekdays);
 }
@@ -12852,7 +12815,7 @@ function getDisplayMonth(minDate, maxDate, selectedDate, initialMonth) {
   }
   return month || FDate.now().startOfMonth();
 }
-const _sfc_main$n = defineComponent({
+const _sfc_main$o = defineComponent({
   name: "FDatepickerField",
   components: {
     FCalendar,
@@ -13110,7 +13073,7 @@ const _sfc_main$n = defineComponent({
     }
   }
 });
-const _hoisted_1$n = {
+const _hoisted_1$o = {
   ref: "component",
   class: "datepicker-field"
 };
@@ -13121,13 +13084,13 @@ const _hoisted_3$f = {
 const _hoisted_4$c = {
   class: "datepicker-field__close"
 };
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_f_text_field = resolveComponent("f-text-field");
   const _component_f_calendar_day = resolveComponent("f-calendar-day");
   const _component_f_calendar = resolveComponent("f-calendar");
   const _component_i_popup = resolveComponent("i-popup");
-  return openBlock(), createElementBlock("div", _hoisted_1$n, [createElementVNode("div", {
+  return openBlock(), createElementBlock("div", _hoisted_1$o, [createElementVNode("div", {
     ref: "calendarInputs",
     onFocusout: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusoutTextFieldButton && _ctx.onFocusoutTextFieldButton(...args))
   }, [createVNode(_component_f_text_field, mergeProps(_ctx.$attrs, {
@@ -13191,7 +13154,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
       "min-date": _ctx.minDate,
       "max-date": _ctx.maxDate,
       onClick: _ctx.onSelectCalendarDay,
-      onKeyup: withKeys(withModifiers(_ctx.onKeyupEsc, ["stop"]), ["esc", "native"])
+      onKeyup: withKeys(withModifiers(_ctx.onKeyupEsc, ["stop"]), ["esc"])
     }, {
       default: withCtx(({
         date,
@@ -13217,11 +13180,11 @@ function _sfc_render$l(_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$l]]);
+const FDatepickerField = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$j]]);
 function isDialogueTreeEndQuestion(value) {
   return Boolean(value.userData);
 }
-const _sfc_main$m = defineComponent({
+const _sfc_main$n = defineComponent({
   name: "FDialogueTree",
   components: {
     FIcon
@@ -13299,7 +13262,7 @@ const _sfc_main$m = defineComponent({
     }
   }
 });
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   class: "dialogue-tree"
 };
 const _hoisted_2$i = {
@@ -13307,9 +13270,9 @@ const _hoisted_2$i = {
   class: "dialogue-tree__list"
 };
 const _hoisted_3$e = ["onClick"];
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$m, [_ctx.options.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_2$i, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
+  return openBlock(), createElementBlock("div", _hoisted_1$n, [_ctx.options.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_2$i, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
     return openBlock(), createElementBlock("li", {
       key: option.label,
       class: "dialogue-tree__list-item"
@@ -13327,8 +13290,8 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     userData: _ctx.userData
   })))]);
 }
-const FDialogueTree = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$k]]);
-const _sfc_main$l = defineComponent({
+const FDialogueTree = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$i]]);
+const _sfc_main$m = defineComponent({
   name: "FExpandablePanel",
   components: {
     FIcon,
@@ -13402,7 +13365,7 @@ const _sfc_main$l = defineComponent({
     }
   }
 });
-const _hoisted_1$l = ["aria-expanded", "aria-controls"];
+const _hoisted_1$m = ["aria-expanded", "aria-controls"];
 const _hoisted_2$h = {
   class: "expandable-panel__icon"
 };
@@ -13421,7 +13384,7 @@ const _hoisted_8$4 = {
   key: 0,
   class: "expandable-panel__outside"
 };
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_f_expand = resolveComponent("f-expand");
   return openBlock(), createElementBlock("div", {
@@ -13448,7 +13411,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       })
     }, [createElementVNode("span", _hoisted_5$9, toDisplayString(_ctx.screenReaderNotificationText), 1), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_f_icon, {
       name: "bell"
-    })], 8, _hoisted_4$b)) : createCommentVNode("", true)], 16, _hoisted_1$l)]),
+    })], 8, _hoisted_4$b)) : createCommentVNode("", true)], 16, _hoisted_1$m)]),
     _: 3
   })), _cache[6] || (_cache[6] = createTextVNode()), createVNode(_component_f_expand, null, {
     default: withCtx(() => [withDirectives(createElementVNode("div", {
@@ -13458,8 +13421,8 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })], 2);
 }
-const FExpandablePanel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$j]]);
-const _sfc_main$k = defineComponent({
+const FExpandablePanel = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$h]]);
+const _sfc_main$l = defineComponent({
   name: "FExpandableParagraph",
   components: {
     FIcon,
@@ -13541,7 +13504,7 @@ const _sfc_main$k = defineComponent({
     }
   }
 });
-const _hoisted_1$k = ["aria-expanded", "aria-controls"];
+const _hoisted_1$l = ["aria-expanded", "aria-controls"];
 const _hoisted_2$g = {
   class: "expandable-paragraph__icon"
 };
@@ -13560,7 +13523,7 @@ const _hoisted_7$5 = {
   key: 0,
   class: "expandable-paragraph__separator"
 };
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_f_expand = resolveComponent("f-expand");
   return openBlock(), createElementBlock("div", {
@@ -13581,7 +13544,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       name: "dash"
     }), _cache[1] || (_cache[1] = createTextVNode()), createVNode(_component_f_icon, {
       name: "dash"
-    })])]), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "title")], 16, _hoisted_1$k)]),
+    })])]), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "title")], 16, _hoisted_1$l)]),
     _: 3
   }, 8, ["class"])), _cache[3] || (_cache[3] = createTextVNode()), _ctx.hasRelatedSlot ? (openBlock(), createElementBlock("div", _hoisted_4$a, [renderSlot(_ctx.$slots, "related")])) : createCommentVNode("", true)], 2), _cache[5] || (_cache[5] = createTextVNode()), createVNode(_component_f_expand, null, {
     default: withCtx(() => [withDirectives(createElementVNode("div", {
@@ -13591,7 +13554,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })], 2);
 }
-const FExpandableParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$i]]);
+const FExpandableParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$g]]);
 const DEFAULT_ICON = "file";
 const iconMap = {
   "image/*": "pic",
@@ -13600,7 +13563,7 @@ const iconMap = {
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "doc",
   "application/vnd.openxmlformats-officedocument.wordprocessingml.template": "doc"
 };
-const _sfc_main$j = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "FFileItem",
   components: {
     FIcon
@@ -13679,7 +13642,7 @@ const _sfc_main$j = defineComponent({
     }
   }
 });
-const _hoisted_1$j = {
+const _hoisted_1$k = {
   class: "file-item"
 };
 const _hoisted_2$f = {
@@ -13699,9 +13662,9 @@ const _hoisted_7$4 = {
   key: 0,
   class: "file-item__change-info"
 };
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$j, [createElementVNode("div", _hoisted_2$f, [createElementVNode("a", mergeProps({
+  return openBlock(), createElementBlock("div", _hoisted_1$k, [createElementVNode("div", _hoisted_2$f, [createElementVNode("a", mergeProps({
     id: _ctx.id,
     class: "file-item__file-open"
   }, _ctx.$attrs), [createElementVNode("div", _hoisted_4$9, [createVNode(_component_f_icon, {
@@ -13712,8 +13675,8 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     class: "file-item__separator"
   }, null, -1))]);
 }
-const FFileItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$h]]);
-const _sfc_main$i = defineComponent({
+const FFileItem = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$f]]);
+const _sfc_main$j = defineComponent({
   name: "FFileSelector",
   components: {
     FIcon
@@ -13774,14 +13737,14 @@ const _sfc_main$i = defineComponent({
     }
   }
 });
-const _hoisted_1$i = {
+const _hoisted_1$j = {
   class: "file-selector"
 };
 const _hoisted_2$e = ["id", "aria-labelledby", "aria-disabled"];
 const _hoisted_3$a = ["id", "for"];
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$i, [createElementVNode("input", mergeProps({
+  return openBlock(), createElementBlock("div", _hoisted_1$j, [createElementVNode("input", mergeProps({
     id: _ctx.id,
     ref: "file-selector",
     type: "file",
@@ -13800,32 +13763,41 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     name: "paper-clip"
   }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$a)]);
 }
-const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$g]]);
-const keybindings = Object.fromEntries([["Up", focusTrAbove], ["Down", focusTrBelow], ["ArrowUp", focusTrAbove], ["ArrowDown", focusTrBelow], [" ", activateRow], ["Spacebar", activateRow]]);
-function focusTrAbove(current) {
+const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$e]]);
+const keybindings = {
+  Up: focusTrAbove,
+  Down: focusTrBelow,
+  ArrowUp: focusTrAbove,
+  ArrowDown: focusTrBelow,
+  " ": activateRow,
+  Spacebar: activateRow
+};
+function focusTrAbove(table, current) {
+  const tr = table.tr.value;
   if (current > 0) {
-    this.tr[current - 1].focus();
+    tr[current - 1].focus();
   } else {
-    this.tr[this.tr.length - 1].focus();
+    tr[tr.length - 1].focus();
   }
 }
-function focusTrBelow(current) {
-  if (current < this.tr.length - 1) {
-    this.tr[current + 1].focus();
+function focusTrBelow(table, current) {
+  const tr = table.tr.value;
+  if (current < tr.length - 1) {
+    tr[current + 1].focus();
   } else {
-    this.tr[0].focus();
+    tr[0].focus();
   }
 }
-function activateRow(current) {
-  const row = this.rows[current];
-  const element = this.tr[current];
-  this.activate(row, element);
+function activateRow(table, current) {
+  const row = table.rows[current];
+  const element = table.tr.value[current];
+  table.activate(row, element);
 }
-function onKeydown(event, current) {
+function onKeydown(table, event, current) {
   const fn2 = keybindings[event.key];
   if (fn2) {
     event.preventDefault();
-    fn2.call(this, current);
+    fn2(table, current);
   }
 }
 function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit, slots) {
@@ -13889,7 +13861,6 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     return Boolean(expandableRows(row));
   }
   return {
-    expandedRows,
     isExpandableTable,
     hasExpandableSlot,
     toggleExpanded,
@@ -13901,32 +13872,76 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     hasExpandableContent
   };
 }
-function forceRepaintIE11(target) {
-  if (navigator.userAgent.includes("Trident")) {
-    target.style.display = "none";
-    target.offsetHeight;
-    target.style.removeProperty("display");
-  }
-}
-const _sfc_main$h = defineComponent({
-  name: "FInteractiveTable",
-  components: {
-    FCheckboxField,
-    FIcon
-  },
-  mixins: [TranslationMixin],
-  provide() {
-    return {
-      addColumn: (column) => {
-        this.columns = addColumn(this.columns, column);
-      },
-      setVisibilityColumn: (id, visible) => {
-        setVisibilityColumn(this.columns, id, visible);
-      },
-      textFieldTableMode: true
-    };
+const _hoisted_1$i = ["role"];
+const _hoisted_2$d = {
+  key: 0
+};
+const _hoisted_3$9 = {
+  key: 0,
+  class: "table__column--shrink"
+};
+const _hoisted_4$8 = {
+  key: 1,
+  class: "table__column--shrink"
+};
+const _hoisted_5$6 = {
+  class: "table__row"
+};
+const _hoisted_6$4 = {
+  key: 0,
+  scope: "col"
+};
+const _hoisted_7$3 = {
+  class: "sr-only"
+};
+const _hoisted_8$3 = {
+  key: 1,
+  scope: "col"
+};
+const _hoisted_9$3 = {
+  class: "sr-only"
+};
+const _hoisted_10$2 = ["innerHTML"];
+const _hoisted_11$1 = {
+  key: 1,
+  class: "table__column__description"
+};
+const _hoisted_12$1 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
+const _hoisted_13 = {
+  key: 0
+};
+const _hoisted_14 = {
+  key: 0,
+  class: "table__expand-icon"
+};
+const _hoisted_15 = {
+  key: 1,
+  class: "table__column--selectable"
+};
+const _hoisted_16 = {
+  class: "table__input"
+};
+const _hoisted_17 = {
+  key: 0,
+  class: "sr-only"
+};
+const _hoisted_18 = {
+  key: 0,
+  class: "table__column--placeholder"
+};
+const _hoisted_19 = ["colspan"];
+const _hoisted_20 = {
+  key: 0
+};
+const _hoisted_21 = {
+  key: 1
+};
+const _hoisted_22 = ["colspan"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
   },
-  inheritAttrs: false,
+  __name: "FInteractiveTable",
   props: {
     /**
      * The rows to be listed.
@@ -14023,230 +14038,237 @@ const _sfc_main$h = defineComponent({
       default: () => void 0
     }
   },
-  emits: [
-    "change",
-    "click",
-    "unselect",
-    "update:modelValue",
-    "update:active",
-    "select",
-    /**
-     * Emitted when row is expanded.
-     *
-     * @event expand
-     * @param row
-     * @type {ListItem}
-     */
-    "expand",
-    /**
-     * Emitted when row is collapsed.
-     *
-     * @event collapse
-     * @param row
-     * @type {ListItem}
-     */
-    "collapse"
-  ],
-  setup(props, context) {
-    provide("renderColumns", computed(() => props.rows.length > 0));
-    const sortFilterDatasetInjected = FSortFilterDatasetInjected();
-    const activateItemInjected = ActivateItemInjected();
-    const expandableTable = useExpandableTable(props.expandableAttribute, props.keyAttribute, props.expandableDescribedby, context.emit, context.slots);
-    return {
-      ...sortFilterDatasetInjected,
-      ...activateItemInjected,
-      ...expandableTable
-    };
-  },
-  data() {
-    return {
-      activeRow: void 0,
-      columns: [],
-      selectedRows: [],
-      tr: [],
-      tbodyKey: 0
-    };
-  },
-  computed: {
-    hasCaption() {
-      return hasSlot(this, "caption", {}, {
+  emits: ["change", "click", "unselect", "update:modelValue", "update:active", "select", "expand", "collapse"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const slots = useSlots();
+    const {
+      hasSlot: hasSlot2
+    } = useSlotUtils();
+    const {
+      sort: sort2,
+      registerCallbackOnSort,
+      registerCallbackOnMount
+    } = FSortFilterDatasetInjected();
+    const {
+      registerCallbackAfterItemAdd,
+      registerCallbackBeforeItemDelete
+    } = ActivateItemInjected();
+    const activeRow = ref(void 0);
+    const columns = ref([]);
+    const selectedRows = ref([]);
+    const tr = shallowRef([]);
+    const tbodyKey = ref(0);
+    const props = __props;
+    const emit = __emit;
+    const expandableTable = useExpandableTable(props.expandableAttribute, props.keyAttribute, props.expandableDescribedby, emit, slots);
+    const {
+      isExpandableTable,
+      hasExpandableSlot,
+      toggleExpanded,
+      isExpanded,
+      rowAriaExpanded,
+      expandableRowClasses,
+      getExpandableDescribedby,
+      expandableRows,
+      hasExpandableContent
+    } = expandableTable;
+    const hasCaption = computed(() => {
+      return hasSlot2("caption", {}, {
         stripClasses: []
       });
-    },
-    hasCheckboxDescription() {
-      const firstRow = this.rows[0];
-      return hasSlot(this, "checkbox-description", {
+    });
+    const hasCheckboxDescription = computed(() => {
+      const firstRow = props.rows[0];
+      return hasSlot2("checkbox-description", {
         row: firstRow
       });
-    },
-    isEmpty() {
-      return this.rows.length === 0;
-    },
-    visibleColumns() {
-      return this.columns.filter((col) => col.visible);
-    },
-    tableClasses() {
+    });
+    const isEmpty2 = computed(() => {
+      return props.rows.length === 0;
+    });
+    const visibleColumns = computed(() => {
+      return columns.value.filter((col) => col.visible);
+    });
+    const tableClasses = computed(() => {
       const classes = [];
-      if (this.selectable) {
+      if (props.selectable) {
         classes.push("table--selectable");
       }
-      if (this.hover) {
+      if (props.hover) {
         classes.push("table--hover");
       }
       return classes;
-    },
-    tableRole() {
-      return this.isExpandableTable ? "treegrid" : "grid";
-    },
-    wrapperClasses() {
-      return tableScrollClasses(this.scroll);
-    },
-    nbOfColumns() {
-      let columnCount = this.visibleColumns.length;
-      if (this.selectable) {
+    });
+    const tableRole = computed(() => {
+      return isExpandableTable.value ? "treegrid" : "grid";
+    });
+    const wrapperClasses = computed(() => {
+      return tableScrollClasses(props.scroll);
+    });
+    const nbOfColumns = computed(() => {
+      let columnCount = visibleColumns.value.length;
+      if (props.selectable) {
         columnCount++;
       }
-      if (this.isExpandableTable) {
+      if (isExpandableTable.value) {
         columnCount++;
       }
       return columnCount;
-    }
-  },
-  watch: {
-    rows: {
-      immediate: true,
-      deep: true,
-      handler: function() {
-        if (this.modelValue) {
-          this.selectedRows = this.modelValue.filter((row) => {
-            return includeItem(row, this.rows, this.keyAttribute);
-          });
-        }
-      }
-    },
-    active: {
-      immediate: true,
-      handler: function() {
-        this.updateActiveRowFromVModel();
+    });
+    provide("addColumn", (column) => {
+      columns.value = addColumn(columns.value, column);
+    });
+    provide("setVisibilityColumn", (id, visible) => {
+      setVisibilityColumn(columns.value, id, visible);
+    });
+    provide("textFieldTableMode", true);
+    provide("renderColumns", computed(() => props.rows.length > 0));
+    watch(() => props.rows, () => {
+      if (props.modelValue) {
+        selectedRows.value = props.modelValue.filter((row) => {
+          return includeItem(row, props.rows, props.keyAttribute);
+        });
       }
-    },
-    showActive: {
+    }, {
       immediate: true,
-      handler: function(val) {
-        if (!val) {
-          this.tbodyKey ^= 1;
-        }
+      deep: true
+    });
+    watch(() => props.active, () => {
+      updateActiveRowFromVModel();
+    }, {
+      immediate: true
+    });
+    watch(() => props.showActive, (val) => {
+      if (!val) {
+        tbodyKey.value ^= 1;
       }
+    }, {
+      immediate: true
+    });
+    function updateTr(tbodyElement) {
+      const trElements = [].slice.call(tbodyElement.children);
+      const trInteractableElements = trElements.filter((tr2) => {
+        return tr2.tabIndex === 0;
+      });
+      tr.value = trInteractableElements;
     }
-  },
-  updated() {
-    const tbodyElement = this.$refs["tbodyElement"];
-    const trElements = [].slice.call(tbodyElement.children);
-    const trInteractableElements = trElements.filter((tr) => {
-      return tr.tabIndex === 0;
+    onUpdated(() => {
+      const tbodyElement = useTemplateRef("tbodyElement");
+      if (tbodyElement.value) {
+        updateTr(tbodyElement.value);
+      }
     });
-    this.tr = trInteractableElements;
-  },
-  mounted() {
-    this.registerCallbackOnSort(this.callbackOnSort);
-    this.registerCallbackOnMount(this.callbackSortableColumns);
-    this.registerCallbackAfterItemAdd(this.callbackAfterItemAdd);
-    this.registerCallbackBeforeItemDelete(this.callbackBeforeItemDelete);
-  },
-  methods: {
-    isActive(row) {
-      if (!this.showActive) {
-        return false;
+    onMounted(() => {
+      const tbodyElement = useTemplateRef("tbodyElement");
+      if (tbodyElement.value) {
+        updateTr(tbodyElement.value);
+      }
+      registerCallbackOnSort(callbackOnSort);
+      registerCallbackOnMount(callbackSortableColumns);
+      registerCallbackAfterItemAdd(callbackAfterItemAdd);
+      registerCallbackBeforeItemDelete(callbackBeforeItemDelete);
+    });
+    function forceRepaintIE11(target) {
+      if (navigator.userAgent.includes("Trident")) {
+        target.style.display = "none";
+        target.offsetHeight;
+        target.style.removeProperty("display");
       }
-      return itemEquals(row, this.activeRow, this.keyAttribute);
-    },
-    isSelected(row) {
-      return includeItem(row, this.selectedRows, this.keyAttribute);
-    },
-    onKeydownExpandable(event, index) {
-      if (event.key === " " || event.key === "Spacebar") {
-        event.preventDefault();
-        return;
+    }
+    function isActive(row) {
+      if (!props.showActive) {
+        return false;
       }
-      onKeydown.call(this, event, index);
-    },
-    onKeydown(event, index) {
-      onKeydown.call(this, event, index);
-    },
-    onClick(event, row) {
+      return itemEquals(row, activeRow.value, props.keyAttribute);
+    }
+    function isSelected(row) {
+      return includeItem(row, selectedRows.value, props.keyAttribute);
+    }
+    function onKeydown$1(event, index) {
+      onKeydown({
+        rows: props.rows,
+        tr,
+        activate
+      }, event, index);
+    }
+    function onClick(event, row) {
       const {
         target
       } = event;
       const isRelevant = ["TD", "TH"].includes(target.nodeName);
       if (isRelevant) {
         const parent = target.parentElement;
-        this.activate(row, parent);
+        activate(row, parent);
       }
-    },
-    activate(row, tr) {
-      this.$emit("click", row);
-      if (this.isExpandableTable && this.hasExpandableContent(row)) {
-        this.toggleExpanded(row);
+    }
+    function activate(row, tr2) {
+      emit("click", row);
+      if (isExpandableTable.value && hasExpandableContent(row)) {
+        toggleExpanded(row);
       }
-      if (!itemEquals(row, this.activeRow, this.keyAttribute)) {
-        this.$emit("change", row);
-        this.setActiveRow(row);
-        if (tr) {
-          tr.focus();
-          const td = tr.children[0];
+      if (!itemEquals(row, activeRow.value, props.keyAttribute)) {
+        emit("change", row);
+        setActiveRow(row);
+        if (tr2) {
+          tr2.focus();
+          const td = tr2.children[0];
           forceRepaintIE11(td);
         }
       }
-    },
-    rowDescription(row) {
-      const slot = this.$slots["row-description"];
+    }
+    function rowDescription(row) {
+      const slot = slots["row-description"];
       return renderSlotText(slot, {
         row
       });
-    },
-    onSelect(row) {
-      if (includeItem(row, this.selectedRows, this.keyAttribute)) {
-        this.selectedRows = this.selectedRows.filter((i) => !itemEquals(i, row, this.keyAttribute));
-        this.$emit("unselect", row);
+    }
+    function onSelect(row) {
+      var _a, _b;
+      if (includeItem(row, selectedRows.value, props.keyAttribute)) {
+        selectedRows.value = selectedRows.value.filter((i) => !itemEquals(i, row, props.keyAttribute));
+        emit("unselect", row);
       } else {
-        this.selectedRows.push(row);
-        this.$emit("select", row);
+        selectedRows.value.push(row);
+        emit("select", row);
       }
-      this.updateVModelWithSelectedRows();
-      this.$forceUpdate();
-    },
-    updateVModelWithSelectedRows() {
-      if (this.modelValue) {
-        this.$emit("update:modelValue", this.selectedRows);
+      updateVModelWithSelectedRows();
+      (_b = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy) == null ? void 0 : _b.$forceUpdate();
+    }
+    function updateVModelWithSelectedRows() {
+      if (props.modelValue) {
+        emit("update:modelValue", selectedRows.value);
       }
-    },
-    rowClasses(row, index) {
-      const active = this.isActive(row) ? ["table__row--active"] : [];
-      const selected = this.isSelected(row) ? ["table__row--selected"] : [];
-      const isExpandableRow = this.isExpandableTable && this.hasExpandableContent(row);
+    }
+    function rowClasses(row, index) {
+      const active = isActive(row) ? ["table__row--active"] : [];
+      const selected = isSelected(row) ? ["table__row--selected"] : [];
+      const isExpandableRow = isExpandableTable.value && hasExpandableContent(row);
       const expandable = isExpandableRow ? ["table__row--expandable"] : [];
-      const expanded = this.isExpanded(row) ? ["table__row--expanded-border"] : [];
-      const striped = this.striped && index % 2 !== 0 ? ["table__row--striped"] : [];
+      const expanded = isExpanded(row) ? ["table__row--expanded-border"] : [];
+      const striped = props.striped && index % 2 !== 0 ? ["table__row--striped"] : [];
       return ["table__row", ...active, ...selected, ...striped, ...expandable, ...expanded];
-    },
-    rowKey(row) {
-      const key = row[this.keyAttribute];
+    }
+    function rowKey(row) {
+      const key = row[props.keyAttribute];
       if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${this.keyAttribute}]' is missing in row`);
+        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in row`);
       }
       return String(key);
-    },
-    columnClasses(column) {
+    }
+    function columnClasses(column) {
       const sortable = column.sortable ? ["table__column--sortable"] : [];
       return ["table__column", `table__column--${column.type}`, ...sortable, column.size];
-    },
-    iconClasses(column) {
+    }
+    function iconClasses2(column) {
       return getSortableIconClasses(column);
-    },
-    iconName(column) {
+    }
+    function iconName(column) {
       return getSortableIconName(column);
-    },
-    onClickColumnHeader(column) {
+    }
+    function onClickColumnHeader(column) {
       if (!column.sortable) {
         return;
       }
@@ -14255,206 +14277,138 @@ const _sfc_main$h = defineComponent({
         columnName = "";
         column.sort = FTableColumnSort.UNSORTED;
       }
-      this.sort(columnName, column.sort !== FTableColumnSort.ASCENDING);
-    },
-    callbackOnSort(columnName, ascending) {
-      updateSortOrder(this.columns, columnName, ascending);
-    },
-    callbackSortableColumns(columnNames) {
-      setSortableColumns(this.columns, columnNames);
-    },
-    callbackAfterItemAdd(item) {
-      this.activate(item, null);
-    },
-    callbackBeforeItemDelete(item) {
-      if (this.rows.length === 0) {
+      sort2(columnName, column.sort !== FTableColumnSort.ASCENDING);
+    }
+    function callbackOnSort(columnName, ascending) {
+      updateSortOrder(columns.value, columnName, ascending);
+    }
+    function callbackSortableColumns(columnNames) {
+      setSortableColumns(columns.value, columnNames);
+    }
+    function callbackAfterItemAdd(item) {
+      activate(item, null);
+    }
+    function callbackBeforeItemDelete(item) {
+      if (props.rows.length === 0) {
         return;
       }
-      let targetIndex = this.rows.indexOf(item) - 1;
-      if (targetIndex < 0 && this.rows.length > 1) {
+      let targetIndex = props.rows.indexOf(item) - 1;
+      if (targetIndex < 0 && props.rows.length > 1) {
         targetIndex = 1;
       } else if (targetIndex < 0) {
         targetIndex = 0;
       }
-      this.activate(this.rows[targetIndex], this.tr[targetIndex]);
-    },
-    escapeNewlines(value) {
+      activate(props.rows[targetIndex], tr.value[targetIndex]);
+    }
+    function escapeNewlines(value) {
       return value.replace(/\n/g, "<br/>");
-    },
-    updateActiveRowFromVModel() {
-      if (this.active === void 0) {
-        this.setActiveRow(void 0);
-      } else if (!itemEquals(this.active, this.activeRow, this.keyAttribute)) {
-        this.setActiveRow(this.active);
+    }
+    function updateActiveRowFromVModel() {
+      if (props.active === void 0) {
+        setActiveRow(void 0);
+      } else if (!itemEquals(props.active, activeRow.value, props.keyAttribute)) {
+        setActiveRow(props.active);
       }
-    },
-    setActiveRow(row) {
-      this.activeRow = row;
-      this.$emit("update:active", this.activeRow);
     }
+    function setActiveRow(row) {
+      activeRow.value = row;
+      emit("update:active", activeRow.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(wrapperClasses.value)
+      }, [createCommentVNode("", true), _cache[18] || (_cache[18] = createTextVNode()), createElementVNode("table", mergeProps({
+        class: ["table", tableClasses.value],
+        role: tableRole.value
+      }, _ctx.$attrs), [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$d, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("colgroup", null, [unref(isExpandableTable) ? (openBlock(), createElementBlock("col", _hoisted_3$9)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+        return openBlock(), createElementBlock("col", {
+          key: column.id,
+          class: normalizeClass(column.size)
+        }, null, 2);
+      }), 128))]), _cache[16] || (_cache[16] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_5$6, [unref(isExpandableTable) ? (openBlock(), createElementBlock("th", _hoisted_6$4, [createElementVNode("span", _hoisted_7$3, toDisplayString(unref($t2)("fkui.interactive-table.select", "Expandera")), 1)])) : createCommentVNode("", true), _cache[4] || (_cache[4] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_8$3, [createElementVNode("span", _hoisted_9$3, toDisplayString(unref($t2)("fkui.interactive-table.select", "Markera")), 1)])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column) => {
+        return openBlock(), createElementBlock("th", mergeProps({
+          key: column.id,
+          scope: "col",
+          class: columnClasses(column)
+        }, toHandlers(column.sortable ? {
+          click: () => onClickColumnHeader(column)
+        } : {}, true)), [createElementVNode("span", {
+          innerHTML: escapeNewlines(column.title)
+        }, null, 8, _hoisted_10$2), _cache[2] || (_cache[2] = createTextVNode()), column.sortable ? (openBlock(), createBlock(unref(FIcon), {
+          key: 0,
+          class: normalizeClass(iconClasses2(column)),
+          name: iconName(column)
+        }, null, 8, ["class", "name"])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), column.description ? (openBlock(), createElementBlock("span", _hoisted_11$1, toDisplayString(column.description), 1)) : createCommentVNode("", true)], 16);
+      }), 128))])]), _cache[17] || (_cache[17] = createTextVNode()), (openBlock(), createElementBlock("tbody", {
+        ref: "tbodyElement",
+        key: tbodyKey.value
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, index) => {
+        return openBlock(), createElementBlock(Fragment, {
+          key: rowKey(row)
+        }, [createElementVNode("tr", {
+          class: normalizeClass(rowClasses(row, index)),
+          "aria-label": rowDescription(row),
+          "aria-expanded": unref(rowAriaExpanded)(row),
+          "aria-level": unref(isExpandableTable) ? 1 : void 0,
+          "aria-describedby": unref(getExpandableDescribedby)(row),
+          tabindex: "0",
+          onKeydown: withModifiers(($event) => onKeydown$1($event, index), ["self"]),
+          onClick: ($event) => onClick($event, row)
+        }, [unref(isExpandableTable) ? (openBlock(), createElementBlock("td", _hoisted_13, [unref(hasExpandableContent)(row) ? (openBlock(), createElementBlock("div", _hoisted_14, [createVNode(unref(FIcon), {
+          name: "arrow-right",
+          rotate: unref(isExpanded)(row) ? "270" : "90"
+        }, null, 8, ["rotate"])])) : createCommentVNode("", true)])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_15, [createElementVNode("div", _hoisted_16, [createVNode(unref(FCheckboxField), {
+          value: true,
+          "model-value": isSelected(row),
+          onClick: withModifiers(($event) => onSelect(row), ["self"])
+        }, {
+          default: withCtx(() => [hasCheckboxDescription.value ? (openBlock(), createElementBlock("span", _hoisted_17, [renderSlot(_ctx.$slots, "checkbox-description", mergeProps({
+            ref_for: true
+          }, {
+            row
+          }))])) : createCommentVNode("", true)]),
+          _: 2
+        }, 1032, ["model-value", "onClick"])])])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), renderSlot(_ctx.$slots, "default", mergeProps({
+          ref_for: true
+        }, {
+          row
+        }))], 42, _hoisted_12$1), _cache[11] || (_cache[11] = createTextVNode()), unref(isExpandableTable) && unref(hasExpandableContent)(row) ? (openBlock(true), createElementBlock(Fragment, {
+          key: 0
+        }, renderList(unref(expandableRows)(row), (expandableRow, expandableIndex) => {
+          return openBlock(), createElementBlock("tr", {
+            key: rowKey(expandableRow),
+            "aria-level": "2",
+            class: normalizeClass(unref(expandableRowClasses)(row, expandableIndex))
+          }, [_cache[8] || (_cache[8] = createElementVNode("td", {
+            class: "table__column--placeholder"
+          }, null, -1)), _cache[9] || (_cache[9] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_18)) : createCommentVNode("", true), _cache[10] || (_cache[10] = createTextVNode()), !unref(hasExpandableSlot) ? renderSlot(_ctx.$slots, "default", mergeProps({
+            key: 1,
+            ref_for: true
+          }, {
+            row: expandableRow
+          })) : (openBlock(), createElementBlock("td", {
+            key: 2,
+            class: "table__column table__column--indented",
+            colspan: columns.value.length
+          }, [renderSlot(_ctx.$slots, "expandable", mergeProps({
+            ref_for: true
+          }, {
+            expandableRow,
+            parentRow: row
+          }))], 8, _hoisted_19))], 2);
+        }), 128)) : createCommentVNode("", true)], 64);
+      }), 128)), _cache[13] || (_cache[13] = createTextVNode()), isEmpty2.value && columns.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_20, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+        row: {}
+      })))])) : createCommentVNode("", true), _cache[14] || (_cache[14] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("tr", _hoisted_21, [createElementVNode("td", {
+        class: "table__column table__column--action",
+        colspan: nbOfColumns.value
+      }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[12] || (_cache[12] = createTextVNode()), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+        row: {}
+      })))])) : createCommentVNode("", true)]))], 16, _hoisted_1$i)], 2);
+    };
   }
 });
-const _hoisted_1$h = ["role"];
-const _hoisted_2$d = {
-  key: 0
-};
-const _hoisted_3$9 = {
-  key: 0,
-  class: "table__column--shrink"
-};
-const _hoisted_4$8 = {
-  key: 1,
-  class: "table__column--shrink"
-};
-const _hoisted_5$6 = {
-  class: "table__row"
-};
-const _hoisted_6$4 = {
-  key: 0,
-  scope: "col"
-};
-const _hoisted_7$3 = {
-  class: "sr-only"
-};
-const _hoisted_8$3 = {
-  key: 1,
-  scope: "col"
-};
-const _hoisted_9$3 = {
-  class: "sr-only"
-};
-const _hoisted_10$2 = ["innerHTML"];
-const _hoisted_11$1 = {
-  key: 1,
-  class: "table__column__description"
-};
-const _hoisted_12$1 = ["aria-label", "aria-expanded", "aria-level", "aria-describedby", "onKeydown", "onClick"];
-const _hoisted_13 = {
-  key: 0
-};
-const _hoisted_14 = {
-  key: 0,
-  class: "table__expand-icon"
-};
-const _hoisted_15 = {
-  key: 1,
-  class: "table__column--selectable"
-};
-const _hoisted_16 = {
-  class: "table__input"
-};
-const _hoisted_17 = {
-  key: 0,
-  class: "sr-only"
-};
-const _hoisted_18 = {
-  key: 0,
-  class: "table__column--placeholder"
-};
-const _hoisted_19 = ["colspan"];
-const _hoisted_20 = {
-  key: 0
-};
-const _hoisted_21 = {
-  key: 1
-};
-const _hoisted_22 = ["colspan"];
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_icon = resolveComponent("f-icon");
-  const _component_f_checkbox_field = resolveComponent("f-checkbox-field");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.wrapperClasses)
-  }, [createElementVNode("table", mergeProps({
-    class: ["table", _ctx.tableClasses],
-    role: _ctx.tableRole
-  }, _ctx.$attrs), [_ctx.hasCaption ? (openBlock(), createElementBlock("caption", _hoisted_2$d, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("colgroup", null, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("col", _hoisted_3$9)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column) => {
-    return openBlock(), createElementBlock("col", {
-      key: column.id,
-      class: normalizeClass(column.size)
-    }, null, 2);
-  }), 128))]), _cache[16] || (_cache[16] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_5$6, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("th", _hoisted_6$4, [createElementVNode("span", _hoisted_7$3, toDisplayString(_ctx.$t("fkui.interactive-table.select", "Expandera")), 1)])) : createCommentVNode("", true), _cache[4] || (_cache[4] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("th", _hoisted_8$3, [createElementVNode("span", _hoisted_9$3, toDisplayString(_ctx.$t("fkui.interactive-table.select", "Markera")), 1)])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleColumns, (column) => {
-    return openBlock(), createElementBlock("th", mergeProps({
-      key: column.id,
-      scope: "col",
-      class: _ctx.columnClasses(column)
-    }, toHandlers(column.sortable ? {
-      click: () => _ctx.onClickColumnHeader(column)
-    } : {}, true)), [createElementVNode("span", {
-      innerHTML: _ctx.escapeNewlines(column.title)
-    }, null, 8, _hoisted_10$2), _cache[2] || (_cache[2] = createTextVNode()), column.sortable ? (openBlock(), createBlock(_component_f_icon, {
-      key: 0,
-      class: normalizeClass(_ctx.iconClasses(column)),
-      name: _ctx.iconName(column)
-    }, null, 8, ["class", "name"])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), column.description ? (openBlock(), createElementBlock("span", _hoisted_11$1, toDisplayString(column.description), 1)) : createCommentVNode("", true)], 16);
-  }), 128))])]), _cache[17] || (_cache[17] = createTextVNode()), (openBlock(), createElementBlock("tbody", {
-    ref: "tbodyElement",
-    key: _ctx.tbodyKey
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (row, index) => {
-    return openBlock(), createElementBlock(Fragment, {
-      key: _ctx.rowKey(row)
-    }, [createElementVNode("tr", {
-      class: normalizeClass(_ctx.rowClasses(row, index)),
-      "aria-label": _ctx.rowDescription(row),
-      "aria-expanded": _ctx.rowAriaExpanded(row),
-      "aria-level": _ctx.isExpandableTable ? 1 : void 0,
-      "aria-describedby": _ctx.getExpandableDescribedby(row),
-      tabindex: "0",
-      onKeydown: withModifiers(($event) => _ctx.onKeydown($event, index), ["self"]),
-      onClick: ($event) => _ctx.onClick($event, row, index)
-    }, [_ctx.isExpandableTable ? (openBlock(), createElementBlock("td", _hoisted_13, [_ctx.hasExpandableContent(row) ? (openBlock(), createElementBlock("div", _hoisted_14, [createVNode(_component_f_icon, {
-      name: "arrow-right",
-      rotate: _ctx.isExpanded(row) ? "270" : "90"
-    }, null, 8, ["rotate"])])) : createCommentVNode("", true)])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_15, [createElementVNode("div", _hoisted_16, [createVNode(_component_f_checkbox_field, {
-      value: true,
-      "model-value": _ctx.isSelected(row),
-      onClick: withModifiers(($event) => _ctx.onSelect(row), ["self"])
-    }, {
-      default: withCtx(() => [_ctx.hasCheckboxDescription ? (openBlock(), createElementBlock("span", _hoisted_17, [renderSlot(_ctx.$slots, "checkbox-description", mergeProps({
-        ref_for: true
-      }, {
-        row
-      }))])) : createCommentVNode("", true)]),
-      _: 2
-    }, 1032, ["model-value", "onClick"])])])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), renderSlot(_ctx.$slots, "default", mergeProps({
-      ref_for: true
-    }, {
-      row
-    }))], 42, _hoisted_12$1), _cache[11] || (_cache[11] = createTextVNode()), _ctx.isExpandableTable && _ctx.hasExpandableContent(row) ? (openBlock(true), createElementBlock(Fragment, {
-      key: 0
-    }, renderList(_ctx.expandableRows(row), (expandableRow, expandableIndex) => {
-      return openBlock(), createElementBlock("tr", {
-        key: _ctx.rowKey(expandableRow),
-        "aria-level": "2",
-        class: normalizeClass(_ctx.expandableRowClasses(row, expandableIndex))
-      }, [_cache[8] || (_cache[8] = createElementVNode("td", {
-        class: "table__column--placeholder"
-      }, null, -1)), _cache[9] || (_cache[9] = createTextVNode()), _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_18)) : createCommentVNode("", true), _cache[10] || (_cache[10] = createTextVNode()), !_ctx.hasExpandableSlot ? renderSlot(_ctx.$slots, "default", mergeProps({
-        key: 1,
-        ref_for: true
-      }, {
-        row: expandableRow
-      })) : (openBlock(), createElementBlock("td", {
-        key: 2,
-        class: "table__column table__column--indented",
-        colspan: _ctx.columns.length
-      }, [renderSlot(_ctx.$slots, "expandable", mergeProps({
-        ref_for: true
-      }, {
-        expandableRow,
-        parentRow: row
-      }))], 8, _hoisted_19))], 2);
-    }), 128)) : createCommentVNode("", true)], 64);
-  }), 128)), _cache[13] || (_cache[13] = createTextVNode()), _ctx.isEmpty && _ctx.columns.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_20, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-    row: {}
-  })))])) : createCommentVNode("", true), _cache[14] || (_cache[14] = createTextVNode()), _ctx.isEmpty ? (openBlock(), createElementBlock("tr", _hoisted_21, [createElementVNode("td", {
-    class: "table__column table__column--action",
-    colspan: _ctx.nbOfColumns
-  }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.interactive-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_22), _cache[12] || (_cache[12] = createTextVNode()), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-    row: {}
-  })))])) : createCommentVNode("", true)]))], 16, _hoisted_1$h)], 2);
-}
-const FInteractiveTable = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$f]]);
-const _sfc_main$g = defineComponent({
+const _sfc_main$h = defineComponent({
   name: "FLayoutApplicationTemplate",
   computed: {
     showHeader() {
@@ -14479,7 +14433,7 @@ const _sfc_main$g = defineComponent({
     }
   }
 });
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   class: "layout-application-template"
 };
 const _hoisted_2$c = {
@@ -14498,12 +14452,12 @@ const _hoisted_5$5 = {
   key: 0,
   class: "layout-application-template__footer"
 };
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$g, [_ctx.showHeader || _ctx.showTopNavigation ? (openBlock(), createElementBlock("header", _hoisted_2$c, [_ctx.showHeader ? renderSlot(_ctx.$slots, "header", {
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$h, [_ctx.showHeader || _ctx.showTopNavigation ? (openBlock(), createElementBlock("header", _hoisted_2$c, [_ctx.showHeader ? renderSlot(_ctx.$slots, "header", {
     key: 0
   }) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.showTopNavigation ? (openBlock(), createElementBlock("nav", _hoisted_3$8, [renderSlot(_ctx.$slots, "top-navigation")])) : createCommentVNode("", true)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("main", _hoisted_4$7, [renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = createTextVNode()), _ctx.showFooter ? (openBlock(), createElementBlock("footer", _hoisted_5$5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]);
 }
-const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$e]]);
+const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
   if (target === null) {
     return {};
@@ -14604,7 +14558,7 @@ function useLayoutPanel(options) {
     rightPrimaryClasses
   };
 }
-const _sfc_main$f = defineComponent({
+const _sfc_main$g = defineComponent({
   name: "FLayoutLeftPanel",
   components: {
     FIcon
@@ -14689,7 +14643,7 @@ const _sfc_main$f = defineComponent({
     }
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$g = {
   class: "layout-navigation"
 };
 const _hoisted_2$b = ["aria-expanded"];
@@ -14700,9 +14654,9 @@ const _hoisted_4$6 = {
   key: 1,
   class: "layout-navigation__navigation__inner--minimized"
 };
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$f, [createElementVNode("nav", {
+  return openBlock(), createElementBlock("div", _hoisted_1$g, [createElementVNode("nav", {
     id: "layout-navigation__navigation",
     class: "layout-navigation__navigation",
     style: normalizeStyle(_ctx.navigationStyle),
@@ -14751,7 +14705,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle(_ctx.primaryStyle)
   }, [renderSlot(_ctx.$slots, "default")], 6)]);
 }
-const FLayoutLeftPanel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$d]]);
+const FLayoutLeftPanel = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$c]]);
 class FRightPanelServiceImpl {
   constructor() {
     _defineProperty(this, "focusedElementBeforeOpenining", null);
@@ -14781,7 +14735,7 @@ class FRightPanelServiceImpl {
   }
 }
 const FLayoutRightPanelService = new FRightPanelServiceImpl();
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "FLayoutRightPanel",
   components: {
     FIcon
@@ -14898,15 +14852,15 @@ const _sfc_main$e = defineComponent({
     }
   }
 });
-const _hoisted_1$e = {
+const _hoisted_1$f = {
   class: "layout-secondary"
 };
 const _hoisted_2$a = {
   class: "layout-secondary__secondary__inner"
 };
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$e, [createElementVNode("div", {
+  return openBlock(), createElementBlock("div", _hoisted_1$f, [createElementVNode("div", {
     id: "layout-secondary__primary",
     class: normalizeClass(["layout-secondary__primary", _ctx.rightPrimaryClasses]),
     style: normalizeStyle(_ctx.primaryStyle)
@@ -14943,13 +14897,34 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])], 6)])], 4)) : createCommentVNode("", true)]);
 }
-const FLayoutRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$c]]);
-const _sfc_main$d = defineComponent({
-  name: "FList",
-  components: {
-    FCheckboxField
-  },
-  mixins: [TranslationMixin],
+const FLayoutRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$b]]);
+const _hoisted_1$e = {
+  key: 0,
+  class: "list"
+};
+const _hoisted_2$9 = {
+  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 = {
+  class: "list__item__selectpane__input"
+};
+const _hoisted_8$2 = ["id"];
+const _hoisted_9$2 = {
+  key: 0,
+  class: "list__item"
+};
+const _hoisted_10$1 = {
+  class: "list__item__itempane"
+};
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "FList",
   props: {
     /**
      * The items to be listed.
@@ -15009,274 +14984,235 @@ const _sfc_main$d = defineComponent({
       default: () => ElementIdService.generateElementId()
     }
   },
-  emits: ["change", "click", "unselect", "update:modelValue", "select", "update:active"],
-  setup() {
-    return ActivateItemInjected();
-  },
-  data() {
-    return {
-      selectedItems: [],
-      activeItem: void 0
-    };
-  },
-  computed: {
-    isEmpty() {
-      return this.items.length === 0;
-    },
-    ariaActiveDescendant() {
-      return this.activeItem ? this.getItemId(this.activeItem) : void 0;
-    }
-  },
-  watch: {
-    items: {
+  emits: ["change", "click", "select", "unselect", "update:active", "update:modelValue"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const slots = useSlots();
+    const {
+      registerCallbackAfterItemAdd,
+      registerCallbackBeforeItemDelete
+    } = ActivateItemInjected();
+    const selectedItems = ref([]);
+    const activeItem = ref(void 0);
+    const ulElement = ref();
+    const props = __props;
+    const emit = __emit;
+    const isEmpty2 = computed(() => {
+      return props.items.length === 0;
+    });
+    watch(() => props.items, () => {
+      updateSelectedItemsFromVModel();
+    }, {
       deep: true,
-      immediate: true,
-      handler: function() {
-        this.updateSelectedItemsFromVModel();
-      }
-    },
-    modelValue: {
+      immediate: true
+    });
+    watch(() => props.modelValue, () => {
+      updateSelectedItemsFromVModel();
+    }, {
       deep: true,
-      immediate: true,
-      handler: function() {
-        this.updateSelectedItemsFromVModel();
-      }
-    },
-    active: {
-      immediate: true,
-      handler: function() {
-        this.updateActiveItemFromVModel();
-      }
-    }
-  },
-  mounted() {
-    if (this.selectable && this.checkbox) {
-      if (!this.$slots["screenreader"]) {
-        throw Error('Slot "screenreader" is required when having "selectable" & "checkbox" option.');
+      immediate: true
+    });
+    watch(() => props.active, () => {
+      updateActiveItemFromVModel();
+    }, {
+      immediate: true
+    });
+    onMounted(() => {
+      if (props.selectable && props.checkbox) {
+        if (!slots["screenreader"]) {
+          throw Error('Slot "screenreader" is required when having "selectable" & "checkbox" option.');
+        }
+        registerCallbackAfterItemAdd(callbackAfterItemAdd);
+        registerCallbackBeforeItemDelete(callbackBeforeItemDelete);
       }
-      this.registerCallbackAfterItemAdd(this.callbackAfterItemAdd);
-      this.registerCallbackBeforeItemDelete(this.callbackBeforeItemDelete);
+    });
+    function getLiElements() {
+      const element = getElementFromVueRef(ulElement.value);
+      return Array.from(element.children);
     }
-  },
-  methods: {
-    getLiElements() {
-      const ulElement = getElementFromVueRef(this.$refs["ulElement"]);
-      return Array.from(ulElement.children);
-    },
-    itemKey(item) {
-      const key = item[this.keyAttribute];
+    function itemKey(item) {
+      const key = item[props.keyAttribute];
       if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${this.keyAttribute}]' is missing in item`);
+        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in item`);
       }
       return String(key);
-    },
-    isSelected(item) {
-      return includeItem(item, this.selectedItems, this.keyAttribute);
-    },
-    itemClasses(item) {
+    }
+    function isSelected(item) {
+      return includeItem(item, selectedItems.value, props.keyAttribute);
+    }
+    function itemClasses(item) {
       return {
-        "list__item--selected": this.isSelected(item),
-        "list__item--active": this.isActive(item)
+        "list__item--selected": isSelected(item),
+        "list__item--active": isActive(item)
       };
-    },
-    getAriaSelected(item) {
-      return String(itemEquals(this.activeItem, item, this.keyAttribute));
-    },
-    onSelect(item) {
-      if (includeItem(item, this.selectedItems, this.keyAttribute)) {
-        this.selectedItems = this.selectedItems.filter((i) => !itemEquals(i, item, this.keyAttribute));
-        this.$emit("unselect", item);
+    }
+    function onSelect(item) {
+      var _a, _b;
+      if (includeItem(item, selectedItems.value, props.keyAttribute)) {
+        selectedItems.value = selectedItems.value.filter((i) => !itemEquals(i, item, props.keyAttribute));
+        emit("unselect", item);
       } else {
-        this.selectedItems.push(item);
-        this.$emit("select", item);
+        selectedItems.value.push(item);
+        emit("select", item);
       }
-      this.updateVModelWithSelectedItems();
-      this.$forceUpdate();
-    },
-    setActiveItem(item) {
-      this.$emit("click", item);
-      if (!itemEquals(item, this.activeItem, this.keyAttribute)) {
-        this.$emit("change", item);
-        this.activeItem = item;
-        this.$emit("update:active", this.activeItem);
+      updateVModelWithSelectedItems();
+      (_b = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy) == null ? void 0 : _b.$forceUpdate();
+    }
+    function setActiveItem(item) {
+      emit("click", item);
+      if (!itemEquals(item, activeItem.value, props.keyAttribute)) {
+        emit("change", item);
+        activeItem.value = item;
+        emit("update:active", activeItem.value);
       }
-    },
-    onItemClick(event, index, item) {
-      this.setActiveItem(item);
-    },
-    updateVModelWithSelectedItems() {
-      if (this.modelValue) {
-        this.$emit("update:modelValue", this.selectedItems);
+    }
+    function onItemClick(event, index, item) {
+      setActiveItem(item);
+    }
+    function updateVModelWithSelectedItems() {
+      if (props.modelValue) {
+        emit("update:modelValue", selectedItems.value);
       }
-    },
-    updateSelectedItemsFromVModel() {
-      if (Array.isArray(this.modelValue)) {
-        this.selectedItems = this.modelValue.filter((item) => {
-          return includeItem(item, this.items, this.keyAttribute);
+    }
+    function updateSelectedItemsFromVModel() {
+      if (Array.isArray(props.modelValue)) {
+        selectedItems.value = props.modelValue.filter((item) => {
+          return includeItem(item, props.items, props.keyAttribute);
         });
       } else {
-        this.selectedItems = [];
+        selectedItems.value = [];
       }
-    },
-    updateActiveItemFromVModel() {
-      if (this.active === void 0) {
-        this.activeItem = void 0;
-      } else if (!itemEquals(this.active, this.activeItem, this.keyAttribute)) {
-        this.activeItem = this.active;
+    }
+    function updateActiveItemFromVModel() {
+      if (props.active === void 0) {
+        activeItem.value = void 0;
+      } else if (!itemEquals(props.active, activeItem.value, props.keyAttribute)) {
+        activeItem.value = props.active;
       }
-    },
-    onItemKeyDown(event, item) {
+    }
+    function onItemKeyDown(event, item) {
       switch (event.key) {
         case "Up":
         case "Down":
         case "ArrowUp":
         case "ArrowDown":
           event.preventDefault();
-          handleKeyboardFocusNavigation(event.key, event.target, this.getLiElements());
+          handleKeyboardFocusNavigation(event.key, event.target, getLiElements());
           break;
         case " ":
         case "Spacebar":
           event.preventDefault();
-          this.setActiveItem(item);
+          setActiveItem(item);
           break;
       }
-    },
-    // Unique id to connect aria-labelledby with readonly label
-    getAriaLabelledbyId(item) {
-      return `${this.elementId}_${this.itemKey(item)}`;
-    },
-    // Unique id to connect aria-labelledby with readonly label
-    getItemId(item) {
-      return `${this.elementId}_item_${this.itemKey(item)}`;
-    },
-    // Focus effect is done with box-shadow.
-    // By setting position to relative the
-    // item and box-shadow is drawn with a higher z-index,
-    // thus no focus border under other list items.
-    onItemFocus(event) {
+    }
+    function getAriaLabelledbyId(item) {
+      return `${props.elementId}_${itemKey(item)}`;
+    }
+    function getItemId(item) {
+      return `${props.elementId}_item_${itemKey(item)}`;
+    }
+    function onItemFocus(event) {
       if (event && event.target) {
         event.target.style.position = "relative";
       }
-    },
-    onItemBlur(event) {
+    }
+    function onItemBlur(event) {
       if (event && event.target) {
         event.target.style.position = "static";
       }
-    },
-    callbackAfterItemAdd(item) {
-      this.setActiveItem(item);
-    },
-    callbackBeforeItemDelete(item) {
-      if (this.items.length === 0) {
+    }
+    function callbackAfterItemAdd(item) {
+      setActiveItem(item);
+    }
+    function callbackBeforeItemDelete(item) {
+      if (props.items.length === 0) {
         return;
       }
-      let targetIndex = this.items.indexOf(item) - 1;
-      if (targetIndex < 0 && this.items.length > 1) {
+      let targetIndex = props.items.indexOf(item) - 1;
+      if (targetIndex < 0 && props.items.length > 1) {
         targetIndex = 1;
       } else if (targetIndex < 0) {
         targetIndex = 0;
       }
-      this.setActiveItem(this.items[targetIndex]);
-      if (this.getLiElements()[targetIndex]) {
-        this.getLiElements()[targetIndex].focus();
+      setActiveItem(props.items[targetIndex]);
+      const targetElement = getLiElements()[targetIndex];
+      if (targetElement) {
+        targetElement.focus();
       }
-    },
-    isActive(item) {
-      return this.checkbox && itemEquals(this.activeItem, item, this.keyAttribute);
     }
+    function isActive(item) {
+      return props.checkbox && itemEquals(activeItem.value, item, props.keyAttribute);
+    }
+    return (_ctx, _cache) => {
+      return !__props.selectable ? (openBlock(), createElementBlock("ul", _hoisted_1$e, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+        return openBlock(), createElementBlock("li", {
+          key: itemKey(item),
+          class: "list__item"
+        }, [createElementVNode("div", {
+          ref_for: true,
+          ref: "listItemPanes",
+          class: "list__item__itempane"
+        }, [renderSlot(_ctx.$slots, "default", mergeProps({
+          ref_for: true
+        }, {
+          item
+        }))], 512)]);
+      }), 128)), _cache[0] || (_cache[0] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("li", _hoisted_2$9, [createElementVNode("div", _hoisted_3$6, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("ul", {
+        key: 1,
+        ref_key: "ulElement",
+        ref: ulElement,
+        class: "list list--hover",
+        tabindex: __props.checkbox ? 0 : void 0
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+        return openBlock(), createElementBlock("li", {
+          id: getItemId(item),
+          key: itemKey(item),
+          "aria-labelledby": getItemId(item),
+          class: normalizeClass([itemClasses(item), "list__item"]),
+          tabindex: __props.checkbox ? 0 : void 0,
+          onKeydown: withModifiers(($event) => onItemKeyDown($event, item), ["self"]),
+          onFocus: withModifiers(onItemFocus, ["self"]),
+          onBlur: withModifiers(onItemBlur, ["self"])
+        }, [__props.checkbox ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "list__item__selectpane",
+          onClick: withModifiers(($event) => onSelect(item), ["self"])
+        }, [createElementVNode("div", _hoisted_7$2, [createVNode(unref(FCheckboxField), {
+          value: true,
+          "model-value": isSelected(item),
+          onClick: withModifiers(($event) => onSelect(item), ["self"])
+        }, {
+          default: withCtx(() => [createElementVNode("span", {
+            id: getAriaLabelledbyId(item),
+            class: "sr-only"
+          }, [renderSlot(_ctx.$slots, "screenreader", mergeProps({
+            ref_for: true
+          }, {
+            item
+          }))], 8, _hoisted_8$2)]),
+          _: 2
+        }, 1032, ["model-value", "onClick"])])], 8, _hoisted_6$3)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(), createBlock(resolveDynamicComponent(__props.checkbox ? "div" : "a"), {
+          ref_for: true,
+          ref: "listItemPanes",
+          href: !__props.checkbox ? "javascript:" : void 0,
+          class: "list__item__itempane",
+          onClick: ($event) => onItemClick($event, index, item)
+        }, {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({
+            ref_for: true
+          }, {
+            item
+          }))]),
+          _: 2
+        }, 1032, ["href", "onClick"]))], 42, _hoisted_5$4);
+      }), 128)), _cache[2] || (_cache[2] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("li", _hoisted_9$2, [createElementVNode("div", _hoisted_10$1, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)], 8, _hoisted_4$5));
+    };
   }
 });
-const _hoisted_1$d = {
-  key: 0,
-  class: "list"
-};
-const _hoisted_2$9 = {
-  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 = {
-  class: "list__item__selectpane__input"
-};
-const _hoisted_8$2 = ["id"];
-const _hoisted_9$2 = {
-  key: 0,
-  class: "list__item"
-};
-const _hoisted_10$1 = {
-  class: "list__item__itempane"
-};
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_f_checkbox_field = resolveComponent("f-checkbox-field");
-  return !_ctx.selectable ? (openBlock(), createElementBlock("ul", _hoisted_1$d, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
-    return openBlock(), createElementBlock("li", {
-      key: _ctx.itemKey(item),
-      class: "list__item"
-    }, [createElementVNode("div", {
-      ref_for: true,
-      ref: "listItemPanes",
-      class: "list__item__itempane"
-    }, [renderSlot(_ctx.$slots, "default", mergeProps({
-      ref_for: true
-    }, {
-      item
-    }))], 512)]);
-  }), 128)), _cache[2] || (_cache[2] = createTextVNode()), _ctx.isEmpty ? (openBlock(), createElementBlock("li", _hoisted_2$9, [createElementVNode("div", _hoisted_3$6, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(_ctx.$t("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("ul", {
-    key: 1,
-    ref: "ulElement",
-    class: "list list--hover",
-    tabindex: _ctx.checkbox ? 0 : void 0
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
-    return openBlock(), createElementBlock("li", {
-      id: _ctx.getItemId(item),
-      key: _ctx.itemKey(item),
-      "aria-labelledby": _ctx.getItemId(item),
-      class: normalizeClass([_ctx.itemClasses(item), "list__item"]),
-      tabindex: _ctx.checkbox ? 0 : void 0,
-      onKeydown: withModifiers(($event) => _ctx.onItemKeyDown($event, item), ["self"]),
-      onFocus: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onItemFocus && _ctx.onItemFocus(...args), ["self"])),
-      onBlur: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.onItemBlur && _ctx.onItemBlur(...args), ["self"]))
-    }, [_ctx.checkbox ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: "list__item__selectpane",
-      onClick: withModifiers(($event) => _ctx.onSelect(item), ["self"])
-    }, [createElementVNode("div", _hoisted_7$2, [createVNode(_component_f_checkbox_field, {
-      value: true,
-      "model-value": _ctx.isSelected(item),
-      onClick: withModifiers(($event) => _ctx.onSelect(item), ["self"])
-    }, {
-      default: withCtx(() => [createElementVNode("span", {
-        id: _ctx.getAriaLabelledbyId(item),
-        class: "sr-only"
-      }, [renderSlot(_ctx.$slots, "screenreader", mergeProps({
-        ref_for: true
-      }, {
-        item
-      }))], 8, _hoisted_8$2)]),
-      _: 2
-    }, 1032, ["model-value", "onClick"])])], 8, _hoisted_6$3)) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), (openBlock(), createBlock(resolveDynamicComponent(_ctx.checkbox ? "div" : "a"), {
-      ref_for: true,
-      ref: "listItemPanes",
-      href: !_ctx.checkbox ? "javascript:" : void 0,
-      class: "list__item__itempane",
-      onClick: ($event) => _ctx.onItemClick($event, index, item)
-    }, {
-      default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({
-        ref_for: true
-      }, {
-        item
-      }))]),
-      _: 2
-    }, 1032, ["href", "onClick"]))], 42, _hoisted_5$4);
-  }), 128)), _cache[4] || (_cache[4] = createTextVNode()), _ctx.isEmpty ? (openBlock(), createElementBlock("li", _hoisted_9$2, [createElementVNode("div", _hoisted_10$1, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(_ctx.$t("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)], 8, _hoisted_4$5));
-}
-const FList = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$b]]);
-const _sfc_main$c = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "FLoader",
   mixins: [TranslationMixin],
   inheritAttrs: false,
@@ -15388,7 +15324,7 @@ const _sfc_main$c = defineComponent({
     }
   }
 });
-const _hoisted_1$c = {
+const _hoisted_1$d = {
   class: "loader__backdrop"
 };
 const _hoisted_2$8 = {
@@ -15400,7 +15336,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.teleportDisabled
   }, [withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, {
     class: ["loader", _ctx.classes]
-  }), [createElementVNode("div", _hoisted_1$c, [_cache[0] || (_cache[0] = createElementVNode("div", {
+  }), [createElementVNode("div", _hoisted_1$d, [_cache[0] || (_cache[0] = createElementVNode("div", {
     class: "loader__wrapper"
   }, [createElementVNode("div", {
     class: "loader__spinner-1 loader__spinner"
@@ -15440,8 +15376,8 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     tabindex: "-1"
   }, [createElementVNode("span", _hoisted_2$8, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.loader.wait.text", _ctx.defaultLoadingText)), 1)])])], 2)])], 16), [[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$d, [["render", _sfc_render$a]]);
+const _hoisted_1$c = ["aria-label"];
 const __default__ = defineComponent({
   computed: {
     ariaLabel() {
@@ -15453,7 +15389,7 @@ const __default__ = defineComponent({
     }
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "FLogo",
   props: {
@@ -15477,7 +15413,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         class: normalizeClass(`logo logo--${props.size}`),
         "aria-label": _ctx.ariaLabel,
         role: "img"
-      }, null, 10, _hoisted_1$b);
+      }, null, 10, _hoisted_1$c);
     };
   }
 });
@@ -15507,7 +15443,7 @@ const iconClasses = {
     screenReaderContextDefault: "Informationsmeddelande"
   }
 };
-const _sfc_main$a = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "FMessageBox",
   components: {
     FIcon,
@@ -15597,7 +15533,7 @@ const _sfc_main$a = defineComponent({
     }
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   key: 0,
   class: "sr-only"
 };
@@ -15607,7 +15543,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_flex = resolveComponent("i-flex");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["message-box", [_ctx.messageBoxType, _ctx.bannerType]])
-  }, [_ctx.provideScreenReaderContext ? (openBlock(), createElementBlock("span", _hoisted_1$a, toDisplayString(_ctx.screenReaderContext()), 1)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_i_flex, {
+  }, [_ctx.provideScreenReaderContext ? (openBlock(), createElementBlock("span", _hoisted_1$b, toDisplayString(_ctx.screenReaderContext()), 1)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_i_flex, {
     gap: "2x"
   }, {
     default: withCtx(() => [_ctx.layout === "short" ? (openBlock(), createBlock(_component_i_flex_item, {
@@ -15639,7 +15575,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$b, [["render", _sfc_render$9]]);
 function findOverflowIndex(totalWidth, elements) {
   let sum = 0;
   const index = elements.findIndex((element) => {
@@ -15689,7 +15625,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 = defineComponent({
+const _sfc_main$a = defineComponent({
   name: "FNavigationMenu",
   components: {
     FIcon,
@@ -16022,7 +15958,7 @@ const _sfc_main$9 = defineComponent({
     }
   }
 });
-const _hoisted_1$9 = ["aria-label"];
+const _hoisted_1$a = ["aria-label"];
 const _hoisted_2$7 = ["data-ref-index", "onClick"];
 const _hoisted_3$5 = {
   class: "imenu__list__anchor-container"
@@ -16103,11 +16039,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$a);
 }
-const FNavigationMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8]]);
+const FNavigationMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$8]]);
 const EVENTS = ["online", "offline"];
-const _sfc_main$8 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "FOffline",
   components: {
     FIcon,
@@ -16155,7 +16091,7 @@ const _sfc_main$8 = defineComponent({
     }
   }
 });
-const _hoisted_1$8 = ["role"];
+const _hoisted_1$9 = ["role"];
 const _hoisted_2$6 = {
   key: 0,
   class: "offline"
@@ -16201,10 +16137,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   })])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), withDirectives(createElementVNode("span", {
     class: "sr-only",
     "aria-hidden": _ctx.shouldNotRead ? "true" : void 0
-  }, "\n            Din internetuppkoppling fungerar igen\n        ", 8, _hoisted_5$2), [[vShow, _ctx.isOnline]])], 8, _hoisted_1$8);
+  }, "\n            Din internetuppkoppling fungerar igen\n        ", 8, _hoisted_5$2), [[vShow, _ctx.isOnline]])], 8, _hoisted_1$9);
 }
-const FOffline = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]]);
-const _sfc_main$7 = defineComponent({
+const FOffline = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$7]]);
+const _sfc_main$8 = defineComponent({
   name: "FOutputField",
   components: {
     FLabel
@@ -16237,13 +16173,13 @@ const _sfc_main$7 = defineComponent({
     }
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   class: "output-field"
 };
 const _hoisted_2$5 = ["id", "for"];
 function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = resolveComponent("f-label");
-  return openBlock(), createElementBlock("div", _hoisted_1$7, [createVNode(_component_f_label, {
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [createVNode(_component_f_label, {
     for: _ctx.id
   }, createSlots({
     default: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
@@ -16258,8 +16194,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     class: "output-field__output"
   }, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2$5)]);
 }
-const FOutputField = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6]]);
-const _sfc_main$6 = defineComponent({
+const FOutputField = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$6]]);
+const _sfc_main$7 = defineComponent({
   name: "FPageHeader",
   components: {
     ISkipLink
@@ -16306,7 +16242,7 @@ const _sfc_main$6 = defineComponent({
     }
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   class: "page-header__root"
 };
 const _hoisted_2$4 = {
@@ -16328,7 +16264,7 @@ const _hoisted_6$1 = {
 };
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_skip_link = resolveComponent("i-skip-link");
-  return openBlock(), createElementBlock("div", _hoisted_1$6, [_ctx.skipLinkAnchor ? (openBlock(), createElementBlock("nav", _hoisted_2$4, [createVNode(_component_i_skip_link, {
+  return openBlock(), createElementBlock("div", _hoisted_1$7, [_ctx.skipLinkAnchor ? (openBlock(), createElementBlock("nav", _hoisted_2$4, [createVNode(_component_i_skip_link, {
     href: _ctx.skipLinkAnchor
   }, {
     default: withCtx(() => [renderSlot(_ctx.$slots, "skip-link-text")]),
@@ -16340,7 +16276,306 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("div", _hoisted_5$1, [createElementVNode("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "right")])])], 512)]);
 }
-const FPageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5]]);
+const FPageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["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 = '.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\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\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\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}\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$6 = ["slot"];
+const tagName = `ce-page-layout`;
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "FPageLayout",
+  props: {
+    layout: {}
+  },
+  setup(__props) {
+    const slots = useSlots();
+    const slotNames = computed(() => {
+      return Object.keys(slots);
+    });
+    onMounted(() => {
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PageLayout);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(tagName), {
+        layout: _ctx.layout
+      }, {
+        default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(slotNames.value, (slot) => {
+          return openBlock(), createElementBlock("div", {
+            key: slot,
+            slot
+          }, [renderSlot(_ctx.$slots, slot)], 8, _hoisted_1$6);
+        }), 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 = ref(null);
+  const attachPanel = ref(null);
+  const direction = ref(null);
+  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$5 = {
   class: "progress"
 };
@@ -17386,20 +17621,20 @@ export {
   ErrorPlugin,
   ErrorViewData,
   EventBus,
-  _sfc_main$1b as FBadge,
-  _sfc_main$y as FBankAccountNumberTextField,
-  _sfc_main$x as FBankgiroTextField,
+  _sfc_main$1c as FBadge,
+  _sfc_main$z as FBankAccountNumberTextField,
+  _sfc_main$y as FBankgiroTextField,
   FCalendar,
   FCalendarDay,
-  _sfc_main$W as FCard,
+  _sfc_main$X as FCard,
   FCheckboxField,
-  _sfc_main$w as FClearingnumberTextField,
+  _sfc_main$x as FClearingnumberTextField,
   FConfirmModal,
   FContextMenu,
   FCrudButton,
-  FCrudDataset,
-  _sfc_main$A as FCurrencyTextField,
-  FDataTable,
+  _sfc_main$J as FCrudDataset,
+  _sfc_main$B as FCurrencyTextField,
+  _sfc_main$p as FDataTable,
   FDatepickerField,
   FDialogueTree,
   FEmailTextField,
@@ -17414,34 +17649,35 @@ export {
   FFormModal,
   FValidationFormAction as FFormModalAction,
   FIcon,
-  FInteractiveTable,
+  _sfc_main$i as FInteractiveTable,
   FKUIConfigButtonOrder,
   FLabel,
   FLayoutApplicationTemplate,
   FLayoutLeftPanel,
   FLayoutRightPanel,
   FLayoutRightPanelService,
-  FList,
+  _sfc_main$e as FList,
   FLoader,
-  _sfc_main$b as FLogo,
+  _sfc_main$c as FLogo,
   FMessageBox,
   FModal,
   FNavigationMenu,
-  _sfc_main$v as FNumericTextField,
+  _sfc_main$w as FNumericTextField,
   FOffline,
-  _sfc_main$q as FOrganisationsnummerTextField,
+  _sfc_main$r as FOrganisationsnummerTextField,
   FOutputField,
   FPageHeader,
-  _sfc_main$r as FPercentTextField,
-  _sfc_main$u as FPersonnummerTextField,
+  _sfc_main$6 as FPageLayout,
+  _sfc_main$s as FPercentTextField,
+  _sfc_main$v as FPersonnummerTextField,
   FPhoneTextField,
-  _sfc_main$t as FPlusgiroTextField,
-  _sfc_main$s as FPostalCodeTextField,
+  _sfc_main$u as FPlusgiroTextField,
+  _sfc_main$t as FPostalCodeTextField,
   _sfc_main$5 as FProgressbar,
   FRadioField,
   FSearchTextField,
   FSelectField,
-  FSortFilterDataset,
+  _sfc_main$q as FSortFilterDataset,
   FSortFilterDatasetInjected,
   FStaticField,
   FTableColumn,
@@ -17462,13 +17698,13 @@ export {
   ICalendarMonth,
   ICalendarMonthGrid,
   ICalendarNavbar,
-  _sfc_main$O as IComboboxDropdown,
-  _sfc_main$N as IComboboxToggleButton,
+  _sfc_main$P as IComboboxDropdown,
+  _sfc_main$O as IComboboxToggleButton,
   IFlex,
   IFlexItem,
   IPopup,
   IPopupError,
-  _sfc_main$S as IPopupListbox,
+  _sfc_main$T as IPopupListbox,
   IPopupMenu,
   ISkipLink,
   FValidationForm as IValidationForm,
@@ -17517,10 +17753,12 @@ export {
   refIsHTMLElementArray,
   refIsVue,
   refIsVueArray,
+  registerLayout,
   renderSlotText,
   setRunningContext,
   tableScrollClasses,
   tooltipAttachTo,
+  useAreaData,
   useCombobox,
   useModal,
   useSlotUtils,