fds-vue-core 8.3.2 → 8.4.1

package/dist/fds-vue-core.es.js

@@ -1,4 +1,5 @@
-import { useAttrs, computed, useSlots, Comment, inject, defineComponent, openBlock, createElementBlock, mergeProps, createBlock, ref, watch, createElementVNode, normalizeClass, unref, createVNode, toDisplayString, createCommentVNode, renderSlot, withCtx, createTextVNode, withDirectives, vShow, resolveDynamicComponent, normalizeStyle, onMounted, toValue, onUnmounted, onBeforeUnmount, Fragment, renderList, useModel, nextTick, vModelCheckbox, mergeModels, Teleport, withModifiers, provide, getCurrentInstance, vModelText, withKeys, watchEffect, reactive, resolveComponent, Transition, normalizeProps, guardReactiveProps, vModelSelect } from "vue";
+import { useAttrs, computed, useSlots, Comment, inject, defineComponent, openBlock, createElementBlock, mergeProps, createBlock, ref, watch, createElementVNode, normalizeClass, unref, createVNode, toDisplayString, createCommentVNode, renderSlot, withCtx, createTextVNode, withDirectives, vShow, resolveDynamicComponent, normalizeStyle, onMounted, toValue, onUnmounted, onBeforeUnmount, Fragment, renderList, useModel, nextTick, vModelCheckbox, mergeModels, Teleport, withModifiers, provide, getCurrentInstance, vModelText, Transition, withKeys, watchEffect, reactive, resolveComponent, normalizeProps, guardReactiveProps, vModelSelect } from "vue";
+import { useRoute, useRouter } from "vue-router";
 function useAttrsWithDefaults(props) {
   const attrs = useAttrs();
   return {
@@ -75,6 +76,7 @@ const en = {
   "FdsInput.today": "(today)",
   "FdsListHeading.loading": "Loading...",
   "FdsListHeading.separator": "of",
+  "FdsDrawer.closeDrawer": "Close drawer",
   "FdsModal.closeModal": "Close modal window",
   "FdsPagination.currentPage": "Current page",
   "FdsPagination.firstPage": "Go to first page",
@@ -150,6 +152,7 @@ const sv = {
   "FdsInput.today": "(idag)",
   "FdsListHeading.loading": "Laddar...",
   "FdsListHeading.separator": "av",
+  "FdsDrawer.closeDrawer": "Stäng sidopanel",
   "FdsModal.closeModal": "Stäng dialogruta",
   "FdsPagination.currentPage": "Aktuell sida",
   "FdsPagination.firstPage": "Gå till första sidan",
@@ -752,8 +755,8 @@ const icons = {
       </defs>
     </svg>`
 };
-const _hoisted_1$B = ["innerHTML"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_1$C = ["innerHTML"];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   __name: "FdsIcon",
   props: {
     name: {},
@@ -786,11 +789,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", mergeProps({
         class: "flex items-center justify-center align-middle",
         style: { width: pixelSize.value, height: pixelSize.value }
-      }, rootAttrs.value, { innerHTML: svgHtml.value }), null, 16, _hoisted_1$B);
+      }, rootAttrs.value, { innerHTML: svgHtml.value }), null, 16, _hoisted_1$C);
     };
   }
 });
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "FdsButtonIcon",
   props: {
     icon: {},
@@ -834,12 +837,12 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         class: buttonClasses.value,
         onClick
       }), [
-        !__props.loading ? (openBlock(), createBlock(_sfc_main$N, {
+        !__props.loading ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           size: iconSize.value,
           name: __props.icon,
           "aria-hidden": "true"
-        }, null, 8, ["size", "name"])) : (openBlock(), createBlock(_sfc_main$N, {
+        }, null, 8, ["size", "name"])) : (openBlock(), createBlock(_sfc_main$O, {
           key: 1,
           size: iconSize.value,
           name: "spinner",
@@ -850,7 +853,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$A = { class: "flex items-start gap-2" };
+const _hoisted_1$B = { class: "flex items-start gap-2" };
 const _hoisted_2$q = { class: "h-7 flex items-center" };
 const _hoisted_3$l = { class: "leading-7" };
 const _hoisted_4$j = { class: "relative h-7" };
@@ -858,7 +861,7 @@ const _hoisted_5$h = {
   key: 1,
   class: "fds-block-alert-slot mb-0-last-child"
 };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "FdsBlockAlert",
   props: {
     visible: { type: Boolean, default: true },
@@ -876,7 +879,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const { t } = useFdsI18n();
     const emit = __emit;
     const isExpanded = ref(props.expanded);
-    const isVisible = ref(props.visible);
+    const isVisible2 = ref(props.visible);
     const expandLabel = computed(() => t("FdsBlockAlert.showMore"));
     const collapseLabel = computed(() => t("FdsBlockAlert.showLess"));
     const closeLabel = computed(() => t("FdsBlockAlert.close"));
@@ -884,7 +887,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     watch(
       () => props.visible,
       (v) => {
-        isVisible.value = v;
+        isVisible2.value = v;
       }
     );
     const alertClasses = computed(() => [
@@ -898,7 +901,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       ...props.dataTestid && { "data-testid": props.dataTestid }
     }));
     function handleClose() {
-      isVisible.value = false;
+      isVisible2.value = false;
       emit("update:visible", false);
       emit("close");
     }
@@ -907,16 +910,16 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       emit("toggle");
     }
     return (_ctx, _cache) => {
-      return isVisible.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, rootAttrs.value, { class: alertClasses.value }), [
+      return isVisible2.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, rootAttrs.value, { class: alertClasses.value }), [
         createElementVNode("div", null, [
           createElementVNode("div", null, [
             __props.heading ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-2": (isExpanded.value || !__props.collapsable) && unref(hasSlot) }])
             }, [
-              createElementVNode("div", _hoisted_1$A, [
+              createElementVNode("div", _hoisted_1$B, [
                 createElementVNode("div", _hoisted_2$q, [
-                  createVNode(_sfc_main$N, {
+                  createVNode(_sfc_main$O, {
                     name: "alert",
                     size: 24,
                     class: "fill-yellow-700"
@@ -925,13 +928,13 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", _hoisted_3$l, toDisplayString(__props.heading), 1)
               ]),
               createElementVNode("div", _hoisted_4$j, [
-                __props.closeable ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
+                __props.closeable ? (openBlock(), createBlock(_sfc_main$N, mergeProps({
                   key: 0,
                   icon: "cross",
                   size: 28,
                   onClick: handleClose
                 }, { "aria-label": closeLabel.value }, { class: ["fill-gray-900! hover:bg-gray-100 active:bg-gray-200"] }), null, 16)) : createCommentVNode("", true),
-                __props.collapsable ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
+                __props.collapsable ? (openBlock(), createBlock(_sfc_main$N, mergeProps({
                   key: 1,
                   icon: "arrowDown",
                   size: 28,
@@ -954,7 +957,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$z = ["id"];
+const _hoisted_1$A = ["id"];
 const _hoisted_2$p = {
   key: 0,
   class: "flex items-start justify-between gap-4 mb-4"
@@ -962,7 +965,7 @@ const _hoisted_2$p = {
 const _hoisted_3$k = { class: "flex items-center gap-3" };
 const _hoisted_4$i = { class: "flex items-start gap-3 leading-8" };
 const _hoisted_5$g = { class: "mb-0-last-child" };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "FdsBlockContent",
   props: {
     heading: { default: void 0 },
@@ -1019,11 +1022,11 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_5$g, [
           renderSlot(_ctx.$slots, "default")
         ])
-      ], 16, _hoisted_1$z);
+      ], 16, _hoisted_1$A);
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "FdsSticker",
   props: {
     variant: { default: "blue" },
@@ -1071,7 +1074,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$y = { class: "leading-6 w-full flex justify-between gap-4" };
+const _hoisted_1$z = { class: "leading-6 w-full flex justify-between gap-4" };
 const _hoisted_2$o = {
   key: 0,
   class: "flex items-center mr-4"
@@ -1083,7 +1086,7 @@ const _hoisted_5$f = {
   class: "w-full flex mt-2"
 };
 const _hoisted_6$b = ["aria-hidden"];
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1155,12 +1158,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           createElementVNode("span", {
             class: normalizeClass(buttonRowClasses.value)
           }, [
-            createElementVNode("span", _hoisted_1$y, [
+            createElementVNode("span", _hoisted_1$z, [
               createElementVNode("span", {
                 class: normalizeClass(["flex items-center", { "inline-flex items-start": __props.icon }])
               }, [
                 __props.icon ? (openBlock(), createElementBlock("span", _hoisted_2$o, [
-                  createVNode(_sfc_main$N, {
+                  createVNode(_sfc_main$O, {
                     name: __props.icon,
                     size: 24,
                     class: normalizeClass(["fill-blue-500", [{ "fill-gray-500": __props.disabled }, __props.iconClass]])
@@ -1173,7 +1176,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 ])
               ], 2),
               createElementVNode("span", _hoisted_4$h, [
-                __props.stickerText && __props.stickerColor ? (openBlock(), createBlock(_sfc_main$J, {
+                __props.stickerText && __props.stickerColor ? (openBlock(), createBlock(_sfc_main$K, {
                   key: 0,
                   variant: __props.stickerColor
                 }, {
@@ -1182,7 +1185,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }, 8, ["variant"])) : createCommentVNode("", true),
-                createVNode(_sfc_main$N, {
+                createVNode(_sfc_main$O, {
                   name: "arrowDown",
                   size: 24,
                   class: normalizeClass(["transition-transform duration-200 fill-blue-500 min-w-6 min-h-6", { "rotate-180": isOpen.value, "fill-gray-500": __props.disabled }])
@@ -1206,7 +1209,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$x = ["id"];
+const _hoisted_1$y = ["id"];
 const _hoisted_2$n = {
   key: 0,
   class: "flex items-start gap-4"
@@ -1231,7 +1234,7 @@ const _hoisted_13$2 = { class: "flex items-start gap-3" };
 const _hoisted_14$2 = { class: "mb-0-last-child" };
 const smallIconSize = 24;
 const largeIconSize = 48;
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "FdsBlockInfo",
   props: {
     heading: { default: void 0 },
@@ -1264,7 +1267,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         class: contentClasses.value
       }, rootAttrs.value), [
         __props.iconSize === "large" && __props.icon ? (openBlock(), createElementBlock("div", _hoisted_2$n, [
-          createVNode(_sfc_main$N, {
+          createVNode(_sfc_main$O, {
             name: __props.icon,
             size: largeIconSize,
             class: "fill-blue-500"
@@ -1289,7 +1292,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("header", _hoisted_10$4, [
               createElementVNode("div", _hoisted_11$4, [
-                __props.icon && __props.iconSize === "small" ? (openBlock(), createBlock(_sfc_main$N, {
+                __props.icon && __props.iconSize === "small" ? (openBlock(), createBlock(_sfc_main$O, {
                   key: 0,
                   name: __props.icon,
                   size: smallIconSize,
@@ -1306,16 +1309,16 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "default")
           ])
         ]))
-      ], 16, _hoisted_1$x);
+      ], 16, _hoisted_1$y);
     };
   }
 });
-const _hoisted_1$w = { class: "mb-0-last-child" };
+const _hoisted_1$x = { class: "mb-0-last-child" };
 const _hoisted_2$m = {
   key: 0,
   class: "flex items-end"
 };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1428,7 +1431,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(["flex w-full flex-1", contentClasses.value])
           }, [
-            __props.icon ? (openBlock(), createBlock(_sfc_main$N, {
+            __props.icon ? (openBlock(), createBlock(_sfc_main$O, {
               key: 0,
               name: __props.icon,
               size: 24,
@@ -1447,7 +1450,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 class: normalizeClass(slotWrapperClasses.value)
               }, [
-                createElementVNode("div", _hoisted_1$w, [
+                createElementVNode("div", _hoisted_1$x, [
                   renderSlot(_ctx.$slots, "default")
                 ]),
                 unref(hasStickerSlot) ? (openBlock(), createElementBlock("div", _hoisted_2$m, [
@@ -1456,7 +1459,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
               ], 2)
             ], 2)
           ], 2),
-          __props.variant === "link" ? (openBlock(), createBlock(_sfc_main$N, {
+          __props.variant === "link" ? (openBlock(), createBlock(_sfc_main$O, {
             key: 0,
             name: "arrowRight",
             size: 24,
@@ -1468,8 +1471,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$v = ["aria-label"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _hoisted_1$w = ["aria-label"];
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "FdsSpinner",
   props: {
     size: { default: "48px" },
@@ -1549,13 +1552,13 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           key: 0,
           class: normalizeClass(__props.labelPosition === "bottom" ? "font-bold" : "")
         }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$v);
+      ], 16, _hoisted_1$w);
     };
   }
 });
-const _hoisted_1$u = ["aria-disabled"];
+const _hoisted_1$v = ["aria-disabled"];
 const elBase$2 = "box-border appearance-none inline-flex items-center justify-center w-fit min-h-0 shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-middle no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1640,7 +1643,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           onClick
         }), {
           default: withCtx(() => [
-            __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
+            __props.loading ? (openBlock(), createBlock(_sfc_main$G, {
               key: 0,
               class: "mr-2",
               size: "24px",
@@ -1650,7 +1653,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
               class: normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$O, {
                 class: normalizeClass(iconFillClass2.value),
                 name: __props.icon,
                 size: __props.iconSize
@@ -1660,15 +1663,15 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$u);
+      ], 10, _hoisted_1$v);
     };
   }
 });
-const _hoisted_1$t = {
+const _hoisted_1$u = {
   key: 0,
   class: "flex items-center gap-2 h-7"
 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "FdsButtonCopy",
   props: {
     value: { default: "" },
@@ -1730,10 +1733,10 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return isCopied.value ? (openBlock(), createElementBlock("div", _hoisted_1$t, [
-        createVNode(_sfc_main$N, { name: "bigSuccess" }),
+      return isCopied.value ? (openBlock(), createElementBlock("div", _hoisted_1$u, [
+        createVNode(_sfc_main$O, { name: "bigSuccess" }),
         createElementVNode("span", null, toDisplayString(props.copiedText), 1)
-      ])) : (openBlock(), createBlock(_sfc_main$E, {
+      ])) : (openBlock(), createBlock(_sfc_main$F, {
         key: 1,
         type: "button",
         disabled: props.disabled,
@@ -5024,8 +5027,8 @@ function useDownload() {
     isDownloading
   };
 }
-const _hoisted_1$s = ["disabled", "aria-disabled"];
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = ["disabled", "aria-disabled"];
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FdsButtonDownload",
   props: {
     loading: { type: Boolean, default: false },
@@ -5126,23 +5129,23 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           class: normalizeClass(iconOrderClasses.value),
           "aria-hidden": "true"
         }, [
-          createVNode(_sfc_main$N, {
+          createVNode(_sfc_main$O, {
             class: normalizeClass(iconFillClass2.value),
             name: "download",
             size: 24
           }, null, 8, ["class"])
         ], 2),
         createTextVNode(" " + toDisplayString(__props.text), 1)
-      ], 16, _hoisted_1$s);
+      ], 16, _hoisted_1$t);
     };
   }
 });
-const _hoisted_1$r = ["aria-disabled"];
+const _hoisted_1$s = ["aria-disabled"];
 const _hoisted_2$l = { key: 2 };
 const elBase$1 = "fds-button-primary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses$1 = "bg-blue-600 border border-blue-600 text-white hover:bg-blue-700";
 const iconFillClass$1 = "fill-white";
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5225,7 +5228,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           onClick
         }), {
           default: withCtx(() => [
-            __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
+            __props.loading ? (openBlock(), createBlock(_sfc_main$G, {
               key: 0,
               size: __props.size === "sm" ? "18px" : "24px",
               color: "inherit"
@@ -5234,7 +5237,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               class: normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$O, {
                 class: normalizeClass(iconFillClass$1),
                 name: __props.icon,
                 size: __props.iconSize
@@ -5244,16 +5247,16 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$r);
+      ], 10, _hoisted_1$s);
     };
   }
 });
-const _hoisted_1$q = ["aria-disabled"];
+const _hoisted_1$r = ["aria-disabled"];
 const _hoisted_2$k = { key: 2 };
 const elBase = "fds-button-secondary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses = "bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue_t-100 hover:border-blue-500 hover:text-blue-600 active:bg-blue_t-200 active:border-blue-500 active:text-blue-600";
 const iconFillClass = "fill-blue-500";
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5337,7 +5340,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           onClick
         }), {
           default: withCtx(() => [
-            __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
+            __props.loading ? (openBlock(), createBlock(_sfc_main$G, {
               key: 0,
               size: __props.size === "sm" ? "18px" : "24px",
               color: "inherit"
@@ -5346,7 +5349,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               class: normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              createVNode(_sfc_main$N, {
+              createVNode(_sfc_main$O, {
                 class: normalizeClass(iconFillClass),
                 name: __props.icon,
                 size: __props.iconSize
@@ -5356,7 +5359,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$q);
+      ], 10, _hoisted_1$r);
     };
   }
 });
@@ -5678,8 +5681,8 @@ function useViewportBreakpoint() {
     breakpoints
   };
 }
-const _hoisted_1$p = ["title"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["title"];
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "FdsBreakpointIndicator",
   props: {
     popoverClass: {}
@@ -5718,7 +5721,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           class: "px-2 py-1 rounded text-xs bg-white bg-opacity-20 text-black hover:bg-opacity-30 cursor-pointer",
           title: `${unref(windowWidth)}px`,
           onClick: toggleBreakpointList
-        }, toDisplayString(unref(currentBreakpoint)), 9, _hoisted_1$p),
+        }, toDisplayString(unref(currentBreakpoint)), 9, _hoisted_1$q),
         showBreakpointList.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["absolute bottom-full left-0 mb-2 rounded-lg shadow-lg p-2 text-xs font-mono whitespace-nowrap z-10", __props.popoverClass])
@@ -5798,9 +5801,9 @@ function useDevModePoEditor() {
     setI18nKeysVisibility
   };
 }
-const _hoisted_1$o = ["for"];
+const _hoisted_1$p = ["for"];
 const _hoisted_2$j = ["value", "disabled", "required"];
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5968,14 +5971,14 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(props.label), 1)
             ], 64)) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true)
-        ], 16, _hoisted_1$o)
+        ], 16, _hoisted_1$p)
       ], 2);
     };
   }
 });
-const _hoisted_1$n = ["for"];
+const _hoisted_1$o = ["for"];
 const _hoisted_2$i = ["value", "checked", "disabled", "required"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6106,7 +6109,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(props.label), 1)
             ], 64)) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true)
-        ], 16, _hoisted_1$n)
+        ], 16, _hoisted_1$o)
       ], 2);
     };
   }
@@ -6123,7 +6126,7 @@ function classValueToString(value) {
   }
   return String(value);
 }
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6154,7 +6157,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = {
+const _hoisted_1$n = {
   key: 0,
   class: "absolute bottom-full right-0 mb-3 z-60 flex min-w-54 flex-col font-normal"
 };
@@ -6170,7 +6173,7 @@ const _hoisted_5$d = {
 };
 const _hoisted_6$9 = { key: 2 };
 const OVERLAY_OPEN_KEY = "devModeOverlayOpen";
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "FdsDevModeOverlay",
   props: {
     environment: { default: null },
@@ -6237,11 +6240,11 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       () => checkToggles.value.length > 0 || radioToggles.value.length > 0 || buttonToggles.value.length > 0 || canToggleI18nKeys.value || showLocaleSwitcher.value
     );
     return (_ctx, _cache) => {
-      return hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
         isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
           createElementVNode("div", _hoisted_3$h, [
             createElementVNode("div", null, [
-              unref(canToggleI18nKeys) ? (openBlock(), createBlock(_sfc_main$y, {
+              unref(canToggleI18nKeys) ? (openBlock(), createBlock(_sfc_main$z, {
                 key: 0,
                 checked: unref(showingTranslationKeys),
                 onChange: unref(setI18nKeysVisibility),
@@ -6253,7 +6256,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["checked", "onChange"])) : createCommentVNode("", true),
               (openBlock(true), createElementBlock(Fragment, null, renderList(checkToggles.value, (toggle) => {
-                return openBlock(), createBlock(_sfc_main$y, {
+                return openBlock(), createBlock(_sfc_main$z, {
                   key: `${toggle.key}-${toggle.checked}`,
                   checked: toggle.checked,
                   class: "mb-0!",
@@ -6268,7 +6271,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ]),
             radioToggles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$f, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(radioToggles.value, (toggle) => {
-                return openBlock(), createBlock(_sfc_main$x, {
+                return openBlock(), createBlock(_sfc_main$y, {
                   key: `${toggle.key}-${toggle.checked}`,
                   name: toggle.group,
                   value: toggle.value,
@@ -6285,7 +6288,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             buttonToggles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(buttonToggles.value, (toggle) => {
-                return openBlock(), createBlock(_sfc_main$E, {
+                return openBlock(), createBlock(_sfc_main$F, {
                   key: toggle.key,
                   size: "sm",
                   block: "",
@@ -6296,7 +6299,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true),
             showLocaleSwitcher.value ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(localeOptions.value, (localeCode) => {
-                return openBlock(), createBlock(_sfc_main$x, {
+                return openBlock(), createBlock(_sfc_main$y, {
                   key: localeCode,
                   name: "fds-dev-mode-locale",
                   value: localeCode,
@@ -6320,13 +6323,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value),
             class: "flex w-full cursor-pointer justify-between gap-2 px-3 py-2 active:bg-gray-100"
           }, [
-            createVNode(_sfc_main$w, { class: "mb-0!" }, {
+            createVNode(_sfc_main$x, { class: "mb-0!" }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(t)("FdsDevMode.overlay.quickSettings")), 1)
               ]),
               _: 1
             }),
-            createVNode(_sfc_main$N, {
+            createVNode(_sfc_main$O, {
               name: isOpen.value ? "arrowUp" : "arrowDown",
               size: 20,
               class: "fill-gray-700"
@@ -6337,10 +6340,60 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = { class: "flex justify-between mb-4" };
+const FOCUSABLE_SELECTOR = [
+  "a[href]:not([disabled])",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+const isVisible = (el) => !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+const getFocusableElements = (container) => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+  (el) => el.tabIndex >= 0 && !el.hasAttribute("disabled") && isVisible(el)
+);
+function useFocusTrap() {
+  let cleanup = null;
+  const deactivate = () => {
+    cleanup?.();
+    cleanup = null;
+  };
+  const activate = (getContainer) => {
+    deactivate();
+    nextTick(() => {
+      const container = getContainer();
+      if (!container) return;
+      const focusable = getFocusableElements(container);
+      if (focusable.length > 0) {
+        focusable[0].focus();
+      }
+      const handleTabKey = (e) => {
+        if (e.key !== "Tab") return;
+        const current = getFocusableElements(container);
+        if (current.length === 0) return;
+        const first = current[0];
+        const last = current[current.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          last.focus();
+          e.preventDefault();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          first.focus();
+          e.preventDefault();
+        }
+      };
+      container.addEventListener("keydown", handleTabKey, true);
+      cleanup = () => {
+        container.removeEventListener("keydown", handleTabKey, true);
+      };
+    });
+  };
+  onBeforeUnmount(deactivate);
+  return { activate, deactivate };
+}
+const _hoisted_1$m = { class: "flex justify-between mb-4" };
 const _hoisted_2$g = { class: "flex items-center gap-2" };
 const _hoisted_3$g = { class: "mb-0-last-child" };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "FdsModal",
   props: {
     open: { type: Boolean, default: false },
@@ -6362,8 +6415,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const isOpen = ref(props.open);
-    let cleanupFocusTrap = null;
     const previouslyFocusedElement = ref(null);
+    const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap();
     const hasFooterSlot = useHasSlot("modal-footer");
     const { t } = useFdsI18n();
     const modalInnerRef = ref(null);
@@ -6459,39 +6512,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         handleClose();
       }
     };
-    const getTabList = (modal) => modal.querySelectorAll(
-      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
-    );
-    const trapFocus = () => {
-      if (!isOpen.value) return;
-      nextTick(() => {
-        const modal = document.querySelector(".fds-modal-inner");
-        if (!modal) return;
-        const tabList = getTabList(modal);
-        if (tabList.length > 0) {
-          tabList[0].focus();
-        }
-        const handleTabKey = (e) => {
-          if (e.key !== "Tab") return;
-          const currentTabList = getTabList(modal);
-          if (currentTabList.length === 0) return;
-          const firstFocusableEl = currentTabList[0];
-          const lastFocusableEl = currentTabList[currentTabList.length - 1];
-          const isTabOrderReversed = e.shiftKey;
-          if (isTabOrderReversed && document.activeElement === firstFocusableEl) {
-            lastFocusableEl.focus();
-            e.preventDefault();
-          } else if (!isTabOrderReversed && document.activeElement === lastFocusableEl) {
-            firstFocusableEl.focus();
-            e.preventDefault();
-          }
-        };
-        modal.addEventListener("keydown", handleTabKey, true);
-        cleanupFocusTrap = () => {
-          modal.removeEventListener("keydown", handleTabKey, true);
-        };
-      });
-    };
     watch(
       () => props.open,
       (newValue) => {
@@ -6502,14 +6522,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           if (props.lockScroll) {
             setHtmlOverflow("hidden");
           }
-          trapFocus();
+          activateFocusTrap(() => modalInnerRef.value);
         } else {
           setHtmlOverflow("auto");
           resetDragResize();
-          if (cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
-          }
+          deactivateFocusTrap();
           nextTick(() => {
             if (previouslyFocusedElement.value) {
               previouslyFocusedElement.value.focus();
@@ -6527,16 +6544,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         if (props.lockScroll) {
           setHtmlOverflow("hidden");
         }
-        trapFocus();
+        activateFocusTrap(() => modalInnerRef.value);
       }
     });
     onBeforeUnmount(() => {
       document.removeEventListener("keydown", handleKeyDown, true);
       cleanupDragResize();
       setHtmlOverflow("auto");
-      if (cleanupFocusTrap) {
-        cleanupFocusTrap();
-      }
+      deactivateFocusTrap();
     });
     const modalAttrs = computed(() => {
       const attrs = {};
@@ -6569,9 +6584,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             createElementVNode("div", {
               class: normalizeClass(__props.resizable ? "overflow-auto flex-1 min-h-0" : "")
             }, [
-              createElementVNode("div", _hoisted_1$l, [
+              createElementVNode("div", _hoisted_1$m, [
                 createElementVNode("div", _hoisted_2$g, [
-                  iconName.value ? (openBlock(), createBlock(_sfc_main$N, {
+                  iconName.value ? (openBlock(), createBlock(_sfc_main$O, {
                     key: 0,
                     name: iconName.value,
                     size: 24,
@@ -6582,7 +6597,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(headerTitleClasses.value)
                   }, toDisplayString(__props.heading), 3)
                 ]),
-                !__props.strict ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
+                !__props.strict ? (openBlock(), createBlock(_sfc_main$N, mergeProps({
                   key: 0,
                   icon: "cross",
                   size: 28,
@@ -9844,7 +9859,7 @@ try {
   globalThis.IMask = IMask;
 } catch {
 }
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -9875,7 +9890,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = ["for", "id"];
+const _hoisted_1$l = ["for", "id"];
 const _hoisted_2$f = { class: "relative" };
 const _hoisted_3$f = ["type", "required", "disabled", "tabindex", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "autocomplete", "placeholder", "pattern", "searchIcon"];
 const _hoisted_4$e = {
@@ -9883,7 +9898,7 @@ const _hoisted_4$e = {
   class: "text-red-700 font-bold mt-1"
 };
 const inputPaddingClasses = "px-3 py-[calc(0.75rem-1px)]";
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -10183,8 +10198,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               for: inputId.value,
               id: labelId.value,
               class: ["block font-bold text-gray-900 cursor-pointer", { "mb-0": props.meta, "mb-1": !props.meta }]
-            }, labelAttrs.value), toDisplayString(props.label), 17, _hoisted_1$k)) : createCommentVNode("", true),
-            props.meta ? (openBlock(), createBlock(_sfc_main$t, {
+            }, labelAttrs.value), toDisplayString(props.label), 17, _hoisted_1$l)) : createCommentVNode("", true),
+            props.meta ? (openBlock(), createBlock(_sfc_main$u, {
               key: 1,
               id: metaId.value,
               class: normalizeClass({ "mb-1": !props.labelLeft })
@@ -10229,7 +10244,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 class: normalizeClass(rightIconsContainerClasses.value)
               }, [
-                showDateIcon.value ? (openBlock(), createBlock(_sfc_main$M, {
+                showDateIcon.value ? (openBlock(), createBlock(_sfc_main$N, {
                   key: 0,
                   "aria-label": dateButtonLabel.value,
                   onClick: onDateIconClick,
@@ -10237,29 +10252,29 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                   size: 28,
                   class: "fill-blue-500"
                 }, null, 8, ["aria-label"])) : createCommentVNode("", true),
-                isInvalid.value ? (openBlock(), createBlock(_sfc_main$N, {
+                isInvalid.value ? (openBlock(), createBlock(_sfc_main$O, {
                   key: 1,
                   name: "alert",
                   class: "fill-red-700"
                 })) : createCommentVNode("", true),
-                isValid2.value ? (openBlock(), createBlock(_sfc_main$N, {
+                isValid2.value ? (openBlock(), createBlock(_sfc_main$O, {
                   key: 2,
                   name: "bigSuccess"
                 })) : createCommentVNode("", true),
-                props.searchIcon ? (openBlock(), createBlock(_sfc_main$N, {
+                props.searchIcon ? (openBlock(), createBlock(_sfc_main$O, {
                   key: 3,
                   name: "search",
                   size: 24,
                   class: "fill-blue-500"
                 })) : createCommentVNode("", true),
-                showClearButton.value ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
+                showClearButton.value ? (openBlock(), createBlock(_sfc_main$N, mergeProps({
                   key: 4,
                   icon: "cross"
                 }, { "aria-label": clearButtonLabel.value }, {
                   onClick: onClear,
                   size: 30
                 }), null, 16)) : createCommentVNode("", true),
-                showPasswordToggle.value ? (openBlock(), createBlock(_sfc_main$E, {
+                showPasswordToggle.value ? (openBlock(), createBlock(_sfc_main$F, {
                   key: 5,
                   icon: showPassword.value ? "viewOff" : "viewOn",
                   text: showPassword.value ? passwordButtonHideLabel.value : passwordButtonShowLabel.value,
@@ -10279,7 +10294,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "FdsTabs",
   props: {
     block: { type: Boolean, default: false },
@@ -10312,7 +10327,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -10427,7 +10442,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = { class: "space-y-6" };
+const _hoisted_1$k = { class: "space-y-6" };
 const _hoisted_2$e = {
   key: 0,
   class: "text-sm text-gray-600"
@@ -10526,7 +10541,7 @@ const _hoisted_59 = {
   class: "mt-2"
 };
 const _hoisted_60 = { class: "mt-4 flex justify-end gap-3" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "FdsDevModeStorage",
   props: {
     open: { type: Boolean, default: false },
@@ -10699,7 +10714,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       loadStorageEntries();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         open: isOpen.value,
         heading: "DevTools",
         size: "xl",
@@ -10709,31 +10724,31 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         onClose: _cache[11] || (_cache[11] = () => handleOpenChange(false))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$j, [
-            createVNode(_sfc_main$r, {
+          createElementVNode("div", _hoisted_1$k, [
+            createVNode(_sfc_main$s, {
               variant: "secondary",
               class: "flex-wrap overflow-visible! *:w-auto!"
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$q, {
+                createVNode(_sfc_main$r, {
                   label: unref(t)("FdsDevModeStorage.tabs.localStorage"),
                   active: activeTab.value === "local",
                   as: "button",
                   onClick: _cache[0] || (_cache[0] = ($event) => activeTab.value = "local")
                 }, null, 8, ["label", "active"]),
-                createVNode(_sfc_main$q, {
+                createVNode(_sfc_main$r, {
                   label: unref(t)("FdsDevModeStorage.tabs.sessionStorage"),
                   active: activeTab.value === "session",
                   as: "button",
                   onClick: _cache[1] || (_cache[1] = ($event) => activeTab.value = "session")
                 }, null, 8, ["label", "active"]),
-                createVNode(_sfc_main$q, {
+                createVNode(_sfc_main$r, {
                   label: unref(t)("FdsDevModeStorage.tabs.cookies"),
                   active: activeTab.value === "cookies",
                   as: "button",
                   onClick: _cache[2] || (_cache[2] = ($event) => activeTab.value = "cookies")
                 }, null, 8, ["label", "active"]),
-                createVNode(_sfc_main$q, {
+                createVNode(_sfc_main$r, {
                   label: unref(t)("FdsDevModeStorage.tabs.actions"),
                   active: activeTab.value === "actions",
                   as: "button",
@@ -10742,7 +10757,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            activeTab.value === "local" ? (openBlock(), createBlock(_sfc_main$H, {
+            activeTab.value === "local" ? (openBlock(), createBlock(_sfc_main$I, {
               key: 0,
               heading: unref(t)("FdsDevModeStorage.tabs.localStorage"),
               icon: "information",
@@ -10796,12 +10811,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   localEditKey.value ? (openBlock(), createElementBlock("div", _hoisted_18, [
-                    createVNode(_sfc_main$A, {
+                    createVNode(_sfc_main$B, {
                       text: unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteLocalEntry
                     }, null, 8, ["text"]),
-                    createVNode(_sfc_main$B, {
+                    createVNode(_sfc_main$C, {
                       text: unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveLocalEntry
@@ -10810,7 +10825,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "session" ? (openBlock(), createBlock(_sfc_main$H, {
+            }, 8, ["heading"])) : activeTab.value === "session" ? (openBlock(), createBlock(_sfc_main$I, {
               key: 1,
               heading: unref(t)("FdsDevModeStorage.tabs.sessionStorage"),
               icon: "information",
@@ -10864,12 +10879,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   sessionEditKey.value ? (openBlock(), createElementBlock("div", _hoisted_35, [
-                    createVNode(_sfc_main$A, {
+                    createVNode(_sfc_main$B, {
                       text: unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteSessionEntry
                     }, null, 8, ["text"]),
-                    createVNode(_sfc_main$B, {
+                    createVNode(_sfc_main$C, {
                       text: unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveSessionEntry
@@ -10878,7 +10893,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "cookies" ? (openBlock(), createBlock(_sfc_main$H, {
+            }, 8, ["heading"])) : activeTab.value === "cookies" ? (openBlock(), createBlock(_sfc_main$I, {
               key: 2,
               heading: unref(t)("FdsDevModeStorage.tabs.cookies"),
               icon: "information",
@@ -10932,12 +10947,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   cookieEditKey.value ? (openBlock(), createElementBlock("div", _hoisted_52, [
-                    createVNode(_sfc_main$A, {
+                    createVNode(_sfc_main$B, {
                       text: unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteCookieEntry
                     }, null, 8, ["text"]),
-                    createVNode(_sfc_main$B, {
+                    createVNode(_sfc_main$C, {
                       text: unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveCookieEntry
@@ -10946,7 +10961,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "actions" ? (openBlock(), createBlock(_sfc_main$H, {
+            }, 8, ["heading"])) : activeTab.value === "actions" ? (openBlock(), createBlock(_sfc_main$I, {
               key: 3,
               heading: unref(t)("FdsDevModeStorage.tabs.actions"),
               icon: "information",
@@ -10964,14 +10979,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                           createElementVNode("div", _hoisted_57, toDisplayString(action.label), 1),
                           action.description ? (openBlock(), createElementBlock("div", _hoisted_58, toDisplayString(action.description), 1)) : createCommentVNode("", true)
                         ]),
-                        createVNode(_sfc_main$A, {
+                        createVNode(_sfc_main$B, {
                           text: action.label,
                           size: "sm",
                           onClick: ($event) => runAction(index, action)
                         }, null, 8, ["text", "onClick"])
                       ]),
                       action.input ? (openBlock(), createElementBlock("div", _hoisted_59, [
-                        createVNode(_sfc_main$s, {
+                        createVNode(_sfc_main$t, {
                           type: action.input.type ?? "text",
                           modelValue: getActionInputValue(index, action.input.defaultValue),
                           placeholder: action.input.placeholder,
@@ -10985,11 +11000,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["heading"])) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_60, [
-              createVNode(_sfc_main$A, {
+              createVNode(_sfc_main$B, {
                 text: unref(t)("FdsDevModeStorage.actions.refresh"),
                 onClick: refreshStorageEntries
               }, null, 8, ["text"]),
-              createVNode(_sfc_main$B, {
+              createVNode(_sfc_main$C, {
                 text: unref(t)("FdsDevModeStorage.actions.close"),
                 onClick: _cache[10] || (_cache[10] = ($event) => handleOpenChange(false))
               }, null, 8, ["text"])
@@ -11001,11 +11016,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = { class: "relative px-2 py-1" };
+const _hoisted_1$j = { class: "relative px-2 py-1" };
 const _hoisted_2$d = { class: "flex flex-col sm:flex-row items-center gap-2 sm:gap-1" };
 const _hoisted_3$d = { class: "flex items-center gap-1" };
 const _hoisted_4$c = { class: "flex items-center gap-1" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "FdsDevMode",
   props: /* @__PURE__ */ mergeModels({
     environment: { default: null },
@@ -11167,8 +11182,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           onMousedown: _cache[1] || (_cache[1] = //@ts-ignore
           (...args) => unref(onDragStart) && unref(onDragStart)(...args))
         }, [
-          createElementVNode("div", _hoisted_1$i, [
-            unref(isDevMode) ? (openBlock(), createBlock(_sfc_main$v, {
+          createElementVNode("div", _hoisted_1$j, [
+            unref(isDevMode) ? (openBlock(), createBlock(_sfc_main$w, {
               key: 0,
               environment: __props.environment,
               toggles: overlayToggles.value,
@@ -11178,7 +11193,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             }, null, 8, ["environment", "toggles"])) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_2$d, [
               createElementVNode("div", _hoisted_3$d, [
-                createVNode(_sfc_main$z, { "popover-class": envBannerClasses.value }, null, 8, ["popover-class"]),
+                createVNode(_sfc_main$A, { "popover-class": envBannerClasses.value }, null, 8, ["popover-class"]),
                 createElementVNode("span", null, toDisplayString(unref(environmentText)), 1)
               ]),
               createElementVNode("div", _hoisted_4$c, [
@@ -11187,13 +11202,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                   (...args) => unref(toggleDevMode) && unref(toggleDevMode)(...args)),
                   class: "py-1 px-2 rounded text-xs font-bold bg-white bg-opacity-20 text-black hover:bg-opacity-30 min-w-[120px] cursor-pointer"
                 }, toDisplayString(devModeButtonText.value), 1),
-                createVNode(_sfc_main$M, {
+                createVNode(_sfc_main$N, {
                   icon: "settings",
                   size: 24,
                   class: normalizeClass(envBannerFillColor.value),
                   onClick: openStorageModal
                 }, null, 8, ["class"]),
-                createVNode(_sfc_main$M, {
+                createVNode(_sfc_main$N, {
                   onClick: handleEnvBanner,
                   icon: "cross",
                   size: 24,
@@ -11203,7 +11218,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             ])
           ])
         ], 38)) : createCommentVNode("", true),
-        createVNode(_sfc_main$p, {
+        createVNode(_sfc_main$q, {
           open: isStorageModalOpen.value,
           "onUpdate:open": _cache[2] || (_cache[2] = ($event) => isStorageModalOpen.value = $event),
           customActions: __props.customActions
@@ -11212,8 +11227,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "flex justify-between gap-6 w-full" };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = { class: "flex justify-between gap-6 w-full" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "FdsExitModal",
   props: {
     showExitConfirmModal: {},
@@ -11228,7 +11243,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const props = __props;
     const isOpen = computed(() => props.showExitConfirmModal.value);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         heading: props.heading,
         size: "sm",
         open: isOpen.value,
@@ -11236,13 +11251,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         onClose: props.cancelExit
       }, {
         "modal-footer": withCtx(() => [
-          createElementVNode("div", _hoisted_1$h, [
-            createVNode(_sfc_main$A, {
+          createElementVNode("div", _hoisted_1$i, [
+            createVNode(_sfc_main$B, {
               text: props.stayText,
               onClick: props.cancelExit,
               block: ""
             }, null, 8, ["text", "onClick"]),
-            createVNode(_sfc_main$A, {
+            createVNode(_sfc_main$B, {
               text: props.leaveText,
               onClick: props.confirmExit,
               block: ""
@@ -11257,6 +11272,196 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$h = { class: "flex items-center gap-2 min-w-0" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "FdsDrawer",
+  props: {
+    open: { type: Boolean, default: false },
+    heading: { default: "" },
+    size: { default: "md" },
+    strict: { type: Boolean, default: false },
+    lockScroll: { type: Boolean, default: false },
+    info: { default: void 0 },
+    dataTestid: { default: void 0 },
+    onClose: {}
+  },
+  emits: ["close", "update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = ref(props.open);
+    const drawerInnerRef = ref(null);
+    const previouslyFocusedElement = ref(null);
+    const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap();
+    const { t } = useFdsI18n();
+    const drawerOuterClasses = computed(() => ["fixed top-0 left-0 w-full h-full z-100"]);
+    const drawerInnerClasses = computed(() => [
+      "bg-white shadow-lg z-[99999] overflow-hidden flex flex-col",
+      // Mobile: bottom sheet
+      "fixed bottom-0 left-0 right-0 max-h-[90vh] rounded-t-lg",
+      // Desktop: right panel
+      "md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:max-h-none md:rounded-none md:w-full",
+      {
+        "md:max-w-[320px]": props.size === "sm",
+        "md:max-w-[400px]": props.size === "md",
+        "md:max-w-[480px]": props.size === "lg",
+        "md:max-w-[588px]": props.size === "xl"
+      }
+    ]);
+    const headerClasses = computed(() => ["shrink-0 flex justify-between bg-white p-6", "rounded-t-lg md:rounded-none"]);
+    const contentClasses = computed(() => ["flex-1 min-h-0 overflow-auto px-6 pb-6 mb-0-last-child"]);
+    const headerTitleClasses = computed(() => ["m-0"]);
+    const iconName = computed(() => {
+      if (props.info === "valid") return "check";
+      if (props.info === "invalid" || props.info === "warning") return "alert";
+      return null;
+    });
+    const iconClasses = computed(() => [
+      {
+        "fill-green-600": props.info === "valid",
+        "fill-red-600": props.info === "invalid",
+        "fill-yellow-600": props.info === "warning"
+      }
+    ]);
+    const closeLabel = computed(() => t("FdsDrawer.closeDrawer"));
+    const setHtmlOverflow = (value) => {
+      if (typeof document === "undefined") return;
+      const htmlEl = document.documentElement;
+      if (htmlEl) {
+        htmlEl.style.overflow = value;
+      }
+    };
+    const handleBackdropClick = () => {
+      handleClose();
+    };
+    const restoreFocus = () => {
+      if (previouslyFocusedElement.value) {
+        previouslyFocusedElement.value.focus();
+        previouslyFocusedElement.value = null;
+      }
+    };
+    const handleClose = () => {
+      if (props.strict) {
+        return;
+      }
+      isOpen.value = false;
+      setHtmlOverflow("auto");
+      emit("close");
+      emit("update:open", false);
+    };
+    const handleKeyDown = (e) => {
+      if (isOpen.value && e.code === "Escape") {
+        handleClose();
+      }
+    };
+    watch(
+      () => props.open,
+      (newValue) => {
+        isOpen.value = newValue;
+        if (newValue) {
+          previouslyFocusedElement.value = document.activeElement;
+          if (props.lockScroll) {
+            setHtmlOverflow("hidden");
+          }
+          activateFocusTrap(() => drawerInnerRef.value);
+        } else {
+          setHtmlOverflow("auto");
+          deactivateFocusTrap();
+        }
+      }
+    );
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeyDown, true);
+      if (props.open) {
+        previouslyFocusedElement.value = document.activeElement;
+        if (props.lockScroll) {
+          setHtmlOverflow("hidden");
+        }
+        activateFocusTrap(() => drawerInnerRef.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      setHtmlOverflow("auto");
+      deactivateFocusTrap();
+    });
+    const drawerAttrs = computed(() => {
+      const attrs = {};
+      if (props.dataTestid) {
+        attrs["data-testid"] = props.dataTestid;
+      }
+      return attrs;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(Transition, {
+          name: "fds-drawer",
+          duration: { enter: 280, leave: 180 },
+          onAfterLeave: restoreFocus
+        }, {
+          default: withCtx(() => [
+            isOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              onClick: handleBackdropClick,
+              class: normalizeClass(drawerOuterClasses.value)
+            }, [
+              _cache[2] || (_cache[2] = createElementVNode("div", { class: "fds-drawer-backdrop fixed top-0 left-0 w-full h-full bg-black/34 z-99" }, null, -1)),
+              createElementVNode("div", mergeProps({
+                ref_key: "drawerInnerRef",
+                ref: drawerInnerRef,
+                class: ["fds-drawer-inner", drawerInnerClasses.value],
+                role: "dialog",
+                "aria-modal": "true"
+              }, drawerAttrs.value, {
+                onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                }, ["stop"]))
+              }), [
+                createElementVNode("div", {
+                  class: normalizeClass(headerClasses.value)
+                }, [
+                  createElementVNode("div", _hoisted_1$h, [
+                    iconName.value ? (openBlock(), createBlock(_sfc_main$O, {
+                      key: 0,
+                      name: iconName.value,
+                      size: 24,
+                      class: normalizeClass(iconClasses.value)
+                    }, null, 8, ["name", "class"])) : createCommentVNode("", true),
+                    createElementVNode("h3", {
+                      tabindex: "-1",
+                      class: normalizeClass(headerTitleClasses.value)
+                    }, toDisplayString(__props.heading), 3)
+                  ]),
+                  createElementVNode("div", null, [
+                    !__props.strict ? (openBlock(), createBlock(_sfc_main$N, mergeProps({
+                      key: 0,
+                      icon: "cross",
+                      size: 28,
+                      onClick: _cache[0] || (_cache[0] = ($event) => handleClose())
+                    }, { "aria-label": closeLabel.value }, { class: "ml-4 shrink-0" }), null, 16)) : createCommentVNode("", true)
+                  ])
+                ], 2),
+                createElementVNode("div", {
+                  class: normalizeClass(contentClasses.value)
+                }, [
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                ], 2)
+              ], 16)
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const FdsDrawer = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-afc45d1a"]]);
 function debounce(fn, delayMs) {
   let timeoutId;
   const debounced = (...args) => {
@@ -11372,11 +11577,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         id: inputId.value
       }, rootAttrs.value), [
         createElementVNode("div", _hoisted_2$c, [
-          __props.loading && loadingIndicator.value === "start" ? (openBlock(), createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "start" ? (openBlock(), createBlock(_sfc_main$G, {
             key: 0,
             size: "32px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({ key: 1 }, { "aria-disabled": __props.current === 1 }, {
+          })) : (openBlock(), createBlock(_sfc_main$N, mergeProps({ key: 1 }, { "aria-disabled": __props.current === 1 }, {
             type: "button",
             "aria-label": firstPageLabel.value,
             icon: "first",
@@ -11385,11 +11590,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             class: [{ "hidden!": __props.current === 1 }, "w-8 h-8 sm:w-12 sm:h-12"],
             onClick: _cache[0] || (_cache[0] = ($event) => handlePagination("start"))
           }), null, 16, ["aria-label", "disabled", "class"])),
-          __props.loading && loadingIndicator.value === "prev" ? (openBlock(), createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "prev" ? (openBlock(), createBlock(_sfc_main$G, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({ key: 3 }, { "aria-disabled": __props.current === 1 }, {
+          })) : (openBlock(), createBlock(_sfc_main$N, mergeProps({ key: 3 }, { "aria-disabled": __props.current === 1 }, {
             type: "button",
             "aria-label": prevPageLabel.value,
             icon: "arrowLeft",
@@ -11400,14 +11605,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           }), null, 16, ["aria-label", "disabled", "class"]))
         ]),
         createElementVNode("div", _hoisted_3$c, [
-          __props.loading && loadingIndicator.value === "input" ? (openBlock(), createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "input" ? (openBlock(), createBlock(_sfc_main$G, {
             key: 0,
             size: "24px",
             color: "blue",
             label: loadingLabel.value,
             "label-position": "right"
           }, null, 8, ["label"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createVNode(_sfc_main$s, {
+            createVNode(_sfc_main$t, {
               style: { "text-align": "center" },
               value: inputValue.value,
               type: "text",
@@ -11421,11 +11626,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           ], 64))
         ]),
         createElementVNode("div", _hoisted_5$b, [
-          __props.loading && loadingIndicator.value === "next" ? (openBlock(), createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "next" ? (openBlock(), createBlock(_sfc_main$G, {
             key: 0,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({
+          })) : (openBlock(), createBlock(_sfc_main$N, mergeProps({
             key: 1,
             type: "button",
             "aria-label": nextPageLabel.value,
@@ -11436,11 +11641,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             class: [{ "hidden!": __props.current === __props.max }, "w-8 h-8 sm:w-12 sm:h-12"],
             onClick: _cache[2] || (_cache[2] = ($event) => handlePagination("next"))
           }), null, 16, ["aria-label", "disabled", "class"])),
-          __props.loading && loadingIndicator.value === "end" ? (openBlock(), createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "end" ? (openBlock(), createBlock(_sfc_main$G, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$M, mergeProps({
+          })) : (openBlock(), createBlock(_sfc_main$N, mergeProps({
             key: 3,
             type: "button",
             "aria-label": lastPageLabel.value,
@@ -11602,13 +11807,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         }, { ...popoverAttrs.value, popover: "auto" }), [
           __props.label ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createElementVNode("div", _hoisted_4$a, [
-              createVNode(_sfc_main$w, { class: "mb-0! min-w-0 grow balance-text whitespace-normal" }, {
+              createVNode(_sfc_main$x, { class: "mb-0! min-w-0 grow balance-text whitespace-normal" }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(__props.label), 1)
                 ]),
                 _: 1
               }),
-              createVNode(_sfc_main$M, {
+              createVNode(_sfc_main$N, {
                 icon: "cross",
                 size: 28,
                 "aria-label": __props.closeAriaLabel,
@@ -11626,7 +11831,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(__props.body), 1)
               ])
             ]),
-            createVNode(_sfc_main$M, {
+            createVNode(_sfc_main$N, {
               icon: "cross",
               size: 28,
               "aria-label": __props.closeAriaLabel,
@@ -12124,7 +12329,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_1$e, [
           !singleItemName.value.length ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
             createElementVNode("div", _hoisted_3$a, [
-              createVNode(_sfc_main$s, mergeProps({
+              createVNode(_sfc_main$t, mergeProps({
                 ref_key: "inputComponentRef",
                 ref: inputComponentRef,
                 label: __props.label,
@@ -12158,7 +12363,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(listWrapperStyle.value)
           }, [
             __props.loading ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
-              createVNode(_sfc_main$F, {
+              createVNode(_sfc_main$G, {
                 color: "blue",
                 size: "48px"
               })
@@ -13233,7 +13438,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_1$d, [
           createElementVNode("div", _hoisted_2$9, [
             createElementVNode("div", _hoisted_3$9, [
-              createVNode(_sfc_main$s, mergeProps({
+              createVNode(_sfc_main$t, mergeProps({
                 ref_key: "inputComponentRef",
                 ref: inputComponentRef,
                 label: __props.label,
@@ -13269,19 +13474,19 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([headerClasses.value, "flex items-center justify-between gap-3 min-h-[53px]"])
               }, [
                 createElementVNode("div", _hoisted_4$8, [
-                  createVNode(_sfc_main$t, null, {
+                  createVNode(_sfc_main$u, null, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(searchTerm.value && searchTerm.value.length ? `${totalMatchingItems.value} ${__props.searchContext.linkWord} ${totalCount.value} ${__props.searchContext.context}` : `${totalCount.value} ${__props.searchContext.context}`), 1)
                     ]),
                     _: 1
                   }),
-                  isSearching.value ? (openBlock(), createBlock(_sfc_main$F, {
+                  isSearching.value ? (openBlock(), createBlock(_sfc_main$G, {
                     key: 0,
                     color: "blue",
                     size: "20px"
                   })) : createCommentVNode("", true)
                 ]),
-                __props.multiple && __props.showSelectedToggle && selectedItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$y, {
+                __props.multiple && __props.showSelectedToggle && selectedItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$z, {
                   key: 0,
                   label: `${__props.selectedToggleLabel} (${selectedItems.value.length})`,
                   checked: showSelectedOnly.value,
@@ -13316,7 +13521,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       class: normalizeClass([labelClasses.value, listItemClasses.value]),
                       style: normalizeStyle(unref(optionPaddingStyle)(item))
                     }, [
-                      __props.multiple ? (openBlock(), createBlock(_sfc_main$y, {
+                      __props.multiple ? (openBlock(), createBlock(_sfc_main$z, {
                         key: 0,
                         id: `search-select-radio-${index}`,
                         name: `search-select-checkbox-group-${inputId}`,
@@ -13333,7 +13538,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                           }, null, 8, _hoisted_8$3)
                         ]),
                         _: 2
-                      }, 1032, ["id", "name", "checked", "onChange"])) : (openBlock(), createBlock(_sfc_main$x, {
+                      }, 1032, ["id", "name", "checked", "onChange"])) : (openBlock(), createBlock(_sfc_main$y, {
                         key: 1,
                         id: `search-select-radio-${index}`,
                         name: "search-select-radio-group",
@@ -13368,7 +13573,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => !__props.loadingMore && handleLoadMore(), ["prevent"]), ["space"]))
                     ]
                   }, [
-                    createVNode(_sfc_main$M, {
+                    createVNode(_sfc_main$N, {
                       icon: "sync",
                       loading: __props.loadingMore,
                       "aria-label": __props.loadingMore ? resolvedLoadingMoreLabel.value : resolvedLoadMoreLabel.value,
@@ -13382,7 +13587,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             ], 64)) : (openBlock(), createElementBlock("ul", _hoisted_12, [
               createElementVNode("li", _hoisted_13, [
                 !isSearching.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(__props.noResultPrompt), 1)) : createCommentVNode("", true),
-                isSearching.value ? (openBlock(), createBlock(_sfc_main$F, {
+                isSearching.value ? (openBlock(), createBlock(_sfc_main$G, {
                   key: 1,
                   color: "blue",
                   size: "20px"
@@ -14128,7 +14333,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           class: normalizeClass("pt-2 pb-2")
         }, [
           createElementVNode("div", _hoisted_1$c, [
-            hasChildrenNodes.value ? (openBlock(), createBlock(_sfc_main$M, mergeProps({
+            hasChildrenNodes.value ? (openBlock(), createBlock(_sfc_main$N, mergeProps({
               key: 0,
               onClick: _cache[0] || (_cache[0] = ($event) => unref(treeState)?.toggleExpandNode(props.nodeId))
             }, { "aria-label": props.title ? childrenToggleAriaLabel(props.title) : void 0 }, {
@@ -14141,7 +14346,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               style: normalizeStyle({ minWidth: `${__props.indentation}px` })
             }, null, 4)) : createCommentVNode("", true),
             createElementVNode("div", _hoisted_2$8, [
-              createVNode(_sfc_main$y, {
+              createVNode(_sfc_main$z, {
                 id: `checkbox-${props.nodeId}`,
                 checked: nodeIsSelected.value,
                 indeterminate: nodeIsIndeterminate.value,
@@ -14160,7 +14365,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               }, 8, ["id", "checked", "indeterminate"])
             ]),
             shouldShowPopoverActions.value ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
-              createVNode(_sfc_main$M, mergeProps({
+              createVNode(_sfc_main$N, mergeProps({
                 ref_key: "triggerRef",
                 ref: triggerRef,
                 icon: "more",
@@ -14208,7 +14413,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                             },
                             class: "cursor-pointer"
                           }, [
-                            createVNode(_sfc_main$x, {
+                            createVNode(_sfc_main$y, {
                               modelValue: selectedOption.value,
                               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedOption.value = $event),
                               id: `tree-popover-${props.nodeId}-${option.value}`,
@@ -14220,7 +14425,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                           ], 8, _hoisted_8$2);
                         }), 64))
                       ]),
-                      createVNode(_sfc_main$M, mergeProps({
+                      createVNode(_sfc_main$N, mergeProps({
                         icon: "cross",
                         id: "tree-popover-close-button",
                         size: 24,
@@ -14370,7 +14575,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           ref: searchContainerRef,
           class: "pb-4"
         }, [
-          createVNode(_sfc_main$s, {
+          createVNode(_sfc_main$t, {
             value: unref(treeState)?.searchTerm?.value ?? "",
             onInput: _cache[0] || (_cache[0] = ($event) => unref(treeState)?.setSearchTerm($event.target.value)),
             class: "w-full",
@@ -14387,7 +14592,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             props.searchCountTemplate && unref(treeState)?.searchTerm?.value && String(unref(treeState)?.searchTerm?.value || "").trim().length >= (unref(treeState)?.triggerLength ?? 1) ? (openBlock(), createElementBlock("h2", _hoisted_2$7, toDisplayString(props.searchCountTemplate.replace("[[filteredNodes]]", unref(treeState)?.filteredMatchCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1)) : (openBlock(), createElementBlock("h2", _hoisted_3$7, toDisplayString(props.searchCountTemplateUnfiltered?.replace("[[totalNodes]]", totalNodeCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1))
           ])) : createCommentVNode("", true)
         ], 512)) : createCommentVNode("", true),
-        unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$K, {
+        unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$L, {
           key: 1,
           class: "mt-4"
         }, {
@@ -14395,7 +14600,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(props.searchResultNoMatchesTitle), 1)
           ]),
           default: withCtx(() => [
-            createVNode(_sfc_main$t, null, {
+            createVNode(_sfc_main$u, null, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(props.searchResultNoMatchesBody), 1)
               ]),
@@ -14487,7 +14692,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", mergeProps({ class: "block mb-4" }, rootAttrs.value), [
         hasContent.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("span", null, toDisplayString(truncatedText.value), 1),
-          isTruncated.value ? (openBlock(), createBlock(_sfc_main$E, {
+          isTruncated.value ? (openBlock(), createBlock(_sfc_main$F, {
             key: 0,
             icon: isOpen.value ? "arrowUp" : "arrowDown",
             iconPos: "right",
@@ -16142,12 +16347,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         createElementVNode("span", {
           class: normalizeClass(weekdayLabelClasses.value)
         }, [
-          __props.isToday ? (openBlock(), createBlock(_sfc_main$t, { key: 0 }, {
+          __props.isToday ? (openBlock(), createBlock(_sfc_main$u, { key: 0 }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("FdsWeekCalendar.today")), 1)
             ]),
             _: 1
-          })) : (openBlock(), createBlock(_sfc_main$t, { key: 1 }, {
+          })) : (openBlock(), createBlock(_sfc_main$u, { key: 1 }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(weekdayLabel.value), 1)
             ]),
@@ -16307,13 +16512,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_3$6, [
             createElementVNode("p", _hoisted_4$6, toDisplayString(weekText.value), 1),
             createElementVNode("div", _hoisted_5$6, [
-              createVNode(_sfc_main$M, {
+              createVNode(_sfc_main$N, {
                 icon: "arrowLeft",
                 disabled: disableLastWeekInteraction.value,
                 "aria-label": unref(t)("FdsWeekCalendar.previousWeek"),
                 onClick: decrementWeek
               }, null, 8, ["disabled", "aria-label"]),
-              createVNode(_sfc_main$M, {
+              createVNode(_sfc_main$N, {
                 icon: "arrowRight",
                 disabled: disableNextWeekInteraction.value,
                 "aria-label": unref(t)("FdsWeekCalendar.nextWeek"),
@@ -16349,7 +16554,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
           ]),
           __props.loading?.loading ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
-            createVNode(_sfc_main$F),
+            createVNode(_sfc_main$G),
             createElementVNode("p", _hoisted_8$1, toDisplayString(__props.loading.label), 1)
           ])) : createCommentVNode("", true)
         ])
@@ -16830,7 +17035,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                       createElementVNode("span", {
                         class: normalizeClass(["relative mb-6 flex flex-col items-center text-blue-600 font-bold justify-center transition-all duration-200 ease-in-out rounded-full w-[44px] h-[44px] bg-white-solid", setStepClasses(entry.index)])
                       }, [
-                        entry.index >= internalCompletedTo.value + 1 ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(entry.index + 1), 1)) : (openBlock(), createBlock(_sfc_main$N, {
+                        entry.index >= internalCompletedTo.value + 1 ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(entry.index + 1), 1)) : (openBlock(), createBlock(_sfc_main$O, {
                           key: 1,
                           name: "checkmark",
                           size: 24
@@ -19018,7 +19223,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             "aria-hidden": "true",
             onMousedown: withModifiers(onArrowPointerDown, ["prevent"])
           }, [
-            createVNode(_sfc_main$N, {
+            createVNode(_sfc_main$O, {
               name: "arrowDown",
               size: 24,
               class: normalizeClass(arrowClasses.value)
@@ -19060,7 +19265,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                   createElementVNode("span", _hoisted_10, "(" + toDisplayString(unref(t)("common.plus")) + toDisplayString(option.countryCode) + ")", 1)
                 ]),
                 createElementVNode("span", _hoisted_11, [
-                  option.value === country.value ? (openBlock(), createBlock(_sfc_main$N, {
+                  option.value === country.value ? (openBlock(), createBlock(_sfc_main$O, {
                     key: 0,
                     name: "check",
                     size: 24,
@@ -19297,7 +19502,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["mb-0! shrink-0", __props.selectClass ?? ""]),
             onNoCountryResults
           }, null, 8, ["modelValue", "items", "valid", "disabled", "ariaLabel", "data-testid", "class"]),
-          createVNode(_sfc_main$s, mergeProps({
+          createVNode(_sfc_main$t, mergeProps({
             "model-value": unref(nationalNumber),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => nationalNumber.value = $event ?? ""),
             mask: phoneMask.value,
@@ -19765,7 +19970,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createVNode(_sfc_main$s, mergeProps({
+        createVNode(_sfc_main$t, mergeProps({
           "model-value": modelValue.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event ?? ""),
           mask: ssnMask.value,
@@ -19912,7 +20117,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             [vModelSelect, internalValue.value]
           ]),
           createElementVNode("div", _hoisted_6, [
-            createVNode(_sfc_main$N, {
+            createVNode(_sfc_main$O, {
               name: "arrowDown",
               size: 24,
               class: normalizeClass({
@@ -20079,12 +20284,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(validationIconClasses.value)
           }, [
-            isInvalid.value ? (openBlock(), createBlock(_sfc_main$N, {
+            isInvalid.value ? (openBlock(), createBlock(_sfc_main$O, {
               key: 0,
               name: "alert",
               class: "fill-red-600"
             })) : createCommentVNode("", true),
-            isValid2.value ? (openBlock(), createBlock(_sfc_main$N, {
+            isValid2.value ? (openBlock(), createBlock(_sfc_main$O, {
               key: 1,
               name: "bigSuccess"
             })) : createCommentVNode("", true)
@@ -20175,7 +20380,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           unref(hasSlot) ? (openBlock(), createElementBlock("span", _hoisted_2, [
             renderSlot(_ctx.$slots, "default")
           ])) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.heading), 1)),
-          createVNode(_sfc_main$N, {
+          createVNode(_sfc_main$O, {
             name: iconName.value,
             size: "24px",
             class: "fill-blue-500 ml-1"
@@ -20407,7 +20612,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: wrapperClasses.value }, rootAttrs.value), [
-        __props.loading ? (openBlock(), createBlock(_sfc_main$F, {
+        __props.loading ? (openBlock(), createBlock(_sfc_main$G, {
           key: 0,
           size: "24px",
           color: "blue",
@@ -20616,6 +20821,302 @@ const teardownRouterLinkInterceptor = () => {
   }
   globalRouter = null;
 };
+const isArr = (v) => Array.isArray(v);
+const clone = (v) => isArr(v) ? [...v] : v;
+const cloneRecord = (defaults2) => {
+  const out = {};
+  for (const k in defaults2) {
+    out[k] = clone(defaults2[k]);
+  }
+  return out;
+};
+const isDefault = (v, def) => {
+  if (isArr(def)) return isArr(v) && v.length === 0;
+  return v === def;
+};
+const parseValue = (key, query, def) => {
+  const raw = query[key];
+  if (isArr(def)) {
+    if (raw === void 0 || raw === null) return [];
+    if (Array.isArray(raw)) return raw.filter((x) => x != null).map(String);
+    return [String(raw)];
+  }
+  if (typeof def === "boolean") return raw === "true";
+  if (typeof def === "number") {
+    if (raw === void 0 || raw === null || raw === "") return def;
+    const n = Number(Array.isArray(raw) ? raw[0] : raw);
+    return Number.isFinite(n) ? n : def;
+  }
+  if (raw === void 0 || raw === null) return def;
+  return String(Array.isArray(raw) ? raw[0] : raw);
+};
+const serializeValue = (v, def) => {
+  if (isDefault(v, def)) return void 0;
+  if (isArr(def)) return isArr(v) && v.length > 0 ? v : void 0;
+  if (typeof def === "boolean") return v === true ? "true" : void 0;
+  if (typeof def === "number") return String(v);
+  if (typeof v === "string" && v !== "") return v;
+  return void 0;
+};
+const normalizeQuery = (q) => {
+  const out = {};
+  for (const k of Object.keys(q).sort()) {
+    const v = q[k];
+    if (v === void 0 || v === null) continue;
+    if (Array.isArray(v)) {
+      const items = v.filter((x) => x != null).map(String);
+      if (items.length) out[k] = items;
+    } else {
+      out[k] = String(v);
+    }
+  }
+  return out;
+};
+const queriesEqual = (a, b) => JSON.stringify(normalizeQuery(a)) === JSON.stringify(normalizeQuery(b));
+const statesEqual = (a, b) => {
+  for (const k in a) {
+    const av = a[k];
+    const bv = b[k];
+    if (isArr(av)) {
+      if (!isArr(bv) || av.length !== bv.length || av.some((x, i) => x !== bv[i])) return false;
+    } else if (av !== bv) {
+      return false;
+    }
+  }
+  return true;
+};
+const applyInPlace = (target, source, defaults2) => {
+  for (const k in defaults2) {
+    const next = source[k];
+    const current = target[k];
+    if (isArr(defaults2[k])) {
+      const na = next;
+      const ca = current;
+      if (na.length !== ca.length || na.some((x, i) => x !== ca[i])) {
+        ca.splice(0, ca.length, ...na);
+      }
+    } else if (current !== next) {
+      target[k] = next;
+    }
+  }
+};
+const copyPlain = (source, target, keys) => {
+  for (const k of keys) {
+    const v = source[k];
+    if (isArr(v)) {
+      const ca = target[k];
+      if (Array.isArray(ca)) {
+        ca.splice(0, ca.length, ...v);
+      } else {
+        target[k] = [...v];
+      }
+    } else {
+      target[k] = clone(v);
+    }
+  }
+};
+const SEARCH_KEY = "_search";
+const PAGE_KEY = "_page";
+const SORT_KEY = "_sort";
+function useRouteFilters(schema) {
+  const route = useRoute();
+  const router = useRouter();
+  const filterDefaults = schema.filter;
+  const draftDefaults = schema.draft ?? {};
+  const sortDefault = schema.sort ?? {};
+  const searchDefault = schema.search ?? "";
+  const pageDefault = schema.page ?? 0;
+  const draftKeys = Object.keys(draftDefaults);
+  const schemaQueryKeys = /* @__PURE__ */ new Set([...Object.keys(filterDefaults), ...draftKeys, SEARCH_KEY, PAGE_KEY, SORT_KEY]);
+  const filterState = reactive(cloneRecord(filterDefaults));
+  const draftState = reactive(cloneRecord(draftDefaults));
+  const searchRef = ref(searchDefault);
+  const pageRef = ref(pageDefault);
+  const defaultSortValue = sortDefault.field && sortDefault.dir ? `${sortDefault.dir === "desc" ? "-" : "+"}${sortDefault.field}` : "";
+  const sortValueRef = ref(defaultSortValue);
+  const filterRaw = filterState;
+  const draftRaw = draftState;
+  const draftKeyStrings = draftKeys;
+  let syncingFromRoute = false;
+  let syncingToRoute = false;
+  const readFromRoute = () => {
+    const q = route.query;
+    const parsed = cloneRecord(filterDefaults);
+    for (const k in filterDefaults) {
+      parsed[k] = parseValue(k, q, filterDefaults[k]);
+    }
+    if (!statesEqual(filterState, parsed)) {
+      applyInPlace(filterState, parsed, filterDefaults);
+    }
+    const rawSearch = q[SEARCH_KEY];
+    const nextSearch = rawSearch !== void 0 && rawSearch !== null ? String(Array.isArray(rawSearch) ? rawSearch[0] : rawSearch) : searchDefault;
+    if (searchRef.value !== nextSearch) searchRef.value = nextSearch;
+    const rawPage = q[PAGE_KEY];
+    const nextPage = rawPage !== void 0 && rawPage !== null ? Number(Array.isArray(rawPage) ? rawPage[0] : rawPage) || pageDefault : pageDefault;
+    if (pageRef.value !== nextPage) pageRef.value = nextPage;
+    const rawSort = q[SORT_KEY];
+    const nextSort = typeof rawSort === "string" && rawSort !== "" ? rawSort : defaultSortValue;
+    if (sortValueRef.value !== nextSort) sortValueRef.value = nextSort;
+    if (draftKeys.length > 0) {
+      copyPlain(
+        filterState,
+        draftState,
+        draftKeys
+      );
+    }
+  };
+  readFromRoute();
+  const buildQuery = () => {
+    const q = {};
+    for (const k in route.query) {
+      if (!schemaQueryKeys.has(k)) q[k] = route.query[k];
+    }
+    for (const k in filterDefaults) {
+      const s = serializeValue(filterState[k], filterDefaults[k]);
+      if (s !== void 0) q[k] = s;
+    }
+    if (searchRef.value !== searchDefault && searchRef.value !== "") {
+      q[SEARCH_KEY] = searchRef.value;
+    }
+    if (pageRef.value !== pageDefault) {
+      q[PAGE_KEY] = String(pageRef.value);
+    }
+    if (sortValueRef.value !== "" && sortValueRef.value !== defaultSortValue) {
+      q[SORT_KEY] = sortValueRef.value;
+    } else if (defaultSortValue !== "" && sortValueRef.value === defaultSortValue) ;
+    return q;
+  };
+  const pushRoute = () => {
+    if (syncingFromRoute || syncingToRoute) return;
+    const next = buildQuery();
+    if (queriesEqual(route.query, next)) return;
+    syncingToRoute = true;
+    return router.replace({ query: next }).then(() => void 0).finally(() => {
+      syncingToRoute = false;
+    });
+  };
+  watch(
+    () => route.query,
+    () => {
+      if (syncingToRoute) return;
+      syncingFromRoute = true;
+      readFromRoute();
+      syncingFromRoute = false;
+    }
+  );
+  watch(
+    filterState,
+    () => {
+      pushRoute();
+    },
+    { deep: true }
+  );
+  watch(searchRef, () => {
+    pushRoute();
+  });
+  watch(pageRef, () => {
+    pushRoute();
+  });
+  watch(sortValueRef, () => {
+    pushRoute();
+  });
+  const sort = {
+    get value() {
+      return sortValueRef.value;
+    },
+    get field() {
+      return sortValueRef.value.length > 1 ? sortValueRef.value.slice(1) : "";
+    },
+    get dir() {
+      if (!sortValueRef.value) return "";
+      return sortValueRef.value[0] === "-" ? "desc" : "asc";
+    },
+    toggle(field) {
+      if (sortValueRef.value === `-${field}`) {
+        sortValueRef.value = `+${field}`;
+      } else if (sortValueRef.value === `+${field}`) {
+        sortValueRef.value = "";
+      } else {
+        sortValueRef.value = `-${field}`;
+      }
+    },
+    set(field, dir) {
+      sortValueRef.value = `${dir === "desc" ? "-" : "+"}${field}`;
+    },
+    clear() {
+      sortValueRef.value = "";
+    },
+    iconFor(field) {
+      if (sortValueRef.value.slice(1) !== field) return "sort";
+      return sortValueRef.value[0] === "-" ? "descending" : "ascending";
+    }
+  };
+  const draft = {
+    state: draftState,
+    open() {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings);
+    },
+    apply() {
+      copyPlain(draftRaw, filterRaw, draftKeyStrings);
+    },
+    cancel() {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings);
+    },
+    reset() {
+      const defClone = cloneRecord(draftDefaults);
+      copyPlain(defClone, draftRaw, draftKeyStrings);
+    }
+  };
+  const reset = async () => {
+    syncingFromRoute = true;
+    applyInPlace(filterState, cloneRecord(filterDefaults), filterDefaults);
+    searchRef.value = searchDefault;
+    pageRef.value = pageDefault;
+    sortValueRef.value = defaultSortValue;
+    if (draftKeys.length > 0) {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings);
+    }
+    syncingFromRoute = false;
+    await pushRoute();
+  };
+  const clear = async () => {
+    syncingToRoute = true;
+    applyInPlace(filterState, cloneRecord(filterDefaults), filterDefaults);
+    searchRef.value = searchDefault;
+    pageRef.value = pageDefault;
+    sortValueRef.value = defaultSortValue;
+    if (draftKeys.length > 0) {
+      copyPlain(filterRaw, draftRaw, draftKeyStrings);
+    }
+    await router.replace({ query: {} }).finally(() => {
+      syncingToRoute = false;
+    });
+  };
+  return {
+    filter: filterState,
+    draft,
+    sort,
+    search: searchRef,
+    page: pageRef,
+    reset,
+    clear
+  };
+}
+const parseRouteFiltersFromQuery = (query, defaults2) => {
+  const out = cloneRecord(defaults2);
+  for (const k in defaults2) {
+    out[k] = parseValue(k, query, defaults2[k]);
+  }
+  return out;
+};
+const serializeRouteFiltersToQuery = (state, defaults2) => {
+  const q = {};
+  for (const k in defaults2) {
+    const s = serializeValue(state[k], defaults2[k]);
+    if (s !== void 0) q[k] = s;
+  }
+  return q;
+};
 function useRouteScrollPositions(currentRoute) {
   const scrollPositions = ref({});
   watch(
@@ -20697,33 +21198,34 @@ const FdsVueCorePlugin = {
       app.provide(FDS_VUE_CORE_I18N_KEY, options.i18n);
     }
     app.component("FdsTreeView", _sfc_main$h);
-    app.component("FdsButtonPrimary", _sfc_main$B);
-    app.component("FdsButtonSecondary", _sfc_main$A);
-    app.component("FdsButtonMinor", _sfc_main$E);
-    app.component("FdsButtonIcon", _sfc_main$M);
-    app.component("FdsButtonCopy", _sfc_main$D);
-    app.component("FdsButtonDownload", _sfc_main$C);
-    app.component("FdsDevMode", _sfc_main$o);
-    app.component("FdsIcon", _sfc_main$N);
-    app.component("FdsSpinner", _sfc_main$F);
-    app.component("FdsRadio", _sfc_main$x);
-    app.component("FdsCheckbox", _sfc_main$y);
+    app.component("FdsButtonPrimary", _sfc_main$C);
+    app.component("FdsButtonSecondary", _sfc_main$B);
+    app.component("FdsButtonMinor", _sfc_main$F);
+    app.component("FdsButtonIcon", _sfc_main$N);
+    app.component("FdsButtonCopy", _sfc_main$E);
+    app.component("FdsButtonDownload", _sfc_main$D);
+    app.component("FdsDevMode", _sfc_main$p);
+    app.component("FdsIcon", _sfc_main$O);
+    app.component("FdsSpinner", _sfc_main$G);
+    app.component("FdsRadio", _sfc_main$y);
+    app.component("FdsCheckbox", _sfc_main$z);
     app.component("FdsTextarea", _sfc_main$7);
     app.component("FdsPhonenumber", _sfc_main$a);
     app.component("FdsSsn", _sfc_main$9);
     app.component("FdsSelect", _sfc_main$8);
     app.component("FdsTable", _sfc_main$6);
     app.component("FdsTableHead", _sfc_main$5);
-    app.component("FdsInput", _sfc_main$s);
-    app.component("FdsBlockContent", _sfc_main$K);
-    app.component("FdsBlockInfo", _sfc_main$H);
-    app.component("FdsBlockAlert", _sfc_main$L);
-    app.component("FdsBlockExpander", _sfc_main$I);
-    app.component("FdsBlockLink", _sfc_main$G);
-    app.component("FdsSticker", _sfc_main$J);
-    app.component("FdsTabs", _sfc_main$r);
-    app.component("FdsTabsItem", _sfc_main$q);
-    app.component("FdsModal", _sfc_main$u);
+    app.component("FdsInput", _sfc_main$t);
+    app.component("FdsBlockContent", _sfc_main$L);
+    app.component("FdsBlockInfo", _sfc_main$I);
+    app.component("FdsBlockAlert", _sfc_main$M);
+    app.component("FdsBlockExpander", _sfc_main$J);
+    app.component("FdsBlockLink", _sfc_main$H);
+    app.component("FdsSticker", _sfc_main$K);
+    app.component("FdsTabs", _sfc_main$s);
+    app.component("FdsTabsItem", _sfc_main$r);
+    app.component("FdsDrawer", FdsDrawer);
+    app.component("FdsModal", _sfc_main$v);
     app.component("FdsPagination", _sfc_main$m);
     app.component("FdsPopover", _sfc_main$l);
     app.component("FdsSearchSelect", _sfc_main$k);
@@ -20735,53 +21237,54 @@ const FdsVueCorePlugin = {
     app.component("FdsH2", _sfc_main$3);
     app.component("FdsH3", _sfc_main$2);
     app.component("FdsHr", _sfc_main$1);
-    app.component("FdsLabel", _sfc_main$w);
+    app.component("FdsLabel", _sfc_main$x);
     app.component("FdsLead", _sfc_main$d);
-    app.component("FdsMeta", _sfc_main$t);
+    app.component("FdsMeta", _sfc_main$u);
     app.component("FdsListHeading", _sfc_main);
   }
 };
 export {
   FDS_VUE_CORE_I18N_KEY,
-  _sfc_main$L as FdsBlockAlert,
-  _sfc_main$K as FdsBlockContent,
-  _sfc_main$I as FdsBlockExpander,
-  _sfc_main$H as FdsBlockInfo,
-  _sfc_main$G as FdsBlockLink,
-  _sfc_main$D as FdsButtonCopy,
-  _sfc_main$C as FdsButtonDownload,
-  _sfc_main$M as FdsButtonIcon,
-  _sfc_main$E as FdsButtonMinor,
-  _sfc_main$B as FdsButtonPrimary,
-  _sfc_main$A as FdsButtonSecondary,
-  _sfc_main$y as FdsCheckbox,
-  _sfc_main$o as FdsDevMode,
-  _sfc_main$n as FdsExitModal,
+  _sfc_main$M as FdsBlockAlert,
+  _sfc_main$L as FdsBlockContent,
+  _sfc_main$J as FdsBlockExpander,
+  _sfc_main$I as FdsBlockInfo,
+  _sfc_main$H as FdsBlockLink,
+  _sfc_main$E as FdsButtonCopy,
+  _sfc_main$D as FdsButtonDownload,
+  _sfc_main$N as FdsButtonIcon,
+  _sfc_main$F as FdsButtonMinor,
+  _sfc_main$C as FdsButtonPrimary,
+  _sfc_main$B as FdsButtonSecondary,
+  _sfc_main$z as FdsCheckbox,
+  _sfc_main$p as FdsDevMode,
+  FdsDrawer,
+  _sfc_main$o as FdsExitModal,
   _sfc_main$4 as FdsH1,
   _sfc_main$3 as FdsH2,
   _sfc_main$2 as FdsH3,
   _sfc_main$1 as FdsHr,
-  _sfc_main$N as FdsIcon,
-  _sfc_main$s as FdsInput,
-  _sfc_main$w as FdsLabel,
+  _sfc_main$O as FdsIcon,
+  _sfc_main$t as FdsInput,
+  _sfc_main$x as FdsLabel,
   _sfc_main$d as FdsLead,
   _sfc_main as FdsListHeading,
-  _sfc_main$t as FdsMeta,
-  _sfc_main$u as FdsModal,
+  _sfc_main$u as FdsMeta,
+  _sfc_main$v as FdsModal,
   _sfc_main$m as FdsPagination,
   _sfc_main$a as FdsPhonenumber,
   _sfc_main$l as FdsPopover,
-  _sfc_main$x as FdsRadio,
+  _sfc_main$y as FdsRadio,
   _sfc_main$k as FdsSearchSelect,
   _sfc_main$j as FdsSearchSelectPro,
   _sfc_main$8 as FdsSelect,
-  _sfc_main$F as FdsSpinner,
+  _sfc_main$G as FdsSpinner,
   _sfc_main$9 as FdsSsn,
-  _sfc_main$J as FdsSticker,
+  _sfc_main$K as FdsSticker,
   _sfc_main$6 as FdsTable,
   _sfc_main$5 as FdsTableHead,
-  _sfc_main$r as FdsTabs,
-  _sfc_main$q as FdsTabsItem,
+  _sfc_main$s as FdsTabs,
+  _sfc_main$r as FdsTabsItem,
   _sfc_main$7 as FdsTextarea,
   _sfc_main$h as FdsTreeView,
   _sfc_main$g as FdsTruncatedText,
@@ -20810,7 +21313,9 @@ export {
   logoFeelgoodColored,
   logoFeelgoodLight,
   normalizePidSearchValue,
+  parseRouteFiltersFromQuery,
   resolveRouterLinkTarget,
+  serializeRouteFiltersToQuery,
   setupExitConfirmationGuard,
   setupRouterLinkInterceptor,
   shouldBlockNavigation,
@@ -20828,6 +21333,7 @@ export {
   useFileSizeValidation,
   useFileValidation,
   useIsPid,
+  useRouteFilters,
   useRouteScrollPositions,
   useTreeState,
   useViewportBreakpoint,