@fkui/vue 6.0.1 → 6.1.0

package/dist/esm/index.esm.js

@@ -1,4 +1,4 @@
-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"];
@@ -1971,7 +1971,7 @@ const _export_sfc = (sfc, props) => {
 };
 const _hoisted_1$U = ["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]],
@@ -1980,7 +1980,7 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     "xlink:href": _ctx.spriteId
   }, null, 8, _hoisted_2$F)], 16, _hoisted_1$U);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$W]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$R]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -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,
@@ -4662,7 +4662,7 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
   }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$T)) : createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$V]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$Q]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -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,
@@ -4827,7 +4827,7 @@ 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$18, [["render", _sfc_render$P]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
 const ALIGNMENT = ["top", "center", "bottom"];
 const FLOAT = ["left", "center", "right"];
@@ -4906,12 +4906,12 @@ 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 IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$O]]);
 const _sfc_main$16 = defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
@@ -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$16, [["render", _sfc_render$N]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -5043,7 +5043,7 @@ 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");
@@ -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$15, [["render", _sfc_render$M]]);
 var es_iterator_every = {};
 var hasRequiredEs_iterator_every;
 function requireEs_iterator_every() {
@@ -5255,13 +5255,13 @@ 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$14, [["render", _sfc_render$L]]);
 var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
   FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
   FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
@@ -5413,7 +5413,7 @@ const _hoisted_2$B = {
   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, {
@@ -5439,7 +5439,7 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$P]]);
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$K]]);
 const _sfc_main$12 = defineComponent({
   name: "FFormModal",
   components: {
@@ -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, {
@@ -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$12, [["render", _sfc_render$J]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -6006,12 +6006,12 @@ const _sfc_main$11 = defineComponent({
 const _hoisted_1$O = {
   "data-test": "f-error-page"
 };
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_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", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$N]]);
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$I]]);
 const _sfc_main$10 = defineComponent({
   name: "FErrorHandlingApp",
   props: {
@@ -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$10, [["render", _sfc_render$H]]);
 function isMonthBefore(date, minDate) {
   return Boolean(minDate && date.isBefore(minDate.startOfMonth()));
 }
@@ -6220,7 +6220,7 @@ 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", {
     ref: "previousButton",
@@ -6244,7 +6244,7 @@ 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$$, [["render", _sfc_render$G]]);
 function getDayStartOffset(days) {
   return days[0].weekDay - 1;
 }
@@ -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$M);
 }
-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,
@@ -6531,7 +6535,7 @@ const _sfc_main$Z = defineComponent({
   }
 });
 const _hoisted_1$L = ["data-date", "tabindex", "onClick", "onKeydown"];
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+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
@@ -6554,7 +6558,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$J]]);
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$E]]);
 const _sfc_main$Y = defineComponent({
   name: "FCalendar",
   components: {
@@ -6609,7 +6613,7 @@ const _sfc_main$Y = defineComponent({
 const _hoisted_1$K = {
   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, {
@@ -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$Y, [["render", _sfc_render$D]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -6725,12 +6729,12 @@ const _hoisted_1$J = {
 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);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$H]]);
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$C]]);
 function useEventListener(target, event, callback) {
   onMounted(() => {
     var _a;
@@ -6744,10 +6748,10 @@ function useEventListener(target, event, callback) {
 function useSlotUtils() {
   const $slots = useSlots();
   return {
-    hasSlot(name) {
+    hasSlot(...args) {
       return hasSlot({
         $slots
-      }, name);
+      }, ...args);
     }
   };
 }
@@ -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$V, [["render", _sfc_render$B]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -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$U, [["render", _sfc_render$A]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -7621,6 +7625,9 @@ const _sfc_main$T = defineComponent({
     },
     errorStyle() {
       return `--i-popup-error-offset: ${this.arrowOffset}px`;
+    },
+    teleportTarget() {
+      return config.teleportTarget;
     }
   },
   watch: {
@@ -7709,11 +7716,11 @@ const _hoisted_1$H = {
   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",
@@ -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$T, [["render", _sfc_render$z]]);
 function numItems(itemHeight, availableHeight, verticalSpacing) {
   const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
   return Math.min(itemsFit, 7);
@@ -8264,7 +8271,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",
@@ -8300,7 +8307,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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$R, [["render", _sfc_render$y]]);
 const ANIMATION_DURATION = 500;
 const NO_CSS_CLASSES = "";
 const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
@@ -8503,13 +8510,13 @@ const _hoisted_1$E = {
   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);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$C]]);
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["render", _sfc_render$x]]);
 const _sfc_main$P = defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
@@ -8525,13 +8532,13 @@ const _sfc_main$P = defineComponent({
   }
 });
 const _hoisted_1$D = ["href"];
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+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);
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$B]]);
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$w]]);
 function filterOptions(options, filter2, selectMode) {
   if (isEmpty(filter2) || selectMode) {
     return options;
@@ -9149,7 +9156,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,
@@ -9182,7 +9189,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$M, [["render", _sfc_render$v]]);
 function* labelClasses(options) {
   const {
     labelClass
@@ -9483,7 +9490,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,
@@ -9520,7 +9527,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.groupContentClass)
   }, [renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$z);
 }
-const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$z]]);
+const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$u]]);
 const anyType$1 = [String, Object, Array, Number, Date, Boolean];
 const _sfc_main$K = defineComponent({
   name: "FCheckboxField",
@@ -9718,7 +9725,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))
@@ -9748,7 +9755,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$K, [["render", _sfc_render$t]]);
 var es_iterator_some = {};
 var hasRequiredEs_iterator_some;
 function requireEs_iterator_some() {
@@ -10004,7 +10011,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, {
@@ -10044,7 +10051,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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$J, [["render", _sfc_render$s]]);
 var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["ADD"] = 0] = "ADD";
   Operation2[Operation2["DELETE"] = 1] = "DELETE";
@@ -10052,30 +10059,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$w = {
+  class: "crud-dataset"
+};
+const _hoisted_2$o = {
+  key: 0
+};
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
+  __name: "FCrudDataset",
   props: {
     /**
      * The list of items that should be deleted, modified or added to.
@@ -10159,25 +10150,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,175 +10179,168 @@ 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$w, [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"),
@@ -10424,7 +10407,7 @@ const _hoisted_1$v = {
   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",
@@ -10438,7 +10421,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     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$H, [["render", _sfc_render$r]]);
 function ActivateItemInjected() {
   return {
     registerCallbackAfterItemAdd: inject("registerCallbackAfterItemAdd", () => void 0),
@@ -10663,7 +10646,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 +10658,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$G, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: inject("sort", () => void 0),
@@ -10740,7 +10723,7 @@ 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", {
     class: "label",
@@ -10767,7 +10750,7 @@ 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$F, [["render", _sfc_render$p]]);
 function resolveWidthClass$1(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
@@ -10903,7 +10886,7 @@ const _sfc_main$E = defineComponent({
   }
 });
 const _hoisted_1$t = ["id"];
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+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", {
@@ -10950,7 +10933,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$E, [["render", _sfc_render$o]]);
 function resolveWidthClass(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
@@ -11355,7 +11338,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");
@@ -11438,7 +11421,7 @@ 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 FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$n]]);
 const _sfc_main$C = defineComponent({
   name: "FEmailTextField",
   components: {
@@ -11558,7 +11541,7 @@ const _sfc_main$C = defineComponent({
 const _hoisted_1$r = {
   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,
@@ -11588,7 +11571,7 @@ 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 FEmailTextField = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$m]]);
 const _sfc_main$B = defineComponent({
   name: "FPhoneTextField",
   components: {
@@ -11689,7 +11672,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,7 +11699,7 @@ 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 FPhoneTextField = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$l]]);
 const _sfc_main$A = defineComponent({
   name: "FCurrencyTextField",
   extends: FTextField,
@@ -11815,7 +11798,7 @@ const _sfc_main$z = defineComponent({
 const _hoisted_1$q = {
   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({
@@ -11865,7 +11848,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     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 FSearchTextField = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$k]]);
 const _sfc_main$y = defineComponent({
   name: "FBankAccountNumberTextField",
   extends: FTextField,
@@ -12261,39 +12244,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$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"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "FSortFilterDataset",
   props: {
     /**
      * The data that you wish to sort or filter.
@@ -12342,7 +12314,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 +12326,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;
-          }
-        }
-        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;
+    });
+    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 {
-        this.sortFilterResult = sort([...filteredData], this.sortAttribute.attribute, this.sortAttribute.ascending);
+        sortAttribute.value = {
+          attribute: "",
+          ascending: false
+        };
       }
-      this.$nextTick(() => {
-        this.tableCallbackOnSort(this.sortAttribute.attribute, this.sortAttribute.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");
+      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;
+        }
+      }
+      sortFilterData();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    function sortFilterData() {
+      const filteredData = filter(props.data, filterAttributes.value, searchString.value);
+      if (sortAttribute.value.attribute === "") {
+        sortFilterResult.value = filteredData;
+      } else {
+        sortFilterResult.value = sort([...filteredData], sortAttribute.value.attribute, sortAttribute.value.ascending);
+      }
+      nextTick(() => {
+        tableCallbackOnSort(sortAttribute.value.attribute, sortAttribute.value.ascending);
+      });
+      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$p, [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$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"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
   },
-  inheritAttrs: false,
+  __name: "FDataTable",
   props: {
     /**
      * The rows to be listed.
@@ -12633,67 +12599,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 +12681,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$o)], 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);
 }
@@ -13121,7 +13079,7 @@ 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");
@@ -13191,7 +13149,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,7 +13175,7 @@ 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$n, [["render", _sfc_render$j]]);
 function isDialogueTreeEndQuestion(value) {
   return Boolean(value.userData);
 }
@@ -13307,7 +13265,7 @@ 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("li", {
@@ -13327,7 +13285,7 @@ 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 FDialogueTree = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$i]]);
 const _sfc_main$l = defineComponent({
   name: "FExpandablePanel",
   components: {
@@ -13421,7 +13379,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", {
@@ -13458,7 +13416,7 @@ 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 FExpandablePanel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$h]]);
 const _sfc_main$k = defineComponent({
   name: "FExpandableParagraph",
   components: {
@@ -13560,7 +13518,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", {
@@ -13591,7 +13549,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$k, [["render", _sfc_render$g]]);
 const DEFAULT_ICON = "file";
 const iconMap = {
   "image/*": "pic",
@@ -13699,7 +13657,7 @@ 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({
     id: _ctx.id,
@@ -13712,7 +13670,7 @@ 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 FFileItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$f]]);
 const _sfc_main$i = defineComponent({
   name: "FFileSelector",
   components: {
@@ -13779,7 +13737,7 @@ const _hoisted_1$i = {
 };
 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({
     id: _ctx.id,
@@ -13800,32 +13758,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$i, [["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 +13856,6 @@ function useExpandableTable(expandableAttribute, keyAttribute, describedby, emit
     return Boolean(expandableRows(row));
   }
   return {
-    expandedRows,
     isExpandableTable,
     hasExpandableSlot,
     toggleExpanded,
@@ -13901,73 +13867,117 @@ 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
-    };
-  },
-  inheritAttrs: false,
-  props: {
-    /**
-     * The rows to be listed.
-     * The rows will be listed in the given array order.
-     */
-    rows: {
-      type: Array,
-      required: true
-    },
-    /**
-     * If `true` hovering over a row will be highlighted
-     */
-    hover: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Unique attribute in rows.
-     */
-    keyAttribute: {
-      type: String,
-      required: true
-    },
-    /**
-     * Attribute of expandable content in rows.
-     * If provided, the table can contain expandable rows.
-     */
-    expandableAttribute: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Element id for aria-describedby on expandable rows to describe expanded content.
-     */
-    expandableDescribedby: {
-      type: String,
-      default: ""
-    },
-    /**
-     * If `true` the table rows will be selectable.
-     * @see 'select' and 'unselect' events.
+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"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "FInteractiveTable",
+  props: {
+    /**
+     * The rows to be listed.
+     * The rows will be listed in the given array order.
+     */
+    rows: {
+      type: Array,
+      required: true
+    },
+    /**
+     * If `true` hovering over a row will be highlighted
+     */
+    hover: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Unique attribute in rows.
+     */
+    keyAttribute: {
+      type: String,
+      required: true
+    },
+    /**
+     * Attribute of expandable content in rows.
+     * If provided, the table can contain expandable rows.
+     */
+    expandableAttribute: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Element id for aria-describedby on expandable rows to describe expanded content.
+     */
+    expandableDescribedby: {
+      type: String,
+      default: ""
+    },
+    /**
+     * If `true` the table rows will be selectable.
+     * @see 'select' and 'unselect' events.
      */
     selectable: {
       type: Boolean,
@@ -14023,230 +14033,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,205 +14272,137 @@ 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$h)], 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({
   name: "FLayoutApplicationTemplate",
   computed: {
@@ -14498,12 +14447,12 @@ const _hoisted_5$5 = {
   key: 0,
   class: "layout-application-template__footer"
 };
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$d(_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", {
     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$g, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
   if (target === null) {
     return {};
@@ -14700,7 +14649,7 @@ 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", {
     id: "layout-navigation__navigation",
@@ -14751,7 +14700,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$f, [["render", _sfc_render$c]]);
 class FRightPanelServiceImpl {
   constructor() {
     _defineProperty(this, "focusedElementBeforeOpenining", null);
@@ -14904,7 +14853,7 @@ const _hoisted_1$e = {
 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", {
     id: "layout-secondary__primary",
@@ -14943,13 +14892,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$e, [["render", _sfc_render$b]]);
+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"
+};
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "FList",
   props: {
     /**
      * The items to be listed.
@@ -15009,273 +14979,234 @@ 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$d, [(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({
   name: "FLoader",
   mixins: [TranslationMixin],
@@ -17397,9 +17328,9 @@ export {
   FConfirmModal,
   FContextMenu,
   FCrudButton,
-  FCrudDataset,
+  _sfc_main$I as FCrudDataset,
   _sfc_main$A as FCurrencyTextField,
-  FDataTable,
+  _sfc_main$o as FDataTable,
   FDatepickerField,
   FDialogueTree,
   FEmailTextField,
@@ -17414,14 +17345,14 @@ export {
   FFormModal,
   FValidationFormAction as FFormModalAction,
   FIcon,
-  FInteractiveTable,
+  _sfc_main$h as FInteractiveTable,
   FKUIConfigButtonOrder,
   FLabel,
   FLayoutApplicationTemplate,
   FLayoutLeftPanel,
   FLayoutRightPanel,
   FLayoutRightPanelService,
-  FList,
+  _sfc_main$d as FList,
   FLoader,
   _sfc_main$b as FLogo,
   FMessageBox,
@@ -17441,7 +17372,7 @@ export {
   FRadioField,
   FSearchTextField,
   FSelectField,
-  FSortFilterDataset,
+  _sfc_main$p as FSortFilterDataset,
   FSortFilterDatasetInjected,
   FStaticField,
   FTableColumn,