fds-vue-core 2.0.2 → 2.0.4

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

@@ -1,4 +1,4 @@
-import { reactive, ref, watch, computed, defineComponent, useSlots, nextTick, createElementBlock, openBlock, normalizeClass, withDirectives, createCommentVNode, createElementVNode, vModelCheckbox, renderSlot, normalizeStyle, createBlock, inject, resolveComponent, createVNode, unref, withCtx, Fragment, createTextVNode, toDisplayString, withModifiers, renderList, withKeys, watchEffect, resolveDynamicComponent, mergeProps, vModelDynamic, provide, vModelText, vModelSelect, onMounted, vShow, onBeforeUnmount, Teleport } from "vue";
+import { reactive, ref, watch, computed, defineComponent, useSlots, nextTick, createElementBlock, openBlock, normalizeClass, withDirectives, createCommentVNode, createElementVNode, vModelCheckbox, renderSlot, normalizeStyle, createBlock, inject, resolveComponent, createVNode, unref, withCtx, Fragment, createTextVNode, toDisplayString, Transition, withModifiers, renderList, withKeys, watchEffect, resolveDynamicComponent, mergeProps, vModelDynamic, provide, onMounted, vModelText, vModelSelect, vShow, onBeforeUnmount, Teleport } from "vue";
 const getTitleFromProperties = (node, titleTemplate) => {
   if (!titleTemplate) {
     return node.title;
@@ -403,9 +403,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__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "FdsCheckbox",
   props: {
     checked: { type: Boolean, default: false },
@@ -474,7 +474,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             checkboxClasses.value
           ]),
           onChange: handleChange
-        }, null, 42, _hoisted_1$k), [
+        }, null, 42, _hoisted_1$n), [
           [vModelCheckbox, internalChecked.value]
         ]),
         slots.default ? (openBlock(), createElementBlock("label", {
@@ -1000,8 +1000,8 @@ const icons = {
       </defs>
     </svg>`
 };
-const _hoisted_1$j = ["innerHTML"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["innerHTML"];
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "FdsIcon",
   props: {
     name: {},
@@ -1027,7 +1027,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         class: "inline-flex items-center justify-center align-middle",
         style: normalizeStyle({ width: pixelSize.value, height: pixelSize.value }),
         innerHTML: svgHtml.value
-      }, null, 12, _hoisted_1$j);
+      }, null, 12, _hoisted_1$m);
     };
   }
 });
@@ -1038,10 +1038,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__ */ 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__ */ defineComponent({
+  __name: "FdsButtonIcon",
   props: {
     icon: {},
     size: { default: "24px" },
@@ -1087,11 +1087,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           name: "spinner",
           class: "animate-spin"
         }, null, 8, ["size"]))
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$l);
     };
   }
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "FdsText",
   props: {
     type: { default: "default" }
@@ -1117,10 +1117,10 @@ const _sfc_main$o = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "FdsRadio",
   props: {
     checked: { type: Boolean, default: false },
@@ -1148,7 +1148,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       accentClass.value
     ]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createElementVNode("input", {
           id: inputId.value,
           name: _ctx.name,
@@ -1175,17 +1175,22 @@ const _sfc_main$n = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "TreeNode"
   },
@@ -1297,13 +1302,13 @@ const _sfc_main$m = /* @__PURE__ */ 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();
@@ -1350,14 +1355,12 @@ const _sfc_main$m = /* @__PURE__ */ 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 = resolveComponent("TreeNode", true);
@@ -1368,30 +1371,30 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(indent.value),
           class: normalizeClass("pt-2 pb-2")
         }, [
-          createElementVNode("div", _hoisted_1$g, [
-            hasChildrenNodes.value ? (openBlock(), createBlock(_sfc_main$p, {
+          createElementVNode("div", _hoisted_1$j, [
+            hasChildrenNodes.value ? (openBlock(), createBlock(_sfc_main$r, {
               key: 0,
               onClick: _cache[0] || (_cache[0] = ($event) => unref(treeState)?.toggleExpandNode(props.nodeId)),
               ariaLabel: childrenToggleAriaLabel(props.title),
               icon: 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"])) : createCommentVNode("", true),
             !hasChildrenNodes.value ? (openBlock(), createElementBlock("div", {
               key: 1,
               style: normalizeStyle({ minWidth: `${_ctx.indentation}px` })
             }, null, 4)) : createCommentVNode("", true),
-            createVNode(_sfc_main$r, {
+            createVNode(_sfc_main$t, {
               id: `checkbox-${props.nodeId}`,
               checked: unref(treeState)?.isNodeSelected(props.nodeId),
               indeterminate: _ctx.showIndeterminate && (unref(treeState)?.isNodeIndeterminateById(props.nodeId) ?? false),
               onChange: _cache[1] || (_cache[1] = ($event) => 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: withCtx(() => [
                 createElementVNode("div", null, [
                   _ctx.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    _ctx.searchHighlighting && _ctx.searchEnabled && unref(treeState)?.searchTerm?.value && String(unref(treeState)?.searchTerm?.value || "").trim().length >= (unref(treeState)?.triggerLength ?? 1) ? (openBlock(), createBlock(_sfc_main$o, {
+                    _ctx.searchHighlighting && _ctx.searchEnabled && unref(treeState)?.searchTerm?.value && String(unref(treeState)?.searchTerm?.value || "").trim().length >= (unref(treeState)?.triggerLength ?? 1) ? (openBlock(), createBlock(_sfc_main$q, {
                       key: 0,
                       type: "default"
                     }, {
@@ -1401,8 +1404,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                         }, null, 8, _hoisted_2$b)
                       ]),
                       _: 1
-                    })) : (openBlock(), createBlock(_sfc_main$o, {
+                    })) : (openBlock(), createBlock(_sfc_main$q, {
                       key: 1,
+                      style: { "line-height": "25px" },
                       type: "default"
                     }, {
                       default: withCtx(() => [
@@ -1417,7 +1421,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["id", "checked", "indeterminate"]),
             unref(treeState)?.isParentOrChildrenSelected(props.nodeId) && !(unref(treeState)?.isNodeIndeterminateById(props.nodeId) ?? false) ? (openBlock(), createElementBlock("div", _hoisted_4$8, [
-              createVNode(_sfc_main$p, {
+              createVNode(_sfc_main$r, {
                 ref_key: "triggerRef",
                 ref: triggerRef,
                 icon: "more",
@@ -1425,66 +1429,84 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 onClick: togglePopover,
                 ariaLabel: `Fler val för ${_ctx.title}`
               }, null, 8, ["ariaLabel"]),
-              isOpen.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: "fixed z-9999",
-                style: normalizeStyle({
-                  top: popoverCoords.top + "px",
-                  left: popoverCoords.right - popoverWidth - (popoverCoords.right - popoverCoords.left) + "px"
-                })
-              }, [
-                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: normalizeStyle({
-                    width: popoverWidth + "px",
-                    minHeight: popoverHeight + "px"
-                  }),
-                  onClick: _cache[3] || (_cache[3] = withModifiers(() => {
-                  }, ["stop"])),
-                  onFocusout: onPanelFocusOut
-                }, [
-                  createElementVNode("div", null, [
-                    (openBlock(), createElementBlock(Fragment, null, renderList(options, (option) => {
-                      return createElementVNode("div", {
-                        key: option.value,
-                        class: "flex align-center gap-2 justify-between"
-                      }, [
-                        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: [
-                            withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["enter"]),
-                            withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["space"])
-                          ]
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(option.label), 1)
-                          ]),
-                          _: 2
-                        }, 1032, ["checked", "id", "name", "value", "onChange", "onKeydown"])
-                      ]);
-                    }), 64))
-                  ]),
-                  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)) : createCommentVNode("", true)
+              createVNode(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: withCtx(() => [
+                  isOpen.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: "fixed z-9999",
+                    style: normalizeStyle({
+                      top: popoverCoords.top + "px",
+                      left: popoverCoords.right - popoverWidth - (popoverCoords.right - popoverCoords.left) + "px"
+                    })
+                  }, [
+                    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: normalizeStyle({
+                        width: popoverWidth + "px",
+                        minHeight: popoverHeight + "px"
+                      }),
+                      onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                      }, ["stop"])),
+                      onFocusout: onPanelFocusOut
+                    }, [
+                      createElementVNode("div", _hoisted_5$6, [
+                        (openBlock(), createElementBlock(Fragment, null, renderList(options, (option) => {
+                          return createElementVNode("div", {
+                            key: option.value,
+                            onClick: (e) => {
+                              if (e.target.tagName !== "INPUT") {
+                                handleOptionClick(option.value);
+                              }
+                            },
+                            class: "cursor-pointer"
+                          }, [
+                            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: [
+                                withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["enter"]),
+                                withKeys(withModifiers(($event) => handleOptionClick(option.value), ["prevent"]), ["space"])
+                              ]
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(option.label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["checked", "id", "name", "value", "onChange", "onKeydown"])
+                          ], 8, _hoisted_6$5);
+                        }), 64))
+                      ]),
+                      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)) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
             ])) : createCommentVNode("", true)
           ])
         ], 4),
-        unref(expandedNodes).has(props.nodeId) ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
+        unref(expandedNodes).has(props.nodeId) ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(filteredNodes.value, (child) => {
             return openBlock(), createBlock(_component_TreeNode, {
               key: child.nodeId,
@@ -1531,8 +1553,8 @@ function useElementFinalSize(elementRef, onFinalSize, delay = 100) {
     onCleanup(() => clearTimeout(timeoutId));
   });
 }
-const _hoisted_1$f = ["aria-label"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = ["aria-label"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "FdsSpinner",
   props: {
     size: { default: "48px" },
@@ -1604,23 +1626,24 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           key: 0,
           class: normalizeClass(_ctx.labelPosition === "bottom" ? "font-bold" : "")
         }, toDisplayString(_ctx.label), 3)) : 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__ */ 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__ */ 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 },
@@ -1630,39 +1653,25 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const slots = useSlots();
     const rootClasses = 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 = 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 = computed(() => props.block && "w-full justify-center");
-    const onlyIcon = computed(() => !slots.default || String(slots.default()).trim() === "");
     const iconOrderClasses = computed(
       () => props.icon && props.iconPos === "right" ? "order-2 ml-2 mr-0" : props.icon && "mr-2"
     );
     const buttonClasses = 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 = computed(
-      () => props.variant === "primary" || props.variant === "minor-invert" ? "fill-white" : "fill-blue-500"
-    );
+    const iconFillClass2 = computed(() => props.invert ? "fill-white" : "fill-blue-500");
     function onClick(ev) {
       if (props.disabled || props.loading) {
         ev.preventDefault();
@@ -1670,20 +1679,24 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
       emit("click", ev);
     }
+    const linkAttrs = computed(() => {
+      if (props.as === "a") return { href: props.href };
+      if (props.as === "router-link") return { to: props.href };
+      return {};
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(rootClasses.value),
         "aria-disabled": _ctx.disabled ? "true" : null
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), {
-          href: _ctx.as === "a" ? _ctx.href : void 0,
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps(linkAttrs.value, {
           type: _ctx.as === "button" ? _ctx.type : void 0,
           disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
-          class: normalizeClass(buttonClasses.value),
+          class: buttonClasses.value,
           onClick
-        }, {
+        }), {
           default: withCtx(() => [
-            _ctx.loading ? (openBlock(), createBlock(_sfc_main$l, {
+            _ctx.loading ? (openBlock(), createBlock(_sfc_main$n, {
               key: 0,
               class: "mr-2",
               size: "24px",
@@ -1694,20 +1707,20 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               "aria-hidden": "true"
             }, [
               createVNode(FdsIcon, {
-                class: normalizeClass(iconFillClass.value),
+                class: normalizeClass(iconFillClass2.value),
                 name: _ctx.icon,
                 size: 24
               }, null, 8, ["class", "name"])
             ], 2)) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "default")
+            createTextVNode(" " + 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" };
@@ -1716,7 +1729,7 @@ const _hoisted_6$4 = {
   key: 0,
   class: "text-red-600 font-bold mt-1"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "FdsInput",
   props: {
     value: { default: "" },
@@ -1750,7 +1763,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const isInvalid = computed(() => props.valid === "false" && !props.optional && !props.disabled);
     const isValid = computed(() => props.valid === "true");
     const showPasswordToggle = computed(
-      () => isPasswordType.value && hasPasswordLabels.value && internalValue.value.length > 0
+      () => isPasswordType.value && internalValue.value.length > 0
     );
     const inputClasses = computed(() => [
       "block w-full rounded-md border border-gray-300 px-3 py-2",
@@ -1778,24 +1791,15 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     }
     const showPassword = ref(false);
     const isPasswordType = computed(() => props.type === "password");
-    const passwordToggleLabels = 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 = computed(
-      () => Array.isArray(props.passwordLabels) && props.passwordLabels.some((l) => (l ?? "").toString().trim().length > 0)
-    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", {
           class: normalizeClass(["w-full", { "flex flex-row gap-4": _ctx.labelLeft }])
         }, [
-          createElementVNode("div", _hoisted_1$d, [
+          createElementVNode("div", _hoisted_1$g, [
             _ctx.label ? (openBlock(), createElementBlock("label", {
               key: 0,
               for: inputId.value,
@@ -1834,23 +1838,18 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   key: 1,
                   name: "bigSuccess"
                 })) : createCommentVNode("", true),
-                _ctx.clearButton && !!internalValue.value && !_ctx.disabled ? (openBlock(), createBlock(_sfc_main$p, {
+                _ctx.clearButton && !!internalValue.value && !_ctx.disabled ? (openBlock(), createBlock(_sfc_main$r, {
                   key: 2,
                   icon: "cross",
                   ariaLabel: clearButtonLabel.value,
                   onClick: onClear
                 }, null, 8, ["ariaLabel"])) : createCommentVNode("", true),
-                showPasswordToggle.value ? (openBlock(), createBlock(_sfc_main$k, {
+                showPasswordToggle.value ? (openBlock(), createBlock(_sfc_main$m, {
                   key: 3,
-                  variant: "minor",
                   icon: showPassword.value ? "viewOff" : "viewOn",
+                  text: "",
                   onClick: toggleShowPassword
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(showPassword.value ? passwordToggleLabels.value.off : passwordToggleLabels.value.on), 1)
-                  ]),
-                  _: 1
-                }, 8, ["icon"])) : createCommentVNode("", true)
+                }, null, 8, ["icon"])) : createCommentVNode("", true)
               ], 2)
             ])
           ])
@@ -1860,7 +1859,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = ["id"];
+const _hoisted_1$f = ["id"];
 const _hoisted_2$9 = {
   key: 0,
   class: "flex items-start gap-4"
@@ -1874,7 +1873,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__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "FdsContentBlock",
   props: {
     variant: { default: "primary" },
@@ -1980,11 +1979,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           ], 2),
           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"
@@ -1993,7 +1992,7 @@ const _hoisted_3$7 = {
   key: 1,
   class: "text-xl"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "FdsTreeView",
   props: {
     nodeExpandIcon: {},
@@ -2074,7 +2073,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           ref: searchContainerRef,
           class: "pb-4"
         }, [
-          createVNode(_sfc_main$j, {
+          createVNode(_sfc_main$l, {
             value: unref(treeState)?.searchTerm?.value ?? "",
             onInput: _cache[0] || (_cache[0] = ($event) => unref(treeState)?.setSearchTerm($event.target.value)),
             class: "w-full",
@@ -2087,11 +2086,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             ])]),
             _: 1
           }, 8, ["value", "label"]),
-          props.searchCountTemplate || props.searchCountTemplateUnfiltered ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+          props.searchCountTemplate || props.searchCountTemplateUnfiltered ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
             props.searchCountTemplate && unref(treeState)?.searchTerm?.value && String(unref(treeState)?.searchTerm?.value || "").trim().length >= (unref(treeState)?.triggerLength ?? 1) ? (openBlock(), createElementBlock("h2", _hoisted_2$8, toDisplayString(props.searchCountTemplate.replace("[[filteredNodes]]", unref(treeState)?.filteredMatchCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1)) : (openBlock(), createElementBlock("h2", _hoisted_3$7, toDisplayString(props.searchCountTemplateUnfiltered?.replace("[[totalNodes]]", totalNodeCount.value.toString()).replace("[[totalNodes]]", totalNodeCount.value.toString())), 1))
           ])) : createCommentVNode("", true)
         ], 512)) : createCommentVNode("", true),
-        unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$i, {
+        unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$k, {
           key: 1,
           variant: "secondary",
           icon: "information",
@@ -2101,7 +2100,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createTextVNode(toDisplayString(props.searchResultNoMatchesTitle), 1)
           ]),
           default: withCtx(() => [
-            createVNode(_sfc_main$o, null, {
+            createVNode(_sfc_main$q, null, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(props.searchResultNoMatchesBody), 1)
               ]),
@@ -2113,7 +2112,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(["rounded-md", { "overflow-x-auto bg-white-solid": props.horizontalScroll }])
         }, [
-          props.data && !unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$m, {
+          props.data && !unref(treeState)?.isEmptySearchResult?.value ? (openBlock(), createBlock(_sfc_main$o, {
             key: 0,
             style: { container: "bg-white-solid px-3 py-2" },
             nodes: props.data.children || [],
@@ -2144,6 +2143,272 @@ const _sfc_main$h = /* @__PURE__ */ 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__ */ 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 = 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 = computed(() => props.block && "w-full justify-center");
+    const iconOrderClasses = computed(
+      () => props.icon && props.iconPos === "right" ? "order-2 ml-2 mr-0" : props.icon && "mr-2"
+    );
+    const buttonClasses = 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 = computed(() => {
+      if (props.as === "a") return { href: props.href };
+      if (props.as === "router-link") return { to: props.href };
+      return {};
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(rootClasses.value),
+        "aria-disabled": _ctx.disabled ? "true" : null
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps(linkAttrs.value, {
+          type: _ctx.as === "button" ? _ctx.type : void 0,
+          disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
+          class: buttonClasses.value,
+          onClick
+        }), {
+          default: withCtx(() => [
+            _ctx.loading ? (openBlock(), createBlock(_sfc_main$n, {
+              key: 0,
+              class: "mr-2",
+              size: "24px",
+              color: "inherit"
+            })) : _ctx.icon ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: normalizeClass(iconOrderClasses.value),
+              "aria-hidden": "true"
+            }, [
+              createVNode(FdsIcon, {
+                class: normalizeClass(iconFillClass$1),
+                name: _ctx.icon,
+                size: 24
+              }, null, 8, ["name"])
+            ], 2)) : createCommentVNode("", true),
+            createTextVNode(" " + 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__ */ 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 = 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 = computed(() => props.block && "w-full justify-center");
+    const iconOrderClasses = computed(
+      () => props.icon && props.iconPos === "right" ? "order-2 ml-2 mr-0" : props.icon && "mr-2"
+    );
+    const buttonClasses = 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 = computed(() => {
+      if (props.as === "a") return { href: props.href };
+      if (props.as === "router-link") return { to: props.href };
+      return {};
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(rootClasses.value),
+        "aria-disabled": _ctx.disabled ? "true" : null
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps(linkAttrs.value, {
+          type: _ctx.as === "button" ? _ctx.type : void 0,
+          disabled: _ctx.as === "button" ? _ctx.disabled : void 0,
+          class: buttonClasses.value,
+          onClick
+        }), {
+          default: withCtx(() => [
+            _ctx.loading ? (openBlock(), createBlock(_sfc_main$n, {
+              key: 0,
+              class: "mr-2",
+              size: "24px",
+              color: "inherit"
+            })) : _ctx.icon ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: normalizeClass(iconOrderClasses.value),
+              "aria-hidden": "true"
+            }, [
+              createVNode(FdsIcon, {
+                class: normalizeClass(iconFillClass),
+                name: _ctx.icon,
+                size: 24
+              }, null, 8, ["name"])
+            ], 2)) : createCommentVNode("", true),
+            createTextVNode(" " + 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__ */ 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 = 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);
+    }
+    onMounted(() => {
+      if (resetTimer) {
+        clearTimeout(resetTimer);
+        resetTimer = null;
+      }
+    });
+    return (_ctx, _cache) => {
+      return isCopied.value ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createVNode(FdsIcon, { name: "bigSuccess" }),
+        createElementVNode("span", null, toDisplayString(props.copiedLabel), 1)
+      ])) : (openBlock(), 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 = {
@@ -2160,7 +2425,7 @@ const _hoisted_7$1 = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "FdsTextarea",
   props: {
     value: { default: "" },
@@ -2267,7 +2532,7 @@ const _hoisted_9 = {
   key: 2,
   class: "text-red-600 font-bold mt-1"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "FdsSelect",
   props: {
     value: { default: "" },
@@ -2361,7 +2626,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "FdsTable",
   props: {
     bordered: { type: Boolean, default: false },
@@ -2383,8 +2648,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FdsTable = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-9bc82042"]]);
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const FdsTable = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-9bc82042"]]);
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "FdsTableHead",
   props: {
     sortable: { type: Boolean, default: false },
@@ -2428,83 +2693,6 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ 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 = 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);
-    }
-    onMounted(() => {
-      if (resetTimer) {
-        clearTimeout(resetTimer);
-        resetTimer = null;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$k, {
-        variant: "minor",
-        type: "button",
-        disabled: props.disabled,
-        icon: isCopied.value ? "bigSuccess" : "copy",
-        onClick
-      }, {
-        default: withCtx(() => [
-          createTextVNode(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" };
@@ -2539,7 +2727,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         isVisible.value = v;
       }
     );
-    const variantClasses = {
+    const variantClasses2 = {
       info: "bg-blue_t-100",
       warning: "bg-yellow-200 border-yellow-300"
     };
@@ -2547,7 +2735,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       info: "information",
       warning: "alert"
     };
-    const alertClasses = computed(() => ["rounded-md p-4", variantClasses[props.variant]]);
+    const alertClasses = computed(() => ["rounded-md p-4", variantClasses2[props.variant]]);
     const autoId = `fds-alert-${Math.random().toString(36).slice(2, 9)}`;
     const alertId = computed(() => props.id ?? autoId);
     const iconName = computed(() => iconMap[props.variant]);
@@ -2583,7 +2771,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", null, toDisplayString(_ctx.label), 1)
               ]),
               createElementVNode("div", _hoisted_3$4, [
-                _ctx.closeable ? (openBlock(), createBlock(_sfc_main$p, {
+                _ctx.closeable ? (openBlock(), createBlock(_sfc_main$r, {
                   key: 0,
                   icon: "cross",
                   size: "24px",
@@ -2591,7 +2779,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                   ariaLabel: closeLabel.value,
                   class: normalizeClass(["fill-gray-900! hover:bg-gray-100 active:bg-gray-200"])
                 }, null, 8, ["ariaLabel"])) : createCommentVNode("", true),
-                _ctx.collapsable ? (openBlock(), createBlock(_sfc_main$p, {
+                _ctx.collapsable ? (openBlock(), createBlock(_sfc_main$r, {
                   key: 1,
                   icon: "arrowDown",
                   size: "24px",
@@ -2614,7 +2802,7 @@ const _sfc_main$b = /* @__PURE__ */ 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,
@@ -3164,7 +3352,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["name", "class"])) : createCommentVNode("", true),
                 createTextVNode(" " + toDisplayString(_ctx.heading), 1)
               ], 2),
-              !_ctx.strict ? (openBlock(), createBlock(_sfc_main$p, {
+              !_ctx.strict ? (openBlock(), createBlock(_sfc_main$r, {
                 key: 0,
                 icon: "cross",
                 size: "24px",
@@ -3188,7 +3376,7 @@ const _sfc_main$5 = /* @__PURE__ */ 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" };
@@ -3270,11 +3458,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
         createElementVNode("div", _hoisted_2$1, [
-          _ctx.loading && loadingIndicator.value === "start" ? (openBlock(), createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "start" ? (openBlock(), createBlock(_sfc_main$n, {
             key: 0,
             size: "32px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$p, {
+          })) : (openBlock(), createBlock(_sfc_main$r, {
             key: 1,
             icon: "first",
             size: "24px",
@@ -3283,11 +3471,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             class: normalizeClass({ hidden: _ctx.current === 1 }),
             onClick: _cache[0] || (_cache[0] = ($event) => handlePagination("start"))
           }, null, 8, ["disabled", "ariaDisabled", "class"])),
-          _ctx.loading && loadingIndicator.value === "prev" ? (openBlock(), createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "prev" ? (openBlock(), createBlock(_sfc_main$n, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$p, {
+          })) : (openBlock(), createBlock(_sfc_main$r, {
             key: 3,
             icon: "arrowLeft",
             size: "24px",
@@ -3298,14 +3486,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["disabled", "ariaDisabled", "class"]))
         ]),
         createElementVNode("div", _hoisted_3$1, [
-          _ctx.loading && loadingIndicator.value === "input" ? (openBlock(), createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "input" ? (openBlock(), createBlock(_sfc_main$n, {
             key: 0,
             size: "24px",
             color: "blue",
             label: "Laddar",
             "label-position": "right"
           })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createVNode(_sfc_main$j, {
+            createVNode(_sfc_main$l, {
               value: internalValue.value.toString(),
               type: "text",
               size: _ctx.max.toString().length,
@@ -3317,11 +3505,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           ], 64))
         ]),
         createElementVNode("div", _hoisted_5$1, [
-          _ctx.loading && loadingIndicator.value === "next" ? (openBlock(), createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "next" ? (openBlock(), createBlock(_sfc_main$n, {
             key: 0,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$p, {
+          })) : (openBlock(), createBlock(_sfc_main$r, {
             key: 1,
             icon: "arrowRight",
             size: "24px",
@@ -3330,11 +3518,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             class: normalizeClass({ hidden: _ctx.current === _ctx.max }),
             onClick: _cache[2] || (_cache[2] = ($event) => handlePagination("next"))
           }, null, 8, ["disabled", "ariaDisabled", "class"])),
-          _ctx.loading && loadingIndicator.value === "end" ? (openBlock(), createBlock(_sfc_main$l, {
+          _ctx.loading && loadingIndicator.value === "end" ? (openBlock(), createBlock(_sfc_main$n, {
             key: 2,
             size: "24px",
             color: "blue"
-          })) : (openBlock(), createBlock(_sfc_main$p, {
+          })) : (openBlock(), createBlock(_sfc_main$r, {
             key: 3,
             icon: "last",
             size: "24px",
@@ -3348,7 +3536,7 @@ const _sfc_main$4 = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "FdsTruncatedText",
@@ -3416,23 +3604,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["content", { open: isOpen.value }]),
           style: normalizeStyle({ maxWidth: `${containerWidth.value}px` })
         }, toDisplayString(_ctx.content), 7)),
-        shouldShowButton.value ? (openBlock(), createBlock(_sfc_main$k, {
+        shouldShowButton.value ? (openBlock(), 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: withCtx(() => [
-            createTextVNode(toDisplayString(isOpen.value ? _ctx.btnCollapse : _ctx.btnExpand), 1)
-          ]),
-          _: 1
-        }, 8, ["icon"])) : createCommentVNode("", true)
+        }, null, 8, ["icon", "text"])) : 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__ */ defineComponent({
   __name: "FdsHeading",
   props: {
@@ -3531,7 +3714,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.loading ? (openBlock(), createBlock(_sfc_main$l, {
+        _ctx.loading ? (openBlock(), createBlock(_sfc_main$n, {
           key: 0,
           size: "24px",
           color: "blue",
@@ -3547,20 +3730,22 @@ const _sfc_main = /* @__PURE__ */ 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);
@@ -3572,37 +3757,39 @@ 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);
   }
 };
 export {
   FdsAlertBlock,
-  _sfc_main$k as FdsButton,
-  _sfc_main$r as FdsCheckbox,
-  _sfc_main$i as FdsContentBlock,
-  _sfc_main$c as FdsCopyButton,
+  _sfc_main$g as FdsButtonCopy,
+  _sfc_main$r as FdsButtonIcon,
+  _sfc_main$m as FdsButtonMinor,
+  _sfc_main$i as FdsButtonPrimary,
+  _sfc_main$h as FdsButtonSecondary,
+  _sfc_main$t as FdsCheckbox,
+  _sfc_main$k as FdsContentBlock,
   FdsExpanderBlock,
   _sfc_main$2 as FdsHeading,
   FdsIcon,
-  _sfc_main$p as FdsIconButton,
-  _sfc_main$j as FdsInput,
+  _sfc_main$l as FdsInput,
   FdsInteractionBlock,
   _sfc_main as FdsListHeading,
   FdsModal,
   FdsPagination,
-  _sfc_main$n as FdsRadio,
-  _sfc_main$f as FdsSelect,
+  _sfc_main$p as FdsRadio,
+  _sfc_main$e as FdsSelect,
   FdsSeparator,
-  _sfc_main$l as FdsSpinner,
+  _sfc_main$n as FdsSpinner,
   _sfc_main$8 as FdsSticker,
   FdsTable,
-  _sfc_main$d as FdsTableHead,
+  _sfc_main$c as FdsTableHead,
   _sfc_main$7 as FdsTabs,
   _sfc_main$6 as FdsTabsItem,
-  _sfc_main$o as FdsText,
-  _sfc_main$g as FdsTextarea,
-  _sfc_main$h as FdsTreeView,
+  _sfc_main$q as FdsText,
+  _sfc_main$f as FdsTextarea,
+  _sfc_main$j as FdsTreeView,
   FdsTruncatedText,
   FdsVueCorePlugin as default,
   useTreeState