@fkui/vue 6.3.1 → 6.4.0

package/dist/cjs/index.cjs.js

@@ -1972,17 +1972,17 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _hoisted_1$X = ["aria-hidden"];
-const _hoisted_2$G = ["xlink:href"];
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$G = ["href"];
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps(_ctx.$attrs, {
     focusable: "false",
     class: ["icon", [_ctx.spriteKey, ..._ctx.modifiers]],
     "aria-hidden": _ctx.ariaHidden
   }), [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("use", {
-    "xlink:href": _ctx.spriteId
+    href: _ctx.spriteId
   }, null, 8, _hoisted_2$G)], 16, _hoisted_1$X);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$R]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$Q]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -4604,7 +4604,7 @@ const _hoisted_1$W = ["id"];
 const _hoisted_2$F = {
   class: "modal__backdrop"
 };
-const _hoisted_3$w = {
+const _hoisted_3$x = {
   class: "modal__inner-container"
 };
 const _hoisted_4$q = {
@@ -4634,7 +4634,7 @@ const _hoisted_10$3 = {
   class: "modal__shelf"
 };
 const _hoisted_11$3 = ["aria-label"];
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return _ctx.isOpen ? (vue.openBlock(), vue.createElementBlock("div", {
     key: 0,
@@ -4646,7 +4646,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     role: "dialog",
     "aria-modal": "true",
     onKeyup: _cache[3] || (_cache[3] = vue.withKeys((...args) => _ctx.onClose && _ctx.onClose(...args), ["esc"]))
-  }, [vue.createElementVNode("div", _hoisted_3$w, [vue.createElementVNode("div", {
+  }, [vue.createElementVNode("div", _hoisted_3$x, [vue.createElementVNode("div", {
     ref: "modalDialogContainer",
     class: vue.normalizeClass(["modal__dialog-container", _ctx.containerClasses])
   }, [vue.createElementVNode("div", _hoisted_4$q, [vue.createElementVNode("div", _hoisted_5$l, [vue.createElementVNode("div", _hoisted_6$g, [vue.createElementVNode("div", {
@@ -4664,7 +4664,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
   }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$W)) : vue.createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$Q]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$P]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -4801,11 +4801,11 @@ const _hoisted_1$V = {
   class: "button-group"
 };
 const _hoisted_2$E = ["onClick"];
-const _hoisted_3$v = {
+const _hoisted_3$w = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_modal = vue.resolveComponent("f-modal");
   return vue.openBlock(), vue.createBlock(_component_f_modal, {
     fullscreen: _ctx.fullscreen,
@@ -4824,12 +4824,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: vue.normalizeClass([button.classlist, "button-group__item"]),
         onClick: ($event) => _ctx.onClick(button)
-      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$E);
+      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$w, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$E);
     }), 128))])]),
     _: 3
   }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
-const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$P]]);
+const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$O]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
 const ALIGNMENT = ["top", "center", "bottom"];
 const FLOAT = ["left", "center", "right"];
@@ -4908,12 +4908,12 @@ const _sfc_main$1a = vue.defineComponent({
     }
   }
 });
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["iflex", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$O]]);
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$N]]);
 const _sfc_main$19 = vue.defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
@@ -4961,12 +4961,12 @@ const _sfc_main$19 = vue.defineComponent({
     }
   }
 });
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["iflex__item", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$N]]);
+const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$M]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -5038,14 +5038,14 @@ const _hoisted_1$U = {
 const _hoisted_2$D = {
   key: 0
 };
-const _hoisted_3$u = {
+const _hoisted_3$v = {
   class: "error-list__list error-list--list-style-none"
 };
 const _hoisted_4$p = ["onClick"];
 const _hoisted_5$k = {
   class: "error-list__link"
 };
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_flex_item = vue.resolveComponent("i-flex-item");
   const _component_i_flex = vue.resolveComponent("i-flex");
@@ -5068,7 +5068,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     })) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(_component_i_flex_item, {
       grow: ""
     }, {
-      default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$u, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
+      default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$v, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
         return vue.openBlock(), vue.createElementBlock("li", {
           key: item.id,
           class: vue.normalizeClass(_ctx.liClasses(item))
@@ -5099,7 +5099,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })]);
 }
-const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$M]]);
+const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$L]]);
 var es_iterator_every = {};
 var hasRequiredEs_iterator_every;
 function requireEs_iterator_every() {
@@ -5257,13 +5257,13 @@ const _sfc_main$17 = vue.defineComponent({
     }
   }
 });
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     onComponentValidity: _cache[0] || (_cache[0] = (...args) => _ctx.onComponentValidity && _ctx.onComponentValidity(...args)),
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [vue.renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$L]]);
+const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$K]]);
 var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
   FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
   FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
@@ -5415,7 +5415,7 @@ const _hoisted_2$C = {
   tabindex: "-1",
   role: "group"
 };
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_error_list = vue.resolveComponent("f-error-list");
   const _component_f_validation_group = vue.resolveComponent("f-validation-group");
   return vue.openBlock(), vue.createBlock(_component_f_validation_group, {
@@ -5441,7 +5441,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$K]]);
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$J]]);
 const _sfc_main$15 = vue.defineComponent({
   name: "FFormModal",
   components: {
@@ -5540,6 +5540,14 @@ const _sfc_main$15 = vue.defineComponent({
       default() {
       }
     },
+    /**
+     * List of buttons to display in the modal.
+     * Each button is defined as an FModalButtonDescriptor with the following properties:
+     * - `label` (String): The text displayed on the button.
+     * - `event` (String): The event emitted when the button is clicked.
+     * - `type` (String): The button type. Valid values are: "primary" or "secondary".
+     * - `submitButton` (Boolean): Whether the button is a submit button.
+     */
     buttons: {
       type: Array,
       required: false,
@@ -5595,11 +5603,11 @@ const _hoisted_1$S = {
   class: "button-group"
 };
 const _hoisted_2$B = ["type", "form", "onClick"];
-const _hoisted_3$t = {
+const _hoisted_3$u = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_validation_form = vue.resolveComponent("f-validation-form");
   const _component_f_modal = vue.resolveComponent("f-modal");
   return vue.openBlock(), vue.createBlock(_component_f_modal, {
@@ -5630,12 +5638,12 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
         class: vue.normalizeClass([button.classlist, "button-group__item"]),
         form: button.buttonType === "submit" ? _ctx.formId : void 0,
         onClick: ($event) => button.buttonType === "button" ? _ctx.onCancel() : false
-      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$t, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$B);
+      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$u, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$B);
     }), 128))])]),
     _: 3
   }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
 }
-const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$J]]);
+const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$I]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -5952,6 +5960,9 @@ const ValidationPrefixDirective = {
 };
 const ValidationPlugin = {
   install(app) {
+    for (const validator of logic.availableValidators) {
+      logic.ValidationService.registerValidator(validator);
+    }
     app.directive("validation", ValidationDirective);
     app.directive("validationPrefix", ValidationPrefixDirective);
   }
@@ -6008,12 +6019,12 @@ const _sfc_main$14 = vue.defineComponent({
 const _hoisted_1$R = {
   "data-test": "f-error-page"
 };
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, _cache[0] || (_cache[0] = [vue.createElementVNode("h1", null, "Fel", -1), vue.createTextVNode(), vue.createElementVNode("p", null, "Ett fel har uppstått.", -1), vue.createTextVNode(), vue.createElementVNode("a", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$I]]);
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$H]]);
 const _sfc_main$13 = vue.defineComponent({
   name: "FErrorHandlingApp",
   props: {
@@ -6043,7 +6054,7 @@ const _sfc_main$13 = vue.defineComponent({
     });
   }
 });
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", null, [_ctx.hasError ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.errorComponent), {
     key: 0,
     payload: _ctx.payload
@@ -6053,7 +6064,7 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   })]);
 }
-const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$H]]);
+const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$G]]);
 function isMonthBefore(date2, minDate) {
   return Boolean(minDate && date2.isBefore(minDate.startOfMonth()));
 }
@@ -6214,7 +6225,7 @@ const _hoisted_2$A = {
   class: "calendar-navbar__month",
   tabindex: "-1"
 };
-const _hoisted_3$s = ["aria-disabled", "aria-live"];
+const _hoisted_3$t = ["aria-disabled", "aria-live"];
 const _hoisted_4$o = {
   class: "sr-only"
 };
@@ -6222,7 +6233,7 @@ const _hoisted_5$j = ["aria-disabled", "aria-live"];
 const _hoisted_6$f = {
   class: "sr-only"
 };
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [vue.createElementVNode("div", _hoisted_2$A, vue.toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("button", {
     ref: "previousButton",
@@ -6234,7 +6245,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createElementVNode("span", _hoisted_4$o, vue.toDisplayString(_ctx.previousSrText), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
     class: vue.normalizeClass(_ctx.previousIconClasses),
     name: "arrow-right"
-  }, null, 8, ["class"])], 8, _hoisted_3$s), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("button", {
+  }, null, 8, ["class"])], 8, _hoisted_3$t), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("button", {
     ref: "nextButton",
     class: "calendar-navbar__arrow calendar-navbar__arrow--next",
     type: "button",
@@ -6246,7 +6257,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-right"
   }, null, 8, ["class"])], 8, _hoisted_5$j)]);
 }
-const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$G]]);
+const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$F]]);
 function getDayStartOffset(days) {
   return days[0].weekDay - 1;
 }
@@ -6332,7 +6343,7 @@ const _hoisted_2$z = {
   key: 0,
   class: "calendar-month__col--week"
 };
-const _hoisted_3$r = {
+const _hoisted_3$s = {
   key: 0,
   scope: "col",
   "aria-hidden": "true",
@@ -6359,7 +6370,7 @@ const _hoisted_11$2 = {
   "aria-hidden": "true"
 };
 const _hoisted_12$2 = ["colspan"];
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("table", {
     class: "calendar-month__table",
     role: "grid",
@@ -6380,7 +6391,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[14] || (_cache[14] = vue.createTextVNode()), _cache[15] || (_cache[15] = vue.createElementVNode("col", {
     class: "calendar-month__col--day"
-  }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3$r)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
+  }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3$s)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
     return vue.openBlock(), vue.createElementBlock("th", {
       key: weekday.name,
       scope: "col",
@@ -6422,7 +6433,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": "true"
   }, null, 8, _hoisted_12$2)])) : vue.createCommentVNode("", true)])], 40, _hoisted_1$P);
 }
-const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$F]]);
+const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$E]]);
 const DayStep = {
   ArrowRight: 1,
   ArrowLeft: -1,
@@ -6537,7 +6548,7 @@ const _sfc_main$10 = vue.defineComponent({
   }
 });
 const _hoisted_1$O = ["data-date", "tabindex", "onClick", "onKeydown"];
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_month_grid = vue.resolveComponent("i-calendar-month-grid");
   return vue.openBlock(), vue.createBlock(_component_i_calendar_month_grid, {
     value: _ctx.modelValue
@@ -6560,7 +6571,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$E]]);
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$D]]);
 const _sfc_main$$ = vue.defineComponent({
   name: "FCalendar",
   components: {
@@ -6615,7 +6626,7 @@ const _sfc_main$$ = vue.defineComponent({
 const _hoisted_1$N = {
   class: "calendar__wrapper"
 };
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_navbar = vue.resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = vue.resolveComponent("i-calendar-month");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [vue.createVNode(_component_i_calendar_navbar, {
@@ -6641,7 +6652,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["model-value", "min-date", "max-date", "tab-date", "onClick", "onUpdate:modelValue"])]);
 }
-const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$D]]);
+const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$C]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -6731,12 +6742,12 @@ const _hoisted_1$M = {
 const _hoisted_2$y = {
   class: "sr-only"
 };
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("span", {
     class: vue.normalizeClass(_ctx.dayClasses)
   }, [vue.createElementVNode("span", _hoisted_1$M, vue.toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$y, vue.toDisplayString(_ctx.srText), 1)], 2);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$C]]);
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$B]]);
 function useEventListener$1(target, event, callback) {
   vue.onMounted(() => {
     var _a;
@@ -6762,7 +6773,7 @@ const _hoisted_2$x = {
   key: 0,
   class: "card__header"
 };
-const _hoisted_3$q = {
+const _hoisted_3$r = {
   class: "card__content"
 };
 const _hoisted_4$m = {
@@ -6807,6 +6818,9 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
       if (!isMounted.value) {
         return;
       }
+      if (detail.elementId !== props.id) {
+        return;
+      }
       if (!props.focusRef) {
         throw new Error("Element to focus on when card is invalid (`focusRef`) is required when using card validation.");
       }
@@ -6852,7 +6866,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
           _: 1
         })]),
         _: 1
-      })) : vue.createCommentVNode("", true)]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$q, [vue.renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = vue.createTextVNode()), hasFooterSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({
+      })) : vue.createCommentVNode("", true)]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$r, [vue.renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = vue.createTextVNode()), hasFooterSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({
         hasError: hasError.value,
         validationMessage: validationMessage.value
       })))])) : vue.createCommentVNode("", true)], 42, _hoisted_1$L);
@@ -6913,7 +6927,7 @@ const _sfc_main$Y = vue.defineComponent({
     }
   }
 });
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -6925,7 +6939,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
-const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$B]]);
+const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$A]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -7491,7 +7505,7 @@ const _sfc_main$X = vue.defineComponent({
     }
   }
 });
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
     key: 0,
     to: _ctx.teleportTarget,
@@ -7512,7 +7526,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$A]]);
+const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$z]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -7718,7 +7732,7 @@ const _hoisted_1$K = {
   ref: "wrapper",
   class: "popup-error__wrapper"
 };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return _ctx.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
     key: 0,
@@ -7742,7 +7756,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: "button__icon"
   })])], 6)], 512)], 2)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$z]]);
+const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$y]]);
 function numItems(itemHeight, availableHeight, verticalSpacing) {
   const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
   return Math.min(itemsFit, 7);
@@ -8272,13 +8286,13 @@ const _hoisted_2$v = {
   role: "menu",
   class: "ipopupmenu__list"
 };
-const _hoisted_3$p = ["onClick"];
+const _hoisted_3$q = ["onClick"];
 const _hoisted_4$l = ["data-ref-index", "href", "target"];
 const _hoisted_5$h = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_popup = vue.resolveComponent("i-popup");
   return vue.openBlock(), vue.createBlock(_component_i_popup, {
     class: "ipopupmenu",
@@ -8309,12 +8323,12 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
         role: "menuitem",
         target: item.target,
         tabindex: "0"
-      }, [_ctx.isSelected(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$h, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
+      }, [_ctx.isSelected(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$h, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$q);
     }), 128))])], 8, _hoisted_1$I)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
 }
-const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$y]]);
+const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$x]]);
 const ANIMATION_DURATION = 500;
 const NO_CSS_CLASSES = "";
 const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
@@ -8517,13 +8531,13 @@ const _hoisted_1$H = {
   ref: "content",
   "data-test": "animation-content"
 };
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(_ctx.animationClasses),
     style: vue.normalizeStyle(_ctx.heightStyle)
   }, [_ctx.shouldVIf ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [vue.renderSlot(_ctx.$slots, "default")], 512)), [[vue.vShow, _ctx.shouldVShow]]) : vue.createCommentVNode("", true)], 6);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$x]]);
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$w]]);
 const _sfc_main$S = vue.defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
@@ -8539,13 +8553,13 @@ const _sfc_main$S = vue.defineComponent({
   }
 });
 const _hoisted_1$G = ["href"];
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
   }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$G);
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$w]]);
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$v]]);
 function filterOptions(options, filter2, selectMode) {
   if (logic.isEmpty(filter2) || selectMode) {
     return options;
@@ -8795,7 +8809,7 @@ const _hoisted_1$F = {
   class: "combobox"
 };
 const _hoisted_2$u = ["id"];
-const _hoisted_3$o = ["id", "aria-selected", "onClick"];
+const _hoisted_3$p = ["id", "aria-selected", "onClick"];
 const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "IComboboxDropdown",
   props: {
@@ -8857,7 +8871,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
               "combobox__listbox__option--highlight": isOptionActive(item)
             }]),
             onClick: vue.withModifiers(($event) => onOptionClick(item), ["stop", "prevent"])
-          }, vue.toDisplayString(item), 11, _hoisted_3$o);
+          }, vue.toDisplayString(item), 11, _hoisted_3$p);
         }), 128))], 8, _hoisted_2$u)]),
         _: 1
       }, 8, ["is-open", "anchor", "num-of-items", "active-element"])]);
@@ -9149,7 +9163,7 @@ const _hoisted_1$D = ["aria-expanded"];
 const _hoisted_2$t = {
   class: "icon-stack icon-stack--tooltip"
 };
-const _hoisted_3$n = {
+const _hoisted_3$o = {
   class: "sr-only"
 };
 const _hoisted_4$k = {
@@ -9163,7 +9177,7 @@ const _hoisted_5$g = {
 const _hoisted_6$d = {
   class: "tooltip__footer"
 };
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [(vue.openBlock(), vue.createBlock(vue.Teleport, {
     disabled: _ctx.iconTarget === null,
@@ -9178,7 +9192,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "circle"
   }), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
     name: "i"
-  }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$n, vue.toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
+  }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$o, vue.toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
     ref: "wrapper",
     class: "tooltip"
   }, _ctx.$attrs), [_ctx.ready ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$k, [_ctx.hasHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.headerTag), {
@@ -9196,7 +9210,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])])])) : vue.createCommentVNode("", true)], 16)], 64);
 }
-const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$v]]);
+const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$u]]);
 function* labelClasses(options) {
   const {
     labelClass
@@ -9470,7 +9484,7 @@ const _hoisted_2$s = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_3$m = {
+const _hoisted_3$n = {
   key: 0,
   class: "label__message label__message--error"
 };
@@ -9497,7 +9511,7 @@ const _hoisted_9$4 = {
   key: 0,
   class: "label__message label__message--error"
 };
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("fieldset", {
     id: _ctx.id,
@@ -9512,7 +9526,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
     hasError: _ctx.hasError,
     validationMessage: _ctx.validity.validationMessage
-  })), () => [_ctx.hasError ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$m, [vue.createVNode(_component_f_icon, {
+  })), () => [_ctx.hasError ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$n, [vue.createVNode(_component_f_icon, {
     class: "label__icon--left",
     name: "error"
   }), vue.createTextVNode(" " + vue.toDisplayString(_ctx.validity.validationMessage), 1)])) : vue.createCommentVNode("", true)])], 2)), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.hasCheckbox ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$j, [_ctx.children.length === 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$f, vue.toDisplayString(_ctx.checkboxCheckedScreenReaderText), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$c, vue.toDisplayString(_ctx.numberOfCheckedCheckboxesScreenText), 1))])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.hasTooltipSlot ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -9534,7 +9548,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass(_ctx.groupContentClass)
   }, [vue.renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$C);
 }
-const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$u]]);
+const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$t]]);
 const anyType$1 = [String, Object, Array, Number, Date, Boolean];
 const _sfc_main$N = vue.defineComponent({
   name: "FCheckboxField",
@@ -9724,7 +9738,7 @@ const _sfc_main$N = vue.defineComponent({
 });
 const _hoisted_1$B = ["id", "disabled"];
 const _hoisted_2$r = ["for"];
-const _hoisted_3$l = {
+const _hoisted_3$m = {
   key: 0,
   class: "checkbox__details"
 };
@@ -9732,7 +9746,7 @@ const _hoisted_4$i = {
   key: 0,
   class: "checkbox__details"
 };
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["checkbox", _ctx.disabledClass]),
     onValidity: _cache[2] || (_cache[2] = (...args) => _ctx.onValidity && _ctx.onValidity(...args))
@@ -9750,7 +9764,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [vue.renderSlot(_ctx.$slots, "default"), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.$slots.details ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$l, [_cache[3] || (_cache[3] = vue.createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$m, [_cache[3] || (_cache[3] = vue.createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -9762,7 +9776,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$r)], 34);
 }
-const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$t]]);
+const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$s]]);
 var es_iterator_some = {};
 var hasRequiredEs_iterator_some;
 function requireEs_iterator_some() {
@@ -10012,13 +10026,13 @@ const _hoisted_2$q = {
   tabindex: "-1",
   class: "contextmenu__list"
 };
-const _hoisted_3$k = ["onClick"];
+const _hoisted_3$l = ["onClick"];
 const _hoisted_4$h = ["tabindex"];
 const _hoisted_5$e = {
   key: 0,
   class: "contextmenu__separator"
 };
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_popup = vue.resolveComponent("i-popup");
   return vue.openBlock(), vue.createBlock(_component_i_popup, {
@@ -10053,12 +10067,12 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["name", "library"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("a", {
         ref_for: true,
         ref: "anchors"
-      }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$e)) : vue.createCommentVNode("", true)], 8, _hoisted_3$k);
+      }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$e)) : vue.createCommentVNode("", true)], 8, _hoisted_3$l);
     }), 128))], 512)], 40, _hoisted_1$A)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element"]);
 }
-const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$s]]);
+const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$r]]);
 var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["ADD"] = 0] = "ADD";
   Operation2[Operation2["DELETE"] = 1] = "DELETE";
@@ -10302,7 +10316,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
       isFormModalOpen.value = true;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), hasAddSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [vue.createElementVNode("button", {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [vue.renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = vue.createTextVNode()), hasAddSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [vue.createElementVNode("button", {
         "data-test": "f-crud-dataset-add-button",
         type: "button",
         class: "button button--tertiary crud-dataset__add-button",
@@ -10310,7 +10324,9 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode(vue.unref(FIcon), {
         class: "button__icon",
         name: "plus"
-      }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "add-button", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createVNode(vue.unref(FFormModal), {
+      }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "add-button", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "buttons", vue.normalizeProps(vue.guardReactiveProps({
+        buttonClasses: ["button", "button--tertiary", "crud-dataset__add-button"]
+      })))])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(vue.unref(FFormModal), {
         "is-open": isFormModalOpen.value,
         "aria-close-text": vue.unref($t2)("fkui.crud-dataset.modal.close", "Stäng"),
         buttons: formModalButtons.value,
@@ -10327,13 +10343,13 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
           key: 0
         }, {
           item: item.value
-        }))) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), operation.value === vue.unref(Operation).MODIFY ? vue.renderSlot(_ctx.$slots, "modify", vue.normalizeProps(vue.mergeProps({
+        }))) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), operation.value === vue.unref(Operation).MODIFY ? vue.renderSlot(_ctx.$slots, "modify", vue.normalizeProps(vue.mergeProps({
           key: 1
         }, {
           item: item.value
         }))) : vue.createCommentVNode("", true)]),
         _: 3
-      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(vue.unref(FConfirmModal), {
+      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createVNode(vue.unref(FConfirmModal), {
         "is-open": isConfirmModalOpen.value,
         buttons: confirmDeleteButtons.value,
         onConfirm: onDeleteConfirm,
@@ -10361,6 +10377,10 @@ const _sfc_main$K = vue.defineComponent({
   },
   mixins: [TranslationMixin],
   props: {
+    /**
+     * The action to be performed by the button.
+     * Must be one of the following values: "delete" or "modify".
+     */
     action: {
       type: String,
       required: true,
@@ -10368,14 +10388,24 @@ const _sfc_main$K = vue.defineComponent({
         return ["delete", "modify"].includes(value);
       }
     },
+    /**
+     * Determines if an icon should be displayed on the button.
+     */
     icon: {
       type: Boolean,
       default: false
     },
+    /**
+     * The item that the action will be performed on.
+     */
     item: {
       type: Object,
       required: true
     },
+    /**
+     * Determines if the button should display a label.
+     * If false, the button will use a visually hidden text for accessibility.
+     */
     label: {
       type: Boolean,
       default: false
@@ -10414,7 +10444,7 @@ const _hoisted_1$y = {
   key: 1,
   class: "sr-only"
 };
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("button", {
     type: "button",
@@ -10428,7 +10458,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   }, () => [vue.createTextVNode(vue.toDisplayString(_ctx.buttonText), 1)]) : vue.createCommentVNode("", true)]);
 }
-const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$r]]);
+const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$q]]);
 function ActivateItemInjected() {
   return {
     registerCallbackAfterItemAdd: vue.inject("registerCallbackAfterItemAdd", () => void 0),
@@ -11077,9 +11107,11 @@ function FTableInjected() {
     renderColumns: vue.inject("renderColumns", false)
   };
 }
-const _sfc_main$J = vue.defineComponent({
-  name: "FTableColumn",
-  inheritAttrs: false,
+const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "FTableColumn",
   props: {
     /**
      * Unique (per-table) identifier.
@@ -11166,71 +11198,58 @@ const _sfc_main$J = vue.defineComponent({
       }
     }
   },
-  setup() {
+  setup(__props) {
     const {
       renderColumns,
       setVisibilityColumn: setVisibilityColumn2,
       addColumn: addColumn2
     } = FTableInjected();
-    return {
-      renderColumns,
-      setVisibilityColumn: setVisibilityColumn2,
-      addColumn: addColumn2
-    };
-  },
-  computed: {
-    classes() {
-      return ["table__column", `table__column--${this.type}`];
-    },
-    scope() {
-      return this.rowHeader ? "row" : null;
-    },
-    tagName() {
-      if (this.rowHeader) {
+    const props = __props;
+    const classes = vue.computed(() => {
+      return ["table__column", `table__column--${props.type}`];
+    });
+    const scope = vue.computed(() => {
+      return props.rowHeader ? "row" : null;
+    });
+    const tagName2 = vue.computed(() => {
+      if (props.rowHeader) {
         return "th";
       } else {
         return "td";
       }
-    }
-  },
-  watch: {
-    visible: {
-      handler: function() {
-        this.setVisibilityColumn(this.name, this.visible);
-      }
-    }
-  },
-  created() {
-    if (this.shrink && this.expand) {
-      throw new Error("Table cannot have both shrink and expand enabled at the same time");
-    }
-    const size = this.shrink ? FTableColumnSize.SHRINK : FTableColumnSize.EXPAND;
-    this.addColumn({
-      name: this.name,
-      title: this.title,
-      description: this.description || void 0,
-      id: logic.ElementIdService.generateElementId("column"),
-      size,
-      type: this.type,
-      visible: this.visible,
-      sortable: false,
-      sort: FTableColumnSort.UNSORTED
     });
+    vue.watch(() => props.visible, () => setVisibilityColumn2(props.name, props.visible));
+    vue.onMounted(() => {
+      if (props.shrink && props.expand) {
+        throw new Error("Table cannot have both shrink and expand enabled at the same time");
+      }
+      const size = props.shrink ? FTableColumnSize.SHRINK : FTableColumnSize.EXPAND;
+      addColumn2({
+        name: props.name,
+        title: props.title,
+        description: props.description || void 0,
+        id: logic.ElementIdService.generateElementId("column"),
+        size,
+        type: props.type,
+        visible: props.visible,
+        sortable: false,
+        sort: FTableColumnSort.UNSORTED
+      });
+    });
+    return (_ctx, _cache) => {
+      return vue.unref(renderColumns) && __props.visible ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName2.value), vue.mergeProps({
+        key: 0,
+        class: classes.value,
+        scope: scope.value
+      }, _ctx.$attrs), {
+        default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), _cache[1] || (_cache[1] = vue.createElementVNode("span", {
+          class: "sr-only"
+        }, " ", -1))]),
+        _: 3
+      }, 16, ["class", "scope"])) : vue.createCommentVNode("", true);
+    };
   }
 });
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.renderColumns && _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), vue.mergeProps({
-    key: 0,
-    class: _ctx.classes,
-    scope: _ctx.scope
-  }, _ctx.$attrs), {
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), _cache[1] || (_cache[1] = vue.createElementVNode("span", {
-      class: "sr-only"
-    }, " ", -1))]),
-    _: 3
-  }, 16, ["class", "scope"])) : vue.createCommentVNode("", true);
-}
-const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: vue.inject("sort", () => void 0),
@@ -11284,7 +11303,7 @@ const _hoisted_2$o = {
   key: 0,
   ref: "tooltipAttachTo"
 };
-const _hoisted_3$j = ["for"];
+const _hoisted_3$k = ["for"];
 const _hoisted_4$g = ["for"];
 const _hoisted_5$d = {
   key: 0,
@@ -11300,7 +11319,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.$slots.tooltip ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [_ctx.hasDefaultSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [vue.createElementVNode("label", {
     class: "label",
     for: _ctx.forProperty
-  }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$j)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("label", {
+  }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$k)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("label", {
     key: 1,
     class: "label sr-separator",
     for: _ctx.forProperty
@@ -11895,7 +11914,7 @@ const _hoisted_2$n = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_3$i = {
+const _hoisted_3$j = {
   key: 0,
   class: "sr-only"
 };
@@ -11938,7 +11957,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, [_ctx.descriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$n, vue.toDisplayString(_ctx.descriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.descriptionText), 1)], 2)) : vue.createCommentVNode("", true), _cache[9] || (_cache[9] = vue.createTextVNode()), _ctx.discreteDescriptionText ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 1,
       class: vue.normalizeClass(formatDescriptionClass)
-    }, [_ctx.discreteDescriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$i, vue.toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : vue.createCommentVNode("", true)])]),
+    }, [_ctx.discreteDescriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$j, vue.toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : vue.createCommentVNode("", true)])]),
     "error-message": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
       hasError: _ctx.hasError,
       validationMessage: _ctx.validationMessage
@@ -12825,7 +12844,7 @@ const _hoisted_1$s = {
 const _hoisted_2$m = {
   class: "sort-filter-dataset__search"
 };
-const _hoisted_3$h = {
+const _hoisted_3$i = {
   class: "sr-only"
 };
 const _hoisted_4$e = ["title"];
@@ -13062,7 +13081,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                 maxlength: "64",
                 onInput: onSearchInput
               }, {
-                default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$h, vue.toDisplayString(__props.placeholderFilter), 1)]),
+                default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$i, vue.toDisplayString(__props.placeholderFilter), 1)]),
                 _: 1
               }, 8, ["modelValue", "placeholder"]), _cache[4] || (_cache[4] = vue.createTextVNode()), showClearButton.value ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 0,
@@ -13112,7 +13131,7 @@ const _hoisted_1$r = ["tabindex"];
 const _hoisted_2$l = {
   key: 0
 };
-const _hoisted_3$g = {
+const _hoisted_3$h = {
   class: "table__row"
 };
 const _hoisted_4$d = ["innerHTML"];
@@ -13285,7 +13304,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           key: column.id,
           class: vue.normalizeClass(column.size)
         }, null, 2);
-      }), 128))]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$g, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
+      }), 128))]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$h, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
           key: column.id,
           scope: "col",
@@ -13655,7 +13674,7 @@ const _hoisted_1$q = {
   class: "datepicker-field"
 };
 const _hoisted_2$k = ["disabled", "aria-expanded"];
-const _hoisted_3$f = {
+const _hoisted_3$g = {
   class: "sr-only"
 };
 const _hoisted_4$c = {
@@ -13706,7 +13725,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onClickCalendarButton())
     }, [vue.createVNode(_component_f_icon, {
       name: "calendar"
-    }), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$f, vue.toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
+    }), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$g, vue.toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.datepicker-field.label", "Datum")), 1)]), _cache[7] || (_cache[7] = vue.createTextVNode()), _cache[8] || (_cache[8] = vue.createTextVNode()), _cache[9] || (_cache[9] = vue.createTextVNode()), _cache[10] || (_cache[10] = vue.createTextVNode())]),
     _: 2
   }, [_ctx.$slots.tooltip ? {
@@ -13846,7 +13865,7 @@ const _hoisted_2$j = {
   key: 0,
   class: "dialogue-tree__list"
 };
-const _hoisted_3$e = ["onClick"];
+const _hoisted_3$f = ["onClick"];
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [_ctx.options.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2$j, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option, index) => {
@@ -13860,7 +13879,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: ($event) => _ctx.onClickedOption(option, index)
     }, [vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "arrow-right"
-    })], 8, _hoisted_3$e)]);
+    })], 8, _hoisted_3$f)]);
   }), 128))])) : vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({
     key: 1
   }, {
@@ -13915,6 +13934,10 @@ const _sfc_main$o = vue.defineComponent({
       required: false,
       default: 0
     },
+    /**
+     * Text template for the screen reader notification text.
+     * Use `%VALUE%` as a placeholder for the number of notifications.
+     */
     screenReaderNotificationTemplate: {
       type: String,
       required: false,
@@ -13946,7 +13969,7 @@ const _hoisted_1$o = ["aria-expanded", "aria-controls"];
 const _hoisted_2$i = {
   class: "expandable-panel__icon"
 };
-const _hoisted_3$d = {
+const _hoisted_3$e = {
   class: "icon-stack"
 };
 const _hoisted_4$b = ["title"];
@@ -13975,7 +13998,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickHeadingButton && _ctx.onClickHeadingButton(...args))
-    }), [vue.createElementVNode("span", _hoisted_2$i, [vue.createElementVNode("span", _hoisted_3$d, [vue.createVNode(_component_f_icon, {
+    }), [vue.createElementVNode("span", _hoisted_2$i, [vue.createElementVNode("span", _hoisted_3$e, [vue.createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "dash"
@@ -14085,7 +14108,7 @@ const _hoisted_1$n = ["aria-expanded", "aria-controls"];
 const _hoisted_2$h = {
   class: "expandable-paragraph__icon"
 };
-const _hoisted_3$c = {
+const _hoisted_3$d = {
   class: "icon-stack"
 };
 const _hoisted_4$a = {
@@ -14117,7 +14140,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickMinimize && _ctx.onClickMinimize(...args))
-    }), [vue.createElementVNode("span", _hoisted_2$h, [vue.createElementVNode("span", _hoisted_3$c, [vue.createVNode(_component_f_icon, {
+    }), [vue.createElementVNode("span", _hoisted_2$h, [vue.createElementVNode("span", _hoisted_3$d, [vue.createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "dash"
@@ -14225,7 +14248,7 @@ const _hoisted_1$m = {
 const _hoisted_2$g = {
   class: "file-item__row"
 };
-const _hoisted_3$b = ["id"];
+const _hoisted_3$c = ["id"];
 const _hoisted_4$9 = {
   class: "icon-stack button__icon icon-stack--new-window"
 };
@@ -14248,7 +14271,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     name: "new-window"
   }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
     name: _ctx.iconName
-  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_5$7, vue.toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_6$5, " " + vue.toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$b), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.isMimeTypeChanged ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$4, vue.toDisplayString(_ctx.mimeTypeChangedText), 1)) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), _cache[7] || (_cache[7] = vue.createElementVNode("hr", {
+  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_5$7, vue.toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_6$5, " " + vue.toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$c), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.isMimeTypeChanged ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$4, vue.toDisplayString(_ctx.mimeTypeChangedText), 1)) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), _cache[7] || (_cache[7] = vue.createElementVNode("hr", {
     class: "file-item__separator"
   }, null, -1))]);
 }
@@ -14274,6 +14297,9 @@ const _sfc_main$l = vue.defineComponent({
       required: false,
       default: () => logic.ElementIdService.generateElementId()
     },
+    /**
+     * Disables the file selector.
+     */
     disabled: {
       type: Boolean,
       required: false,
@@ -14318,7 +14344,7 @@ const _hoisted_1$l = {
   class: "file-selector"
 };
 const _hoisted_2$f = ["id", "aria-labelledby", "aria-disabled"];
-const _hoisted_3$a = ["id", "for"];
+const _hoisted_3$b = ["id", "for"];
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [vue.createElementVNode("input", vue.mergeProps({
@@ -14338,7 +14364,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createVNode(_component_f_icon, {
     class: "button__icon",
     name: "paper-clip"
-  }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$a)]);
+  }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$b)]);
 }
 const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$e]]);
 const keybindings = {
@@ -14456,7 +14482,7 @@ const _hoisted_1$k = ["role"];
 const _hoisted_2$e = {
   key: 0
 };
-const _hoisted_3$9 = {
+const _hoisted_3$a = {
   key: 0,
   class: "table__column--shrink"
 };
@@ -14915,7 +14941,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), vue.createElementVNode("table", vue.mergeProps({
         class: ["table", tableClasses.value],
         role: tableRole.value
-      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$e, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$e, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$a)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("col", {
           key: column.id,
           class: vue.normalizeClass(column.size)
@@ -15037,7 +15063,7 @@ const _hoisted_2$d = {
   ref: "header",
   class: "layout-application-template__header"
 };
-const _hoisted_3$8 = {
+const _hoisted_3$9 = {
   key: 1
 };
 const _hoisted_4$7 = {
@@ -15051,7 +15077,7 @@ const _hoisted_5$5 = {
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [_ctx.showHeader || _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$d, [_ctx.showHeader ? vue.renderSlot(_ctx.$slots, "header", {
     key: 0
-  }) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_3$8, [vue.renderSlot(_ctx.$slots, "top-navigation")])) : vue.createCommentVNode("", true)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("main", _hoisted_4$7, [vue.renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.showFooter ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_5$5, [vue.renderSlot(_ctx.$slots, "footer")])) : vue.createCommentVNode("", true)], 512)]);
+  }) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_3$9, [vue.renderSlot(_ctx.$slots, "top-navigation")])) : vue.createCommentVNode("", true)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("main", _hoisted_4$7, [vue.renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.showFooter ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_5$5, [vue.renderSlot(_ctx.$slots, "footer")])) : vue.createCommentVNode("", true)], 512)]);
 }
 const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
@@ -15243,7 +15269,7 @@ const _hoisted_1$i = {
   class: "layout-navigation"
 };
 const _hoisted_2$c = ["aria-expanded"];
-const _hoisted_3$7 = {
+const _hoisted_3$8 = {
   class: "layout-navigation__navigation__inner"
 };
 const _hoisted_4$6 = {
@@ -15257,7 +15283,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     class: "layout-navigation__navigation",
     style: vue.normalizeStyle(_ctx.navigationStyle),
     "aria-expanded": _ctx.isOpen
-  }, [vue.createElementVNode("div", _hoisted_3$7, [_ctx.isOpen ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+  }, [vue.createElementVNode("div", _hoisted_3$8, [_ctx.isOpen ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 0
   }, [vue.createElementVNode("div", {
     class: "layout-navigation__navigation__inner__title",
@@ -15502,7 +15528,7 @@ const _hoisted_2$a = {
   key: 0,
   class: "list__item"
 };
-const _hoisted_3$6 = {
+const _hoisted_3$7 = {
   class: "list__item__itempane"
 };
 const _hoisted_4$5 = ["id", "aria-labelledby", "tabindex", "onKeydown"];
@@ -15762,7 +15788,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
         }, {
           item
         }))], 512)]);
-      }), 128)), _cache[0] || (_cache[0] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$a, [vue.createElementVNode("div", _hoisted_3$6, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
+      }), 128)), _cache[0] || (_cache[0] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$a, [vue.createElementVNode("div", _hoisted_3$7, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
         key: 1,
         ref_key: "ulElement",
         ref: ulElement,
@@ -16561,7 +16587,7 @@ const _sfc_main$c = vue.defineComponent({
 });
 const _hoisted_1$c = ["aria-label"];
 const _hoisted_2$8 = ["data-ref-index", "onClick"];
-const _hoisted_3$5 = {
+const _hoisted_3$6 = {
   class: "imenu__list__anchor-container"
 };
 const _hoisted_4$4 = ["data-ref-index", "href", "target"];
@@ -16602,7 +16628,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       class: vue.normalizeClass(_ctx.itemClasses(item, index)),
       role: "none",
       onClick: (event) => _ctx.onClickItem(event, item)
-    }, [vue.createElementVNode("div", _hoisted_3$5, [vue.createElementVNode("a", {
+    }, [vue.createElementVNode("div", _hoisted_3$6, [vue.createElementVNode("a", {
       ref_for: true,
       ref: "anchors",
       "data-ref-index": index,
@@ -16697,7 +16723,7 @@ const _hoisted_2$7 = {
   key: 0,
   class: "offline"
 };
-const _hoisted_3$4 = {
+const _hoisted_3$5 = {
   class: "icon-stack icon-stack--error"
 };
 const _hoisted_4$3 = {
@@ -16720,7 +16746,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
       shrink: "",
       align: "center"
     }, {
-      default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$4, [vue.createVNode(_component_f_icon, {
+      default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$5, [vue.createVNode(_component_f_icon, {
         name: "triangle"
       }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
         name: "alert"
@@ -16849,7 +16875,7 @@ const _hoisted_1$9 = {
 const _hoisted_2$5 = {
   key: 0
 };
-const _hoisted_3$3 = {
+const _hoisted_3$4 = {
   ref: "header",
   class: "page-header"
 };
@@ -16870,7 +16896,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "skip-link-text")]),
     _: 3
-  }, 8, ["href"])])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$3, [_ctx.hasLogo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.headerTag), {
+  }, 8, ["href"])])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$4, [_ctx.hasLogo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.headerTag), {
     class: "page-header__app-name"
   }, {
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
@@ -17015,7 +17041,7 @@ registerLayout({
     }
   }
 });
-const styleContent = ':host {\n    display: block;\n}\n\n.page-layout {\n    display: grid;\n    height: 100cqh;\n    width: min(100%, 100cqw);\n\n    &[part~="simple"] {\n        grid-template:\n            "header" min-content\n            "content" 1fr\n            "footer" min-content\n            / 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="left-panel"] {\n        grid-template:\n            "header header" min-content\n            "left content" 1fr\n            "footer footer" min-content\n            / min-content 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"] {\n            background: var(--fkds-color-background-secondary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="right-panel"] {\n        grid-template:\n            "header header" min-content\n            "content right" 1fr\n            "footer footer" min-content\n            / 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="three-column"] {\n        grid-template:\n            "header header header" min-content\n            "left content right" 1fr\n            "footer footer footer" min-content\n            / min-content 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"],\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n}\n\n.page-layout__area {\n    display: flex;\n    position: relative;\n\n    &[data-direction="column"] {\n        flex-direction: column;\n    }\n\n    &[data-direction="row"] {\n        flex-direction: row;\n    }\n\n    &[data-scroll] {\n        overflow-y: auto;\n    }\n\n    &:empty {\n        display: none;\n    }\n}\n\n:host ::slotted(*) {\n    display: contents;\n}\n';
+const styleContent = ':host {\n    display: block;\n}\n\n.page-layout {\n    display: grid;\n    height: 100cqh;\n    width: min(100%, 100cqw);\n\n    &[part~="simple"] {\n        grid-template:\n            "header" min-content\n            "content" 1fr\n            "footer" min-content\n            / 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="left-panel"] {\n        grid-template:\n            "header header" min-content\n            "left content" 1fr\n            "footer footer" min-content\n            / min-content 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="right-panel"] {\n        grid-template:\n            "header header" min-content\n            "content right" 1fr\n            "footer footer" min-content\n            / 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area right"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="three-column"] {\n        grid-template:\n            "header header header" min-content\n            "left content right" 1fr\n            "footer footer footer" min-content\n            / min-content 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"],\n        [part="area right"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n}\n\n.page-layout__area {\n    display: flex;\n    position: relative;\n    background: var(--f-page-layout-background);\n    color: var(--f-page-layout-color);\n\n    &[data-direction="column"] {\n        flex-direction: column;\n    }\n\n    &[data-direction="row"] {\n        flex-direction: row;\n    }\n\n    &[data-scroll] {\n        overflow-y: auto;\n    }\n\n    &:empty {\n        display: none;\n    }\n}\n\n:host ::slotted(*) {\n    display: contents;\n}\n';
 const stubLayout = defineLayout({
   name: "",
   areas: {}
@@ -17292,7 +17318,7 @@ const _hoisted_1$7 = {
   class: "progress"
 };
 const _hoisted_2$4 = ["aria-label", "aria-valuenow", "aria-valuetext"];
-const _hoisted_3$2 = {
+const _hoisted_3$3 = {
   class: "sr-only"
 };
 const MIN_VALUE = 0;
@@ -17363,7 +17389,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         "aria-valuenow": progressValueNow.value,
         "aria-valuetext": progressText.value,
         style: vue.normalizeStyle(cssWidth.value)
-      }, [vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
+      }, [vue.createElementVNode("span", _hoisted_3$3, vue.toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
     };
   }
 });
@@ -17526,7 +17552,7 @@ const _sfc_main$6 = vue.defineComponent({
 });
 const _hoisted_1$6 = ["id", "disabled"];
 const _hoisted_2$3 = ["for"];
-const _hoisted_3$1 = {
+const _hoisted_3$2 = {
   key: 0,
   class: "radio-button__details"
 };
@@ -17548,7 +17574,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [vue.renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.$slots.details ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, [_cache[1] || (_cache[1] = vue.createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, [_cache[1] || (_cache[1] = vue.createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -17679,7 +17705,7 @@ function computeCssValue(raw, total, auto) {
     return percent * total;
   } else if (raw === "0") {
     return 0;
-  } else if (raw === "auto") {
+  } else if (raw === "auto" || raw === "") {
     return auto;
   } else {
     throw new Error(`Cant parse size from "${raw}"`);
@@ -17727,10 +17753,17 @@ function useStorage(options) {
     loaded.value = true;
   });
 }
-const _hoisted_1$5 = ["aria-orientation"];
+const _hoisted_1$5 = {
+  key: 0,
+  class: "resize__offset"
+};
 const _hoisted_2$2 = ["aria-orientation"];
+const _hoisted_3$1 = ["aria-orientation"];
 const STEP_SIZE = 10;
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FResizePane.ce",
   props: {
     disabled: {
@@ -17748,10 +17781,22 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     initial: {
       default: "50%",
       type: String
+    },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
+    offset: {
+      default: 0,
+      type: Number
     }
   },
-  setup(__props) {
+  emits: ["resize"],
+  setup(__props, {
+    emit: __emit
+  }) {
     const props = __props;
+    const emit = __emit;
     const root = vue.shallowRef();
     const content = vue.ref();
     const separator = vue.ref();
@@ -17760,11 +17805,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       max: -1,
       current: -1
     });
-    const separatorSize = vue.ref(0);
     const layoutSize = vue.ref(0);
     const storageKey = vue.computed(() => area.value ? `layout/${area.value}/size` : null);
     const {
       attachPanel: attachment,
+      direction,
       area
     } = useAreaData(root);
     useKeyboardHandler({
@@ -17797,11 +17842,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     });
     const minSize = vue.computed(() => {
       const total = layoutSize.value;
-      return Math.floor(aggregateCssValue(props.min, total, 0, Math.max) + separatorSize.value);
+      return Math.floor(aggregateCssValue(props.min, total, 0, Math.max));
     });
     const maxSize = vue.computed(() => {
       const total = layoutSize.value;
-      return Math.floor(aggregateCssValue(props.max, total, total, Math.min) + separatorSize.value);
+      return Math.max(Math.floor(aggregateCssValue(props.max, total, total, Math.min)), minSize.value);
     });
     const initialSize = vue.computed(() => {
       const total = layoutSize.value;
@@ -17814,6 +17859,9 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         return "vertical";
       }
     });
+    const classes = vue.computed(() => {
+      return [`resize--${attachment.value}`, `resize--${direction.value}`, props.overlay ? "resize--overlay" : void 0, props.disabled ? "resize--disabled" : void 0];
+    });
     const layoutElement = vue.computed(() => {
       var _host$closest;
       if (!root.value) {
@@ -17823,6 +17871,8 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       const host = shadow.host;
       return (_host$closest = host.closest("ce-page-layout")) !== null && _host$closest !== void 0 ? _host$closest : void 0;
     });
+    vue.watch(() => props.min, onResize);
+    vue.watch(() => props.max, onResize);
     vue.watchEffect(() => {
       const {
         min,
@@ -17830,23 +17880,23 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         current: value
       } = state.value;
       if (root.value) {
-        root.value.style.setProperty("--size", `${String(value)}px`);
-        root.value.style.setProperty("--min", `${min}px`);
-        root.value.style.setProperty("--max", `${max}px`);
+        const shadowRoot = root.value.getRootNode();
+        const host = shadowRoot.host;
+        host.style.setProperty("--size", `${String(value)}px`);
+        host.style.setProperty("--min", `${min}px`);
+        host.style.setProperty("--max", `${max}px`);
+        host.style.setProperty("--offset", `${props.offset}px`);
       }
       if (separator.value) {
         separator.value.setAttribute("aria-valuemin", String(Math.floor(min)));
         separator.value.setAttribute("aria-valuemax", String(Math.floor(max)));
         separator.value.setAttribute("aria-valuenow", String(Math.floor(value)));
       }
+      if (value >= 0) {
+        emit("resize", value);
+      }
     });
     vue.onMounted(() => {
-      if (separator.value) {
-        const {
-          flexBasis
-        } = getComputedStyle(separator.value);
-        separatorSize.value = computeCssValue(flexBasis, 0, 0);
-      }
       layoutSize.value = getLayoutSize();
       state.value = {
         min: minSize.value,
@@ -17877,11 +17927,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [_ctx.overlay && _ctx.offset ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
         ref_key: "root",
         ref: root,
-        class: vue.normalizeClass(["resize", `resize--${vue.unref(attachment)}`])
-      }, [vue.createElementVNode("div", {
+        class: ["resize", classes.value]
+      }, _ctx.$attrs), [vue.createElementVNode("div", {
         ref_key: "content",
         ref: content,
         class: "resize__content"
@@ -17893,17 +17943,36 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         class: "resize__handle",
         tabindex: "0",
         "aria-orientation": orientation.value
-      }, null, 8, _hoisted_1$5)) : (vue.openBlock(), vue.createElementBlock("div", {
+      }, null, 8, _hoisted_2$2)) : (vue.openBlock(), vue.createElementBlock("div", {
         key: 1,
         role: "separator",
         class: "resize__handle disabled",
         "aria-orientation": orientation.value
-      }, null, 8, _hoisted_2$2))], 2);
+      }, null, 8, _hoisted_3$1))], 16)], 64);
     };
   }
 });
-const _style_0 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--left {\n  flex-direction: row;\n  width: var(--size);\n}\n.resize--right {\n  flex-direction: row-reverse;\n  width: var(--size);\n}\n.resize--top {\n  flex-direction: column;\n  height: var(--size);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n  height: var(--size);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--left .resize__content, .resize--right .resize__content {\n  min-width: calc(var(--min) - 2px);\n  max-width: calc(var(--max) - 2px);\n}\n.resize--top .resize__content, .resize--bottom .resize__content {\n  min-height: calc(var(--min) - 2px);\n  max-height: calc(var(--max) - 2px);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n  /* disable regular focus indicator as this component has its own */\n  /* when focus by keyboard we dont want the delay or transition */\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}\n.resize--left .resize__handle {\n  left: 2px;\n}\n.resize--right .resize__handle {\n  right: 2px;\n}\n.resize--top .resize__handle {\n  top: 2px;\n}\n.resize--bottom .resize__handle {\n  bottom: 2px;\n}';
+const _style_0 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n:host([hidden]) {\n  display: none;\n}\n:host ::slotted(*) {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--overlay {\n  position: absolute;\n  z-index: 1;\n  background: var(--f-page-layout-background);\n}\n.resize--left {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--left .resize__content {\n  flex-direction: row;\n}\n.resize--left.resize--overlay {\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--right {\n  flex-direction: row-reverse;\n}\n.resize--right:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--right .resize__content {\n  flex-direction: row;\n}\n.resize--right.resize--overlay {\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--top {\n  flex-direction: column;\n}\n.resize--top:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n}\n.resize--bottom:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize__offset {\n  width: calc(var(--offset) + 2px);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--column .resize__content {\n  flex-direction: column;\n}\n.resize--row .resize__content {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) .resize__content, .resize--right:not(.resize--disabled) .resize__content {\n  min-width: var(--min);\n  max-width: var(--max);\n  flex-basis: var(--size);\n}\n.resize--top:not(.resize--disabled) .resize__content, .resize--bottom:not(.resize--disabled) .resize__content {\n  min-height: var(--min);\n  max-height: var(--max);\n  flex-basis: var(--size);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n  /* disable regular focus indicator as this component has its own */\n  /* when focus by keyboard we dont want the delay or transition */\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}';
 const FResizePane = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0]]]);
+const injectionKey = Symbol("FResizePane");
+function useResize(options = {}) {
+  const api = vue.inject(injectionKey, {
+    register() {
+      return () => void 0;
+    },
+    size: vue.ref(0)
+  });
+  const unregister = api.register({
+    enabled: options.enabled,
+    visible: options.visible,
+    overlay: options.overlay,
+    offset: options.offset
+  });
+  vue.onUnmounted(unregister);
+  return {
+    size: api.size
+  };
+}
 const _hoisted_1$4 = {
   slot: "content"
 };
@@ -17911,10 +17980,6 @@ const tagName = "ce-resize-pane";
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "FResizePane",
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     min: {
       default: "0"
     },
@@ -17929,12 +17994,83 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     if (!customElements.get(tagName)) {
       customElements.define(tagName, vue.defineCustomElement(FResizePane));
     }
+    const anyEnabled = vue.ref(true);
+    const anyVisible = vue.ref(true);
+    const anyOverlay = vue.ref(false);
+    const size = vue.ref(-1);
+    const offset2 = vue.ref(0);
+    let components = [];
+    let n = 0;
+    function any(src, predicate) {
+      return src.length === 0 || src.some(predicate);
+    }
+    vue.provide(injectionKey, {
+      register(options) {
+        const component = {
+          ...options,
+          id: n++
+        };
+        components.push(component);
+        const scope = vue.effectScope();
+        scope.run(() => {
+          vue.watchEffect(() => {
+            anyEnabled.value = any(components, (it) => {
+              var _a;
+              var _it$enabled$value;
+              return (_it$enabled$value = (_a = it.enabled) == null ? void 0 : _a.value) !== null && _it$enabled$value !== void 0 ? _it$enabled$value : true;
+            });
+          });
+          vue.watchEffect(() => {
+            anyVisible.value = any(components, (it) => {
+              var _a;
+              var _it$visible$value;
+              return (_it$visible$value = (_a = it.visible) == null ? void 0 : _a.value) !== null && _it$visible$value !== void 0 ? _it$visible$value : true;
+            });
+          });
+          vue.watchEffect(() => {
+            anyOverlay.value = any(components, (it) => {
+              var _a;
+              var _it$overlay$value;
+              return (_it$overlay$value = (_a = it.overlay) == null ? void 0 : _a.value) !== null && _it$overlay$value !== void 0 ? _it$overlay$value : false;
+            });
+          });
+          vue.watchEffect(() => {
+            if (components.length === 0) {
+              return 0;
+            }
+            const offsets = components.map((it) => {
+              var _a;
+              return (_a = it.offset) == null ? void 0 : _a.value;
+            }).filter((it) => typeof it === "number");
+            offset2.value = Math.max(0, ...offsets);
+          });
+        });
+        return () => {
+          components = components.filter((it) => it.id !== component.id);
+          scope.stop();
+        };
+      },
+      size
+    });
+    const disabled = vue.computed(() => anyEnabled.value === false);
+    const hidden = vue.computed(() => anyVisible.value === false);
+    const overlay = vue.computed(() => anyOverlay.value === true);
     const props = __props;
+    function onResize(event) {
+      size.value = event.detail[0];
+    }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName), vue.normalizeProps(vue.guardReactiveProps(props)), {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName), vue.mergeProps({
+        disabled: disabled.value,
+        hidden: hidden.value,
+        overlay: overlay.value,
+        offset: offset2.value
+      }, props, {
+        onResize
+      }), {
         default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "default")])]),
         _: 3
-      }, 16);
+      }, 16, ["disabled", "hidden", "overlay", "offset"]);
     };
   }
 });
@@ -18372,6 +18508,10 @@ const _sfc_main = vue.defineComponent({
   mixins: [TranslationMixin],
   inheritAttrs: true,
   props: {
+    /**
+     * The title of the wizard step.
+     * This will be displayed as the step's header.
+     */
     title: {
       type: String,
       required: true
@@ -18769,7 +18909,7 @@ exports.FSelectField = FSelectField;
 exports.FSortFilterDataset = _sfc_main$s;
 exports.FSortFilterDatasetInjected = FSortFilterDatasetInjected;
 exports.FStaticField = FStaticField;
-exports.FTableColumn = FTableColumn;
+exports.FTableColumn = _sfc_main$J;
 exports.FTableColumnSize = FTableColumnSize;
 exports.FTableColumnSort = FTableColumnSort;
 exports.FTableColumnType = FTableColumnType;
@@ -18850,6 +18990,7 @@ exports.tooltipAttachTo = tooltipAttachTo;
 exports.useAreaData = useAreaData;
 exports.useCombobox = useCombobox;
 exports.useModal = useModal;
+exports.useResize = useResize;
 exports.useSlotUtils = useSlotUtils;
 exports.useTextFieldSetup = useTextFieldSetup;
 exports.useTranslate = useTranslate;