@lukso/web-components 1.16.0 → 1.17.1

package/dist/components/index.cjs

@@ -16,11 +16,11 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
 const components_luksoTest_index = require('./lukso-test/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-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../index-17cdeaed.cjs');
 require('../directive-db00f5fb.cjs');
 require('../state-a62a7d5d.cjs');
 require('../index-7dc05ee5.cjs');
-require('../style-map-b0a755bb.cjs');
+require('../style-map-b44b10d1.cjs');
 
 
 

package/dist/components/index.js

@@ -12,8 +12,8 @@ export { LuksoTerms } from './lukso-terms/index.js';
 export { LuksoTest } from './lukso-test/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-21210d1c.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-84bddb70.js';
 import '../directive-9ec64c08.js';
 import '../state-7fde94d1.js';
 import '../index-714323c9.js';
-import '../style-map-a69052e6.js';
+import '../style-map-290d218c.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-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, y } from '../../index-21210d1c.js';
+import { T as TailwindStyledElement, y } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-b0a755bb.cjs');
+const styleMap = require('../../style-map-b44b10d1.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 
@@ -31,7 +31,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     this.isFixedWidth = false;
     this.isFixedHeight = false;
     this.isFullWidth = false;
-    this.defaultStyles = `rounded-24  shadow-pink-drop-shadow-2xl`;
+    this.defaultStyles = `rounded-24  shadow-neutral-drop-shadow-2xl`;
   }
   basicTemplate() {
     return shared_tailwindElement_index.y`

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAEnC,oBAAY,YAAY,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,CAAA;;AAE9D,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,aAAa,UAAQ;IAGrB,WAAW,UAAQ;IAEnB,OAAO,CAAC,aAAa,CAA4C;IAEjE,aAAa;IAgBb,kBAAkB;IAqBlB,eAAe;IAgDf,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAOA,OAAO,4BAA4B,CAAA;AAEnC,oBAAY,YAAY,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,CAAA;;AAE9D,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,aAAa,UAAQ;IAGrB,WAAW,UAAQ;IAEnB,OAAO,CAAC,aAAa,CAA+C;IAEpE,aAAa;IAgBb,kBAAkB;IAqBlB,eAAe;IAgDf,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, y } from '../../index-21210d1c.js';
+import { T as TailwindStyledElement, y } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-a69052e6.js';
+import { i } from '../../style-map-290d218c.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 
@@ -27,7 +27,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     this.isFixedWidth = false;
     this.isFixedHeight = false;
     this.isFullWidth = false;
-    this.defaultStyles = `rounded-24  shadow-pink-drop-shadow-2xl`;
+    this.defaultStyles = `rounded-24  shadow-neutral-drop-shadow-2xl`;
   }
   basicTemplate() {
     return y`

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-b0a755bb.cjs');
+const styleMap = require('../../style-map-b44b10d1.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 

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

@@ -1,6 +1,6 @@
-import { y, T as TailwindStyledElement } from '../../index-21210d1c.js';
+import { y, T as TailwindStyledElement } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-a69052e6.js';
+import { i } from '../../style-map-290d218c.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-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -33,8 +33,10 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     this.description = "";
     this.error = "";
     this.unit = "";
+    this.customClass = "";
     this.isFullWidth = false;
     this.isReadonly = false;
+    this.isDisabled = false;
     this.autofocus = false;
     this.max = void 0;
     this.min = void 0;
@@ -64,6 +66,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
         data-testid=${this.name ? `input-${this.name}` : "input"}
         accept=${this.accept}
         ?readonly=${this.isReadonly ? true : void 0}
+        ?disabled=${this.isDisabled ? true : void 0}
         class=${index.customClassMap({
       [this.defaultInputStyles]: true,
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
@@ -72,7 +75,8 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       ["rounded-12"]: this.unit === "",
       ["w-full"]: this.isFullWidth,
       ["w-[350px]"]: !this.isFullWidth && this.unit === "",
-      ["w-[300px]"]: !this.isFullWidth && this.unit !== ""
+      ["w-[300px]"]: !this.isFullWidth && this.unit !== "",
+      [this.customClass]: !!this.customClass
     })}
         @focus=${this.handleFocus}
         @change=${this.handleChange}
@@ -242,12 +246,18 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoInput.prototype, "unit", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "custom-class" })
+], exports.LuksoInput.prototype, "customClass", 2);
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoInput.prototype, "isFullWidth", 2);
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoInput.prototype, "isReadonly", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-disabled" })
+], exports.LuksoInput.prototype, "isDisabled", 2);
 __decorateClass([
   directive.e({ type: Boolean })
 ], exports.LuksoInput.prototype, "autofocus", 2);

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

@@ -12,8 +12,10 @@ export declare class LuksoInput extends TailwindElement {
     description: string;
     error: string;
     unit: string;
+    customClass: string;
     isFullWidth: boolean;
     isReadonly: boolean;
+    isDisabled: boolean;
     autofocus: boolean;
     max: number | undefined;
     min: number | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,MAAY;IAGf,MAAM,MAAY;IAGlB,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,kBAAkB,CAE4C;IAEtE,OAAO,CAAC,iBAAiB,CAG0B;IAEnD,aAAa;IAwCb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAgBZ,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,MAAY;IAGf,MAAM,MAAY;IAGlB,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,kBAAkB,CAE4C;IAEtE,OAAO,CAAC,iBAAiB,CAG0B;IAEnD,aAAa;IA0Cb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAgBZ,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y, b } from '../../index-21210d1c.js';
+import { a as TailwindElement, y, b } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';
@@ -29,8 +29,10 @@ let LuksoInput = class extends TailwindElement {
     this.description = "";
     this.error = "";
     this.unit = "";
+    this.customClass = "";
     this.isFullWidth = false;
     this.isReadonly = false;
+    this.isDisabled = false;
     this.autofocus = false;
     this.max = void 0;
     this.min = void 0;
@@ -60,6 +62,7 @@ let LuksoInput = class extends TailwindElement {
         data-testid=${this.name ? `input-${this.name}` : "input"}
         accept=${this.accept}
         ?readonly=${this.isReadonly ? true : void 0}
+        ?disabled=${this.isDisabled ? true : void 0}
         class=${customClassMap({
       [this.defaultInputStyles]: true,
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
@@ -68,7 +71,8 @@ let LuksoInput = class extends TailwindElement {
       ["rounded-12"]: this.unit === "",
       ["w-full"]: this.isFullWidth,
       ["w-[350px]"]: !this.isFullWidth && this.unit === "",
-      ["w-[300px]"]: !this.isFullWidth && this.unit !== ""
+      ["w-[300px]"]: !this.isFullWidth && this.unit !== "",
+      [this.customClass]: !!this.customClass
     })}
         @focus=${this.handleFocus}
         @change=${this.handleChange}
@@ -238,12 +242,18 @@ __decorateClass([
 __decorateClass([
   e({ type: String })
 ], LuksoInput.prototype, "unit", 2);
+__decorateClass([
+  e({ type: String, attribute: "custom-class" })
+], LuksoInput.prototype, "customClass", 2);
 __decorateClass([
   e({ type: Boolean, attribute: "is-full-width" })
 ], LuksoInput.prototype, "isFullWidth", 2);
 __decorateClass([
   e({ type: Boolean, attribute: "is-readonly" })
 ], LuksoInput.prototype, "isReadonly", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-disabled" })
+], LuksoInput.prototype, "isDisabled", 2);
 __decorateClass([
   e({ type: Boolean })
 ], LuksoInput.prototype, "autofocus", 2);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y } from '../../index-21210d1c.js';
+import { a as TailwindElement, y } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 

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

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
+const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;
@@ -24,7 +25,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.isCenter = false;
     this.isSticky = false;
     this.isTransparent = false;
-    this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
+    this.isMenuOpen = false;
     this.centerStyles = `justify-center`;
     this.stickyStyles = `sticky top-0 z-[1000]`;
     this.transparentStyles = `!bg-transparent !shadow-none`;
@@ -36,16 +37,57 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     });
     this.dispatchEvent(event);
   }
+  handleMenuToggle() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+  desktopMenuTemplate() {
+    return shared_tailwindElement_index.y`<div
+      class="w-full items-center justify-end pr-10 no-underline hidden md:flex"
+    >
+      <slot name="desktop"></slot>
+    </div>`;
+  }
+  mobileMenuTemplate() {
+    return shared_tailwindElement_index.y`<div
+      class="w-full 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}
+      >
+        <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>`;
+  }
   render() {
     return shared_tailwindElement_index.y`
       <nav
         data-testid="navbar"
-        class=${index.customClassMap({
-      [this.defaultStyles]: true,
+        class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
+        ${index.customClassMap({
       [this.centerStyles]: this.isCenter,
       [this.stickyStyles]: this.isSticky,
       [this.transparentStyles]: this.isTransparent
-    })}
+    })}"
       >
         <div
           class="flex items-center px-7 h-full cursor-pointer sm:px-10"
@@ -59,7 +101,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
             <span>${this.title}</span>
           </div>
         </div>
-        <slot></slot>
+        ${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}
       </nav>
     `;
   }
@@ -76,6 +118,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-transparent" })
 ], exports.LuksoNavbar.prototype, "isTransparent", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoNavbar.prototype, "isMenuOpen", 2);
 exports.LuksoNavbar = __decorateClass([
   directive.e$1("lukso-navbar")
 ], exports.LuksoNavbar);

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

@@ -4,11 +4,14 @@ export declare class LuksoNavbar extends TailwindElement {
     isCenter: boolean;
     isSticky: boolean;
     isTransparent: boolean;
-    private defaultStyles;
+    private isMenuOpen;
     private centerStyles;
     private stickyStyles;
     private transparentStyles;
     private handleBrandClick;
+    private handleMenuToggle;
+    desktopMenuTemplate(): import("lit").TemplateResult<1>;
+    mobileMenuTemplate(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAErB,OAAO,CAAC,aAAa,CAAqD;IAE1E,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAIxB,mBAAmB;IAQnB,kBAAkB;IAiClB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,5 +1,6 @@
-import { a as TailwindElement, y } from '../../index-21210d1c.js';
+import { a as TailwindElement, y } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
+import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;
@@ -20,7 +21,7 @@ let LuksoNavbar = class extends TailwindElement {
     this.isCenter = false;
     this.isSticky = false;
     this.isTransparent = false;
-    this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
+    this.isMenuOpen = false;
     this.centerStyles = `justify-center`;
     this.stickyStyles = `sticky top-0 z-[1000]`;
     this.transparentStyles = `!bg-transparent !shadow-none`;
@@ -32,16 +33,57 @@ let LuksoNavbar = class extends TailwindElement {
     });
     this.dispatchEvent(event);
   }
+  handleMenuToggle() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+  desktopMenuTemplate() {
+    return y`<div
+      class="w-full items-center justify-end pr-10 no-underline hidden md:flex"
+    >
+      <slot name="desktop"></slot>
+    </div>`;
+  }
+  mobileMenuTemplate() {
+    return y`<div
+      class="w-full 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}
+      >
+        <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]
+        ${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
+    ${customClassMap({
+      "animate-fade-in animation-duration-150": this.isMenuOpen,
+      "!hidden": !this.isMenuOpen
+    })}"
+        @click=${this.handleMenuToggle}
+      >
+        <slot name="mobile"></slot>
+      </div>
+    </div>`;
+  }
   render() {
     return y`
       <nav
         data-testid="navbar"
-        class=${customClassMap({
-      [this.defaultStyles]: true,
+        class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
+        ${customClassMap({
       [this.centerStyles]: this.isCenter,
       [this.stickyStyles]: this.isSticky,
       [this.transparentStyles]: this.isTransparent
-    })}
+    })}"
       >
         <div
           class="flex items-center px-7 h-full cursor-pointer sm:px-10"
@@ -55,7 +97,7 @@ let LuksoNavbar = class extends TailwindElement {
             <span>${this.title}</span>
           </div>
         </div>
-        <slot></slot>
+        ${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}
       </nav>
     `;
   }
@@ -72,6 +114,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "is-transparent" })
 ], LuksoNavbar.prototype, "isTransparent", 2);
+__decorateClass([
+  t()
+], LuksoNavbar.prototype, "isMenuOpen", 2);
 LuksoNavbar = __decorateClass([
   e$1("lukso-navbar")
 ], LuksoNavbar);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-b0a755bb.cjs');
+const styleMap = require('../../style-map-b44b10d1.cjs');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-21210d1c.js';
+import { a as TailwindElement, y } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-a69052e6.js';
+import { i } from '../../style-map-290d218c.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-b0a755bb.cjs');
+const styleMap = require('../../style-map-b44b10d1.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;
@@ -27,11 +27,7 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
     this.variant = "success";
   }
   progressWidth() {
-    const width = this.current / this.max * 100;
-    if (width <= 1) {
-      return 1;
-    }
-    return width;
+    return this.current / this.max * 100;
   }
   render() {
     return shared_tailwindElement_index.y`
@@ -40,11 +36,12 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
         class='w-full h-[12px] shadow-neutral-inner-shadow rounded-24 bg-neutral-95'
       >
         <div
-          class=${index.customClassMap({
-      "h-[12px] rounded-s-24 rounded-e-16 border border-solid": true,
-      "bg-green-85 border-green-54": !!this.variant || this.variant === "success",
-      "bg-red-85 border-red-65": this.variant === "error"
-    })}
+          class="h-[12px] rounded-s-24 rounded-e-16 border border-solid transition-all w-[1%] ${index.customClassMap(
+      {
+        "bg-green-85 border-green-54": !!this.variant || this.variant === "success",
+        "bg-red-85 border-red-65": this.variant === "error"
+      }
+    )}"
           style=${styleMap.i({
       width: `${this.progressWidth()}%`
     })}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,oBAAY,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AAEjD,qBACa,aAAc,SAAQ,eAAe;IAEhD,GAAG,SAAI;IAGP,GAAG,SAAM;IAGT,OAAO,SAAI;IAGX,OAAO,EAAE,eAAe,CAAY;IAEpC,OAAO,CAAC,aAAa;IAWrB,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,oBAAY,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AAEjD,qBACa,aAAc,SAAQ,eAAe;IAEhD,GAAG,SAAI;IAGP,GAAG,SAAM;IAGT,OAAO,SAAI;IAGX,OAAO,EAAE,eAAe,CAAY;IAEpC,OAAO,CAAC,aAAa;IAIrB,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-21210d1c.js';
+import { a as TailwindElement, y } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-a69052e6.js';
+import { i } from '../../style-map-290d218c.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;
@@ -23,11 +23,7 @@ let LuksoProgress = class extends TailwindElement {
     this.variant = "success";
   }
   progressWidth() {
-    const width = this.current / this.max * 100;
-    if (width <= 1) {
-      return 1;
-    }
-    return width;
+    return this.current / this.max * 100;
   }
   render() {
     return y`
@@ -36,11 +32,12 @@ let LuksoProgress = class extends TailwindElement {
         class='w-full h-[12px] shadow-neutral-inner-shadow rounded-24 bg-neutral-95'
       >
         <div
-          class=${customClassMap({
-      "h-[12px] rounded-s-24 rounded-e-16 border border-solid": true,
-      "bg-green-85 border-green-54": !!this.variant || this.variant === "success",
-      "bg-red-85 border-red-65": this.variant === "error"
-    })}
+          class="h-[12px] rounded-s-24 rounded-e-16 border border-solid transition-all w-[1%] ${customClassMap(
+      {
+        "bg-green-85 border-green-54": !!this.variant || this.variant === "success",
+        "bg-red-85 border-red-65": this.variant === "error"
+      }
+    )}"
           style=${i({
       width: `${this.progressWidth()}%`
     })}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 
 /**

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

@@ -1,4 +1,4 @@
-import { c as b, x, a as TailwindElement, y } from '../../index-21210d1c.js';
+import { c as b, x, a as TailwindElement, y } from '../../index-84bddb70.js';
 import { i, t, b as e$1, e as e$2, a as e$3 } from '../../directive-9ec64c08.js';
 
 /**

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-3597c5ae.cjs');
+const shared_tailwindElement_index = require('../../index-17cdeaed.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-b0a755bb.cjs');
+const styleMap = require('../../style-map-b44b10d1.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-21210d1c.js';
+import { a as TailwindElement, y } from '../../index-84bddb70.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-a69052e6.js';
+import { i } from '../../style-map-290d218c.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;