@fkui/vue 6.3.0 → 6.4.0

package/dist/cjs/index.cjs.js

@@ -1972,17 +1972,17 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _hoisted_1$X = ["aria-hidden"];
-const _hoisted_2$G = ["xlink:href"];
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$G = ["href"];
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps(_ctx.$attrs, {
     focusable: "false",
     class: ["icon", [_ctx.spriteKey, ..._ctx.modifiers]],
     "aria-hidden": _ctx.ariaHidden
   }), [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("use", {
-    "xlink:href": _ctx.spriteId
+    href: _ctx.spriteId
   }, null, 8, _hoisted_2$G)], 16, _hoisted_1$X);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$R]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$Q]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -3863,8 +3863,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;
@@ -3882,12 +3882,12 @@ var hasRequired_getTag;
 function require_getTag() {
   if (hasRequired_getTag) return _getTag;
   hasRequired_getTag = 1;
-  var DataView2 = require_DataView(), Map2 = require_Map(), Promise2 = require_Promise(), Set = require_Set(), 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) {
@@ -4604,7 +4604,7 @@ const _hoisted_1$W = ["id"];
 const _hoisted_2$F = {
   class: "modal__backdrop"
 };
-const _hoisted_3$w = {
+const _hoisted_3$x = {
   class: "modal__inner-container"
 };
 const _hoisted_4$q = {
@@ -4634,7 +4634,7 @@ const _hoisted_10$3 = {
   class: "modal__shelf"
 };
 const _hoisted_11$3 = ["aria-label"];
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return _ctx.isOpen ? (vue.openBlock(), vue.createElementBlock("div", {
     key: 0,
@@ -4646,7 +4646,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     role: "dialog",
     "aria-modal": "true",
     onKeyup: _cache[3] || (_cache[3] = vue.withKeys((...args) => _ctx.onClose && _ctx.onClose(...args), ["esc"]))
-  }, [vue.createElementVNode("div", _hoisted_3$w, [vue.createElementVNode("div", {
+  }, [vue.createElementVNode("div", _hoisted_3$x, [vue.createElementVNode("div", {
     ref: "modalDialogContainer",
     class: vue.normalizeClass(["modal__dialog-container", _ctx.containerClasses])
   }, [vue.createElementVNode("div", _hoisted_4$q, [vue.createElementVNode("div", _hoisted_5$l, [vue.createElementVNode("div", _hoisted_6$g, [vue.createElementVNode("div", {
@@ -4664,7 +4664,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
   }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$W)) : vue.createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$Q]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$P]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -4801,11 +4801,11 @@ const _hoisted_1$V = {
   class: "button-group"
 };
 const _hoisted_2$E = ["onClick"];
-const _hoisted_3$v = {
+const _hoisted_3$w = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_modal = vue.resolveComponent("f-modal");
   return vue.openBlock(), vue.createBlock(_component_f_modal, {
     fullscreen: _ctx.fullscreen,
@@ -4824,12 +4824,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: vue.normalizeClass([button.classlist, "button-group__item"]),
         onClick: ($event) => _ctx.onClick(button)
-      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$E);
+      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$w, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$E);
     }), 128))])]),
     _: 3
   }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
-const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$P]]);
+const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$O]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
 const ALIGNMENT = ["top", "center", "bottom"];
 const FLOAT = ["left", "center", "right"];
@@ -4908,12 +4908,12 @@ const _sfc_main$1a = vue.defineComponent({
     }
   }
 });
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["iflex", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$O]]);
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$N]]);
 const _sfc_main$19 = vue.defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
@@ -4961,12 +4961,12 @@ const _sfc_main$19 = vue.defineComponent({
     }
   }
 });
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["iflex__item", _ctx.classList])
   }, [vue.renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$N]]);
+const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$M]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -5038,14 +5038,14 @@ const _hoisted_1$U = {
 const _hoisted_2$D = {
   key: 0
 };
-const _hoisted_3$u = {
+const _hoisted_3$v = {
   class: "error-list__list error-list--list-style-none"
 };
 const _hoisted_4$p = ["onClick"];
 const _hoisted_5$k = {
   class: "error-list__link"
 };
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_flex_item = vue.resolveComponent("i-flex-item");
   const _component_i_flex = vue.resolveComponent("i-flex");
@@ -5068,7 +5068,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     })) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(_component_i_flex_item, {
       grow: ""
     }, {
-      default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$u, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
+      default: vue.withCtx(() => [_ctx.hasTitleSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, [vue.renderSlot(_ctx.$slots, "title")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("ul", _hoisted_3$v, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
         return vue.openBlock(), vue.createElementBlock("li", {
           key: item.id,
           class: vue.normalizeClass(_ctx.liClasses(item))
@@ -5099,7 +5099,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })]);
 }
-const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$M]]);
+const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$L]]);
 var es_iterator_every = {};
 var hasRequiredEs_iterator_every;
 function requireEs_iterator_every() {
@@ -5257,13 +5257,13 @@ const _sfc_main$17 = vue.defineComponent({
     }
   }
 });
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     onComponentValidity: _cache[0] || (_cache[0] = (...args) => _ctx.onComponentValidity && _ctx.onComponentValidity(...args)),
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [vue.renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$L]]);
+const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$K]]);
 var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
   FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
   FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
@@ -5415,7 +5415,7 @@ const _hoisted_2$C = {
   tabindex: "-1",
   role: "group"
 };
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_error_list = vue.resolveComponent("f-error-list");
   const _component_f_validation_group = vue.resolveComponent("f-validation-group");
   return vue.openBlock(), vue.createBlock(_component_f_validation_group, {
@@ -5441,7 +5441,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$K]]);
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$J]]);
 const _sfc_main$15 = vue.defineComponent({
   name: "FFormModal",
   components: {
@@ -5540,6 +5540,14 @@ const _sfc_main$15 = vue.defineComponent({
       default() {
       }
     },
+    /**
+     * List of buttons to display in the modal.
+     * Each button is defined as an FModalButtonDescriptor with the following properties:
+     * - `label` (String): The text displayed on the button.
+     * - `event` (String): The event emitted when the button is clicked.
+     * - `type` (String): The button type. Valid values are: "primary" or "secondary".
+     * - `submitButton` (Boolean): Whether the button is a submit button.
+     */
     buttons: {
       type: Array,
       required: false,
@@ -5595,11 +5603,11 @@ const _hoisted_1$S = {
   class: "button-group"
 };
 const _hoisted_2$B = ["type", "form", "onClick"];
-const _hoisted_3$t = {
+const _hoisted_3$u = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_validation_form = vue.resolveComponent("f-validation-form");
   const _component_f_modal = vue.resolveComponent("f-modal");
   return vue.openBlock(), vue.createBlock(_component_f_modal, {
@@ -5630,12 +5638,12 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
         class: vue.normalizeClass([button.classlist, "button-group__item"]),
         form: button.buttonType === "submit" ? _ctx.formId : void 0,
         onClick: ($event) => button.buttonType === "button" ? _ctx.onCancel() : false
-      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$t, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$B);
+      }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$u, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$B);
     }), 128))])]),
     _: 3
   }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
 }
-const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$J]]);
+const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$I]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -5952,6 +5960,9 @@ const ValidationPrefixDirective = {
 };
 const ValidationPlugin = {
   install(app) {
+    for (const validator of logic.availableValidators) {
+      logic.ValidationService.registerValidator(validator);
+    }
     app.directive("validation", ValidationDirective);
     app.directive("validationPrefix", ValidationPrefixDirective);
   }
@@ -6008,12 +6019,12 @@ const _sfc_main$14 = vue.defineComponent({
 const _hoisted_1$R = {
   "data-test": "f-error-page"
 };
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, _cache[0] || (_cache[0] = [vue.createElementVNode("h1", null, "Fel", -1), vue.createTextVNode(), vue.createElementVNode("p", null, "Ett fel har uppstått.", -1), vue.createTextVNode(), vue.createElementVNode("a", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$I]]);
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$H]]);
 const _sfc_main$13 = vue.defineComponent({
   name: "FErrorHandlingApp",
   props: {
@@ -6043,7 +6054,7 @@ const _sfc_main$13 = vue.defineComponent({
     });
   }
 });
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", null, [_ctx.hasError ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.errorComponent), {
     key: 0,
     payload: _ctx.payload
@@ -6053,7 +6064,7 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   })]);
 }
-const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$H]]);
+const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$G]]);
 function isMonthBefore(date2, minDate) {
   return Boolean(minDate && date2.isBefore(minDate.startOfMonth()));
 }
@@ -6214,7 +6225,7 @@ const _hoisted_2$A = {
   class: "calendar-navbar__month",
   tabindex: "-1"
 };
-const _hoisted_3$s = ["aria-disabled", "aria-live"];
+const _hoisted_3$t = ["aria-disabled", "aria-live"];
 const _hoisted_4$o = {
   class: "sr-only"
 };
@@ -6222,7 +6233,7 @@ const _hoisted_5$j = ["aria-disabled", "aria-live"];
 const _hoisted_6$f = {
   class: "sr-only"
 };
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [vue.createElementVNode("div", _hoisted_2$A, vue.toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.createElementVNode("button", {
     ref: "previousButton",
@@ -6234,7 +6245,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createElementVNode("span", _hoisted_4$o, vue.toDisplayString(_ctx.previousSrText), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
     class: vue.normalizeClass(_ctx.previousIconClasses),
     name: "arrow-right"
-  }, null, 8, ["class"])], 8, _hoisted_3$s), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("button", {
+  }, null, 8, ["class"])], 8, _hoisted_3$t), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("button", {
     ref: "nextButton",
     class: "calendar-navbar__arrow calendar-navbar__arrow--next",
     type: "button",
@@ -6246,7 +6257,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-right"
   }, null, 8, ["class"])], 8, _hoisted_5$j)]);
 }
-const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$G]]);
+const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$F]]);
 function getDayStartOffset(days) {
   return days[0].weekDay - 1;
 }
@@ -6332,7 +6343,7 @@ const _hoisted_2$z = {
   key: 0,
   class: "calendar-month__col--week"
 };
-const _hoisted_3$r = {
+const _hoisted_3$s = {
   key: 0,
   scope: "col",
   "aria-hidden": "true",
@@ -6359,7 +6370,7 @@ const _hoisted_11$2 = {
   "aria-hidden": "true"
 };
 const _hoisted_12$2 = ["colspan"];
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("table", {
     class: "calendar-month__table",
     role: "grid",
@@ -6380,7 +6391,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[14] || (_cache[14] = vue.createTextVNode()), _cache[15] || (_cache[15] = vue.createElementVNode("col", {
     class: "calendar-month__col--day"
-  }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3$r)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
+  }, null, -1))]), _cache[22] || (_cache[22] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3$s)) : vue.createCommentVNode("", true), _cache[16] || (_cache[16] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekdays, (weekday) => {
     return vue.openBlock(), vue.createElementBlock("th", {
       key: weekday.name,
       scope: "col",
@@ -6422,7 +6433,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": "true"
   }, null, 8, _hoisted_12$2)])) : vue.createCommentVNode("", true)])], 40, _hoisted_1$P);
 }
-const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$F]]);
+const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$E]]);
 const DayStep = {
   ArrowRight: 1,
   ArrowLeft: -1,
@@ -6537,7 +6548,7 @@ const _sfc_main$10 = vue.defineComponent({
   }
 });
 const _hoisted_1$O = ["data-date", "tabindex", "onClick", "onKeydown"];
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_month_grid = vue.resolveComponent("i-calendar-month-grid");
   return vue.openBlock(), vue.createBlock(_component_i_calendar_month_grid, {
     value: _ctx.modelValue
@@ -6560,7 +6571,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$E]]);
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$D]]);
 const _sfc_main$$ = vue.defineComponent({
   name: "FCalendar",
   components: {
@@ -6615,7 +6626,7 @@ const _sfc_main$$ = vue.defineComponent({
 const _hoisted_1$N = {
   class: "calendar__wrapper"
 };
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_navbar = vue.resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = vue.resolveComponent("i-calendar-month");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [vue.createVNode(_component_i_calendar_navbar, {
@@ -6641,7 +6652,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["model-value", "min-date", "max-date", "tab-date", "onClick", "onUpdate:modelValue"])]);
 }
-const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$D]]);
+const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$C]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -6731,12 +6742,12 @@ const _hoisted_1$M = {
 const _hoisted_2$y = {
   class: "sr-only"
 };
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("span", {
     class: vue.normalizeClass(_ctx.dayClasses)
   }, [vue.createElementVNode("span", _hoisted_1$M, vue.toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_2$y, vue.toDisplayString(_ctx.srText), 1)], 2);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$C]]);
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$B]]);
 function useEventListener$1(target, event, callback) {
   vue.onMounted(() => {
     var _a;
@@ -6762,7 +6773,7 @@ const _hoisted_2$x = {
   key: 0,
   class: "card__header"
 };
-const _hoisted_3$q = {
+const _hoisted_3$r = {
   class: "card__content"
 };
 const _hoisted_4$m = {
@@ -6807,6 +6818,9 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
       if (!isMounted.value) {
         return;
       }
+      if (detail.elementId !== props.id) {
+        return;
+      }
       if (!props.focusRef) {
         throw new Error("Element to focus on when card is invalid (`focusRef`) is required when using card validation.");
       }
@@ -6852,7 +6866,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
           _: 1
         })]),
         _: 1
-      })) : vue.createCommentVNode("", true)]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$q, [vue.renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = vue.createTextVNode()), hasFooterSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({
+      })) : vue.createCommentVNode("", true)]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$r, [vue.renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = vue.createTextVNode()), hasFooterSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$m, [vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({
         hasError: hasError.value,
         validationMessage: validationMessage.value
       })))])) : vue.createCommentVNode("", true)], 42, _hoisted_1$L);
@@ -6913,7 +6927,7 @@ const _sfc_main$Y = vue.defineComponent({
     }
   }
 });
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -6925,7 +6939,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
-const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$B]]);
+const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$A]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -7491,7 +7505,7 @@ const _sfc_main$X = vue.defineComponent({
     }
   }
 });
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
     key: 0,
     to: _ctx.teleportTarget,
@@ -7512,7 +7526,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$A]]);
+const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$z]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -7718,7 +7732,7 @@ const _hoisted_1$K = {
   ref: "wrapper",
   class: "popup-error__wrapper"
 };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return _ctx.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
     key: 0,
@@ -7742,7 +7756,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: "button__icon"
   })])], 6)], 512)], 2)], 8, ["to", "disabled"])) : vue.createCommentVNode("", true);
 }
-const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$z]]);
+const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$y]]);
 function numItems(itemHeight, availableHeight, verticalSpacing) {
   const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
   return Math.min(itemsFit, 7);
@@ -8272,13 +8286,13 @@ const _hoisted_2$v = {
   role: "menu",
   class: "ipopupmenu__list"
 };
-const _hoisted_3$p = ["onClick"];
+const _hoisted_3$q = ["onClick"];
 const _hoisted_4$l = ["data-ref-index", "href", "target"];
 const _hoisted_5$h = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_popup = vue.resolveComponent("i-popup");
   return vue.openBlock(), vue.createBlock(_component_i_popup, {
     class: "ipopupmenu",
@@ -8309,12 +8323,12 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
         role: "menuitem",
         target: item.target,
         tabindex: "0"
-      }, [_ctx.isSelected(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$h, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
+      }, [_ctx.isSelected(index) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$h, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$q);
     }), 128))])], 8, _hoisted_1$I)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
 }
-const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$y]]);
+const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$x]]);
 const ANIMATION_DURATION = 500;
 const NO_CSS_CLASSES = "";
 const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
@@ -8517,13 +8531,13 @@ const _hoisted_1$H = {
   ref: "content",
   "data-test": "animation-content"
 };
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(_ctx.animationClasses),
     style: vue.normalizeStyle(_ctx.heightStyle)
   }, [_ctx.shouldVIf ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [vue.renderSlot(_ctx.$slots, "default")], 512)), [[vue.vShow, _ctx.shouldVShow]]) : vue.createCommentVNode("", true)], 6);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$x]]);
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$w]]);
 const _sfc_main$S = vue.defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
@@ -8539,13 +8553,13 @@ const _sfc_main$S = vue.defineComponent({
   }
 });
 const _hoisted_1$G = ["href"];
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
   }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$G);
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$w]]);
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$v]]);
 function filterOptions(options, filter2, selectMode) {
   if (logic.isEmpty(filter2) || selectMode) {
     return options;
@@ -8795,7 +8809,7 @@ const _hoisted_1$F = {
   class: "combobox"
 };
 const _hoisted_2$u = ["id"];
-const _hoisted_3$o = ["id", "aria-selected", "onClick"];
+const _hoisted_3$p = ["id", "aria-selected", "onClick"];
 const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   __name: "IComboboxDropdown",
   props: {
@@ -8857,7 +8871,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
               "combobox__listbox__option--highlight": isOptionActive(item)
             }]),
             onClick: vue.withModifiers(($event) => onOptionClick(item), ["stop", "prevent"])
-          }, vue.toDisplayString(item), 11, _hoisted_3$o);
+          }, vue.toDisplayString(item), 11, _hoisted_3$p);
         }), 128))], 8, _hoisted_2$u)]),
         _: 1
       }, 8, ["is-open", "anchor", "num-of-items", "active-element"])]);
@@ -9149,7 +9163,7 @@ const _hoisted_1$D = ["aria-expanded"];
 const _hoisted_2$t = {
   class: "icon-stack icon-stack--tooltip"
 };
-const _hoisted_3$n = {
+const _hoisted_3$o = {
   class: "sr-only"
 };
 const _hoisted_4$k = {
@@ -9163,7 +9177,7 @@ const _hoisted_5$g = {
 const _hoisted_6$d = {
   class: "tooltip__footer"
 };
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [(vue.openBlock(), vue.createBlock(vue.Teleport, {
     disabled: _ctx.iconTarget === null,
@@ -9178,7 +9192,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "circle"
   }), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
     name: "i"
-  }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$n, vue.toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
+  }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$o, vue.toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
     ref: "wrapper",
     class: "tooltip"
   }, _ctx.$attrs), [_ctx.ready ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$k, [_ctx.hasHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.headerTag), {
@@ -9196,7 +9210,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])])])) : vue.createCommentVNode("", true)], 16)], 64);
 }
-const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$v]]);
+const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$u]]);
 function* labelClasses(options) {
   const {
     labelClass
@@ -9470,7 +9484,7 @@ const _hoisted_2$s = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_3$m = {
+const _hoisted_3$n = {
   key: 0,
   class: "label__message label__message--error"
 };
@@ -9497,7 +9511,7 @@ const _hoisted_9$4 = {
   key: 0,
   class: "label__message label__message--error"
 };
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("fieldset", {
     id: _ctx.id,
@@ -9512,7 +9526,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   }), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
     hasError: _ctx.hasError,
     validationMessage: _ctx.validity.validationMessage
-  })), () => [_ctx.hasError ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$m, [vue.createVNode(_component_f_icon, {
+  })), () => [_ctx.hasError ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$n, [vue.createVNode(_component_f_icon, {
     class: "label__icon--left",
     name: "error"
   }), vue.createTextVNode(" " + vue.toDisplayString(_ctx.validity.validationMessage), 1)])) : vue.createCommentVNode("", true)])], 2)), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.hasCheckbox ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$j, [_ctx.children.length === 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$f, vue.toDisplayString(_ctx.checkboxCheckedScreenReaderText), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$c, vue.toDisplayString(_ctx.numberOfCheckedCheckboxesScreenText), 1))])) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.hasTooltipSlot ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -9534,7 +9548,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass(_ctx.groupContentClass)
   }, [vue.renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$C);
 }
-const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$u]]);
+const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$t]]);
 const anyType$1 = [String, Object, Array, Number, Date, Boolean];
 const _sfc_main$N = vue.defineComponent({
   name: "FCheckboxField",
@@ -9724,7 +9738,7 @@ const _sfc_main$N = vue.defineComponent({
 });
 const _hoisted_1$B = ["id", "disabled"];
 const _hoisted_2$r = ["for"];
-const _hoisted_3$l = {
+const _hoisted_3$m = {
   key: 0,
   class: "checkbox__details"
 };
@@ -9732,7 +9746,7 @@ const _hoisted_4$i = {
   key: 0,
   class: "checkbox__details"
 };
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass(["checkbox", _ctx.disabledClass]),
     onValidity: _cache[2] || (_cache[2] = (...args) => _ctx.onValidity && _ctx.onValidity(...args))
@@ -9750,7 +9764,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [vue.renderSlot(_ctx.$slots, "default"), _cache[8] || (_cache[8] = vue.createTextVNode()), _ctx.$slots.details ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$l, [_cache[3] || (_cache[3] = vue.createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$m, [_cache[3] || (_cache[3] = vue.createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -9762,7 +9776,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$r)], 34);
 }
-const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$t]]);
+const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$s]]);
 var es_iterator_some = {};
 var hasRequiredEs_iterator_some;
 function requireEs_iterator_some() {
@@ -10012,13 +10026,13 @@ const _hoisted_2$q = {
   tabindex: "-1",
   class: "contextmenu__list"
 };
-const _hoisted_3$k = ["onClick"];
+const _hoisted_3$l = ["onClick"];
 const _hoisted_4$h = ["tabindex"];
 const _hoisted_5$e = {
   key: 0,
   class: "contextmenu__separator"
 };
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   const _component_i_popup = vue.resolveComponent("i-popup");
   return vue.openBlock(), vue.createBlock(_component_i_popup, {
@@ -10053,12 +10067,12 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["name", "library"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.createElementVNode("a", {
         ref_for: true,
         ref: "anchors"
-      }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$e)) : vue.createCommentVNode("", true)], 8, _hoisted_3$k);
+      }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = vue.createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$e)) : vue.createCommentVNode("", true)], 8, _hoisted_3$l);
     }), 128))], 512)], 40, _hoisted_1$A)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element"]);
 }
-const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$s]]);
+const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$r]]);
 var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["ADD"] = 0] = "ADD";
   Operation2[Operation2["DELETE"] = 1] = "DELETE";
@@ -10302,7 +10316,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
       isFormModalOpen.value = true;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), hasAddSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [vue.createElementVNode("button", {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [vue.renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = vue.createTextVNode()), hasAddSlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [vue.createElementVNode("button", {
         "data-test": "f-crud-dataset-add-button",
         type: "button",
         class: "button button--tertiary crud-dataset__add-button",
@@ -10310,7 +10324,9 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode(vue.unref(FIcon), {
         class: "button__icon",
         name: "plus"
-      }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "add-button", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createVNode(vue.unref(FFormModal), {
+      }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "add-button", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])]), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "buttons", vue.normalizeProps(vue.guardReactiveProps({
+        buttonClasses: ["button", "button--tertiary", "crud-dataset__add-button"]
+      })))])) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(vue.unref(FFormModal), {
         "is-open": isFormModalOpen.value,
         "aria-close-text": vue.unref($t2)("fkui.crud-dataset.modal.close", "Stäng"),
         buttons: formModalButtons.value,
@@ -10327,13 +10343,13 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
           key: 0
         }, {
           item: item.value
-        }))) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), operation.value === vue.unref(Operation).MODIFY ? vue.renderSlot(_ctx.$slots, "modify", vue.normalizeProps(vue.mergeProps({
+        }))) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), operation.value === vue.unref(Operation).MODIFY ? vue.renderSlot(_ctx.$slots, "modify", vue.normalizeProps(vue.mergeProps({
           key: 1
         }, {
           item: item.value
         }))) : vue.createCommentVNode("", true)]),
         _: 3
-      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createVNode(vue.unref(FConfirmModal), {
+      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createVNode(vue.unref(FConfirmModal), {
         "is-open": isConfirmModalOpen.value,
         buttons: confirmDeleteButtons.value,
         onConfirm: onDeleteConfirm,
@@ -10361,6 +10377,10 @@ const _sfc_main$K = vue.defineComponent({
   },
   mixins: [TranslationMixin],
   props: {
+    /**
+     * The action to be performed by the button.
+     * Must be one of the following values: "delete" or "modify".
+     */
     action: {
       type: String,
       required: true,
@@ -10368,14 +10388,24 @@ const _sfc_main$K = vue.defineComponent({
         return ["delete", "modify"].includes(value);
       }
     },
+    /**
+     * Determines if an icon should be displayed on the button.
+     */
     icon: {
       type: Boolean,
       default: false
     },
+    /**
+     * The item that the action will be performed on.
+     */
     item: {
       type: Object,
       required: true
     },
+    /**
+     * Determines if the button should display a label.
+     * If false, the button will use a visually hidden text for accessibility.
+     */
     label: {
       type: Boolean,
       default: false
@@ -10414,7 +10444,7 @@ const _hoisted_1$y = {
   key: 1,
   class: "sr-only"
 };
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("button", {
     type: "button",
@@ -10428,13 +10458,578 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   }, () => [vue.createTextVNode(vue.toDisplayString(_ctx.buttonText), 1)]) : vue.createCommentVNode("", true)]);
 }
-const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$r]]);
+const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$q]]);
 function ActivateItemInjected() {
   return {
     registerCallbackAfterItemAdd: vue.inject("registerCallbackAfterItemAdd", () => void 0),
     registerCallbackBeforeItemDelete: vue.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";
@@ -10512,9 +11107,11 @@ function FTableInjected() {
     renderColumns: vue.inject("renderColumns", false)
   };
 }
-const _sfc_main$J = vue.defineComponent({
-  name: "FTableColumn",
-  inheritAttrs: false,
+const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "FTableColumn",
   props: {
     /**
      * Unique (per-table) identifier.
@@ -10601,71 +11198,58 @@ const _sfc_main$J = vue.defineComponent({
       }
     }
   },
-  setup() {
+  setup(__props) {
     const {
       renderColumns,
       setVisibilityColumn: setVisibilityColumn2,
       addColumn: addColumn2
     } = FTableInjected();
-    return {
-      renderColumns,
-      setVisibilityColumn: setVisibilityColumn2,
-      addColumn: addColumn2
-    };
-  },
-  computed: {
-    classes() {
-      return ["table__column", `table__column--${this.type}`];
-    },
-    scope() {
-      return this.rowHeader ? "row" : null;
-    },
-    tagName() {
-      if (this.rowHeader) {
+    const props = __props;
+    const classes = vue.computed(() => {
+      return ["table__column", `table__column--${props.type}`];
+    });
+    const scope = vue.computed(() => {
+      return props.rowHeader ? "row" : null;
+    });
+    const tagName2 = vue.computed(() => {
+      if (props.rowHeader) {
         return "th";
       } else {
         return "td";
       }
-    }
-  },
-  watch: {
-    visible: {
-      handler: function() {
-        this.setVisibilityColumn(this.name, this.visible);
-      }
-    }
-  },
-  created() {
-    if (this.shrink && this.expand) {
-      throw new Error("Table cannot have both shrink and expand enabled at the same time");
-    }
-    const size = this.shrink ? FTableColumnSize.SHRINK : FTableColumnSize.EXPAND;
-    this.addColumn({
-      name: this.name,
-      title: this.title,
-      description: this.description || void 0,
-      id: logic.ElementIdService.generateElementId("column"),
-      size,
-      type: this.type,
-      visible: this.visible,
-      sortable: false,
-      sort: FTableColumnSort.UNSORTED
     });
+    vue.watch(() => props.visible, () => setVisibilityColumn2(props.name, props.visible));
+    vue.onMounted(() => {
+      if (props.shrink && props.expand) {
+        throw new Error("Table cannot have both shrink and expand enabled at the same time");
+      }
+      const size = props.shrink ? FTableColumnSize.SHRINK : FTableColumnSize.EXPAND;
+      addColumn2({
+        name: props.name,
+        title: props.title,
+        description: props.description || void 0,
+        id: logic.ElementIdService.generateElementId("column"),
+        size,
+        type: props.type,
+        visible: props.visible,
+        sortable: false,
+        sort: FTableColumnSort.UNSORTED
+      });
+    });
+    return (_ctx, _cache) => {
+      return vue.unref(renderColumns) && __props.visible ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName2.value), vue.mergeProps({
+        key: 0,
+        class: classes.value,
+        scope: scope.value
+      }, _ctx.$attrs), {
+        default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), _cache[1] || (_cache[1] = vue.createElementVNode("span", {
+          class: "sr-only"
+        }, " ", -1))]),
+        _: 3
+      }, 16, ["class", "scope"])) : vue.createCommentVNode("", true);
+    };
   }
 });
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.renderColumns && _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), vue.mergeProps({
-    key: 0,
-    class: _ctx.classes,
-    scope: _ctx.scope
-  }, _ctx.$attrs), {
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = vue.createTextVNode()), _cache[1] || (_cache[1] = vue.createElementVNode("span", {
-      class: "sr-only"
-    }, " ", -1))]),
-    _: 3
-  }, 16, ["class", "scope"])) : vue.createCommentVNode("", true);
-}
-const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: vue.inject("sort", () => void 0),
@@ -10719,7 +11303,7 @@ const _hoisted_2$o = {
   key: 0,
   ref: "tooltipAttachTo"
 };
-const _hoisted_3$j = ["for"];
+const _hoisted_3$k = ["for"];
 const _hoisted_4$g = ["for"];
 const _hoisted_5$d = {
   key: 0,
@@ -10735,7 +11319,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.$slots.tooltip ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [_ctx.hasDefaultSlot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$o, [vue.createElementVNode("label", {
     class: "label",
     for: _ctx.forProperty
-  }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$j)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("label", {
+  }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$k)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = vue.createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (vue.openBlock(), vue.createElementBlock("label", {
     key: 1,
     class: "label sr-separator",
     for: _ctx.forProperty
@@ -11330,7 +11914,7 @@ const _hoisted_2$n = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_3$i = {
+const _hoisted_3$j = {
   key: 0,
   class: "sr-only"
 };
@@ -11373,7 +11957,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, [_ctx.descriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$n, vue.toDisplayString(_ctx.descriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[7] || (_cache[7] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.descriptionText), 1)], 2)) : vue.createCommentVNode("", true), _cache[9] || (_cache[9] = vue.createTextVNode()), _ctx.discreteDescriptionText ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 1,
       class: vue.normalizeClass(formatDescriptionClass)
-    }, [_ctx.discreteDescriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$i, vue.toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : vue.createCommentVNode("", true)])]),
+    }, [_ctx.discreteDescriptionScreenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$j, vue.toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : vue.createCommentVNode("", true), _cache[8] || (_cache[8] = vue.createTextVNode()), vue.createElementVNode("span", null, vue.toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : vue.createCommentVNode("", true)])]),
     "error-message": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "error-message", vue.normalizeProps(vue.guardReactiveProps({
       hasError: _ctx.hasError,
       validationMessage: _ctx.validationMessage
@@ -12260,7 +12844,7 @@ const _hoisted_1$s = {
 const _hoisted_2$m = {
   class: "sort-filter-dataset__search"
 };
-const _hoisted_3$h = {
+const _hoisted_3$i = {
   class: "sr-only"
 };
 const _hoisted_4$e = ["title"];
@@ -12497,7 +13081,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                 maxlength: "64",
                 onInput: onSearchInput
               }, {
-                default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$h, vue.toDisplayString(__props.placeholderFilter), 1)]),
+                default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$i, vue.toDisplayString(__props.placeholderFilter), 1)]),
                 _: 1
               }, 8, ["modelValue", "placeholder"]), _cache[4] || (_cache[4] = vue.createTextVNode()), showClearButton.value ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 0,
@@ -12547,7 +13131,7 @@ const _hoisted_1$r = ["tabindex"];
 const _hoisted_2$l = {
   key: 0
 };
-const _hoisted_3$g = {
+const _hoisted_3$h = {
   class: "table__row"
 };
 const _hoisted_4$d = ["innerHTML"];
@@ -12581,7 +13165,8 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
      */
     keyAttribute: {
       type: String,
-      required: true
+      required: false,
+      default: void 0
     },
     /**
      * If `true` alternating rows will use a different background color.
@@ -12619,6 +13204,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       registerCallbackOnSort,
       registerCallbackOnMount
     } = FSortFilterDatasetInjected();
+    const internalKey2 = getInternalKey();
     const columns = vue.ref([]);
     const props = __props;
     const hasCaption = vue.computed(() => {
@@ -12634,7 +13220,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       return classes;
     });
     const isEmpty = vue.computed(() => {
-      return props.rows.length === 0;
+      return internalRows.value.length === 0;
     });
     const visibleColumns = vue.computed(() => {
       return columns.value.filter((col) => col.visible);
@@ -12645,6 +13231,15 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     const tabindex = vue.computed(() => {
       return props.scroll !== TableScroll.NONE ? 0 : void 0;
     });
+    const internalRows = vue.computed(() => {
+      const {
+        keyAttribute
+      } = props;
+      if (keyAttribute) {
+        return setInternalKeys(props.rows, keyAttribute);
+      }
+      return setInternalKeys(props.rows);
+    });
     vue.provide("addColumn", (column) => {
       if (column.type === FTableColumnType.ACTION) {
         throw new Error("Cannot use action column in FDataTable component");
@@ -12656,18 +13251,14 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     });
     vue.provide("textFieldTableMode", true);
     vue.provide("renderColumns", vue.computed(() => {
-      return props.rows.length > 0;
+      return internalRows.value.length > 0;
     }));
     vue.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];
@@ -12713,7 +13304,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
           key: column.id,
           class: vue.normalizeClass(column.size)
         }, null, 2);
-      }), 128))]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$g, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
+      }), 128))]), _cache[5] || (_cache[5] = vue.createTextVNode()), vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_3$h, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleColumns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
           key: column.id,
           scope: "col",
@@ -12732,7 +13323,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
       })))])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$7, [vue.createElementVNode("td", {
         class: "table__column table__column--action",
         colspan: columns.value.length
-      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.rows, (row) => {
+      }, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(vue.toDisplayString(vue.unref($t2)("fkui.data-table.empty", "Tabellen är tom")), 1)])], 8, _hoisted_8$5)])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalRows.value, (row) => {
         return vue.openBlock(), vue.createElementBlock("tr", {
           key: rowKey(row),
           class: "table__row"
@@ -13083,7 +13674,7 @@ const _hoisted_1$q = {
   class: "datepicker-field"
 };
 const _hoisted_2$k = ["disabled", "aria-expanded"];
-const _hoisted_3$f = {
+const _hoisted_3$g = {
   class: "sr-only"
 };
 const _hoisted_4$c = {
@@ -13134,7 +13725,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onClickCalendarButton())
     }, [vue.createVNode(_component_f_icon, {
       name: "calendar"
-    }), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$f, vue.toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
+    }), _cache[6] || (_cache[6] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_3$g, vue.toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.$t("fkui.datepicker-field.label", "Datum")), 1)]), _cache[7] || (_cache[7] = vue.createTextVNode()), _cache[8] || (_cache[8] = vue.createTextVNode()), _cache[9] || (_cache[9] = vue.createTextVNode()), _cache[10] || (_cache[10] = vue.createTextVNode())]),
     _: 2
   }, [_ctx.$slots.tooltip ? {
@@ -13274,7 +13865,7 @@ const _hoisted_2$j = {
   key: 0,
   class: "dialogue-tree__list"
 };
-const _hoisted_3$e = ["onClick"];
+const _hoisted_3$f = ["onClick"];
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [_ctx.options.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2$j, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option, index) => {
@@ -13288,7 +13879,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: ($event) => _ctx.onClickedOption(option, index)
     }, [vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "arrow-right"
-    })], 8, _hoisted_3$e)]);
+    })], 8, _hoisted_3$f)]);
   }), 128))])) : vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({
     key: 1
   }, {
@@ -13343,6 +13934,10 @@ const _sfc_main$o = vue.defineComponent({
       required: false,
       default: 0
     },
+    /**
+     * Text template for the screen reader notification text.
+     * Use `%VALUE%` as a placeholder for the number of notifications.
+     */
     screenReaderNotificationTemplate: {
       type: String,
       required: false,
@@ -13374,7 +13969,7 @@ const _hoisted_1$o = ["aria-expanded", "aria-controls"];
 const _hoisted_2$i = {
   class: "expandable-panel__icon"
 };
-const _hoisted_3$d = {
+const _hoisted_3$e = {
   class: "icon-stack"
 };
 const _hoisted_4$b = ["title"];
@@ -13403,7 +13998,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickHeadingButton && _ctx.onClickHeadingButton(...args))
-    }), [vue.createElementVNode("span", _hoisted_2$i, [vue.createElementVNode("span", _hoisted_3$d, [vue.createVNode(_component_f_icon, {
+    }), [vue.createElementVNode("span", _hoisted_2$i, [vue.createElementVNode("span", _hoisted_3$e, [vue.createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "dash"
@@ -13513,7 +14108,7 @@ const _hoisted_1$n = ["aria-expanded", "aria-controls"];
 const _hoisted_2$h = {
   class: "expandable-paragraph__icon"
 };
-const _hoisted_3$c = {
+const _hoisted_3$d = {
   class: "icon-stack"
 };
 const _hoisted_4$a = {
@@ -13545,7 +14140,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickMinimize && _ctx.onClickMinimize(...args))
-    }), [vue.createElementVNode("span", _hoisted_2$h, [vue.createElementVNode("span", _hoisted_3$c, [vue.createVNode(_component_f_icon, {
+    }), [vue.createElementVNode("span", _hoisted_2$h, [vue.createElementVNode("span", _hoisted_3$d, [vue.createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
       name: "dash"
@@ -13653,7 +14248,7 @@ const _hoisted_1$m = {
 const _hoisted_2$g = {
   class: "file-item__row"
 };
-const _hoisted_3$b = ["id"];
+const _hoisted_3$c = ["id"];
 const _hoisted_4$9 = {
   class: "icon-stack button__icon icon-stack--new-window"
 };
@@ -13676,7 +14271,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     name: "new-window"
   }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
     name: _ctx.iconName
-  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_5$7, vue.toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_6$5, " " + vue.toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$b), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.isMimeTypeChanged ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$4, vue.toDisplayString(_ctx.mimeTypeChangedText), 1)) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), _cache[7] || (_cache[7] = vue.createElementVNode("hr", {
+  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_5$7, vue.toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("span", _hoisted_6$5, " " + vue.toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$c), _cache[3] || (_cache[3] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.isMimeTypeChanged ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$4, vue.toDisplayString(_ctx.mimeTypeChangedText), 1)) : vue.createCommentVNode("", true), _cache[6] || (_cache[6] = vue.createTextVNode()), _cache[7] || (_cache[7] = vue.createElementVNode("hr", {
     class: "file-item__separator"
   }, null, -1))]);
 }
@@ -13702,6 +14297,9 @@ const _sfc_main$l = vue.defineComponent({
       required: false,
       default: () => logic.ElementIdService.generateElementId()
     },
+    /**
+     * Disables the file selector.
+     */
     disabled: {
       type: Boolean,
       required: false,
@@ -13746,7 +14344,7 @@ const _hoisted_1$l = {
   class: "file-selector"
 };
 const _hoisted_2$f = ["id", "aria-labelledby", "aria-disabled"];
-const _hoisted_3$a = ["id", "for"];
+const _hoisted_3$b = ["id", "for"];
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = vue.resolveComponent("f-icon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [vue.createElementVNode("input", vue.mergeProps({
@@ -13766,7 +14364,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   }, [vue.createVNode(_component_f_icon, {
     class: "button__icon",
     name: "paper-clip"
-  }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$a)]);
+  }), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$b)]);
 }
 const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$e]]);
 const keybindings = {
@@ -13884,7 +14482,7 @@ const _hoisted_1$k = ["role"];
 const _hoisted_2$e = {
   key: 0
 };
-const _hoisted_3$9 = {
+const _hoisted_3$a = {
   key: 0,
   class: "table__column--shrink"
 };
@@ -13971,7 +14569,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
      */
     keyAttribute: {
       type: String,
-      required: true
+      required: false,
+      default: void 0
     },
     /**
      * Attribute of expandable content in rows.
@@ -14022,7 +14621,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       }
     },
     /**
-     * V-model will bind to value containing selected rows.
+     * Currently selected rows.
+     * Requires `selectable` to be set.
      */
     modelValue: {
       type: Array,
@@ -14064,6 +14664,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       registerCallbackAfterItemAdd,
       registerCallbackBeforeItemDelete
     } = ActivateItemInjected();
+    const internalKey2 = getInternalKey();
     const activeRow = vue.ref(void 0);
     const columns = vue.ref([]);
     const selectedRows = vue.ref([]);
@@ -14071,7 +14672,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     const tbodyKey = vue.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,
@@ -14083,19 +14684,20 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       expandableRows,
       hasExpandableContent
     } = expandableTable;
+    const tbodyElement = vue.useTemplateRef("tbodyElement");
     const hasCaption = vue.computed(() => {
       return hasSlot2("caption", {}, {
         stripClasses: []
       });
     });
     const hasCheckboxDescription = vue.computed(() => {
-      const firstRow = props.rows[0];
+      const firstRow = internalRows.value[0];
       return hasSlot2("checkbox-description", {
         row: firstRow
       });
     });
     const isEmpty = vue.computed(() => {
-      return props.rows.length === 0;
+      return internalRows.value.length === 0;
     });
     const visibleColumns = vue.computed(() => {
       return columns.value.filter((col) => col.visible);
@@ -14126,6 +14728,16 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       }
       return columnCount;
     });
+    const internalRows = vue.computed(() => {
+      const {
+        keyAttribute,
+        expandableAttribute
+      } = props;
+      if (isExpandableTable) {
+        return setInternalKeys(props.rows, keyAttribute, expandableAttribute);
+      }
+      return setInternalKeys(props.rows, keyAttribute);
+    });
     vue.provide("addColumn", (column) => {
       columns.value = addColumn(columns.value, column);
     });
@@ -14133,7 +14745,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       setVisibilityColumn(columns.value, id, visible);
     });
     vue.provide("textFieldTableMode", true);
-    vue.provide("renderColumns", vue.computed(() => props.rows.length > 0));
+    vue.provide("renderColumns", vue.computed(() => internalRows.value.length > 0));
     vue.watch(() => props.rows, () => setSelectedRows(), {
       immediate: true,
       deep: true
@@ -14154,21 +14766,19 @@ const _sfc_main$k = /* @__PURE__ */ vue.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;
     }
     vue.onUpdated(() => {
-      const tbodyElement = vue.useTemplateRef("tbodyElement");
       if (tbodyElement.value) {
         updateTr(tbodyElement.value);
       }
     });
     vue.onMounted(() => {
-      const tbodyElement = vue.useTemplateRef("tbodyElement");
       if (tbodyElement.value) {
         updateTr(tbodyElement.value);
       }
@@ -14188,14 +14798,14 @@ const _sfc_main$k = /* @__PURE__ */ vue.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);
@@ -14215,7 +14825,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.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) {
@@ -14233,8 +14843,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.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);
@@ -14249,7 +14859,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       selectedRows.value = props.modelValue.filter((row) => {
-        return includeItem(row, props.rows, props.keyAttribute);
+        return includeItem(row, internalRows.value, internalKey2);
       });
     }
     function updateVModelWithSelectedRows() {
@@ -14267,11 +14877,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.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"] : [];
@@ -14304,16 +14910,16 @@ const _sfc_main$k = /* @__PURE__ */ vue.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/>");
@@ -14321,7 +14927,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.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);
       }
     }
@@ -14335,7 +14941,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createCommentVNode("", true), _cache[18] || (_cache[18] = vue.createTextVNode()), vue.createElementVNode("table", vue.mergeProps({
         class: ["table", tableClasses.value],
         role: tableRole.value
-      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$e, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$9)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (vue.openBlock(), vue.createElementBlock("caption", _hoisted_2$e, [vue.renderSlot(_ctx.$slots, "caption")])) : vue.createCommentVNode("", true), _cache[15] || (_cache[15] = vue.createTextVNode()), vue.createElementVNode("colgroup", null, [vue.unref(isExpandableTable) ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_3$a)) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), __props.selectable ? (vue.openBlock(), vue.createElementBlock("col", _hoisted_4$8)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(columns.value, (column) => {
         return vue.openBlock(), vue.createElementBlock("col", {
           key: column.id,
           class: vue.normalizeClass(column.size)
@@ -14355,9 +14961,10 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           name: iconName(column)
         }, null, 8, ["class", "name"])) : vue.createCommentVNode("", true), _cache[3] || (_cache[3] = vue.createTextVNode()), column.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(column.description), 1)) : vue.createCommentVNode("", true)], 16);
       }), 128))])]), _cache[17] || (_cache[17] = vue.createTextVNode()), (vue.openBlock(), vue.createElementBlock("tbody", {
-        ref: "tbodyElement",
+        ref_key: "tbodyElement",
+        ref: tbodyElement,
         key: tbodyKey.value
-      }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.rows, (row, index) => {
+      }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalRows.value, (row, index) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: rowKey(row)
         }, [vue.createElementVNode("tr", {
@@ -14456,7 +15063,7 @@ const _hoisted_2$d = {
   ref: "header",
   class: "layout-application-template__header"
 };
-const _hoisted_3$8 = {
+const _hoisted_3$9 = {
   key: 1
 };
 const _hoisted_4$7 = {
@@ -14470,7 +15077,7 @@ const _hoisted_5$5 = {
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [_ctx.showHeader || _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2$d, [_ctx.showHeader ? vue.renderSlot(_ctx.$slots, "header", {
     key: 0
-  }) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_3$8, [vue.renderSlot(_ctx.$slots, "top-navigation")])) : vue.createCommentVNode("", true)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("main", _hoisted_4$7, [vue.renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.showFooter ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_5$5, [vue.renderSlot(_ctx.$slots, "footer")])) : vue.createCommentVNode("", true)], 512)]);
+  }) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), _ctx.showTopNavigation ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_3$9, [vue.renderSlot(_ctx.$slots, "top-navigation")])) : vue.createCommentVNode("", true)], 512)) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("main", _hoisted_4$7, [vue.renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = vue.createTextVNode()), _ctx.showFooter ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_5$5, [vue.renderSlot(_ctx.$slots, "footer")])) : vue.createCommentVNode("", true)], 512)]);
 }
 const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
@@ -14662,7 +15269,7 @@ const _hoisted_1$i = {
   class: "layout-navigation"
 };
 const _hoisted_2$c = ["aria-expanded"];
-const _hoisted_3$7 = {
+const _hoisted_3$8 = {
   class: "layout-navigation__navigation__inner"
 };
 const _hoisted_4$6 = {
@@ -14676,7 +15283,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     class: "layout-navigation__navigation",
     style: vue.normalizeStyle(_ctx.navigationStyle),
     "aria-expanded": _ctx.isOpen
-  }, [vue.createElementVNode("div", _hoisted_3$7, [_ctx.isOpen ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+  }, [vue.createElementVNode("div", _hoisted_3$8, [_ctx.isOpen ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 0
   }, [vue.createElementVNode("div", {
     class: "layout-navigation__navigation__inner__title",
@@ -14921,7 +15528,7 @@ const _hoisted_2$a = {
   key: 0,
   class: "list__item"
 };
-const _hoisted_3$6 = {
+const _hoisted_3$7 = {
   class: "list__item__itempane"
 };
 const _hoisted_4$5 = ["id", "aria-labelledby", "tabindex", "onKeydown"];
@@ -14955,7 +15562,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
      */
     keyAttribute: {
       type: String,
-      required: true
+      required: false,
+      default: void 0
     },
     /**
      * If `true` the list will be selectable.
@@ -15008,13 +15616,23 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
       registerCallbackAfterItemAdd,
       registerCallbackBeforeItemDelete
     } = ActivateItemInjected();
+    const internalKey2 = getInternalKey();
     const selectedItems = vue.ref([]);
     const activeItem = vue.ref(void 0);
     const ulElement = vue.ref();
     const props = __props;
     const emit = __emit;
     const isEmpty = vue.computed(() => {
-      return props.items.length === 0;
+      return internalItems.value.length === 0;
+    });
+    const internalItems = vue.computed(() => {
+      const {
+        keyAttribute
+      } = props;
+      if (keyAttribute) {
+        return setInternalKeys(props.items, keyAttribute);
+      }
+      return setInternalKeys(props.items);
     });
     vue.watch(() => props.items, () => {
       updateSelectedItemsFromVModel();
@@ -15047,14 +15665,10 @@ const _sfc_main$g = /* @__PURE__ */ vue.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 {
@@ -15064,8 +15678,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.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);
@@ -15076,7 +15690,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.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);
@@ -15093,7 +15707,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.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 = [];
@@ -15102,7 +15716,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.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;
       }
     }
@@ -15142,26 +15756,26 @@ const _sfc_main$g = /* @__PURE__ */ vue.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 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$g, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+      return !__props.selectable ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1$g, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalItems.value, (item) => {
         return vue.openBlock(), vue.createElementBlock("li", {
           key: itemKey(item),
           class: "list__item"
@@ -15174,12 +15788,12 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
         }, {
           item
         }))], 512)]);
-      }), 128)), _cache[0] || (_cache[0] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$a, [vue.createElementVNode("div", _hoisted_3$6, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
+      }), 128)), _cache[0] || (_cache[0] = vue.createTextVNode()), isEmpty.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$a, [vue.createElementVNode("div", _hoisted_3$7, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createElementVNode("em", null, vue.toDisplayString(vue.unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : vue.createCommentVNode("", true)])) : (vue.openBlock(), vue.createElementBlock("ul", {
         key: 1,
         ref_key: "ulElement",
         ref: ulElement,
         class: "list list--hover"
-      }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index) => {
+      }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalItems.value, (item, index) => {
         return vue.openBlock(), vue.createElementBlock("li", {
           id: getItemId(item),
           key: itemKey(item),
@@ -15973,7 +16587,7 @@ const _sfc_main$c = vue.defineComponent({
 });
 const _hoisted_1$c = ["aria-label"];
 const _hoisted_2$8 = ["data-ref-index", "onClick"];
-const _hoisted_3$5 = {
+const _hoisted_3$6 = {
   class: "imenu__list__anchor-container"
 };
 const _hoisted_4$4 = ["data-ref-index", "href", "target"];
@@ -16014,7 +16628,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       class: vue.normalizeClass(_ctx.itemClasses(item, index)),
       role: "none",
       onClick: (event) => _ctx.onClickItem(event, item)
-    }, [vue.createElementVNode("div", _hoisted_3$5, [vue.createElementVNode("a", {
+    }, [vue.createElementVNode("div", _hoisted_3$6, [vue.createElementVNode("a", {
       ref_for: true,
       ref: "anchors",
       "data-ref-index": index,
@@ -16109,7 +16723,7 @@ const _hoisted_2$7 = {
   key: 0,
   class: "offline"
 };
-const _hoisted_3$4 = {
+const _hoisted_3$5 = {
   class: "icon-stack icon-stack--error"
 };
 const _hoisted_4$3 = {
@@ -16132,7 +16746,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
       shrink: "",
       align: "center"
     }, {
-      default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$4, [vue.createVNode(_component_f_icon, {
+      default: vue.withCtx(() => [vue.createElementVNode("span", _hoisted_3$5, [vue.createVNode(_component_f_icon, {
         name: "triangle"
       }), _cache[0] || (_cache[0] = vue.createTextVNode()), vue.createVNode(_component_f_icon, {
         name: "alert"
@@ -16261,7 +16875,7 @@ const _hoisted_1$9 = {
 const _hoisted_2$5 = {
   key: 0
 };
-const _hoisted_3$3 = {
+const _hoisted_3$4 = {
   ref: "header",
   class: "page-header"
 };
@@ -16282,7 +16896,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "skip-link-text")]),
     _: 3
-  }, 8, ["href"])])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$3, [_ctx.hasLogo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.headerTag), {
+  }, 8, ["href"])])) : vue.createCommentVNode("", true), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_3$4, [_ctx.hasLogo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), _cache[0] || (_cache[0] = vue.createTextVNode()), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.headerTag), {
     class: "page-header__app-name"
   }, {
     default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
@@ -16427,7 +17041,7 @@ registerLayout({
     }
   }
 });
-const styleContent = ':host {\n    display: block;\n}\n\n.page-layout {\n    display: grid;\n    height: 100cqh;\n    width: min(100%, 100cqw);\n\n    &[part~="simple"] {\n        grid-template:\n            "header" min-content\n            "content" 1fr\n            "footer" min-content\n            / 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="left-panel"] {\n        grid-template:\n            "header header" min-content\n            "left content" 1fr\n            "footer footer" min-content\n            / min-content 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"] {\n            background: var(--fkds-color-background-secondary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="right-panel"] {\n        grid-template:\n            "header header" min-content\n            "content right" 1fr\n            "footer footer" min-content\n            / 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="three-column"] {\n        grid-template:\n            "header header header" min-content\n            "left content right" 1fr\n            "footer footer footer" min-content\n            / min-content 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"],\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n}\n\n.page-layout__area {\n    display: flex;\n    position: relative;\n\n    &[data-direction="column"] {\n        flex-direction: column;\n    }\n\n    &[data-direction="row"] {\n        flex-direction: row;\n    }\n\n    &[data-scroll] {\n        overflow-y: auto;\n    }\n\n    &:empty {\n        display: none;\n    }\n}\n\n:host ::slotted(*) {\n    display: contents;\n}\n';
+const styleContent = ':host {\n    display: block;\n}\n\n.page-layout {\n    display: grid;\n    height: 100cqh;\n    width: min(100%, 100cqw);\n\n    &[part~="simple"] {\n        grid-template:\n            "header" min-content\n            "content" 1fr\n            "footer" min-content\n            / 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="left-panel"] {\n        grid-template:\n            "header header" min-content\n            "left content" 1fr\n            "footer footer" min-content\n            / min-content 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="right-panel"] {\n        grid-template:\n            "header header" min-content\n            "content right" 1fr\n            "footer footer" min-content\n            / 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area right"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="three-column"] {\n        grid-template:\n            "header header header" min-content\n            "left content right" 1fr\n            "footer footer footer" min-content\n            / min-content 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"],\n        [part="area right"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n}\n\n.page-layout__area {\n    display: flex;\n    position: relative;\n    background: var(--f-page-layout-background);\n    color: var(--f-page-layout-color);\n\n    &[data-direction="column"] {\n        flex-direction: column;\n    }\n\n    &[data-direction="row"] {\n        flex-direction: row;\n    }\n\n    &[data-scroll] {\n        overflow-y: auto;\n    }\n\n    &:empty {\n        display: none;\n    }\n}\n\n:host ::slotted(*) {\n    display: contents;\n}\n';
 const stubLayout = defineLayout({
   name: "",
   areas: {}
@@ -16529,6 +17143,9 @@ class PageLayout extends HTMLElement {
         _classPrivateFieldGet2(_elements, this)[slot] = element;
       }
     }
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent("update"));
+    }, 0);
   }
 }
 const _hoisted_1$8 = ["slot"];
@@ -16538,7 +17155,11 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   props: {
     layout: {}
   },
-  setup(__props) {
+  emits: ["update"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const emit = __emit;
     const slots = vue.useSlots();
     const slotNames = vue.computed(() => {
       return Object.keys(slots);
@@ -16548,9 +17169,13 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         customElements.define(tagName$1, PageLayout);
       }
     });
+    function onUpdate() {
+      emit("update");
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName$1), {
-        layout: _ctx.layout
+        layout: _ctx.layout,
+        onUpdate
       }, {
         default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(slotNames.value, (slot) => {
           return vue.openBlock(), vue.createElementBlock("div", {
@@ -16559,10 +17184,87 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
           }, [vue.renderSlot(_ctx.$slots, slot)], 8, _hoisted_1$8);
         }), 128))]),
         _: 3
-      }, 8, ["layout"]);
+      }, 40, ["layout"]);
     };
   }
 });
+function tryOnScopeDispose(fn2) {
+  if (vue.getCurrentScope()) {
+    vue.onScopeDispose(fn2);
+    return true;
+  }
+  return false;
+}
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function watchImmediate(source, cb, options) {
+  return vue.watch(
+    source,
+    cb,
+    {
+      ...options,
+      immediate: true
+    }
+  );
+}
+const defaultWindow = isClient ? window : void 0;
+function unrefElement(elRef) {
+  var _a;
+  const plain = vue.toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function useEventListener(...args) {
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn2) => fn2());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const firstParamTargets = vue.computed(() => {
+    const test = toArray(vue.toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  const stopWatch = watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+        toArray(vue.toValue(firstParamTargets.value ? args[1] : args[0])),
+        toArray(vue.unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        vue.toValue(firstParamTargets.value ? args[3] : args[2])
+      ];
+    },
+    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
+      cleanup();
+      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
+        return;
+      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+      cleanups.push(
+        ...raw_targets.flatMap(
+          (el) => raw_events.flatMap(
+            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(cleanup);
+  return stop;
+}
 function getProperty(style, key) {
   const value = style.getPropertyValue(key);
   if (value === "") {
@@ -16571,16 +17273,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 = vue.ref(null);
   const attachPanel = vue.ref(null);
   const direction = vue.ref(null);
+  const layoutElement = vue.computed(() => findLayoutElement(vue.toValue(element)));
+  useEventListener(layoutElement, "update", () => {
+    if (element.value) {
+      update(element.value);
+    }
+  });
   vue.watchEffect(() => {
     if (element.value) {
-      const style = getComputedStyle(element.value);
-      area.value = getProperty(style, VAR_NAME_AREA);
-      attachPanel.value = getProperty(style, VAR_NAME_ATTACH_PANEL);
-      direction.value = getProperty(style, VAR_NAME_DIRECTION);
+      update(element.value);
     }
   });
   return {
@@ -16588,12 +17307,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;
@@ -16664,7 +17389,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         "aria-valuenow": progressValueNow.value,
         "aria-valuetext": progressText.value,
         style: vue.normalizeStyle(cssWidth.value)
-      }, [vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
+      }, [vue.createElementVNode("span", _hoisted_3$3, vue.toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
     };
   }
 });
@@ -16827,7 +17552,7 @@ const _sfc_main$6 = vue.defineComponent({
 });
 const _hoisted_1$6 = ["id", "disabled"];
 const _hoisted_2$3 = ["for"];
-const _hoisted_3$1 = {
+const _hoisted_3$2 = {
   key: 0,
   class: "radio-button__details"
 };
@@ -16849,7 +17574,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [vue.renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = vue.createTextVNode()), _ctx.$slots.details ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, [_cache[1] || (_cache[1] = vue.createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+  }, [_ctx.showDetails === "always" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, [_cache[1] || (_cache[1] = vue.createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = vue.createTextVNode()), vue.renderSlot(_ctx.$slots, "details")])) : vue.createCommentVNode("", true), _cache[5] || (_cache[5] = vue.createTextVNode()), _ctx.showDetails === "when-selected" ? (vue.openBlock(), vue.createBlock(vue.Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -16862,83 +17587,6 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : vue.createCommentVNode("", true)], 64)) : vue.createCommentVNode("", true)], 10, _hoisted_2$3)], 34);
 }
 const FRadioField = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$4]]);
-function tryOnScopeDispose(fn2) {
-  if (vue.getCurrentScope()) {
-    vue.onScopeDispose(fn2);
-    return true;
-  }
-  return false;
-}
-const isClient = typeof window !== "undefined" && typeof document !== "undefined";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const toString = Object.prototype.toString;
-const isObject = (val) => toString.call(val) === "[object Object]";
-function toArray(value) {
-  return Array.isArray(value) ? value : [value];
-}
-function watchImmediate(source, cb, options) {
-  return vue.watch(
-    source,
-    cb,
-    {
-      ...options,
-      immediate: true
-    }
-  );
-}
-const defaultWindow = isClient ? window : void 0;
-function unrefElement(elRef) {
-  var _a;
-  const plain = vue.toValue(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
-}
-function useEventListener(...args) {
-  const cleanups = [];
-  const cleanup = () => {
-    cleanups.forEach((fn2) => fn2());
-    cleanups.length = 0;
-  };
-  const register = (el, event, listener, options) => {
-    el.addEventListener(event, listener, options);
-    return () => el.removeEventListener(event, listener, options);
-  };
-  const firstParamTargets = vue.computed(() => {
-    const test = toArray(vue.toValue(args[0])).filter((e) => e != null);
-    return test.every((e) => typeof e !== "string") ? test : void 0;
-  });
-  const stopWatch = watchImmediate(
-    () => {
-      var _a, _b;
-      return [
-        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
-        toArray(vue.toValue(firstParamTargets.value ? args[1] : args[0])),
-        toArray(vue.unref(firstParamTargets.value ? args[2] : args[1])),
-        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        vue.toValue(firstParamTargets.value ? args[3] : args[2])
-      ];
-    },
-    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
-      cleanup();
-      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
-        return;
-      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
-      cleanups.push(
-        ...raw_targets.flatMap(
-          (el) => raw_events.flatMap(
-            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
-          )
-        )
-      );
-    },
-    { flush: "post" }
-  );
-  const stop = () => {
-    stopWatch();
-    cleanup();
-  };
-  tryOnScopeDispose(cleanup);
-  return stop;
-}
 const keymap = {
   left: {
     ArrowLeft: "decrease",
@@ -17057,7 +17705,7 @@ function computeCssValue(raw, total, auto) {
     return percent * total;
   } else if (raw === "0") {
     return 0;
-  } else if (raw === "auto") {
+  } else if (raw === "auto" || raw === "") {
     return auto;
   } else {
     throw new Error(`Cant parse size from "${raw}"`);
@@ -17105,10 +17753,17 @@ function useStorage(options) {
     loaded.value = true;
   });
 }
-const _hoisted_1$5 = ["aria-orientation"];
+const _hoisted_1$5 = {
+  key: 0,
+  class: "resize__offset"
+};
 const _hoisted_2$2 = ["aria-orientation"];
+const _hoisted_3$1 = ["aria-orientation"];
 const STEP_SIZE = 10;
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FResizePane.ce",
   props: {
     disabled: {
@@ -17126,10 +17781,22 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     initial: {
       default: "50%",
       type: String
+    },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
+    offset: {
+      default: 0,
+      type: Number
     }
   },
-  setup(__props) {
+  emits: ["resize"],
+  setup(__props, {
+    emit: __emit
+  }) {
     const props = __props;
+    const emit = __emit;
     const root = vue.shallowRef();
     const content = vue.ref();
     const separator = vue.ref();
@@ -17138,11 +17805,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       max: -1,
       current: -1
     });
-    const separatorSize = vue.ref(0);
     const layoutSize = vue.ref(0);
     const storageKey = vue.computed(() => area.value ? `layout/${area.value}/size` : null);
     const {
       attachPanel: attachment,
+      direction,
       area
     } = useAreaData(root);
     useKeyboardHandler({
@@ -17175,11 +17842,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     });
     const minSize = vue.computed(() => {
       const total = layoutSize.value;
-      return Math.floor(aggregateCssValue(props.min, total, 0, Math.max) + separatorSize.value);
+      return Math.floor(aggregateCssValue(props.min, total, 0, Math.max));
     });
     const maxSize = vue.computed(() => {
       const total = layoutSize.value;
-      return Math.floor(aggregateCssValue(props.max, total, total, Math.min) + separatorSize.value);
+      return Math.max(Math.floor(aggregateCssValue(props.max, total, total, Math.min)), minSize.value);
     });
     const initialSize = vue.computed(() => {
       const total = layoutSize.value;
@@ -17192,6 +17859,9 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         return "vertical";
       }
     });
+    const classes = vue.computed(() => {
+      return [`resize--${attachment.value}`, `resize--${direction.value}`, props.overlay ? "resize--overlay" : void 0, props.disabled ? "resize--disabled" : void 0];
+    });
     const layoutElement = vue.computed(() => {
       var _host$closest;
       if (!root.value) {
@@ -17201,6 +17871,8 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       const host = shadow.host;
       return (_host$closest = host.closest("ce-page-layout")) !== null && _host$closest !== void 0 ? _host$closest : void 0;
     });
+    vue.watch(() => props.min, onResize);
+    vue.watch(() => props.max, onResize);
     vue.watchEffect(() => {
       const {
         min,
@@ -17208,23 +17880,23 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         current: value
       } = state.value;
       if (root.value) {
-        root.value.style.setProperty("--size", `${String(value)}px`);
-        root.value.style.setProperty("--min", `${min}px`);
-        root.value.style.setProperty("--max", `${max}px`);
+        const shadowRoot = root.value.getRootNode();
+        const host = shadowRoot.host;
+        host.style.setProperty("--size", `${String(value)}px`);
+        host.style.setProperty("--min", `${min}px`);
+        host.style.setProperty("--max", `${max}px`);
+        host.style.setProperty("--offset", `${props.offset}px`);
       }
       if (separator.value) {
         separator.value.setAttribute("aria-valuemin", String(Math.floor(min)));
         separator.value.setAttribute("aria-valuemax", String(Math.floor(max)));
         separator.value.setAttribute("aria-valuenow", String(Math.floor(value)));
       }
+      if (value >= 0) {
+        emit("resize", value);
+      }
     });
     vue.onMounted(() => {
-      if (separator.value) {
-        const {
-          flexBasis
-        } = getComputedStyle(separator.value);
-        separatorSize.value = computeCssValue(flexBasis, 0, 0);
-      }
       layoutSize.value = getLayoutSize();
       state.value = {
         min: minSize.value,
@@ -17255,11 +17927,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [_ctx.overlay && _ctx.offset ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5)) : vue.createCommentVNode("", true), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("div", vue.mergeProps({
         ref_key: "root",
         ref: root,
-        class: vue.normalizeClass(["resize", `resize--${vue.unref(attachment)}`])
-      }, [vue.createElementVNode("div", {
+        class: ["resize", classes.value]
+      }, _ctx.$attrs), [vue.createElementVNode("div", {
         ref_key: "content",
         ref: content,
         class: "resize__content"
@@ -17271,17 +17943,36 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
         class: "resize__handle",
         tabindex: "0",
         "aria-orientation": orientation.value
-      }, null, 8, _hoisted_1$5)) : (vue.openBlock(), vue.createElementBlock("div", {
+      }, null, 8, _hoisted_2$2)) : (vue.openBlock(), vue.createElementBlock("div", {
         key: 1,
         role: "separator",
         class: "resize__handle disabled",
         "aria-orientation": orientation.value
-      }, null, 8, _hoisted_2$2))], 2);
+      }, null, 8, _hoisted_3$1))], 16)], 64);
     };
   }
 });
-const _style_0 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--left {\n  flex-direction: row;\n  width: var(--size);\n}\n.resize--right {\n  flex-direction: row-reverse;\n  width: var(--size);\n}\n.resize--top {\n  flex-direction: column;\n  height: var(--size);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n  height: var(--size);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--left .resize__content, .resize--right .resize__content {\n  min-width: calc(var(--min) - 2px);\n  max-width: calc(var(--max) - 2px);\n}\n.resize--top .resize__content, .resize--bottom .resize__content {\n  min-height: calc(var(--min) - 2px);\n  max-height: calc(var(--max) - 2px);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n  /* disable regular focus indicator as this component has its own */\n  /* when focus by keyboard we dont want the delay or transition */\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}\n.resize--left .resize__handle {\n  left: 2px;\n}\n.resize--right .resize__handle {\n  right: 2px;\n}\n.resize--top .resize__handle {\n  top: 2px;\n}\n.resize--bottom .resize__handle {\n  bottom: 2px;\n}';
+const _style_0 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n:host([hidden]) {\n  display: none;\n}\n:host ::slotted(*) {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--overlay {\n  position: absolute;\n  z-index: 1;\n  background: var(--f-page-layout-background);\n}\n.resize--left {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--left .resize__content {\n  flex-direction: row;\n}\n.resize--left.resize--overlay {\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--right {\n  flex-direction: row-reverse;\n}\n.resize--right:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--right .resize__content {\n  flex-direction: row;\n}\n.resize--right.resize--overlay {\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--top {\n  flex-direction: column;\n}\n.resize--top:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n}\n.resize--bottom:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize__offset {\n  width: calc(var(--offset) + 2px);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--column .resize__content {\n  flex-direction: column;\n}\n.resize--row .resize__content {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) .resize__content, .resize--right:not(.resize--disabled) .resize__content {\n  min-width: var(--min);\n  max-width: var(--max);\n  flex-basis: var(--size);\n}\n.resize--top:not(.resize--disabled) .resize__content, .resize--bottom:not(.resize--disabled) .resize__content {\n  min-height: var(--min);\n  max-height: var(--max);\n  flex-basis: var(--size);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n  /* disable regular focus indicator as this component has its own */\n  /* when focus by keyboard we dont want the delay or transition */\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}';
 const FResizePane = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0]]]);
+const injectionKey = Symbol("FResizePane");
+function useResize(options = {}) {
+  const api = vue.inject(injectionKey, {
+    register() {
+      return () => void 0;
+    },
+    size: vue.ref(0)
+  });
+  const unregister = api.register({
+    enabled: options.enabled,
+    visible: options.visible,
+    overlay: options.overlay,
+    offset: options.offset
+  });
+  vue.onUnmounted(unregister);
+  return {
+    size: api.size
+  };
+}
 const _hoisted_1$4 = {
   slot: "content"
 };
@@ -17289,10 +17980,6 @@ const tagName = "ce-resize-pane";
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "FResizePane",
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     min: {
       default: "0"
     },
@@ -17307,12 +17994,83 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     if (!customElements.get(tagName)) {
       customElements.define(tagName, vue.defineCustomElement(FResizePane));
     }
+    const anyEnabled = vue.ref(true);
+    const anyVisible = vue.ref(true);
+    const anyOverlay = vue.ref(false);
+    const size = vue.ref(-1);
+    const offset2 = vue.ref(0);
+    let components = [];
+    let n = 0;
+    function any(src, predicate) {
+      return src.length === 0 || src.some(predicate);
+    }
+    vue.provide(injectionKey, {
+      register(options) {
+        const component = {
+          ...options,
+          id: n++
+        };
+        components.push(component);
+        const scope = vue.effectScope();
+        scope.run(() => {
+          vue.watchEffect(() => {
+            anyEnabled.value = any(components, (it) => {
+              var _a;
+              var _it$enabled$value;
+              return (_it$enabled$value = (_a = it.enabled) == null ? void 0 : _a.value) !== null && _it$enabled$value !== void 0 ? _it$enabled$value : true;
+            });
+          });
+          vue.watchEffect(() => {
+            anyVisible.value = any(components, (it) => {
+              var _a;
+              var _it$visible$value;
+              return (_it$visible$value = (_a = it.visible) == null ? void 0 : _a.value) !== null && _it$visible$value !== void 0 ? _it$visible$value : true;
+            });
+          });
+          vue.watchEffect(() => {
+            anyOverlay.value = any(components, (it) => {
+              var _a;
+              var _it$overlay$value;
+              return (_it$overlay$value = (_a = it.overlay) == null ? void 0 : _a.value) !== null && _it$overlay$value !== void 0 ? _it$overlay$value : false;
+            });
+          });
+          vue.watchEffect(() => {
+            if (components.length === 0) {
+              return 0;
+            }
+            const offsets = components.map((it) => {
+              var _a;
+              return (_a = it.offset) == null ? void 0 : _a.value;
+            }).filter((it) => typeof it === "number");
+            offset2.value = Math.max(0, ...offsets);
+          });
+        });
+        return () => {
+          components = components.filter((it) => it.id !== component.id);
+          scope.stop();
+        };
+      },
+      size
+    });
+    const disabled = vue.computed(() => anyEnabled.value === false);
+    const hidden = vue.computed(() => anyVisible.value === false);
+    const overlay = vue.computed(() => anyOverlay.value === true);
     const props = __props;
+    function onResize(event) {
+      size.value = event.detail[0];
+    }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName), vue.normalizeProps(vue.guardReactiveProps(props)), {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName), vue.mergeProps({
+        disabled: disabled.value,
+        hidden: hidden.value,
+        overlay: overlay.value,
+        offset: offset2.value
+      }, props, {
+        onResize
+      }), {
         default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_1$4, [vue.renderSlot(_ctx.$slots, "default")])]),
         _: 3
-      }, 16);
+      }, 16, ["disabled", "hidden", "overlay", "offset"]);
     };
   }
 });
@@ -17750,6 +18508,10 @@ const _sfc_main = vue.defineComponent({
   mixins: [TranslationMixin],
   inheritAttrs: true,
   props: {
+    /**
+     * The title of the wizard step.
+     * This will be displayed as the step's header.
+     */
     title: {
       type: String,
       required: true
@@ -18147,7 +18909,7 @@ exports.FSelectField = FSelectField;
 exports.FSortFilterDataset = _sfc_main$s;
 exports.FSortFilterDatasetInjected = FSortFilterDatasetInjected;
 exports.FStaticField = FStaticField;
-exports.FTableColumn = FTableColumn;
+exports.FTableColumn = _sfc_main$J;
 exports.FTableColumnSize = FTableColumnSize;
 exports.FTableColumnSort = FTableColumnSort;
 exports.FTableColumnType = FTableColumnType;
@@ -18228,6 +18990,7 @@ exports.tooltipAttachTo = tooltipAttachTo;
 exports.useAreaData = useAreaData;
 exports.useCombobox = useCombobox;
 exports.useModal = useModal;
+exports.useResize = useResize;
 exports.useSlotUtils = useSlotUtils;
 exports.useTextFieldSetup = useTextFieldSetup;
 exports.useTranslate = useTranslate;