@fkui/vue 5.43.0 → 5.44.0

package/dist/esm/index.esm.js

@@ -1,8 +1,8 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, isVNode, Comment, createApp, resolveComponent, withKeys, createCommentVNode, toDisplayString, createVNode, createBlock, withCtx, Fragment, renderList, withModifiers, getCurrentInstance, resolveDynamicComponent, Teleport, normalizeProps, guardReactiveProps, ref, Transition, normalizeStyle, onMounted, toValue, onUnmounted, useSlots, useTemplateRef, watchEffect, nextTick, withDirectives, vShow, watch, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, toRefs } from "vue";
-import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, pushFocus, findTabbableElements, popFocus, scrollTo, Reference, documentOrderComparator, ValidationService, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, deepClone, formatNumber, parseNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, formatPersonnummer, parsePersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, saveFocus, addFocusListener, removeFocusListener, restoreFocus, DomUtils, focusFirst } from "@fkui/logic";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, mergeProps, createTextVNode, createElementVNode, isVNode, Comment, createApp, resolveComponent, withKeys, createCommentVNode, toDisplayString, createVNode, createBlock, withCtx, Fragment, renderList, withModifiers, getCurrentInstance, resolveDynamicComponent, Teleport, normalizeProps, guardReactiveProps, ref, Transition, normalizeStyle, onMounted, toValue, onUnmounted, useSlots, useTemplateRef, watchEffect, watch, nextTick, withDirectives, vShow, unref, readonly, inject, toRef, provide, createSlots, vModelSelect, vModelDynamic, toHandlers, shallowRef, toRefs } from "vue";
+import { TranslationService, isSet, configLogic, focus as focus$1, ElementIdService, pushFocus, findTabbableElements, popFocus, scrollTo, Reference, documentOrderComparator, ValidationService, isValidatableHTMLElement, alertScreenReader, debounce, handleTab, isEmpty, deepClone, formatNumber, parseNumber, parseBankAccountNumber, parseBankgiro, parseClearingNumber, formatPersonnummer, parsePersonnummer, parsePlusgiro, formatPostalCode, parsePercent, formatPercent, parseOrganisationsnummer, isInvalidDatesConfig, isInvalidWeekdaysConfig, parseDate, waitForScreenReader, saveFocus, addFocusListener, removeFocusListener, restoreFocus, DomUtils, focusFirst } from "@fkui/logic";
 import { getWeekdayNamings, groupByWeek, FDate, DateFormat } from "@fkui/date";
 const statuses = ["default", "warning", "error", "success", "info"];
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "FBadge",
   props: {
     /**
@@ -1320,7 +1320,7 @@ function requireEs_array_push() {
 requireEs_array_push();
 const Flip = ["horizontal", "vertical"];
 const Rotate = ["90", "180", "270"];
-const _sfc_main$1c = defineComponent({
+const _sfc_main$1e = defineComponent({
   name: "FIcon",
   inheritAttrs: false,
   props: {
@@ -1408,8 +1408,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1$U = ["aria-hidden"];
-const _hoisted_2$F = ["xlink:href"];
+const _hoisted_1$W = ["aria-hidden"];
+const _hoisted_2$H = ["xlink:href"];
 function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
     focusable: "false",
@@ -1417,9 +1417,9 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": _ctx.ariaHidden
   }), [renderSlot(_ctx.$slots, "default"), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("use", {
     "xlink:href": _ctx.spriteId
-  }, null, 8, _hoisted_2$F)], 16, _hoisted_1$U);
+  }, null, 8, _hoisted_2$H)], 16, _hoisted_1$W);
 }
-const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$10]]);
+const FIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["render", _sfc_render$10]]);
 const DATA_TEST_ATTRIBUTE_NAME = "data-test";
 function throwErrorIfEmpty(value) {
   if (!value) {
@@ -3749,7 +3749,7 @@ function elementIsRadioButton(element) {
 function isHTMLInputElement(element) {
   return element instanceof HTMLInputElement;
 }
-const _sfc_main$1b = defineComponent({
+const _sfc_main$1d = defineComponent({
   name: "FModal",
   components: {
     FIcon
@@ -3923,11 +3923,11 @@ const _sfc_main$1b = defineComponent({
     }
   }
 });
-const _hoisted_1$T = ["id"];
-const _hoisted_2$E = {
+const _hoisted_1$V = ["id"];
+const _hoisted_2$G = {
   class: "modal__backdrop"
 };
-const _hoisted_3$w = {
+const _hoisted_3$x = {
   class: "modal__inner-container"
 };
 const _hoisted_4$r = {
@@ -3939,7 +3939,7 @@ const _hoisted_5$l = {
 const _hoisted_6$g = {
   class: "modal__header"
 };
-const _hoisted_7$d = {
+const _hoisted_7$e = {
   key: 0,
   ref: "modalTitle",
   class: "modal__title",
@@ -3963,19 +3963,19 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     id: _ctx.id,
     class: normalizeClass(["modal", _ctx.modalClass])
-  }, [createElementVNode("div", _hoisted_2$E, [createElementVNode("div", {
+  }, [createElementVNode("div", _hoisted_2$G, [createElementVNode("div", {
     class: "modal__outer-container scroll-target",
     tabindex: "-1",
     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$r, [createElementVNode("div", _hoisted_5$l, [createElementVNode("div", _hoisted_6$g, [createElementVNode("div", {
     tabindex: "0",
     onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusFirst && _ctx.onFocusFirst(...args))
-  }, null, 32), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasHeaderSlot ? (openBlock(), createElementBlock("h1", _hoisted_7$d, [renderSlot(_ctx.$slots, "header")], 512)) : createCommentVNode("", true)]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("div", _hoisted_8$9, [renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("div", _hoisted_9$6, [renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = createTextVNode()), createElementVNode("div", _hoisted_10$4, [createElementVNode("button", {
+  }, null, 32), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasHeaderSlot ? (openBlock(), createElementBlock("h1", _hoisted_7$e, [renderSlot(_ctx.$slots, "header")], 512)) : createCommentVNode("", true)]), _cache[5] || (_cache[5] = createTextVNode()), createElementVNode("div", _hoisted_8$9, [renderSlot(_ctx.$slots, "content")], 512), _cache[6] || (_cache[6] = createTextVNode()), createElementVNode("div", _hoisted_9$6, [renderSlot(_ctx.$slots, "footer")])]), _cache[9] || (_cache[9] = createTextVNode()), createElementVNode("div", _hoisted_10$4, [createElementVNode("button", {
     type: "button",
     class: "close-button",
     "aria-label": _ctx.ariaCloseText,
@@ -3985,9 +3985,9 @@ function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
   })], 8, _hoisted_11$3), _cache[8] || (_cache[8] = createTextVNode()), createElementVNode("div", {
     tabindex: "0",
     onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocusLast && _ctx.onFocusLast(...args))
-  }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$T)) : createCommentVNode("", true);
+  }, null, 32)])])], 2)])], 32)])], 10, _hoisted_1$V)) : createCommentVNode("", true);
 }
-const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$$]]);
+const FModal = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["render", _sfc_render$$]]);
 function prepareButtonList(src, buttonOrder = config.buttonOrder) {
   const list = src.map((it) => {
     var _it$event, _ref, _it$reason, _it$type;
@@ -4016,7 +4016,7 @@ const defaultButtons = [{
   event: "dismiss",
   type: "secondary"
 }];
-const _sfc_main$1a = defineComponent({
+const _sfc_main$1c = defineComponent({
   name: "FConfirmModal",
   components: {
     FModal
@@ -4120,11 +4120,11 @@ const _sfc_main$1a = defineComponent({
     }
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$U = {
   class: "button-group"
 };
-const _hoisted_2$D = ["onClick"];
-const _hoisted_3$v = {
+const _hoisted_2$F = ["onClick"];
+const _hoisted_3$w = {
   key: 0,
   class: "sr-only"
 };
@@ -4141,22 +4141,22 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     header: withCtx(() => [renderSlot(_ctx.$slots, "heading", {}, () => [createTextVNode(toDisplayString(_ctx.heading), 1)])]),
     content: withCtx(() => [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(_ctx.content), 1)])]),
-    footer: withCtx(() => [createElementVNode("div", _hoisted_1$S, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.preparedButtons, (button) => {
+    footer: withCtx(() => [createElementVNode("div", _hoisted_1$U, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.preparedButtons, (button) => {
       return openBlock(), createElementBlock("button", {
         key: button.label,
         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$D);
+      }, [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$F);
     }), 128))])]),
     _: 3
   }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
-const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$_]]);
+const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$_]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];
 const ALIGNMENT = ["top", "center", "bottom"];
 const FLOAT = ["left", "center", "right"];
-const _sfc_main$19 = defineComponent({
+const _sfc_main$1b = defineComponent({
   name: "IFlex",
   inheritAttrs: true,
   props: {
@@ -4236,8 +4236,8 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(["iflex", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$Z]]);
-const _sfc_main$18 = defineComponent({
+const IFlex = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["render", _sfc_render$Z]]);
+const _sfc_main$1a = defineComponent({
   name: "IFlexItem",
   inheritAttrs: true,
   props: {
@@ -4289,7 +4289,7 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(["iflex__item", _ctx.classList])
   }, [renderSlot(_ctx.$slots, "default")], 2);
 }
-const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$Y]]);
+const IFlexItem = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$Y]]);
 function focusError(item) {
   const element = document.querySelector(`#${item.id}`);
   if (!element) {
@@ -4299,7 +4299,7 @@ function focusError(item) {
   scrollTo(element, window.innerHeight * 0.25);
   focus$1(focusElement2 ? focusElement2 : element);
 }
-const _sfc_main$17 = defineComponent({
+const _sfc_main$19 = defineComponent({
   name: "FErrorList",
   components: {
     FIcon,
@@ -4355,13 +4355,13 @@ const _sfc_main$17 = defineComponent({
     }
   }
 });
-const _hoisted_1$R = {
+const _hoisted_1$T = {
   class: "error-list"
 };
-const _hoisted_2$C = {
+const _hoisted_2$E = {
   key: 0
 };
-const _hoisted_3$u = {
+const _hoisted_3$v = {
   class: "error-list__list error-list--list-style-none"
 };
 const _hoisted_4$q = ["onClick"];
@@ -4372,7 +4372,7 @@ function _sfc_render$X(_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");
-  return openBlock(), createElementBlock("div", _hoisted_1$R, [createVNode(_component_i_flex, null, {
+  return openBlock(), createElementBlock("div", _hoisted_1$T, [createVNode(_component_i_flex, null, {
     default: withCtx(() => [_ctx.hasTitleSlot ? (openBlock(), createBlock(_component_i_flex_item, {
       key: 0,
       shrink: ""
@@ -4391,7 +4391,7 @@ function _sfc_render$X(_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$C, [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$E, [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))
@@ -4422,7 +4422,7 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   })]);
 }
-const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$X]]);
+const FErrorList = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$X]]);
 function cleanUpElements(vm) {
   return new Promise((resolve) => {
     window.setTimeout(() => {
@@ -4451,7 +4451,7 @@ function sortComponentsWithErrorsOnDOMOrder(componentList) {
 function isFormStepReference(reference) {
   return "isOpen" in reference.ref;
 }
-const _sfc_main$16 = defineComponent({
+const _sfc_main$18 = defineComponent({
   name: "FValidationGroup",
   props: {
     /**
@@ -4527,13 +4527,13 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     onComponentUnmount: _cache[1] || (_cache[1] = (...args) => _ctx.onComponentUnmount && _ctx.onComponentUnmount(...args))
   }, [renderSlot(_ctx.$slots, "default")], 32);
 }
-const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$W]]);
+const FValidationGroup = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$W]]);
 var FValidationFormAction = /* @__PURE__ */ ((FValidationFormAction2) => {
   FValidationFormAction2[FValidationFormAction2["CONTINUE"] = 0] = "CONTINUE";
   FValidationFormAction2[FValidationFormAction2["CANCEL"] = 1] = "CANCEL";
   return FValidationFormAction2;
 })(FValidationFormAction || {});
-const _sfc_main$15 = defineComponent({
+const _sfc_main$17 = defineComponent({
   name: "FValidationForm",
   components: {
     FValidationGroup,
@@ -4672,8 +4672,8 @@ const _sfc_main$15 = defineComponent({
     }
   }
 });
-const _hoisted_1$Q = ["id"];
-const _hoisted_2$B = {
+const _hoisted_1$S = ["id"];
+const _hoisted_2$D = {
   key: 0,
   ref: "errors",
   tabindex: "-1",
@@ -4694,19 +4694,19 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
       novalidate: "",
       autocomplete: "off",
       onSubmit: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onSubmit && _ctx.onSubmit(...args), ["prevent"]))
-    }), [_ctx.displayErrors ? (openBlock(), createElementBlock("nav", _hoisted_2$B, [createVNode(_component_f_error_list, {
+    }), [_ctx.displayErrors ? (openBlock(), createElementBlock("nav", _hoisted_2$D, [createVNode(_component_f_error_list, {
       items: _ctx.errors,
       bullets: _ctx.errorListBullets,
       "before-navigate": _ctx.errorListBeforeNavigate
     }, {
       title: withCtx(() => [renderSlot(_ctx.$slots, "error-message")]),
       _: 3
-    }, 8, ["items", "bullets", "before-navigate"])], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$Q)]),
+    }, 8, ["items", "bullets", "before-navigate"])], 512)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$S)]),
     _: 3
   }, 8, ["modelValue"]);
 }
-const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$V]]);
-const _sfc_main$14 = defineComponent({
+const FValidationForm = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$V]]);
+const _sfc_main$16 = defineComponent({
   name: "FFormModal",
   components: {
     FModal,
@@ -4858,11 +4858,11 @@ const _sfc_main$14 = defineComponent({
     }
   }
 });
-const _hoisted_1$P = {
+const _hoisted_1$R = {
   class: "button-group"
 };
-const _hoisted_2$A = ["type", "form", "onClick"];
-const _hoisted_3$t = {
+const _hoisted_2$C = ["type", "form", "onClick"];
+const _hoisted_3$u = {
   key: 0,
   class: "sr-only"
 };
@@ -4891,7 +4891,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
       default: withCtx(() => [_cache[1] || (_cache[1] = createTextVNode()), renderSlot(_ctx.$slots, "input-text-fields")]),
       _: 3
     }, 8, ["id", "before-submit", "before-validation", "use-error-list", "onSubmit", "onCancel"])]),
-    footer: withCtx(() => [createElementVNode("div", _hoisted_1$P, [!_ctx.hasDeprecatedSlots ? (openBlock(true), createElementBlock(Fragment, {
+    footer: withCtx(() => [createElementVNode("div", _hoisted_1$R, [!_ctx.hasDeprecatedSlots ? (openBlock(true), createElementBlock(Fragment, {
       key: 0
     }, renderList(_ctx.preparedButtons, (button) => {
       return openBlock(), createElementBlock("button", {
@@ -4900,7 +4900,7 @@ function _sfc_render$U(_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[3] || (_cache[3] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$t, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$A);
+      }, [createElementVNode("span", null, toDisplayString(button.label), 1), _cache[3] || (_cache[3] = createTextVNode()), button.screenreader ? (openBlock(), createElementBlock("span", _hoisted_3$u, " " + toDisplayString(button.screenreader), 1)) : createCommentVNode("", true)], 10, _hoisted_2$C);
     }), 128)) : (openBlock(), createElementBlock(Fragment, {
       key: 1
     }, [createElementVNode("button", {
@@ -4917,7 +4917,7 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["data-test", "fullscreen", "is-open", "size", "aria-close-text", "onClose"]);
 }
-const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$U]]);
+const FFormModal = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$U]]);
 async function confirmModal(callingInstance, texts) {
   const buttons = [{
     label: texts.confirm,
@@ -5243,7 +5243,7 @@ const ErrorPlugin = {
     }
   }
 };
-const _sfc_main$13 = defineComponent({
+const _sfc_main$15 = defineComponent({
   name: "FErrorPage",
   props: {
     payload: {
@@ -5253,16 +5253,16 @@ const _sfc_main$13 = defineComponent({
     }
   }
 });
-const _hoisted_1$O = {
+const _hoisted_1$Q = {
   "data-test": "f-error-page"
 };
 function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$O, _cache[0] || (_cache[0] = [createElementVNode("h1", null, "Fel", -1), createTextVNode(), createElementVNode("p", null, "Ett fel har uppstått.", -1), createTextVNode(), createElementVNode("a", {
+  return openBlock(), createElementBlock("div", _hoisted_1$Q, _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$13, [["render", _sfc_render$T]]);
-const _sfc_main$12 = defineComponent({
+const FErrorPage = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$T]]);
+const _sfc_main$14 = defineComponent({
   name: "FErrorHandlingApp",
   props: {
     defaultComponent: {
@@ -5301,7 +5301,7 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   })]);
 }
-const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$S]]);
+const FErrorHandlingApp = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$S]]);
 function isMonthBefore(date, minDate) {
   return Boolean(minDate && date.isBefore(minDate.startOfMonth()));
 }
@@ -5312,7 +5312,7 @@ function isInvalidMonth(date, minDate, maxDate) {
   const startOfMonth = date.startOfMonth();
   return isMonthBefore(startOfMonth, minDate) || isMonthAfter(startOfMonth, maxDate);
 }
-function getMessage($t, date, minDate, maxDate) {
+function getMessage($t2, date, minDate, maxDate) {
   const invalidMonth = isInvalidMonth(date, minDate, maxDate);
   if (!invalidMonth) {
     return void 0;
@@ -5323,7 +5323,7 @@ function getMessage($t, date, minDate, maxDate) {
       monthName,
       year
     } = minDate;
-    return $t("fkui.calendar.error.below-min-date", "Du kan inte välja en dag före {{day}} {{month}} {{year}}", {
+    return $t2("fkui.calendar.error.below-min-date", "Du kan inte välja en dag före {{day}} {{month}} {{year}}", {
       day,
       month: monthName,
       year
@@ -5335,14 +5335,14 @@ function getMessage($t, date, minDate, maxDate) {
       monthName,
       year
     } = maxDate;
-    return $t("fkui.calendar.error.above-max-date", "Du kan inte välja en dag efter {{day}} {{month}} {{year}}", {
+    return $t2("fkui.calendar.error.above-max-date", "Du kan inte välja en dag efter {{day}} {{month}} {{year}}", {
       day,
       month: monthName,
       year
     });
   }
 }
-const _sfc_main$11 = defineComponent({
+const _sfc_main$13 = defineComponent({
   name: "ICalendarNavbar",
   components: {
     FIcon
@@ -5456,14 +5456,14 @@ const _sfc_main$11 = defineComponent({
     }
   }
 });
-const _hoisted_1$N = {
+const _hoisted_1$P = {
   class: "calendar-navbar"
 };
-const _hoisted_2$z = {
+const _hoisted_2$B = {
   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"
 };
@@ -5473,7 +5473,7 @@ const _hoisted_6$f = {
 };
 function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_icon = resolveComponent("f-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$N, [createElementVNode("div", _hoisted_2$z, toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("button", {
+  return openBlock(), createElementBlock("div", _hoisted_1$P, [createElementVNode("div", _hoisted_2$B, toDisplayString(_ctx.currentText), 1), _cache[4] || (_cache[4] = createTextVNode()), createElementVNode("button", {
     ref: "previousButton",
     class: "calendar-navbar__arrow calendar-navbar__arrow--previous",
     type: "button",
@@ -5483,7 +5483,7 @@ function _sfc_render$R(_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",
@@ -5495,14 +5495,14 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     name: "arrow-right"
   }, null, 8, ["class"])], 8, _hoisted_5$j)]);
 }
-const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$R]]);
+const ICalendarNavbar = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$R]]);
 function getDayStartOffset(days) {
   return days[0].weekDay - 1;
 }
 function getDayEndOffset(days) {
   return 7 - days[days.length - 1].weekDay;
 }
-const _sfc_main$10 = defineComponent({
+const _sfc_main$12 = defineComponent({
   name: "ICalendarMonthGrid",
   props: {
     /**
@@ -5573,14 +5573,14 @@ const _sfc_main$10 = defineComponent({
     }
   }
 });
-const _hoisted_1$M = {
+const _hoisted_1$O = {
   key: 0,
   class: "calendar-month__col--week"
 };
-const _hoisted_2$y = {
+const _hoisted_2$A = {
   role: "presentation"
 };
-const _hoisted_3$r = {
+const _hoisted_3$s = {
   role: "presentation"
 };
 const _hoisted_4$n = {
@@ -5593,7 +5593,7 @@ const _hoisted_5$i = ["title"];
 const _hoisted_6$e = {
   role: "presentation"
 };
-const _hoisted_7$c = {
+const _hoisted_7$d = {
   key: 0,
   class: "calendar-month__cell calendar-month__cell--week-number",
   "aria-hidden": "true"
@@ -5616,7 +5616,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     role: "application",
     onFocusin: _cache[0] || (_cache[0] = (...args) => _ctx.onFocusin && _ctx.onFocusin(...args)),
     onFocusout: _cache[1] || (_cache[1] = (...args) => _ctx.onFocusout && _ctx.onFocusout(...args))
-  }, [createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("col", _hoisted_1$M)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _cache[3] || (_cache[3] = createElementVNode("col", {
+  }, [createElementVNode("colgroup", null, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("col", _hoisted_1$O)) : createCommentVNode("", true), _cache[2] || (_cache[2] = createTextVNode()), _cache[3] || (_cache[3] = createElementVNode("col", {
     class: "calendar-month__col--day"
   }, null, -1)), _cache[4] || (_cache[4] = createTextVNode()), _cache[5] || (_cache[5] = createElementVNode("col", {
     class: "calendar-month__col--day"
@@ -5630,7 +5630,7 @@ function _sfc_render$Q(_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", _hoisted_2$y, [createElementVNode("tr", _hoisted_3$r, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_4$n)) : 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", _hoisted_2$A, [createElementVNode("tr", _hoisted_3$s, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("th", _hoisted_4$n)) : 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",
@@ -5644,7 +5644,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     return openBlock(), createElementBlock("tr", {
       key: week.week,
       role: "presentation"
-    }, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("td", _hoisted_7$c, toDisplayString(week.week), 1)) : createCommentVNode("", true), _cache[17] || (_cache[17] = createTextVNode()), _ctx.getDayStartOffset(week.days) ? (openBlock(), createElementBlock("td", {
+    }, [!_ctx.internalHideWeekNumbers ? (openBlock(), createElementBlock("td", _hoisted_7$d, toDisplayString(week.week), 1)) : createCommentVNode("", true), _cache[17] || (_cache[17] = createTextVNode()), _ctx.getDayStartOffset(week.days) ? (openBlock(), createElementBlock("td", {
       key: 1,
       class: "calendar-month__cell",
       colspan: _ctx.getDayStartOffset(week.days),
@@ -5674,7 +5674,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": "true"
   }, null, 8, _hoisted_13$1)])) : createCommentVNode("", true)])], 32);
 }
-const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$Q]]);
+const ICalendarMonthGrid = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$Q]]);
 const DayStep = {
   ArrowRight: 1,
   ArrowLeft: -1,
@@ -5698,7 +5698,7 @@ function getDayTabindex(date, active, entry) {
     return date.day === 1 ? 0 : -1;
   }
 }
-const _sfc_main$$ = defineComponent({
+const _sfc_main$11 = defineComponent({
   name: "ICalendarMonth",
   components: {
     ICalendarMonthGrid
@@ -5784,7 +5784,7 @@ const _sfc_main$$ = defineComponent({
     }
   }
 });
-const _hoisted_1$L = ["data-date", "tabindex", "onClick", "onKeydown"];
+const _hoisted_1$N = ["data-date", "tabindex", "onClick", "onKeydown"];
 function _sfc_render$P(_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, {
@@ -5804,12 +5804,12 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     }, [renderSlot(_ctx.$slots, "default", {
       date,
       isFocused: _ctx.isDayFocused(date)
-    })], 40, _hoisted_1$L)]),
+    })], 40, _hoisted_1$N)]),
     _: 3
   }, 8, ["value"]);
 }
-const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$P]]);
-const _sfc_main$_ = defineComponent({
+const ICalendarMonth = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$P]]);
+const _sfc_main$10 = defineComponent({
   name: "FCalendar",
   components: {
     ICalendarNavbar,
@@ -5861,13 +5861,13 @@ const _sfc_main$_ = defineComponent({
     }
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$M = {
   class: "calendar__wrapper"
 };
 function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_i_calendar_navbar = resolveComponent("i-calendar-navbar");
   const _component_i_calendar_month = resolveComponent("i-calendar-month");
-  return openBlock(), createElementBlock("div", _hoisted_1$K, [createVNode(_component_i_calendar_navbar, {
+  return openBlock(), createElementBlock("div", _hoisted_1$M, [createVNode(_component_i_calendar_navbar, {
     "model-value": _ctx.modelValue,
     "min-date": _ctx.minDate,
     "max-date": _ctx.maxDate,
@@ -5890,7 +5890,7 @@ function _sfc_render$O(_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$O]]);
+const FCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$O]]);
 function getCalendarDaySrText(day, enabled, selected, t) {
   const parts = [];
   if (!enabled) {
@@ -5909,7 +5909,7 @@ function getCalendarDaySrText(day, enabled, selected, t) {
   parts.push(day.toString(DateFormat.FULL));
   return parts.join(" ");
 }
-const _sfc_main$Z = defineComponent({
+const _sfc_main$$ = defineComponent({
   name: "FCalendarDay",
   mixins: [TranslationMixin],
   props: {
@@ -5974,18 +5974,18 @@ const _sfc_main$Z = defineComponent({
     }
   }
 });
-const _hoisted_1$J = {
+const _hoisted_1$L = {
   "aria-hidden": "true"
 };
-const _hoisted_2$x = {
+const _hoisted_2$z = {
   class: "sr-only"
 };
 function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", {
     class: normalizeClass(_ctx.dayClasses)
-  }, [createElementVNode("span", _hoisted_1$J, toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$x, toDisplayString(_ctx.srText), 1)], 2);
+  }, [createElementVNode("span", _hoisted_1$L, toDisplayString(_ctx.day.day), 1), _cache[0] || (_cache[0] = createTextVNode()), createElementVNode("span", _hoisted_2$z, toDisplayString(_ctx.srText), 1)], 2);
 }
-const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$N]]);
+const FCalendarDay = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["render", _sfc_render$N]]);
 function offset(page, el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -6270,7 +6270,7 @@ function isTeleportDisabled(options) {
   }
   return disableTeleport;
 }
-const _sfc_main$Y = defineComponent({
+const _sfc_main$_ = defineComponent({
   name: "IPopup",
   inheritAttrs: false,
   props: {
@@ -6582,7 +6582,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     placement: _ctx.placement
   })))], 544)], 16)], 8, ["to", "disabled"])) : createCommentVNode("", true);
 }
-const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$M]]);
+const IPopup = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$M]]);
 function isContextMenuTextItem(value) {
   return typeof value.key === "string";
 }
@@ -6630,7 +6630,7 @@ async function doMenuAction$2(action, target) {
 }
 const preventKeys$2 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter", "Escape"];
 const keyUp = ["ArrowUp", "Up"];
-const _sfc_main$X = defineComponent({
+const _sfc_main$Z = defineComponent({
   name: "FContextMenu",
   components: {
     IPopup,
@@ -6794,14 +6794,14 @@ const _sfc_main$X = defineComponent({
     }
   }
 });
-const _hoisted_1$I = ["aria-label"];
-const _hoisted_2$w = {
+const _hoisted_1$K = ["aria-label"];
+const _hoisted_2$y = {
   ref: "contextmenu",
   role: "menu",
   tabindex: "-1",
   class: "contextmenu__list"
 };
-const _hoisted_3$q = ["onClick"];
+const _hoisted_3$r = ["onClick"];
 const _hoisted_4$m = ["tabindex"];
 const _hoisted_5$h = {
   key: 0,
@@ -6824,7 +6824,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-label": _ctx.ariaLabel,
       onKeyup: _cache[0] || (_cache[0] = (...args) => _ctx.onKeyUp && _ctx.onKeyUp(...args)),
       onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args))
-    }, [createElementVNode("ul", _hoisted_2$w, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.popupItems, (item, index) => {
+    }, [createElementVNode("ul", _hoisted_2$y, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.popupItems, (item, index) => {
       return openBlock(), createElementBlock("li", {
         key: item.key,
         role: "menuitem",
@@ -6842,13 +6842,13 @@ function _sfc_render$L(_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$m), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (openBlock(), createElementBlock("hr", _hoisted_5$h)) : createCommentVNode("", true)], 8, _hoisted_3$q);
-    }), 128))], 512)], 40, _hoisted_1$I)]),
+      }, toDisplayString(item.label), 513)], 8, _hoisted_4$m), _cache[4] || (_cache[4] = createTextVNode()), _ctx.hasSeparatorAfterItemAt(index) ? (openBlock(), createElementBlock("hr", _hoisted_5$h)) : createCommentVNode("", true)], 8, _hoisted_3$r);
+    }), 128))], 512)], 40, _hoisted_1$K)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element"]);
 }
-const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$L]]);
-const _sfc_main$W = defineComponent({
+const FContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["render", _sfc_render$L]]);
+const _sfc_main$Y = defineComponent({
   name: "FExpand",
   data() {
     return {
@@ -6914,7 +6914,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
-const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["render", _sfc_render$K]]);
+const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["render", _sfc_render$K]]);
 function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   switch (placement) {
     case Placement.A: {
@@ -6978,7 +6978,7 @@ function computeArrowOffset(placement, inputIconRect, wrapperRect) {
   }
 }
 const POPUP_SPACING = 10;
-const _sfc_main$V = defineComponent({
+const _sfc_main$X = defineComponent({
   name: "IPopupError",
   components: {
     FIcon
@@ -7113,7 +7113,7 @@ const _sfc_main$V = defineComponent({
     }
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$J = {
   ref: "wrapper",
   class: "popup-error__wrapper"
 };
@@ -7127,7 +7127,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "popup",
     class: normalizeClass(_ctx.popupClasses),
     "aria-hidden": "true"
-  }, [createElementVNode("div", _hoisted_1$H, [createElementVNode("div", {
+  }, [createElementVNode("div", _hoisted_1$J, [createElementVNode("div", {
     class: normalizeClass(_ctx.arrowClass),
     style: normalizeStyle(_ctx.errorStyle)
   }, [createElementVNode("span", null, toDisplayString(_ctx.errorMessage), 1), _cache[1] || (_cache[1] = createTextVNode()), createElementVNode("button", {
@@ -7141,7 +7141,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     class: "button__icon"
   })])], 6)], 512)], 2)], 8, ["disabled"])) : createCommentVNode("", true);
 }
-const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$J]]);
+const IPopupError = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["render", _sfc_render$J]]);
 function useEventListener(target, event, callback) {
   onMounted(() => {
     var _a;
@@ -7162,15 +7162,16 @@ function useSlotUtils() {
     }
   };
 }
-function numItems(itemHeight, availableHeight) {
-  return Math.min(Math.floor(availableHeight / itemHeight), 6);
+function numItems(itemHeight, availableHeight, verticalSpacing) {
+  const itemsFit = Math.floor((availableHeight - verticalSpacing) / itemHeight);
+  return Math.min(itemsFit, 7);
 }
-function tryBelow(itemHeight, numOfItems, anchor, viewport) {
+function tryBelow(itemHeight, numOfItems, anchor, viewport, verticalSpacing) {
   const p1 = viewport.y + viewport.height;
   const p2 = anchor.y + anchor.height;
   const availableHeight = p1 - p2;
-  const itemsFit = numItems(itemHeight, availableHeight);
-  if (itemsFit < 2) {
+  const itemsFit = numItems(itemHeight, availableHeight, verticalSpacing);
+  if (itemsFit < 3) {
     return void 0;
   }
   const fittedHeight = itemHeight * Math.min(numOfItems, itemsFit);
@@ -7181,18 +7182,18 @@ function tryBelow(itemHeight, numOfItems, anchor, viewport) {
     height: fittedHeight
   };
 }
-function tryAbove(itemHeight, numOfItems, anchor, viewport) {
+function tryAbove(itemHeight, numOfItems, anchor, viewport, verticalSpacing) {
   const p1 = viewport.y;
   const p2 = anchor.y;
   const availableHeight = p2 - p1;
-  const itemsFit = numItems(itemHeight, availableHeight);
-  if (itemsFit < 2) {
+  const itemsFit = numItems(itemHeight, availableHeight, verticalSpacing);
+  if (itemsFit < 3) {
     return void 0;
   }
   const fittedHeight = itemHeight * Math.min(numOfItems, itemsFit);
   return {
     left: anchor.x,
-    top: anchor.y - fittedHeight,
+    top: anchor.y - fittedHeight - verticalSpacing,
     width: anchor.width,
     height: fittedHeight
   };
@@ -7203,7 +7204,8 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
 } = window) {
   const {
     itemHeight,
-    numOfItems
+    numOfItems,
+    verticalSpacing
   } = options;
   const rect = anchor.getBoundingClientRect();
   const anchorRect = {
@@ -7216,19 +7218,22 @@ function computeListboxRect(anchor, options, root = document.documentElement, {
     y: scrollY,
     height: root.clientHeight
   };
-  const d = tryBelow(itemHeight, numOfItems, anchorRect, viewportRect);
-  if (d) {
-    return d;
+  const below = tryBelow(itemHeight, numOfItems, anchorRect, viewportRect, verticalSpacing);
+  if (below) {
+    return below;
   }
-  const u = tryAbove(itemHeight, numOfItems, anchorRect, viewportRect);
-  if (u) {
-    return u;
+  const above = tryAbove(itemHeight, numOfItems, anchorRect, viewportRect, verticalSpacing);
+  if (above) {
+    return above;
   }
   return void 0;
 }
-const _hoisted_1$G = ["onKeyup"];
+const _hoisted_1$I = ["onKeyup"];
+const _hoisted_2$x = {
+  ref: "content"
+};
 const teleportDisabled = false;
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "IPopupListbox",
   props: {
     isOpen: {
@@ -7236,21 +7241,39 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     },
     anchor: {},
     numOfItems: {},
-    itemHeight: {}
+    itemHeight: {},
+    activeElement: {}
   },
   emits: ["close"],
   setup(__props, {
     emit: __emit
   }) {
     const emit = __emit;
-    const wrapper = useTemplateRef("wrapper");
-    const content = useTemplateRef("content");
+    const wrapperRef = useTemplateRef("wrapper");
+    const contentRef = useTemplateRef("content");
     const popupClasses = ["popup", "popup--overlay"];
     const teleportTarget = computed(() => {
       var _config$popupTarget;
       return (_config$popupTarget = config.popupTarget) !== null && _config$popupTarget !== void 0 ? _config$popupTarget : config.teleportTarget;
     });
+    let guessedItemHeight = void 0;
+    let verticalSpacing = void 0;
     useEventListener(__props.anchor, "keyup", onKeyEsc);
+    watchEffect(() => {
+      if (wrapperRef.value && __props.activeElement !== void 0) {
+        const centerPosition = __props.activeElement.offsetTop - (wrapperRef.value.getBoundingClientRect().height - __props.activeElement.getBoundingClientRect().height) / 2;
+        if (!isElementInsideViewport(wrapperRef.value)) {
+          wrapperRef.value.scrollIntoView({
+            behavior: "instant",
+            block: "nearest"
+          });
+        }
+        wrapperRef.value.scrollTo({
+          top: centerPosition,
+          behavior: "instant"
+        });
+      }
+    });
     function addListeners() {
       document.addEventListener("click", onDocumentClickHandler);
       window.addEventListener("resize", debounce(onResize, 100));
@@ -7259,6 +7282,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
       document.removeEventListener("click", onDocumentClickHandler);
       window.removeEventListener("resize", debounce(onResize, 100));
     }
+    function isElementInsideViewport(element) {
+      const rect = element.getBoundingClientRect();
+      const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+      const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+      const insideX = rect.left >= 0 && rect.left + rect.width <= windowWidth;
+      const insideY = rect.top >= 0 && rect.top + rect.height <= windowHeight;
+      return insideX && insideY;
+    }
     watchEffect(() => {
       if (__props.isOpen) {
         calculatePosition();
@@ -7271,6 +7302,11 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         removeListeners();
       }
     });
+    watch(() => __props.numOfItems, (oldValue, newValue) => {
+      if (oldValue !== newValue && __props.isOpen) {
+        calculatePosition();
+      }
+    });
     onUnmounted(removeListeners);
     function onDocumentClickHandler() {
       emit("close");
@@ -7291,21 +7327,30 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     async function calculatePosition() {
       var _a;
       await nextTick();
-      const wrapperElement = wrapper.value;
-      const contentWrapper = content.value;
+      const wrapperElement = wrapperRef.value;
+      const contentWrapper = contentRef.value;
       if (!__props.anchor || !wrapperElement || !contentWrapper) {
         return;
       }
       let contentItemHeigth = __props.itemHeight;
       if (!contentItemHeigth) {
-        contentItemHeigth = guessItemHeight(__props.numOfItems, contentWrapper);
+        if (!guessedItemHeight) {
+          guessedItemHeight = guessItemHeight(__props.numOfItems, contentWrapper);
+        }
+        contentItemHeigth = guessedItemHeight;
+      }
+      if (verticalSpacing === void 0) {
+        const absWrapper = getAbsolutePosition(wrapperElement);
+        const marginTotal = absWrapper.y * 2;
+        verticalSpacing = Math.ceil(absWrapper.height - contentItemHeigth * __props.numOfItems) + marginTotal;
       }
       wrapperElement.style.overflowY = "auto";
-      wrapperElement.style.left = `0px`;
-      wrapperElement.style.boxShadow = "none";
+      wrapperElement.style.overflowX = "hidden";
+      wrapperElement.style.left = "0px";
       const rect = computeListboxRect(__props.anchor, {
         itemHeight: contentItemHeigth,
-        numOfItems: __props.numOfItems
+        numOfItems: __props.numOfItems,
+        verticalSpacing
       });
       if (rect) {
         var _offsetRect$x;
@@ -7319,8 +7364,9 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         const offsetLeft = (_offsetRect$x = offsetRect == null ? void 0 : offsetRect.x) !== null && _offsetRect$x !== void 0 ? _offsetRect$x : 0;
         wrapperElement.style.top = `${top}px`;
         wrapperElement.style.left = `${left - offsetLeft}px`;
-        wrapperElement.style.minWidth = `${width}px`;
-        wrapperElement.style.maxHeight = `${height}px`;
+        wrapperElement.style.width = `${width}px`;
+        contentWrapper.style.maxHeight = `${height}px`;
+        contentWrapper.style.width = `${width}px`;
       }
     }
     return (_ctx, _cache) => {
@@ -7332,17 +7378,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         ref: "popup",
         class: normalizeClass(popupClasses)
       }, [createElementVNode("div", mergeProps({
-        ref_key: "wrapper",
-        ref: wrapper
+        ref: "wrapper"
       }, _ctx.$attrs, {
         class: "popup__wrapper",
+        tabindex: "0",
         onKeyup: withKeys(withModifiers(onKeyEsc, ["stop"]), ["esc"]),
         onClick: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["stop"]))
-      }), [createElementVNode("div", {
-        ref_key: "content",
-        ref: content
-      }, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$G)], 512)], 8, ["to"])) : createCommentVNode("", true);
+      }), [createElementVNode("div", _hoisted_2$x, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1$I)], 512)], 8, ["to"])) : createCommentVNode("", true);
     };
   }
 });
@@ -7386,7 +7429,7 @@ async function doMenuAction$1(action, target) {
   }
 }
 const preventKeys$1 = ["Tab", "Up", "Down", "ArrowUp", "ArrowDown", "Home", "End", " ", "Spacebar", "Enter"];
-const _sfc_main$T = defineComponent({
+const _sfc_main$V = defineComponent({
   name: "IPopupMenu",
   components: {
     IPopup
@@ -7642,12 +7685,12 @@ const _sfc_main$T = defineComponent({
     }
   }
 });
-const _hoisted_1$F = ["aria-label"];
-const _hoisted_2$v = {
+const _hoisted_1$H = ["aria-label"];
+const _hoisted_2$w = {
   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$g = {
   key: 0,
@@ -7668,7 +7711,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [createElementVNode("nav", {
       class: "ipopupmenu ipopupmenu--vertical",
       "aria-label": _ctx.ariaLabel
-    }, [createElementVNode("ul", _hoisted_2$v, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
+    }, [createElementVNode("ul", _hoisted_2$w, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
       return openBlock(), createElementBlock("li", {
         ref_for: true,
         ref: "items",
@@ -7684,18 +7727,18 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
         role: "menuitem",
         target: item.target,
         tabindex: "0"
-      }, [_ctx.isSelected(index) ? (openBlock(), createElementBlock("span", _hoisted_5$g, [createElementVNode("span", null, toDisplayString(_ctx.selectedMenuItemScreenReaderText) + " ", 1)])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)], 8, _hoisted_4$l)], 10, _hoisted_3$p);
-    }), 128))])], 8, _hoisted_1$F)]),
+      }, [_ctx.isSelected(index) ? (openBlock(), createElementBlock("span", _hoisted_5$g, [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$H)]),
     _: 1
   }, 8, ["is-open", "anchor", "focus-element", "onKeyup", "onKeydown"]);
 }
-const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$I]]);
+const IPopupMenu = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["render", _sfc_render$I]]);
 const ANIMATION_DURATION = 500;
 const NO_CSS_CLASSES = "";
 const CLOSED_CSS_CLASS_OPACITY = "animate-expand animate-expand--opacity";
 const CLOSED_CSS_CLASS = "animate-expand";
 const ANIMATION_CSS_CLASSES = "animate-expand animate-expand--expanded";
-const _sfc_main$S = defineComponent({
+const _sfc_main$U = defineComponent({
   name: "IAnimateExpand",
   props: {
     /**
@@ -7887,7 +7930,7 @@ const _sfc_main$S = defineComponent({
     }
   }
 });
-const _hoisted_1$E = {
+const _hoisted_1$G = {
   key: 0,
   ref: "content",
   "data-test": "animation-content"
@@ -7896,10 +7939,10 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.animationClasses),
     style: normalizeStyle(_ctx.heightStyle)
-  }, [_ctx.shouldVIf ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$E, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.shouldVShow]]) : createCommentVNode("", true)], 6);
+  }, [_ctx.shouldVIf ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$G, [renderSlot(_ctx.$slots, "default")], 512)), [[vShow, _ctx.shouldVShow]]) : createCommentVNode("", true)], 6);
 }
-const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$H]]);
-const _sfc_main$R = defineComponent({
+const IAnimateExpand = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$H]]);
+const _sfc_main$T = defineComponent({
   name: "ISkipLink",
   mixins: [TranslationMixin],
   props: {
@@ -7913,14 +7956,355 @@ const _sfc_main$R = defineComponent({
     }
   }
 });
-const _hoisted_1$D = ["href"];
+const _hoisted_1$F = ["href"];
 function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("a", {
     class: "iskiplink",
     href: _ctx.href
-  }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$D);
+  }, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.$t("fkui.skip-link.text", "Gå direkt till innehåll")), 1)])], 8, _hoisted_1$F);
+}
+const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$G]]);
+function filterOptions(options, filter2, selectMode) {
+  if (isEmpty(filter2) || selectMode) {
+    return options;
+  }
+  const filterLowerCased = filter2.toLowerCase();
+  return options.filter((it) => it.toLowerCase().indexOf(filterLowerCased) > -1);
+}
+const $t = useTranslate();
+function useCombobox(inputRef, options, onOptionSelected) {
+  if (!options) {
+    return {
+      dropdownId: "",
+      dropdownIsOpen: ref(false),
+      dropdownOptions: ref([]),
+      activeOptionId: "",
+      activeOption: ref(null),
+      toggleDropdown() {
+      },
+      selectOption() {
+      },
+      closeDropdown() {
+      }
+    };
+  }
+  useEventListener(inputRef, "click", onInputClick);
+  useEventListener(inputRef, "focus", onInputFocus);
+  useEventListener(inputRef, "keydown", onInputKeyDown);
+  useEventListener(inputRef, "keyup", onInputKeyUp);
+  const dropdownId = ElementIdService.generateElementId();
+  const dropdownIsOpen = ref(false);
+  const activeOptionId = ElementIdService.generateElementId();
+  const activeOption = ref(null);
+  const filter2 = ref("");
+  const selectMode = ref(false);
+  const selectedOption = ref(null);
+  const dropdownOptions = computed(() => {
+    return filterOptions(options, filter2.value, selectMode.value);
+  });
+  const hasOptions = computed(() => {
+    return dropdownOptions.value.length > 0;
+  });
+  const hasMultipleOptions = computed(() => {
+    return dropdownOptions.value.length > 1;
+  });
+  watchEffect(() => {
+    if (!inputRef.value) {
+      return;
+    }
+    inputRef.value.setAttribute("aria-expanded", `${dropdownIsOpen.value}`);
+    if (dropdownIsOpen.value) {
+      inputRef.value.setAttribute("aria-controls", dropdownId);
+    } else {
+      inputRef.value.removeAttribute("aria-controls");
+    }
+  });
+  watchEffect(async () => {
+    if (!inputRef.value) {
+      return;
+    }
+    if (activeOption.value) {
+      inputRef.value.setAttribute("aria-activedescendant", activeOptionId);
+    } else {
+      inputRef.value.removeAttribute("aria-activedescendant");
+    }
+  });
+  watchEffect(() => {
+    if (!inputRef.value) {
+      return;
+    }
+    let description = selectMode.value ? `${$t("fkui.combobox.selected", "Valt förslag")} ` : "";
+    if (isEmpty(filter2.value) || selectMode.value) {
+      description += $t("fkui.combobox.listDetails", `Det finns {{ count }} förslag. Använd uppåtpil och nedåtpil för att navigera bland förslagen.`, {
+        count: options.length
+      });
+    } else if (hasOptions.value) {
+      description += $t("fkui.combobox.matchesListDetails", `Det finns {{ count }} förslag som matchar. Använd uppåtpil och nedåtpil för att navigera bland förslagen.`, {
+        count: dropdownOptions.value.length
+      });
+    } else {
+      description = $t("fkui.combobox.noMatchesListDetails", "Det finns inga förslag som matchar.");
+    }
+    inputRef.value.setAttribute("aria-description", description);
+  });
+  onMounted(() => {
+    if (!inputRef.value) {
+      throw new Error("missing input ref");
+    }
+    filter2.value = inputRef.value.value;
+    inputRef.value.setAttribute("role", "combobox");
+    inputRef.value.setAttribute("aria-autocomplete", "list");
+  });
+  return {
+    dropdownId,
+    dropdownIsOpen,
+    dropdownOptions,
+    activeOptionId,
+    activeOption,
+    toggleDropdown,
+    selectOption,
+    closeDropdown: close
+  };
+  function selectOption(value) {
+    selectedOption.value = value;
+    if (selectedOption.value) {
+      close();
+      filter2.value = selectedOption.value;
+      selectMode.value = true;
+      if (onOptionSelected) {
+        onOptionSelected(value);
+      }
+    }
+  }
+  async function openSelected(fallback = null) {
+    var _a;
+    if (hasOptions.value) {
+      dropdownIsOpen.value = true;
+      await nextTick();
+      if (selectMode.value) {
+        activeOption.value = filter2.value;
+      } else if (fallback === "first") {
+        activeOption.value = dropdownOptions.value[0];
+      } else if (fallback === "last") {
+        activeOption.value = dropdownOptions.value[dropdownOptions.value.length - 1];
+      } else {
+        activeOption.value = null;
+      }
+      (_a = inputRef.value) == null ? void 0 : _a.focus();
+    }
+  }
+  function close() {
+    dropdownIsOpen.value = false;
+    activeOption.value = null;
+  }
+  function toggleDropdown() {
+    if (!dropdownIsOpen.value) {
+      openSelected();
+    } else {
+      close();
+    }
+  }
+  function setNextOption() {
+    if (activeOption.value && hasMultipleOptions.value) {
+      const index = dropdownOptions.value.indexOf(activeOption.value);
+      if (index === dropdownOptions.value.length - 1) {
+        activeOption.value = dropdownOptions.value[0];
+      } else {
+        activeOption.value = dropdownOptions.value[index + 1];
+      }
+    } else {
+      activeOption.value = dropdownOptions.value[0];
+    }
+  }
+  function setPreviousOption() {
+    if (activeOption.value && hasMultipleOptions.value) {
+      const index = dropdownOptions.value.indexOf(activeOption.value);
+      if (index === 0) {
+        activeOption.value = dropdownOptions.value[dropdownOptions.value.length - 1];
+      } else {
+        activeOption.value = dropdownOptions.value[index - 1];
+      }
+    } else {
+      activeOption.value = dropdownOptions.value[dropdownOptions.value.length - 1];
+    }
+  }
+  function onInputClick() {
+    toggleDropdown();
+  }
+  async function onInputFocus() {
+    var _a;
+    var _inputRef$value$value, _options$includes;
+    await nextTick();
+    filter2.value = (_inputRef$value$value = (_a = inputRef.value) == null ? void 0 : _a.value) !== null && _inputRef$value$value !== void 0 ? _inputRef$value$value : "";
+    selectMode.value = (_options$includes = options == null ? void 0 : options.includes(filter2.value)) !== null && _options$includes !== void 0 ? _options$includes : false;
+  }
+  async function onInputKeyDown(event) {
+    let flag = false;
+    if (event.ctrlKey || event.shiftKey) {
+      return;
+    }
+    switch (event.key) {
+      case "Enter":
+        if (dropdownIsOpen.value) {
+          if (activeOption.value) {
+            selectOption(activeOption.value);
+            flag = true;
+          }
+          close();
+        } else {
+          openSelected();
+        }
+        break;
+      case "Down":
+      case "ArrowDown":
+        if (dropdownIsOpen.value) {
+          setNextOption();
+        } else {
+          openSelected("first");
+        }
+        flag = true;
+        break;
+      case "Up":
+      case "ArrowUp":
+        if (dropdownIsOpen.value) {
+          setPreviousOption();
+        } else {
+          openSelected("last");
+        }
+        flag = true;
+        break;
+      case "Esc":
+      case "Escape":
+        if (dropdownIsOpen.value) {
+          close();
+        }
+        flag = true;
+        break;
+      case "Tab":
+        if (dropdownIsOpen.value) {
+          close();
+        }
+        break;
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  function onInputKeyUp() {
+    if (!inputRef.value) {
+      throw new Error("missing input ref");
+    }
+    if (filter2.value === inputRef.value.value) {
+      return;
+    }
+    filter2.value = inputRef.value.value;
+    activeOption.value = null;
+    selectMode.value = false;
+    if (!dropdownIsOpen.value) {
+      openSelected();
+    } else if (!hasOptions.value) {
+      close();
+    }
+  }
 }
-const ISkipLink = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["render", _sfc_render$G]]);
+const _hoisted_1$E = {
+  class: "combobox"
+};
+const _hoisted_2$v = ["id"];
+const _hoisted_3$p = ["id", "aria-selected", "onClick"];
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
+  __name: "IComboboxDropdown",
+  props: {
+    id: {},
+    isOpen: {
+      type: Boolean
+    },
+    options: {},
+    activeOption: {},
+    activeOptionId: {},
+    inputNode: {}
+  },
+  emits: ["select", "close"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const emit = __emit;
+    const listboxRef = useTemplateRef("listbox");
+    const activeElement = ref();
+    function isOptionActive(item) {
+      return item === __props.activeOption;
+    }
+    function onOptionClick(value) {
+      emit("select", value);
+    }
+    function onListboxClose() {
+      emit("close");
+    }
+    watchEffect(async () => {
+      var _a;
+      if (__props.activeOption !== null) {
+        await nextTick();
+        const activeOptionNode = (_a = listboxRef.value) == null ? void 0 : _a.querySelector(`#${__props.activeOptionId}`);
+        activeElement.value = activeOptionNode !== null && activeOptionNode !== void 0 ? activeOptionNode : void 0;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$E, [createVNode(unref(_sfc_main$W), {
+        "is-open": _ctx.isOpen,
+        anchor: _ctx.inputNode,
+        "num-of-items": _ctx.options.length,
+        "active-element": activeElement.value,
+        class: "combobox__listbox",
+        onClose: onListboxClose
+      }, {
+        default: withCtx(() => [createElementVNode("ul", {
+          id: _ctx.id,
+          ref: "listbox",
+          role: "listbox",
+          "aria-label": "Förslag",
+          class: "combobox__listbox__list"
+        }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item) => {
+          return openBlock(), createElementBlock("li", {
+            id: isOptionActive(item) ? _ctx.activeOptionId : void 0,
+            key: item,
+            role: "option",
+            "aria-selected": isOptionActive(item) ? "true" : void 0,
+            class: normalizeClass(["combobox__listbox__option", {
+              "combobox__listbox__option--highlight": isOptionActive(item)
+            }]),
+            onClick: withModifiers(($event) => onOptionClick(item), ["stop", "prevent"])
+          }, toDisplayString(item), 11, _hoisted_3$p);
+        }), 128))], 8, _hoisted_2$v)]),
+        _: 1
+      }, 8, ["is-open", "anchor", "num-of-items", "active-element"])]);
+    };
+  }
+});
+const _hoisted_1$D = ["aria-label"];
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
+  __name: "IComboboxToggleButton",
+  emits: ["toggle"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const $t2 = useTranslate();
+    const emit = __emit;
+    const ariaLabel = $t2("fkui.combobox.toggle", "Öppna förslagen");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: "combobox__button",
+        type: "button",
+        "aria-label": unref(ariaLabel),
+        tabindex: "-1",
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle"))
+      }, [createVNode(unref(FIcon), {
+        name: "arrow-down",
+        class: "text-field__icon"
+      })], 8, _hoisted_1$D);
+    };
+  }
+});
 const tooltipAttachTo = Symbol("tooltipAttachTo");
 let initialized = false;
 const reducedMotion = ref(false);
@@ -8515,7 +8899,7 @@ const _hoisted_5$e = {
 const _hoisted_6$c = {
   key: 1
 };
-const _hoisted_7$b = {
+const _hoisted_7$c = {
   ref: "tooltipAttachTo",
   class: "label"
 };
@@ -8546,7 +8930,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     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$e, 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, {
     key: 1
-  }, [createElementVNode("div", _hoisted_7$b, [createElementVNode("span", _hoisted_8$7, [renderSlot(_ctx.$slots, "label")])], 512), _cache[5] || (_cache[5] = createTextVNode()), renderSlot(_ctx.$slots, "tooltip"), _cache[6] || (_cache[6] = createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot || _ctx.hasError ? (openBlock(), createElementBlock("div", {
+  }, [createElementVNode("div", _hoisted_7$c, [createElementVNode("span", _hoisted_8$7, [renderSlot(_ctx.$slots, "label")])], 512), _cache[5] || (_cache[5] = createTextVNode()), renderSlot(_ctx.$slots, "tooltip"), _cache[6] || (_cache[6] = createTextVNode()), _ctx.hasDescriptionSlot || _ctx.hasErrorMessageSlot || _ctx.hasError ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: normalizeClass(["label", _ctx.groupLabelClass]),
     "aria-hidden": "true"
@@ -9519,7 +9903,7 @@ const _hoisted_5$d = {
   class: "label__message label__message--error"
 };
 const _hoisted_6$b = ["for"];
-const _hoisted_7$a = {
+const _hoisted_7$b = {
   key: 0,
   class: "label__message label__message--error"
 };
@@ -9545,7 +9929,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   }, [renderSlot(_ctx.$slots, "default"), _cache[5] || (_cache[5] = createTextVNode()), renderSlot(_ctx.$slots, "description", normalizeProps(guardReactiveProps({
     descriptionClass: _ctx.descriptionClass,
     discreteDescriptionClass: _ctx.discreteDescriptionClass
-  }))), _cache[6] || (_cache[6] = createTextVNode()), _ctx.hasErrorMessageSlot ? (openBlock(), createElementBlock("span", _hoisted_7$a, [createVNode(_component_f_icon, {
+  }))), _cache[6] || (_cache[6] = createTextVNode()), _ctx.hasErrorMessageSlot ? (openBlock(), createElementBlock("span", _hoisted_7$b, [createVNode(_component_f_icon, {
     class: "label__icon--left",
     name: "error"
   }), _cache[4] || (_cache[4] = createTextVNode()), renderSlot(_ctx.$slots, "error-message")])) : createCommentVNode("", true)], 8, _hoisted_6$b));
@@ -9737,12 +10121,54 @@ const FSelectField = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_r
 function resolveWidthClass(words, inline) {
   return inline ? void 0 : words.split(" ").map((word) => `i-width-${word}`).join(" ");
 }
+function setCursorAtEnd(input) {
+  input.setSelectionRange(input.value.length, input.value.length);
+}
+function useTextFieldSetup(props) {
+  const inputNode = useTemplateRef("input");
+  const textFieldTableMode = inject("textFieldTableMode", false);
+  const viewValue = ref("");
+  async function onOptionSelected(value) {
+    if (!inputNode.value) {
+      return;
+    }
+    viewValue.value = value;
+    await nextTick();
+    inputNode.value.focus();
+    setCursorAtEnd(inputNode.value);
+  }
+  const {
+    dropdownId,
+    dropdownIsOpen,
+    dropdownOptions,
+    activeOptionId,
+    activeOption,
+    toggleDropdown,
+    selectOption,
+    closeDropdown
+  } = useCombobox(inputNode, props.options, onOptionSelected);
+  return {
+    textFieldTableMode,
+    viewValue,
+    onOptionSelected,
+    dropdownId,
+    dropdownIsOpen,
+    dropdownOptions,
+    activeOptionId,
+    activeOption,
+    toggleDropdown,
+    selectOption,
+    closeDropdown
+  };
+}
 const _sfc_main$H = defineComponent({
   name: "FTextField",
   components: {
     FLabel,
     FIcon,
-    IPopupError
+    IPopupError,
+    IComboboxDropdown: _sfc_main$S,
+    IComboboxToggleButton: _sfc_main$R
   },
   inheritAttrs: false,
   props: {
@@ -9837,18 +10263,52 @@ const _sfc_main$H = defineComponent({
       type: String,
       required: false,
       default: "sm-12"
+    },
+    /**
+     * List of options.
+     *
+     * When set, the user can select a value from the list of options and filter while typing.
+     *
+     * If a formatter is used by the component, make sure the options are formatted as well.
+     */
+    options: {
+      type: Array,
+      required: false,
+      default: () => void 0
     }
   },
   emits: ["blur", "change", "update", "update:modelValue"],
-  setup() {
+  setup(props) {
+    const {
+      textFieldTableMode,
+      viewValue,
+      onOptionSelected,
+      dropdownId,
+      dropdownIsOpen,
+      dropdownOptions,
+      activeOptionId,
+      activeOption,
+      toggleDropdown,
+      selectOption,
+      closeDropdown
+    } = useTextFieldSetup(props);
     return {
-      textFieldTableMode: inject("textFieldTableMode", false)
+      textFieldTableMode,
+      viewValue,
+      onOptionSelected,
+      dropdownId,
+      dropdownIsOpen,
+      dropdownOptions,
+      activeOptionId,
+      activeOption,
+      toggleDropdown,
+      selectOption,
+      closeDropdown
     };
   },
   data() {
     return {
       showErrorPopup: false,
-      viewValue: "",
       lastModelValue: "",
       validationMessage: "",
       validityMode: "INITIAL",
@@ -9911,6 +10371,12 @@ const _sfc_main$H = defineComponent({
     this.isAfterInitialRender = true;
   },
   methods: {
+    onDropdownSelect(value) {
+      this.selectOption(value);
+    },
+    onDropdownClose() {
+      this.closeDropdown();
+    },
     getErrorPopupAnchor() {
       return this.$refs.input;
     },
@@ -10045,10 +10511,16 @@ const _hoisted_6$a = {
   key: 2,
   class: "text-field__append-inner"
 };
+const _hoisted_7$a = {
+  key: 3,
+  class: "text-field__append-inner"
+};
 function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_f_label = resolveComponent("f-label");
   const _component_f_icon = resolveComponent("f-icon");
   const _component_i_popup_error = resolveComponent("i-popup-error");
+  const _component_i_combobox_toggle_button = resolveComponent("i-combobox-toggle-button");
+  const _component_i_combobox_dropdown = resolveComponent("i-combobox-dropdown");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["text-field", _ctx.rootClass])
   }, [createElementVNode("div", {
@@ -10082,9 +10554,9 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
     name: "tooltip",
     fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltip")]),
     key: "0"
-  } : void 0]), 1032, ["for", "class"])], 2), _cache[18] || (_cache[18] = createTextVNode()), createElementVNode("div", {
+  } : void 0]), 1032, ["for", "class"])], 2), _cache[19] || (_cache[19] = createTextVNode()), createElementVNode("div", {
     class: normalizeClass(["text-field__input-wrapper", _ctx.inputWrapperClass])
-  }, [renderSlot(_ctx.$slots, "input-left"), _cache[16] || (_cache[16] = createTextVNode()), createElementVNode("div", _hoisted_4$g, [withDirectives(createElementVNode("input", mergeProps({
+  }, [renderSlot(_ctx.$slots, "input-left"), _cache[17] || (_cache[17] = createTextVNode()), createElementVNode("div", _hoisted_4$g, [withDirectives(createElementVNode("input", mergeProps({
     id: _ctx.id,
     ref: "input",
     "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.viewValue = $event),
@@ -10108,7 +10580,21 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
     "is-open": _ctx.showPopupError,
     "error-message": _ctx.validationMessage,
     onClose: _ctx.closePopupError
-  }, null, 8, ["anchor", "is-open", "error-message", "onClose"])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), _ctx.$slots["append-inner"] ? (openBlock(), createElementBlock("div", _hoisted_6$a, [renderSlot(_ctx.$slots, "append-inner")])) : createCommentVNode("", true)]), _cache[17] || (_cache[17] = createTextVNode()), renderSlot(_ctx.$slots, "input-right")], 2)], 2);
+  }, null, 8, ["anchor", "is-open", "error-message", "onClose"])) : createCommentVNode("", true), _cache[15] || (_cache[15] = createTextVNode()), _ctx.$slots["append-inner"] ? (openBlock(), createElementBlock("div", _hoisted_6$a, [renderSlot(_ctx.$slots, "append-inner")])) : createCommentVNode("", true), _cache[16] || (_cache[16] = createTextVNode()), _ctx.options ? (openBlock(), createElementBlock("div", _hoisted_7$a, [createVNode(_component_i_combobox_toggle_button, {
+    "aria-controls": _ctx.dropdownIsOpen ? _ctx.dropdownId : void 0,
+    "aria-expanded": _ctx.dropdownIsOpen,
+    onToggle: _ctx.toggleDropdown
+  }, null, 8, ["aria-controls", "aria-expanded", "onToggle"])])) : createCommentVNode("", true)]), _cache[18] || (_cache[18] = createTextVNode()), renderSlot(_ctx.$slots, "input-right")], 2), _cache[20] || (_cache[20] = createTextVNode()), _ctx.options && _ctx.$refs.input ? (openBlock(), createBlock(_component_i_combobox_dropdown, {
+    key: 0,
+    id: _ctx.dropdownId,
+    "is-open": _ctx.dropdownIsOpen,
+    options: _ctx.dropdownOptions,
+    "active-option": _ctx.activeOption,
+    "active-option-id": _ctx.activeOptionId,
+    "input-node": _ctx.$refs.input,
+    onSelect: _ctx.onDropdownSelect,
+    onClose: _ctx.onDropdownClose
+  }, null, 8, ["id", "is-open", "options", "active-option", "active-option-id", "input-node", "onSelect", "onClose"])) : createCommentVNode("", true)], 2);
 }
 const FTextField = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$w]]);
 const _sfc_main$G = defineComponent({
@@ -10407,10 +10893,8 @@ const _sfc_main$E = defineComponent({
       default: parseNumber
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10553,10 +11037,8 @@ const _sfc_main$C = defineComponent({
       default: parseBankAccountNumber
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10584,10 +11066,8 @@ const _sfc_main$B = defineComponent({
       default: parseBankgiro
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10618,10 +11098,8 @@ const _sfc_main$A = defineComponent({
       default: parseClearingNumber
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10665,10 +11143,8 @@ const _sfc_main$z = defineComponent({
       default: parseNumber
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   mounted() {
     const inputElement = getInputElement(this);
@@ -10696,10 +11172,8 @@ const _sfc_main$y = defineComponent({
       default: parsePersonnummer
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10733,10 +11207,8 @@ const _sfc_main$x = defineComponent({
       default: parsePlusgiro
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10767,10 +11239,8 @@ const _sfc_main$w = defineComponent({
       default: formatPostalCode
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10819,10 +11289,8 @@ const _sfc_main$v = defineComponent({
       default: parsePercent
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -10856,10 +11324,8 @@ const _sfc_main$u = defineComponent({
       default: parseOrganisationsnummer
     }
   },
-  setup() {
-    return {
-      textFieldTableMode: inject("textFieldTableMode", false)
-    };
+  setup(props) {
+    return useTextFieldSetup(props);
   },
   data() {
     return {
@@ -13738,7 +14204,9 @@ const _sfc_main$e = defineComponent({
       }
     },
     updateActiveItemFromVModel() {
-      if (this.active && !itemEquals(this.active, this.activeItem, this.keyAttribute)) {
+      if (this.active === void 0) {
+        this.activeItem = void 0;
+      } else if (!itemEquals(this.active, this.activeItem, this.keyAttribute)) {
         this.activeItem = this.active;
       }
     },
@@ -16670,7 +17138,7 @@ export {
   ErrorPlugin,
   ErrorViewData,
   EventBus,
-  _sfc_main$1d as FBadge,
+  _sfc_main$1f as FBadge,
   _sfc_main$C as FBankAccountNumberTextField,
   _sfc_main$B as FBankgiroTextField,
   FCalendar,
@@ -16753,11 +17221,13 @@ export {
   ICalendarMonth,
   ICalendarMonthGrid,
   ICalendarNavbar,
+  _sfc_main$S as IComboboxDropdown,
+  _sfc_main$R as IComboboxToggleButton,
   IFlex,
   IFlexItem,
   IPopup,
   IPopupError,
-  _sfc_main$U as IPopupListbox,
+  _sfc_main$W as IPopupListbox,
   IPopupMenu,
   ISkipLink,
   FValidationForm as IValidationForm,
@@ -16818,8 +17288,10 @@ export {
   sortComponentsWithErrorsOnDOMOrder,
   tableScrollClasses,
   tooltipAttachTo,
+  useCombobox,
   useModal,
   useSlotUtils,
+  useTextFieldSetup,
   useTranslate
 };
 //# sourceMappingURL=index.esm.js.map