@lukso/web-components 1.11.0 → 1.12.0

package/dist/components/index.cjs

@@ -15,11 +15,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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../index-65ac952c.cjs');
 require('../directive-db00f5fb.cjs');
 require('../state-a62a7d5d.cjs');
 require('../index-7dc05ee5.cjs');
-require('../style-map-1d5d29da.cjs');
+require('../style-map-9f53097b.cjs');
 
 
 

package/dist/components/index.js

@@ -11,8 +11,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-29538039.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-bd97c2c3.js';
 import '../directive-9ec64c08.js';
 import '../state-7fde94d1.js';
 import '../index-714323c9.js';
-import '../style-map-6fd59df5.js';
+import '../style-map-8b1b8545.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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
@@ -30,9 +30,11 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     this.isFullWidth = false;
     this.isLongPress = false;
     this.isLink = false;
+    this.isLoading = false;
     this.href = "";
     this.target = "_blank";
     this.rel = "";
+    this.loadingText = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -94,11 +96,22 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
     }, 100);
     this.timer && clearTimeout(this.timer);
   }
+  loadingTemplate() {
+    return shared_tailwindElement_index.y`<lukso-icon
+        name="spinner"
+        color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
+        class=${index.customClassMap({
+      "animate-spin": true,
+      "mr-2": !!this.loadingText
+    })}
+      ></lukso-icon>
+      ${this.loadingText}`;
+  }
   buttonTemplate() {
     return shared_tailwindElement_index.y`
       <button
         data-testid="button"
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.isLoading}
         class=${index.customClassMap({
       [this.defaultStyles]: true,
       [this.mediumSize]: this.size === "medium",
@@ -116,7 +129,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
         @mouseup=${this.handleMouseUp}
         @mouseleave=${this.handleMouseUp}
       >
-        <slot></slot>
+        ${this.isLoading ? this.loadingTemplate() : shared_tailwindElement_index.y`<slot></slot>`}
       </button>
     `;
   }
@@ -165,6 +178,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-link" })
 ], exports.LuksoButton.prototype, "isLink", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-loading" })
+], exports.LuksoButton.prototype, "isLoading", 2);
 __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoButton.prototype, "href", 2);
@@ -174,6 +190,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: String })
 ], exports.LuksoButton.prototype, "rel", 2);
+__decorateClass([
+  directive.e({ type: String, attribute: "loading-text" })
+], exports.LuksoButton.prototype, "loadingText", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoButton.prototype, "isPressed", 2);

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

@@ -9,9 +9,11 @@ export declare class LuksoButton extends LuksoButton_base {
     isFullWidth: boolean;
     isLongPress: boolean;
     isLink: boolean;
+    isLoading: boolean;
     href: string;
     target: LinkTarget;
     rel: string;
+    loadingText: string;
     private isPressed;
     private noTransition;
     private timer;
@@ -28,6 +30,7 @@ export declare class LuksoButton extends LuksoButton_base {
     private smallSize;
     private handleMouseDown;
     private handleMouseUp;
+    loadingTemplate(): unknown;
     buttonTemplate(): import("lit").TemplateResult<1>;
     linkTemplate(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAOA,oBAAY,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAA;AACxE,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC3C,oBAAY,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,UAAU,CAAW;IAG3B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAGqE;IAE1F,OAAO,CAAC,eAAe,CACoD;IAE3E,OAAO,CAAC,aAAa,CAIE;IAEvB,OAAO,CAAC,aAAa,CAIC;IAEtB,OAAO,CAAC,UAAU,CAGS;IAE3B,OAAO,CAAC,UAAU,CAAyE;IAE3F,OAAO,CAAC,eAAe,CAEyD;IAEhF,OAAO,CAAC,aAAa,CAAgC;IAErD,OAAO,CAAC,kBAAkB,CAA2B;IAErD,OAAO,CAAC,UAAU,CAAsD;IAExE,OAAO,CAAC,SAAS,CAAwF;IAEzG,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAcrB,cAAc;IA2Bd,YAAY;IAwBZ,MAAM;CAGP;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":"AAOA,oBAAY,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAA;AACxE,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAC3C,oBAAY,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,UAAU,CAAW;IAG3B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAGqE;IAE1F,OAAO,CAAC,eAAe,CACoD;IAE3E,OAAO,CAAC,aAAa,CAIE;IAEvB,OAAO,CAAC,aAAa,CAIC;IAEtB,OAAO,CAAC,UAAU,CAGS;IAE3B,OAAO,CAAC,UAAU,CAAyE;IAE3F,OAAO,CAAC,eAAe,CAEyD;IAEhF,OAAO,CAAC,aAAa,CAAgC;IAErD,OAAO,CAAC,kBAAkB,CAA2B;IAErD,OAAO,CAAC,UAAU,CAAsD;IAExE,OAAO,CAAC,SAAS,CAAwF;IAEzG,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAcrB,eAAe,IAAI,OAAO;IAc1B,cAAc;IA2Bd,YAAY;IAwBZ,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, y } from '../../index-29538039.js';
+import { T as TailwindStyledElement, y } from '../../index-bd97c2c3.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';
@@ -26,9 +26,11 @@ let LuksoButton = class extends TailwindStyledElement(style) {
     this.isFullWidth = false;
     this.isLongPress = false;
     this.isLink = false;
+    this.isLoading = false;
     this.href = "";
     this.target = "_blank";
     this.rel = "";
+    this.loadingText = "";
     this.isPressed = false;
     this.noTransition = false;
     this.timer = 0;
@@ -90,11 +92,22 @@ let LuksoButton = class extends TailwindStyledElement(style) {
     }, 100);
     this.timer && clearTimeout(this.timer);
   }
+  loadingTemplate() {
+    return y`<lukso-icon
+        name="spinner"
+        color=${this.variant === "secondary" || this.variant === "text" ? "neutral-20" : "neutral-100"}
+        class=${customClassMap({
+      "animate-spin": true,
+      "mr-2": !!this.loadingText
+    })}
+      ></lukso-icon>
+      ${this.loadingText}`;
+  }
   buttonTemplate() {
     return y`
       <button
         data-testid="button"
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.isLoading}
         class=${customClassMap({
       [this.defaultStyles]: true,
       [this.mediumSize]: this.size === "medium",
@@ -112,7 +125,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
         @mouseup=${this.handleMouseUp}
         @mouseleave=${this.handleMouseUp}
       >
-        <slot></slot>
+        ${this.isLoading ? this.loadingTemplate() : y`<slot></slot>`}
       </button>
     `;
   }
@@ -161,6 +174,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "is-link" })
 ], LuksoButton.prototype, "isLink", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-loading" })
+], LuksoButton.prototype, "isLoading", 2);
 __decorateClass([
   e({ type: String })
 ], LuksoButton.prototype, "href", 2);
@@ -170,6 +186,9 @@ __decorateClass([
 __decorateClass([
   e({ type: String })
 ], LuksoButton.prototype, "rel", 2);
+__decorateClass([
+  e({ type: String, attribute: "loading-text" })
+], LuksoButton.prototype, "loadingText", 2);
 __decorateClass([
   t()
 ], LuksoButton.prototype, "isPressed", 2);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-profile/index.cjs');
 

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, y } from '../../index-29538039.js';
+import { T as TailwindStyledElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-profile/index.js';
 

package/dist/components/lukso-icon/icons/spinner.d.ts

@@ -0,0 +1,3 @@
+import { IconOptions } from '../../../components/lukso-icon/index.js';
+export declare const spinner: (options: IconOptions) => import("lit").TemplateResult<1>;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/lukso-icon/icons/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["spinner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,OAAO,YAAa,WAAW,oCAmB3C,CAAA"}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -3057,6 +3057,27 @@ const smartContract = (options) => {
   </svg> `;
 };
 
+const spinner = (options) => {
+  return shared_tailwindElement_index.y`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap.i({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M20.25 12C20.25 13.6317 19.7661 15.2267 18.8596 16.5835C17.9531 17.9402 16.6646 18.9976 15.1571 19.622C13.6496 20.2464 11.9908 20.4098 10.3905 20.0915C8.79016 19.7732 7.32015 18.9874 6.16637 17.8336C5.01259 16.6798 4.22685 15.2098 3.90852 13.6095C3.59019 12.0092 3.75357 10.3504 4.37799 8.84286C5.00242 7.33537 6.05984 6.0469 7.41655 5.14038C8.77325 4.23385 10.3683 3.75 12 3.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `;
+};
+
 const starFilled = (options) => {
   return shared_tailwindElement_index.y`<svg
     width="24"
@@ -4441,6 +4462,7 @@ const iconMap = {
   settings,
   "smart-contract-doc": smartContractDoc,
   "smart-contract": smartContract,
+  spinner,
   "star-filled": starFilled,
   "star-outline": starOutline,
   "step-dot": stepDot,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAyHA,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,oBAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AA8H5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAuBP;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":"AA0HA,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,oBAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AA+H5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -1,6 +1,6 @@
-import { y, T as TailwindStyledElement } from '../../index-29538039.js';
+import { y, T as TailwindStyledElement } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -3053,6 +3053,27 @@ const smartContract = (options) => {
   </svg> `;
 };
 
+const spinner = (options) => {
+  return y`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${i({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M20.25 12C20.25 13.6317 19.7661 15.2267 18.8596 16.5835C17.9531 17.9402 16.6646 18.9976 15.1571 19.622C13.6496 20.2464 11.9908 20.4098 10.3905 20.0915C8.79016 19.7732 7.32015 18.9874 6.16637 17.8336C5.01259 16.6798 4.22685 15.2098 3.90852 13.6095C3.59019 12.0092 3.75357 10.3504 4.37799 8.84286C5.00242 7.33537 6.05984 6.0469 7.41655 5.14038C8.77325 4.23385 10.3683 3.75 12 3.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `;
+};
+
 const starFilled = (options) => {
   return y`<svg
     width="24"
@@ -4437,6 +4458,7 @@ const iconMap = {
   settings,
   "smart-contract-doc": smartContractDoc,
   "smart-contract": smartContract,
+  spinner,
   "star-filled": starFilled,
   "star-outline": starOutline,
   "step-dot": stepDot,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y, b } from '../../index-29538039.js';
+import { a as TailwindElement, y, b } from '../../index-bd97c2c3.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-modal/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.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-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.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,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
@@ -23,9 +23,11 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.title = "";
     this.isCenter = false;
     this.isSticky = false;
+    this.isTransparent = false;
     this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
     this.centerStyles = `justify-center`;
     this.stickyStyles = `sticky top-0 z-[1000]`;
+    this.transparentStyles = `!bg-transparent !shadow-none`;
   }
   handleBrandClick() {
     const event = new CustomEvent("on-brand-click", {
@@ -41,7 +43,8 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
         class=${index.customClassMap({
       [this.defaultStyles]: true,
       [this.centerStyles]: this.isCenter,
-      [this.stickyStyles]: this.isSticky
+      [this.stickyStyles]: this.isSticky,
+      [this.transparentStyles]: this.isTransparent
     })}
       >
         <div
@@ -70,6 +73,9 @@ __decorateClass([
 __decorateClass([
   directive.e({ type: Boolean, attribute: "is-sticky" })
 ], exports.LuksoNavbar.prototype, "isSticky", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-transparent" })
+], exports.LuksoNavbar.prototype, "isTransparent", 2);
 exports.LuksoNavbar = __decorateClass([
   directive.e$1("lukso-navbar")
 ], exports.LuksoNavbar);

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

@@ -3,9 +3,11 @@ export declare class LuksoNavbar extends TailwindElement {
     title: string;
     isCenter: boolean;
     isSticky: boolean;
+    isTransparent: boolean;
     private defaultStyles;
     private centerStyles;
     private stickyStyles;
+    private transparentStyles;
     private handleBrandClick;
     render(): import("lit").TemplateResult<1>;
 }

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;IAEhB,OAAO,CAAC,aAAa,CAAqD;IAE1E,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,gBAAgB;IAQxB,MAAM;CA0BP;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;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"}

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, y } from '../../index-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
@@ -19,9 +19,11 @@ let LuksoNavbar = class extends TailwindElement {
     this.title = "";
     this.isCenter = false;
     this.isSticky = false;
+    this.isTransparent = false;
     this.defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`;
     this.centerStyles = `justify-center`;
     this.stickyStyles = `sticky top-0 z-[1000]`;
+    this.transparentStyles = `!bg-transparent !shadow-none`;
   }
   handleBrandClick() {
     const event = new CustomEvent("on-brand-click", {
@@ -37,7 +39,8 @@ let LuksoNavbar = class extends TailwindElement {
         class=${customClassMap({
       [this.defaultStyles]: true,
       [this.centerStyles]: this.isCenter,
-      [this.stickyStyles]: this.isSticky
+      [this.stickyStyles]: this.isSticky,
+      [this.transparentStyles]: this.isTransparent
     })}
       >
         <div
@@ -66,6 +69,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "is-sticky" })
 ], LuksoNavbar.prototype, "isSticky", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-transparent" })
+], LuksoNavbar.prototype, "isTransparent", 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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.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-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.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-29538039.js';
+import { c as b, x, a as TailwindElement, y } from '../../index-bd97c2c3.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-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.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-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
-require('../../style-map-1d5d29da.cjs');
+require('../../style-map-9f53097b.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -1,10 +1,10 @@
-import { T as TailwindStyledElement, y } from '../../index-29538039.js';
+import { T as TailwindStyledElement, y } from '../../index-bd97c2c3.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';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
-import '../../style-map-6fd59df5.js';
+import '../../style-map-8b1b8545.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

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

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

@@ -1,4 +1,4 @@
-import { x as x$2, T as TailwindStyledElement, y } from '../../index-29538039.js';
+import { x as x$2, T as TailwindStyledElement, y } from '../../index-bd97c2c3.js';
 import { b as e$3, i as i$3, t as t$3, e as e$4, a as e$5 } from '../../directive-9ec64c08.js';
 
 /**

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-d6d4e98e.cjs');
+const shared_tailwindElement_index = require('../../index-65ac952c.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-1d5d29da.cjs');
+const styleMap = require('../../style-map-9f53097b.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, y } from '../../index-29538039.js';
+import { a as TailwindElement, y } from '../../index-bd97c2c3.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { i } from '../../style-map-6fd59df5.js';
+import { i } from '../../style-map-8b1b8545.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

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

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

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

@@ -1,4 +1,4 @@
-import { L, x, a as TailwindElement, y } from '../../index-29538039.js';
+import { L, x, a as TailwindElement, y } from '../../index-bd97c2c3.js';
 import { b as e, i, t, e as e$1, a as e$2 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';