@lukso/web-components 1.57.1 → 1.58.0

package/dist/components/index.cjs

@@ -23,15 +23,15 @@ const components_luksoTest_index = require('./lukso-test/index.cjs');
 const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../index-4964f1aa.cjs');
 require('../cn-4ec0bd94.cjs');
 require('../query-assigned-elements-1d5d9d4c.cjs');
 require('../state-f73a8b4f.cjs');
 require('../index-e8741080.cjs');
 require('../tailwind-config.cjs');
-require('../style-map-2179a7d6.cjs');
+require('../style-map-0e5b61bc.cjs');
 require('../directive-8278ab14.cjs');
-require('../index-049072ff.cjs');
+require('../index-b1813aa6.cjs');
 require('../index-e9668573.cjs');
 
 

package/dist/components/index.js

@@ -19,13 +19,13 @@ export { LuksoTest } from './lukso-test/index.js';
 export { LuksoTooltip } from './lukso-tooltip/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-b654b619.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-2cbce78e.js';
 import '../cn-616567d4.js';
 import '../query-assigned-elements-5d94572f.js';
 import '../state-0a779257.js';
 import '../index-c55a1069.js';
 import '../tailwind-config.js';
-import '../style-map-36288ffe.js';
+import '../style-map-ec917798.js';
 import '../directive-2bb7789e.js';
-import '../index-614947b0.js';
+import '../index-61181f2e.js';
 import '../index-5e194caf.js';

package/dist/components/lukso-button/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e8741080.cjs');

package/dist/components/lukso-button/index.js

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-b654b619.js';
+import { T as TailwindStyledElement, x, A } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { s as se } from '../../index-c55a1069.js';

package/dist/components/lukso-card/index.cjs

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-2179a7d6.cjs');
+const styleMap = require('../../style-map-0e5b61bc.cjs');
 const index = require('../../index-e8741080.cjs');
 require('../lukso-profile/index.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-4ec0bd94.cjs');
-const index$1 = require('../../index-049072ff.cjs');
+const index$1 = require('../../index-b1813aa6.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../index-e9668573.cjs');
 

package/dist/components/lukso-card/index.js

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-b654b619.js';
+import { T as TailwindStyledElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-36288ffe.js';
+import { o } from '../../style-map-ec917798.js';
 import { s as se } from '../../index-c55a1069.js';
 import '../lukso-profile/index.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-616567d4.js';
-import { c as customStyleMap } from '../../index-614947b0.js';
+import { c as customStyleMap } from '../../index-61181f2e.js';
 import '../../directive-2bb7789e.js';
 import '../../index-5e194caf.js';
 

package/dist/components/lukso-checkbox/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');

package/dist/components/lukso-checkbox/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-b654b619.js';
+import { a as TailwindElement, x, A } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

package/dist/components/lukso-footer/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 
 var __defProp = Object.defineProperty;

package/dist/components/lukso-footer/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-b654b619.js';
+import { a as TailwindElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 
 var __defProp = Object.defineProperty;

package/dist/components/lukso-icon/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-2179a7d6.cjs');
+const styleMap = require('../../style-map-0e5b61bc.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

package/dist/components/lukso-icon/index.js

@@ -1,6 +1,6 @@
-import { x, T as TailwindStyledElement } from '../../index-b654b619.js';
+import { x, T as TailwindStyledElement } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-36288ffe.js';
+import { o } from '../../style-map-ec917798.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";

package/dist/components/lukso-input/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');

package/dist/components/lukso-input/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-b654b619.js';
+import { a as TailwindElement, x, A } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

package/dist/components/lukso-modal/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');

package/dist/components/lukso-modal/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-b654b619.js';
+import { a as TailwindElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';

package/dist/components/lukso-navbar/index.cjs

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-eee61b48.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
-const index = require('../../index-e9668573.cjs');
+const index = require('../../index-e8741080.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
+require('../../style-map-0e5b61bc.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-2179a7d6.cjs');
+require('../../index-e9668573.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -33,11 +34,76 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.icon = "";
     this.hasMenu = false;
     this.logoUrl = "";
+    this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.centerStyles = `justify-center`;
-    this.stickyStyles = `sticky top-0 z-[1000]`;
-    this.transparentStyles = `!bg-transparent !shadow-none`;
+    this.navbarStyles = index.se({
+      slots: {
+        wrapper: `bg-neutral-100 shadow-pink-drop-shadow h-78 grid items-center`,
+        mobileMenuWrapper: `items-center justify-end pr-6 flex gap-2`,
+        mobileMenuTrigger: `w-[18px] h-[2px] rounded-4 bg-neutral-20 transition-all
+        before:content-[''] before:absolute before:w-[18px] before:h-[2px] before:bg-neutral-20 before:rounded-4 before:transition-all before:-translate-y-[6px]
+        after:content-[''] after:absolute after:w-[18px] after:h-[2px] after:bg-neutral-20 after:rounded-4 after:transition-all after:translate-y-[6px]`,
+        mobileMenuDropdown: `fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center items-center flex`,
+        desktopMenuWrapper: `items-center justify-end pr-10 no-underline hidden`,
+        desktopCenterWrapper: `items-center hidden`
+      },
+      variants: {
+        isCenter: {
+          true: {
+            wrapper: `justify-center`
+          },
+          false: {
+            wrapper: `grid-cols-[minmax(max-content,35%)_auto_minmax(max-content,35%)]`
+          }
+        },
+        isSticky: {
+          true: {
+            wrapper: `sticky top-0 z-[1000]`
+          }
+        },
+        isTransparent: {
+          true: {
+            wrapper: `!bg-transparent !shadow-none`
+          }
+        },
+        mobileBreakpoint: {
+          sm: {
+            mobileMenuWrapper: `sm:hidden`,
+            mobileMenuDropdown: `sm:hidden`,
+            desktopMenuWrapper: `sm:flex`,
+            desktopCenterWrapper: `sm:flex`
+          },
+          md: {
+            mobileMenuWrapper: `md:hidden`,
+            mobileMenuDropdown: `md:hidden`,
+            desktopMenuWrapper: `md:flex`,
+            desktopCenterWrapper: `md:flex`
+          },
+          lg: {
+            mobileMenuWrapper: `lg:hidden`,
+            mobileMenuDropdown: `lg:hidden`,
+            desktopMenuWrapper: `lg:flex`,
+            desktopCenterWrapper: `lg:flex`
+          },
+          xl: {
+            mobileMenuWrapper: `xl:hidden`,
+            mobileMenuDropdown: `xl:hidden`,
+            desktopMenuWrapper: `xl:flex`,
+            desktopCenterWrapper: `xl:flex`
+          }
+        },
+        isMenuOpen: {
+          true: {
+            mobileMenuTrigger: `!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]`,
+            mobileMenuDropdown: `animate-fade-in animation-duration-150`
+          },
+          false: {
+            mobileMenuDropdown: `!hidden`
+          }
+        }
+      }
+    });
   }
   handleBrandClick() {
     const event = new CustomEvent("on-brand-click", {
@@ -62,53 +128,52 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     }
   }
   desktopMenuTemplate() {
-    return shared_tailwindElement_index.x`<div
-      class="items-center justify-end pr-10 no-underline hidden md:flex"
-    >
-      <slot name="desktop"></slot>
+    const { desktopMenuWrapper } = this.navbarStyles({
+      mobileBreakpoint: this.mobileBreakpoint
+    });
+    return shared_tailwindElement_index.x` <div class=${desktopMenuWrapper()}>
+      <slot name="desktop-menu"></slot>
+    </div>`;
+  }
+  desktopCenterTemplate() {
+    const { desktopCenterWrapper } = this.navbarStyles({
+      mobileBreakpoint: this.mobileBreakpoint
+    });
+    return shared_tailwindElement_index.x`<div class=${desktopCenterWrapper()}>
+      <slot name="desktop-center"></slot>
     </div>`;
   }
   mobileMenuTemplate() {
-    return shared_tailwindElement_index.x`<div class="items-center justify-end pr-6 flex md:hidden">
-      <div
-        class="flex items-center justify-center w-8 h-8 cursor-pointer"
-        @click=${this.handleMenuToggle}
-      >
+    const { mobileMenuTrigger, mobileMenuDropdown, mobileMenuWrapper } = this.navbarStyles({
+      isMenuOpen: this.isMenuOpen,
+      mobileBreakpoint: this.mobileBreakpoint
+    });
+    return shared_tailwindElement_index.x`<div></div>
+      <div class=${mobileMenuWrapper()}>
+        <div class="flex">
+          <slot name="mobile-icons"></slot>
+        </div>
         <div
-          class="w-[18px] h-[2px] rounded-4 bg-neutral-20 transition-all
-          before:content-[''] before:absolute before:w-[18px] before:h-[2px] before:bg-neutral-20 before:rounded-4 before:transition-all before:-translate-y-[6px]
-          after:content-[''] after:absolute after:w-[18px] after:h-[2px] after:bg-neutral-20 after:rounded-4 after:transition-all after:translate-y-[6px]
-          ${index.customClassMap({
-      "!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]": this.isMenuOpen
-    })}
-      "
-        ></div>
-      </div>
-      <div
-        class="fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center items-center flex md:hidden
-        ${index.customClassMap({
-      "animate-fade-in animation-duration-150": this.isMenuOpen,
-      "!hidden": !this.isMenuOpen
-    })}"
-        @click=${this.handleMenuToggle}
-      >
-        <slot name="mobile"></slot>
-      </div>
-    </div>`;
+          class="flex items-center justify-center w-8 h-8 cursor-pointer"
+          @click=${this.handleMenuToggle}
+        >
+          <div class=${mobileMenuTrigger()}></div>
+        </div>
+        <div class=${mobileMenuDropdown()} @click=${this.handleMenuToggle}>
+          <slot name="mobile-menu"></slot>
+        </div>
+      </div>`;
   }
   render() {
+    const { wrapper } = this.navbarStyles({
+      isCenter: this.isCenter,
+      isSticky: this.isSticky,
+      isTransparent: this.isTransparent,
+      mobileBreakpoint: this.mobileBreakpoint
+    });
     return shared_tailwindElement_index.x`
-      <nav
-        data-testid="navbar"
-        class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
-        ${index.customClassMap({
-      [this.centerStyles]: this.isCenter,
-      ["justify-between"]: !this.isCenter,
-      [this.stickyStyles]: this.isSticky,
-      [this.transparentStyles]: this.isTransparent
-    })}"
-      >
-        <div class="flex items-center px-7 h-full sm:px-10">
+      <nav data-testid="navbar" class=${wrapper()}>
+        <div class="flex items-center px-7 h-[inherit] sm:px-10">
           <div
             class="flex cursor-pointer group"
             @click=${this.handleBrandClick}
@@ -125,7 +190,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
             </div>
             ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
                   TESTNET
-                </lukso-tag>` : ""}
+                </lukso-tag>` : shared_tailwindElement_index.A}
           </div>
           ${this.icon ? shared_tailwindElement_index.x`<div
                 class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
@@ -136,9 +201,10 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
                   color="purple-51"
                   @click=${this.handleIconClick}
                 ></lukso-icon>
-              </div>` : ""}
+              </div>` : shared_tailwindElement_index.A}
         </div>
-        ${this.isCenter ? shared_tailwindElement_index.x`` : this.hasMenu ? shared_tailwindElement_index.x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : shared_tailwindElement_index.x``}
+        ${this.isCenter ? shared_tailwindElement_index.A : this.desktopCenterTemplate()}
+        ${this.isCenter ? shared_tailwindElement_index.A : this.hasMenu ? shared_tailwindElement_index.x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : shared_tailwindElement_index.A}
       </nav>
     `;
   }
@@ -167,6 +233,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "logo-url" })
 ], exports.LuksoNavbar.prototype, "logoUrl", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "mobile-breakpoint" })
+], exports.LuksoNavbar.prototype, "mobileBreakpoint", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoNavbar.prototype, "isMenuOpen", 2);

package/dist/components/lukso-navbar/index.d.ts

@@ -1,4 +1,5 @@
 import { TailwindElement } from '../../shared/tailwind-element';
+export type NavbarMobileBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
 export declare class LuksoNavbar extends TailwindElement {
     title: string;
     isCenter: boolean;
@@ -8,15 +9,15 @@ export declare class LuksoNavbar extends TailwindElement {
     icon: string;
     hasMenu: boolean;
     logoUrl: string;
+    mobileBreakpoint: NavbarMobileBreakpoint;
     private isMenuOpen;
     private defaultLogoUrl;
-    private centerStyles;
-    private stickyStyles;
-    private transparentStyles;
+    private navbarStyles;
     private handleBrandClick;
     private handleIconClick;
     private handleMenuToggle;
     desktopMenuTemplate(): import("lit-html").TemplateResult<1>;
+    desktopCenterTemplate(): import("lit-html").TemplateResult<1>;
     mobileMenuTemplate(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/lukso-navbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAE/B,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,OAAO,UAAQ;IAGf,OAAO,SAAK;IAGZ,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IAUxB,mBAAmB;IAQnB,kBAAkB;IA8BlB,MAAM;CAsDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAE/B,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,OAAO,UAAQ;IAGf,OAAO,SAAK;IAGZ,gBAAgB,EAAE,sBAAsB,CAAO;IAG/C,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,YAAY,CAkElB;IAEF,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IAUxB,mBAAmB;IAUnB,qBAAqB;IAUrB,kBAAkB;IAwBlB,MAAM;CAqDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}