@fkui/vue 6.3.0 → 6.4.0

package/dist/esm/index.esm.js

@@ -1,5 +1,5 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, createApp, resolveComponent, createCommentVNode, withKeys, createVNode, toDisplayString, createBlock, withCtx, Fragment, renderList, withModifiers, isVNode, Comment, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, ref, normalizeProps, guardReactiveProps, unref, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, onUpdated, toRefs, getCurrentScope, onScopeDispose, defineCustomElement } from "vue";
-import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, findTabbableElements, popFocus, pushFocus, scrollTo, documentOrderComparator, ValidationService, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, isEmpty, deepClone, parseNumber, formatNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, parsePersonnummer, formatPersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, focusFirst, removeFocusListener, restoreFocus, saveFocus, addFocusListener, DomUtils } from "@fkui/logic";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, createApp, resolveComponent, createCommentVNode, withKeys, createVNode, toDisplayString, createBlock, withCtx, Fragment, renderList, withModifiers, isVNode, Comment, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, ref, normalizeProps, guardReactiveProps, unref, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, onUpdated, toRefs, getCurrentScope, onScopeDispose, defineCustomElement, effectScope } from "vue";
+import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, findTabbableElements, popFocus, pushFocus, scrollTo, documentOrderComparator, ValidationService, availableValidators, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, isEmpty, deepClone, parseNumber, formatNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, parsePersonnummer, formatPersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, focusFirst, removeFocusListener, restoreFocus, saveFocus, addFocusListener, DomUtils } from "@fkui/logic";
 import { groupByWeek, getWeekdayNamings, FDate, DateFormat } from "@fkui/date";
 const statuses = ["default", "warning", "error", "success", "info"];
 const _sfc_main$1e = /* @__PURE__ */ defineComponent({
@@ -1970,17 +1970,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 openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
     focusable: "false",
     class: ["icon", [_ctx.spriteKey, ..._ctx.modifiers]],
     "aria-hidden": _ctx.ariaHidden
   }), [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("use", {
-    "xlink:href": _ctx.spriteId
+    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) {
@@ -3861,8 +3861,8 @@ function require_Set() {
   if (hasRequired_Set) return _Set;
   hasRequired_Set = 1;
   var getNative = require_getNative(), root = require_root();
-  var Set = getNative(root, "Set");
-  _Set = Set;
+  var Set2 = getNative(root, "Set");
+  _Set = Set2;
   return _Set;
 }
 var _WeakMap;
@@ -3880,12 +3880,12 @@ var hasRequired_getTag;
 function require_getTag() {
   if (hasRequired_getTag) return _getTag;
   hasRequired_getTag = 1;
-  var DataView2 = require_DataView(), Map2 = require_Map(), Promise2 = require_Promise(), Set = require_Set(), WeakMap2 = require_WeakMap(), baseGetTag = require_baseGetTag(), toSource = require_toSource();
+  var DataView2 = require_DataView(), Map2 = require_Map(), Promise2 = require_Promise(), Set2 = require_Set(), WeakMap2 = require_WeakMap(), baseGetTag = require_baseGetTag(), toSource = require_toSource();
   var mapTag = "[object Map]", objectTag = "[object Object]", promiseTag = "[object Promise]", setTag = "[object Set]", weakMapTag = "[object WeakMap]";
   var dataViewTag = "[object DataView]";
-  var dataViewCtorString = toSource(DataView2), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap2);
+  var dataViewCtorString = toSource(DataView2), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set2), weakMapCtorString = toSource(WeakMap2);
   var getTag = baseGetTag;
-  if (DataView2 && getTag(new DataView2(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
+  if (DataView2 && getTag(new DataView2(new ArrayBuffer(1))) != dataViewTag || Map2 && getTag(new Map2()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set2 && getTag(new Set2()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
     getTag = function(value) {
       var result = baseGetTag(value), Ctor = result == objectTag ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
       if (ctorString) {
@@ -4602,7 +4602,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 = {
@@ -4632,7 +4632,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 = resolveComponent("f-icon");
   return _ctx.isOpen ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -4644,7 +4644,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     role: "dialog",
     "aria-modal": "true",
     onKeyup: _cache[3] || (_cache[3] = withKeys((...args) => _ctx.onClose && _ctx.onClose(...args), ["esc"]))
-  }, [createElementVNode("div", _hoisted_3$w, [createElementVNode("div", {
+  }, [createElementVNode("div", _hoisted_3$x, [createElementVNode("div", {
     ref: "modalDialogContainer",
     class: normalizeClass(["modal__dialog-container", _ctx.containerClasses])
   }, [createElementVNode("div", _hoisted_4$q, [createElementVNode("div", _hoisted_5$l, [createElementVNode("div", _hoisted_6$g, [createElementVNode("div", {
@@ -4662,7 +4662,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)) : 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;
@@ -4799,11 +4799,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 = resolveComponent("f-modal");
   return openBlock(), createBlock(_component_f_modal, {
     fullscreen: _ctx.fullscreen,
@@ -4822,12 +4822,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: normalizeClass([button.classlist, "button-group__item"]),
         onClick: ($event) => _ctx.onClick(button)
-      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[0] || (_cache[0] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$v, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$E);
+      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[0] || (_cache[0] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$w, " " + toDisplayString(button.screenreader), 1)) : 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"];
@@ -4906,12 +4906,12 @@ const _sfc_main$1a = defineComponent({
     }
   }
 });
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["iflex", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$O]]);
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$N]]);
 const _sfc_main$19 = defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
@@ -4959,12 +4959,12 @@ const _sfc_main$19 = defineComponent({
     }
   }
 });
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["iflex__item", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$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) {
@@ -5036,14 +5036,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 = resolveComponent("f-icon");
   const _component_i_flex_item = resolveComponent("i-flex-item");
   const _component_i_flex = resolveComponent("i-flex");
@@ -5066,7 +5066,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), createVNode(_component_i_flex_item, {
       grow: ""
     }, {
-      default: withCtx(() => [_ctx.hasTitleSlot ? (openBlock(), createElementBlock("div", _hoisted_2$D, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("ul", _hoisted_3$u, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+      default: withCtx(() => [_ctx.hasTitleSlot ? (openBlock(), createElementBlock("div", _hoisted_2$D, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("ul", _hoisted_3$v, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
         return openBlock(), createElementBlock("li", {
           key: item.id,
           class: normalizeClass(_ctx.liClasses(item))
@@ -5097,7 +5097,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() {
@@ -5255,13 +5255,13 @@ const _sfc_main$17 = defineComponent({
     }
   }
 });
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     onComponentValidity: _cache[0] || (_cache[0] = (...args) => _ctx.onComponentValidity && _ctx.onComponentValidity(...args)),
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$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";
@@ -5413,7 +5413,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 = resolveComponent("f-error-list");
   const _component_f_validation_group = resolveComponent("f-validation-group");
   return openBlock(), createBlock(_component_f_validation_group, {
@@ -5439,7 +5439,7 @@ function _sfc_render$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 = defineComponent({
   name: "FFormModal",
   components: {
@@ -5538,6 +5538,14 @@ const _sfc_main$15 = 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,
@@ -5593,11 +5601,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 = resolveComponent("f-validation-form");
   const _component_f_modal = resolveComponent("f-modal");
   return openBlock(), createBlock(_component_f_modal, {
@@ -5628,12 +5636,12 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass([button.classlist, "button-group__item"]),
         form: button.buttonType === "submit" ? _ctx.formId : void 0,
         onClick: ($event) => button.buttonType === "button" ? _ctx.onCancel() : false
-      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[2] || (_cache[2] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$t, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$B);
+      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[2] || (_cache[2] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$u, " " + toDisplayString(button.screenreader), 1)) : 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,
@@ -5950,6 +5958,9 @@ const ValidationPrefixDirective = {
 };
 const ValidationPlugin = {
   install(app) {
+    for (const validator of availableValidators) {
+      ValidationService.registerValidator(validator);
+    }
     app.directive("validation", ValidationDirective);
     app.directive("validationPrefix", ValidationPrefixDirective);
   }
@@ -6006,12 +6017,12 @@ const _sfc_main$14 = 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 openBlock(), createElementBlock("div", _hoisted_1$R, _cache[0] || (_cache[0] = [createElementVNode("h1", null, "Fel", -1), createTextVNode(), createElementVNode("p", null, "Ett fel har uppstått.", -1), createTextVNode(), createElementVNode("a", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$I]]);
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$H]]);
 const _sfc_main$13 = defineComponent({
   name: "FErrorHandlingApp",
   props: {
@@ -6041,7 +6052,7 @@ const _sfc_main$13 = defineComponent({
     });
   }
 });
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", null, [_ctx.hasError ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.errorComponent), {
     key: 0,
     payload: _ctx.payload
@@ -6051,7 +6062,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(date, minDate) {
   return Boolean(minDate && date.isBefore(minDate.startOfMonth()));
 }
@@ -6212,7 +6223,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"
 };
@@ -6220,7 +6231,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 = resolveComponent("f-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$Q, [createElementVNode("div", _hoisted_2$A, toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("button", {
     ref: "previousButton",
@@ -6232,7 +6243,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("span", _hoisted_4$o, toDisplayString(_ctx.previousSrText), 1), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_f_icon, {
     class: normalizeClass(_ctx.previousIconClasses),
     name: "arrow-right"
-  }, null, 8, ["class"])], 8, _hoisted_3$s), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("button", {
+  }, null, 8, ["class"])], 8, _hoisted_3$t), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("button", {
     ref: "nextButton",
     class: "calendar-navbar__arrow calendar-navbar__arrow--next",
     type: "button",
@@ -6244,7 +6255,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;
 }
@@ -6330,7 +6341,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",
@@ -6357,7 +6368,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 openBlock(), createElementBlock("table", {
     class: "calendar-month__table",
     role: "grid",
@@ -6378,7 +6389,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[14] || (_cache[14] = createTextVNode()), _cache[15] || (_cache[15] = createElementVNode("col", {
     class: "calendar-month__col--day"
-  }, null, -1))]), _cache[22] || (_cache[22] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_3$r)) : createCommentVNode("", true), _cache[16] || (_cache[16] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weekdays, (weekday) => {
+  }, null, -1))]), _cache[22] || (_cache[22] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_3$s)) : createCommentVNode("", true), _cache[16] || (_cache[16] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weekdays, (weekday) => {
     return openBlock(), createElementBlock("th", {
       key: weekday.name,
       scope: "col",
@@ -6420,7 +6431,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": "true"
   }, null, 8, _hoisted_12$2)])) : 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,
@@ -6535,7 +6546,7 @@ const _sfc_main$10 = 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 = resolveComponent("i-calendar-month-grid");
   return openBlock(), createBlock(_component_i_calendar_month_grid, {
     value: _ctx.modelValue
@@ -6558,7 +6569,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$$ = defineComponent({
   name: "FCalendar",
   components: {
@@ -6613,7 +6624,7 @@ const _sfc_main$$ = 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 = resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = resolveComponent("i-calendar-month");
   return openBlock(), createElementBlock("div", _hoisted_1$N, [createVNode(_component_i_calendar_navbar, {
@@ -6639,7 +6650,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) {
@@ -6729,12 +6740,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 openBlock(), createElementBlock("span", {
     class: normalizeClass(_ctx.dayClasses)
   }, [createElementVNode("span", _hoisted_1$M, toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$y, 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) {
   onMounted(() => {
     var _a;
@@ -6760,7 +6771,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 = {
@@ -6805,6 +6816,9 @@ const _sfc_main$Z = /* @__PURE__ */ 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.");
       }
@@ -6850,7 +6864,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           _: 1
         })]),
         _: 1
-      })) : createCommentVNode("", true)]), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$q, [renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = createTextVNode()), hasFooterSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4$m, [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
+      })) : createCommentVNode("", true)]), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$r, [renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = createTextVNode()), hasFooterSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4$m, [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
         hasError: hasError.value,
         validationMessage: validationMessage.value
       })))])) : createCommentVNode("", true)], 42, _hoisted_1$L);
@@ -6911,7 +6925,7 @@ const _sfc_main$Y = defineComponent({
     }
   }
 });
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, {
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -6923,7 +6937,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 {
@@ -7489,7 +7503,7 @@ const _sfc_main$X = defineComponent({
     }
   }
 });
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.isOpen ? (openBlock(), createBlock(Teleport, {
     key: 0,
     to: _ctx.teleportTarget,
@@ -7510,7 +7524,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : 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: {
@@ -7716,7 +7730,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 = resolveComponent("f-icon");
   return _ctx.isOpen ? (openBlock(), createBlock(Teleport, {
     key: 0,
@@ -7740,7 +7754,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: "button__icon"
   })])], 6)], 512)], 2)], 8, ["to", "disabled"])) : 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);
@@ -8270,13 +8284,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 = resolveComponent("i-popup");
   return openBlock(), createBlock(_component_i_popup, {
     class: "ipopupmenu",
@@ -8307,12 +8321,12 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
         role: "menuitem",
         target: item.target,
         tabindex: "0"
-      }, [_ctx.isSelected(index) ? (openBlock(), createElementBlock("span", _hoisted_5$h, [createElementVNode("span", null, toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
+      }, [_ctx.isSelected(index) ? (openBlock(), createElementBlock("span", _hoisted_5$h, [createElementVNode("span", null, toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$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";
@@ -8515,13 +8529,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 openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.animationClasses),
     style: normalizeStyle(_ctx.heightStyle)
   }, [_ctx.shouldVIf ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$H, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.shouldVShow]]) : 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 = defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
@@ -8537,13 +8551,13 @@ const _sfc_main$S = 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 openBlock(), createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
   }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$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 (isEmpty(filter2) || selectMode) {
     return options;
@@ -8793,7 +8807,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__ */ defineComponent({
   __name: "IComboboxDropdown",
   props: {
@@ -8855,7 +8869,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
               "combobox__listbox__option--highlight": isOptionActive(item)
             }]),
             onClick: withModifiers(($event) => onOptionClick(item), ["stop", "prevent"])
-          }, toDisplayString(item), 11, _hoisted_3$o);
+          }, toDisplayString(item), 11, _hoisted_3$p);
         }), 128))], 8, _hoisted_2$u)]),
         _: 1
       }, 8, ["is-open", "anchor", "num-of-items", "active-element"])]);
@@ -9147,7 +9161,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 = {
@@ -9161,7 +9175,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 = resolveComponent("f-icon");
   return openBlock(), createElementBlock(Fragment, null, [(openBlock(), createBlock(Teleport, {
     disabled: _ctx.iconTarget === null,
@@ -9176,7 +9190,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "circle"
   }), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_f_icon, {
     name: "i"
-  }), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("span", _hoisted_3$n, toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("div", mergeProps({
+  }), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("span", _hoisted_3$o, toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("div", mergeProps({
     ref: "wrapper",
     class: "tooltip"
   }, _ctx.$attrs), [_ctx.ready ? (openBlock(), createElementBlock("div", _hoisted_4$k, [_ctx.hasHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.headerTag), {
@@ -9194,7 +9208,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])])])) : 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
@@ -9468,7 +9482,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"
 };
@@ -9495,7 +9509,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 = resolveComponent("f-icon");
   return openBlock(), createElementBlock("fieldset", {
     id: _ctx.id,
@@ -9510,7 +9524,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   }), _cache[3] || (_cache[3] = createTextVNode()), renderSlot(_ctx.$slots, "error-message", normalizeProps(guardReactiveProps({
     hasError: _ctx.hasError,
     validationMessage: _ctx.validity.validationMessage
-  })), () => [_ctx.hasError ? (openBlock(), createElementBlock("span", _hoisted_3$m, [createVNode(_component_f_icon, {
+  })), () => [_ctx.hasError ? (openBlock(), createElementBlock("span", _hoisted_3$n, [createVNode(_component_f_icon, {
     class: "label__icon--left",
     name: "error"
   }), createTextVNode(" " + toDisplayString(_ctx.validity.validationMessage), 1)])) : createCommentVNode("", true)])], 2)), _cache[7] || (_cache[7] = createTextVNode()), _ctx.hasCheckbox ? (openBlock(), createElementBlock("span", _hoisted_4$j, [_ctx.children.length === 1 ? (openBlock(), createElementBlock("span", _hoisted_5$f, toDisplayString(_ctx.checkboxCheckedScreenReaderText), 1)) : (openBlock(), createElementBlock("span", _hoisted_6$c, toDisplayString(_ctx.numberOfCheckedCheckboxesScreenText), 1))])) : createCommentVNode("", true), _cache[8] || (_cache[8] = createTextVNode()), _ctx.hasTooltipSlot ? (openBlock(), createElementBlock(Fragment, {
@@ -9532,7 +9546,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.groupContentClass)
   }, [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 = defineComponent({
   name: "FCheckboxField",
@@ -9722,7 +9736,7 @@ const _sfc_main$N = 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"
 };
@@ -9730,7 +9744,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 openBlock(), createElementBlock("div", {
     class: normalizeClass(["checkbox", _ctx.disabledClass]),
     onValidity: _cache[2] || (_cache[2] = (...args) => _ctx.onValidity && _ctx.onValidity(...args))
@@ -9748,7 +9762,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [renderSlot(_ctx.$slots, "default"), _cache[8] || (_cache[8] = createTextVNode()), _ctx.$slots.details ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$l, [_cache[3] || (_cache[3] = createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
+  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$m, [_cache[3] || (_cache[3] = createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -9760,7 +9774,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : createCommentVNode("", true)], 64)) : 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() {
@@ -10010,13 +10024,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 = resolveComponent("f-icon");
   const _component_i_popup = resolveComponent("i-popup");
   return openBlock(), createBlock(_component_i_popup, {
@@ -10051,12 +10065,12 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["name", "library"])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("a", {
         ref_for: true,
         ref: "anchors"
-      }, toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (openBlock(), createElementBlock("hr", _hoisted_5$e)) : createCommentVNode("", true)], 8, _hoisted_3$k);
+      }, toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (openBlock(), createElementBlock("hr", _hoisted_5$e)) : createCommentVNode("", true)], 8, _hoisted_3$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";
@@ -10300,7 +10314,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       isFormModalOpen.value = true;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$z, [renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), hasAddSlot.value ? (openBlock(), createElementBlock("div", _hoisted_2$p, [createElementVNode("button", {
+      return openBlock(), createElementBlock("div", _hoisted_1$z, [renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = createTextVNode()), hasAddSlot.value ? (openBlock(), createElementBlock("div", _hoisted_2$p, [createElementVNode("button", {
         "data-test": "f-crud-dataset-add-button",
         type: "button",
         class: "button button--tertiary crud-dataset__add-button",
@@ -10308,7 +10322,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       }, [createVNode(unref(FIcon), {
         class: "button__icon",
         name: "plus"
-      }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "add-button", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), createVNode(unref(FFormModal), {
+      }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "add-button", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])]), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "buttons", normalizeProps(guardReactiveProps({
+        buttonClasses: ["button", "button--tertiary", "crud-dataset__add-button"]
+      })))])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), createVNode(unref(FFormModal), {
         "is-open": isFormModalOpen.value,
         "aria-close-text": unref($t2)("fkui.crud-dataset.modal.close", "Stäng"),
         buttons: formModalButtons.value,
@@ -10325,13 +10341,13 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           key: 0
         }, {
           item: item.value
-        }))) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), operation.value === unref(Operation).MODIFY ? renderSlot(_ctx.$slots, "modify", normalizeProps(mergeProps({
+        }))) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), operation.value === unref(Operation).MODIFY ? renderSlot(_ctx.$slots, "modify", normalizeProps(mergeProps({
           key: 1
         }, {
           item: item.value
         }))) : createCommentVNode("", true)]),
         _: 3
-      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[7] || (_cache[7] = createTextVNode()), createVNode(unref(FConfirmModal), {
+      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[8] || (_cache[8] = createTextVNode()), createVNode(unref(FConfirmModal), {
         "is-open": isConfirmModalOpen.value,
         buttons: confirmDeleteButtons.value,
         onConfirm: onDeleteConfirm,
@@ -10359,6 +10375,10 @@ const _sfc_main$K = 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,
@@ -10366,14 +10386,24 @@ const _sfc_main$K = 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
@@ -10412,7 +10442,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 = resolveComponent("f-icon");
   return openBlock(), createElementBlock("button", {
     type: "button",
@@ -10426,13 +10456,578 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   }, () => [createTextVNode(toDisplayString(_ctx.buttonText), 1)]) : 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: inject("registerCallbackAfterItemAdd", () => void 0),
     registerCallbackBeforeItemDelete: inject("registerCallbackBeforeItemDelete", () => void 0)
   };
 }
+var es_set_difference_v2 = {};
+var setHelpers;
+var hasRequiredSetHelpers;
+function requireSetHelpers() {
+  if (hasRequiredSetHelpers) return setHelpers;
+  hasRequiredSetHelpers = 1;
+  var uncurryThis = requireFunctionUncurryThis();
+  var SetPrototype = Set.prototype;
+  setHelpers = {
+    // eslint-disable-next-line es/no-set -- safe
+    Set,
+    add: uncurryThis(SetPrototype.add),
+    has: uncurryThis(SetPrototype.has),
+    remove: uncurryThis(SetPrototype["delete"]),
+    proto: SetPrototype
+  };
+  return setHelpers;
+}
+var aSet;
+var hasRequiredASet;
+function requireASet() {
+  if (hasRequiredASet) return aSet;
+  hasRequiredASet = 1;
+  var has = requireSetHelpers().has;
+  aSet = function(it) {
+    has(it);
+    return it;
+  };
+  return aSet;
+}
+var iterateSimple;
+var hasRequiredIterateSimple;
+function requireIterateSimple() {
+  if (hasRequiredIterateSimple) return iterateSimple;
+  hasRequiredIterateSimple = 1;
+  var call = requireFunctionCall();
+  iterateSimple = function(record, fn2, ITERATOR_INSTEAD_OF_RECORD) {
+    var iterator = ITERATOR_INSTEAD_OF_RECORD ? record : record.iterator;
+    var next = record.next;
+    var step, result;
+    while (!(step = call(next, iterator)).done) {
+      result = fn2(step.value);
+      if (result !== void 0) return result;
+    }
+  };
+  return iterateSimple;
+}
+var setIterate;
+var hasRequiredSetIterate;
+function requireSetIterate() {
+  if (hasRequiredSetIterate) return setIterate;
+  hasRequiredSetIterate = 1;
+  var uncurryThis = requireFunctionUncurryThis();
+  var iterateSimple2 = requireIterateSimple();
+  var SetHelpers = requireSetHelpers();
+  var Set2 = SetHelpers.Set;
+  var SetPrototype = SetHelpers.proto;
+  var forEach = uncurryThis(SetPrototype.forEach);
+  var keys = uncurryThis(SetPrototype.keys);
+  var next = keys(new Set2()).next;
+  setIterate = function(set, fn2, interruptible) {
+    return interruptible ? iterateSimple2({
+      iterator: keys(set),
+      next
+    }, fn2) : forEach(set, fn2);
+  };
+  return setIterate;
+}
+var setClone;
+var hasRequiredSetClone;
+function requireSetClone() {
+  if (hasRequiredSetClone) return setClone;
+  hasRequiredSetClone = 1;
+  var SetHelpers = requireSetHelpers();
+  var iterate2 = requireSetIterate();
+  var Set2 = SetHelpers.Set;
+  var add = SetHelpers.add;
+  setClone = function(set) {
+    var result = new Set2();
+    iterate2(set, function(it) {
+      add(result, it);
+    });
+    return result;
+  };
+  return setClone;
+}
+var setSize;
+var hasRequiredSetSize;
+function requireSetSize() {
+  if (hasRequiredSetSize) return setSize;
+  hasRequiredSetSize = 1;
+  var uncurryThisAccessor = requireFunctionUncurryThisAccessor();
+  var SetHelpers = requireSetHelpers();
+  setSize = uncurryThisAccessor(SetHelpers.proto, "size", "get") || function(set) {
+    return set.size;
+  };
+  return setSize;
+}
+var getSetRecord;
+var hasRequiredGetSetRecord;
+function requireGetSetRecord() {
+  if (hasRequiredGetSetRecord) return getSetRecord;
+  hasRequiredGetSetRecord = 1;
+  var aCallable2 = requireACallable();
+  var anObject2 = requireAnObject();
+  var call = requireFunctionCall();
+  var toIntegerOrInfinity2 = requireToIntegerOrInfinity();
+  var getIteratorDirect2 = requireGetIteratorDirect();
+  var INVALID_SIZE = "Invalid size";
+  var $RangeError = RangeError;
+  var $TypeError = TypeError;
+  var max = Math.max;
+  var SetRecord = function(set, intSize) {
+    this.set = set;
+    this.size = max(intSize, 0);
+    this.has = aCallable2(set.has);
+    this.keys = aCallable2(set.keys);
+  };
+  SetRecord.prototype = {
+    getIterator: function() {
+      return getIteratorDirect2(anObject2(call(this.keys, this.set)));
+    },
+    includes: function(it) {
+      return call(this.has, this.set, it);
+    }
+  };
+  getSetRecord = function(obj) {
+    anObject2(obj);
+    var numSize = +obj.size;
+    if (numSize !== numSize) throw new $TypeError(INVALID_SIZE);
+    var intSize = toIntegerOrInfinity2(numSize);
+    if (intSize < 0) throw new $RangeError(INVALID_SIZE);
+    return new SetRecord(obj, intSize);
+  };
+  return getSetRecord;
+}
+var setDifference;
+var hasRequiredSetDifference;
+function requireSetDifference() {
+  if (hasRequiredSetDifference) return setDifference;
+  hasRequiredSetDifference = 1;
+  var aSet2 = requireASet();
+  var SetHelpers = requireSetHelpers();
+  var clone = requireSetClone();
+  var size = requireSetSize();
+  var getSetRecord2 = requireGetSetRecord();
+  var iterateSet = requireSetIterate();
+  var iterateSimple2 = requireIterateSimple();
+  var has = SetHelpers.has;
+  var remove = SetHelpers.remove;
+  setDifference = function difference(other) {
+    var O = aSet2(this);
+    var otherRec = getSetRecord2(other);
+    var result = clone(O);
+    if (size(O) <= otherRec.size) iterateSet(O, function(e) {
+      if (otherRec.includes(e)) remove(result, e);
+    });
+    else iterateSimple2(otherRec.getIterator(), function(e) {
+      if (has(O, e)) remove(result, e);
+    });
+    return result;
+  };
+  return setDifference;
+}
+var setMethodAcceptSetLike;
+var hasRequiredSetMethodAcceptSetLike;
+function requireSetMethodAcceptSetLike() {
+  if (hasRequiredSetMethodAcceptSetLike) return setMethodAcceptSetLike;
+  hasRequiredSetMethodAcceptSetLike = 1;
+  var getBuiltIn2 = requireGetBuiltIn();
+  var createSetLike = function(size) {
+    return {
+      size,
+      has: function() {
+        return false;
+      },
+      keys: function() {
+        return {
+          next: function() {
+            return {
+              done: true
+            };
+          }
+        };
+      }
+    };
+  };
+  var createSetLikeWithInfinitySize = function(size) {
+    return {
+      size,
+      has: function() {
+        return true;
+      },
+      keys: function() {
+        throw new Error("e");
+      }
+    };
+  };
+  setMethodAcceptSetLike = function(name, callback) {
+    var Set2 = getBuiltIn2("Set");
+    try {
+      new Set2()[name](createSetLike(0));
+      try {
+        new Set2()[name](createSetLike(-1));
+        return false;
+      } catch (error2) {
+        if (!callback) return true;
+        try {
+          new Set2()[name](createSetLikeWithInfinitySize(-Infinity));
+          return false;
+        } catch (error) {
+          var set = new Set2();
+          set.add(1);
+          set.add(2);
+          return callback(set[name](createSetLikeWithInfinitySize(Infinity)));
+        }
+      }
+    } catch (error) {
+      return false;
+    }
+  };
+  return setMethodAcceptSetLike;
+}
+var hasRequiredEs_set_difference_v2;
+function requireEs_set_difference_v2() {
+  if (hasRequiredEs_set_difference_v2) return es_set_difference_v2;
+  hasRequiredEs_set_difference_v2 = 1;
+  var $ = require_export();
+  var difference = requireSetDifference();
+  var setMethodAcceptSetLike2 = requireSetMethodAcceptSetLike();
+  var INCORRECT = !setMethodAcceptSetLike2("difference", function(result) {
+    return result.size === 0;
+  });
+  $({
+    target: "Set",
+    proto: true,
+    real: true,
+    forced: INCORRECT
+  }, {
+    difference
+  });
+  return es_set_difference_v2;
+}
+requireEs_set_difference_v2();
+var es_set_intersection_v2 = {};
+var setIntersection;
+var hasRequiredSetIntersection;
+function requireSetIntersection() {
+  if (hasRequiredSetIntersection) return setIntersection;
+  hasRequiredSetIntersection = 1;
+  var aSet2 = requireASet();
+  var SetHelpers = requireSetHelpers();
+  var size = requireSetSize();
+  var getSetRecord2 = requireGetSetRecord();
+  var iterateSet = requireSetIterate();
+  var iterateSimple2 = requireIterateSimple();
+  var Set2 = SetHelpers.Set;
+  var add = SetHelpers.add;
+  var has = SetHelpers.has;
+  setIntersection = function intersection2(other) {
+    var O = aSet2(this);
+    var otherRec = getSetRecord2(other);
+    var result = new Set2();
+    if (size(O) > otherRec.size) {
+      iterateSimple2(otherRec.getIterator(), function(e) {
+        if (has(O, e)) add(result, e);
+      });
+    } else {
+      iterateSet(O, function(e) {
+        if (otherRec.includes(e)) add(result, e);
+      });
+    }
+    return result;
+  };
+  return setIntersection;
+}
+var hasRequiredEs_set_intersection_v2;
+function requireEs_set_intersection_v2() {
+  if (hasRequiredEs_set_intersection_v2) return es_set_intersection_v2;
+  hasRequiredEs_set_intersection_v2 = 1;
+  var $ = require_export();
+  var fails2 = requireFails();
+  var intersection2 = requireSetIntersection();
+  var setMethodAcceptSetLike2 = requireSetMethodAcceptSetLike();
+  var INCORRECT = !setMethodAcceptSetLike2("intersection", function(result) {
+    return result.size === 2 && result.has(1) && result.has(2);
+  }) || fails2(function() {
+    return String(Array.from((/* @__PURE__ */ new Set([1, 2, 3])).intersection(/* @__PURE__ */ new Set([3, 2])))) !== "3,2";
+  });
+  $({
+    target: "Set",
+    proto: true,
+    real: true,
+    forced: INCORRECT
+  }, {
+    intersection: intersection2
+  });
+  return es_set_intersection_v2;
+}
+requireEs_set_intersection_v2();
+var es_set_isDisjointFrom_v2 = {};
+var setIsDisjointFrom;
+var hasRequiredSetIsDisjointFrom;
+function requireSetIsDisjointFrom() {
+  if (hasRequiredSetIsDisjointFrom) return setIsDisjointFrom;
+  hasRequiredSetIsDisjointFrom = 1;
+  var aSet2 = requireASet();
+  var has = requireSetHelpers().has;
+  var size = requireSetSize();
+  var getSetRecord2 = requireGetSetRecord();
+  var iterateSet = requireSetIterate();
+  var iterateSimple2 = requireIterateSimple();
+  var iteratorClose2 = requireIteratorClose();
+  setIsDisjointFrom = function isDisjointFrom(other) {
+    var O = aSet2(this);
+    var otherRec = getSetRecord2(other);
+    if (size(O) <= otherRec.size) return iterateSet(O, function(e) {
+      if (otherRec.includes(e)) return false;
+    }, true) !== false;
+    var iterator = otherRec.getIterator();
+    return iterateSimple2(iterator, function(e) {
+      if (has(O, e)) return iteratorClose2(iterator, "normal", false);
+    }) !== false;
+  };
+  return setIsDisjointFrom;
+}
+var hasRequiredEs_set_isDisjointFrom_v2;
+function requireEs_set_isDisjointFrom_v2() {
+  if (hasRequiredEs_set_isDisjointFrom_v2) return es_set_isDisjointFrom_v2;
+  hasRequiredEs_set_isDisjointFrom_v2 = 1;
+  var $ = require_export();
+  var isDisjointFrom = requireSetIsDisjointFrom();
+  var setMethodAcceptSetLike2 = requireSetMethodAcceptSetLike();
+  var INCORRECT = !setMethodAcceptSetLike2("isDisjointFrom", function(result) {
+    return !result;
+  });
+  $({
+    target: "Set",
+    proto: true,
+    real: true,
+    forced: INCORRECT
+  }, {
+    isDisjointFrom
+  });
+  return es_set_isDisjointFrom_v2;
+}
+requireEs_set_isDisjointFrom_v2();
+var es_set_isSubsetOf_v2 = {};
+var setIsSubsetOf;
+var hasRequiredSetIsSubsetOf;
+function requireSetIsSubsetOf() {
+  if (hasRequiredSetIsSubsetOf) return setIsSubsetOf;
+  hasRequiredSetIsSubsetOf = 1;
+  var aSet2 = requireASet();
+  var size = requireSetSize();
+  var iterate2 = requireSetIterate();
+  var getSetRecord2 = requireGetSetRecord();
+  setIsSubsetOf = function isSubsetOf(other) {
+    var O = aSet2(this);
+    var otherRec = getSetRecord2(other);
+    if (size(O) > otherRec.size) return false;
+    return iterate2(O, function(e) {
+      if (!otherRec.includes(e)) return false;
+    }, true) !== false;
+  };
+  return setIsSubsetOf;
+}
+var hasRequiredEs_set_isSubsetOf_v2;
+function requireEs_set_isSubsetOf_v2() {
+  if (hasRequiredEs_set_isSubsetOf_v2) return es_set_isSubsetOf_v2;
+  hasRequiredEs_set_isSubsetOf_v2 = 1;
+  var $ = require_export();
+  var isSubsetOf = requireSetIsSubsetOf();
+  var setMethodAcceptSetLike2 = requireSetMethodAcceptSetLike();
+  var INCORRECT = !setMethodAcceptSetLike2("isSubsetOf", function(result) {
+    return result;
+  });
+  $({
+    target: "Set",
+    proto: true,
+    real: true,
+    forced: INCORRECT
+  }, {
+    isSubsetOf
+  });
+  return es_set_isSubsetOf_v2;
+}
+requireEs_set_isSubsetOf_v2();
+var es_set_isSupersetOf_v2 = {};
+var setIsSupersetOf;
+var hasRequiredSetIsSupersetOf;
+function requireSetIsSupersetOf() {
+  if (hasRequiredSetIsSupersetOf) return setIsSupersetOf;
+  hasRequiredSetIsSupersetOf = 1;
+  var aSet2 = requireASet();
+  var has = requireSetHelpers().has;
+  var size = requireSetSize();
+  var getSetRecord2 = requireGetSetRecord();
+  var iterateSimple2 = requireIterateSimple();
+  var iteratorClose2 = requireIteratorClose();
+  setIsSupersetOf = function isSupersetOf(other) {
+    var O = aSet2(this);
+    var otherRec = getSetRecord2(other);
+    if (size(O) < otherRec.size) return false;
+    var iterator = otherRec.getIterator();
+    return iterateSimple2(iterator, function(e) {
+      if (!has(O, e)) return iteratorClose2(iterator, "normal", false);
+    }) !== false;
+  };
+  return setIsSupersetOf;
+}
+var hasRequiredEs_set_isSupersetOf_v2;
+function requireEs_set_isSupersetOf_v2() {
+  if (hasRequiredEs_set_isSupersetOf_v2) return es_set_isSupersetOf_v2;
+  hasRequiredEs_set_isSupersetOf_v2 = 1;
+  var $ = require_export();
+  var isSupersetOf = requireSetIsSupersetOf();
+  var setMethodAcceptSetLike2 = requireSetMethodAcceptSetLike();
+  var INCORRECT = !setMethodAcceptSetLike2("isSupersetOf", function(result) {
+    return !result;
+  });
+  $({
+    target: "Set",
+    proto: true,
+    real: true,
+    forced: INCORRECT
+  }, {
+    isSupersetOf
+  });
+  return es_set_isSupersetOf_v2;
+}
+requireEs_set_isSupersetOf_v2();
+var es_set_symmetricDifference_v2 = {};
+var setSymmetricDifference;
+var hasRequiredSetSymmetricDifference;
+function requireSetSymmetricDifference() {
+  if (hasRequiredSetSymmetricDifference) return setSymmetricDifference;
+  hasRequiredSetSymmetricDifference = 1;
+  var aSet2 = requireASet();
+  var SetHelpers = requireSetHelpers();
+  var clone = requireSetClone();
+  var getSetRecord2 = requireGetSetRecord();
+  var iterateSimple2 = requireIterateSimple();
+  var add = SetHelpers.add;
+  var has = SetHelpers.has;
+  var remove = SetHelpers.remove;
+  setSymmetricDifference = function symmetricDifference(other) {
+    var O = aSet2(this);
+    var keysIter = getSetRecord2(other).getIterator();
+    var result = clone(O);
+    iterateSimple2(keysIter, function(e) {
+      if (has(O, e)) remove(result, e);
+      else add(result, e);
+    });
+    return result;
+  };
+  return setSymmetricDifference;
+}
+var hasRequiredEs_set_symmetricDifference_v2;
+function requireEs_set_symmetricDifference_v2() {
+  if (hasRequiredEs_set_symmetricDifference_v2) return es_set_symmetricDifference_v2;
+  hasRequiredEs_set_symmetricDifference_v2 = 1;
+  var $ = require_export();
+  var symmetricDifference = requireSetSymmetricDifference();
+  var setMethodAcceptSetLike2 = requireSetMethodAcceptSetLike();
+  $({
+    target: "Set",
+    proto: true,
+    real: true,
+    forced: !setMethodAcceptSetLike2("symmetricDifference")
+  }, {
+    symmetricDifference
+  });
+  return es_set_symmetricDifference_v2;
+}
+requireEs_set_symmetricDifference_v2();
+var es_set_union_v2 = {};
+var setUnion;
+var hasRequiredSetUnion;
+function requireSetUnion() {
+  if (hasRequiredSetUnion) return setUnion;
+  hasRequiredSetUnion = 1;
+  var aSet2 = requireASet();
+  var add = requireSetHelpers().add;
+  var clone = requireSetClone();
+  var getSetRecord2 = requireGetSetRecord();
+  var iterateSimple2 = requireIterateSimple();
+  setUnion = function union(other) {
+    var O = aSet2(this);
+    var keysIter = getSetRecord2(other).getIterator();
+    var result = clone(O);
+    iterateSimple2(keysIter, function(it) {
+      add(result, it);
+    });
+    return result;
+  };
+  return setUnion;
+}
+var hasRequiredEs_set_union_v2;
+function requireEs_set_union_v2() {
+  if (hasRequiredEs_set_union_v2) return es_set_union_v2;
+  hasRequiredEs_set_union_v2 = 1;
+  var $ = require_export();
+  var union = requireSetUnion();
+  var setMethodAcceptSetLike2 = requireSetMethodAcceptSetLike();
+  $({
+    target: "Set",
+    proto: true,
+    real: true,
+    forced: !setMethodAcceptSetLike2("union")
+  }, {
+    union
+  });
+  return es_set_union_v2;
+}
+requireEs_set_union_v2();
+const internalKey = Symbol("internal-key");
+let internalIndex = 0;
+function getInternalKey() {
+  return internalKey;
+}
+function setInternalKey(item, value) {
+  if (item[internalKey]) {
+    return;
+  }
+  Object.defineProperty(item, internalKey, {
+    value: value !== null && value !== void 0 ? value : String(internalIndex++),
+    enumerable: false,
+    writable: true
+  });
+}
+function setInternalKeys(items, key, nestedKey, seenValues = /* @__PURE__ */ new Set()) {
+  if (key === void 0) {
+    return items.map((item) => {
+      setInternalKey(item);
+      if (nestedKey !== void 0) {
+        const nestedItem = item[nestedKey];
+        if (Array.isArray(nestedItem)) {
+          setInternalKeys(nestedItem);
+        }
+      }
+      return item;
+    });
+  }
+  return items.map((item, index) => {
+    const value = item[key];
+    const keyString = String(key);
+    const invalidValue = value === void 0 || value === null || String(value).length === 0;
+    if (invalidValue) {
+      throw new Error(`Key [${keyString}] is missing or has invalid value in item index ${index}`);
+    }
+    if (seenValues.has(value)) {
+      throw new Error(`Expected each item to have key [${keyString}] with unique value but encountered duplicate of "${value}" in item index ${index}.`);
+    }
+    setInternalKey(item, String(value));
+    seenValues.add(value);
+    if (nestedKey !== void 0) {
+      const nestedItem = item[nestedKey];
+      if (Array.isArray(nestedItem)) {
+        setInternalKeys(nestedItem, key, void 0, seenValues);
+      }
+    }
+    return item;
+  });
+}
 var FTableColumnType = /* @__PURE__ */ ((FTableColumnType2) => {
   FTableColumnType2["TEXT"] = "text";
   FTableColumnType2["DATE"] = "date";
@@ -10510,9 +11105,11 @@ function FTableInjected() {
     renderColumns: inject("renderColumns", false)
   };
 }
-const _sfc_main$J = defineComponent({
-  name: "FTableColumn",
-  inheritAttrs: false,
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "FTableColumn",
   props: {
     /**
      * Unique (per-table) identifier.
@@ -10599,71 +11196,58 @@ const _sfc_main$J = 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 = computed(() => {
+      return ["table__column", `table__column--${props.type}`];
+    });
+    const scope = computed(() => {
+      return props.rowHeader ? "row" : null;
+    });
+    const tagName2 = 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: ElementIdService.generateElementId("column"),
-      size,
-      type: this.type,
-      visible: this.visible,
-      sortable: false,
-      sort: FTableColumnSort.UNSORTED
     });
+    watch(() => props.visible, () => setVisibilityColumn2(props.name, props.visible));
+    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: ElementIdService.generateElementId("column"),
+        size,
+        type: props.type,
+        visible: props.visible,
+        sortable: false,
+        sort: FTableColumnSort.UNSORTED
+      });
+    });
+    return (_ctx, _cache) => {
+      return unref(renderColumns) && __props.visible ? (openBlock(), createBlock(resolveDynamicComponent(tagName2.value), mergeProps({
+        key: 0,
+        class: classes.value,
+        scope: scope.value
+      }, _ctx.$attrs), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), _cache[1] || (_cache[1] = createElementVNode("span", {
+          class: "sr-only"
+        }, " ", -1))]),
+        _: 3
+      }, 16, ["class", "scope"])) : createCommentVNode("", true);
+    };
   }
 });
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.renderColumns && _ctx.visible ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), mergeProps({
-    key: 0,
-    class: _ctx.classes,
-    scope: _ctx.scope
-  }, _ctx.$attrs), {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), _cache[1] || (_cache[1] = createElementVNode("span", {
-      class: "sr-only"
-    }, " ", -1))]),
-    _: 3
-  }, 16, ["class", "scope"])) : createCommentVNode("", true);
-}
-const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: inject("sort", () => void 0),
@@ -10717,7 +11301,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,
@@ -10733,7 +11317,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.$slots.tooltip ? (openBlock(), createElementBlock("div", _hoisted_1$x, [_ctx.hasDefaultSlot ? (openBlock(), createElementBlock("div", _hoisted_2$o, [createElementVNode("label", {
     class: "label",
     for: _ctx.forProperty
-  }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$j)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (openBlock(), createElementBlock("label", {
+  }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$k)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (openBlock(), createElementBlock("label", {
     key: 1,
     class: "label sr-separator",
     for: _ctx.forProperty
@@ -11328,7 +11912,7 @@ const _hoisted_2$n = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_3$i = {
+const _hoisted_3$j = {
   key: 0,
   class: "sr-only"
 };
@@ -11371,7 +11955,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, [_ctx.descriptionScreenReaderText ? (openBlock(), createElementBlock("span", _hoisted_2$n, toDisplayString(_ctx.descriptionScreenReaderText), 1)) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("span", null, toDisplayString(_ctx.descriptionText), 1)], 2)) : createCommentVNode("", true), _cache[9] || (_cache[9] = createTextVNode()), _ctx.discreteDescriptionText ? (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(formatDescriptionClass)
-    }, [_ctx.discreteDescriptionScreenReaderText ? (openBlock(), createElementBlock("span", _hoisted_3$i, toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : createCommentVNode("", true), _cache[8] || (_cache[8] = createTextVNode()), createElementVNode("span", null, toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : createCommentVNode("", true)])]),
+    }, [_ctx.discreteDescriptionScreenReaderText ? (openBlock(), createElementBlock("span", _hoisted_3$j, toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : createCommentVNode("", true), _cache[8] || (_cache[8] = createTextVNode()), createElementVNode("span", null, toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : createCommentVNode("", true)])]),
     "error-message": withCtx(() => [renderSlot(_ctx.$slots, "error-message", normalizeProps(guardReactiveProps({
       hasError: _ctx.hasError,
       validationMessage: _ctx.validationMessage
@@ -12258,7 +12842,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"];
@@ -12495,7 +13079,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                 maxlength: "64",
                 onInput: onSearchInput
               }, {
-                default: withCtx(() => [createElementVNode("span", _hoisted_3$h, toDisplayString(__props.placeholderFilter), 1)]),
+                default: withCtx(() => [createElementVNode("span", _hoisted_3$i, toDisplayString(__props.placeholderFilter), 1)]),
                 _: 1
               }, 8, ["modelValue", "placeholder"]), _cache[4] || (_cache[4] = createTextVNode()), showClearButton.value ? (openBlock(), createElementBlock("button", {
                 key: 0,
@@ -12545,7 +13129,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"];
@@ -12579,7 +13163,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
      */
     keyAttribute: {
       type: String,
-      required: true
+      required: false,
+      default: void 0
     },
     /**
      * If `true` alternating rows will use a different background color.
@@ -12617,6 +13202,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       registerCallbackOnSort,
       registerCallbackOnMount
     } = FSortFilterDatasetInjected();
+    const internalKey2 = getInternalKey();
     const columns = ref([]);
     const props = __props;
     const hasCaption = computed(() => {
@@ -12632,7 +13218,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       return classes;
     });
     const isEmpty2 = computed(() => {
-      return props.rows.length === 0;
+      return internalRows.value.length === 0;
     });
     const visibleColumns = computed(() => {
       return columns.value.filter((col) => col.visible);
@@ -12643,6 +13229,15 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const tabindex = computed(() => {
       return props.scroll !== TableScroll.NONE ? 0 : void 0;
     });
+    const internalRows = computed(() => {
+      const {
+        keyAttribute
+      } = props;
+      if (keyAttribute) {
+        return setInternalKeys(props.rows, keyAttribute);
+      }
+      return setInternalKeys(props.rows);
+    });
     provide("addColumn", (column) => {
       if (column.type === FTableColumnType.ACTION) {
         throw new Error("Cannot use action column in FDataTable component");
@@ -12654,18 +13249,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     });
     provide("textFieldTableMode", true);
     provide("renderColumns", computed(() => {
-      return props.rows.length > 0;
+      return internalRows.value.length > 0;
     }));
     onMounted(() => {
       registerCallbackOnSort(callbackOnSort);
       registerCallbackOnMount(callbackSortableColumns);
     });
     function rowKey(item) {
-      const key = item[props.keyAttribute];
-      if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in row`);
-      }
-      return String(key);
+      return String(item[internalKey2]);
     }
     function columnClasses(column) {
       const classes = ["table__column", `table__column--${column.type}`, column.size];
@@ -12711,7 +13302,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           key: column.id,
           class: normalizeClass(column.size)
         }, null, 2);
-      }), 128))]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_3$g, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column) => {
+      }), 128))]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_3$h, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column) => {
         return openBlock(), createElementBlock("th", mergeProps({
           key: column.id,
           scope: "col",
@@ -12730,7 +13321,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       })))])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("tr", _hoisted_7$7, [createElementVNode("td", {
         class: "table__column table__column--action",
         colspan: columns.value.length
-      }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row) => {
+      }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(internalRows.value, (row) => {
         return openBlock(), createElementBlock("tr", {
           key: rowKey(row),
           class: "table__row"
@@ -13081,7 +13672,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 = {
@@ -13132,7 +13723,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onClickCalendarButton())
     }, [createVNode(_component_f_icon, {
       name: "calendar"
-    }), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("span", _hoisted_3$f, toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
+    }), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("span", _hoisted_3$g, toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
     default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.datepicker-field.label", "Datum")), 1)]), _cache[7] || (_cache[7] = createTextVNode()), _cache[8] || (_cache[8] = createTextVNode()), _cache[9] || (_cache[9] = createTextVNode()), _cache[10] || (_cache[10] = createTextVNode())]),
     _: 2
   }, [_ctx.$slots.tooltip ? {
@@ -13272,7 +13863,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 = resolveComponent("f-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$p, [_ctx.options.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_2$j, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
@@ -13286,7 +13877,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: ($event) => _ctx.onClickedOption(option, index)
     }, [createElementVNode("span", null, toDisplayString(option.label), 1), _cache[0] || (_cache[0] = createTextVNode()), createVNode(_component_f_icon, {
       name: "arrow-right"
-    })], 8, _hoisted_3$e)]);
+    })], 8, _hoisted_3$f)]);
   }), 128))])) : renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({
     key: 1
   }, {
@@ -13341,6 +13932,10 @@ const _sfc_main$o = 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,
@@ -13372,7 +13967,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"];
@@ -13401,7 +13996,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))
-    }), [createElementVNode("span", _hoisted_2$i, [createElementVNode("span", _hoisted_3$d, [createVNode(_component_f_icon, {
+    }), [createElementVNode("span", _hoisted_2$i, [createElementVNode("span", _hoisted_3$e, [createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = createTextVNode()), createVNode(_component_f_icon, {
       name: "dash"
@@ -13511,7 +14106,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 = {
@@ -13543,7 +14138,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))
-    }), [createElementVNode("span", _hoisted_2$h, [createElementVNode("span", _hoisted_3$c, [createVNode(_component_f_icon, {
+    }), [createElementVNode("span", _hoisted_2$h, [createElementVNode("span", _hoisted_3$d, [createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = createTextVNode()), createVNode(_component_f_icon, {
       name: "dash"
@@ -13651,7 +14246,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"
 };
@@ -13674,7 +14269,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     name: "new-window"
   }), _cache[0] || (_cache[0] = createTextVNode()), createVNode(_component_f_icon, {
     name: _ctx.iconName
-  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("span", _hoisted_5$7, toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("span", _hoisted_6$5, " " + toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$b), _cache[3] || (_cache[3] = createTextVNode()), renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), _ctx.isMimeTypeChanged ? (openBlock(), createElementBlock("div", _hoisted_7$4, toDisplayString(_ctx.mimeTypeChangedText), 1)) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), _cache[7] || (_cache[7] = createElementVNode("hr", {
+  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("span", _hoisted_5$7, toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("span", _hoisted_6$5, " " + toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$c), _cache[3] || (_cache[3] = createTextVNode()), renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), _ctx.isMimeTypeChanged ? (openBlock(), createElementBlock("div", _hoisted_7$4, toDisplayString(_ctx.mimeTypeChangedText), 1)) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), _cache[7] || (_cache[7] = createElementVNode("hr", {
     class: "file-item__separator"
   }, null, -1))]);
 }
@@ -13700,6 +14295,9 @@ const _sfc_main$l = defineComponent({
       required: false,
       default: () => ElementIdService.generateElementId()
     },
+    /**
+     * Disables the file selector.
+     */
     disabled: {
       type: Boolean,
       required: false,
@@ -13744,7 +14342,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 = resolveComponent("f-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$l, [createElementVNode("input", mergeProps({
@@ -13764,7 +14362,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createVNode(_component_f_icon, {
     class: "button__icon",
     name: "paper-clip"
-  }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$a)]);
+  }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$b)]);
 }
 const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$e]]);
 const keybindings = {
@@ -13882,7 +14480,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"
 };
@@ -13969,7 +14567,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
      */
     keyAttribute: {
       type: String,
-      required: true
+      required: false,
+      default: void 0
     },
     /**
      * Attribute of expandable content in rows.
@@ -14020,7 +14619,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
     },
     /**
-     * V-model will bind to value containing selected rows.
+     * Currently selected rows.
+     * Requires `selectable` to be set.
      */
     modelValue: {
       type: Array,
@@ -14062,6 +14662,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       registerCallbackAfterItemAdd,
       registerCallbackBeforeItemDelete
     } = ActivateItemInjected();
+    const internalKey2 = getInternalKey();
     const activeRow = ref(void 0);
     const columns = ref([]);
     const selectedRows = ref([]);
@@ -14069,7 +14670,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const tbodyKey = ref(0);
     const props = __props;
     const emit = __emit;
-    const expandableTable = useExpandableTable(props.expandableAttribute, props.keyAttribute, props.expandableDescribedby, emit, slots);
+    const expandableTable = useExpandableTable(props.expandableAttribute, internalKey2, props.expandableDescribedby, emit, slots);
     const {
       isExpandableTable,
       hasExpandableSlot,
@@ -14081,19 +14682,20 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       expandableRows,
       hasExpandableContent
     } = expandableTable;
+    const tbodyElement = useTemplateRef("tbodyElement");
     const hasCaption = computed(() => {
       return hasSlot2("caption", {}, {
         stripClasses: []
       });
     });
     const hasCheckboxDescription = computed(() => {
-      const firstRow = props.rows[0];
+      const firstRow = internalRows.value[0];
       return hasSlot2("checkbox-description", {
         row: firstRow
       });
     });
     const isEmpty2 = computed(() => {
-      return props.rows.length === 0;
+      return internalRows.value.length === 0;
     });
     const visibleColumns = computed(() => {
       return columns.value.filter((col) => col.visible);
@@ -14124,6 +14726,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
       return columnCount;
     });
+    const internalRows = computed(() => {
+      const {
+        keyAttribute,
+        expandableAttribute
+      } = props;
+      if (isExpandableTable) {
+        return setInternalKeys(props.rows, keyAttribute, expandableAttribute);
+      }
+      return setInternalKeys(props.rows, keyAttribute);
+    });
     provide("addColumn", (column) => {
       columns.value = addColumn(columns.value, column);
     });
@@ -14131,7 +14743,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       setVisibilityColumn(columns.value, id, visible);
     });
     provide("textFieldTableMode", true);
-    provide("renderColumns", computed(() => props.rows.length > 0));
+    provide("renderColumns", computed(() => internalRows.value.length > 0));
     watch(() => props.rows, () => setSelectedRows(), {
       immediate: true,
       deep: true
@@ -14152,21 +14764,19 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       immediate: true,
       deep: true
     });
-    function updateTr(tbodyElement) {
-      const trElements = [].slice.call(tbodyElement.children);
+    function updateTr(tbodyElement2) {
+      const trElements = [].slice.call(tbodyElement2.children);
       const trInteractableElements = trElements.filter((tr2) => {
         return tr2.tabIndex === 0;
       });
       tr.value = trInteractableElements;
     }
     onUpdated(() => {
-      const tbodyElement = useTemplateRef("tbodyElement");
       if (tbodyElement.value) {
         updateTr(tbodyElement.value);
       }
     });
     onMounted(() => {
-      const tbodyElement = useTemplateRef("tbodyElement");
       if (tbodyElement.value) {
         updateTr(tbodyElement.value);
       }
@@ -14186,14 +14796,14 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       if (!props.showActive) {
         return false;
       }
-      return itemEquals(row, activeRow.value, props.keyAttribute);
+      return itemEquals(row, activeRow.value, internalKey2);
     }
     function isSelected(row) {
-      return includeItem(row, selectedRows.value, props.keyAttribute);
+      return includeItem(row, selectedRows.value, internalKey2);
     }
     function onKeydown$1(event, index) {
       onKeydown({
-        rows: props.rows,
+        rows: internalRows.value,
         tr,
         activate
       }, event, index);
@@ -14213,7 +14823,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       if (isExpandableTable.value && hasExpandableContent(row)) {
         toggleExpanded(row);
       }
-      if (!itemEquals(row, activeRow.value, props.keyAttribute)) {
+      if (!itemEquals(row, activeRow.value, internalKey2)) {
         emit("change", row);
         setActiveRow(row);
         if (tr2) {
@@ -14231,8 +14841,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     }
     function onSelect(row) {
       var _a, _b;
-      if (includeItem(row, selectedRows.value, props.keyAttribute)) {
-        selectedRows.value = selectedRows.value.filter((i) => !itemEquals(i, row, props.keyAttribute));
+      if (includeItem(row, selectedRows.value, internalKey2)) {
+        selectedRows.value = selectedRows.value.filter((i) => !itemEquals(i, row, internalKey2));
         emit("unselect", row);
       } else {
         selectedRows.value.push(row);
@@ -14247,7 +14857,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         return;
       }
       selectedRows.value = props.modelValue.filter((row) => {
-        return includeItem(row, props.rows, props.keyAttribute);
+        return includeItem(row, internalRows.value, internalKey2);
       });
     }
     function updateVModelWithSelectedRows() {
@@ -14265,11 +14875,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       return ["table__row", ...active, ...selected, ...striped, ...expandable, ...expanded];
     }
     function rowKey(row) {
-      const key = row[props.keyAttribute];
-      if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in row`);
-      }
-      return String(key);
+      return String(row[internalKey2]);
     }
     function columnClasses(column) {
       const sortable = column.sortable ? ["table__column--sortable"] : [];
@@ -14302,16 +14908,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       activate(item, null);
     }
     function callbackBeforeItemDelete(item) {
-      if (props.rows.length === 0) {
+      if (internalRows.value.length === 0) {
         return;
       }
-      let targetIndex = props.rows.indexOf(item) - 1;
-      if (targetIndex < 0 && props.rows.length > 1) {
+      let targetIndex = internalRows.value.indexOf(item) - 1;
+      if (targetIndex < 0 && internalRows.value.length > 1) {
         targetIndex = 1;
       } else if (targetIndex < 0) {
         targetIndex = 0;
       }
-      activate(props.rows[targetIndex], tr.value[targetIndex]);
+      activate(internalRows.value[targetIndex], tr.value[targetIndex]);
     }
     function escapeNewlines(value) {
       return value.replace(/\n/g, "<br/>");
@@ -14319,7 +14925,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     function updateActiveRowFromVModel() {
       if (props.active === void 0) {
         setActiveRow(void 0);
-      } else if (!itemEquals(props.active, activeRow.value, props.keyAttribute)) {
+      } else if (!itemEquals(props.active, activeRow.value, internalKey2)) {
         setActiveRow(props.active);
       }
     }
@@ -14333,7 +14939,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }, [createCommentVNode("", true), _cache[18] || (_cache[18] = createTextVNode()), createElementVNode("table", mergeProps({
         class: ["table", tableClasses.value],
         role: tableRole.value
-      }, _ctx.$attrs), [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$e, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("colgroup", null, [unref(isExpandableTable) ? (openBlock(), createElementBlock("col", _hoisted_3$9)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$e, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("colgroup", null, [unref(isExpandableTable) ? (openBlock(), createElementBlock("col", _hoisted_3$a)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
         return openBlock(), createElementBlock("col", {
           key: column.id,
           class: normalizeClass(column.size)
@@ -14353,9 +14959,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           name: iconName(column)
         }, null, 8, ["class", "name"])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), column.description ? (openBlock(), createElementBlock("span", _hoisted_11$1, toDisplayString(column.description), 1)) : createCommentVNode("", true)], 16);
       }), 128))])]), _cache[17] || (_cache[17] = createTextVNode()), (openBlock(), createElementBlock("tbody", {
-        ref: "tbodyElement",
+        ref_key: "tbodyElement",
+        ref: tbodyElement,
         key: tbodyKey.value
-      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, index) => {
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(internalRows.value, (row, index) => {
         return openBlock(), createElementBlock(Fragment, {
           key: rowKey(row)
         }, [createElementVNode("tr", {
@@ -14454,7 +15061,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 = {
@@ -14468,7 +15075,7 @@ const _hoisted_5$5 = {
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$j, [_ctx.showHeader || _ctx.showTopNavigation ? (openBlock(), createElementBlock("header", _hoisted_2$d, [_ctx.showHeader ? renderSlot(_ctx.$slots, "header", {
     key: 0
-  }) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.showTopNavigation ? (openBlock(), createElementBlock("nav", _hoisted_3$8, [renderSlot(_ctx.$slots, "top-navigation")])) : createCommentVNode("", true)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("main", _hoisted_4$7, [renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = createTextVNode()), _ctx.showFooter ? (openBlock(), createElementBlock("footer", _hoisted_5$5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]);
+  }) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.showTopNavigation ? (openBlock(), createElementBlock("nav", _hoisted_3$9, [renderSlot(_ctx.$slots, "top-navigation")])) : createCommentVNode("", true)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("main", _hoisted_4$7, [renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = createTextVNode()), _ctx.showFooter ? (openBlock(), createElementBlock("footer", _hoisted_5$5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]);
 }
 const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
@@ -14660,7 +15267,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 = {
@@ -14674,7 +15281,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     class: "layout-navigation__navigation",
     style: normalizeStyle(_ctx.navigationStyle),
     "aria-expanded": _ctx.isOpen
-  }, [createElementVNode("div", _hoisted_3$7, [_ctx.isOpen ? (openBlock(), createElementBlock(Fragment, {
+  }, [createElementVNode("div", _hoisted_3$8, [_ctx.isOpen ? (openBlock(), createElementBlock(Fragment, {
     key: 0
   }, [createElementVNode("div", {
     class: "layout-navigation__navigation__inner__title",
@@ -14919,7 +15526,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"];
@@ -14953,7 +15560,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
      */
     keyAttribute: {
       type: String,
-      required: true
+      required: false,
+      default: void 0
     },
     /**
      * If `true` the list will be selectable.
@@ -15006,13 +15614,23 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       registerCallbackAfterItemAdd,
       registerCallbackBeforeItemDelete
     } = ActivateItemInjected();
+    const internalKey2 = getInternalKey();
     const selectedItems = ref([]);
     const activeItem = ref(void 0);
     const ulElement = ref();
     const props = __props;
     const emit = __emit;
     const isEmpty2 = computed(() => {
-      return props.items.length === 0;
+      return internalItems.value.length === 0;
+    });
+    const internalItems = computed(() => {
+      const {
+        keyAttribute
+      } = props;
+      if (keyAttribute) {
+        return setInternalKeys(props.items, keyAttribute);
+      }
+      return setInternalKeys(props.items);
     });
     watch(() => props.items, () => {
       updateSelectedItemsFromVModel();
@@ -15045,14 +15663,10 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return Array.from(element.children);
     }
     function itemKey(item) {
-      const key = item[props.keyAttribute];
-      if (typeof key === "undefined") {
-        throw new Error(`Key attribute [${props.keyAttribute}]' is missing in item`);
-      }
-      return String(key);
+      return String(item[internalKey2]);
     }
     function isSelected(item) {
-      return includeItem(item, selectedItems.value, props.keyAttribute);
+      return includeItem(item, selectedItems.value, internalKey2);
     }
     function itemClasses(item) {
       return {
@@ -15062,8 +15676,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     }
     function onSelect(item) {
       var _a, _b;
-      if (includeItem(item, selectedItems.value, props.keyAttribute)) {
-        selectedItems.value = selectedItems.value.filter((i) => !itemEquals(i, item, props.keyAttribute));
+      if (includeItem(item, selectedItems.value, internalKey2)) {
+        selectedItems.value = selectedItems.value.filter((i) => !itemEquals(i, item, internalKey2));
         emit("unselect", item);
       } else {
         selectedItems.value.push(item);
@@ -15074,7 +15688,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     }
     function setActiveItem(item) {
       emit("click", item);
-      if (!itemEquals(item, activeItem.value, props.keyAttribute)) {
+      if (!itemEquals(item, activeItem.value, internalKey2)) {
         emit("change", item);
         activeItem.value = item;
         emit("update:active", activeItem.value);
@@ -15091,7 +15705,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     function updateSelectedItemsFromVModel() {
       if (Array.isArray(props.modelValue)) {
         selectedItems.value = props.modelValue.filter((item) => {
-          return includeItem(item, props.items, props.keyAttribute);
+          return includeItem(item, internalItems.value, internalKey2);
         });
       } else {
         selectedItems.value = [];
@@ -15100,7 +15714,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     function updateActiveItemFromVModel() {
       if (props.active === void 0) {
         activeItem.value = void 0;
-      } else if (!itemEquals(props.active, activeItem.value, props.keyAttribute)) {
+      } else if (!itemEquals(props.active, activeItem.value, internalKey2)) {
         activeItem.value = props.active;
       }
     }
@@ -15140,26 +15754,26 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       setActiveItem(item);
     }
     function callbackBeforeItemDelete(item) {
-      if (props.items.length === 0) {
+      if (internalItems.value.length === 0) {
         return;
       }
-      let targetIndex = props.items.indexOf(item) - 1;
-      if (targetIndex < 0 && props.items.length > 1) {
+      let targetIndex = internalItems.value.indexOf(item) - 1;
+      if (targetIndex < 0 && internalItems.value.length > 1) {
         targetIndex = 1;
       } else if (targetIndex < 0) {
         targetIndex = 0;
       }
-      setActiveItem(props.items[targetIndex]);
+      setActiveItem(internalItems.value[targetIndex]);
       const targetElement = getLiElements()[targetIndex];
       if (targetElement) {
         targetElement.focus();
       }
     }
     function isActive(item) {
-      return props.checkbox && itemEquals(activeItem.value, item, props.keyAttribute);
+      return props.checkbox && itemEquals(activeItem.value, item, internalKey2);
     }
     return (_ctx, _cache) => {
-      return !__props.selectable ? (openBlock(), createElementBlock("ul", _hoisted_1$g, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+      return !__props.selectable ? (openBlock(), createElementBlock("ul", _hoisted_1$g, [(openBlock(true), createElementBlock(Fragment, null, renderList(internalItems.value, (item) => {
         return openBlock(), createElementBlock("li", {
           key: itemKey(item),
           class: "list__item"
@@ -15172,12 +15786,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }, {
           item
         }))], 512)]);
-      }), 128)), _cache[0] || (_cache[0] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("li", _hoisted_2$a, [createElementVNode("div", _hoisted_3$6, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("ul", {
+      }), 128)), _cache[0] || (_cache[0] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("li", _hoisted_2$a, [createElementVNode("div", _hoisted_3$7, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("ul", {
         key: 1,
         ref_key: "ulElement",
         ref: ulElement,
         class: "list list--hover"
-      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(internalItems.value, (item, index) => {
         return openBlock(), createElementBlock("li", {
           id: getItemId(item),
           key: itemKey(item),
@@ -15971,7 +16585,7 @@ const _sfc_main$c = 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"];
@@ -16012,7 +16626,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.itemClasses(item, index)),
       role: "none",
       onClick: (event) => _ctx.onClickItem(event, item)
-    }, [createElementVNode("div", _hoisted_3$5, [createElementVNode("a", {
+    }, [createElementVNode("div", _hoisted_3$6, [createElementVNode("a", {
       ref_for: true,
       ref: "anchors",
       "data-ref-index": index,
@@ -16107,7 +16721,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 = {
@@ -16130,7 +16744,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
       shrink: "",
       align: "center"
     }, {
-      default: withCtx(() => [createElementVNode("span", _hoisted_3$4, [createVNode(_component_f_icon, {
+      default: withCtx(() => [createElementVNode("span", _hoisted_3$5, [createVNode(_component_f_icon, {
         name: "triangle"
       }), _cache[0] || (_cache[0] = createTextVNode()), createVNode(_component_f_icon, {
         name: "alert"
@@ -16259,7 +16873,7 @@ const _hoisted_1$9 = {
 const _hoisted_2$5 = {
   key: 0
 };
-const _hoisted_3$3 = {
+const _hoisted_3$4 = {
   ref: "header",
   class: "page-header"
 };
@@ -16280,7 +16894,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [renderSlot(_ctx.$slots, "skip-link-text")]),
     _: 3
-  }, 8, ["href"])])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$3, [_ctx.hasLogo ? (openBlock(), createElementBlock("div", _hoisted_4$2, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), (openBlock(), createBlock(resolveDynamicComponent(_ctx.headerTag), {
+  }, 8, ["href"])])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$4, [_ctx.hasLogo ? (openBlock(), createElementBlock("div", _hoisted_4$2, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), (openBlock(), createBlock(resolveDynamicComponent(_ctx.headerTag), {
     class: "page-header__app-name"
   }, {
     default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -16425,7 +17039,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: {}
@@ -16527,6 +17141,9 @@ class PageLayout extends HTMLElement {
         _classPrivateFieldGet2(_elements, this)[slot] = element;
       }
     }
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent("update"));
+    }, 0);
   }
 }
 const _hoisted_1$8 = ["slot"];
@@ -16536,7 +17153,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   props: {
     layout: {}
   },
-  setup(__props) {
+  emits: ["update"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const emit = __emit;
     const slots = useSlots();
     const slotNames = computed(() => {
       return Object.keys(slots);
@@ -16546,9 +17167,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         customElements.define(tagName$1, PageLayout);
       }
     });
+    function onUpdate() {
+      emit("update");
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(tagName$1), {
-        layout: _ctx.layout
+        layout: _ctx.layout,
+        onUpdate
       }, {
         default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(slotNames.value, (slot) => {
           return openBlock(), createElementBlock("div", {
@@ -16557,10 +17182,87 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }, [renderSlot(_ctx.$slots, slot)], 8, _hoisted_1$8);
         }), 128))]),
         _: 3
-      }, 8, ["layout"]);
+      }, 40, ["layout"]);
     };
   }
 });
+function tryOnScopeDispose(fn2) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn2);
+    return true;
+  }
+  return false;
+}
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function watchImmediate(source, cb, options) {
+  return watch(
+    source,
+    cb,
+    {
+      ...options,
+      immediate: true
+    }
+  );
+}
+const defaultWindow = isClient ? window : void 0;
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function useEventListener(...args) {
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn2) => fn2());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const firstParamTargets = computed(() => {
+    const test = toArray(toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  const stopWatch = watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+        toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
+        toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        toValue(firstParamTargets.value ? args[3] : args[2])
+      ];
+    },
+    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
+      cleanup();
+      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
+        return;
+      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+      cleanups.push(
+        ...raw_targets.flatMap(
+          (el) => raw_events.flatMap(
+            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(cleanup);
+  return stop;
+}
 function getProperty(style, key) {
   const value = style.getPropertyValue(key);
   if (value === "") {
@@ -16569,16 +17271,33 @@ function getProperty(style, key) {
     return JSON.parse(value);
   }
 }
+function findLayoutElement(element) {
+  if (!element) {
+    return null;
+  }
+  const parent = element.closest("ce-page-layout");
+  if (parent) {
+    return parent;
+  }
+  const root = element.getRootNode();
+  if (root instanceof ShadowRoot) {
+    return findLayoutElement(root.host);
+  }
+  return null;
+}
 function useAreaData(element) {
   const area = ref(null);
   const attachPanel = ref(null);
   const direction = ref(null);
+  const layoutElement = computed(() => findLayoutElement(toValue(element)));
+  useEventListener(layoutElement, "update", () => {
+    if (element.value) {
+      update(element.value);
+    }
+  });
   watchEffect(() => {
     if (element.value) {
-      const style = getComputedStyle(element.value);
-      area.value = getProperty(style, VAR_NAME_AREA);
-      attachPanel.value = getProperty(style, VAR_NAME_ATTACH_PANEL);
-      direction.value = getProperty(style, VAR_NAME_DIRECTION);
+      update(element.value);
     }
   });
   return {
@@ -16586,12 +17305,18 @@ function useAreaData(element) {
     attachPanel,
     direction
   };
+  function update(element2) {
+    const style = getComputedStyle(element2);
+    area.value = getProperty(style, VAR_NAME_AREA);
+    attachPanel.value = getProperty(style, VAR_NAME_ATTACH_PANEL);
+    direction.value = getProperty(style, VAR_NAME_DIRECTION);
+  }
 }
 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;
@@ -16662,7 +17387,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "aria-valuenow": progressValueNow.value,
         "aria-valuetext": progressText.value,
         style: normalizeStyle(cssWidth.value)
-      }, [createElementVNode("span", _hoisted_3$2, toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
+      }, [createElementVNode("span", _hoisted_3$3, toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
     };
   }
 });
@@ -16825,7 +17550,7 @@ const _sfc_main$6 = 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"
 };
@@ -16847,7 +17572,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = createTextVNode()), _ctx.$slots.details ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$1, [_cache[1] || (_cache[1] = createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
+  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$2, [_cache[1] || (_cache[1] = createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -16860,83 +17585,6 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)], 10, _hoisted_2$3)], 34);
 }
 const FRadioField = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$4]]);
-function tryOnScopeDispose(fn2) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn2);
-    return true;
-  }
-  return false;
-}
-const isClient = typeof window !== "undefined" && typeof document !== "undefined";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const toString = Object.prototype.toString;
-const isObject = (val) => toString.call(val) === "[object Object]";
-function toArray(value) {
-  return Array.isArray(value) ? value : [value];
-}
-function watchImmediate(source, cb, options) {
-  return watch(
-    source,
-    cb,
-    {
-      ...options,
-      immediate: true
-    }
-  );
-}
-const defaultWindow = isClient ? window : void 0;
-function unrefElement(elRef) {
-  var _a;
-  const plain = toValue(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
-}
-function useEventListener(...args) {
-  const cleanups = [];
-  const cleanup = () => {
-    cleanups.forEach((fn2) => fn2());
-    cleanups.length = 0;
-  };
-  const register = (el, event, listener, options) => {
-    el.addEventListener(event, listener, options);
-    return () => el.removeEventListener(event, listener, options);
-  };
-  const firstParamTargets = computed(() => {
-    const test = toArray(toValue(args[0])).filter((e) => e != null);
-    return test.every((e) => typeof e !== "string") ? test : void 0;
-  });
-  const stopWatch = watchImmediate(
-    () => {
-      var _a, _b;
-      return [
-        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
-        toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
-        toArray(unref(firstParamTargets.value ? args[2] : args[1])),
-        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        toValue(firstParamTargets.value ? args[3] : args[2])
-      ];
-    },
-    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
-      cleanup();
-      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
-        return;
-      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
-      cleanups.push(
-        ...raw_targets.flatMap(
-          (el) => raw_events.flatMap(
-            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
-          )
-        )
-      );
-    },
-    { flush: "post" }
-  );
-  const stop = () => {
-    stopWatch();
-    cleanup();
-  };
-  tryOnScopeDispose(cleanup);
-  return stop;
-}
 const keymap = {
   left: {
     ArrowLeft: "decrease",
@@ -17055,7 +17703,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}"`);
@@ -17103,10 +17751,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__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FResizePane.ce",
   props: {
     disabled: {
@@ -17124,10 +17779,22 @@ const _sfc_main$5 = /* @__PURE__ */ 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 = shallowRef();
     const content = ref();
     const separator = ref();
@@ -17136,11 +17803,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       max: -1,
       current: -1
     });
-    const separatorSize = ref(0);
     const layoutSize = ref(0);
     const storageKey = computed(() => area.value ? `layout/${area.value}/size` : null);
     const {
       attachPanel: attachment,
+      direction,
       area
     } = useAreaData(root);
     useKeyboardHandler({
@@ -17173,11 +17840,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     });
     const minSize = 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 = 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 = computed(() => {
       const total = layoutSize.value;
@@ -17190,6 +17857,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return "vertical";
       }
     });
+    const classes = computed(() => {
+      return [`resize--${attachment.value}`, `resize--${direction.value}`, props.overlay ? "resize--overlay" : void 0, props.disabled ? "resize--disabled" : void 0];
+    });
     const layoutElement = computed(() => {
       var _host$closest;
       if (!root.value) {
@@ -17199,6 +17869,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       const host = shadow.host;
       return (_host$closest = host.closest("ce-page-layout")) !== null && _host$closest !== void 0 ? _host$closest : void 0;
     });
+    watch(() => props.min, onResize);
+    watch(() => props.max, onResize);
     watchEffect(() => {
       const {
         min,
@@ -17206,23 +17878,23 @@ const _sfc_main$5 = /* @__PURE__ */ 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);
+      }
     });
     onMounted(() => {
-      if (separator.value) {
-        const {
-          flexBasis
-        } = getComputedStyle(separator.value);
-        separatorSize.value = computeCssValue(flexBasis, 0, 0);
-      }
       layoutSize.value = getLayoutSize();
       state.value = {
         min: minSize.value,
@@ -17253,11 +17925,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock(Fragment, null, [_ctx.overlay && _ctx.offset ? (openBlock(), createElementBlock("div", _hoisted_1$5)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("div", mergeProps({
         ref_key: "root",
         ref: root,
-        class: normalizeClass(["resize", `resize--${unref(attachment)}`])
-      }, [createElementVNode("div", {
+        class: ["resize", classes.value]
+      }, _ctx.$attrs), [createElementVNode("div", {
         ref_key: "content",
         ref: content,
         class: "resize__content"
@@ -17269,17 +17941,36 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         class: "resize__handle",
         tabindex: "0",
         "aria-orientation": orientation.value
-      }, null, 8, _hoisted_1$5)) : (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_2$2)) : (openBlock(), 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 = inject(injectionKey, {
+    register() {
+      return () => void 0;
+    },
+    size: ref(0)
+  });
+  const unregister = api.register({
+    enabled: options.enabled,
+    visible: options.visible,
+    overlay: options.overlay,
+    offset: options.offset
+  });
+  onUnmounted(unregister);
+  return {
+    size: api.size
+  };
+}
 const _hoisted_1$4 = {
   slot: "content"
 };
@@ -17287,10 +17978,6 @@ const tagName = "ce-resize-pane";
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "FResizePane",
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     min: {
       default: "0"
     },
@@ -17305,12 +17992,83 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     if (!customElements.get(tagName)) {
       customElements.define(tagName, defineCustomElement(FResizePane));
     }
+    const anyEnabled = ref(true);
+    const anyVisible = ref(true);
+    const anyOverlay = ref(false);
+    const size = ref(-1);
+    const offset2 = ref(0);
+    let components = [];
+    let n = 0;
+    function any(src, predicate) {
+      return src.length === 0 || src.some(predicate);
+    }
+    provide(injectionKey, {
+      register(options) {
+        const component = {
+          ...options,
+          id: n++
+        };
+        components.push(component);
+        const scope = effectScope();
+        scope.run(() => {
+          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;
+            });
+          });
+          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;
+            });
+          });
+          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;
+            });
+          });
+          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 = computed(() => anyEnabled.value === false);
+    const hidden = computed(() => anyVisible.value === false);
+    const overlay = computed(() => anyOverlay.value === true);
     const props = __props;
+    function onResize(event) {
+      size.value = event.detail[0];
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(tagName), normalizeProps(guardReactiveProps(props)), {
+      return openBlock(), createBlock(resolveDynamicComponent(tagName), mergeProps({
+        disabled: disabled.value,
+        hidden: hidden.value,
+        overlay: overlay.value,
+        offset: offset2.value
+      }, props, {
+        onResize
+      }), {
         default: withCtx(() => [createElementVNode("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default")])]),
         _: 3
-      }, 16);
+      }, 16, ["disabled", "hidden", "overlay", "offset"]);
     };
   }
 });
@@ -17748,6 +18506,10 @@ const _sfc_main = 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
@@ -18146,7 +18908,7 @@ export {
   _sfc_main$s as FSortFilterDataset,
   FSortFilterDatasetInjected,
   FStaticField,
-  FTableColumn,
+  _sfc_main$J as FTableColumn,
   FTableColumnSize,
   FTableColumnSort,
   FTableColumnType,
@@ -18227,6 +18989,7 @@ export {
   useAreaData,
   useCombobox,
   useModal,
+  useResize,
   useSlotUtils,
   useTextFieldSetup,
   useTranslate