fds-vue-core 8.3.2 → 8.4.1

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const vueRouter = require("vue-router");
 function useAttrsWithDefaults(props) {
   const attrs = vue.useAttrs();
   return {
@@ -77,6 +78,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",
@@ -152,6 +154,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",
@@ -754,8 +757,8 @@ const icons = {
       </defs>
     </svg>`
 };
-const _hoisted_1$B = ["innerHTML"];
-const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$C = ["innerHTML"];
+const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsIcon",
   props: {
     name: {},
@@ -788,11 +791,11 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("span", vue.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__ */ vue.defineComponent({
+const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsButtonIcon",
   props: {
     icon: {},
@@ -836,12 +839,12 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
         class: buttonClasses.value,
         onClick
       }), [
-        !__props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+        !__props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
           key: 0,
           size: iconSize.value,
           name: __props.icon,
           "aria-hidden": "true"
-        }, null, 8, ["size", "name"])) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+        }, null, 8, ["size", "name"])) : (vue.openBlock(), vue.createBlock(_sfc_main$O, {
           key: 1,
           size: iconSize.value,
           name: "spinner",
@@ -852,7 +855,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.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" };
@@ -860,7 +863,7 @@ const _hoisted_5$h = {
   key: 1,
   class: "fds-block-alert-slot mb-0-last-child"
 };
-const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockAlert",
   props: {
     visible: { type: Boolean, default: true },
@@ -878,7 +881,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     const { t } = useFdsI18n();
     const emit = __emit;
     const isExpanded = vue.ref(props.expanded);
-    const isVisible = vue.ref(props.visible);
+    const isVisible2 = vue.ref(props.visible);
     const expandLabel = vue.computed(() => t("FdsBlockAlert.showMore"));
     const collapseLabel = vue.computed(() => t("FdsBlockAlert.showLess"));
     const closeLabel = vue.computed(() => t("FdsBlockAlert.close"));
@@ -886,7 +889,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     vue.watch(
       () => props.visible,
       (v) => {
-        isVisible.value = v;
+        isVisible2.value = v;
       }
     );
     const alertClasses = vue.computed(() => [
@@ -900,7 +903,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
       ...props.dataTestid && { "data-testid": props.dataTestid }
     }));
     function handleClose() {
-      isVisible.value = false;
+      isVisible2.value = false;
       emit("update:visible", false);
       emit("close");
     }
@@ -909,16 +912,16 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
       emit("toggle");
     }
     return (_ctx, _cache) => {
-      return isVisible.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ key: 0 }, rootAttrs.value, { class: alertClasses.value }), [
+      return isVisible2.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ key: 0 }, rootAttrs.value, { class: alertClasses.value }), [
         vue.createElementVNode("div", null, [
           vue.createElementVNode("div", null, [
             __props.heading ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
               class: vue.normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-2": (isExpanded.value || !__props.collapsable) && vue.unref(hasSlot) }])
             }, [
-              vue.createElementVNode("div", _hoisted_1$A, [
+              vue.createElementVNode("div", _hoisted_1$B, [
                 vue.createElementVNode("div", _hoisted_2$q, [
-                  vue.createVNode(_sfc_main$N, {
+                  vue.createVNode(_sfc_main$O, {
                     name: "alert",
                     size: 24,
                     class: "fill-yellow-700"
@@ -927,13 +930,13 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
                 vue.createElementVNode("span", _hoisted_3$l, vue.toDisplayString(__props.heading), 1)
               ]),
               vue.createElementVNode("div", _hoisted_4$j, [
-                __props.closeable ? (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({
+                __props.closeable ? (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.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)) : vue.createCommentVNode("", true),
-                __props.collapsable ? (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({
+                __props.collapsable ? (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({
                   key: 1,
                   icon: "arrowDown",
                   size: 28,
@@ -956,7 +959,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.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"
@@ -964,7 +967,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__ */ vue.defineComponent({
+const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockContent",
   props: {
     heading: { default: void 0 },
@@ -1021,11 +1024,11 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_5$g, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
-      ], 16, _hoisted_1$z);
+      ], 16, _hoisted_1$A);
     };
   }
 });
-const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSticker",
   props: {
     variant: { default: "blue" },
@@ -1073,7 +1076,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.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"
@@ -1085,7 +1088,7 @@ const _hoisted_5$f = {
   class: "w-full flex mt-2"
 };
 const _hoisted_6$b = ["aria-hidden"];
-const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1157,12 +1160,12 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("span", {
             class: vue.normalizeClass(buttonRowClasses.value)
           }, [
-            vue.createElementVNode("span", _hoisted_1$y, [
+            vue.createElementVNode("span", _hoisted_1$z, [
               vue.createElementVNode("span", {
                 class: vue.normalizeClass(["flex items-center", { "inline-flex items-start": __props.icon }])
               }, [
                 __props.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$o, [
-                  vue.createVNode(_sfc_main$N, {
+                  vue.createVNode(_sfc_main$O, {
                     name: __props.icon,
                     size: 24,
                     class: vue.normalizeClass(["fill-blue-500", [{ "fill-gray-500": __props.disabled }, __props.iconClass]])
@@ -1175,7 +1178,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
                 ])
               ], 2),
               vue.createElementVNode("span", _hoisted_4$h, [
-                __props.stickerText && __props.stickerColor ? (vue.openBlock(), vue.createBlock(_sfc_main$J, {
+                __props.stickerText && __props.stickerColor ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                   key: 0,
                   variant: __props.stickerColor
                 }, {
@@ -1184,7 +1187,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
                   ]),
                   _: 1
                 }, 8, ["variant"])) : vue.createCommentVNode("", true),
-                vue.createVNode(_sfc_main$N, {
+                vue.createVNode(_sfc_main$O, {
                   name: "arrowDown",
                   size: 24,
                   class: vue.normalizeClass(["transition-transform duration-200 fill-blue-500 min-w-6 min-h-6", { "rotate-180": isOpen.value, "fill-gray-500": __props.disabled }])
@@ -1208,7 +1211,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$x = ["id"];
+const _hoisted_1$y = ["id"];
 const _hoisted_2$n = {
   key: 0,
   class: "flex items-start gap-4"
@@ -1233,7 +1236,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__ */ vue.defineComponent({
+const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockInfo",
   props: {
     heading: { default: void 0 },
@@ -1266,7 +1269,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
         class: contentClasses.value
       }, rootAttrs.value), [
         __props.iconSize === "large" && __props.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$n, [
-          vue.createVNode(_sfc_main$N, {
+          vue.createVNode(_sfc_main$O, {
             name: __props.icon,
             size: largeIconSize,
             class: "fill-blue-500"
@@ -1291,7 +1294,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createElementVNode("header", _hoisted_10$4, [
               vue.createElementVNode("div", _hoisted_11$4, [
-                __props.icon && __props.iconSize === "small" ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                __props.icon && __props.iconSize === "small" ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                   key: 0,
                   name: __props.icon,
                   size: smallIconSize,
@@ -1308,16 +1311,16 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
             vue.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__ */ vue.defineComponent({
+const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1430,7 +1433,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["flex w-full flex-1", contentClasses.value])
           }, [
-            __props.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            __props.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: 0,
               name: __props.icon,
               size: 24,
@@ -1449,7 +1452,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(slotWrapperClasses.value)
               }, [
-                vue.createElementVNode("div", _hoisted_1$w, [
+                vue.createElementVNode("div", _hoisted_1$x, [
                   vue.renderSlot(_ctx.$slots, "default")
                 ]),
                 vue.unref(hasStickerSlot) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$m, [
@@ -1458,7 +1461,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
               ], 2)
             ], 2)
           ], 2),
-          __props.variant === "link" ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+          __props.variant === "link" ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             name: "arrowRight",
             size: 24,
@@ -1470,8 +1473,8 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$v = ["aria-label"];
-const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$w = ["aria-label"];
+const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSpinner",
   props: {
     size: { default: "48px" },
@@ -1551,13 +1554,13 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           class: vue.normalizeClass(__props.labelPosition === "bottom" ? "font-bold" : "")
         }, vue.toDisplayString(__props.label), 3)) : vue.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__ */ vue.defineComponent({
+const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -1642,7 +1645,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
           onClick
         }), {
           default: vue.withCtx(() => [
-            __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+            __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
               key: 0,
               class: "mr-2",
               size: "24px",
@@ -1652,7 +1655,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
               class: vue.normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              vue.createVNode(_sfc_main$N, {
+              vue.createVNode(_sfc_main$O, {
                 class: vue.normalizeClass(iconFillClass2.value),
                 name: __props.icon,
                 size: __props.iconSize
@@ -1662,15 +1665,15 @@ const _sfc_main$E = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsButtonCopy",
   props: {
     value: { default: "" },
@@ -1732,10 +1735,10 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return isCopied.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-        vue.createVNode(_sfc_main$N, { name: "bigSuccess" }),
+      return isCopied.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+        vue.createVNode(_sfc_main$O, { name: "bigSuccess" }),
         vue.createElementVNode("span", null, vue.toDisplayString(props.copiedText), 1)
-      ])) : (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+      ])) : (vue.openBlock(), vue.createBlock(_sfc_main$F, {
         key: 1,
         type: "button",
         disabled: props.disabled,
@@ -5026,8 +5029,8 @@ function useDownload() {
     isDownloading
   };
 }
-const _hoisted_1$s = ["disabled", "aria-disabled"];
-const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$t = ["disabled", "aria-disabled"];
+const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsButtonDownload",
   props: {
     loading: { type: Boolean, default: false },
@@ -5128,23 +5131,23 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass(iconOrderClasses.value),
           "aria-hidden": "true"
         }, [
-          vue.createVNode(_sfc_main$N, {
+          vue.createVNode(_sfc_main$O, {
             class: vue.normalizeClass(iconFillClass2.value),
             name: "download",
             size: 24
           }, null, 8, ["class"])
         ], 2),
         vue.createTextVNode(" " + vue.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__ */ vue.defineComponent({
+const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5227,7 +5230,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
           onClick
         }), {
           default: vue.withCtx(() => [
-            __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+            __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
               key: 0,
               size: __props.size === "sm" ? "18px" : "24px",
               color: "inherit"
@@ -5236,7 +5239,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
               class: vue.normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              vue.createVNode(_sfc_main$N, {
+              vue.createVNode(_sfc_main$O, {
                 class: vue.normalizeClass(iconFillClass$1),
                 name: __props.icon,
                 size: __props.iconSize
@@ -5246,16 +5249,16 @@ const _sfc_main$B = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5339,7 +5342,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
           onClick
         }), {
           default: vue.withCtx(() => [
-            __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+            __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
               key: 0,
               size: __props.size === "sm" ? "18px" : "24px",
               color: "inherit"
@@ -5348,7 +5351,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
               class: vue.normalizeClass(iconOrderClasses.value),
               "aria-hidden": "true"
             }, [
-              vue.createVNode(_sfc_main$N, {
+              vue.createVNode(_sfc_main$O, {
                 class: vue.normalizeClass(iconFillClass),
                 name: __props.icon,
                 size: __props.iconSize
@@ -5358,7 +5361,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$q);
+      ], 10, _hoisted_1$r);
     };
   }
 });
@@ -5680,8 +5683,8 @@ function useViewportBreakpoint() {
     breakpoints
   };
 }
-const _hoisted_1$p = ["title"];
-const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$q = ["title"];
+const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBreakpointIndicator",
   props: {
     popoverClass: {}
@@ -5720,7 +5723,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
           class: "px-2 py-1 rounded text-xs bg-white bg-opacity-20 text-black hover:bg-opacity-30 cursor-pointer",
           title: `${vue.unref(windowWidth)}px`,
           onClick: toggleBreakpointList
-        }, vue.toDisplayString(vue.unref(currentBreakpoint)), 9, _hoisted_1$p),
+        }, vue.toDisplayString(vue.unref(currentBreakpoint)), 9, _hoisted_1$q),
         showBreakpointList.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: vue.normalizeClass(["absolute bottom-full left-0 mb-2 rounded-lg shadow-lg p-2 text-xs font-mono whitespace-nowrap z-10", __props.popoverClass])
@@ -5800,9 +5803,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__ */ vue.defineComponent({
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -5970,14 +5973,14 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
               vue.createTextVNode(vue.toDisplayString(props.label), 1)
             ], 64)) : vue.createCommentVNode("", true)
           ], 2)) : vue.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__ */ vue.defineComponent({
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6108,7 +6111,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
               vue.createTextVNode(vue.toDisplayString(props.label), 1)
             ], 64)) : vue.createCommentVNode("", true)
           ], 2)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$n)
+        ], 16, _hoisted_1$o)
       ], 2);
     };
   }
@@ -6125,7 +6128,7 @@ function classValueToString(value) {
   }
   return String(value);
 }
-const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6156,7 +6159,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.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"
 };
@@ -6172,7 +6175,7 @@ const _hoisted_5$d = {
 };
 const _hoisted_6$9 = { key: 2 };
 const OVERLAY_OPEN_KEY = "devModeOverlayOpen";
-const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsDevModeOverlay",
   props: {
     environment: { default: null },
@@ -6239,11 +6242,11 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
       () => checkToggles.value.length > 0 || radioToggles.value.length > 0 || buttonToggles.value.length > 0 || canToggleI18nKeys.value || showLocaleSwitcher.value
     );
     return (_ctx, _cache) => {
-      return hasContent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+      return hasContent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
         isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
           vue.createElementVNode("div", _hoisted_3$h, [
             vue.createElementVNode("div", null, [
-              vue.unref(canToggleI18nKeys) ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+              vue.unref(canToggleI18nKeys) ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
                 key: 0,
                 checked: vue.unref(showingTranslationKeys),
                 onChange: vue.unref(setI18nKeysVisibility),
@@ -6255,7 +6258,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
                 _: 1
               }, 8, ["checked", "onChange"])) : vue.createCommentVNode("", true),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(checkToggles.value, (toggle) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$z, {
                   key: `${toggle.key}-${toggle.checked}`,
                   checked: toggle.checked,
                   class: "mb-0!",
@@ -6270,7 +6273,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             ]),
             radioToggles.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$f, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(radioToggles.value, (toggle) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                   key: `${toggle.key}-${toggle.checked}`,
                   name: toggle.group,
                   value: toggle.value,
@@ -6287,7 +6290,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true),
             buttonToggles.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$d, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttonToggles.value, (toggle) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$F, {
                   key: toggle.key,
                   size: "sm",
                   block: "",
@@ -6298,7 +6301,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true),
             showLocaleSwitcher.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$9, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(localeOptions.value, (localeCode) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                   key: localeCode,
                   name: "fds-dev-mode-locale",
                   value: localeCode,
@@ -6322,13 +6325,13 @@ const _sfc_main$v = /* @__PURE__ */ vue.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"
           }, [
-            vue.createVNode(_sfc_main$w, { class: "mb-0!" }, {
+            vue.createVNode(_sfc_main$x, { class: "mb-0!" }, {
               default: vue.withCtx(() => [
                 vue.createTextVNode(vue.toDisplayString(vue.unref(t)("FdsDevMode.overlay.quickSettings")), 1)
               ]),
               _: 1
             }),
-            vue.createVNode(_sfc_main$N, {
+            vue.createVNode(_sfc_main$O, {
               name: isOpen.value ? "arrowUp" : "arrowDown",
               size: 20,
               class: "fill-gray-700"
@@ -6339,10 +6342,60 @@ const _sfc_main$v = /* @__PURE__ */ vue.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();
+    vue.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);
+      };
+    });
+  };
+  vue.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__ */ vue.defineComponent({
+const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsModal",
   props: {
     open: { type: Boolean, default: false },
@@ -6364,8 +6417,8 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const isOpen = vue.ref(props.open);
-    let cleanupFocusTrap = null;
     const previouslyFocusedElement = vue.ref(null);
+    const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap();
     const hasFooterSlot = useHasSlot("modal-footer");
     const { t } = useFdsI18n();
     const modalInnerRef = vue.ref(null);
@@ -6461,39 +6514,6 @@ const _sfc_main$u = /* @__PURE__ */ vue.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;
-      vue.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);
-        };
-      });
-    };
     vue.watch(
       () => props.open,
       (newValue) => {
@@ -6504,14 +6524,11 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
           if (props.lockScroll) {
             setHtmlOverflow("hidden");
           }
-          trapFocus();
+          activateFocusTrap(() => modalInnerRef.value);
         } else {
           setHtmlOverflow("auto");
           resetDragResize();
-          if (cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
-          }
+          deactivateFocusTrap();
           vue.nextTick(() => {
             if (previouslyFocusedElement.value) {
               previouslyFocusedElement.value.focus();
@@ -6529,16 +6546,14 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         if (props.lockScroll) {
           setHtmlOverflow("hidden");
         }
-        trapFocus();
+        activateFocusTrap(() => modalInnerRef.value);
       }
     });
     vue.onBeforeUnmount(() => {
       document.removeEventListener("keydown", handleKeyDown, true);
       cleanupDragResize();
       setHtmlOverflow("auto");
-      if (cleanupFocusTrap) {
-        cleanupFocusTrap();
-      }
+      deactivateFocusTrap();
     });
     const modalAttrs = vue.computed(() => {
       const attrs = {};
@@ -6571,9 +6586,9 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("div", {
               class: vue.normalizeClass(__props.resizable ? "overflow-auto flex-1 min-h-0" : "")
             }, [
-              vue.createElementVNode("div", _hoisted_1$l, [
+              vue.createElementVNode("div", _hoisted_1$m, [
                 vue.createElementVNode("div", _hoisted_2$g, [
-                  iconName.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                  iconName.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                     key: 0,
                     name: iconName.value,
                     size: 24,
@@ -6584,7 +6599,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(headerTitleClasses.value)
                   }, vue.toDisplayString(__props.heading), 3)
                 ]),
-                !__props.strict ? (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({
+                !__props.strict ? (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({
                   key: 0,
                   icon: "cross",
                   size: 28,
@@ -9846,7 +9861,7 @@ try {
   globalThis.IMask = IMask;
 } catch {
 }
-const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -9877,7 +9892,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.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 = {
@@ -9885,7 +9900,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__ */ vue.defineComponent({
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -10185,8 +10200,8 @@ const _sfc_main$s = /* @__PURE__ */ vue.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), vue.toDisplayString(props.label), 17, _hoisted_1$k)) : vue.createCommentVNode("", true),
-            props.meta ? (vue.openBlock(), vue.createBlock(_sfc_main$t, {
+            }, labelAttrs.value), vue.toDisplayString(props.label), 17, _hoisted_1$l)) : vue.createCommentVNode("", true),
+            props.meta ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
               key: 1,
               id: metaId.value,
               class: vue.normalizeClass({ "mb-1": !props.labelLeft })
@@ -10231,7 +10246,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(rightIconsContainerClasses.value)
               }, [
-                showDateIcon.value ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+                showDateIcon.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
                   key: 0,
                   "aria-label": dateButtonLabel.value,
                   onClick: onDateIconClick,
@@ -10239,29 +10254,29 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
                   size: 28,
                   class: "fill-blue-500"
                 }, null, 8, ["aria-label"])) : vue.createCommentVNode("", true),
-                isInvalid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                isInvalid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                   key: 1,
                   name: "alert",
                   class: "fill-red-700"
                 })) : vue.createCommentVNode("", true),
-                isValid2.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                isValid2.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                   key: 2,
                   name: "bigSuccess"
                 })) : vue.createCommentVNode("", true),
-                props.searchIcon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                props.searchIcon ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                   key: 3,
                   name: "search",
                   size: 24,
                   class: "fill-blue-500"
                 })) : vue.createCommentVNode("", true),
-                showClearButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({
+                showClearButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({
                   key: 4,
                   icon: "cross"
                 }, { "aria-label": clearButtonLabel.value }, {
                   onClick: onClear,
                   size: 30
                 }), null, 16)) : vue.createCommentVNode("", true),
-                showPasswordToggle.value ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                showPasswordToggle.value ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
                   key: 5,
                   icon: showPassword.value ? "viewOff" : "viewOn",
                   text: showPassword.value ? passwordButtonHideLabel.value : passwordButtonShowLabel.value,
@@ -10281,7 +10296,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTabs",
   props: {
     block: { type: Boolean, default: false },
@@ -10314,7 +10329,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -10429,7 +10444,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.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"
@@ -10528,7 +10543,7 @@ const _hoisted_59 = {
   class: "mt-2"
 };
 const _hoisted_60 = { class: "mt-4 flex justify-end gap-3" };
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsDevModeStorage",
   props: {
     open: { type: Boolean, default: false },
@@ -10701,7 +10716,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       loadStorageEntries();
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$u, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$v, {
         open: isOpen.value,
         heading: "DevTools",
         size: "xl",
@@ -10711,31 +10726,31 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
         onClose: _cache[11] || (_cache[11] = () => handleOpenChange(false))
       }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1$j, [
-            vue.createVNode(_sfc_main$r, {
+          vue.createElementVNode("div", _hoisted_1$k, [
+            vue.createVNode(_sfc_main$s, {
               variant: "secondary",
               class: "flex-wrap overflow-visible! *:w-auto!"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$q, {
+                vue.createVNode(_sfc_main$r, {
                   label: vue.unref(t)("FdsDevModeStorage.tabs.localStorage"),
                   active: activeTab.value === "local",
                   as: "button",
                   onClick: _cache[0] || (_cache[0] = ($event) => activeTab.value = "local")
                 }, null, 8, ["label", "active"]),
-                vue.createVNode(_sfc_main$q, {
+                vue.createVNode(_sfc_main$r, {
                   label: vue.unref(t)("FdsDevModeStorage.tabs.sessionStorage"),
                   active: activeTab.value === "session",
                   as: "button",
                   onClick: _cache[1] || (_cache[1] = ($event) => activeTab.value = "session")
                 }, null, 8, ["label", "active"]),
-                vue.createVNode(_sfc_main$q, {
+                vue.createVNode(_sfc_main$r, {
                   label: vue.unref(t)("FdsDevModeStorage.tabs.cookies"),
                   active: activeTab.value === "cookies",
                   as: "button",
                   onClick: _cache[2] || (_cache[2] = ($event) => activeTab.value = "cookies")
                 }, null, 8, ["label", "active"]),
-                vue.createVNode(_sfc_main$q, {
+                vue.createVNode(_sfc_main$r, {
                   label: vue.unref(t)("FdsDevModeStorage.tabs.actions"),
                   active: activeTab.value === "actions",
                   as: "button",
@@ -10744,7 +10759,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
               ]),
               _: 1
             }),
-            activeTab.value === "local" ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
+            activeTab.value === "local" ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
               key: 0,
               heading: vue.unref(t)("FdsDevModeStorage.tabs.localStorage"),
               icon: "information",
@@ -10798,12 +10813,12 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
                     ])
                   ]),
                   localEditKey.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18, [
-                    vue.createVNode(_sfc_main$A, {
+                    vue.createVNode(_sfc_main$B, {
                       text: vue.unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteLocalEntry
                     }, null, 8, ["text"]),
-                    vue.createVNode(_sfc_main$B, {
+                    vue.createVNode(_sfc_main$C, {
                       text: vue.unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveLocalEntry
@@ -10812,7 +10827,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "session" ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
+            }, 8, ["heading"])) : activeTab.value === "session" ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
               key: 1,
               heading: vue.unref(t)("FdsDevModeStorage.tabs.sessionStorage"),
               icon: "information",
@@ -10866,12 +10881,12 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
                     ])
                   ]),
                   sessionEditKey.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_35, [
-                    vue.createVNode(_sfc_main$A, {
+                    vue.createVNode(_sfc_main$B, {
                       text: vue.unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteSessionEntry
                     }, null, 8, ["text"]),
-                    vue.createVNode(_sfc_main$B, {
+                    vue.createVNode(_sfc_main$C, {
                       text: vue.unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveSessionEntry
@@ -10880,7 +10895,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "cookies" ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
+            }, 8, ["heading"])) : activeTab.value === "cookies" ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
               key: 2,
               heading: vue.unref(t)("FdsDevModeStorage.tabs.cookies"),
               icon: "information",
@@ -10934,12 +10949,12 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
                     ])
                   ]),
                   cookieEditKey.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_52, [
-                    vue.createVNode(_sfc_main$A, {
+                    vue.createVNode(_sfc_main$B, {
                       text: vue.unref(t)("FdsDevModeStorage.actions.delete"),
                       size: "sm",
                       onClick: deleteCookieEntry
                     }, null, 8, ["text"]),
-                    vue.createVNode(_sfc_main$B, {
+                    vue.createVNode(_sfc_main$C, {
                       text: vue.unref(t)("FdsDevModeStorage.actions.save"),
                       size: "sm",
                       onClick: saveCookieEntry
@@ -10948,7 +10963,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
                 ])
               ]),
               _: 1
-            }, 8, ["heading"])) : activeTab.value === "actions" ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
+            }, 8, ["heading"])) : activeTab.value === "actions" ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
               key: 3,
               heading: vue.unref(t)("FdsDevModeStorage.tabs.actions"),
               icon: "information",
@@ -10966,14 +10981,14 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
                           vue.createElementVNode("div", _hoisted_57, vue.toDisplayString(action.label), 1),
                           action.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_58, vue.toDisplayString(action.description), 1)) : vue.createCommentVNode("", true)
                         ]),
-                        vue.createVNode(_sfc_main$A, {
+                        vue.createVNode(_sfc_main$B, {
                           text: action.label,
                           size: "sm",
                           onClick: ($event) => runAction(index, action)
                         }, null, 8, ["text", "onClick"])
                       ]),
                       action.input ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_59, [
-                        vue.createVNode(_sfc_main$s, {
+                        vue.createVNode(_sfc_main$t, {
                           type: action.input.type ?? "text",
                           modelValue: getActionInputValue(index, action.input.defaultValue),
                           placeholder: action.input.placeholder,
@@ -10987,11 +11002,11 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
               _: 1
             }, 8, ["heading"])) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", _hoisted_60, [
-              vue.createVNode(_sfc_main$A, {
+              vue.createVNode(_sfc_main$B, {
                 text: vue.unref(t)("FdsDevModeStorage.actions.refresh"),
                 onClick: refreshStorageEntries
               }, null, 8, ["text"]),
-              vue.createVNode(_sfc_main$B, {
+              vue.createVNode(_sfc_main$C, {
                 text: vue.unref(t)("FdsDevModeStorage.actions.close"),
                 onClick: _cache[10] || (_cache[10] = ($event) => handleOpenChange(false))
               }, null, 8, ["text"])
@@ -11003,11 +11018,11 @@ const _sfc_main$p = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsDevMode",
   props: /* @__PURE__ */ vue.mergeModels({
     environment: { default: null },
@@ -11169,8 +11184,8 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
           onMousedown: _cache[1] || (_cache[1] = //@ts-ignore
           (...args) => vue.unref(onDragStart) && vue.unref(onDragStart)(...args))
         }, [
-          vue.createElementVNode("div", _hoisted_1$i, [
-            vue.unref(isDevMode) ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+          vue.createElementVNode("div", _hoisted_1$j, [
+            vue.unref(isDevMode) ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
               key: 0,
               environment: __props.environment,
               toggles: overlayToggles.value,
@@ -11180,7 +11195,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["environment", "toggles"])) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", _hoisted_2$d, [
               vue.createElementVNode("div", _hoisted_3$d, [
-                vue.createVNode(_sfc_main$z, { "popover-class": envBannerClasses.value }, null, 8, ["popover-class"]),
+                vue.createVNode(_sfc_main$A, { "popover-class": envBannerClasses.value }, null, 8, ["popover-class"]),
                 vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(environmentText)), 1)
               ]),
               vue.createElementVNode("div", _hoisted_4$c, [
@@ -11189,13 +11204,13 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
                   (...args) => vue.unref(toggleDevMode) && vue.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"
                 }, vue.toDisplayString(devModeButtonText.value), 1),
-                vue.createVNode(_sfc_main$M, {
+                vue.createVNode(_sfc_main$N, {
                   icon: "settings",
                   size: 24,
                   class: vue.normalizeClass(envBannerFillColor.value),
                   onClick: openStorageModal
                 }, null, 8, ["class"]),
-                vue.createVNode(_sfc_main$M, {
+                vue.createVNode(_sfc_main$N, {
                   onClick: handleEnvBanner,
                   icon: "cross",
                   size: 24,
@@ -11205,7 +11220,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
             ])
           ])
         ], 38)) : vue.createCommentVNode("", true),
-        vue.createVNode(_sfc_main$p, {
+        vue.createVNode(_sfc_main$q, {
           open: isStorageModalOpen.value,
           "onUpdate:open": _cache[2] || (_cache[2] = ($event) => isStorageModalOpen.value = $event),
           customActions: __props.customActions
@@ -11214,8 +11229,8 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "flex justify-between gap-6 w-full" };
-const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$i = { class: "flex justify-between gap-6 w-full" };
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsExitModal",
   props: {
     showExitConfirmModal: {},
@@ -11230,7 +11245,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const isOpen = vue.computed(() => props.showExitConfirmModal.value);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$u, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$v, {
         heading: props.heading,
         size: "sm",
         open: isOpen.value,
@@ -11238,13 +11253,13 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         onClose: props.cancelExit
       }, {
         "modal-footer": vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1$h, [
-            vue.createVNode(_sfc_main$A, {
+          vue.createElementVNode("div", _hoisted_1$i, [
+            vue.createVNode(_sfc_main$B, {
               text: props.stayText,
               onClick: props.cancelExit,
               block: ""
             }, null, 8, ["text", "onClick"]),
-            vue.createVNode(_sfc_main$A, {
+            vue.createVNode(_sfc_main$B, {
               text: props.leaveText,
               onClick: props.confirmExit,
               block: ""
@@ -11259,6 +11274,196 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1$h = { class: "flex items-center gap-2 min-w-0" };
+const _sfc_main$n = /* @__PURE__ */ vue.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 = vue.ref(props.open);
+    const drawerInnerRef = vue.ref(null);
+    const previouslyFocusedElement = vue.ref(null);
+    const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap();
+    const { t } = useFdsI18n();
+    const drawerOuterClasses = vue.computed(() => ["fixed top-0 left-0 w-full h-full z-100"]);
+    const drawerInnerClasses = vue.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 = vue.computed(() => ["shrink-0 flex justify-between bg-white p-6", "rounded-t-lg md:rounded-none"]);
+    const contentClasses = vue.computed(() => ["flex-1 min-h-0 overflow-auto px-6 pb-6 mb-0-last-child"]);
+    const headerTitleClasses = vue.computed(() => ["m-0"]);
+    const iconName = vue.computed(() => {
+      if (props.info === "valid") return "check";
+      if (props.info === "invalid" || props.info === "warning") return "alert";
+      return null;
+    });
+    const iconClasses = vue.computed(() => [
+      {
+        "fill-green-600": props.info === "valid",
+        "fill-red-600": props.info === "invalid",
+        "fill-yellow-600": props.info === "warning"
+      }
+    ]);
+    const closeLabel = vue.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();
+      }
+    };
+    vue.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();
+        }
+      }
+    );
+    vue.onMounted(() => {
+      document.addEventListener("keydown", handleKeyDown, true);
+      if (props.open) {
+        previouslyFocusedElement.value = document.activeElement;
+        if (props.lockScroll) {
+          setHtmlOverflow("hidden");
+        }
+        activateFocusTrap(() => drawerInnerRef.value);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      setHtmlOverflow("auto");
+      deactivateFocusTrap();
+    });
+    const drawerAttrs = vue.computed(() => {
+      const attrs = {};
+      if (props.dataTestid) {
+        attrs["data-testid"] = props.dataTestid;
+      }
+      return attrs;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+        vue.createVNode(vue.Transition, {
+          name: "fds-drawer",
+          duration: { enter: 280, leave: 180 },
+          onAfterLeave: restoreFocus
+        }, {
+          default: vue.withCtx(() => [
+            isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              onClick: handleBackdropClick,
+              class: vue.normalizeClass(drawerOuterClasses.value)
+            }, [
+              _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "fds-drawer-backdrop fixed top-0 left-0 w-full h-full bg-black/34 z-99" }, null, -1)),
+              vue.createElementVNode("div", vue.mergeProps({
+                ref_key: "drawerInnerRef",
+                ref: drawerInnerRef,
+                class: ["fds-drawer-inner", drawerInnerClasses.value],
+                role: "dialog",
+                "aria-modal": "true"
+              }, drawerAttrs.value, {
+                onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }), [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(headerClasses.value)
+                }, [
+                  vue.createElementVNode("div", _hoisted_1$h, [
+                    iconName.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+                      key: 0,
+                      name: iconName.value,
+                      size: 24,
+                      class: vue.normalizeClass(iconClasses.value)
+                    }, null, 8, ["name", "class"])) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("h3", {
+                      tabindex: "-1",
+                      class: vue.normalizeClass(headerTitleClasses.value)
+                    }, vue.toDisplayString(__props.heading), 3)
+                  ]),
+                  vue.createElementVNode("div", null, [
+                    !__props.strict ? (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.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)) : vue.createCommentVNode("", true)
+                  ])
+                ], 2),
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(contentClasses.value)
+                }, [
+                  vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                ], 2)
+              ], 16)
+            ], 2)) : vue.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) => {
@@ -11374,11 +11579,11 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
         id: inputId.value
       }, rootAttrs.value), [
         vue.createElementVNode("div", _hoisted_2$c, [
-          __props.loading && loadingIndicator.value === "start" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "start" ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
             key: 0,
             size: "32px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({ key: 1 }, { "aria-disabled": __props.current === 1 }, {
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({ key: 1 }, { "aria-disabled": __props.current === 1 }, {
             type: "button",
             "aria-label": firstPageLabel.value,
             icon: "first",
@@ -11387,11 +11592,11 @@ const _sfc_main$m = /* @__PURE__ */ vue.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" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "prev" ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({ key: 3 }, { "aria-disabled": __props.current === 1 }, {
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({ key: 3 }, { "aria-disabled": __props.current === 1 }, {
             type: "button",
             "aria-label": prevPageLabel.value,
             icon: "arrowLeft",
@@ -11402,14 +11607,14 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
           }), null, 16, ["aria-label", "disabled", "class"]))
         ]),
         vue.createElementVNode("div", _hoisted_3$c, [
-          __props.loading && loadingIndicator.value === "input" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "input" ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
             key: 0,
             size: "24px",
             color: "blue",
             label: loadingLabel.value,
             "label-position": "right"
           }, null, 8, ["label"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$s, {
+            vue.createVNode(_sfc_main$t, {
               style: { "text-align": "center" },
               value: inputValue.value,
               type: "text",
@@ -11423,11 +11628,11 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
           ], 64))
         ]),
         vue.createElementVNode("div", _hoisted_5$b, [
-          __props.loading && loadingIndicator.value === "next" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "next" ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
             key: 0,
             size: "24px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({
             key: 1,
             type: "button",
             "aria-label": nextPageLabel.value,
@@ -11438,11 +11643,11 @@ const _sfc_main$m = /* @__PURE__ */ vue.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" ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+          __props.loading && loadingIndicator.value === "end" ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({
             key: 3,
             type: "button",
             "aria-label": lastPageLabel.value,
@@ -11604,13 +11809,13 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
         }, { ...popoverAttrs.value, popover: "auto" }), [
           __props.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", _hoisted_4$a, [
-              vue.createVNode(_sfc_main$w, { class: "mb-0! min-w-0 grow balance-text whitespace-normal" }, {
+              vue.createVNode(_sfc_main$x, { class: "mb-0! min-w-0 grow balance-text whitespace-normal" }, {
                 default: vue.withCtx(() => [
                   vue.createTextVNode(vue.toDisplayString(__props.label), 1)
                 ]),
                 _: 1
               }),
-              vue.createVNode(_sfc_main$M, {
+              vue.createVNode(_sfc_main$N, {
                 icon: "cross",
                 size: 28,
                 "aria-label": __props.closeAriaLabel,
@@ -11628,7 +11833,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
                 vue.createTextVNode(vue.toDisplayString(__props.body), 1)
               ])
             ]),
-            vue.createVNode(_sfc_main$M, {
+            vue.createVNode(_sfc_main$N, {
               icon: "cross",
               size: 28,
               "aria-label": __props.closeAriaLabel,
@@ -12126,7 +12331,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_1$e, [
           !singleItemName.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             vue.createElementVNode("div", _hoisted_3$a, [
-              vue.createVNode(_sfc_main$s, vue.mergeProps({
+              vue.createVNode(_sfc_main$t, vue.mergeProps({
                 ref_key: "inputComponentRef",
                 ref: inputComponentRef,
                 label: __props.label,
@@ -12160,7 +12365,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
             style: vue.normalizeStyle(listWrapperStyle.value)
           }, [
             __props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$6, [
-              vue.createVNode(_sfc_main$F, {
+              vue.createVNode(_sfc_main$G, {
                 color: "blue",
                 size: "48px"
               })
@@ -13235,7 +13440,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_1$d, [
           vue.createElementVNode("div", _hoisted_2$9, [
             vue.createElementVNode("div", _hoisted_3$9, [
-              vue.createVNode(_sfc_main$s, vue.mergeProps({
+              vue.createVNode(_sfc_main$t, vue.mergeProps({
                 ref_key: "inputComponentRef",
                 ref: inputComponentRef,
                 label: __props.label,
@@ -13271,19 +13476,19 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
                 class: vue.normalizeClass([headerClasses.value, "flex items-center justify-between gap-3 min-h-[53px]"])
               }, [
                 vue.createElementVNode("div", _hoisted_4$8, [
-                  vue.createVNode(_sfc_main$t, null, {
+                  vue.createVNode(_sfc_main$u, null, {
                     default: vue.withCtx(() => [
                       vue.createTextVNode(vue.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 ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+                  isSearching.value ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
                     key: 0,
                     color: "blue",
                     size: "20px"
                   })) : vue.createCommentVNode("", true)
                 ]),
-                __props.multiple && __props.showSelectedToggle && selectedItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                __props.multiple && __props.showSelectedToggle && selectedItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
                   key: 0,
                   label: `${__props.selectedToggleLabel} (${selectedItems.value.length})`,
                   checked: showSelectedOnly.value,
@@ -13318,7 +13523,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass([labelClasses.value, listItemClasses.value]),
                       style: vue.normalizeStyle(vue.unref(optionPaddingStyle)(item))
                     }, [
-                      __props.multiple ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                      __props.multiple ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
                         key: 0,
                         id: `search-select-radio-${index}`,
                         name: `search-select-checkbox-group-${inputId}`,
@@ -13335,7 +13540,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
                           }, null, 8, _hoisted_8$3)
                         ]),
                         _: 2
-                      }, 1032, ["id", "name", "checked", "onChange"])) : (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                      }, 1032, ["id", "name", "checked", "onChange"])) : (vue.openBlock(), vue.createBlock(_sfc_main$y, {
                         key: 1,
                         id: `search-select-radio-${index}`,
                         name: "search-select-radio-group",
@@ -13370,7 +13575,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
                       _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => !__props.loadingMore && handleLoadMore(), ["prevent"]), ["space"]))
                     ]
                   }, [
-                    vue.createVNode(_sfc_main$M, {
+                    vue.createVNode(_sfc_main$N, {
                       icon: "sync",
                       loading: __props.loadingMore,
                       "aria-label": __props.loadingMore ? resolvedLoadingMoreLabel.value : resolvedLoadMoreLabel.value,
@@ -13384,7 +13589,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
             ], 64)) : (vue.openBlock(), vue.createElementBlock("ul", _hoisted_12, [
               vue.createElementVNode("li", _hoisted_13, [
                 !isSearching.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(__props.noResultPrompt), 1)) : vue.createCommentVNode("", true),
-                isSearching.value ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+                isSearching.value ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
                   key: 1,
                   color: "blue",
                   size: "20px"
@@ -14130,7 +14335,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass("pt-2 pb-2")
         }, [
           vue.createElementVNode("div", _hoisted_1$c, [
-            hasChildrenNodes.value ? (vue.openBlock(), vue.createBlock(_sfc_main$M, vue.mergeProps({
+            hasChildrenNodes.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, vue.mergeProps({
               key: 0,
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(treeState)?.toggleExpandNode(props.nodeId))
             }, { "aria-label": props.title ? childrenToggleAriaLabel(props.title) : void 0 }, {
@@ -14143,7 +14348,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
               style: vue.normalizeStyle({ minWidth: `${__props.indentation}px` })
             }, null, 4)) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", _hoisted_2$8, [
-              vue.createVNode(_sfc_main$y, {
+              vue.createVNode(_sfc_main$z, {
                 id: `checkbox-${props.nodeId}`,
                 checked: nodeIsSelected.value,
                 indeterminate: nodeIsIndeterminate.value,
@@ -14162,7 +14367,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
               }, 8, ["id", "checked", "indeterminate"])
             ]),
             shouldShowPopoverActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$4, [
-              vue.createVNode(_sfc_main$M, vue.mergeProps({
+              vue.createVNode(_sfc_main$N, vue.mergeProps({
                 ref_key: "triggerRef",
                 ref: triggerRef,
                 icon: "more",
@@ -14210,7 +14415,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                             },
                             class: "cursor-pointer"
                           }, [
-                            vue.createVNode(_sfc_main$x, {
+                            vue.createVNode(_sfc_main$y, {
                               modelValue: selectedOption.value,
                               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedOption.value = $event),
                               id: `tree-popover-${props.nodeId}-${option.value}`,
@@ -14222,7 +14427,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                           ], 8, _hoisted_8$2);
                         }), 64))
                       ]),
-                      vue.createVNode(_sfc_main$M, vue.mergeProps({
+                      vue.createVNode(_sfc_main$N, vue.mergeProps({
                         icon: "cross",
                         id: "tree-popover-close-button",
                         size: 24,
@@ -14372,7 +14577,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           ref: searchContainerRef,
           class: "pb-4"
         }, [
-          vue.createVNode(_sfc_main$s, {
+          vue.createVNode(_sfc_main$t, {
             value: vue.unref(treeState)?.searchTerm?.value ?? "",
             onInput: _cache[0] || (_cache[0] = ($event) => vue.unref(treeState)?.setSearchTerm($event.target.value)),
             class: "w-full",
@@ -14389,7 +14594,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             props.searchCountTemplate && vue.unref(treeState)?.searchTerm?.value && String(vue.unref(treeState)?.searchTerm?.value || "").trim().length >= (vue.unref(treeState)?.triggerLength ?? 1) ? (vue.openBlock(), vue.createElementBlock("h2", _hoisted_2$7, vue.toDisplayString(props.searchCountTemplate.replace("[[filteredNodes]]", vue.unref(treeState)?.filteredMatchCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1)) : (vue.openBlock(), vue.createElementBlock("h2", _hoisted_3$7, vue.toDisplayString(props.searchCountTemplateUnfiltered?.replace("[[totalNodes]]", totalNodeCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1))
           ])) : vue.createCommentVNode("", true)
         ], 512)) : vue.createCommentVNode("", true),
-        vue.unref(treeState)?.isEmptySearchResult?.value ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
+        vue.unref(treeState)?.isEmptySearchResult?.value ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
           key: 1,
           class: "mt-4"
         }, {
@@ -14397,7 +14602,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(props.searchResultNoMatchesTitle), 1)
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$t, null, {
+            vue.createVNode(_sfc_main$u, null, {
               default: vue.withCtx(() => [
                 vue.createTextVNode(vue.toDisplayString(props.searchResultNoMatchesBody), 1)
               ]),
@@ -14489,7 +14694,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "block mb-4" }, rootAttrs.value), [
         hasContent.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
           vue.createElementVNode("span", null, vue.toDisplayString(truncatedText.value), 1),
-          isTruncated.value ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+          isTruncated.value ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
             key: 0,
             icon: isOpen.value ? "arrowUp" : "arrowDown",
             iconPos: "right",
@@ -16144,12 +16349,12 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("span", {
           class: vue.normalizeClass(weekdayLabelClasses.value)
         }, [
-          __props.isToday ? (vue.openBlock(), vue.createBlock(_sfc_main$t, { key: 0 }, {
+          __props.isToday ? (vue.openBlock(), vue.createBlock(_sfc_main$u, { key: 0 }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(vue.unref(t)("FdsWeekCalendar.today")), 1)
             ]),
             _: 1
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$t, { key: 1 }, {
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$u, { key: 1 }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(weekdayLabel.value), 1)
             ]),
@@ -16309,13 +16514,13 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", _hoisted_3$6, [
             vue.createElementVNode("p", _hoisted_4$6, vue.toDisplayString(weekText.value), 1),
             vue.createElementVNode("div", _hoisted_5$6, [
-              vue.createVNode(_sfc_main$M, {
+              vue.createVNode(_sfc_main$N, {
                 icon: "arrowLeft",
                 disabled: disableLastWeekInteraction.value,
                 "aria-label": vue.unref(t)("FdsWeekCalendar.previousWeek"),
                 onClick: decrementWeek
               }, null, 8, ["disabled", "aria-label"]),
-              vue.createVNode(_sfc_main$M, {
+              vue.createVNode(_sfc_main$N, {
                 icon: "arrowRight",
                 disabled: disableNextWeekInteraction.value,
                 "aria-label": vue.unref(t)("FdsWeekCalendar.nextWeek"),
@@ -16351,7 +16556,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
           ]),
           __props.loading?.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
-            vue.createVNode(_sfc_main$F),
+            vue.createVNode(_sfc_main$G),
             vue.createElementVNode("p", _hoisted_8$1, vue.toDisplayString(__props.loading.label), 1)
           ])) : vue.createCommentVNode("", true)
         ])
@@ -16832,7 +17037,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
                       vue.createElementVNode("span", {
                         class: vue.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 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$2, vue.toDisplayString(entry.index + 1), 1)) : (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                        entry.index >= internalCompletedTo.value + 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$2, vue.toDisplayString(entry.index + 1), 1)) : (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                           key: 1,
                           name: "checkmark",
                           size: 24
@@ -19020,7 +19225,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
             "aria-hidden": "true",
             onMousedown: vue.withModifiers(onArrowPointerDown, ["prevent"])
           }, [
-            vue.createVNode(_sfc_main$N, {
+            vue.createVNode(_sfc_main$O, {
               name: "arrowDown",
               size: 24,
               class: vue.normalizeClass(arrowClasses.value)
@@ -19062,7 +19267,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                   vue.createElementVNode("span", _hoisted_10, "(" + vue.toDisplayString(vue.unref(t)("common.plus")) + vue.toDisplayString(option.countryCode) + ")", 1)
                 ]),
                 vue.createElementVNode("span", _hoisted_11, [
-                  option.value === country.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                  option.value === country.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
                     key: 0,
                     name: "check",
                     size: 24,
@@ -19299,7 +19504,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(["mb-0! shrink-0", __props.selectClass ?? ""]),
             onNoCountryResults
           }, null, 8, ["modelValue", "items", "valid", "disabled", "ariaLabel", "data-testid", "class"]),
-          vue.createVNode(_sfc_main$s, vue.mergeProps({
+          vue.createVNode(_sfc_main$t, vue.mergeProps({
             "model-value": vue.unref(nationalNumber),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => nationalNumber.value = $event ?? ""),
             mask: phoneMask.value,
@@ -19767,7 +19972,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-        vue.createVNode(_sfc_main$s, vue.mergeProps({
+        vue.createVNode(_sfc_main$t, vue.mergeProps({
           "model-value": modelValue.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event ?? ""),
           mask: ssnMask.value,
@@ -19914,7 +20119,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             [vue.vModelSelect, internalValue.value]
           ]),
           vue.createElementVNode("div", _hoisted_6, [
-            vue.createVNode(_sfc_main$N, {
+            vue.createVNode(_sfc_main$O, {
               name: "arrowDown",
               size: 24,
               class: vue.normalizeClass({
@@ -20081,12 +20286,12 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", {
             class: vue.normalizeClass(validationIconClasses.value)
           }, [
-            isInvalid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            isInvalid.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: 0,
               name: "alert",
               class: "fill-red-600"
             })) : vue.createCommentVNode("", true),
-            isValid2.value ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+            isValid2.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
               key: 1,
               name: "bigSuccess"
             })) : vue.createCommentVNode("", true)
@@ -20177,7 +20382,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           vue.unref(hasSlot) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
             vue.renderSlot(_ctx.$slots, "default")
           ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(__props.heading), 1)),
-          vue.createVNode(_sfc_main$N, {
+          vue.createVNode(_sfc_main$O, {
             name: iconName.value,
             size: "24px",
             class: "fill-blue-500 ml-1"
@@ -20409,7 +20614,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: wrapperClasses.value }, rootAttrs.value), [
-        __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$F, {
+        __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
           key: 0,
           size: "24px",
           color: "blue",
@@ -20618,6 +20823,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 = vueRouter.useRoute();
+  const router = vueRouter.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 = vue.reactive(cloneRecord(filterDefaults));
+  const draftState = vue.reactive(cloneRecord(draftDefaults));
+  const searchRef = vue.ref(searchDefault);
+  const pageRef = vue.ref(pageDefault);
+  const defaultSortValue = sortDefault.field && sortDefault.dir ? `${sortDefault.dir === "desc" ? "-" : "+"}${sortDefault.field}` : "";
+  const sortValueRef = vue.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;
+    });
+  };
+  vue.watch(
+    () => route.query,
+    () => {
+      if (syncingToRoute) return;
+      syncingFromRoute = true;
+      readFromRoute();
+      syncingFromRoute = false;
+    }
+  );
+  vue.watch(
+    filterState,
+    () => {
+      pushRoute();
+    },
+    { deep: true }
+  );
+  vue.watch(searchRef, () => {
+    pushRoute();
+  });
+  vue.watch(pageRef, () => {
+    pushRoute();
+  });
+  vue.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 = vue.ref({});
   vue.watch(
@@ -20699,33 +21200,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);
@@ -20737,52 +21239,53 @@ 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);
   }
 };
 exports.FDS_VUE_CORE_I18N_KEY = FDS_VUE_CORE_I18N_KEY;
-exports.FdsBlockAlert = _sfc_main$L;
-exports.FdsBlockContent = _sfc_main$K;
-exports.FdsBlockExpander = _sfc_main$I;
-exports.FdsBlockInfo = _sfc_main$H;
-exports.FdsBlockLink = _sfc_main$G;
-exports.FdsButtonCopy = _sfc_main$D;
-exports.FdsButtonDownload = _sfc_main$C;
-exports.FdsButtonIcon = _sfc_main$M;
-exports.FdsButtonMinor = _sfc_main$E;
-exports.FdsButtonPrimary = _sfc_main$B;
-exports.FdsButtonSecondary = _sfc_main$A;
-exports.FdsCheckbox = _sfc_main$y;
-exports.FdsDevMode = _sfc_main$o;
-exports.FdsExitModal = _sfc_main$n;
+exports.FdsBlockAlert = _sfc_main$M;
+exports.FdsBlockContent = _sfc_main$L;
+exports.FdsBlockExpander = _sfc_main$J;
+exports.FdsBlockInfo = _sfc_main$I;
+exports.FdsBlockLink = _sfc_main$H;
+exports.FdsButtonCopy = _sfc_main$E;
+exports.FdsButtonDownload = _sfc_main$D;
+exports.FdsButtonIcon = _sfc_main$N;
+exports.FdsButtonMinor = _sfc_main$F;
+exports.FdsButtonPrimary = _sfc_main$C;
+exports.FdsButtonSecondary = _sfc_main$B;
+exports.FdsCheckbox = _sfc_main$z;
+exports.FdsDevMode = _sfc_main$p;
+exports.FdsDrawer = FdsDrawer;
+exports.FdsExitModal = _sfc_main$o;
 exports.FdsH1 = _sfc_main$4;
 exports.FdsH2 = _sfc_main$3;
 exports.FdsH3 = _sfc_main$2;
 exports.FdsHr = _sfc_main$1;
-exports.FdsIcon = _sfc_main$N;
-exports.FdsInput = _sfc_main$s;
-exports.FdsLabel = _sfc_main$w;
+exports.FdsIcon = _sfc_main$O;
+exports.FdsInput = _sfc_main$t;
+exports.FdsLabel = _sfc_main$x;
 exports.FdsLead = _sfc_main$d;
 exports.FdsListHeading = _sfc_main;
-exports.FdsMeta = _sfc_main$t;
-exports.FdsModal = _sfc_main$u;
+exports.FdsMeta = _sfc_main$u;
+exports.FdsModal = _sfc_main$v;
 exports.FdsPagination = _sfc_main$m;
 exports.FdsPhonenumber = _sfc_main$a;
 exports.FdsPopover = _sfc_main$l;
-exports.FdsRadio = _sfc_main$x;
+exports.FdsRadio = _sfc_main$y;
 exports.FdsSearchSelect = _sfc_main$k;
 exports.FdsSearchSelectPro = _sfc_main$j;
 exports.FdsSelect = _sfc_main$8;
-exports.FdsSpinner = _sfc_main$F;
+exports.FdsSpinner = _sfc_main$G;
 exports.FdsSsn = _sfc_main$9;
-exports.FdsSticker = _sfc_main$J;
+exports.FdsSticker = _sfc_main$K;
 exports.FdsTable = _sfc_main$6;
 exports.FdsTableHead = _sfc_main$5;
-exports.FdsTabs = _sfc_main$r;
-exports.FdsTabsItem = _sfc_main$q;
+exports.FdsTabs = _sfc_main$s;
+exports.FdsTabsItem = _sfc_main$r;
 exports.FdsTextarea = _sfc_main$7;
 exports.FdsTreeView = _sfc_main$h;
 exports.FdsTruncatedText = _sfc_main$g;
@@ -20811,7 +21314,9 @@ exports.isRelativeHref = isRelativeHref;
 exports.logoFeelgoodColored = logoFeelgoodColored;
 exports.logoFeelgoodLight = logoFeelgoodLight;
 exports.normalizePidSearchValue = normalizePidSearchValue;
+exports.parseRouteFiltersFromQuery = parseRouteFiltersFromQuery;
 exports.resolveRouterLinkTarget = resolveRouterLinkTarget;
+exports.serializeRouteFiltersToQuery = serializeRouteFiltersToQuery;
 exports.setupExitConfirmationGuard = setupExitConfirmationGuard;
 exports.setupRouterLinkInterceptor = setupRouterLinkInterceptor;
 exports.shouldBlockNavigation = shouldBlockNavigation;
@@ -20829,6 +21334,7 @@ exports.useExitConfirmationGuardState = useExitConfirmationGuardState;
 exports.useFileSizeValidation = useFileSizeValidation;
 exports.useFileValidation = useFileValidation;
 exports.useIsPid = useIsPid;
+exports.useRouteFilters = useRouteFilters;
 exports.useRouteScrollPositions = useRouteScrollPositions;
 exports.useTreeState = useTreeState;
 exports.useViewportBreakpoint = useViewportBreakpoint;