fds-vue-core 2.0.2 → 2.0.4

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

@@ -405,9 +405,9 @@ const useTreeState = (options = {}) => {
     isEmptySearchResult
   };
 };
-const _hoisted_1$k = ["id", "name", "value", "disabled", "required"];
+const _hoisted_1$n = ["id", "name", "value", "disabled", "required"];
 const _hoisted_2$d = ["for"];
-const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsCheckbox",
   props: {
     checked: { type: Boolean, default: false },
@@ -476,7 +476,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
             checkboxClasses.value
           ]),
           onChange: handleChange
-        }, null, 42, _hoisted_1$k), [
+        }, null, 42, _hoisted_1$n), [
           [vue.vModelCheckbox, internalChecked.value]
         ]),
         slots.default ? (vue.openBlock(), vue.createElementBlock("label", {
@@ -1002,8 +1002,8 @@ const icons = {
       </defs>
     </svg>`
 };
-const _hoisted_1$j = ["innerHTML"];
-const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$m = ["innerHTML"];
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsIcon",
   props: {
     name: {},
@@ -1029,7 +1029,7 @@ const _sfc_main$q = /* @__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$j);
+      }, null, 12, _hoisted_1$m);
     };
   }
 });
@@ -1040,10 +1040,10 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const FdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-e24163cd"]]);
-const _hoisted_1$i = ["id", "type", "disabled", "aria-label", "aria-disabled"];
-const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-  __name: "FdsIconButton",
+const FdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-e24163cd"]]);
+const _hoisted_1$l = ["id", "type", "disabled", "aria-label", "aria-disabled"];
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  __name: "FdsButtonIcon",
   props: {
     icon: {},
     size: { default: "24px" },
@@ -1089,11 +1089,11 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           name: "spinner",
           class: "animate-spin"
         }, null, 8, ["size"]))
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$l);
     };
   }
 });
-const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsText",
   props: {
     type: { default: "default" }
@@ -1119,10 +1119,10 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "block p-[2px] mb-2 last:mb-0 relative min-h-[28px]" };
+const _hoisted_1$k = { class: "block p-[2px] mb-2 last:mb-0 relative min-h-[28px]" };
 const _hoisted_2$c = ["id", "name", "value", "checked", "disabled", "required"];
 const _hoisted_3$b = ["for"];
-const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsRadio",
   props: {
     checked: { type: Boolean, default: false },
@@ -1150,7 +1150,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       accentClass.value
     ]);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
         vue.createElementVNode("input", {
           id: inputId.value,
           name: _ctx.name,
@@ -1177,17 +1177,22 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "flex items-center" };
+const _hoisted_1$j = { class: "flex items-start" };
 const _hoisted_2$b = ["innerHTML"];
-const _hoisted_3$a = { key: 1 };
+const _hoisted_3$a = {
+  key: 1,
+  style: { "line-height": "25px" }
+};
 const _hoisted_4$8 = {
   key: 2,
   style: { "max-height": "28px" }
 };
-const _hoisted_5$6 = { key: 0 };
+const _hoisted_5$6 = { class: "flex flex-col gap-2" };
+const _hoisted_6$5 = ["onClick"];
+const _hoisted_7$3 = { key: 0 };
 const popoverWidth = 327;
 const popoverHeight = 80;
-const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "TreeNode"
   },
@@ -1299,13 +1304,13 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
       firstRadio?.focus();
     };
     const closePopover = () => {
-      setTimeout(() => {
-        isOpen.value = false;
-        window.removeEventListener("scroll", computePopoverCoords, true);
-        window.removeEventListener("resize", computePopoverCoords);
-        document.removeEventListener("pointerdown", handleGlobalPointerDown);
-        document.removeEventListener("keydown", handleGlobalKeydown);
-      }, 300);
+      isOpen.value = false;
+    };
+    const onAfterPopoverLeave = () => {
+      window.removeEventListener("scroll", computePopoverCoords, true);
+      window.removeEventListener("resize", computePopoverCoords);
+      document.removeEventListener("pointerdown", handleGlobalPointerDown);
+      document.removeEventListener("keydown", handleGlobalKeydown);
     };
     const togglePopover = () => {
       if (isOpen.value) closePopover();
@@ -1352,14 +1357,12 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
       return "";
     });
     const handleOptionClick = (option) => {
-      setTimeout(() => {
-        if (option === "parent_and_children") {
-          treeState?.selectNodeAndAllChildren(props.nodeId);
-        } else if (option === "parent") {
-          treeState?.deselectChildrenOnly(props.nodeId);
-        }
-        isOpen.value = false;
-      }, 300);
+      if (option === "parent_and_children") {
+        treeState?.selectNodeAndAllChildren(props.nodeId);
+      } else if (option === "parent") {
+        treeState?.deselectChildrenOnly(props.nodeId);
+      }
+      closePopover();
     };
     return (_ctx, _cache) => {
       const _component_TreeNode = vue.resolveComponent("TreeNode", true);
@@ -1370,30 +1373,30 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
           style: vue.normalizeStyle(indent.value),
           class: vue.normalizeClass("pt-2 pb-2")
         }, [
-          vue.createElementVNode("div", _hoisted_1$g, [
-            hasChildrenNodes.value ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+          vue.createElementVNode("div", _hoisted_1$j, [
+            hasChildrenNodes.value ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
               key: 0,
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(treeState)?.toggleExpandNode(props.nodeId)),
               ariaLabel: childrenToggleAriaLabel(props.title),
               icon: vue.unref(treeState)?.getNodeIcon(props.nodeId, props.nodeExpandIcon, props.nodeCollapseIcon) ?? props.nodeExpandIcon,
-              size: "20px",
+              size: "24px",
               class: "fill-blue-500 mr-3"
             }, null, 8, ["ariaLabel", "icon"])) : vue.createCommentVNode("", true),
             !hasChildrenNodes.value ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
               style: vue.normalizeStyle({ minWidth: `${_ctx.indentation}px` })
             }, null, 4)) : vue.createCommentVNode("", true),
-            vue.createVNode(_sfc_main$r, {
+            vue.createVNode(_sfc_main$t, {
               id: `checkbox-${props.nodeId}`,
               checked: vue.unref(treeState)?.isNodeSelected(props.nodeId),
               indeterminate: _ctx.showIndeterminate && (vue.unref(treeState)?.isNodeIndeterminateById(props.nodeId) ?? false),
               onChange: _cache[1] || (_cache[1] = ($event) => vue.unref(treeState)?.toggleSelectNode(props.nodeId, props.title, props.data)),
-              class: "pl-0 flex-1 flex items-center"
+              class: "pl-0 flex-1 flex items-start"
             }, {
               default: vue.withCtx(() => [
                 vue.createElementVNode("div", null, [
                   _ctx.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                    _ctx.searchHighlighting && _ctx.searchEnabled && vue.unref(treeState)?.searchTerm?.value && String(vue.unref(treeState)?.searchTerm?.value || "").trim().length >= (vue.unref(treeState)?.triggerLength ?? 1) ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+                    _ctx.searchHighlighting && _ctx.searchEnabled && vue.unref(treeState)?.searchTerm?.value && String(vue.unref(treeState)?.searchTerm?.value || "").trim().length >= (vue.unref(treeState)?.triggerLength ?? 1) ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
                       key: 0,
                       type: "default"
                     }, {
@@ -1403,8 +1406,9 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                         }, null, 8, _hoisted_2$b)
                       ]),
                       _: 1
-                    })) : (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+                    })) : (vue.openBlock(), vue.createBlock(_sfc_main$q, {
                       key: 1,
+                      style: { "line-height": "25px" },
                       type: "default"
                     }, {
                       default: vue.withCtx(() => [
@@ -1419,7 +1423,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
               _: 1
             }, 8, ["id", "checked", "indeterminate"]),
             vue.unref(treeState)?.isParentOrChildrenSelected(props.nodeId) && !(vue.unref(treeState)?.isNodeIndeterminateById(props.nodeId) ?? false) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$8, [
-              vue.createVNode(_sfc_main$p, {
+              vue.createVNode(_sfc_main$r, {
                 ref_key: "triggerRef",
                 ref: triggerRef,
                 icon: "more",
@@ -1427,66 +1431,84 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                 onClick: togglePopover,
                 ariaLabel: `Fler val för ${_ctx.title}`
               }, null, 8, ["ariaLabel"]),
-              isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                class: "fixed z-9999",
-                style: vue.normalizeStyle({
-                  top: popoverCoords.top + "px",
-                  left: popoverCoords.right - popoverWidth - (popoverCoords.right - popoverCoords.left) + "px"
-                })
-              }, [
-                vue.createElementVNode("div", {
-                  ref_key: "popoverPanelRef",
-                  ref: popoverPanelRef,
-                  class: "bg-white rounded-md p-4 shadow-lg flex flex-row justify-between items-start gap-3",
-                  style: vue.normalizeStyle({
-                    width: popoverWidth + "px",
-                    minHeight: popoverHeight + "px"
-                  }),
-                  onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
-                  }, ["stop"])),
-                  onFocusout: onPanelFocusOut
-                }, [
-                  vue.createElementVNode("div", null, [
-                    (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (option) => {
-                      return vue.createElementVNode("div", {
-                        key: option.value,
-                        class: "flex align-center gap-2 justify-between"
-                      }, [
-                        vue.createVNode(_sfc_main$n, {
-                          checked: currentOption.value === option.value,
-                          id: `tree-popover-${props.nodeId}-${option.value}`,
-                          name: `tree-popover-${props.nodeId}`,
-                          value: option.value,
-                          onChange: ($event) => handleOptionClick(option.value),
-                          onBlur: closePopover,
-                          onKeydown: [
-                            vue.withKeys(vue.withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["enter"]),
-                            vue.withKeys(vue.withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["space"])
-                          ]
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createTextVNode(vue.toDisplayString(option.label), 1)
-                          ]),
-                          _: 2
-                        }, 1032, ["checked", "id", "name", "value", "onChange", "onKeydown"])
-                      ]);
-                    }), 64))
-                  ]),
-                  vue.createVNode(_sfc_main$p, {
-                    icon: "cross",
-                    id: "tree-popover-close-button",
-                    size: "24px",
-                    onClick: _cache[2] || (_cache[2] = ($event) => closePopover()),
-                    class: "fill-blue-500",
-                    ariaLabel: "Stäng"
-                  })
-                ], 36)
-              ], 4)) : vue.createCommentVNode("", true)
+              vue.createVNode(vue.Transition, {
+                "enter-active-class": "transition-opacity duration-200 ease-in-out",
+                "enter-from-class": "opacity-0",
+                "enter-to-class": "opacity-100",
+                "leave-active-class": "transition-opacity duration-500 ease-in-out",
+                "leave-from-class": "opacity-100",
+                "leave-to-class": "opacity-0",
+                onAfterLeave: onAfterPopoverLeave
+              }, {
+                default: vue.withCtx(() => [
+                  isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                    key: 0,
+                    class: "fixed z-9999",
+                    style: vue.normalizeStyle({
+                      top: popoverCoords.top + "px",
+                      left: popoverCoords.right - popoverWidth - (popoverCoords.right - popoverCoords.left) + "px"
+                    })
+                  }, [
+                    vue.createElementVNode("div", {
+                      ref_key: "popoverPanelRef",
+                      ref: popoverPanelRef,
+                      class: "bg-white rounded-md p-4 shadow-lg flex flex-row justify-between items-start gap-3",
+                      style: vue.normalizeStyle({
+                        width: popoverWidth + "px",
+                        minHeight: popoverHeight + "px"
+                      }),
+                      onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
+                      }, ["stop"])),
+                      onFocusout: onPanelFocusOut
+                    }, [
+                      vue.createElementVNode("div", _hoisted_5$6, [
+                        (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (option) => {
+                          return vue.createElementVNode("div", {
+                            key: option.value,
+                            onClick: (e) => {
+                              if (e.target.tagName !== "INPUT") {
+                                handleOptionClick(option.value);
+                              }
+                            },
+                            class: "cursor-pointer"
+                          }, [
+                            vue.createVNode(_sfc_main$p, {
+                              checked: currentOption.value === option.value,
+                              id: `tree-popover-${props.nodeId}-${option.value}`,
+                              name: `tree-popover-${props.nodeId}`,
+                              value: option.value,
+                              onChange: () => handleOptionClick(option.value),
+                              onBlur: closePopover,
+                              onKeydown: [
+                                vue.withKeys(vue.withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["enter"]),
+                                vue.withKeys(vue.withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["space"])
+                              ]
+                            }, {
+                              default: vue.withCtx(() => [
+                                vue.createTextVNode(vue.toDisplayString(option.label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["checked", "id", "name", "value", "onChange", "onKeydown"])
+                          ], 8, _hoisted_6$5);
+                        }), 64))
+                      ]),
+                      vue.createVNode(_sfc_main$r, {
+                        icon: "cross",
+                        id: "tree-popover-close-button",
+                        size: "24px",
+                        onClick: _cache[2] || (_cache[2] = ($event) => closePopover()),
+                        class: "fill-blue-500",
+                        ariaLabel: "Stäng"
+                      })
+                    ], 36)
+                  ], 4)) : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              })
             ])) : vue.createCommentVNode("", true)
           ])
         ], 4),
-        vue.unref(expandedNodes).has(props.nodeId) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
+        vue.unref(expandedNodes).has(props.nodeId) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredNodes.value, (child) => {
             return vue.openBlock(), vue.createBlock(_component_TreeNode, {
               key: child.nodeId,
@@ -1533,8 +1555,8 @@ function useElementFinalSize(elementRef, onFinalSize, delay = 100) {
     onCleanup(() => clearTimeout(timeoutId));
   });
 }
-const _hoisted_1$f = ["aria-label"];
-const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$i = ["aria-label"];
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSpinner",
   props: {
     size: { default: "48px" },
@@ -1606,23 +1628,24 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           class: vue.normalizeClass(_ctx.labelPosition === "bottom" ? "font-bold" : "")
         }, vue.toDisplayString(_ctx.label), 3)) : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1$f);
+      ], 10, _hoisted_1$i);
     };
   }
 });
-const _hoisted_1$e = ["aria-disabled"];
-const elBase = "box-border appearance-none inline-flex items-center justify-center cursor-pointer select-none min-h-0 min-w-12 h-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 _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
-  __name: "FdsButton",
+const _hoisted_1$h = ["aria-disabled"];
+const elBase$2 = "box-border appearance-none inline-flex items-center justify-center cursor-pointer shadow-none p-1 text-base h-7 select-none m-0 rounded-md textcenter align-middle whitespace-nowrap 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$m = /* @__PURE__ */ vue.defineComponent({
+  __name: "FdsButtonMinor",
   props: {
-    variant: { default: "primary" },
+    invert: { type: Boolean, default: false },
+    text: {},
     loading: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     block: { type: Boolean, default: false },
     state: { default: void 0 },
     icon: { default: void 0 },
     iconPos: { default: "left" },
-    size: { default: "m" },
+    size: {},
     textSelection: { type: Boolean, default: false },
     as: { default: "button" },
     href: { default: void 0 },
@@ -1632,39 +1655,25 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const slots = vue.useSlots();
     const rootClasses = vue.computed(() => [
       "inline-block transition-opacity duration-200",
       props.disabled && "opacity-20 pointer-events-none",
       props.block && "block w-full"
     ]);
-    const sizeClasses = {
-      s: "text-sm h-7 px-3",
-      m: "text-base h-12 px-4",
-      l: "text-lg h-[68px] px-6"
-    };
-    const variantClasses = {
-      primary: "bg-red-600 border border-red-700 text-white hover:bg-red-700 active:bg-red-800 active:border-red-800",
-      secondary: "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",
-      minor: "h-auto border-0 shadow-none font-normal px-0! text-blue-600 p-0 bg-transparent rounded 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",
-      "minor-invert": "h-auto border-0 shadow-none font-normal text-white p-0 bg-transparent rounded 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"
-    };
+    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"
+    );
     const blockElClasses = vue.computed(() => props.block && "w-full justify-center");
-    const onlyIcon = vue.computed(() => !slots.default || String(slots.default()).trim() === "");
     const iconOrderClasses = vue.computed(
       () => props.icon && props.iconPos === "right" ? "order-2 ml-2 mr-0" : props.icon && "mr-2"
     );
     const buttonClasses = vue.computed(() => [
-      elBase,
-      sizeClasses[props.size],
-      variantClasses[props.variant],
+      elBase$2,
+      variantClasses2.value,
       blockElClasses.value,
-      props.textSelection && "select-text",
-      onlyIcon.value ? "" : ""
+      props.textSelection && "select-text"
     ]);
-    const iconFillClass = vue.computed(
-      () => props.variant === "primary" || props.variant === "minor-invert" ? "fill-white" : "fill-blue-500"
-    );
+    const iconFillClass2 = vue.computed(() => props.invert ? "fill-white" : "fill-blue-500");
     function onClick(ev) {
       if (props.disabled || props.loading) {
         ev.preventDefault();
@@ -1672,20 +1681,24 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       }
       emit("click", ev);
     }
+    const linkAttrs = vue.computed(() => {
+      if (props.as === "a") return { href: props.href };
+      if (props.as === "router-link") return { to: props.href };
+      return {};
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(rootClasses.value),
         "aria-disabled": _ctx.disabled ? "true" : null
       }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.as), {
-          href: _ctx.as === "a" ? _ctx.href : void 0,
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.as), vue.mergeProps(linkAttrs.value, {
           type: _ctx.as === "button" ? _ctx.type : void 0,
           disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
-          class: vue.normalizeClass(buttonClasses.value),
+          class: buttonClasses.value,
           onClick
-        }, {
+        }), {
           default: vue.withCtx(() => [
-            _ctx.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+            _ctx.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
               key: 0,
               class: "mr-2",
               size: "24px",
@@ -1696,20 +1709,20 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": "true"
             }, [
               vue.createVNode(FdsIcon, {
-                class: vue.normalizeClass(iconFillClass.value),
+                class: vue.normalizeClass(iconFillClass2.value),
                 name: _ctx.icon,
                 size: 24
               }, null, 8, ["class", "name"])
             ], 2)) : vue.createCommentVNode("", true),
-            vue.renderSlot(_ctx.$slots, "default")
+            vue.createTextVNode(" " + vue.toDisplayString(_ctx.text), 1)
           ]),
-          _: 3
-        }, 8, ["href", "type", "disabled", "class"]))
-      ], 10, _hoisted_1$e);
+          _: 1
+        }, 16, ["type", "disabled", "class"]))
+      ], 10, _hoisted_1$h);
     };
   }
 });
-const _hoisted_1$d = { class: "flex flex-col" };
+const _hoisted_1$g = { class: "flex flex-col" };
 const _hoisted_2$a = ["for"];
 const _hoisted_3$9 = { class: "w-full" };
 const _hoisted_4$7 = { class: "relative" };
@@ -1718,7 +1731,7 @@ const _hoisted_6$4 = {
   key: 0,
   class: "text-red-600 font-bold mt-1"
 };
-const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsInput",
   props: {
     value: { default: "" },
@@ -1752,7 +1765,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     const isInvalid = vue.computed(() => props.valid === "false" && !props.optional && !props.disabled);
     const isValid = vue.computed(() => props.valid === "true");
     const showPasswordToggle = vue.computed(
-      () => isPasswordType.value && hasPasswordLabels.value && internalValue.value.length > 0
+      () => isPasswordType.value && internalValue.value.length > 0
     );
     const inputClasses = vue.computed(() => [
       "block w-full rounded-md border border-gray-300 px-3 py-2",
@@ -1780,24 +1793,15 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     }
     const showPassword = vue.ref(false);
     const isPasswordType = vue.computed(() => props.type === "password");
-    const passwordToggleLabels = vue.computed(() => {
-      const labels = props.passwordLabels ?? [];
-      const off = (labels[0] ?? "Visa").toString().trim();
-      const on = (labels[1] ?? "Dölj").toString().trim();
-      return { off, on };
-    });
     function toggleShowPassword() {
       showPassword.value = !showPassword.value;
     }
-    const hasPasswordLabels = vue.computed(
-      () => Array.isArray(props.passwordLabels) && props.passwordLabels.some((l) => (l ?? "").toString().trim().length > 0)
-    );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["w-full", { "flex flex-row gap-4": _ctx.labelLeft }])
         }, [
-          vue.createElementVNode("div", _hoisted_1$d, [
+          vue.createElementVNode("div", _hoisted_1$g, [
             _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
               key: 0,
               for: inputId.value,
@@ -1836,23 +1840,18 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
                   key: 1,
                   name: "bigSuccess"
                 })) : vue.createCommentVNode("", true),
-                _ctx.clearButton && !!internalValue.value && !_ctx.disabled ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+                _ctx.clearButton && !!internalValue.value && !_ctx.disabled ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
                   key: 2,
                   icon: "cross",
                   ariaLabel: clearButtonLabel.value,
                   onClick: onClear
                 }, null, 8, ["ariaLabel"])) : vue.createCommentVNode("", true),
-                showPasswordToggle.value ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
+                showPasswordToggle.value ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
                   key: 3,
-                  variant: "minor",
                   icon: showPassword.value ? "viewOff" : "viewOn",
+                  text: "",
                   onClick: toggleShowPassword
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode(vue.toDisplayString(showPassword.value ? passwordToggleLabels.value.off : passwordToggleLabels.value.on), 1)
-                  ]),
-                  _: 1
-                }, 8, ["icon"])) : vue.createCommentVNode("", true)
+                }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
               ], 2)
             ])
           ])
@@ -1862,7 +1861,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$c = ["id"];
+const _hoisted_1$f = ["id"];
 const _hoisted_2$9 = {
   key: 0,
   class: "flex items-start gap-4"
@@ -1876,7 +1875,7 @@ const _hoisted_8$1 = { class: "flex items-center gap-3" };
 const _hoisted_9$1 = { class: "flex items-start gap-3" };
 const smallIconSize = 24;
 const largeIconSize = 48;
-const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsContentBlock",
   props: {
     variant: { default: "primary" },
@@ -1982,11 +1981,11 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           ], 2),
           vue.renderSlot(_ctx.$slots, "default")
         ]))
-      ], 14, _hoisted_1$c);
+      ], 14, _hoisted_1$f);
     };
   }
 });
-const _hoisted_1$b = { key: 0 };
+const _hoisted_1$e = { key: 0 };
 const _hoisted_2$8 = {
   key: 0,
   class: "text-xl"
@@ -1995,7 +1994,7 @@ const _hoisted_3$7 = {
   key: 1,
   class: "text-xl"
 };
-const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTreeView",
   props: {
     nodeExpandIcon: {},
@@ -2076,7 +2075,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           ref: searchContainerRef,
           class: "pb-4"
         }, [
-          vue.createVNode(_sfc_main$j, {
+          vue.createVNode(_sfc_main$l, {
             value: vue.unref(treeState)?.searchTerm?.value ?? "",
             onInput: _cache[0] || (_cache[0] = ($event) => vue.unref(treeState)?.setSearchTerm($event.target.value)),
             class: "w-full",
@@ -2089,11 +2088,11 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             ])]),
             _: 1
           }, 8, ["value", "label"]),
-          props.searchCountTemplate || props.searchCountTemplateUnfiltered ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          props.searchCountTemplate || props.searchCountTemplateUnfiltered ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
             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$8, 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$i, {
+        vue.unref(treeState)?.isEmptySearchResult?.value ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
           key: 1,
           variant: "secondary",
           icon: "information",
@@ -2103,7 +2102,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(vue.toDisplayString(props.searchResultNoMatchesTitle), 1)
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$o, null, {
+            vue.createVNode(_sfc_main$q, null, {
               default: vue.withCtx(() => [
                 vue.createTextVNode(vue.toDisplayString(props.searchResultNoMatchesBody), 1)
               ]),
@@ -2115,7 +2114,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["rounded-md", { "overflow-x-auto bg-white-solid": props.horizontalScroll }])
         }, [
-          props.data && !vue.unref(treeState)?.isEmptySearchResult?.value ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+          props.data && !vue.unref(treeState)?.isEmptySearchResult?.value ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
             key: 0,
             style: { container: "bg-white-solid px-3 py-2" },
             nodes: props.data.children || [],
@@ -2146,6 +2145,272 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1$d = ["aria-disabled"];
+const elBase$1 = "box-border appearance-none inline-flex items-center justify-center cursor-pointer select-none min-h-0 min-w-12 h-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$i = /* @__PURE__ */ vue.defineComponent({
+  __name: "FdsButtonPrimary",
+  props: {
+    text: {},
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    block: { type: Boolean, default: false },
+    state: { default: void 0 },
+    icon: { default: void 0 },
+    iconPos: { default: "left" },
+    size: { default: "m" },
+    textSelection: { type: Boolean, default: false },
+    as: { default: "button" },
+    href: { default: void 0 },
+    type: { default: "button" }
+  },
+  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 sizeClasses = {
+      s: "text-sm h-7 px-3",
+      m: "text-base h-12 px-4",
+      l: "text-lg h-[68px] px-6"
+    };
+    const blockElClasses = vue.computed(() => props.block && "w-full justify-center");
+    const iconOrderClasses = vue.computed(
+      () => props.icon && props.iconPos === "right" ? "order-2 ml-2 mr-0" : props.icon && "mr-2"
+    );
+    const buttonClasses = vue.computed(() => [
+      elBase$1,
+      sizeClasses[props.size || "m"],
+      variantClasses$1,
+      blockElClasses.value,
+      props.textSelection && "select-text"
+    ]);
+    function onClick(ev) {
+      if (props.disabled || 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 };
+      return {};
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(rootClasses.value),
+        "aria-disabled": _ctx.disabled ? "true" : null
+      }, [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.as), vue.mergeProps(linkAttrs.value, {
+          type: _ctx.as === "button" ? _ctx.type : void 0,
+          disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
+          class: buttonClasses.value,
+          onClick
+        }), {
+          default: vue.withCtx(() => [
+            _ctx.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+              key: 0,
+              class: "mr-2",
+              size: "24px",
+              color: "inherit"
+            })) : _ctx.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 1,
+              class: vue.normalizeClass(iconOrderClasses.value),
+              "aria-hidden": "true"
+            }, [
+              vue.createVNode(FdsIcon, {
+                class: vue.normalizeClass(iconFillClass$1),
+                name: _ctx.icon,
+                size: 24
+              }, null, 8, ["name"])
+            ], 2)) : vue.createCommentVNode("", true),
+            vue.createTextVNode(" " + vue.toDisplayString(_ctx.text), 1)
+          ]),
+          _: 1
+        }, 16, ["type", "disabled", "class"]))
+      ], 10, _hoisted_1$d);
+    };
+  }
+});
+const _hoisted_1$c = ["aria-disabled"];
+const elBase = "box-border appearance-none inline-flex items-center justify-center cursor-pointer select-none min-h-0 min-w-12 h-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$h = /* @__PURE__ */ vue.defineComponent({
+  __name: "FdsButtonSecondary",
+  props: {
+    text: {},
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    block: { type: Boolean, default: false },
+    state: { default: void 0 },
+    icon: { default: void 0 },
+    iconPos: { default: "left" },
+    size: { default: "m" },
+    textSelection: { type: Boolean, default: false },
+    as: { default: "button" },
+    href: { default: void 0 },
+    type: { default: "button" }
+  },
+  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 sizeClasses = {
+      s: "text-sm h-7 px-3",
+      m: "text-base h-12 px-4",
+      l: "text-lg h-[68px] px-6"
+    };
+    const blockElClasses = vue.computed(() => props.block && "w-full justify-center");
+    const iconOrderClasses = vue.computed(
+      () => props.icon && props.iconPos === "right" ? "order-2 ml-2 mr-0" : props.icon && "mr-2"
+    );
+    const buttonClasses = vue.computed(() => [
+      elBase,
+      sizeClasses[props.size || "m"],
+      variantClasses,
+      blockElClasses.value,
+      props.textSelection && "select-text"
+    ]);
+    function onClick(ev) {
+      if (props.disabled || 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 };
+      return {};
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(rootClasses.value),
+        "aria-disabled": _ctx.disabled ? "true" : null
+      }, [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.as), vue.mergeProps(linkAttrs.value, {
+          type: _ctx.as === "button" ? _ctx.type : void 0,
+          disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
+          class: buttonClasses.value,
+          onClick
+        }), {
+          default: vue.withCtx(() => [
+            _ctx.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+              key: 0,
+              class: "mr-2",
+              size: "24px",
+              color: "inherit"
+            })) : _ctx.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 1,
+              class: vue.normalizeClass(iconOrderClasses.value),
+              "aria-hidden": "true"
+            }, [
+              vue.createVNode(FdsIcon, {
+                class: vue.normalizeClass(iconFillClass),
+                name: _ctx.icon,
+                size: 24
+              }, null, 8, ["name"])
+            ], 2)) : vue.createCommentVNode("", true),
+            vue.createTextVNode(" " + vue.toDisplayString(_ctx.text), 1)
+          ]),
+          _: 1
+        }, 16, ["type", "disabled", "class"]))
+      ], 10, _hoisted_1$c);
+    };
+  }
+});
+const _hoisted_1$b = {
+  key: 0,
+  class: "flex items-center gap-2 h-7"
+};
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  __name: "FdsButtonCopy",
+  props: {
+    value: { default: "" },
+    targetId: {},
+    label: { default: "Kopiera" },
+    copiedLabel: { default: "Kopierat!" },
+    timeoutMs: { default: 800 },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const isCopied = vue.ref(false);
+    let resetTimer = null;
+    async function copyToClipboard(text) {
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(text);
+          return true;
+        }
+      } catch {
+      }
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+      let ok = false;
+      try {
+        ok = document.execCommand("copy");
+      } catch {
+        ok = false;
+      }
+      document.body.removeChild(textarea);
+      return ok;
+    }
+    async function onClick() {
+      if (props.disabled) return;
+      let textToCopy = props.value;
+      if (props.targetId) {
+        const el = document.getElementById(props.targetId);
+        if (el) {
+          textToCopy = el.innerText || el.textContent || "";
+        }
+      }
+      if (!textToCopy) return;
+      const ok = await copyToClipboard(textToCopy);
+      if (!ok) return;
+      isCopied.value = true;
+      if (resetTimer) clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => isCopied.value = false, props.timeoutMs);
+    }
+    vue.onMounted(() => {
+      if (resetTimer) {
+        clearTimeout(resetTimer);
+        resetTimer = null;
+      }
+    });
+    return (_ctx, _cache) => {
+      return isCopied.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        vue.createVNode(FdsIcon, { name: "bigSuccess" }),
+        vue.createElementVNode("span", null, vue.toDisplayString(props.copiedLabel), 1)
+      ])) : (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+        key: 1,
+        type: "button",
+        disabled: props.disabled,
+        icon: "copy",
+        text: isCopied.value ? props.copiedLabel : props.label,
+        onClick
+      }, null, 8, ["disabled", "text"]));
+    };
+  }
+});
 const _hoisted_1$a = { class: "w-full" };
 const _hoisted_2$7 = ["for"];
 const _hoisted_3$6 = {
@@ -2162,7 +2427,7 @@ const _hoisted_7$1 = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTextarea",
   props: {
     value: { default: "" },
@@ -2269,7 +2534,7 @@ const _hoisted_9 = {
   key: 2,
   class: "text-red-600 font-bold mt-1"
 };
-const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSelect",
   props: {
     value: { default: "" },
@@ -2363,7 +2628,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTable",
   props: {
     bordered: { type: Boolean, default: false },
@@ -2385,8 +2650,8 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FdsTable = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-9bc82042"]]);
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+const FdsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-9bc82042"]]);
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTableHead",
   props: {
     sortable: { type: Boolean, default: false },
@@ -2430,83 +2695,6 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
-  __name: "FdsCopyButton",
-  props: {
-    value: { default: "" },
-    targetId: {},
-    label: { default: "Kopiera" },
-    copiedLabel: { default: "Kopierat!" },
-    timeoutMs: { default: 1500 },
-    disabled: { type: Boolean, default: false }
-  },
-  emits: ["click"],
-  setup(__props) {
-    const props = __props;
-    const isCopied = vue.ref(false);
-    let resetTimer = null;
-    async function copyToClipboard(text) {
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(text);
-          return true;
-        }
-      } catch {
-      }
-      const textarea = document.createElement("textarea");
-      textarea.value = text;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.focus();
-      textarea.select();
-      let ok = false;
-      try {
-        ok = document.execCommand("copy");
-      } catch {
-        ok = false;
-      }
-      document.body.removeChild(textarea);
-      return ok;
-    }
-    async function onClick() {
-      if (props.disabled) return;
-      let textToCopy = props.value;
-      if (props.targetId) {
-        const el = document.getElementById(props.targetId);
-        if (el) {
-          textToCopy = el.innerText || el.textContent || "";
-        }
-      }
-      if (!textToCopy) return;
-      const ok = await copyToClipboard(textToCopy);
-      if (!ok) return;
-      isCopied.value = true;
-      if (resetTimer) clearTimeout(resetTimer);
-      resetTimer = setTimeout(() => isCopied.value = false, props.timeoutMs);
-    }
-    vue.onMounted(() => {
-      if (resetTimer) {
-        clearTimeout(resetTimer);
-        resetTimer = null;
-      }
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$k, {
-        variant: "minor",
-        type: "button",
-        disabled: props.disabled,
-        icon: isCopied.value ? "bigSuccess" : "copy",
-        onClick
-      }, {
-        default: vue.withCtx(() => [
-          vue.createTextVNode(vue.toDisplayString(isCopied.value ? props.copiedLabel : props.label), 1)
-        ]),
-        _: 1
-      }, 8, ["disabled", "icon"]);
-    };
-  }
-});
 const _hoisted_1$8 = ["id"];
 const _hoisted_2$5 = { class: "flex items-center gap-2" };
 const _hoisted_3$4 = { class: "relative" };
@@ -2541,7 +2729,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         isVisible.value = v;
       }
     );
-    const variantClasses = {
+    const variantClasses2 = {
       info: "bg-blue_t-100",
       warning: "bg-yellow-200 border-yellow-300"
     };
@@ -2549,7 +2737,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       info: "information",
       warning: "alert"
     };
-    const alertClasses = vue.computed(() => ["rounded-md p-4", variantClasses[props.variant]]);
+    const alertClasses = vue.computed(() => ["rounded-md p-4", variantClasses2[props.variant]]);
     const autoId = `fds-alert-${Math.random().toString(36).slice(2, 9)}`;
     const alertId = vue.computed(() => props.id ?? autoId);
     const iconName = vue.computed(() => iconMap[props.variant]);
@@ -2585,7 +2773,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                 vue.createElementVNode("span", null, vue.toDisplayString(_ctx.label), 1)
               ]),
               vue.createElementVNode("div", _hoisted_3$4, [
-                _ctx.closeable ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+                _ctx.closeable ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
                   key: 0,
                   icon: "cross",
                   size: "24px",
@@ -2593,7 +2781,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                   ariaLabel: closeLabel.value,
                   class: vue.normalizeClass(["fill-gray-900! hover:bg-gray-100 active:bg-gray-200"])
                 }, null, 8, ["ariaLabel"])) : vue.createCommentVNode("", true),
-                _ctx.collapsable ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+                _ctx.collapsable ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
                   key: 1,
                   icon: "arrowDown",
                   size: "24px",
@@ -2616,7 +2804,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FdsAlertBlock = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-38596eb2"]]);
+const FdsAlertBlock = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-6aea4869"]]);
 const _hoisted_1$7 = { class: "inline-flex items-center" };
 const _hoisted_2$4 = {
   key: 0,
@@ -3166,7 +3354,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["name", "class"])) : vue.createCommentVNode("", true),
                 vue.createTextVNode(" " + vue.toDisplayString(_ctx.heading), 1)
               ], 2),
-              !_ctx.strict ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+              !_ctx.strict ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
                 key: 0,
                 icon: "cross",
                 size: "24px",
@@ -3190,7 +3378,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-8b32a4a7"]]);
+const FdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-8405e00f"]]);
 const _hoisted_1$3 = { class: "my-6 flex items-between justify-between gap-2" };
 const _hoisted_2$1 = { class: "flex items-center justify-start gap-1 w-[100px]" };
 const _hoisted_3$1 = { class: "flex items-center justify-center w-auto gap-2 order-0 sm:order-0" };
@@ -3272,11 +3460,11 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
         vue.createElementVNode("div", _hoisted_2$1, [
-          _ctx.loading && loadingIndicator.value === "start" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "start" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
             key: 0,
             size: "32px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$r, {
             key: 1,
             icon: "first",
             size: "24px",
@@ -3285,11 +3473,11 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass({ hidden: _ctx.current === 1 }),
             onClick: _cache[0] || (_cache[0] = ($event) => handlePagination("start"))
           }, null, 8, ["disabled", "ariaDisabled", "class"])),
-          _ctx.loading && loadingIndicator.value === "prev" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "prev" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$r, {
             key: 3,
             icon: "arrowLeft",
             size: "24px",
@@ -3300,14 +3488,14 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, ["disabled", "ariaDisabled", "class"]))
         ]),
         vue.createElementVNode("div", _hoisted_3$1, [
-          _ctx.loading && loadingIndicator.value === "input" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "input" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
             key: 0,
             size: "24px",
             color: "blue",
             label: "Laddar",
             "label-position": "right"
           })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$j, {
+            vue.createVNode(_sfc_main$l, {
               value: internalValue.value.toString(),
               type: "text",
               size: _ctx.max.toString().length,
@@ -3319,11 +3507,11 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
           ], 64))
         ]),
         vue.createElementVNode("div", _hoisted_5$1, [
-          _ctx.loading && loadingIndicator.value === "next" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "next" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
             key: 0,
             size: "24px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$r, {
             key: 1,
             icon: "arrowRight",
             size: "24px",
@@ -3332,11 +3520,11 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass({ hidden: _ctx.current === _ctx.max }),
             onClick: _cache[2] || (_cache[2] = ($event) => handlePagination("next"))
           }, null, 8, ["disabled", "ariaDisabled", "class"])),
-          _ctx.loading && loadingIndicator.value === "end" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "end" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+          })) : (vue.openBlock(), vue.createBlock(_sfc_main$r, {
             key: 3,
             icon: "last",
             size: "24px",
@@ -3350,7 +3538,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FdsPagination = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-7eb40808"]]);
+const FdsPagination = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-df967fb4"]]);
 const _hoisted_1$2 = { class: "block mb-4" };
 const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsTruncatedText",
@@ -3418,23 +3606,18 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass(["content", { open: isOpen.value }]),
           style: vue.normalizeStyle({ maxWidth: `${containerWidth.value}px` })
         }, vue.toDisplayString(_ctx.content), 7)),
-        shouldShowButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
+        shouldShowButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
           key: 2,
-          variant: "minor",
           icon: isOpen.value ? "arrowUp" : "arrowDown",
-          "icon-pos": "right",
+          iconPos: "right",
+          text: isOpen.value ? _ctx.btnCollapse : _ctx.btnExpand,
           onClick: toggleComponent
-        }, {
-          default: vue.withCtx(() => [
-            vue.createTextVNode(vue.toDisplayString(isOpen.value ? _ctx.btnCollapse : _ctx.btnExpand), 1)
-          ]),
-          _: 1
-        }, 8, ["icon"])) : vue.createCommentVNode("", true)
+        }, null, 8, ["icon", "text"])) : vue.createCommentVNode("", true)
       ]);
     };
   }
 });
-const FdsTruncatedText = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6e02b5dc"]]);
+const FdsTruncatedText = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7c1d8d51"]]);
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsHeading",
   props: {
@@ -3533,7 +3716,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        _ctx.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+        _ctx.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
           key: 0,
           size: "24px",
           color: "blue",
@@ -3549,20 +3732,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
 });
 const FdsVueCorePlugin = {
   install(app) {
-    app.component("FdsTreeView", _sfc_main$h);
-    app.component("FdsButton", _sfc_main$k);
+    app.component("FdsTreeView", _sfc_main$j);
+    app.component("FdsButtonPrimary", _sfc_main$i);
+    app.component("FdsButtonSecondary", _sfc_main$h);
+    app.component("FdsButtonMinor", _sfc_main$m);
+    app.component("FdsButtonIcon", _sfc_main$r);
+    app.component("FdsButtonCopy", _sfc_main$g);
     app.component("FdsIcon", FdsIcon);
-    app.component("FdsSpinner", _sfc_main$l);
-    app.component("FdsRadio", _sfc_main$n);
-    app.component("FdsCheckbox", _sfc_main$r);
-    app.component("FdsTextarea", _sfc_main$g);
-    app.component("FdsSelect", _sfc_main$f);
+    app.component("FdsSpinner", _sfc_main$n);
+    app.component("FdsRadio", _sfc_main$p);
+    app.component("FdsCheckbox", _sfc_main$t);
+    app.component("FdsTextarea", _sfc_main$f);
+    app.component("FdsSelect", _sfc_main$e);
     app.component("FdsTable", FdsTable);
-    app.component("FdsTableHead", _sfc_main$d);
-    app.component("FdsInput", _sfc_main$j);
-    app.component("FdsIconButton", _sfc_main$p);
-    app.component("FdsCopyButton", _sfc_main$c);
-    app.component("FdsContentBlock", _sfc_main$i);
+    app.component("FdsTableHead", _sfc_main$c);
+    app.component("FdsInput", _sfc_main$l);
+    app.component("FdsContentBlock", _sfc_main$k);
     app.component("FdsAlertBlock", FdsAlertBlock);
     app.component("FdsExpanderBlock", FdsExpanderBlock);
     app.component("FdsInteractionBlock", FdsInteractionBlock);
@@ -3574,36 +3759,38 @@ const FdsVueCorePlugin = {
     app.component("FdsTruncatedText", FdsTruncatedText);
     app.component("FdsHeading", _sfc_main$2);
     app.component("FdsSeparator", FdsSeparator);
-    app.component("FdsText", _sfc_main$o);
+    app.component("FdsText", _sfc_main$q);
     app.component("FdsListHeading", _sfc_main);
   }
 };
 exports.FdsAlertBlock = FdsAlertBlock;
-exports.FdsButton = _sfc_main$k;
-exports.FdsCheckbox = _sfc_main$r;
-exports.FdsContentBlock = _sfc_main$i;
-exports.FdsCopyButton = _sfc_main$c;
+exports.FdsButtonCopy = _sfc_main$g;
+exports.FdsButtonIcon = _sfc_main$r;
+exports.FdsButtonMinor = _sfc_main$m;
+exports.FdsButtonPrimary = _sfc_main$i;
+exports.FdsButtonSecondary = _sfc_main$h;
+exports.FdsCheckbox = _sfc_main$t;
+exports.FdsContentBlock = _sfc_main$k;
 exports.FdsExpanderBlock = FdsExpanderBlock;
 exports.FdsHeading = _sfc_main$2;
 exports.FdsIcon = FdsIcon;
-exports.FdsIconButton = _sfc_main$p;
-exports.FdsInput = _sfc_main$j;
+exports.FdsInput = _sfc_main$l;
 exports.FdsInteractionBlock = FdsInteractionBlock;
 exports.FdsListHeading = _sfc_main;
 exports.FdsModal = FdsModal;
 exports.FdsPagination = FdsPagination;
-exports.FdsRadio = _sfc_main$n;
-exports.FdsSelect = _sfc_main$f;
+exports.FdsRadio = _sfc_main$p;
+exports.FdsSelect = _sfc_main$e;
 exports.FdsSeparator = FdsSeparator;
-exports.FdsSpinner = _sfc_main$l;
+exports.FdsSpinner = _sfc_main$n;
 exports.FdsSticker = _sfc_main$8;
 exports.FdsTable = FdsTable;
-exports.FdsTableHead = _sfc_main$d;
+exports.FdsTableHead = _sfc_main$c;
 exports.FdsTabs = _sfc_main$7;
 exports.FdsTabsItem = _sfc_main$6;
-exports.FdsText = _sfc_main$o;
-exports.FdsTextarea = _sfc_main$g;
-exports.FdsTreeView = _sfc_main$h;
+exports.FdsText = _sfc_main$q;
+exports.FdsTextarea = _sfc_main$f;
+exports.FdsTreeView = _sfc_main$j;
 exports.FdsTruncatedText = FdsTruncatedText;
 exports.default = FdsVueCorePlugin;
 exports.useTreeState = useTreeState;