@frollo/frollo-web-ui 0.0.4 → 0.0.5

package/cjs/index.js

@@ -1259,7 +1259,7 @@ $$1({ target: 'Object', stat: true }, {
   entries: function entries(O) {
     return $entries(O);
   }
-});var script$1 = vue.defineComponent({
+});var script$2 = vue.defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -1279,24 +1279,24 @@ $$1({ target: 'Object', stat: true }, {
 });var _hoisted_1$1 = {
   "class": "fw-card shadow rounded-lg"
 };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
   key: 0,
   "class": "fw-card--header text-lg px-8 py-4 font-bold bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_3 = {
+var _hoisted_3$1 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_4 = {
+var _hoisted_4$1 = {
   key: 1
 };
-var _hoisted_5 = {
+var _hoisted_5$1 = {
   key: 1,
   "class": "p-8"
 };
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_2, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)]);
-}script$1.render = render$1;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS = descriptors;
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_2$1, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)]);
+}script$2.render = render$2;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS = descriptors;
 var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
 var definePropertyModule$1 = objectDefineProperty;
 var anObject$1 = anObject$4;
@@ -1432,7 +1432,7 @@ $({ target: 'Array', proto: true }, {
 });
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('includes');var script = vue.defineComponent({
+addToUnscopables('includes');var script$1 = vue.defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -1467,7 +1467,7 @@ addToUnscopables('includes');var script = vue.defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1479,9 +1479,9 @@ addToUnscopables('includes');var script = vue.defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1497,6 +1497,11 @@ addToUnscopables('includes');var script = vue.defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = vue.ref({
@@ -1558,6 +1563,11 @@ addToUnscopables('includes');var script = vue.defineComponent({
       return ctx.emit('focusout', e);
     };
 
+    var tagName = vue.computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
     return {
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
@@ -1567,33 +1577,217 @@ addToUnscopables('includes');var script = vue.defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
-});var _hoisted_1 = ["to", "href"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("button", {
-    "class": vue.normalizeClass(["fw-button font-bold rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: "button",
+});function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
+    "class": vue.normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
     to: _ctx.to,
     href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.renderSlot(_ctx.$slots, "default")];
     }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+}script$1.render = render$1;var script = vue.defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = vue.ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/vue.createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
+};
+var _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = vue.resolveComponent("FwButton");
+
+  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [vue.createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [vue.createElementVNode("div", _hoisted_5, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+    return vue.openBlock(), vue.createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": vue.withCtx(function () {
+        return [vue.createTextVNode(vue.toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.createTextVNode(vue.toDisplayString(_ctx.actionLabel), 1)];
     }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_7, [vue.createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": vue.withCtx(function () {
+      return [_hoisted_8, (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9, [vue.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_10)]))];
     }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick"])])]), vue.createVNode(vue.Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": vue.withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [vue.createElementVNode("div", _hoisted_12, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+        return vue.openBlock(), vue.createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": vue.withCtx(function () {
+            return [vue.createTextVNode(vue.toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (vue.openBlock(), vue.createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": vue.withCtx(function () {
+          return [vue.createTextVNode(vue.toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)];
     }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
-}script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$1,FwButton:script});var install = function install(app) {
+    _: 1
+  })]);
+}function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$2,FwButton:script$1,FwNavigationMenu:script});var install = function install(app) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         componentName = _ref2[0],
@@ -1601,7 +1795,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
     app.component(componentName, component);
   });
-};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$1,FwButton:script});Object.entries(components).forEach(function (_ref) {
+};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$2,FwButton:script$1,FwNavigationMenu:script});Object.entries(components).forEach(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       componentName = _ref2[0],
       component = _ref2[1];

package/esm/{index-758e7e1e.js → fw-button-0f8956b5.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1183,7 +1183,7 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1195,9 +1195,9 @@ var script = defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1213,6 +1213,11 @@ var script = defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = ref({
@@ -1274,6 +1279,11 @@ var script = defineComponent({
       return ctx.emit('focusout', e);
     };
 
+    var tagName = computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
     return {
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
@@ -1283,34 +1293,29 @@ var script = defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
 });
 
-var _hoisted_1 = ["to", "href"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("button", {
-    "class": normalizeClass(["fw-button font-bold rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: "button",
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
     to: _ctx.to,
     href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
-    }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
-    }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
-    }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default")];
     }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
 }
 
 script.render = render;

package/esm/fw-button.js

@@ -1,2 +1,2 @@
-export { u as FwButton } from './index-758e7e1e.js';
+export { u as FwButton } from './fw-button-0f8956b5.js';
 import 'vue';

package/esm/fw-navigation-menu.js

@@ -0,0 +1,203 @@
+import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
+import { u as script$1 } from './fw-button-0f8956b5.js';
+
+var script = defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});
+
+var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
+};
+var _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = resolveComponent("FwButton");
+
+  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+    return openBlock(), createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": withCtx(function () {
+      return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+    }),
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": withCtx(function () {
+      return [_hoisted_8, (openBlock(), createElementBlock("svg", _hoisted_9, [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_10)]))];
+    }),
+    _: 1
+  }, 8, ["onClick"])])]), createVNode(Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+        return openBlock(), createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": withCtx(function () {
+            return [createTextVNode(toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : createCommentVNode("", true)])) : createCommentVNode("", true)];
+    }),
+    _: 1
+  })]);
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as FwNavigationMenu };

package/esm/index.js

@@ -1,7 +1,10 @@
-import { f as functionUncurryThis, a as aCallable$1, b as functionBindNative, c as classofRaw$1, w as wellKnownSymbol$3, g as global$3, i as isCallable$2, d as fails$2, e as getBuiltIn$1, h as inspectSource$1, j as isObject$1, k as indexedObject, t as toObject$1, l as lengthOfArrayLike$1, _ as _export, r as redefine$1, m as documentCreateElement$1, n as createNonEnumerableProperty$1, o as descriptors, p as objectKeys$1, q as toIndexedObject$1, s as objectPropertyIsEnumerable, u as script$1 } from './index-758e7e1e.js';
-export { u as FwButton } from './index-758e7e1e.js';
+import { f as functionUncurryThis, a as aCallable$1, b as functionBindNative, c as classofRaw$1, w as wellKnownSymbol$3, g as global$3, i as isCallable$2, d as fails$2, e as getBuiltIn$1, h as inspectSource$1, j as isObject$1, k as indexedObject, t as toObject$1, l as lengthOfArrayLike$1, _ as _export, r as redefine$1, m as documentCreateElement$1, n as createNonEnumerableProperty$1, o as descriptors, p as objectKeys$1, q as toIndexedObject$1, s as objectPropertyIsEnumerable, u as script$1 } from './fw-button-0f8956b5.js';
+export { u as FwButton } from './fw-button-0f8956b5.js';
 import { FwCard as script } from './fw-card.js';
 export { FwCard } from './fw-card.js';
+import './fw-button.js';
+import { FwNavigationMenu as script$2 } from './fw-navigation-menu.js';
+export { FwNavigationMenu } from './fw-navigation-menu.js';
 import 'vue';
 
 function _arrayWithHoles(arr) {
@@ -468,7 +471,8 @@ $({ target: 'Object', stat: true }, {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   FwCard: script,
-  FwButton: script$1
+  FwButton: script$1,
+  FwNavigationMenu: script$2
 });
 
 var install = function install(app) {

package/frollo-web-ui.esm.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, renderSlot, ref, computed, normalizeClass } from 'vue';
+import { defineComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, renderSlot, ref, computed, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, resolveComponent, Fragment, renderList, createTextVNode, createVNode, Transition } from 'vue';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -1459,7 +1459,7 @@ $$1({ target: 'Object', stat: true }, {
   }
 });
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -1481,26 +1481,26 @@ var script$1 = defineComponent({
 var _hoisted_1$1 = {
   "class": "fw-card shadow rounded-lg"
 };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
   key: 0,
   "class": "fw-card--header text-lg px-8 py-4 font-bold bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_3 = {
+var _hoisted_3$1 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_4 = {
+var _hoisted_4$1 = {
   key: 1
 };
-var _hoisted_5 = {
+var _hoisted_5$1 = {
   key: 1,
   "class": "p-8"
 };
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_2, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]);
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_2$1, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]);
 }
 
-script$1.render = render$1;
+script$2.render = render$2;
 
 var es_array_includes = {};
 
@@ -1652,7 +1652,7 @@ $({ target: 'Array', proto: true }, {
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 addToUnscopables('includes');
 
-var script = defineComponent({
+var script$1 = defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -1687,7 +1687,7 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1699,9 +1699,9 @@ var script = defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1717,6 +1717,11 @@ var script = defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = ref({
@@ -1778,6 +1783,11 @@ var script = defineComponent({
       return ctx.emit('focusout', e);
     };
 
+    var tagName = computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
     return {
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
@@ -1787,42 +1797,237 @@ var script = defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
 });
 
-var _hoisted_1 = ["to", "href"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("button", {
-    "class": normalizeClass(["fw-button font-bold rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
-    type: "button",
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
     to: _ctx.to,
     href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default")];
     }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+}
+
+script$1.render = render$1;
+
+var script = defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});
+
+var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
+};
+var _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = resolveComponent("FwButton");
+
+  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+    return openBlock(), createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": withCtx(function () {
+      return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
     }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": withCtx(function () {
+      return [_hoisted_8, (openBlock(), createElementBlock("svg", _hoisted_9, [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_10)]))];
     }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick"])])]), createVNode(Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+        return openBlock(), createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": withCtx(function () {
+            return [createTextVNode(toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : createCommentVNode("", true)])) : createCommentVNode("", true)];
     }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+    _: 1
+  })]);
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
 }
 
+var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);
+
 script.render = render;
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  FwCard: script$1,
-  FwButton: script
+  FwCard: script$2,
+  FwButton: script$1,
+  FwNavigationMenu: script
 });
 
 var install = function install(app) {
@@ -1835,4 +2040,4 @@ var install = function install(app) {
   });
 };
 
-export { script as FwButton, script$1 as FwCard, install as default };
+export { script$1 as FwButton, script$2 as FwCard, script as FwNavigationMenu, install as default };

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { PropType, Plugin } from 'vue';
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -29,7 +29,7 @@ declare const _default$1: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
+declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text';
 interface ButtonDefinition {
     text: string;
     background: string;
@@ -48,7 +48,7 @@ interface FwButtonProps {
     size?: ButtonSize;
     variant?: ButtonVariantName;
 }
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -86,6 +86,7 @@ declare const _default: vue.DefineComponent<{
     onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    tagName: vue.ComputedRef<"router-link" | "a" | "button">;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
      * A `router-link` path or object
@@ -125,6 +126,49 @@ declare const _default: vue.DefineComponent<{
     variant: ButtonVariantName;
 }>;
 
+interface NavMenuItem {
+    to?: string | object;
+    href?: string;
+    label: string;
+}
+declare const _default: vue.DefineComponent<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}, {
+    isMobileMenuOpen: vue.Ref<boolean>;
+    toggleMobileMenu: () => boolean;
+    actionClicked: () => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "action"[], "action", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}>> & {
+    onAction?: ((...args: any[]) => any) | undefined;
+}, {}>;
+
 declare const install: Exclude<Plugin['install'], undefined>;
 
-export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default as FwButton, FwButtonProps, _default$1 as FwCard, install as default };
+export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default$1 as FwButton, FwButtonProps, _default$2 as FwCard, _default as FwNavigationMenu, NavMenuItem, install as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./tailwind.config.js": "./tailwind.config.js",

package/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
       white: '#ffffff',
       black: '#000000',
       transparent: 'transparent',
-      body: '#2C3E50',
+      body: '#000000',
       error: '#eb5757',
       success: '#00c48c',
       grey: {

package/types/components/fw-button/fw-button.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
+export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text';
 export interface ButtonDefinition {
     text: string;
     background: string;
@@ -56,6 +56,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    tagName: import("vue").ComputedRef<"router-link" | "a" | "button">;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * A `router-link` path or object

package/types/components/fw-navigation-menu/fw-navigation-menu.vue.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+export interface NavMenuItem {
+    to?: string | object;
+    href?: string;
+    label: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}, {
+    isMobileMenuOpen: import("vue").Ref<boolean>;
+    toggleMobileMenu: () => boolean;
+    actionClicked: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "action"[], "action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}>> & {
+    onAction?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/types/components/fw-navigation-menu/index.d.ts

@@ -0,0 +1,2 @@
+import FwNavigationMenu from './fw-navigation-menu.vue';
+export { FwNavigationMenu };

package/types/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './fw-card';
 export * from './fw-button';
+export * from './fw-navigation-menu';

package/types/index-types.esm.d.ts

@@ -3,3 +3,4 @@ export default install;
 export * from './components';
 export * from './components/fw-card/fw-card.vue';
 export * from './components/fw-button/fw-button.vue';
+export * from './components/fw-navigation-menu/fw-navigation-menu.vue';