@frollo/frollo-web-ui 9.0.0 → 9.0.2

package/esm/fw-modal.js

@@ -1,10 +1,11 @@
 import { defineComponent, ref, computed, onMounted, useCssVars, resolveComponent, createBlock, createCommentVNode, openBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, createTextVNode, renderSlot, toDisplayString, vShow } from 'vue';
-import { s as script } from './fw-button-CnQvA7oM.js';
-import { _ as __default__$1 } from './fw-image-D-OHafdw.js';
-import { u as useColours } from './get-root-colours-DCjlYelc.js';
-import { d as render$1 } from './index-BsEH8YYr.js';
+import { s as script } from './fw-button-DZTHZLjk.js';
+import { _ as __default__$1 } from './fw-image-A2lXYs0u.js';
+import { u as useColours } from './get-root-colours-DCCAnRF4.js';
+import { d as render$1 } from './index-DHyRsKsZ.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-bar-DecYSBC_.js';
+import './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import './fw-loading-bar-3x4tkF1B.js';
 
 var __default__ = defineComponent({
   name: 'FwModal',
@@ -163,7 +164,7 @@ var __default__ = defineComponent({
 var __injectCSSVars__ = function __injectCSSVars__() {
   useCssVars(function (_ctx) {
     return {
-      "09c4fd1f": _ctx.modalBgColour
+      "v893df9b6": _ctx.modalBgColour
     };
   });
 };
@@ -215,7 +216,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-describedby": _ctx.$slots.body ? "modal_".concat(_ctx.uuid, "_body") : undefined
       }, [_ctx.bannerUrl ? (openBlock(), createElementBlock("div", {
         key: 0,
-        "class": "flex w-full md:w-1/2 h-[350px] md:h-full cursor-pointer hover:animate-pulse overflow-hidden",
+        "class": "flex w-full md:w-1/2 h-[350px] md:h-auto cursor-pointer hover:animate-pulse overflow-hidden",
         onClick: _cache[0] || (_cache[0] = function ($event) {
           return _ctx.$emit('confirm');
         })
@@ -240,7 +241,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return [createElementVNode("div", _hoisted_5, [createVNode(_component_XMarkSvg, {
             name: "xmark",
             "class": "w-3.5 h-3.5"
-          }), createTextVNode(" Close ")])];
+          }), _cache[4] || (_cache[4] = createTextVNode(" Close ", -1))])];
         }),
         _: 1
       })) : createCommentVNode("", true), _ctx.$slots.icon || _ctx.$slots.header || _ctx.header ? (openBlock(), createElementBlock("div", {
@@ -299,8 +300,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })], 8, ["to"])) : createCommentVNode("", true);
 }
 
-var css_248z = ".modalFadeIn-enter-active{-webkit-animation:modalFadeIn .4s;-moz-animation:modalFadeIn .4s;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;-moz-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.fw-modal--mask{background-color:var(--09c4fd1f)}";
-var stylesheet = ".modalFadeIn-enter-active{-webkit-animation:modalFadeIn .4s;-moz-animation:modalFadeIn .4s;animation:modalFadeIn .4s;-webkit-transition:opacity .4s ease-in;-moz-transition:opacity .4s ease-in;transition:opacity .4s ease-in}.modalFadeIn-leave-active{animation:modalFadeIn .4s reverse;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}@-webkit-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@-moz-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.fw-modal--mask{background-color:var(--09c4fd1f)}";
+var css_248z = ".modalFadeIn-enter-active,.modalFadeIn-leave-active{-webkit-transition:opacity .25s cubic-bezier(.16,1,.3,1);-moz-transition:opacity .25s cubic-bezier(.16,1,.3,1);transition:opacity .25s cubic-bezier(.16,1,.3,1)}.modalFadeIn-enter-from,.modalFadeIn-leave-to{opacity:0}.modalFadeIn-enter-to,.modalFadeIn-leave-from{opacity:1}.fw-modal--mask{background-color:var(--v893df9b6);will-change:opacity}@media (prefers-reduced-motion:reduce){.modalFadeIn-enter-active,.modalFadeIn-leave-active{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}.modalFadeIn-enter-from,.modalFadeIn-leave-to{-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;transform:none!important}}";
+var stylesheet = ".modalFadeIn-enter-active,.modalFadeIn-leave-active{-webkit-transition:opacity .25s cubic-bezier(.16,1,.3,1);-moz-transition:opacity .25s cubic-bezier(.16,1,.3,1);transition:opacity .25s cubic-bezier(.16,1,.3,1)}.modalFadeIn-enter-from,.modalFadeIn-leave-to{opacity:0}.modalFadeIn-enter-to,.modalFadeIn-leave-from{opacity:1}.fw-modal--mask{background-color:var(--v893df9b6);will-change:opacity}@media (prefers-reduced-motion:reduce){.modalFadeIn-enter-active,.modalFadeIn-leave-active{-webkit-transition:none!important;-moz-transition:none!important;transition:none!important}.modalFadeIn-enter-from,.modalFadeIn-leave-to{-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;transform:none!important}}";
 styleInject(css_248z);
 
 __default__.render = render;

package/esm/fw-navigation-menu.js

@@ -1,11 +1,10 @@
-import { defineComponent, ref, watch, createElementVNode, resolveComponent, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, renderSlot, Fragment, renderList, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
-import { s as script$1 } from './fw-button-CnQvA7oM.js';
-import { _ as __default__ } from './fw-popover-B4bsfuxm.js';
-import { k as render$1 } from './index-BsEH8YYr.js';
+import { defineComponent, ref, watch, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, renderSlot, Fragment, renderList, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
+import { s as script$1 } from './fw-button-DZTHZLjk.js';
+import { _ as __default__ } from './fw-popover-BZ-zqUme.js';
+import { k as render$1 } from './index-DHyRsKsZ.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './_rollupPluginBabelHelpers-DODWUb5N.js';
+import './_rollupPluginBabelHelpers-BKlDnZ7n.js';
 import './index-BVcOAKar.js';
-import './uniqueId-DZdGzBh8.js';
 
 var script = defineComponent({
   name: 'FwNavigationMenu',
@@ -101,28 +100,21 @@ var _hoisted_1 = {
   key: 0,
   "class": "hidden lg:flex flex-shrink-0 items-center"
 };
-var _hoisted_2 = /*#__PURE__*/createElementVNode("div", {
-  id: "menu-teleport",
-  "class": "hidden lg:flex items-center gap-x-2"
-}, null, -1);
-var _hoisted_3 = {
+var _hoisted_2 = {
   "class": "flex space-x-1"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
   key: 2,
   "class": "hidden lg:flex items-center justify-center lg:ml-2"
 };
-var _hoisted_5 = {
+var _hoisted_4 = {
   "class": "flex flex-col min-w-[180px] text-left"
 };
-var _hoisted_6 = {
+var _hoisted_5 = {
   key: 3,
   "class": "flex items-center lg:hidden z-[53]"
 };
-var _hoisted_7 = /*#__PURE__*/createElementVNode("span", {
-  "class": "sr-only"
-}, "Open main menu", -1);
-var _hoisted_8 = {
+var _hoisted_6 = {
   "class": "block h-6 w-6",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -130,26 +122,19 @@ var _hoisted_8 = {
   stroke: "currentColor",
   "aria-hidden": "true"
 };
-var _hoisted_9 = ["d"];
-var _hoisted_10 = /*#__PURE__*/createElementVNode("div", {
-  id: "menu-search-teleport",
-  "class": "absolute top-0 left-0 w-full z-[54]"
-}, null, -1);
-var _hoisted_11 = {
+var _hoisted_7 = ["d"];
+var _hoisted_8 = {
   key: 0,
   "class": "flex-none lg:hidden items-start flex-shrink-0 pl-4"
 };
-var _hoisted_12 = {
+var _hoisted_9 = {
   key: 1,
   "class": "w-full flex flex-col space-y-1 pt-6"
 };
-var _hoisted_13 = /*#__PURE__*/createElementVNode("div", {
-  "class": "w-[50px] relative bg-brand-border3 h-px !mt-6 ml-2"
-}, null, -1);
-var _hoisted_14 = {
+var _hoisted_10 = {
   "class": "flex flex-col justify-between pt-6 h-full"
 };
-var _hoisted_15 = {
+var _hoisted_11 = {
   key: 0,
   "class": "w-full flex flex-col space-y-1"
 };
@@ -165,7 +150,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", {
     key: 1,
     "class": normalizeClass(["container hidden lg:flex items-center justify-between", _ctx.paddingClasses])
-  }, [_hoisted_2, createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+  }, [_cache[1] || (_cache[1] = createElementVNode("div", {
+    id: "menu-teleport",
+    "class": "hidden lg:flex items-center gap-x-2"
+  }, null, -1)), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
     return openBlock(), createBlock(_component_FwButton, {
       key: i,
       variant: "transparent",
@@ -182,13 +170,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to", "external", "onClick"]);
-  }), 128))])], 2)) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.actionLabel && _ctx.authenticated ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(_component_FwPopover, {
+  }), 128))])], 2)) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.actionLabel && _ctx.authenticated ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_FwPopover, {
     placement: "bottom-start",
     "show-on-top": "",
     trigger: "click"
   }, {
     content: withCtx(function () {
-      return [createElementVNode("div", _hoisted_5, [createVNode(_component_FwButton, {
+      return [createElementVNode("div", _hoisted_4, [createVNode(_component_FwButton, {
         size: "lg",
         variant: "text",
         rounded: false,
@@ -218,7 +206,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       })];
     }),
     _: 1
-  })])) : createCommentVNode("", true), _ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+  })])) : createCommentVNode("", true), _ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_FwButton, {
     variant: _ctx.isMobileMenuOpen ? 'primary' : 'tertiary',
     size: "sm",
     rounded: false,
@@ -226,15 +214,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": withCtx(function () {
-      return [_hoisted_7, (openBlock(), createElementBlock("svg", _hoisted_8, [createElementVNode("path", {
+      return [_cache[2] || (_cache[2] = createElementVNode("span", {
+        "class": "sr-only"
+      }, "Open main menu", -1)), (openBlock(), createElementBlock("svg", _hoisted_6, [createElementVNode("path", {
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "stroke-width": "2",
         d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
-      }, null, 8, _hoisted_9)]))];
+      }, null, 8, _hoisted_7)]))];
     }),
     _: 1
-  }, 8, ["variant", "class", "onClick"])])) : createCommentVNode("", true)], 2), _hoisted_10, _ctx.menuEnabled ? (openBlock(), createBlock(Transition, {
+  }, 8, ["variant", "class", "onClick"])])) : createCommentVNode("", true)], 2), _cache[4] || (_cache[4] = createElementVNode("div", {
+    id: "menu-search-teleport",
+    "class": "absolute top-0 left-0 w-full z-[54]"
+  }, null, -1)), _ctx.menuEnabled ? (openBlock(), createBlock(Transition, {
     key: 0,
     name: "slideInRight"
   }, {
@@ -242,7 +235,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return [_ctx.menuItems && _ctx.menuItems.length > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", {
         key: 0,
         "class": normalizeClass(["fw-nav-menu--mobile pl-6 pb-12", _ctx.mobileMenuClass])
-      }, [_ctx.$slots.mobileLogo ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "mobileLogo")])) : createCommentVNode("", true), _ctx.additionalMenuItems ? (openBlock(), createElementBlock("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.additionalMenuItems, function (item, i) {
+      }, [_ctx.$slots.mobileLogo ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "mobileLogo")])) : createCommentVNode("", true), _ctx.additionalMenuItems ? (openBlock(), createElementBlock("div", _hoisted_9, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.additionalMenuItems, function (item, i) {
         return openBlock(), createElementBlock(Fragment, {
           key: i
         }, [!item.disabled ? (openBlock(), createBlock(_component_FwButton, {
@@ -263,7 +256,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }),
           _: 2
         }, 1032, ["href", "to", "external", "onClick"])) : createCommentVNode("", true)], 64);
-      }), 128)), _hoisted_13])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14, [_ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+      }), 128)), _cache[3] || (_cache[3] = createElementVNode("div", {
+        "class": "w-[50px] relative bg-brand-border3 h-px !mt-6 ml-2"
+      }, null, -1))])) : createCommentVNode("", true), createElementVNode("div", _hoisted_10, [_ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_11, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
         return openBlock(), createBlock(_component_FwButton, {
           key: i,
           "class": "w-full rounded-md !text-left !pl-2",
@@ -301,8 +296,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   })) : createCommentVNode("", true)], 2);
 }
 
-var css_248z = ".fw-nav-menu--mobile{z-index:52}.fw-nav-menu--mobile,.slideInRight-enter-active{-webkit-transition:right .3s ease-in;-moz-transition:right .3s ease-in;transition:right .3s ease-in}.slideInRight-enter-active{-webkit-animation:slideInRight .3s;-moz-animation:slideInRight .3s;animation:slideInRight .3s}.slideInRight-leave-active{animation:slideInRight .3s reverse;-webkit-transition:right .3s ease-in-out;-moz-transition:right .3s ease-in-out;transition:right .3s ease-in-out}@-webkit-keyframes slideInRight{0%{right:100%}to{right:0}}@-moz-keyframes slideInRight{0%{right:100%}to{right:0}}@keyframes slideInRight{0%{right:100%}to{right:0}}";
-var stylesheet = ".fw-nav-menu--mobile{z-index:52}.fw-nav-menu--mobile,.slideInRight-enter-active{-webkit-transition:right .3s ease-in;-moz-transition:right .3s ease-in;transition:right .3s ease-in}.slideInRight-enter-active{-webkit-animation:slideInRight .3s;-moz-animation:slideInRight .3s;animation:slideInRight .3s}.slideInRight-leave-active{animation:slideInRight .3s reverse;-webkit-transition:right .3s ease-in-out;-moz-transition:right .3s ease-in-out;transition:right .3s ease-in-out}@-webkit-keyframes slideInRight{0%{right:100%}to{right:0}}@-moz-keyframes slideInRight{0%{right:100%}to{right:0}}@keyframes slideInRight{0%{right:100%}to{right:0}}";
+var css_248z = ".fw-nav-menu--mobile{-webkit-transition:opacity .24s cubic-bezier(.22,.61,.36,1),-webkit-transform .24s cubic-bezier(.22,.61,.36,1);transition:opacity .24s cubic-bezier(.22,.61,.36,1),-webkit-transform .24s cubic-bezier(.22,.61,.36,1);-moz-transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s cubic-bezier(.22,.61,.36,1),-moz-transform .24s cubic-bezier(.22,.61,.36,1);transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s cubic-bezier(.22,.61,.36,1);transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s cubic-bezier(.22,.61,.36,1),-webkit-transform .24s cubic-bezier(.22,.61,.36,1),-moz-transform .24s cubic-bezier(.22,.61,.36,1);will-change:transform;z-index:52}.slideInRight-enter-from,.slideInRight-leave-to{opacity:.98;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.slideInRight-enter-to,.slideInRight-leave-from{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}@media (prefers-reduced-motion:reduce){.slideInRight-enter-active,.slideInRight-leave-active{-webkit-transition-duration:.01ms!important;-moz-transition-duration:.01ms!important;transition-duration:.01ms!important}}";
+var stylesheet = ".fw-nav-menu--mobile{-webkit-transition:opacity .24s cubic-bezier(.22,.61,.36,1),-webkit-transform .24s cubic-bezier(.22,.61,.36,1);transition:opacity .24s cubic-bezier(.22,.61,.36,1),-webkit-transform .24s cubic-bezier(.22,.61,.36,1);-moz-transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s cubic-bezier(.22,.61,.36,1),-moz-transform .24s cubic-bezier(.22,.61,.36,1);transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s cubic-bezier(.22,.61,.36,1);transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s cubic-bezier(.22,.61,.36,1),-webkit-transform .24s cubic-bezier(.22,.61,.36,1),-moz-transform .24s cubic-bezier(.22,.61,.36,1);will-change:transform;z-index:52}.slideInRight-enter-from,.slideInRight-leave-to{opacity:.98;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.slideInRight-enter-to,.slideInRight-leave-from{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}@media (prefers-reduced-motion:reduce){.slideInRight-enter-active,.slideInRight-leave-active{-webkit-transition-duration:.01ms!important;-moz-transition-duration:.01ms!important;transition-duration:.01ms!important}}";
 styleInject(css_248z);
 
 script.render = render;

package/esm/fw-popover-BZ-zqUme.js

@@ -0,0 +1,330 @@
+import { c as _asyncToGenerator, d as _regeneratorRuntime, e as _defineProperty } from './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import { defineComponent, ref, computed, nextTick, watch, onBeforeUnmount, onMounted, useCssVars, createElementBlock, openBlock, normalizeClass, createElementVNode, withDirectives, renderSlot, createCommentVNode, createTextVNode, toDisplayString, vShow } from 'vue';
+import { c as createPopper } from './index-BVcOAKar.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var idSeed = 0;
+var genId = function genId() {
+  return "fw-popover-".concat(++idSeed);
+};
+var __default__ = defineComponent({
+  name: 'FwPopover',
+  props: {
+    /**
+     * The title of the popover
+     */
+    title: String,
+    /**
+     * The side of the target element the popover should be placed against. Accepts 'top', 'right', 'bottom' and 'left'
+     */
+    placement: {
+      type: String,
+      "default": 'bottom',
+      validator: function validator(value) {
+        return ['top', 'right', 'bottom', 'left', 'auto', 'auto-start', 'auto-end', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end'].includes(value);
+      }
+    },
+    /**
+     * Whether to use `fixed` or `absolute` positioning.
+     * Absolute is more performant if you have a lot of popovers; fixed is more robust
+     */
+    position: {
+      type: String,
+      "default": 'absolute',
+      validator: function validator(value) {
+        return ['fixed', 'absolute'].includes(value);
+      }
+    },
+    /**
+     * The input event which causes the popover to show. Accepts 'click' and 'hover' & 'focus'
+     */
+    trigger: {
+      type: String,
+      "default": 'click',
+      validator: function validator(value) {
+        return ['click', 'hover', 'focus'].includes(value);
+      }
+    },
+    /**
+     * Whether to show component on top of all components by setting the highest z-index
+     */
+    showOnTop: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Close the popover automatically when the user clicks inside of the popover
+     */
+    closeOnClick: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Close the popover automatically when the user clicks outside of the popover
+     */
+    closeOnClickOutside: {
+      type: Boolean,
+      "default": true
+    },
+    /**
+     * The text alignment of the popover content should be placed against. Accepts 'center', 'right' and 'left'
+     */
+    textAlign: {
+      type: String,
+      "default": 'left',
+      validator: function validator(value) {
+        return ['center', 'left', 'right'].includes(value);
+      }
+    },
+    /**
+     * Whether to show the arrow
+     **/
+    showArrow: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  emits: ['closed'],
+  setup: function setup(props, ctx) {
+    var targetElement = ref(null);
+    var contentElement = ref(null);
+    var popper = ref(null);
+    var visible = ref(false);
+    var computedVisible = computed(function () {
+      return visible.value && (!!props.title || !!ctx.slots.content);
+    });
+    var spacingSize = computed(function () {
+      return props.showArrow ? '12px' : '2px';
+    });
+    var hideTimer;
+    var clearHideTimer = function clearHideTimer() {
+      if (hideTimer) {
+        window.clearTimeout(hideTimer);
+        hideTimer = undefined;
+      }
+    };
+    var ensurePopper = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(popper.value || !targetElement.value || !contentElement.value)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              _context.next = 4;
+              return nextTick();
+            case 4:
+              // ensure content is in DOM (esp. with Transition/Teleport)
+              popper.value = createPopper(targetElement.value, contentElement.value, {
+                placement: props.placement,
+                strategy: props.position,
+                modifiers: [{
+                  name: 'offset',
+                  options: {
+                    offset: [0, props.showArrow ? 12 : 2]
+                  }
+                }, {
+                  name: 'arrow',
+                  options: {
+                    padding: 5
+                  }
+                }]
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function ensurePopper() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    var destroyPopper = function destroyPopper() {
+      var _popper$value;
+      (_popper$value = popper.value) === null || _popper$value === void 0 || _popper$value.destroy();
+      popper.value = null;
+    };
+    var scheduleUpdate = function scheduleUpdate() {
+      if (!popper.value) return;
+      requestAnimationFrame(function () {
+        var _popper$value2;
+        return (_popper$value2 = popper.value) === null || _popper$value2 === void 0 ? void 0 : _popper$value2.update();
+      });
+    };
+    var open = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              clearHideTimer();
+              if (!(props.trigger === 'hover' || props.trigger === 'focus' || props.trigger === 'click')) {
+                _context2.next = 6;
+                break;
+              }
+              visible.value = true;
+              _context2.next = 5;
+              return ensurePopper();
+            case 5:
+              scheduleUpdate();
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function open() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var close = function close() {
+      clearHideTimer();
+      visible.value = false;
+      destroyPopper();
+      ctx.emit('closed');
+    };
+    var onEnter = function onEnter() {
+      if (props.trigger === 'hover' || props.trigger === 'focus') open();
+    };
+    var onLeave = function onLeave() {
+      if (props.trigger === 'hover' || props.trigger === 'focus') {
+        clearHideTimer();
+        hideTimer = window.setTimeout(function () {
+          return close();
+        }, 150);
+      }
+    };
+    var onClick = function onClick() {
+      if (props.trigger !== 'click') return;
+      if (computedVisible.value) {
+        close();
+      } else {
+        open();
+      }
+    };
+    var onClickOutside = function onClickOutside(e) {
+      var _contentElement$value, _targetElement$value;
+      if (!props.closeOnClickOutside) return;
+      var t = e.target;
+      if (!t) return;
+      if (!((_contentElement$value = contentElement.value) !== null && _contentElement$value !== void 0 && _contentElement$value.contains(t)) && !((_targetElement$value = targetElement.value) !== null && _targetElement$value !== void 0 && _targetElement$value.contains(t))) {
+        close();
+      }
+    };
+    var autoCloseContent = function autoCloseContent(e) {
+      var _contentElement$value2;
+      if (!props.closeOnClick) return;
+      if ((_contentElement$value2 = contentElement.value) !== null && _contentElement$value2 !== void 0 && _contentElement$value2.contains(e.target)) close();
+    };
+    // Only attach listener while visible
+    watch(computedVisible, function (isVisible) {
+      if (isVisible) {
+        document.addEventListener('click', onClickOutside, {
+          passive: true
+        });
+        scheduleUpdate();
+      } else {
+        document.removeEventListener('click', onClickOutside);
+      }
+    });
+    onBeforeUnmount(function () {
+      document.removeEventListener('click', onClickOutside);
+      clearHideTimer();
+      destroyPopper();
+    });
+    var contentElementId = genId();
+    var setTargetElementAriaDescribedBy = function setTargetElementAriaDescribedBy() {
+      var host = targetElement.value;
+      if (!host) return;
+      // If slot renders multiple nodes, pick the first element child
+      var firstEl = host.firstElementChild;
+      if (!firstEl) return;
+      if (!firstEl.hasAttribute('aria-describedby')) {
+        firstEl.setAttribute('aria-describedby', contentElementId);
+      }
+    };
+    onMounted(setTargetElementAriaDescribedBy);
+    watch(function () {
+      var _ctx$slots$default, _ctx$slots;
+      return (_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots);
+    }, setTargetElementAriaDescribedBy);
+    return {
+      targetElement: targetElement,
+      contentElement: contentElement,
+      contentElementId: contentElementId,
+      computedVisible: computedVisible,
+      onEnter: onEnter,
+      onLeave: onLeave,
+      onClick: onClick,
+      autoCloseContent: autoCloseContent,
+      spacingSize: spacingSize
+    };
+  }
+});
+var __injectCSSVars__ = function __injectCSSVars__() {
+  useCssVars(function (_ctx) {
+    return {
+      "ea05ad2a": _ctx.spacingSize
+    };
+  });
+};
+var __setup__ = __default__.setup;
+__default__.setup = __setup__ ? function (props, ctx) {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+
+var _hoisted_1 = ["id", "aria-hidden", "data-placement"];
+var _hoisted_2 = {
+  key: 0,
+  "data-popper-arrow": "",
+  "class": "fw-popover__arrow after:content-[''] after:bg-white after:border after:border-grey-light after:absolute"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    "class": normalizeClass(["fw-popover", _defineProperty(_defineProperty({
+      'fw-popover--visible': _ctx.computedVisible
+    }, "fw-popover--placement-".concat(_ctx.placement), !!_ctx.placement), 'fw-visibile-on-top', _ctx.showOnTop)]),
+    onPointerenter: _cache[2] || (_cache[2] = function () {
+      return _ctx.onEnter && _ctx.onEnter.apply(_ctx, arguments);
+    }),
+    onPointerleave: _cache[3] || (_cache[3] = function () {
+      return _ctx.onLeave && _ctx.onLeave.apply(_ctx, arguments);
+    }),
+    onFocusin: _cache[4] || (_cache[4] = function () {
+      return _ctx.onEnter && _ctx.onEnter.apply(_ctx, arguments);
+    }),
+    onFocusout: _cache[5] || (_cache[5] = function () {
+      return _ctx.onLeave && _ctx.onLeave.apply(_ctx, arguments);
+    })
+  }, [createElementVNode("div", {
+    ref: "targetElement",
+    "class": "fw-popover__target",
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
+    })
+  }, [renderSlot(_ctx.$slots, "default")], 512), withDirectives(createElementVNode("div", {
+    id: _ctx.contentElementId,
+    ref: "contentElement",
+    "aria-hidden": !_ctx.computedVisible,
+    "class": normalizeClass(["fw-popover__content rounded bg-white border border-grey-light shadow-card", _defineProperty({}, "fw-popover__content--".concat(_ctx.textAlign), !!_ctx.textAlign)]),
+    onClick: _cache[1] || (_cache[1] = function () {
+      return _ctx.autoCloseContent && _ctx.autoCloseContent.apply(_ctx, arguments);
+    }),
+    "data-placement": _ctx.placement
+  }, [renderSlot(_ctx.$slots, "content", {}, function () {
+    return [createTextVNode(toDisplayString(_ctx.title), 1)];
+  }), _ctx.showArrow ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true)], 10, _hoisted_1), [[vShow, _ctx.computedVisible]])], 34);
+}
+
+var css_248z = ".fw-popover__content[data-v-6c5e1ef8]{-webkit-transition:opacity .22s ease;-moz-transition:opacity .22s ease;transition:opacity .22s ease;white-space:normal;will-change:opacity,transform;z-index:999999}.fw-popover__content--center[data-v-6c5e1ef8]{text-align:center}.fw-popover__content--left[data-v-6c5e1ef8]{text-align:left}.fw-popover__content--right[data-v-6c5e1ef8]{text-align:right}.fw-popover__arrow[data-v-6c5e1ef8]:after{height:var(--ea05ad2a);left:0;top:0;-webkit-transform:translate(-50%,-50%) rotate(45deg);-moz-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:var(--ea05ad2a)}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6c5e1ef8]{bottom:-1px}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-left:none;border-top:none}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6c5e1ef8]{left:-1px}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-right:none;border-top:none}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6c5e1ef8]{top:-1px}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-bottom:none;border-right:none}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6c5e1ef8]{right:-1px}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-bottom:none;border-left:none}";
+var stylesheet = ".fw-popover__content[data-v-6c5e1ef8]{-webkit-transition:opacity .22s ease;-moz-transition:opacity .22s ease;transition:opacity .22s ease;white-space:normal;will-change:opacity,transform;z-index:999999}.fw-popover__content--center[data-v-6c5e1ef8]{text-align:center}.fw-popover__content--left[data-v-6c5e1ef8]{text-align:left}.fw-popover__content--right[data-v-6c5e1ef8]{text-align:right}.fw-popover__arrow[data-v-6c5e1ef8]:after{height:var(--ea05ad2a);left:0;top:0;-webkit-transform:translate(-50%,-50%) rotate(45deg);-moz-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:var(--ea05ad2a)}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6c5e1ef8]{bottom:-1px}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-left:none;border-top:none}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6c5e1ef8]{left:-1px}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-right:none;border-top:none}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6c5e1ef8]{top:-1px}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-bottom:none;border-right:none}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6c5e1ef8]{right:-1px}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6c5e1ef8]:after{border-bottom:none;border-left:none}";
+styleInject(css_248z);
+
+__default__.render = render;
+__default__.__scopeId = "data-v-6c5e1ef8";
+
+export { __default__ as _ };

package/esm/fw-popover.js

@@ -1,6 +1,5 @@
-export { _ as FwPopover } from './fw-popover-B4bsfuxm.js';
-import './_rollupPluginBabelHelpers-DODWUb5N.js';
+export { _ as FwPopover } from './fw-popover-BZ-zqUme.js';
+import './_rollupPluginBabelHelpers-BKlDnZ7n.js';
 import 'vue';
 import './index-BVcOAKar.js';
-import './uniqueId-DZdGzBh8.js';
 import './style-inject.es-tgCJW-Cu.js';

package/esm/fw-progress-bar.js

@@ -1,5 +1,5 @@
 import { defineComponent, resolveComponent, createElementBlock, openBlock, createElementVNode, Fragment, renderList, normalizeClass, createCommentVNode, createBlock, toDisplayString, normalizeStyle } from 'vue';
-import { b as render$1 } from './index-BsEH8YYr.js';
+import { a as render$1 } from './index-DHyRsKsZ.js';
 
 var script = defineComponent({
   name: 'FwProgressBar',