@fkui/vue 6.3.1 → 6.4.0

package/dist/esm/index.esm.js

@@ -1,5 +1,5 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, createApp, resolveComponent, createCommentVNode, withKeys, createVNode, toDisplayString, createBlock, withCtx, Fragment, renderList, withModifiers, isVNode, Comment, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, ref, normalizeProps, guardReactiveProps, unref, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, onUpdated, toRefs, getCurrentScope, onScopeDispose, defineCustomElement } from "vue";
-import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, findTabbableElements, popFocus, pushFocus, scrollTo, documentOrderComparator, ValidationService, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, isEmpty, deepClone, parseNumber, formatNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, parsePersonnummer, formatPersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, focusFirst, removeFocusListener, restoreFocus, saveFocus, addFocusListener, DomUtils } from "@fkui/logic";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, createApp, resolveComponent, createCommentVNode, withKeys, createVNode, toDisplayString, createBlock, withCtx, Fragment, renderList, withModifiers, isVNode, Comment, getCurrentInstance, resolveDynamicComponent, onMounted, toValue, onUnmounted, useSlots, ref, normalizeProps, guardReactiveProps, unref, Transition, Teleport, normalizeStyle, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, onUpdated, toRefs, getCurrentScope, onScopeDispose, defineCustomElement, effectScope } from "vue";
+import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, findTabbableElements, popFocus, pushFocus, scrollTo, documentOrderComparator, ValidationService, availableValidators, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, isEmpty, deepClone, parseNumber, formatNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, parsePersonnummer, formatPersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, focusFirst, removeFocusListener, restoreFocus, saveFocus, addFocusListener, DomUtils } from "@fkui/logic";
 import { groupByWeek, getWeekdayNamings, FDate, DateFormat } from "@fkui/date";
 const statuses = ["default", "warning", "error", "success", "info"];
 const _sfc_main$1e = /* @__PURE__ */ defineComponent({
@@ -1970,17 +1970,17 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _hoisted_1$X = ["aria-hidden"];
-const _hoisted_2$G = ["xlink:href"];
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_2$G = ["href"];
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
     focusable: "false",
     class: ["icon", [_ctx.spriteKey, ..._ctx.modifiers]],
     "aria-hidden": _ctx.ariaHidden
   }), [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("use", {
-    "xlink:href": _ctx.spriteId
+    href: _ctx.spriteId
   }, null, 8, _hoisted_2$G)], 16, _hoisted_1$X);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$R]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$Q]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -4602,7 +4602,7 @@ const _hoisted_1$W = ["id"];
 const _hoisted_2$F = {
   class: "modal__backdrop"
 };
-const _hoisted_3$w = {
+const _hoisted_3$x = {
   class: "modal__inner-container"
 };
 const _hoisted_4$q = {
@@ -4632,7 +4632,7 @@ const _hoisted_10$3 = {
   class: "modal__shelf"
 };
 const _hoisted_11$3 = ["aria-label"];
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return _ctx.isOpen ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -4644,7 +4644,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     role: "dialog",
     "aria-modal": "true",
     onKeyup: _cache[3] || (_cache[3] = withKeys((...args) => _ctx.onClose && _ctx.onClose(...args), ["esc"]))
-  }, [createElementVNode("div", _hoisted_3$w, [createElementVNode("div", {
+  }, [createElementVNode("div", _hoisted_3$x, [createElementVNode("div", {
     ref: "modalDialogContainer",
     class: normalizeClass(["modal__dialog-container", _ctx.containerClasses])
   }, [createElementVNode("div", _hoisted_4$q, [createElementVNode("div", _hoisted_5$l, [createElementVNode("div", _hoisted_6$g, [createElementVNode("div", {
@@ -4662,7 +4662,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
   }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$W)) : createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$Q]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$P]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -4799,11 +4799,11 @@ const _hoisted_1$V = {
   class: "button-group"
 };
 const _hoisted_2$E = ["onClick"];
-const _hoisted_3$v = {
+const _hoisted_3$w = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_modal = resolveComponent("f-modal");
   return openBlock(), createBlock(_component_f_modal, {
     fullscreen: _ctx.fullscreen,
@@ -4822,12 +4822,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: normalizeClass([button.classlist, "button-group__item"]),
         onClick: ($event) => _ctx.onClick(button)
-      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[0] || (_cache[0] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$v, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$E);
+      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[0] || (_cache[0] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$w, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$E);
     }), 128))])]),
     _: 3
   }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
-const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$P]]);
+const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$O]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
 const ALIGNMENT = ["top", "center", "bottom"];
 const FLOAT = ["left", "center", "right"];
@@ -4906,12 +4906,12 @@ const _sfc_main$1a = defineComponent({
     }
   }
 });
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["iflex", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$O]]);
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$N]]);
 const _sfc_main$19 = defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
@@ -4959,12 +4959,12 @@ const _sfc_main$19 = defineComponent({
     }
   }
 });
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["iflex__item", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$N]]);
+const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$M]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -5036,14 +5036,14 @@ const _hoisted_1$U = {
 const _hoisted_2$D = {
   key: 0
 };
-const _hoisted_3$u = {
+const _hoisted_3$v = {
   class: "error-list__list error-list--list-style-none"
 };
 const _hoisted_4$p = ["onClick"];
 const _hoisted_5$k = {
   class: "error-list__link"
 };
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_i_flex_item = resolveComponent("i-flex-item");
   const _component_i_flex = resolveComponent("i-flex");
@@ -5066,7 +5066,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), createVNode(_component_i_flex_item, {
       grow: ""
     }, {
-      default: withCtx(() => [_ctx.hasTitleSlot ? (openBlock(), createElementBlock("div", _hoisted_2$D, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("ul", _hoisted_3$u, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+      default: withCtx(() => [_ctx.hasTitleSlot ? (openBlock(), createElementBlock("div", _hoisted_2$D, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("ul", _hoisted_3$v, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
         return openBlock(), createElementBlock("li", {
           key: item.id,
           class: normalizeClass(_ctx.liClasses(item))
@@ -5097,7 +5097,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })]);
 }
-const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$M]]);
+const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$L]]);
 var es_iterator_every = {};
 var hasRequiredEs_iterator_every;
 function requireEs_iterator_every() {
@@ -5255,13 +5255,13 @@ const _sfc_main$17 = defineComponent({
     }
   }
 });
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     onComponentValidity: _cache[0] || (_cache[0] = (...args) => _ctx.onComponentValidity && _ctx.onComponentValidity(...args)),
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$L]]);
+const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$K]]);
 var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
   FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
   FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
@@ -5413,7 +5413,7 @@ const _hoisted_2$C = {
   tabindex: "-1",
   role: "group"
 };
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_error_list = resolveComponent("f-error-list");
   const _component_f_validation_group = resolveComponent("f-validation-group");
   return openBlock(), createBlock(_component_f_validation_group, {
@@ -5439,7 +5439,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$K]]);
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$J]]);
 const _sfc_main$15 = defineComponent({
   name: "FFormModal",
   components: {
@@ -5538,6 +5538,14 @@ const _sfc_main$15 = defineComponent({
       default() {
       }
     },
+    /**
+     * List of buttons to display in the modal.
+     * Each button is defined as an FModalButtonDescriptor with the following properties:
+     * - `label` (String): The text displayed on the button.
+     * - `event` (String): The event emitted when the button is clicked.
+     * - `type` (String): The button type. Valid values are: "primary" or "secondary".
+     * - `submitButton` (Boolean): Whether the button is a submit button.
+     */
     buttons: {
       type: Array,
       required: false,
@@ -5593,11 +5601,11 @@ const _hoisted_1$S = {
   class: "button-group"
 };
 const _hoisted_2$B = ["type", "form", "onClick"];
-const _hoisted_3$t = {
+const _hoisted_3$u = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_validation_form = resolveComponent("f-validation-form");
   const _component_f_modal = resolveComponent("f-modal");
   return openBlock(), createBlock(_component_f_modal, {
@@ -5628,12 +5636,12 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass([button.classlist, "button-group__item"]),
         form: button.buttonType === "submit" ? _ctx.formId : void 0,
         onClick: ($event) => button.buttonType === "button" ? _ctx.onCancel() : false
-      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[2] || (_cache[2] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$t, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$B);
+      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[2] || (_cache[2] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$u, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$B);
     }), 128))])]),
     _: 3
   }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
 }
-const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$J]]);
+const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$I]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -5950,6 +5958,9 @@ const ValidationPrefixDirective = {
 };
 const ValidationPlugin = {
   install(app) {
+    for (const validator of availableValidators) {
+      ValidationService.registerValidator(validator);
+    }
     app.directive("validation", ValidationDirective);
     app.directive("validationPrefix", ValidationPrefixDirective);
   }
@@ -6006,12 +6017,12 @@ const _sfc_main$14 = defineComponent({
 const _hoisted_1$R = {
   "data-test": "f-error-page"
 };
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$R, _cache[0] || (_cache[0] = [createElementVNode("h1", null, "Fel", -1), createTextVNode(), createElementVNode("p", null, "Ett fel har uppstått.", -1), createTextVNode(), createElementVNode("a", {
     href: "/"
   }, "Gå till startsidan", -1)]));
 }
-const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$I]]);
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$H]]);
 const _sfc_main$13 = defineComponent({
   name: "FErrorHandlingApp",
   props: {
@@ -6041,7 +6052,7 @@ const _sfc_main$13 = defineComponent({
     });
   }
 });
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", null, [_ctx.hasError ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.errorComponent), {
     key: 0,
     payload: _ctx.payload
@@ -6051,7 +6062,7 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   })]);
 }
-const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$H]]);
+const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$G]]);
 function isMonthBefore(date, minDate) {
   return Boolean(minDate && date.isBefore(minDate.startOfMonth()));
 }
@@ -6212,7 +6223,7 @@ const _hoisted_2$A = {
   class: "calendar-navbar__month",
   tabindex: "-1"
 };
-const _hoisted_3$s = ["aria-disabled", "aria-live"];
+const _hoisted_3$t = ["aria-disabled", "aria-live"];
 const _hoisted_4$o = {
   class: "sr-only"
 };
@@ -6220,7 +6231,7 @@ const _hoisted_5$j = ["aria-disabled", "aria-live"];
 const _hoisted_6$f = {
   class: "sr-only"
 };
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$Q, [createElementVNode("div", _hoisted_2$A, toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("button", {
     ref: "previousButton",
@@ -6232,7 +6243,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createElementVNode("span", _hoisted_4$o, toDisplayString(_ctx.previousSrText), 1), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_f_icon, {
     class: normalizeClass(_ctx.previousIconClasses),
     name: "arrow-right"
-  }, null, 8, ["class"])], 8, _hoisted_3$s), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("button", {
+  }, null, 8, ["class"])], 8, _hoisted_3$t), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("button", {
     ref: "nextButton",
     class: "calendar-navbar__arrow calendar-navbar__arrow--next",
     type: "button",
@@ -6244,7 +6255,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-right"
   }, null, 8, ["class"])], 8, _hoisted_5$j)]);
 }
-const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$G]]);
+const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$F]]);
 function getDayStartOffset(days) {
   return days[0].weekDay - 1;
 }
@@ -6330,7 +6341,7 @@ const _hoisted_2$z = {
   key: 0,
   class: "calendar-month__col--week"
 };
-const _hoisted_3$r = {
+const _hoisted_3$s = {
   key: 0,
   scope: "col",
   "aria-hidden": "true",
@@ -6357,7 +6368,7 @@ const _hoisted_11$2 = {
   "aria-hidden": "true"
 };
 const _hoisted_12$2 = ["colspan"];
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("table", {
     class: "calendar-month__table",
     role: "grid",
@@ -6378,7 +6389,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[14] || (_cache[14] = createTextVNode()), _cache[15] || (_cache[15] = createElementVNode("col", {
     class: "calendar-month__col--day"
-  }, null, -1))]), _cache[22] || (_cache[22] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_3$r)) : createCommentVNode("", true), _cache[16] || (_cache[16] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weekdays, (weekday) => {
+  }, null, -1))]), _cache[22] || (_cache[22] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_3$s)) : createCommentVNode("", true), _cache[16] || (_cache[16] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.weekdays, (weekday) => {
     return openBlock(), createElementBlock("th", {
       key: weekday.name,
       scope: "col",
@@ -6420,7 +6431,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": "true"
   }, null, 8, _hoisted_12$2)])) : createCommentVNode("", true)])], 40, _hoisted_1$P);
 }
-const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$F]]);
+const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$E]]);
 const DayStep = {
   ArrowRight: 1,
   ArrowLeft: -1,
@@ -6535,7 +6546,7 @@ const _sfc_main$10 = defineComponent({
   }
 });
 const _hoisted_1$O = ["data-date", "tabindex", "onClick", "onKeydown"];
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_month_grid = resolveComponent("i-calendar-month-grid");
   return openBlock(), createBlock(_component_i_calendar_month_grid, {
     value: _ctx.modelValue
@@ -6558,7 +6569,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$E]]);
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$D]]);
 const _sfc_main$$ = defineComponent({
   name: "FCalendar",
   components: {
@@ -6613,7 +6624,7 @@ const _sfc_main$$ = defineComponent({
 const _hoisted_1$N = {
   class: "calendar__wrapper"
 };
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_navbar = resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = resolveComponent("i-calendar-month");
   return openBlock(), createElementBlock("div", _hoisted_1$N, [createVNode(_component_i_calendar_navbar, {
@@ -6639,7 +6650,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["model-value", "min-date", "max-date", "tab-date", "onClick", "onUpdate:modelValue"])]);
 }
-const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$D]]);
+const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$C]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -6729,12 +6740,12 @@ const _hoisted_1$M = {
 const _hoisted_2$y = {
   class: "sr-only"
 };
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", {
     class: normalizeClass(_ctx.dayClasses)
   }, [createElementVNode("span", _hoisted_1$M, toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$y, toDisplayString(_ctx.srText), 1)], 2);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$C]]);
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$B]]);
 function useEventListener$1(target, event, callback) {
   onMounted(() => {
     var _a;
@@ -6760,7 +6771,7 @@ const _hoisted_2$x = {
   key: 0,
   class: "card__header"
 };
-const _hoisted_3$q = {
+const _hoisted_3$r = {
   class: "card__content"
 };
 const _hoisted_4$m = {
@@ -6805,6 +6816,9 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       if (!isMounted.value) {
         return;
       }
+      if (detail.elementId !== props.id) {
+        return;
+      }
       if (!props.focusRef) {
         throw new Error("Element to focus on when card is invalid (`focusRef`) is required when using card validation.");
       }
@@ -6850,7 +6864,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           _: 1
         })]),
         _: 1
-      })) : createCommentVNode("", true)]), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$q, [renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = createTextVNode()), hasFooterSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4$m, [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
+      })) : createCommentVNode("", true)]), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$r, [renderSlot(_ctx.$slots, "default")]), _cache[3] || (_cache[3] = createTextVNode()), hasFooterSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4$m, [renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({
         hasError: hasError.value,
         validationMessage: validationMessage.value
       })))])) : createCommentVNode("", true)], 42, _hoisted_1$L);
@@ -6911,7 +6925,7 @@ const _sfc_main$Y = defineComponent({
     }
   }
 });
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, {
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -6923,7 +6937,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
-const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$B]]);
+const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$A]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -7489,7 +7503,7 @@ const _sfc_main$X = defineComponent({
     }
   }
 });
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.isOpen ? (openBlock(), createBlock(Teleport, {
     key: 0,
     to: _ctx.teleportTarget,
@@ -7510,7 +7524,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : createCommentVNode("", true);
 }
-const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$A]]);
+const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$z]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -7716,7 +7730,7 @@ const _hoisted_1$K = {
   ref: "wrapper",
   class: "popup-error__wrapper"
 };
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return _ctx.isOpen ? (openBlock(), createBlock(Teleport, {
     key: 0,
@@ -7740,7 +7754,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     class: "button__icon"
   })])], 6)], 512)], 2)], 8, ["to", "disabled"])) : createCommentVNode("", true);
 }
-const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$z]]);
+const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$y]]);
 function numItems(itemHeight, availableHeight, verticalSpacing) {
   const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
   return Math.min(itemsFit, 7);
@@ -8270,13 +8284,13 @@ const _hoisted_2$v = {
   role: "menu",
   class: "ipopupmenu__list"
 };
-const _hoisted_3$p = ["onClick"];
+const _hoisted_3$q = ["onClick"];
 const _hoisted_4$l = ["data-ref-index", "href", "target"];
 const _hoisted_5$h = {
   key: 0,
   class: "sr-only"
 };
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_popup = resolveComponent("i-popup");
   return openBlock(), createBlock(_component_i_popup, {
     class: "ipopupmenu",
@@ -8307,12 +8321,12 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
         role: "menuitem",
         target: item.target,
         tabindex: "0"
-      }, [_ctx.isSelected(index) ? (openBlock(), createElementBlock("span", _hoisted_5$h, [createElementVNode("span", null, toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
+      }, [_ctx.isSelected(index) ? (openBlock(), createElementBlock("span", _hoisted_5$h, [createElementVNode("span", null, toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$q);
     }), 128))])], 8, _hoisted_1$I)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
 }
-const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$y]]);
+const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$x]]);
 const ANIMATION_DURATION = 500;
 const NO_CSS_CLASSES = "";
 const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
@@ -8515,13 +8529,13 @@ const _hoisted_1$H = {
   ref: "content",
   "data-test": "animation-content"
 };
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.animationClasses),
     style: normalizeStyle(_ctx.heightStyle)
   }, [_ctx.shouldVIf ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$H, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.shouldVShow]]) : createCommentVNode("", true)], 6);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$x]]);
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$w]]);
 const _sfc_main$S = defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
@@ -8537,13 +8551,13 @@ const _sfc_main$S = defineComponent({
   }
 });
 const _hoisted_1$G = ["href"];
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
   }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$G);
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$w]]);
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$v]]);
 function filterOptions(options, filter2, selectMode) {
   if (isEmpty(filter2) || selectMode) {
     return options;
@@ -8793,7 +8807,7 @@ const _hoisted_1$F = {
   class: "combobox"
 };
 const _hoisted_2$u = ["id"];
-const _hoisted_3$o = ["id", "aria-selected", "onClick"];
+const _hoisted_3$p = ["id", "aria-selected", "onClick"];
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "IComboboxDropdown",
   props: {
@@ -8855,7 +8869,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
               "combobox__listbox__option--highlight": isOptionActive(item)
             }]),
             onClick: withModifiers(($event) => onOptionClick(item), ["stop", "prevent"])
-          }, toDisplayString(item), 11, _hoisted_3$o);
+          }, toDisplayString(item), 11, _hoisted_3$p);
         }), 128))], 8, _hoisted_2$u)]),
         _: 1
       }, 8, ["is-open", "anchor", "num-of-items", "active-element"])]);
@@ -9147,7 +9161,7 @@ const _hoisted_1$D = ["aria-expanded"];
 const _hoisted_2$t = {
   class: "icon-stack icon-stack--tooltip"
 };
-const _hoisted_3$n = {
+const _hoisted_3$o = {
   class: "sr-only"
 };
 const _hoisted_4$k = {
@@ -9161,7 +9175,7 @@ const _hoisted_5$g = {
 const _hoisted_6$d = {
   class: "tooltip__footer"
 };
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock(Fragment, null, [(openBlock(), createBlock(Teleport, {
     disabled: _ctx.iconTarget === null,
@@ -9176,7 +9190,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "circle"
   }), _cache[2] || (_cache[2] = createTextVNode()), createVNode(_component_f_icon, {
     name: "i"
-  }), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("span", _hoisted_3$n, toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("div", mergeProps({
+  }), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("span", _hoisted_3$o, toDisplayString(_ctx.screenReaderText), 1)])], 8, _hoisted_1$D)], 8, ["disabled", "to"])), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("div", mergeProps({
     ref: "wrapper",
     class: "tooltip"
   }, _ctx.$attrs), [_ctx.ready ? (openBlock(), createElementBlock("div", _hoisted_4$k, [_ctx.hasHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.headerTag), {
@@ -9194,7 +9208,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "close"
   })])])])) : createCommentVNode("", true)], 16)], 64);
 }
-const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$v]]);
+const FTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["render", _sfc_render$u]]);
 function* labelClasses(options) {
   const {
     labelClass
@@ -9468,7 +9482,7 @@ const _hoisted_2$s = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_3$m = {
+const _hoisted_3$n = {
   key: 0,
   class: "label__message label__message--error"
 };
@@ -9495,7 +9509,7 @@ const _hoisted_9$4 = {
   key: 0,
   class: "label__message label__message--error"
 };
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("fieldset", {
     id: _ctx.id,
@@ -9510,7 +9524,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   }), _cache[3] || (_cache[3] = createTextVNode()), renderSlot(_ctx.$slots, "error-message", normalizeProps(guardReactiveProps({
     hasError: _ctx.hasError,
     validationMessage: _ctx.validity.validationMessage
-  })), () => [_ctx.hasError ? (openBlock(), createElementBlock("span", _hoisted_3$m, [createVNode(_component_f_icon, {
+  })), () => [_ctx.hasError ? (openBlock(), createElementBlock("span", _hoisted_3$n, [createVNode(_component_f_icon, {
     class: "label__icon--left",
     name: "error"
   }), createTextVNode(" " + toDisplayString(_ctx.validity.validationMessage), 1)])) : createCommentVNode("", true)])], 2)), _cache[7] || (_cache[7] = createTextVNode()), _ctx.hasCheckbox ? (openBlock(), createElementBlock("span", _hoisted_4$j, [_ctx.children.length === 1 ? (openBlock(), createElementBlock("span", _hoisted_5$f, toDisplayString(_ctx.checkboxCheckedScreenReaderText), 1)) : (openBlock(), createElementBlock("span", _hoisted_6$c, toDisplayString(_ctx.numberOfCheckedCheckboxesScreenText), 1))])) : createCommentVNode("", true), _cache[8] || (_cache[8] = createTextVNode()), _ctx.hasTooltipSlot ? (openBlock(), createElementBlock(Fragment, {
@@ -9532,7 +9546,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.groupContentClass)
   }, [renderSlot(_ctx.$slots, "default")], 2)], 42, _hoisted_1$C);
 }
-const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$u]]);
+const FFieldset = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$t]]);
 const anyType$1 = [String, Object, Array, Number, Date, Boolean];
 const _sfc_main$N = defineComponent({
   name: "FCheckboxField",
@@ -9722,7 +9736,7 @@ const _sfc_main$N = defineComponent({
 });
 const _hoisted_1$B = ["id", "disabled"];
 const _hoisted_2$r = ["for"];
-const _hoisted_3$l = {
+const _hoisted_3$m = {
   key: 0,
   class: "checkbox__details"
 };
@@ -9730,7 +9744,7 @@ const _hoisted_4$i = {
   key: 0,
   class: "checkbox__details"
 };
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["checkbox", _ctx.disabledClass]),
     onValidity: _cache[2] || (_cache[2] = (...args) => _ctx.onValidity && _ctx.onValidity(...args))
@@ -9748,7 +9762,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [renderSlot(_ctx.$slots, "default"), _cache[8] || (_cache[8] = createTextVNode()), _ctx.$slots.details ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$l, [_cache[3] || (_cache[3] = createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
+  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$m, [_cache[3] || (_cache[3] = createElementVNode("br", null, null, -1)), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -9760,7 +9774,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)], 10, _hoisted_2$r)], 34);
 }
-const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$t]]);
+const FCheckboxField = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$s]]);
 var es_iterator_some = {};
 var hasRequiredEs_iterator_some;
 function requireEs_iterator_some() {
@@ -10010,13 +10024,13 @@ const _hoisted_2$q = {
   tabindex: "-1",
   class: "contextmenu__list"
 };
-const _hoisted_3$k = ["onClick"];
+const _hoisted_3$l = ["onClick"];
 const _hoisted_4$h = ["tabindex"];
 const _hoisted_5$e = {
   key: 0,
   class: "contextmenu__separator"
 };
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   const _component_i_popup = resolveComponent("i-popup");
   return openBlock(), createBlock(_component_i_popup, {
@@ -10051,12 +10065,12 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["name", "library"])) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), createElementVNode("a", {
         ref_for: true,
         ref: "anchors"
-      }, toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (openBlock(), createElementBlock("hr", _hoisted_5$e)) : createCommentVNode("", true)], 8, _hoisted_3$k);
+      }, toDisplayString(item.label), 513)], 8, _hoisted_4$h), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (openBlock(), createElementBlock("hr", _hoisted_5$e)) : createCommentVNode("", true)], 8, _hoisted_3$l);
     }), 128))], 512)], 40, _hoisted_1$A)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element"]);
 }
-const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$s]]);
+const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$r]]);
 var Operation = /* @__PURE__ */ ((Operation2) => {
   Operation2[Operation2["ADD"] = 0] = "ADD";
   Operation2[Operation2["DELETE"] = 1] = "DELETE";
@@ -10300,7 +10314,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       isFormModalOpen.value = true;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$z, [renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), hasAddSlot.value ? (openBlock(), createElementBlock("div", _hoisted_2$p, [createElementVNode("button", {
+      return openBlock(), createElementBlock("div", _hoisted_1$z, [renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = createTextVNode()), hasAddSlot.value ? (openBlock(), createElementBlock("div", _hoisted_2$p, [createElementVNode("button", {
         "data-test": "f-crud-dataset-add-button",
         type: "button",
         class: "button button--tertiary crud-dataset__add-button",
@@ -10308,7 +10322,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       }, [createVNode(unref(FIcon), {
         class: "button__icon",
         name: "plus"
-      }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "add-button", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])])])) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), createVNode(unref(FFormModal), {
+      }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "add-button", {}, () => [createTextVNode(toDisplayString(unref($t2)("fkui.crud-dataset.button.add", "Lägg till ny")), 1)])]), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "buttons", normalizeProps(guardReactiveProps({
+        buttonClasses: ["button", "button--tertiary", "crud-dataset__add-button"]
+      })))])) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), createVNode(unref(FFormModal), {
         "is-open": isFormModalOpen.value,
         "aria-close-text": unref($t2)("fkui.crud-dataset.modal.close", "Stäng"),
         buttons: formModalButtons.value,
@@ -10325,13 +10341,13 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           key: 0
         }, {
           item: item.value
-        }))) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), operation.value === unref(Operation).MODIFY ? renderSlot(_ctx.$slots, "modify", normalizeProps(mergeProps({
+        }))) : createCommentVNode("", true), _cache[3] || (_cache[3] = createTextVNode()), operation.value === unref(Operation).MODIFY ? renderSlot(_ctx.$slots, "modify", normalizeProps(mergeProps({
           key: 1
         }, {
           item: item.value
         }))) : createCommentVNode("", true)]),
         _: 3
-      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[7] || (_cache[7] = createTextVNode()), createVNode(unref(FConfirmModal), {
+      }, 8, ["is-open", "aria-close-text", "buttons", "before-submit", "before-validation", "on-cancel", "onCancel"]), _cache[8] || (_cache[8] = createTextVNode()), createVNode(unref(FConfirmModal), {
         "is-open": isConfirmModalOpen.value,
         buttons: confirmDeleteButtons.value,
         onConfirm: onDeleteConfirm,
@@ -10359,6 +10375,10 @@ const _sfc_main$K = defineComponent({
   },
   mixins: [TranslationMixin],
   props: {
+    /**
+     * The action to be performed by the button.
+     * Must be one of the following values: "delete" or "modify".
+     */
     action: {
       type: String,
       required: true,
@@ -10366,14 +10386,24 @@ const _sfc_main$K = defineComponent({
         return ["delete", "modify"].includes(value);
       }
     },
+    /**
+     * Determines if an icon should be displayed on the button.
+     */
     icon: {
       type: Boolean,
       default: false
     },
+    /**
+     * The item that the action will be performed on.
+     */
     item: {
       type: Object,
       required: true
     },
+    /**
+     * Determines if the button should display a label.
+     * If false, the button will use a visually hidden text for accessibility.
+     */
     label: {
       type: Boolean,
       default: false
@@ -10412,7 +10442,7 @@ const _hoisted_1$y = {
   key: 1,
   class: "sr-only"
 };
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("button", {
     type: "button",
@@ -10426,7 +10456,7 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   }, () => [createTextVNode(toDisplayString(_ctx.buttonText), 1)]) : createCommentVNode("", true)]);
 }
-const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$r]]);
+const FCrudButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$q]]);
 function ActivateItemInjected() {
   return {
     registerCallbackAfterItemAdd: inject("registerCallbackAfterItemAdd", () => void 0),
@@ -11075,9 +11105,11 @@ function FTableInjected() {
     renderColumns: inject("renderColumns", false)
   };
 }
-const _sfc_main$J = defineComponent({
-  name: "FTableColumn",
-  inheritAttrs: false,
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "FTableColumn",
   props: {
     /**
      * Unique (per-table) identifier.
@@ -11164,71 +11196,58 @@ const _sfc_main$J = defineComponent({
       }
     }
   },
-  setup() {
+  setup(__props) {
     const {
       renderColumns,
       setVisibilityColumn: setVisibilityColumn2,
       addColumn: addColumn2
     } = FTableInjected();
-    return {
-      renderColumns,
-      setVisibilityColumn: setVisibilityColumn2,
-      addColumn: addColumn2
-    };
-  },
-  computed: {
-    classes() {
-      return ["table__column", `table__column--${this.type}`];
-    },
-    scope() {
-      return this.rowHeader ? "row" : null;
-    },
-    tagName() {
-      if (this.rowHeader) {
+    const props = __props;
+    const classes = computed(() => {
+      return ["table__column", `table__column--${props.type}`];
+    });
+    const scope = computed(() => {
+      return props.rowHeader ? "row" : null;
+    });
+    const tagName2 = computed(() => {
+      if (props.rowHeader) {
         return "th";
       } else {
         return "td";
       }
-    }
-  },
-  watch: {
-    visible: {
-      handler: function() {
-        this.setVisibilityColumn(this.name, this.visible);
-      }
-    }
-  },
-  created() {
-    if (this.shrink && this.expand) {
-      throw new Error("Table cannot have both shrink and expand enabled at the same time");
-    }
-    const size = this.shrink ? FTableColumnSize.SHRINK : FTableColumnSize.EXPAND;
-    this.addColumn({
-      name: this.name,
-      title: this.title,
-      description: this.description || void 0,
-      id: ElementIdService.generateElementId("column"),
-      size,
-      type: this.type,
-      visible: this.visible,
-      sortable: false,
-      sort: FTableColumnSort.UNSORTED
     });
+    watch(() => props.visible, () => setVisibilityColumn2(props.name, props.visible));
+    onMounted(() => {
+      if (props.shrink && props.expand) {
+        throw new Error("Table cannot have both shrink and expand enabled at the same time");
+      }
+      const size = props.shrink ? FTableColumnSize.SHRINK : FTableColumnSize.EXPAND;
+      addColumn2({
+        name: props.name,
+        title: props.title,
+        description: props.description || void 0,
+        id: ElementIdService.generateElementId("column"),
+        size,
+        type: props.type,
+        visible: props.visible,
+        sortable: false,
+        sort: FTableColumnSort.UNSORTED
+      });
+    });
+    return (_ctx, _cache) => {
+      return unref(renderColumns) && __props.visible ? (openBlock(), createBlock(resolveDynamicComponent(tagName2.value), mergeProps({
+        key: 0,
+        class: classes.value,
+        scope: scope.value
+      }, _ctx.$attrs), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), _cache[1] || (_cache[1] = createElementVNode("span", {
+          class: "sr-only"
+        }, " ", -1))]),
+        _: 3
+      }, 16, ["class", "scope"])) : createCommentVNode("", true);
+    };
   }
 });
-function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.renderColumns && _ctx.visible ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), mergeProps({
-    key: 0,
-    class: _ctx.classes,
-    scope: _ctx.scope
-  }, _ctx.$attrs), {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), _cache[1] || (_cache[1] = createElementVNode("span", {
-      class: "sr-only"
-    }, " ", -1))]),
-    _: 3
-  }, 16, ["class", "scope"])) : createCommentVNode("", true);
-}
-const FTableColumn = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$q]]);
 function FSortFilterDatasetInjected() {
   return {
     sort: inject("sort", () => void 0),
@@ -11282,7 +11301,7 @@ const _hoisted_2$o = {
   key: 0,
   ref: "tooltipAttachTo"
 };
-const _hoisted_3$j = ["for"];
+const _hoisted_3$k = ["for"];
 const _hoisted_4$g = ["for"];
 const _hoisted_5$d = {
   key: 0,
@@ -11298,7 +11317,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.$slots.tooltip ? (openBlock(), createElementBlock("div", _hoisted_1$x, [_ctx.hasDefaultSlot ? (openBlock(), createElementBlock("div", _hoisted_2$o, [createElementVNode("label", {
     class: "label",
     for: _ctx.forProperty
-  }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$j)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (openBlock(), createElementBlock("label", {
+  }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_3$k)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "tooltip"), _cache[3] || (_cache[3] = createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot ? (openBlock(), createElementBlock("label", {
     key: 1,
     class: "label sr-separator",
     for: _ctx.forProperty
@@ -11893,7 +11912,7 @@ const _hoisted_2$n = {
   key: 0,
   class: "sr-only"
 };
-const _hoisted_3$i = {
+const _hoisted_3$j = {
   key: 0,
   class: "sr-only"
 };
@@ -11936,7 +11955,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, [_ctx.descriptionScreenReaderText ? (openBlock(), createElementBlock("span", _hoisted_2$n, toDisplayString(_ctx.descriptionScreenReaderText), 1)) : createCommentVNode("", true), _cache[7] || (_cache[7] = createTextVNode()), createElementVNode("span", null, toDisplayString(_ctx.descriptionText), 1)], 2)) : createCommentVNode("", true), _cache[9] || (_cache[9] = createTextVNode()), _ctx.discreteDescriptionText ? (openBlock(), createElementBlock("span", {
       key: 1,
       class: normalizeClass(formatDescriptionClass)
-    }, [_ctx.discreteDescriptionScreenReaderText ? (openBlock(), createElementBlock("span", _hoisted_3$i, toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : createCommentVNode("", true), _cache[8] || (_cache[8] = createTextVNode()), createElementVNode("span", null, toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : createCommentVNode("", true)])]),
+    }, [_ctx.discreteDescriptionScreenReaderText ? (openBlock(), createElementBlock("span", _hoisted_3$j, toDisplayString(_ctx.discreteDescriptionScreenReaderText), 1)) : createCommentVNode("", true), _cache[8] || (_cache[8] = createTextVNode()), createElementVNode("span", null, toDisplayString(_ctx.discreteDescriptionText), 1)], 2)) : createCommentVNode("", true)])]),
     "error-message": withCtx(() => [renderSlot(_ctx.$slots, "error-message", normalizeProps(guardReactiveProps({
       hasError: _ctx.hasError,
       validationMessage: _ctx.validationMessage
@@ -12823,7 +12842,7 @@ const _hoisted_1$s = {
 const _hoisted_2$m = {
   class: "sort-filter-dataset__search"
 };
-const _hoisted_3$h = {
+const _hoisted_3$i = {
   class: "sr-only"
 };
 const _hoisted_4$e = ["title"];
@@ -13060,7 +13079,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                 maxlength: "64",
                 onInput: onSearchInput
               }, {
-                default: withCtx(() => [createElementVNode("span", _hoisted_3$h, toDisplayString(__props.placeholderFilter), 1)]),
+                default: withCtx(() => [createElementVNode("span", _hoisted_3$i, toDisplayString(__props.placeholderFilter), 1)]),
                 _: 1
               }, 8, ["modelValue", "placeholder"]), _cache[4] || (_cache[4] = createTextVNode()), showClearButton.value ? (openBlock(), createElementBlock("button", {
                 key: 0,
@@ -13110,7 +13129,7 @@ const _hoisted_1$r = ["tabindex"];
 const _hoisted_2$l = {
   key: 0
 };
-const _hoisted_3$g = {
+const _hoisted_3$h = {
   class: "table__row"
 };
 const _hoisted_4$d = ["innerHTML"];
@@ -13283,7 +13302,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           key: column.id,
           class: normalizeClass(column.size)
         }, null, 2);
-      }), 128))]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_3$g, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column) => {
+      }), 128))]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("thead", null, [createElementVNode("tr", _hoisted_3$h, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column) => {
         return openBlock(), createElementBlock("th", mergeProps({
           key: column.id,
           scope: "col",
@@ -13653,7 +13672,7 @@ const _hoisted_1$q = {
   class: "datepicker-field"
 };
 const _hoisted_2$k = ["disabled", "aria-expanded"];
-const _hoisted_3$f = {
+const _hoisted_3$g = {
   class: "sr-only"
 };
 const _hoisted_4$c = {
@@ -13704,7 +13723,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onClickCalendarButton())
     }, [createVNode(_component_f_icon, {
       name: "calendar"
-    }), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("span", _hoisted_3$f, toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
+    }), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("span", _hoisted_3$g, toDisplayString(_ctx.calendarButtonText), 1)], 8, _hoisted_2$k)]),
     default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.datepicker-field.label", "Datum")), 1)]), _cache[7] || (_cache[7] = createTextVNode()), _cache[8] || (_cache[8] = createTextVNode()), _cache[9] || (_cache[9] = createTextVNode()), _cache[10] || (_cache[10] = createTextVNode())]),
     _: 2
   }, [_ctx.$slots.tooltip ? {
@@ -13844,7 +13863,7 @@ const _hoisted_2$j = {
   key: 0,
   class: "dialogue-tree__list"
 };
-const _hoisted_3$e = ["onClick"];
+const _hoisted_3$f = ["onClick"];
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$p, [_ctx.options.length > 0 ? (openBlock(), createElementBlock("ul", _hoisted_2$j, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
@@ -13858,7 +13877,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: ($event) => _ctx.onClickedOption(option, index)
     }, [createElementVNode("span", null, toDisplayString(option.label), 1), _cache[0] || (_cache[0] = createTextVNode()), createVNode(_component_f_icon, {
       name: "arrow-right"
-    })], 8, _hoisted_3$e)]);
+    })], 8, _hoisted_3$f)]);
   }), 128))])) : renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({
     key: 1
   }, {
@@ -13913,6 +13932,10 @@ const _sfc_main$o = defineComponent({
       required: false,
       default: 0
     },
+    /**
+     * Text template for the screen reader notification text.
+     * Use `%VALUE%` as a placeholder for the number of notifications.
+     */
     screenReaderNotificationTemplate: {
       type: String,
       required: false,
@@ -13944,7 +13967,7 @@ const _hoisted_1$o = ["aria-expanded", "aria-controls"];
 const _hoisted_2$i = {
   class: "expandable-panel__icon"
 };
-const _hoisted_3$d = {
+const _hoisted_3$e = {
   class: "icon-stack"
 };
 const _hoisted_4$b = ["title"];
@@ -13973,7 +13996,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickHeadingButton && _ctx.onClickHeadingButton(...args))
-    }), [createElementVNode("span", _hoisted_2$i, [createElementVNode("span", _hoisted_3$d, [createVNode(_component_f_icon, {
+    }), [createElementVNode("span", _hoisted_2$i, [createElementVNode("span", _hoisted_3$e, [createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = createTextVNode()), createVNode(_component_f_icon, {
       name: "dash"
@@ -14083,7 +14106,7 @@ const _hoisted_1$n = ["aria-expanded", "aria-controls"];
 const _hoisted_2$h = {
   class: "expandable-paragraph__icon"
 };
-const _hoisted_3$c = {
+const _hoisted_3$d = {
   class: "icon-stack"
 };
 const _hoisted_4$a = {
@@ -14115,7 +14138,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-controls": _ctx.id
     }, _ctx.$attrs, {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickMinimize && _ctx.onClickMinimize(...args))
-    }), [createElementVNode("span", _hoisted_2$h, [createElementVNode("span", _hoisted_3$c, [createVNode(_component_f_icon, {
+    }), [createElementVNode("span", _hoisted_2$h, [createElementVNode("span", _hoisted_3$d, [createVNode(_component_f_icon, {
       name: "dash"
     }), _cache[1] || (_cache[1] = createTextVNode()), createVNode(_component_f_icon, {
       name: "dash"
@@ -14223,7 +14246,7 @@ const _hoisted_1$m = {
 const _hoisted_2$g = {
   class: "file-item__row"
 };
-const _hoisted_3$b = ["id"];
+const _hoisted_3$c = ["id"];
 const _hoisted_4$9 = {
   class: "icon-stack button__icon icon-stack--new-window"
 };
@@ -14246,7 +14269,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     name: "new-window"
   }), _cache[0] || (_cache[0] = createTextVNode()), createVNode(_component_f_icon, {
     name: _ctx.iconName
-  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("span", _hoisted_5$7, toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("span", _hoisted_6$5, " " + toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$b), _cache[3] || (_cache[3] = createTextVNode()), renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), _ctx.isMimeTypeChanged ? (openBlock(), createElementBlock("div", _hoisted_7$4, toDisplayString(_ctx.mimeTypeChangedText), 1)) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), _cache[7] || (_cache[7] = createElementVNode("hr", {
+  }, null, 8, ["name"])]), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("span", _hoisted_5$7, toDisplayString(_ctx.fileName), 1), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("span", _hoisted_6$5, " " + toDisplayString(_ctx.$t("fkui.file-item.file-open", "öppnas i nytt fönster")), 1)], 16, _hoisted_3$c), _cache[3] || (_cache[3] = createTextVNode()), renderSlot(_ctx.$slots, "row")]), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), _ctx.isMimeTypeChanged ? (openBlock(), createElementBlock("div", _hoisted_7$4, toDisplayString(_ctx.mimeTypeChangedText), 1)) : createCommentVNode("", true), _cache[6] || (_cache[6] = createTextVNode()), _cache[7] || (_cache[7] = createElementVNode("hr", {
     class: "file-item__separator"
   }, null, -1))]);
 }
@@ -14272,6 +14295,9 @@ const _sfc_main$l = defineComponent({
       required: false,
       default: () => ElementIdService.generateElementId()
     },
+    /**
+     * Disables the file selector.
+     */
     disabled: {
       type: Boolean,
       required: false,
@@ -14316,7 +14342,7 @@ const _hoisted_1$l = {
   class: "file-selector"
 };
 const _hoisted_2$f = ["id", "aria-labelledby", "aria-disabled"];
-const _hoisted_3$a = ["id", "for"];
+const _hoisted_3$b = ["id", "for"];
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
   return openBlock(), createElementBlock("div", _hoisted_1$l, [createElementVNode("input", mergeProps({
@@ -14336,7 +14362,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createVNode(_component_f_icon, {
     class: "button__icon",
     name: "paper-clip"
-  }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$a)]);
+  }), _cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 10, _hoisted_3$b)]);
 }
 const FFileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$e]]);
 const keybindings = {
@@ -14454,7 +14480,7 @@ const _hoisted_1$k = ["role"];
 const _hoisted_2$e = {
   key: 0
 };
-const _hoisted_3$9 = {
+const _hoisted_3$a = {
   key: 0,
   class: "table__column--shrink"
 };
@@ -14913,7 +14939,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }, [createCommentVNode("", true), _cache[18] || (_cache[18] = createTextVNode()), createElementVNode("table", mergeProps({
         class: ["table", tableClasses.value],
         role: tableRole.value
-      }, _ctx.$attrs), [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$e, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("colgroup", null, [unref(isExpandableTable) ? (openBlock(), createElementBlock("col", _hoisted_3$9)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+      }, _ctx.$attrs), [hasCaption.value ? (openBlock(), createElementBlock("caption", _hoisted_2$e, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), createElementVNode("colgroup", null, [unref(isExpandableTable) ? (openBlock(), createElementBlock("col", _hoisted_3$a)) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), __props.selectable ? (openBlock(), createElementBlock("col", _hoisted_4$8)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
         return openBlock(), createElementBlock("col", {
           key: column.id,
           class: normalizeClass(column.size)
@@ -15035,7 +15061,7 @@ const _hoisted_2$d = {
   ref: "header",
   class: "layout-application-template__header"
 };
-const _hoisted_3$8 = {
+const _hoisted_3$9 = {
   key: 1
 };
 const _hoisted_4$7 = {
@@ -15049,7 +15075,7 @@ const _hoisted_5$5 = {
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$j, [_ctx.showHeader || _ctx.showTopNavigation ? (openBlock(), createElementBlock("header", _hoisted_2$d, [_ctx.showHeader ? renderSlot(_ctx.$slots, "header", {
     key: 0
-  }) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.showTopNavigation ? (openBlock(), createElementBlock("nav", _hoisted_3$8, [renderSlot(_ctx.$slots, "top-navigation")])) : createCommentVNode("", true)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("main", _hoisted_4$7, [renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = createTextVNode()), _ctx.showFooter ? (openBlock(), createElementBlock("footer", _hoisted_5$5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]);
+  }) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), _ctx.showTopNavigation ? (openBlock(), createElementBlock("nav", _hoisted_3$9, [renderSlot(_ctx.$slots, "top-navigation")])) : createCommentVNode("", true)], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("main", _hoisted_4$7, [renderSlot(_ctx.$slots, "default"), _cache[1] || (_cache[1] = createTextVNode()), _ctx.showFooter ? (openBlock(), createElementBlock("footer", _hoisted_5$5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)], 512)]);
 }
 const FLayoutApplicationTemplate = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 function getGridClasses(target) {
@@ -15241,7 +15267,7 @@ const _hoisted_1$i = {
   class: "layout-navigation"
 };
 const _hoisted_2$c = ["aria-expanded"];
-const _hoisted_3$7 = {
+const _hoisted_3$8 = {
   class: "layout-navigation__navigation__inner"
 };
 const _hoisted_4$6 = {
@@ -15255,7 +15281,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     class: "layout-navigation__navigation",
     style: normalizeStyle(_ctx.navigationStyle),
     "aria-expanded": _ctx.isOpen
-  }, [createElementVNode("div", _hoisted_3$7, [_ctx.isOpen ? (openBlock(), createElementBlock(Fragment, {
+  }, [createElementVNode("div", _hoisted_3$8, [_ctx.isOpen ? (openBlock(), createElementBlock(Fragment, {
     key: 0
   }, [createElementVNode("div", {
     class: "layout-navigation__navigation__inner__title",
@@ -15500,7 +15526,7 @@ const _hoisted_2$a = {
   key: 0,
   class: "list__item"
 };
-const _hoisted_3$6 = {
+const _hoisted_3$7 = {
   class: "list__item__itempane"
 };
 const _hoisted_4$5 = ["id", "aria-labelledby", "tabindex", "onKeydown"];
@@ -15760,7 +15786,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         }, {
           item
         }))], 512)]);
-      }), 128)), _cache[0] || (_cache[0] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("li", _hoisted_2$a, [createElementVNode("div", _hoisted_3$6, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("ul", {
+      }), 128)), _cache[0] || (_cache[0] = createTextVNode()), isEmpty2.value ? (openBlock(), createElementBlock("li", _hoisted_2$a, [createElementVNode("div", _hoisted_3$7, [renderSlot(_ctx.$slots, "empty", {}, () => [createElementVNode("em", null, toDisplayString(unref($t2)("fkui.list.empty", "Listan är tom")), 1)])])])) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("ul", {
         key: 1,
         ref_key: "ulElement",
         ref: ulElement,
@@ -16559,7 +16585,7 @@ const _sfc_main$c = defineComponent({
 });
 const _hoisted_1$c = ["aria-label"];
 const _hoisted_2$8 = ["data-ref-index", "onClick"];
-const _hoisted_3$5 = {
+const _hoisted_3$6 = {
   class: "imenu__list__anchor-container"
 };
 const _hoisted_4$4 = ["data-ref-index", "href", "target"];
@@ -16600,7 +16626,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.itemClasses(item, index)),
       role: "none",
       onClick: (event) => _ctx.onClickItem(event, item)
-    }, [createElementVNode("div", _hoisted_3$5, [createElementVNode("a", {
+    }, [createElementVNode("div", _hoisted_3$6, [createElementVNode("a", {
       ref_for: true,
       ref: "anchors",
       "data-ref-index": index,
@@ -16695,7 +16721,7 @@ const _hoisted_2$7 = {
   key: 0,
   class: "offline"
 };
-const _hoisted_3$4 = {
+const _hoisted_3$5 = {
   class: "icon-stack icon-stack--error"
 };
 const _hoisted_4$3 = {
@@ -16718,7 +16744,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
       shrink: "",
       align: "center"
     }, {
-      default: withCtx(() => [createElementVNode("span", _hoisted_3$4, [createVNode(_component_f_icon, {
+      default: withCtx(() => [createElementVNode("span", _hoisted_3$5, [createVNode(_component_f_icon, {
         name: "triangle"
       }), _cache[0] || (_cache[0] = createTextVNode()), createVNode(_component_f_icon, {
         name: "alert"
@@ -16847,7 +16873,7 @@ const _hoisted_1$9 = {
 const _hoisted_2$5 = {
   key: 0
 };
-const _hoisted_3$3 = {
+const _hoisted_3$4 = {
   ref: "header",
   class: "page-header"
 };
@@ -16868,7 +16894,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: withCtx(() => [renderSlot(_ctx.$slots, "skip-link-text")]),
     _: 3
-  }, 8, ["href"])])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$3, [_ctx.hasLogo ? (openBlock(), createElementBlock("div", _hoisted_4$2, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), (openBlock(), createBlock(resolveDynamicComponent(_ctx.headerTag), {
+  }, 8, ["href"])])) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), createElementVNode("div", _hoisted_3$4, [_ctx.hasLogo ? (openBlock(), createElementBlock("div", _hoisted_4$2, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _cache[0] || (_cache[0] = createTextVNode()), (openBlock(), createBlock(resolveDynamicComponent(_ctx.headerTag), {
     class: "page-header__app-name"
   }, {
     default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -17013,7 +17039,7 @@ registerLayout({
     }
   }
 });
-const styleContent = ':host {\n    display: block;\n}\n\n.page-layout {\n    display: grid;\n    height: 100cqh;\n    width: min(100%, 100cqw);\n\n    &[part~="simple"] {\n        grid-template:\n            "header" min-content\n            "content" 1fr\n            "footer" min-content\n            / 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="left-panel"] {\n        grid-template:\n            "header header" min-content\n            "left content" 1fr\n            "footer footer" min-content\n            / min-content 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"] {\n            background: var(--fkds-color-background-secondary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="right-panel"] {\n        grid-template:\n            "header header" min-content\n            "content right" 1fr\n            "footer footer" min-content\n            / 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="three-column"] {\n        grid-template:\n            "header header header" min-content\n            "left content right" 1fr\n            "footer footer footer" min-content\n            / min-content 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            background: var(--f-background-pageheader-primary);\n            color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"],\n        [part="area right"] {\n            background: var(--fkds-color-background-secondary);\n            color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            background: var(--fkds-color-background-primary);\n            color: var(--fkds-color-text-primary);\n        }\n    }\n}\n\n.page-layout__area {\n    display: flex;\n    position: relative;\n\n    &[data-direction="column"] {\n        flex-direction: column;\n    }\n\n    &[data-direction="row"] {\n        flex-direction: row;\n    }\n\n    &[data-scroll] {\n        overflow-y: auto;\n    }\n\n    &:empty {\n        display: none;\n    }\n}\n\n:host ::slotted(*) {\n    display: contents;\n}\n';
+const styleContent = ':host {\n    display: block;\n}\n\n.page-layout {\n    display: grid;\n    height: 100cqh;\n    width: min(100%, 100cqw);\n\n    &[part~="simple"] {\n        grid-template:\n            "header" min-content\n            "content" 1fr\n            "footer" min-content\n            / 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="left-panel"] {\n        grid-template:\n            "header header" min-content\n            "left content" 1fr\n            "footer footer" min-content\n            / min-content 1fr;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="right-panel"] {\n        grid-template:\n            "header header" min-content\n            "content right" 1fr\n            "footer footer" min-content\n            / 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area right"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n\n    &[part~="three-column"] {\n        grid-template:\n            "header header header" min-content\n            "left content right" 1fr\n            "footer footer footer" min-content\n            / min-content 1fr min-content;\n\n        [part="area header"],\n        [part="area footer"] {\n            --f-page-layout-background: var(--f-background-pageheader-primary);\n            --f-page-layout-color: var(--fkds-color-text-inverted);\n        }\n\n        [part="area left"],\n        [part="area right"] {\n            --f-page-layout-background: var(--fkds-color-background-secondary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n\n        [part="area content"] {\n            --f-page-layout-background: var(--fkds-color-background-primary);\n            --f-page-layout-color: var(--fkds-color-text-primary);\n        }\n    }\n}\n\n.page-layout__area {\n    display: flex;\n    position: relative;\n    background: var(--f-page-layout-background);\n    color: var(--f-page-layout-color);\n\n    &[data-direction="column"] {\n        flex-direction: column;\n    }\n\n    &[data-direction="row"] {\n        flex-direction: row;\n    }\n\n    &[data-scroll] {\n        overflow-y: auto;\n    }\n\n    &:empty {\n        display: none;\n    }\n}\n\n:host ::slotted(*) {\n    display: contents;\n}\n';
 const stubLayout = defineLayout({
   name: "",
   areas: {}
@@ -17290,7 +17316,7 @@ const _hoisted_1$7 = {
   class: "progress"
 };
 const _hoisted_2$4 = ["aria-label", "aria-valuenow", "aria-valuetext"];
-const _hoisted_3$2 = {
+const _hoisted_3$3 = {
   class: "sr-only"
 };
 const MIN_VALUE = 0;
@@ -17361,7 +17387,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "aria-valuenow": progressValueNow.value,
         "aria-valuetext": progressText.value,
         style: normalizeStyle(cssWidth.value)
-      }, [createElementVNode("span", _hoisted_3$2, toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
+      }, [createElementVNode("span", _hoisted_3$3, toDisplayString(progressText.value), 1)], 14, _hoisted_2$4)]);
     };
   }
 });
@@ -17524,7 +17550,7 @@ const _sfc_main$6 = defineComponent({
 });
 const _hoisted_1$6 = ["id", "disabled"];
 const _hoisted_2$3 = ["for"];
-const _hoisted_3$1 = {
+const _hoisted_3$2 = {
   key: 0,
   class: "radio-button__details"
 };
@@ -17546,7 +17572,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     for: _ctx.id
   }, [renderSlot(_ctx.$slots, "default"), _cache[6] || (_cache[6] = createTextVNode()), _ctx.$slots.details ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$1, [_cache[1] || (_cache[1] = createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
+  }, [_ctx.showDetails === "always" ? (openBlock(), createElementBlock("span", _hoisted_3$2, [_cache[1] || (_cache[1] = createElementVNode("br", null, null, -1)), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "details")])) : createCommentVNode("", true), _cache[5] || (_cache[5] = createTextVNode()), _ctx.showDetails === "when-selected" ? (openBlock(), createBlock(Transition, {
     key: 1,
     onEnter: _ctx.enter,
     onAfterEnter: _ctx.afterEnter,
@@ -17677,7 +17703,7 @@ function computeCssValue(raw, total, auto) {
     return percent * total;
   } else if (raw === "0") {
     return 0;
-  } else if (raw === "auto") {
+  } else if (raw === "auto" || raw === "") {
     return auto;
   } else {
     throw new Error(`Cant parse size from "${raw}"`);
@@ -17725,10 +17751,17 @@ function useStorage(options) {
     loaded.value = true;
   });
 }
-const _hoisted_1$5 = ["aria-orientation"];
+const _hoisted_1$5 = {
+  key: 0,
+  class: "resize__offset"
+};
 const _hoisted_2$2 = ["aria-orientation"];
+const _hoisted_3$1 = ["aria-orientation"];
 const STEP_SIZE = 10;
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FResizePane.ce",
   props: {
     disabled: {
@@ -17746,10 +17779,22 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     initial: {
       default: "50%",
       type: String
+    },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
+    offset: {
+      default: 0,
+      type: Number
     }
   },
-  setup(__props) {
+  emits: ["resize"],
+  setup(__props, {
+    emit: __emit
+  }) {
     const props = __props;
+    const emit = __emit;
     const root = shallowRef();
     const content = ref();
     const separator = ref();
@@ -17758,11 +17803,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       max: -1,
       current: -1
     });
-    const separatorSize = ref(0);
     const layoutSize = ref(0);
     const storageKey = computed(() => area.value ? `layout/${area.value}/size` : null);
     const {
       attachPanel: attachment,
+      direction,
       area
     } = useAreaData(root);
     useKeyboardHandler({
@@ -17795,11 +17840,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     });
     const minSize = computed(() => {
       const total = layoutSize.value;
-      return Math.floor(aggregateCssValue(props.min, total, 0, Math.max) + separatorSize.value);
+      return Math.floor(aggregateCssValue(props.min, total, 0, Math.max));
     });
     const maxSize = computed(() => {
       const total = layoutSize.value;
-      return Math.floor(aggregateCssValue(props.max, total, total, Math.min) + separatorSize.value);
+      return Math.max(Math.floor(aggregateCssValue(props.max, total, total, Math.min)), minSize.value);
     });
     const initialSize = computed(() => {
       const total = layoutSize.value;
@@ -17812,6 +17857,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return "vertical";
       }
     });
+    const classes = computed(() => {
+      return [`resize--${attachment.value}`, `resize--${direction.value}`, props.overlay ? "resize--overlay" : void 0, props.disabled ? "resize--disabled" : void 0];
+    });
     const layoutElement = computed(() => {
       var _host$closest;
       if (!root.value) {
@@ -17821,6 +17869,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       const host = shadow.host;
       return (_host$closest = host.closest("ce-page-layout")) !== null && _host$closest !== void 0 ? _host$closest : void 0;
     });
+    watch(() => props.min, onResize);
+    watch(() => props.max, onResize);
     watchEffect(() => {
       const {
         min,
@@ -17828,23 +17878,23 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         current: value
       } = state.value;
       if (root.value) {
-        root.value.style.setProperty("--size", `${String(value)}px`);
-        root.value.style.setProperty("--min", `${min}px`);
-        root.value.style.setProperty("--max", `${max}px`);
+        const shadowRoot = root.value.getRootNode();
+        const host = shadowRoot.host;
+        host.style.setProperty("--size", `${String(value)}px`);
+        host.style.setProperty("--min", `${min}px`);
+        host.style.setProperty("--max", `${max}px`);
+        host.style.setProperty("--offset", `${props.offset}px`);
       }
       if (separator.value) {
         separator.value.setAttribute("aria-valuemin", String(Math.floor(min)));
         separator.value.setAttribute("aria-valuemax", String(Math.floor(max)));
         separator.value.setAttribute("aria-valuenow", String(Math.floor(value)));
       }
+      if (value >= 0) {
+        emit("resize", value);
+      }
     });
     onMounted(() => {
-      if (separator.value) {
-        const {
-          flexBasis
-        } = getComputedStyle(separator.value);
-        separatorSize.value = computeCssValue(flexBasis, 0, 0);
-      }
       layoutSize.value = getLayoutSize();
       state.value = {
         min: minSize.value,
@@ -17875,11 +17925,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock(Fragment, null, [_ctx.overlay && _ctx.offset ? (openBlock(), createElementBlock("div", _hoisted_1$5)) : createCommentVNode("", true), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("div", mergeProps({
         ref_key: "root",
         ref: root,
-        class: normalizeClass(["resize", `resize--${unref(attachment)}`])
-      }, [createElementVNode("div", {
+        class: ["resize", classes.value]
+      }, _ctx.$attrs), [createElementVNode("div", {
         ref_key: "content",
         ref: content,
         class: "resize__content"
@@ -17891,17 +17941,36 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         class: "resize__handle",
         tabindex: "0",
         "aria-orientation": orientation.value
-      }, null, 8, _hoisted_1$5)) : (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_2$2)) : (openBlock(), createElementBlock("div", {
         key: 1,
         role: "separator",
         class: "resize__handle disabled",
         "aria-orientation": orientation.value
-      }, null, 8, _hoisted_2$2))], 2);
+      }, null, 8, _hoisted_3$1))], 16)], 64);
     };
   }
 });
-const _style_0 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--left {\n  flex-direction: row;\n  width: var(--size);\n}\n.resize--right {\n  flex-direction: row-reverse;\n  width: var(--size);\n}\n.resize--top {\n  flex-direction: column;\n  height: var(--size);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n  height: var(--size);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--left .resize__content, .resize--right .resize__content {\n  min-width: calc(var(--min) - 2px);\n  max-width: calc(var(--max) - 2px);\n}\n.resize--top .resize__content, .resize--bottom .resize__content {\n  min-height: calc(var(--min) - 2px);\n  max-height: calc(var(--max) - 2px);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n  /* disable regular focus indicator as this component has its own */\n  /* when focus by keyboard we dont want the delay or transition */\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}\n.resize--left .resize__handle {\n  left: 2px;\n}\n.resize--right .resize__handle {\n  right: 2px;\n}\n.resize--top .resize__handle {\n  top: 2px;\n}\n.resize--bottom .resize__handle {\n  bottom: 2px;\n}';
+const _style_0 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n:host([hidden]) {\n  display: none;\n}\n:host ::slotted(*) {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--overlay {\n  position: absolute;\n  z-index: 1;\n  background: var(--f-page-layout-background);\n}\n.resize--left {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--left .resize__content {\n  flex-direction: row;\n}\n.resize--left.resize--overlay {\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--right {\n  flex-direction: row-reverse;\n}\n.resize--right:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--right .resize__content {\n  flex-direction: row;\n}\n.resize--right.resize--overlay {\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--top {\n  flex-direction: column;\n}\n.resize--top:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n}\n.resize--bottom:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize__offset {\n  width: calc(var(--offset) + 2px);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--column .resize__content {\n  flex-direction: column;\n}\n.resize--row .resize__content {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) .resize__content, .resize--right:not(.resize--disabled) .resize__content {\n  min-width: var(--min);\n  max-width: var(--max);\n  flex-basis: var(--size);\n}\n.resize--top:not(.resize--disabled) .resize__content, .resize--bottom:not(.resize--disabled) .resize__content {\n  min-height: var(--min);\n  max-height: var(--max);\n  flex-basis: var(--size);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n  /* disable regular focus indicator as this component has its own */\n  /* when focus by keyboard we dont want the delay or transition */\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}';
 const FResizePane = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0]]]);
+const injectionKey = Symbol("FResizePane");
+function useResize(options = {}) {
+  const api = inject(injectionKey, {
+    register() {
+      return () => void 0;
+    },
+    size: ref(0)
+  });
+  const unregister = api.register({
+    enabled: options.enabled,
+    visible: options.visible,
+    overlay: options.overlay,
+    offset: options.offset
+  });
+  onUnmounted(unregister);
+  return {
+    size: api.size
+  };
+}
 const _hoisted_1$4 = {
   slot: "content"
 };
@@ -17909,10 +17978,6 @@ const tagName = "ce-resize-pane";
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "FResizePane",
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
     min: {
       default: "0"
     },
@@ -17927,12 +17992,83 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     if (!customElements.get(tagName)) {
       customElements.define(tagName, defineCustomElement(FResizePane));
     }
+    const anyEnabled = ref(true);
+    const anyVisible = ref(true);
+    const anyOverlay = ref(false);
+    const size = ref(-1);
+    const offset2 = ref(0);
+    let components = [];
+    let n = 0;
+    function any(src, predicate) {
+      return src.length === 0 || src.some(predicate);
+    }
+    provide(injectionKey, {
+      register(options) {
+        const component = {
+          ...options,
+          id: n++
+        };
+        components.push(component);
+        const scope = effectScope();
+        scope.run(() => {
+          watchEffect(() => {
+            anyEnabled.value = any(components, (it) => {
+              var _a;
+              var _it$enabled$value;
+              return (_it$enabled$value = (_a = it.enabled) == null ? void 0 : _a.value) !== null && _it$enabled$value !== void 0 ? _it$enabled$value : true;
+            });
+          });
+          watchEffect(() => {
+            anyVisible.value = any(components, (it) => {
+              var _a;
+              var _it$visible$value;
+              return (_it$visible$value = (_a = it.visible) == null ? void 0 : _a.value) !== null && _it$visible$value !== void 0 ? _it$visible$value : true;
+            });
+          });
+          watchEffect(() => {
+            anyOverlay.value = any(components, (it) => {
+              var _a;
+              var _it$overlay$value;
+              return (_it$overlay$value = (_a = it.overlay) == null ? void 0 : _a.value) !== null && _it$overlay$value !== void 0 ? _it$overlay$value : false;
+            });
+          });
+          watchEffect(() => {
+            if (components.length === 0) {
+              return 0;
+            }
+            const offsets = components.map((it) => {
+              var _a;
+              return (_a = it.offset) == null ? void 0 : _a.value;
+            }).filter((it) => typeof it === "number");
+            offset2.value = Math.max(0, ...offsets);
+          });
+        });
+        return () => {
+          components = components.filter((it) => it.id !== component.id);
+          scope.stop();
+        };
+      },
+      size
+    });
+    const disabled = computed(() => anyEnabled.value === false);
+    const hidden = computed(() => anyVisible.value === false);
+    const overlay = computed(() => anyOverlay.value === true);
     const props = __props;
+    function onResize(event) {
+      size.value = event.detail[0];
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(tagName), normalizeProps(guardReactiveProps(props)), {
+      return openBlock(), createBlock(resolveDynamicComponent(tagName), mergeProps({
+        disabled: disabled.value,
+        hidden: hidden.value,
+        overlay: overlay.value,
+        offset: offset2.value
+      }, props, {
+        onResize
+      }), {
         default: withCtx(() => [createElementVNode("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default")])]),
         _: 3
-      }, 16);
+      }, 16, ["disabled", "hidden", "overlay", "offset"]);
     };
   }
 });
@@ -18370,6 +18506,10 @@ const _sfc_main = defineComponent({
   mixins: [TranslationMixin],
   inheritAttrs: true,
   props: {
+    /**
+     * The title of the wizard step.
+     * This will be displayed as the step's header.
+     */
     title: {
       type: String,
       required: true
@@ -18768,7 +18908,7 @@ export {
   _sfc_main$s as FSortFilterDataset,
   FSortFilterDatasetInjected,
   FStaticField,
-  FTableColumn,
+  _sfc_main$J as FTableColumn,
   FTableColumnSize,
   FTableColumnSort,
   FTableColumnType,
@@ -18849,6 +18989,7 @@ export {
   useAreaData,
   useCombobox,
   useModal,
+  useResize,
   useSlotUtils,
   useTextFieldSetup,
   useTranslate