fds-vue-core 2.1.22 → 2.1.25

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

@@ -1,6 +1,32 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+function useAttrsWithDefaults(props) {
+  const attrs = vue.useAttrs();
+  return {
+    // Common boolean attributes
+    disabled: vue.computed(
+      () => attrs.disabled ?? props.disabled ?? false
+    ),
+    required: vue.computed(
+      () => attrs.required ?? props.required ?? false
+    ),
+    // Common string attributes
+    id: vue.computed(() => attrs.id ?? props.id),
+    name: vue.computed(() => attrs.name ?? props.name),
+    type: vue.computed(() => attrs.type ?? props.type),
+    href: vue.computed(() => attrs.href ?? props.href),
+    target: vue.computed(() => attrs.target ?? props.target),
+    rel: vue.computed(() => attrs.rel ?? props.rel),
+    download: vue.computed(() => attrs.download ?? props.download),
+    placeholder: vue.computed(() => attrs.placeholder ?? props.placeholder),
+    // Common number attributes
+    rows: vue.computed(() => attrs.rows ?? props.rows),
+    maxlength: vue.computed(() => attrs.maxlength ?? props.maxlength),
+    // Raw attrs for spreading
+    attrs
+  };
+}
 function useHasSlot(name = "default") {
   const slots = vue.useSlots();
   return vue.computed(() => {
@@ -522,13 +548,15 @@ const icons = {
       </defs>
     </svg>`
 };
-const _hoisted_1$q = ["innerHTML"];
+const _hoisted_1$p = ["innerHTML"];
 const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsIcon",
   props: {
     name: {},
     size: { default: 24 },
-    title: { default: void 0 }
+    title: { default: void 0 },
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -549,7 +577,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
         class: "inline-flex items-center justify-center align-middle",
         style: vue.normalizeStyle({ width: pixelSize.value, height: pixelSize.value }),
         innerHTML: svgHtml.value
-      }, null, 12, _hoisted_1$q);
+      }, null, 12, _hoisted_1$p);
     };
   }
 });
@@ -558,31 +586,28 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   props: {
     icon: {},
     size: { default: 24 },
-    disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
-    type: { default: "button" },
-    id: {},
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const attrs = vue.useAttrs();
     const props = __props;
+    const { disabled, attrs } = useAttrsWithDefaults(props);
     const buttonAttrs = vue.computed(() => ({
       ...attrs,
-      id: props.id,
       type: props.type,
-      disabled: props.disabled,
-      "aria-disabled": props.disabled || props.loading ? true : void 0
+      disabled: disabled.value,
+      "aria-disabled": disabled.value || props.loading ? true : void 0
     }));
     const iconSize = vue.computed(() => props.size - 4);
     const emit = __emit;
     const buttonClasses = vue.computed(() => [
       "inline-flex items-center justify-center rounded-md p-[2px] max-w-[48px] max-h-[48px] transition-colors duration-200 fill-blue-500 hover:bg-blue_t-100 active:bg-blue_t-200 focus-visible:outline-dashed focus-visible:outline-2 outline-blue-500",
-      props.disabled ? "opacity-20 cursor-not-allowed" : "cursor-pointer"
+      disabled.value ? "opacity-20 cursor-not-allowed" : "cursor-pointer"
     ]);
     const onClick = (ev) => {
-      if (props.disabled || props.loading) {
+      if (disabled.value || props.loading) {
         ev.preventDefault();
         return;
       }
@@ -607,7 +632,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$p = ["id"];
+const _hoisted_1$o = ["id"];
 const _hoisted_2$j = { class: "flex items-center gap-2" };
 const _hoisted_3$b = { class: "relative" };
 const _hoisted_4$a = {
@@ -617,18 +642,20 @@ const _hoisted_4$a = {
 const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockAlert",
   props: {
-    id: { default: void 0 },
     visible: { type: Boolean, default: true },
     closeable: { type: Boolean, default: false },
     collapsable: { type: Boolean, default: false },
     expanded: { type: Boolean, default: false },
     label: { default: "" },
     locale: { default: "sv" },
-    icon: {}
+    icon: {},
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["close", "toggle", "update:visible"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const { id } = useAttrsWithDefaults(props);
     const emit = __emit;
     const isExpanded = vue.ref(props.expanded);
     const isVisible = vue.ref(props.visible);
@@ -647,7 +674,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
       props.collapsable && !isExpanded.value || !hasSlot.value ? "pb-4" : "pb-6"
     ]);
     const autoId = `fds-alert-${Math.random().toString(36).slice(2, 9)}`;
-    const alertId = vue.computed(() => props.id ?? autoId);
+    const alertId = vue.computed(() => id.value ?? autoId);
     function handleClose() {
       isVisible.value = false;
       emit("update:visible", false);
@@ -703,11 +730,11 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ])
         ])
-      ], 10, _hoisted_1$p)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$o)) : vue.createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$o = ["id"];
+const _hoisted_1$n = ["id"];
 const _hoisted_2$i = {
   key: 0,
   class: "flex items-start justify-between gap-4"
@@ -721,11 +748,13 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     heading: { default: void 0 },
     borderLeft: { default: void 0 },
     tight: { type: Boolean, default: false },
-    id: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
-    const hasSlot = useHasSlot();
     const props = __props;
+    const { id } = useAttrsWithDefaults(props);
+    const hasSlot = useHasSlot();
     const contentClasses = vue.computed(() => [
       "rounded-md p-4 bg-white mb-4",
       props.tight && "pb-2",
@@ -744,7 +773,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
       return { "border-left-color": colorMap[props.borderLeft] || props.borderLeft };
     });
     const autoId = `fds-content-block-${Math.random().toString(36).slice(2, 9)}`;
-    const contentBlockId = vue.computed(() => props.id ?? autoId);
+    const contentBlockId = vue.computed(() => id.value ?? autoId);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         id: contentBlockId.value,
@@ -764,17 +793,17 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_5$8, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
-      ], 14, _hoisted_1$o);
+      ], 14, _hoisted_1$n);
     };
   }
 });
-const _hoisted_1$n = ["aria-live"];
 const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSticker",
   props: {
     variant: { default: "blue" },
     bullet: { type: Boolean, default: false },
-    ariaLive: { default: void 0 }
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -801,15 +830,14 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ]);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("span", {
-        class: vue.normalizeClass(stickerClasses.value),
-        "aria-live": __props.ariaLive
+        class: vue.normalizeClass(stickerClasses.value)
       }, [
         __props.bullet ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
           class: vue.normalizeClass(bulletDotClasses.value)
         }, null, 2)) : vue.createCommentVNode("", true),
         vue.renderSlot(_ctx.$slots, "default")
-      ], 10, _hoisted_1$n);
+      ], 2);
     };
   }
 });
@@ -835,23 +863,28 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     label: { default: "" },
     open: { type: Boolean, default: false },
     preIcon: { default: void 0 },
-    id: { default: void 0 },
     stickerColor: { default: void 0 },
-    stickerText: { default: void 0 }
+    stickerText: { default: void 0 },
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["toggle"],
   setup(__props, { emit: __emit }) {
-    const attrs = vue.useAttrs();
     const props = __props;
+    const { id, attrs } = useAttrsWithDefaults(props);
     const hasExtraRowSlot = useHasSlot("extra-row");
     const emit = __emit;
     const isOpen = vue.ref(props.open);
     const autoId = `fds-block-expander-${Math.random().toString(36).slice(2, 9)}`;
-    const blockExpanderId = vue.computed(() => props.id ?? autoId);
-    const buttonAttrs = vue.computed(() => ({
-      ...attrs,
-      id: blockExpanderId.value
-    }));
+    const blockExpanderId = vue.computed(() => id.value ?? autoId);
+    const buttonAttrs = vue.computed(() => {
+      const { class: _, id: __, ...rest } = attrs;
+      return {
+        ...rest,
+        id: blockExpanderId.value
+      };
+    });
+    const wrapperClass = vue.computed(() => attrs.class);
     vue.watch(
       () => props.open,
       (newValue) => {
@@ -875,7 +908,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(expanderClasses.value)
+        class: vue.normalizeClass([expanderClasses.value, wrapperClass.value])
       }, [
         vue.createElementVNode("button", vue.mergeProps(buttonAttrs.value, {
           type: "button",
@@ -951,7 +984,7 @@ const _hoisted_8$3 = {
   key: 1,
   class: "mb-0-last-child"
 };
-const _hoisted_9$3 = { key: 1 };
+const _hoisted_9$2 = { key: 1 };
 const _hoisted_10$1 = { class: "flex items-start justify-between gap-4" };
 const _hoisted_11$1 = { class: "flex items-center gap-3" };
 const _hoisted_12$1 = { class: "m-0 text-base font-main font-bold tracking-wide" };
@@ -965,7 +998,8 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     heading: { default: void 0 },
     icon: { default: void 0 },
     size: { default: "small" },
-    id: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -1003,7 +1037,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
               vue.renderSlot(_ctx.$slots, "default")
             ])) : vue.createCommentVNode("", true)
           ])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$3, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [
           __props.heading ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: vue.normalizeClass({ "mb-4": vue.unref(hasSlot) })
@@ -1043,27 +1077,25 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockLink",
   props: {
     label: {},
-    id: { default: void 0 },
     arrow: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    download: { default: void 0 },
-    href: { default: void 0 },
-    target: { default: void 0 },
-    rel: { default: void 0 },
+    download: {},
+    href: {},
+    target: {},
+    rel: {},
     icon: { default: void 0 },
     interactive: { type: Boolean, default: true },
     as: { default: "router-link" },
-    onClick: {}
+    disabled: { type: Boolean, default: false }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const attrs = vue.useAttrs();
     const props = __props;
+    const { id, href, target, rel, download, attrs } = useAttrsWithDefaults(props);
     const hasSlot = useHasSlot();
     const hasStickerSlot = useHasSlot("sticker");
     const emit = __emit;
     const autoId = `fds-block-link-${Math.random().toString(36).slice(2, 9)}`;
-    const blockLinkId = vue.computed(() => props.id ?? autoId);
+    const blockLinkId = vue.computed(() => id.value ?? autoId);
     const innerClasses = vue.computed(() => [
       props.disabled ? "cursor-not-allowed shadow-none hover:border-transparent active:bg-transparent" : "cursor-pointer",
       !props.interactive && "cursor-auto"
@@ -1096,9 +1128,9 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       }
     }
     const linkAttrs = vue.computed(() => {
-      if (props.as === "a") return { href: props.href };
-      if (props.as === "router-link") return { to: props.href };
-      if (props.href && !props.as) return { href: props.href };
+      if (props.as === "a") return { href: href.value };
+      if (props.as === "router-link") return { to: href.value };
+      if (href.value && !props.as) return { href: href.value };
       return {};
     });
     const componentAttrs = vue.computed(() => ({
@@ -1107,17 +1139,17 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     }));
     const componentType = vue.computed(() => {
       if (props.as) return props.as;
-      return props.href ? "a" : "button";
+      return href.value ? "a" : "button";
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(componentType.value), vue.mergeProps(componentAttrs.value, {
         id: blockLinkId.value,
         class: ["box-border appearance-none text-left w-full flex items-start bg-white p-[calc(1rem-2px)] mb-3 text-blue-600 shadow-lg shadow-blue-200 rounded-2xl no-underline border-2 border-transparent transition-all duration-200 hover:border-blue-600 hover:border-2 active:border-transparent active:shadow-none active:bg-blue_t-100 focus-visible:border-blue-500 focus-visible:border-dashed focus-visible:outline-0", innerClasses.value],
-        target: componentType.value === "a" ? __props.target : void 0,
-        rel: componentType.value === "a" ? __props.rel : void 0,
-        download: componentType.value === "a" ? __props.download : void 0,
-        disabled: componentType.value === "button" ? __props.disabled : void 0,
-        "aria-disabled": __props.disabled,
+        target: componentType.value === "a" ? vue.unref(target) : void 0,
+        rel: componentType.value === "a" ? vue.unref(rel) : void 0,
+        download: componentType.value === "a" ? vue.unref(download) : void 0,
+        disabled: componentType.value === "button" ? props.disabled : void 0,
+        "aria-disabled": props.disabled,
         onClick: handleClick,
         onKeydown: handleKeydown
       }), {
@@ -1244,7 +1276,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$i = ["aria-disabled"];
 const _hoisted_2$e = { class: "pt-0.5" };
-const elBase$2 = "box-border appearance-none inline-flex items-start justify-center w-fit cursor-pointer shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-start 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 elBase$2 = "box-border appearance-none inline-flex items-start justify-center w-fit shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-start 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$n = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -1254,7 +1286,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     invert: { type: Boolean, default: false },
     text: {},
     loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
+    disabled: { type: Boolean },
     block: { type: Boolean, default: false },
     state: { default: void 0 },
     icon: { default: void 0 },
@@ -1262,25 +1294,19 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     size: {},
     textSelection: { type: Boolean, default: false },
     as: { default: "button" },
-    href: { default: void 0 },
-    target: { default: void 0 },
-    rel: { default: void 0 },
+    href: {},
+    target: {},
+    rel: {},
     type: { default: "button" },
-    dataTestid: { default: void 0 },
-    ariaLabel: { default: void 0 },
-    ariaExpanded: { type: Boolean, default: void 0 },
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const attrs = vue.useAttrs();
     const props = __props;
     const emit = __emit;
-    const rootClasses = vue.computed(() => [
-      "inline-block transition-opacity duration-200",
-      props.disabled && "opacity-20 pointer-events-none",
-      props.block && "block w-full"
-    ]);
+    const { disabled, href, target, rel, attrs } = useAttrsWithDefaults(props);
+    const rootClasses = vue.computed(() => ["inline-block transition-opacity duration-200", props.block && "block w-full"]);
     const variantClasses2 = vue.computed(
       () => props.invert ? "border-0 font-normal text-white bg-transparent focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white hover:bg-white-100 active:bg-white-200" : "border-0 font-normal text-blue-600 bg-transparent focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500 hover:bg-blue_t-100 active:bg-blue_t-200"
     );
@@ -1292,19 +1318,20 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       elBase$2,
       variantClasses2.value,
       blockElClasses.value,
-      props.textSelection && "select-text"
+      props.textSelection && "select-text",
+      disabled.value ? "opacity-20 cursor-not-allowed" : "cursor-pointer"
     ]);
     const iconFillClass2 = vue.computed(() => props.invert ? "fill-white" : "fill-blue-500");
     const onClick = (ev) => {
-      if (props.disabled || props.loading) {
+      if (disabled.value || props.loading) {
         ev.preventDefault();
         return;
       }
       emit("click", ev);
     };
     const linkAttrs = vue.computed(() => {
-      if (props.as === "a") return { href: props.href };
-      if (props.as === "router-link") return { to: props.href };
+      if (props.as === "a") return { href: href.value };
+      if (props.as === "router-link") return { to: href.value };
       return {};
     });
     const componentAttrs = vue.computed(() => ({
@@ -1314,13 +1341,13 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(rootClasses.value),
-        "aria-disabled": __props.disabled ? "true" : void 0
+        "aria-disabled": vue.unref(disabled) ? "true" : void 0
       }, [
         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.as), vue.mergeProps(componentAttrs.value, {
-          type: __props.as === "button" ? __props.type : void 0,
-          disabled: __props.as === "button" ? __props.disabled : void 0,
-          target: __props.as === "a" ? __props.target : void 0,
-          rel: __props.as === "a" ? __props.rel : void 0,
+          type: __props.as === "button" ? props.type : void 0,
+          disabled: __props.as === "button" ? vue.unref(disabled) : void 0,
+          target: __props.as === "a" ? vue.unref(target) : void 0,
+          rel: __props.as === "a" ? vue.unref(rel) : void 0,
           class: buttonClasses.value,
           onClick
         }), {
@@ -1362,7 +1389,8 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     copiedLabel: { default: "Kopierat!" },
     timeoutMs: { default: 800 },
     disabled: { type: Boolean, default: false },
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["click"],
   setup(__props) {
@@ -4058,16 +4086,17 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsButtonDownload",
   props: {
     loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
     iconPos: { default: "left" },
     href: { default: void 0 },
     downloadOptions: { default: void 0 },
     text: { default: "" },
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const { disabled, attrs } = useAttrsWithDefaults(props);
     const emit = __emit;
     const { downloadFile, isDownloading } = useDownload();
     const elBase2 = vue.computed(() => [
@@ -4076,7 +4105,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
       "select-none m-0 rounded-md align-middle whitespace-nowrap no-underline",
       "transition-[box-shadow,border-color,background-color] duration-200 font-main text-base",
       "leading-5 tracking-normal",
-      props.disabled && "text-gray-500 cursor-not-allowed!"
+      disabled.value && "text-gray-500 cursor-not-allowed!"
     ]);
     const stateClasses = vue.computed(() => [
       "focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4",
@@ -4089,9 +4118,9 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
       "border-0 font-normal bg-transparent",
       isDownloading.value ? "cursor-not-allowed text-gray-500" : "cursor-pointer text-blue-600"
     ]);
-    const iconFillClass2 = vue.computed(() => isDownloading.value || props.disabled ? "fill-gray-500" : "fill-blue-500");
+    const iconFillClass2 = vue.computed(() => isDownloading.value || disabled.value ? "fill-gray-500" : "fill-blue-500");
     const handleDownload = async (ev) => {
-      if (props.disabled || props.loading || isDownloading.value) {
+      if (disabled.value || props.loading || isDownloading.value) {
         ev.preventDefault();
         return;
       }
@@ -4126,7 +4155,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
       if (props.downloadOptions) {
         handleDownload(ev);
       } else {
-        if (props.disabled || props.loading) {
+        if (disabled.value || props.loading) {
           ev.preventDefault();
           return;
         }
@@ -4134,13 +4163,13 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass(buttonClasses.value),
-        disabled: __props.disabled || __props.loading || vue.unref(isDownloading),
+      return vue.openBlock(), vue.createElementBlock("button", vue.mergeProps(vue.unref(attrs), {
+        class: buttonClasses.value,
+        disabled: vue.unref(disabled) || __props.loading || vue.unref(isDownloading),
         type: "button",
         onClick,
-        "aria-disabled": __props.disabled ? "true" : void 0
-      }, [
+        "aria-disabled": vue.unref(disabled) ? "true" : void 0
+      }), [
         vue.createElementVNode("span", {
           class: vue.normalizeClass(iconOrderClasses.value),
           "aria-hidden": "true"
@@ -4152,21 +4181,24 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, ["class"])
         ], 2),
         vue.createTextVNode(" " + vue.toDisplayString(__props.text), 1)
-      ], 10, _hoisted_1$g);
+      ], 16, _hoisted_1$g);
     };
   }
 });
 const _hoisted_1$f = ["aria-disabled"];
 const _hoisted_2$d = { key: 2 };
-const elBase$1 = "box-border appearance-none inline-flex items-center justify-center cursor-pointer 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 elBase$1 = "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-red-600 border border-red-700 text-white hover:bg-red-700 active:bg-red-800 active:border-red-800";
 const iconFillClass$1 = "fill-white";
 const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FdsButtonPrimary",
   props: {
     text: {},
     loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
+    disabled: { type: Boolean },
     block: { type: Boolean, default: false },
     state: { default: void 0 },
     icon: { default: void 0 },
@@ -4174,25 +4206,20 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     size: { default: "md" },
     textSelection: { type: Boolean, default: false },
     as: { default: "button" },
-    href: { default: void 0 },
+    href: {},
     target: {},
     rel: {},
     type: { default: "button" },
     invert: { type: Boolean },
-    dataTestid: {},
-    ariaLabel: {},
-    ariaExpanded: { type: Boolean },
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const rootClasses = vue.computed(() => [
-      "inline-block transition-opacity duration-200",
-      props.disabled && "opacity-20 pointer-events-none",
-      props.block && "block w-full"
-    ]);
+    const { disabled, href, attrs } = useAttrsWithDefaults(props);
+    const rootClasses = vue.computed(() => ["inline-block transition-opacity duration-200", props.block && "block w-full"]);
     const sizeClasses = {
       sm: "text-sm h-7 px-3",
       md: "text-base h-12 px-4",
@@ -4206,28 +4233,33 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       variantClasses$1,
       blockElClasses.value,
       props.textSelection && "select-text",
-      (props.icon || props.text) && "gap-2"
+      (props.icon || props.text) && "gap-2",
+      disabled.value ? "opacity-20 cursor-not-allowed" : "cursor-pointer"
     ]);
     function onClick(ev) {
-      if (props.disabled || props.loading) {
+      if (disabled.value || props.loading) {
         ev.preventDefault();
         return;
       }
       emit("click", ev);
     }
     const linkAttrs = vue.computed(() => {
-      if (props.as === "a") return { href: props.href };
-      if (props.as === "router-link") return { to: props.href };
+      if (props.as === "a") return { href: href.value };
+      if (props.as === "router-link") return { to: href.value };
       return {};
     });
+    const componentAttrs = vue.computed(() => ({
+      ...linkAttrs.value,
+      ...attrs
+    }));
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(rootClasses.value),
-        "aria-disabled": __props.disabled ? "true" : void 0
+        "aria-disabled": vue.unref(disabled) ? "true" : void 0
       }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.as), vue.mergeProps(linkAttrs.value, {
-          type: __props.as === "button" ? __props.type : void 0,
-          disabled: __props.as === "button" ? __props.disabled : void 0,
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.as), vue.mergeProps(componentAttrs.value, {
+          type: __props.as === "button" ? props.type : void 0,
+          disabled: __props.as === "button" ? vue.unref(disabled) : void 0,
           class: buttonClasses.value,
           onClick
         }), {
@@ -4257,15 +4289,18 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$e = ["aria-disabled"];
 const _hoisted_2$c = { key: 2 };
-const elBase = "box-border appearance-none inline-flex items-center justify-center cursor-pointer 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 elBase = "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:border-blue-600 active:bg-blue-600 active:border-blue-600 active:text-white";
 const iconFillClass = "fill-blue-500";
 const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FdsButtonSecondary",
   props: {
     text: {},
     loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
+    disabled: { type: Boolean },
     block: { type: Boolean, default: false },
     state: { default: void 0 },
     icon: { default: void 0 },
@@ -4273,25 +4308,20 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     size: { default: "md" },
     textSelection: { type: Boolean, default: false },
     as: { default: "button" },
-    href: { default: void 0 },
+    href: {},
     target: {},
     rel: {},
     type: { default: "button" },
     invert: { type: Boolean },
-    dataTestid: {},
-    ariaLabel: {},
-    ariaExpanded: { type: Boolean },
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const rootClasses = vue.computed(() => [
-      "inline-block transition-opacity duration-200",
-      props.disabled && "opacity-20 pointer-events-none",
-      props.block && "block w-full"
-    ]);
+    const { disabled, href, attrs } = useAttrsWithDefaults(props);
+    const rootClasses = vue.computed(() => ["inline-block transition-opacity duration-200", props.block && "block w-full"]);
     const sizeClasses = {
       sm: "text-sm h-7 px-3",
       md: "text-base h-12 px-4",
@@ -4305,28 +4335,33 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       variantClasses,
       blockElClasses.value,
       props.textSelection && "select-text",
-      (props.icon || props.text) && "gap-2"
+      (props.icon || props.text) && "gap-2",
+      disabled.value ? "opacity-20 cursor-not-allowed" : "cursor-pointer"
     ]);
     const onClick = (ev) => {
-      if (props.disabled || props.loading) {
+      if (disabled.value || props.loading) {
         ev.preventDefault();
         return;
       }
       emit("click", ev);
     };
     const linkAttrs = vue.computed(() => {
-      if (props.as === "a") return { href: props.href };
-      if (props.as === "router-link") return { to: props.href };
+      if (props.as === "a") return { href: href.value };
+      if (props.as === "router-link") return { to: href.value };
       return {};
     });
+    const componentAttrs = vue.computed(() => ({
+      ...linkAttrs.value,
+      ...attrs
+    }));
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(rootClasses.value),
-        "aria-disabled": __props.disabled ? "true" : void 0
+        "aria-disabled": vue.unref(disabled) ? "true" : void 0
       }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.as), vue.mergeProps(linkAttrs.value, {
-          type: __props.as === "button" ? __props.type : void 0,
-          disabled: __props.as === "button" ? __props.disabled : void 0,
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.as), vue.mergeProps(componentAttrs.value, {
+          type: __props.as === "button" ? props.type : void 0,
+          disabled: __props.as === "button" ? vue.unref(disabled) : void 0,
           class: buttonClasses.value,
           onClick
         }), {
@@ -4369,7 +4404,9 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     lockScroll: { type: Boolean, default: false },
     info: { default: void 0 },
     locale: { default: "sv" },
-    onClose: {}
+    onClose: {},
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["close", "update:open"],
   setup(__props, { emit: __emit }) {
@@ -7743,7 +7780,7 @@ try {
 }
 const _hoisted_1$c = ["for"];
 const _hoisted_2$a = { class: "relative" };
-const _hoisted_3$7 = ["id", "type", "disabled", "required", "value", "aria-invalid", "maxlength"];
+const _hoisted_3$7 = ["type", "required", "value", "aria-invalid"];
 const _hoisted_4$6 = {
   key: 0,
   class: "text-red-600 font-bold mt-1"
@@ -7761,14 +7798,15 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     invalidMessage: {},
     labelLeft: { type: Boolean, default: false },
     clearButton: { type: Boolean, default: false },
-    passwordLabels: { default: void 0 },
-    locale: {},
+    locale: { default: "sv" },
     mask: { default: void 0 },
     modelValue: {},
     onClearInput: {},
     maskOptions: { default: void 0 },
     modelModifiers: { default: () => ({}) },
-    value: { default: void 0 }
+    value: { default: void 0 },
+    "data-testid": {},
+    dataTestid: {}
   }, {
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
@@ -7778,30 +7816,38 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
-    const attrs = vue.useAttrs();
+    const { id, type, disabled, maxlength, attrs } = useAttrsWithDefaults(props);
+    const inputType = vue.computed(() => type.value ?? props.type ?? "text");
+    const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`;
+    const inputId = vue.computed(() => id.value ?? autoId);
     const inputAttrs = vue.computed(() => {
-      const { class: _, ...rest } = attrs;
-      return rest;
+      const { class: _, type: _type, id: _id, ...rest } = attrs;
+      return {
+        ...rest,
+        id: inputId.value
+      };
     });
-    const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`;
-    const inputId = vue.computed(() => props.id ?? autoId);
     const clearButtonLabel = vue.computed(() => props.locale === "sv" ? "Rensa input" : "Clear input");
+    const passwordButtonShowLabel = vue.computed(() => props.locale === "sv" ? "Visa lösenord" : "Show password");
+    const passwordButtonHideLabel = vue.computed(() => props.locale === "sv" ? "Dölj lösenord" : "Hide password");
     const showInvalidMessage = vue.computed(() => props.valid === false && !props.optional && props.invalidMessage);
-    const isInvalid = vue.computed(() => props.valid === false && !props.optional && !props.disabled);
+    const isInvalid = vue.computed(() => props.valid === false && !props.optional && !disabled.value);
     const isValid = vue.computed(() => props.valid === true);
-    const showPasswordToggle = vue.computed(() => isPasswordType.value && internalValue.value.length > 0);
+    const showPasswordToggle = vue.computed(
+      () => inputType.value === "password" && internalValue.value !== void 0 && internalValue.value !== null && String(internalValue.value).length > 0
+    );
     const wrapperClass = vue.computed(() => attrs.class);
     const inputClasses = vue.computed(() => [
       "block rounded-md border border-gray-500 px-3 py-[calc(0.75rem-1px)]",
-      props.maxlength ? "" : "w-full",
+      maxlength.value ? "" : "w-full",
       "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
-      props.disabled ? "outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
+      disabled.value ? "outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
       isInvalid.value && "outline-2 outline-red-600"
     ]);
     const inputStyle = vue.computed(() => {
-      if (props.maxlength) {
+      if (maxlength.value) {
         return {
-          width: `calc(${props.maxlength}ch + 1.5rem + 0.25rem)`,
+          width: `calc(${maxlength.value}ch + 1.5rem + 0.25rem)`,
           maxWidth: "100%"
         };
       }
@@ -7824,7 +7870,6 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       emit("clearInput");
     }
     const showPassword = vue.ref(false);
-    const isPasswordType = vue.computed(() => props.type === "password");
     const isLazy = vue.computed(() => props.modelModifiers?.lazy === true);
     function toggleShowPassword() {
       showPassword.value = !showPassword.value;
@@ -7905,36 +7950,33 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["w-full mb-4", wrapperClass.value])
       }, [
         vue.createElementVNode("div", {
-          class: vue.normalizeClass({ "flex flex-row gap-4": __props.labelLeft })
+          class: vue.normalizeClass({ "flex flex-row gap-4": props.labelLeft })
         }, [
           vue.createElementVNode("div", null, [
-            __props.label ? (vue.openBlock(), vue.createElementBlock("label", {
+            props.label ? (vue.openBlock(), vue.createElementBlock("label", {
               key: 0,
               for: inputId.value,
-              class: vue.normalizeClass(["block font-bold text-gray-900 cursor-pointer", { "mb-0": __props.meta, "mb-1": !__props.meta }])
-            }, vue.toDisplayString(__props.label), 11, _hoisted_1$c)) : vue.createCommentVNode("", true),
-            __props.meta ? (vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass(["block font-bold text-gray-900 cursor-pointer", { "mb-0": props.meta, "mb-1": !props.meta }])
+            }, vue.toDisplayString(props.label), 11, _hoisted_1$c)) : vue.createCommentVNode("", true),
+            props.meta ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
-              class: vue.normalizeClass(["font-thin", { "mb-1": !__props.labelLeft }])
-            }, vue.toDisplayString(__props.meta), 3)) : vue.createCommentVNode("", true)
+              class: vue.normalizeClass(["font-thin", { "mb-1": !props.labelLeft }])
+            }, vue.toDisplayString(props.meta), 3)) : vue.createCommentVNode("", true)
           ]),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass({ "flex-1": __props.labelLeft })
+            class: vue.normalizeClass({ "flex-1": props.labelLeft })
           }, [
             vue.createElementVNode("div", _hoisted_2$a, [
               vue.createElementVNode("input", vue.mergeProps({
                 ref_key: "inputRef",
                 ref: inputRef,
-                id: inputId.value,
-                type: isPasswordType.value ? showPassword.value ? "text" : "password" : _ctx.type,
-                disabled: _ctx.disabled,
-                required: _ctx.required,
+                type: inputType.value === "password" ? showPassword.value ? "text" : "password" : inputType.value,
+                required: props.required,
                 value: internalValue.value,
-                "aria-invalid": __props.valid === false ? "true" : void 0,
+                "aria-invalid": props.valid === false ? "true" : void 0,
                 class: inputClasses.value,
                 style: inputStyle.value
               }, inputAttrs.value, {
-                maxlength: _ctx.maxlength,
                 onInput: handleInputChange,
                 onChange: handleInputChange,
                 onBlur: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("blur", $event)),
@@ -7955,21 +7997,21 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                   key: 1,
                   name: "bigSuccess"
                 })) : vue.createCommentVNode("", true),
-                __props.clearButton && !!internalValue.value && !_ctx.disabled ? (vue.openBlock(), vue.createBlock(_sfc_main$v, vue.mergeProps({
+                props.clearButton && !!internalValue.value && !props.disabled ? (vue.openBlock(), vue.createBlock(_sfc_main$v, vue.mergeProps({
                   key: 2,
                   icon: "cross"
                 }, { "aria-label": clearButtonLabel.value }, { onClick: onClear }), null, 16)) : vue.createCommentVNode("", true),
                 showPasswordToggle.value ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
                   key: 3,
                   icon: showPassword.value ? "viewOff" : "viewOn",
-                  text: "",
+                  text: showPassword.value ? passwordButtonHideLabel.value : passwordButtonShowLabel.value,
                   onClick: toggleShowPassword
-                }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+                }, null, 8, ["icon", "text"])) : vue.createCommentVNode("", true)
               ], 2)
             ])
           ], 2)
         ], 2),
-        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, vue.toDisplayString(__props.invalidMessage), 1)) : vue.createCommentVNode("", true)
+        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, vue.toDisplayString(props.invalidMessage), 1)) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
@@ -7982,20 +8024,22 @@ const _hoisted_5$5 = { class: "flex items-center justify-end gap-1 order-2 sm:or
 const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsPagination",
   props: {
-    id: { default: void 0 },
     current: {},
     max: {},
     loading: { type: Boolean, default: false },
-    onPaginate: {}
+    onPaginate: {},
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["paginate"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const { id } = useAttrsWithDefaults(props);
     const emit = __emit;
     const loadingIndicator = vue.ref("");
     const internalValue = vue.ref(props.current);
     const autoId = `fds-pagination-${Math.random().toString(36).slice(2, 9)}`;
-    const inputId = vue.computed(() => props.id ?? autoId);
+    const inputId = vue.computed(() => id.value ?? autoId);
     const inputValue = vue.computed(() => String(internalValue.value));
     vue.watch(
       () => props.current,
@@ -8196,7 +8240,7 @@ const _hoisted_8$2 = {
   key: 1,
   class: "block m-0 font-light p-4 border-b border-gray-200 rounded-t-md"
 };
-const _hoisted_9$2 = ["id", "aria-selected", "tabindex", "onMouseup", "onMouseenter", "onKeydown"];
+const _hoisted_9$1 = ["id", "aria-selected", "tabindex", "onMouseup", "onMouseenter", "onKeydown"];
 const _hoisted_10 = ["id", "checked"];
 const _hoisted_11 = ["for", "innerHTML"];
 const _hoisted_12 = {
@@ -8233,7 +8277,9 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     onChange: {},
     onSearchSelected: {},
     onPaginate: {},
-    onTotal: {}
+    onTotal: {},
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["searchSelected", "paginate", "total", "change"],
   setup(__props, { emit: __emit }) {
@@ -8663,7 +8709,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass(["block p-4 text-gray-700 cursor-pointer no-underline", listItemClasses.value]),
                       innerHTML: handleMatchingString(item)
                     }, null, 10, _hoisted_11)
-                  ], 42, _hoisted_9$2);
+                  ], 42, _hoisted_9$1);
                 }), 128))
               ], 32),
               __props.page !== void 0 && totalPages.value !== null && totalPages.value > 1 ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
@@ -9086,7 +9132,7 @@ const useTreeState = (options = {}) => {
   };
 };
 const _hoisted_1$9 = ["for"];
-const _hoisted_2$7 = ["id", "name", "value", "disabled", "required"];
+const _hoisted_2$7 = ["value", "disabled", "required"];
 const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsCheckbox",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -9094,7 +9140,9 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     indeterminate: { type: Boolean, default: false },
     modelValue: { type: [Boolean, Array] },
     checked: { type: Boolean, default: false },
-    value: { default: void 0 }
+    value: { default: void 0 },
+    "data-testid": {},
+    dataTestid: {}
   }, {
     "modelValue": { type: [Boolean, Array], ...{
       default: void 0,
@@ -9107,6 +9155,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
+    const { id, attrs } = useAttrsWithDefaults(props);
     const wrapperClasses = vue.computed(() => ["block relative flex items-center mb-2 last:mb-0"]);
     const innerWrapperClasses = vue.computed(() => [
       "flex p-0.5 items-start rounded-md",
@@ -9120,7 +9169,14 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
       props.disabled && "cursor-not-allowed"
     ]);
     const autoId = `fds-checkbox-${Math.random().toString(36).slice(2, 9)}`;
-    const inputId = vue.computed(() => props.id ?? autoId);
+    const inputId = vue.computed(() => id.value ?? autoId);
+    const inputAttrs = vue.computed(() => {
+      const { id: _, ...rest } = attrs;
+      return {
+        ...rest,
+        id: inputId.value
+      };
+    });
     const hasLabelSlot = useHasSlot();
     const internalChecked = vue.computed({
       get: () => {
@@ -9188,37 +9244,35 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(wrapperClasses.value)
       }, [
-        vue.createElementVNode("label", vue.mergeProps({
+        vue.createElementVNode("label", {
           for: inputId.value,
-          class: [innerWrapperClasses.value, { "cursor-not-allowed": _ctx.disabled }]
-        }, _ctx.$attrs), [
-          vue.withDirectives(vue.createElementVNode("input", {
-            id: inputId.value,
-            name: _ctx.name,
-            value: __props.value,
+          class: vue.normalizeClass([innerWrapperClasses.value, { "cursor-not-allowed": props.disabled }])
+        }, [
+          vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
+            value: props.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalChecked.value = $event),
-            disabled: _ctx.disabled,
-            required: _ctx.required,
+            disabled: props.disabled,
+            required: props.required,
             type: "checkbox",
-            class: vue.normalizeClass([checkboxClasses.value])
-          }, null, 10, _hoisted_2$7), [
+            class: [checkboxClasses.value]
+          }, inputAttrs.value), null, 16, _hoisted_2$7), [
             [vue.vModelCheckbox, internalChecked.value]
           ]),
-          vue.unref(hasLabelSlot) || __props.label ? (vue.openBlock(), vue.createElementBlock("span", {
+          vue.unref(hasLabelSlot) || props.label ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": _ctx.disabled }])
+            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": props.disabled }])
           }, [
-            vue.unref(hasLabelSlot) ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : __props.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              vue.createTextVNode(vue.toDisplayString(__props.label), 1)
+            vue.unref(hasLabelSlot) ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : props.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createTextVNode(vue.toDisplayString(props.label), 1)
             ], 64)) : vue.createCommentVNode("", true)
           ], 2)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$9)
+        ], 10, _hoisted_1$9)
       ], 2);
     };
   }
 });
 const _hoisted_1$8 = ["for"];
-const _hoisted_2$6 = ["id", "name", "value", "disabled", "required"];
+const _hoisted_2$6 = ["name", "value", "disabled", "required"];
 const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -9228,22 +9282,28 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     label: { default: void 0 },
     modelValue: {},
     checked: { type: Boolean, default: false },
-    value: { default: void 0 }
+    value: { default: void 0 },
+    "data-testid": {},
+    dataTestid: {}
   }, {
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
   }),
   emits: /* @__PURE__ */ vue.mergeModels(["update:modelValue", "change", "input"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
-    const attrs = vue.useAttrs();
-    const inputAttrs = vue.computed(() => ({
-      ...attrs
-    }));
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
+    const { id, name, attrs } = useAttrsWithDefaults(props);
     const autoId = `fds-radio-${Math.random().toString(36).slice(2, 9)}`;
-    const inputId = vue.computed(() => props.id ?? autoId);
+    const inputId = vue.computed(() => id.value ?? autoId);
+    const inputAttrs = vue.computed(() => {
+      const { id: _, ...rest } = attrs;
+      return {
+        ...rest,
+        id: inputId.value
+      };
+    });
     const hasLabelSlot = useHasSlot();
     const radioModel = vue.computed({
       get() {
@@ -9272,26 +9332,25 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.createElementVNode("label", {
           for: inputId.value,
-          class: vue.normalizeClass([innerWrapperClasses.value, { "cursor-not-allowed": _ctx.disabled }])
+          class: vue.normalizeClass([innerWrapperClasses.value, { "cursor-not-allowed": props.disabled }])
         }, [
           vue.withDirectives(vue.createElementVNode("input", vue.mergeProps(inputAttrs.value, {
-            id: inputId.value,
-            name: _ctx.name,
-            value: __props.value,
+            name: vue.unref(name),
+            value: props.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => radioModel.value = $event),
-            disabled: _ctx.disabled,
-            required: _ctx.required,
+            disabled: props.disabled,
+            required: props.required,
             type: "radio",
             class: [inputClasses.value, "m-[2px]"]
           }), null, 16, _hoisted_2$6), [
             [vue.vModelRadio, radioModel.value]
           ]),
-          vue.unref(hasLabelSlot) || __props.label ? (vue.openBlock(), vue.createElementBlock("span", {
+          vue.unref(hasLabelSlot) || props.label ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": _ctx.disabled }])
+            class: vue.normalizeClass(["relative inline-block leading-6 pl-1 select-none", { "cursor-not-allowed": props.disabled }])
           }, [
-            vue.unref(hasLabelSlot) ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : __props.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              vue.createTextVNode(vue.toDisplayString(__props.label), 1)
+            vue.unref(hasLabelSlot) ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : props.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createTextVNode(vue.toDisplayString(props.label), 1)
             ], 64)) : vue.createCommentVNode("", true)
           ], 2)) : vue.createCommentVNode("", true)
         ], 10, _hoisted_1$8)
@@ -9310,7 +9369,7 @@ const _hoisted_6$1 = {
 };
 const _hoisted_7$1 = { class: "flex flex-col gap-2" };
 const _hoisted_8$1 = ["onClick"];
-const _hoisted_9$1 = { key: 0 };
+const _hoisted_9 = { key: 0 };
 const popoverWidth = 327;
 const popoverHeight = 80;
 const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
@@ -9349,7 +9408,9 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     searchCountTemplateUnfiltered: {},
     titleTemplate: {},
     onGetSearchContainerHeight: {},
-    selectedNodes: {}
+    selectedNodes: {},
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -9622,7 +9683,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ])
         ], 4),
-        vue.unref(expandedNodes).has(props.nodeId) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$1, [
+        vue.unref(expandedNodes).has(props.nodeId) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredNodes.value, (child) => {
             return vue.openBlock(), vue.createBlock(_component_TreeNode, {
               key: child.nodeId,
@@ -9673,7 +9734,8 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsText",
   props: {
     type: { default: "default" },
-    dataTestid: { default: void 0 }
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -9734,6 +9796,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     titleTemplate: { default: "[[title]]" },
     onGetSearchContainerHeight: {},
     selectedNodes: {},
+    "data-testid": {},
+    dataTestid: {},
     data: {}
   },
   emits: ["update:selectedNodes", "getSearchContainerHeight"],
@@ -9859,7 +9923,9 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     open: { type: Boolean, default: false },
     content: {},
     btnExpand: { default: "Visa mer" },
-    btnCollapse: { default: "Visa mindre" }
+    btnCollapse: { default: "Visa mindre" },
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["toggleHandler"],
   setup(__props, { emit: __emit }) {
@@ -9939,19 +10005,21 @@ const _hoisted_3$2 = {
   class: "font-thin mb-1"
 };
 const _hoisted_4$2 = { class: "relative" };
-const _hoisted_5$2 = ["id", "name", "disabled", "aria-invalid"];
-const _hoisted_6 = {
+const _hoisted_5$2 = {
   key: 0,
   value: "",
   disabled: ""
 };
-const _hoisted_7 = ["value", "disabled"];
-const _hoisted_8 = { class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" };
-const _hoisted_9 = {
+const _hoisted_6 = ["value", "disabled"];
+const _hoisted_7 = { class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" };
+const _hoisted_8 = {
   key: 2,
   class: "text-red-600 font-bold mt-1"
 };
 const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FdsSelect",
   props: /* @__PURE__ */ vue.mergeModels({
     label: { default: void 0 },
@@ -9961,7 +10029,9 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     invalidMessage: { default: void 0 },
     options: { default: void 0 },
     modelValue: {},
-    value: { default: void 0 }
+    value: { default: void 0 },
+    "data-testid": {},
+    dataTestid: {}
   }, {
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
@@ -9971,8 +10041,18 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
+    const { id, placeholder, attrs } = useAttrsWithDefaults(props);
     const autoId = `fds-select-${Math.random().toString(36).slice(2, 9)}`;
-    const selectId = vue.computed(() => props.id ?? autoId);
+    const selectId = vue.computed(() => id.value ?? autoId);
+    const selectAttrs = vue.computed(() => {
+      const { class: _class, ...rest } = attrs;
+      return {
+        ...rest,
+        id: selectId.value,
+        disabled: props.disabled,
+        "aria-invalid": props.valid === false ? "true" : void 0
+      };
+    });
     const slots = vue.useSlots();
     const hasDefaultSlot = vue.computed(() => !!slots.default);
     const showInvalidMessage = vue.computed(
@@ -10009,40 +10089,36 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         __props.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, vue.toDisplayString(__props.meta), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_4$2, [
           vue.withDirectives(vue.createElementVNode("select", vue.mergeProps({
-            id: selectId.value,
-            name: _ctx.name || void 0,
-            disabled: _ctx.disabled,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => internalValue.value = $event),
-            "aria-invalid": __props.valid === false ? "true" : void 0,
             class: selectClasses.value
-          }, _ctx.$attrs, {
+          }, selectAttrs.value, {
             onChange: handleChange,
             onInput: _cache[1] || (_cache[1] = (e) => emit("input", e))
           }), [
-            _ctx.placeholder && !hasDefaultSlot.value ? (vue.openBlock(), vue.createElementBlock("option", _hoisted_6, vue.toDisplayString(_ctx.placeholder), 1)) : vue.createCommentVNode("", true),
+            vue.unref(placeholder) && !hasDefaultSlot.value ? (vue.openBlock(), vue.createElementBlock("option", _hoisted_5$2, vue.toDisplayString(vue.unref(placeholder)), 1)) : vue.createCommentVNode("", true),
             !hasDefaultSlot.value && __props.options ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(__props.options, (option) => {
               return vue.openBlock(), vue.createElementBlock("option", {
                 key: option.value,
                 value: option.value,
                 disabled: option.disabled
-              }, vue.toDisplayString(option.label), 9, _hoisted_7);
+              }, vue.toDisplayString(option.label), 9, _hoisted_6);
             }), 128)) : vue.renderSlot(_ctx.$slots, "default", { key: 2 })
-          ], 16, _hoisted_5$2), [
+          ], 16), [
             [vue.vModelSelect, internalValue.value]
           ]),
-          vue.createElementVNode("div", _hoisted_8, [
+          vue.createElementVNode("div", _hoisted_7, [
             vue.createVNode(_sfc_main$w, {
               name: "arrowDown",
               size: 24,
               class: vue.normalizeClass({
-                "fill-gray-500": _ctx.disabled,
-                "fill-red-500": isInvalid.value && !_ctx.disabled,
-                "fill-blue-500": !_ctx.disabled && !isInvalid.value
+                "fill-gray-500": props.disabled,
+                "fill-red-500": isInvalid.value && !props.disabled,
+                "fill-blue-500": !props.disabled && !isInvalid.value
               })
             }, null, 8, ["class"])
           ])
         ]),
-        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, vue.toDisplayString(__props.invalidMessage), 1)) : vue.createCommentVNode("", true)
+        showInvalidMessage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, vue.toDisplayString(__props.invalidMessage), 1)) : vue.createCommentVNode("", true)
       ]);
     };
   }
@@ -10071,7 +10147,9 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     invalidMessage: {},
     modelValue: {},
     modelModifiers: { default: () => ({}) },
-    value: { default: void 0 }
+    value: { default: void 0 },
+    "data-testid": {},
+    dataTestid: {}
   }, {
     "modelValue": { default: void 0, required: false },
     "modelModifiers": {}
@@ -10081,7 +10159,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const modelValue = vue.useModel(__props, "modelValue");
     const props = __props;
     const emit = __emit;
-    const attrs = vue.useAttrs();
+    const { id, attrs } = useAttrsWithDefaults(props);
     const wrapperClass = vue.computed(() => attrs.class);
     const textareaAttrs = vue.computed(() => {
       const { class: _, ...rest } = attrs;
@@ -10090,12 +10168,11 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         id: textareaId.value,
         disabled: props.disabled,
         rows: props.rows,
-        name: props.name,
         "aria-invalid": props.valid === false ? true : void 0
       };
     });
     const autoId = `fds-textarea-${Math.random().toString(36).slice(2, 9)}`;
-    const textareaId = vue.computed(() => props.id ?? autoId);
+    const textareaId = vue.computed(() => id.value ?? autoId);
     const isLazy = vue.computed(() => props.modelModifiers?.lazy === true);
     const showInvalidMessage = vue.computed(() => props.valid === false && !props.optional && props.invalidMessage);
     const isInvalid = vue.computed(() => props.valid === false && !props.optional && !props.disabled);
@@ -10171,7 +10248,9 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTable",
   props: {
     bordered: { type: Boolean, default: false },
-    compact: { type: Boolean, default: false }
+    compact: { type: Boolean, default: false },
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -10200,7 +10279,8 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     heading: { default: void 0 },
     align: { default: "left" },
     icon: { default: void 0 },
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["sort", "click"],
   setup(__props) {
@@ -10244,7 +10324,9 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTabs",
   props: {
     block: { type: Boolean, default: false },
-    variant: { default: "primary" }
+    variant: { default: "primary" },
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -10274,30 +10356,23 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTabsItem",
   props: {
     to: { default: void 0 },
-    href: { default: void 0 },
     as: { default: void 0 },
     active: { type: Boolean, default: void 0 },
     exact: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
     label: { default: void 0 },
-    onClick: {}
+    "data-testid": {},
+    dataTestid: {}
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
-    const attrs = vue.useAttrs();
     const emit = __emit;
-    const onClick = (ev) => {
-      if (props.disabled) {
+    const handleClick = (ev) => {
+      if (disabled.value) {
         ev.preventDefault();
         return;
       }
       emit("click", ev);
     };
-    const handleClick = (ev) => {
-      if (componentType.value === "button" && !props.disabled) {
-        onClick(ev);
-      }
-    };
     const instance = vue.getCurrentInstance();
     const route = vue.computed(() => {
       try {
@@ -10310,6 +10385,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       return null;
     });
     const props = __props;
+    const { disabled, href, attrs } = useAttrsWithDefaults(props);
     const variant = vue.inject("tabsVariant", "primary");
     const block = vue.inject("tabsBlock", false);
     const isActive = vue.computed(() => {
@@ -10317,25 +10393,26 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       const currentRoute = route.value;
       if (!currentRoute) return false;
       const currentPath = currentRoute.path;
+      const hrefValue = href.value;
       if (props.exact) {
         if (props.to && currentPath === props.to) return true;
-        if (props.href && currentPath === props.href) return true;
+        if (hrefValue && currentPath === hrefValue) return true;
       } else {
         if (props.to && currentPath.includes(props.to)) return true;
-        if (props.href && currentPath.includes(props.href)) return true;
+        if (hrefValue && currentPath.includes(hrefValue)) return true;
       }
       return false;
     });
     const componentType = vue.computed(() => {
       if (props.as) return props.as;
-      if (props.href) return "a";
+      if (href.value) return "a";
       if (props.to) return "router-link";
       return "router-link";
     });
     const linkAttrs = vue.computed(() => {
-      if (componentType.value === "a") return { href: props.href || props.to };
+      if (componentType.value === "a") return { href: href.value || props.to };
       if (componentType.value === "router-link") {
-        return { to: props.to || props.href || route.value?.path || "#" };
+        return { to: props.to || href.value || route.value?.path || "#" };
       }
       return {};
     });
@@ -10367,13 +10444,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         ];
       }
     });
-    const disabledClasses = vue.computed(() => props.disabled ? "cursor-not-allowed pointer-events-none opacity-35" : "");
+    const disabledClasses = vue.computed(() => disabled.value ? "cursor-not-allowed pointer-events-none opacity-35" : "");
     const buttonClasses = vue.computed(() => [...baseClasses.value, ...variantClasses2.value, disabledClasses.value]);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(componentType.value), vue.mergeProps(componentAttrs.value, {
         class: buttonClasses.value,
-        disabled: componentType.value === "button" ? __props.disabled : void 0,
-        "aria-disabled": __props.disabled,
+        disabled: componentType.value === "button" ? vue.unref(disabled) : void 0,
+        "aria-disabled": vue.unref(disabled) ? "true" : void 0,
         "aria-current": isActive.value ? "page" : void 0,
         onClick: handleClick
       }), {
@@ -10391,7 +10468,9 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   props: {
     type: {},
     size: { default: "responsive" },
-    text: {}
+    text: {},
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;
@@ -10449,7 +10528,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     total: {},
     unfiltered: {},
     text: {},
-    language: { default: "sv" }
+    language: { default: "sv" },
+    "data-testid": {},
+    dataTestid: {}
   },
   setup(__props) {
     const props = __props;