@lukso/web-components 1.172.13 → 1.172.14

package/dist/components/lukso-markdown-editor/index.js

@@ -1,17 +1,18 @@
-import { b as TailwindStyledElement, x, E } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { e } from '../../chunks/query-CHb9Ft_d.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import { html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
 import '../../tailwind-config.js';
-import { a as axe, c as cn } from '../../chunks/axe-DJKac19y.js';
+import { c as cn } from '../../chunks/cn-LM_JlZIN.js';
+import 'viem';
+import axe from 'axe-core';
 import '../lukso-textarea/index.js';
 import '../lukso-markdown/index.js';
 import '../lukso-switch/index.js';
 import '../lukso-button/index.js';
 import '../lukso-icon/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA6SrfZ-.js';
 import '../lukso-dropdown/index.js';
 import '../lukso-dropdown-option/index.js';
 import '../lukso-tooltip/index.js';
@@ -311,7 +312,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
         this.isAlignmentDropdownOpen = false;
       }
     };
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "w-[inherit]",
         header: "flex items-center justify-between gap-2 border border-neutral-90 rounded-12 px-3 py-2 bg-neutral-100",
@@ -335,7 +336,7 @@ let LuksoMarkdownEditor = class extends TailwindStyledElement(style) {
       },
       compoundVariants: [{ isFullWidth: false, class: { wrapper: "w-[500px]" } }]
     });
-    this.toolbarButton = ce({
+    this.toolbarButton = tv({
       base: "hover:bg-neutral-95 transition border-0 !shadow-none",
       variants: {
         active: { true: "bg-neutral-95" },
@@ -2147,7 +2148,7 @@ ${indent}${nextNumber}. `;
     }
   }
   buttonTemplate(icon, handler, name, isActive = false) {
-    return x`
+    return html`
       <lukso-tooltip text=${name} placement="top">
         <lukso-button
           @click=${() => {
@@ -2172,10 +2173,10 @@ ${indent}${nextNumber}. `;
     `;
   }
   toolbarTemplate() {
-    return x`
+    return html`
       <div class="flex items-center gap-1">
         <!-- Heading -->
-        ${this.toolsState.includes("heading") ? x`<div class=${cn(this.styles().headingMenu())}>
+        ${this.toolsState.includes("heading") ? html`<div class=${cn(this.styles().headingMenu())}>
               <lukso-tooltip text="Heading options" placement="top">
                 <lukso-button
                   id=${this.headingTriggerId}
@@ -2270,7 +2271,7 @@ ${indent}${nextNumber}. `;
                   Heading 4
                 </lukso-dropdown-option>
               </lukso-dropdown>
-            </div>` : E}
+            </div>` : nothing}
 
         <!-- Bold -->
         ${this.toolsState.includes("bold") ? this.buttonTemplate(
@@ -2278,7 +2279,7 @@ ${indent}${nextNumber}. `;
       () => this.toggleWrap("**"),
       "Bold",
       this.activeFormats.bold
-    ) : E}
+    ) : nothing}
 
         <!-- Italic -->
         ${this.toolsState.includes("italic") ? this.buttonTemplate(
@@ -2286,10 +2287,10 @@ ${indent}${nextNumber}. `;
       () => this.toggleWrap("*"),
       "Italic",
       this.activeFormats.italic
-    ) : E}
+    ) : nothing}
 
         <!-- List -->
-        ${this.toolsState.includes("list") ? x`
+        ${this.toolsState.includes("list") ? html`
               <div class=${this.styles().listMenu()}>
                 <lukso-tooltip text="List options" placement="top">
                   <lukso-button
@@ -2363,7 +2364,7 @@ ${indent}${nextNumber}. `;
                   </lukso-dropdown-option>
                 </lukso-dropdown>
               </div>
-            ` : E}
+            ` : nothing}
 
         <!-- Link -->
         ${this.toolsState.includes("link") ? this.buttonTemplate(
@@ -2371,10 +2372,10 @@ ${indent}${nextNumber}. `;
       () => this.insertLink(),
       "Link",
       this.activeFormats.link
-    ) : E}
+    ) : nothing}
 
         <!-- Text Alignment -->
-        ${this.toolsState.includes("alignment") ? x`
+        ${this.toolsState.includes("alignment") ? html`
               <div class=${this.styles().alignmentMenu()}>
                 <lukso-tooltip text="Text alignment" placement="top">
                   <lukso-button
@@ -2475,10 +2476,10 @@ ${indent}${nextNumber}. `;
                   </lukso-dropdown-option>
                 </lukso-dropdown>
               </div>
-            ` : E}
+            ` : nothing}
 
         <!-- Color -->
-        ${this.toolsState.includes("color") ? x`
+        ${this.toolsState.includes("color") ? html`
               <div class=${this.styles().colorMenu()}>
                 <lukso-tooltip text="Text color" placement="top">
                   <lukso-button
@@ -2528,7 +2529,7 @@ ${indent}${nextNumber}. `;
                       class="col-span-8 mb-2 flex items-center justify-between"
                     >
                       <span class="text-xs text-neutral-60">Text Color</span>
-                      ${this.activeFormats.color ? x`<button
+                      ${this.activeFormats.color ? html`<button
                             class="text-xs text-neutral-60 hover:text-neutral-20 underline"
                             @click=${(e) => {
       e.stopPropagation();
@@ -2539,10 +2540,10 @@ ${indent}${nextNumber}. `;
                             aria-label="Clear color"
                           >
                             Clear
-                          </button>` : E}
+                          </button>` : nothing}
                     </div>
                     ${this.colorSamples.map(
-      (color) => x`
+      (color) => html`
                         <button
                           class="w-6 h-6 rounded-4 border transition-all ${this.activeFormats.activeColor === color ? "border-neutral-20 ring-2 ring-purple-51" : "border-neutral-90 hover:border-neutral-60"}"
                           style="background-color: ${color}"
@@ -2560,19 +2561,19 @@ ${indent}${nextNumber}. `;
                   </div>
                 </lukso-dropdown>
               </div>
-            ` : E}
+            ` : nothing}
 
         <!-- Divider -->
-        ${this.toolsState.length > 0 ? x`<div class=${this.styles().divider()}></div>` : E}
+        ${this.toolsState.length > 0 ? html`<div class=${this.styles().divider()}></div>` : nothing}
       </div>
     `;
   }
   accessibilityIndicatorTemplate() {
     if (!this.hasAccessibilityViolations || this.accessibilityViolations.length === 0 || !this.isPreview) {
-      return E;
+      return nothing;
     }
     const tooltipText = formatViolationsForTooltip(this.accessibilityViolations);
-    return x`
+    return html`
       <div
         class="accessibility-indicator has-violations absolute top-2 right-2 z-10"
         style="pointer-events: auto;"
@@ -2619,7 +2620,7 @@ ${indent}${nextNumber}. `;
         error
       );
     }
-    return x`
+    return html`
       <div class=${wrapper()}>
         <div>
           <lukso-form-label
@@ -2643,14 +2644,14 @@ ${indent}${nextNumber}. `;
           </div>
 
           <div class=${area()}>
-            ${!this.isPreview ? x`<div class=${editor()}>
+            ${!this.isPreview ? html`<div class=${editor()}>
                   <lukso-textarea
                     .value=${this.value}
-                    name=${this.name ? this.name : E}
-                    size=${this.size ? this.size : E}
-                    rows=${this.rows ? this.rows : E}
-                    placeholder=${this.placeholder ? this.placeholder : E}
-                    error=${this.error ? this.error : E}
+                    name=${this.name ? this.name : nothing}
+                    size=${this.size ? this.size : nothing}
+                    rows=${this.rows ? this.rows : nothing}
+                    placeholder=${this.placeholder ? this.placeholder : nothing}
+                    error=${this.error ? this.error : nothing}
                     ?is-full-width=${true}
                     ?is-disabled=${this.isDisabled}
                     ?is-readonly=${this.isReadonly}
@@ -2660,7 +2661,7 @@ ${indent}${nextNumber}. `;
                     @on-input-click=${this.handleTextareaClick}
                   ></lukso-textarea>
                   ${this.accessibilityIndicatorTemplate()}
-                </div>` : x`<div
+                </div>` : html`<div
                   class=${preview()}
                   style="background-color: ${this.previewBackgroundColor};"
                 >
@@ -2678,98 +2679,98 @@ ${indent}${nextNumber}. `;
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "value", 2);
 __decorateClass([
-  n({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], LuksoMarkdownEditor.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "error", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoMarkdownEditor.prototype, "isFullWidth", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoMarkdownEditor.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoMarkdownEditor.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-non-resizable" })
+  property({ type: Boolean, attribute: "is-non-resizable" })
 ], LuksoMarkdownEditor.prototype, "isNonResizable", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoMarkdownEditor.prototype, "autofocus", 2);
 __decorateClass([
-  n({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], LuksoMarkdownEditor.prototype, "size", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-preview", reflect: true })
+  property({ type: Boolean, attribute: "is-preview", reflect: true })
 ], LuksoMarkdownEditor.prototype, "isPreview", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoMarkdownEditor.prototype, "rows", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "placeholder", 2);
 __decorateClass([
-  n({
+  property({
     type: String,
     attribute: "preview-background-color",
     reflect: true
   })
 ], LuksoMarkdownEditor.prototype, "previewBackgroundColor", 2);
 __decorateClass([
-  n({ type: String, attribute: "preview-text-color", reflect: true })
+  property({ type: String, attribute: "preview-text-color", reflect: true })
 ], LuksoMarkdownEditor.prototype, "previewTextColor", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "strip-html-tags" })
+  property({ type: Boolean, attribute: "strip-html-tags" })
 ], LuksoMarkdownEditor.prototype, "stripHtmlTags", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoMarkdownEditor.prototype, "tools", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "toolsState", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "savedSelectionForPreview", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isHeadingDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isColorDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isListDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "isAlignmentDropdownOpen", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "currentSelection", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "savedSelection", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "activeFormats", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "accessibilityViolations", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoMarkdownEditor.prototype, "hasAccessibilityViolations", 2);
 __decorateClass([
-  e("lukso-textarea")
+  query("lukso-textarea")
 ], LuksoMarkdownEditor.prototype, "textareaEl", 2);
 LuksoMarkdownEditor = __decorateClass([
   safeCustomElement("lukso-markdown-editor")

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const chunkLQIOVPBE = require('../../chunks/chunk-LQIOVPBE-kQFZF_OS.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const core = require('@lukso/core');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,14 +17,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class LuksoModal extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.TailwindElement) {
+class LuksoModal extends core.withTheme(shared_tailwindElement_index.TailwindElement) {
   constructor() {
     super(...arguments);
     this.isOpen = false;
     this.disableAnimations = false;
     this.size = "small";
     this.hasBottomPadding = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y",
         inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
@@ -96,7 +97,7 @@ class LuksoModal extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.Ta
       disableAnimations: this.disableAnimations,
       hasBottomPadding: this.hasBottomPadding
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div data-testid="modal" class=${wrapper()}>
         <div class=${inner()}>
           <div class=${overlay()} @click=${this.handleBackdropClick}></div>
@@ -109,16 +110,16 @@ class LuksoModal extends chunkLQIOVPBE.withTheme(shared_tailwindElement_index.Ta
   }
 }
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-open" })
+  decorators_js.property({ type: Boolean, attribute: "is-open" })
 ], LuksoModal.prototype, "isOpen");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "disable-animations" })
+  decorators_js.property({ type: Boolean, attribute: "disable-animations" })
 ], LuksoModal.prototype, "disableAnimations");
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], LuksoModal.prototype, "size");
 __decorateClass([
-  property.n({ type: Boolean, attribute: "has-bottom-padding" })
+  decorators_js.property({ type: Boolean, attribute: "has-bottom-padding" })
 ], LuksoModal.prototype, "hasBottomPadding");
 customElements.define("lukso-modal", LuksoModal);
 

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

@@ -1,7 +1,8 @@
-import { T as TailwindElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { w as withTheme } from '../../chunks/chunk-LQIOVPBE-CGhQ79Di.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { withTheme } from '@lukso/core';
+import { TailwindElement } from '../../shared/tailwind-element/index.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,7 +20,7 @@ class LuksoModal extends withTheme(TailwindElement) {
     this.disableAnimations = false;
     this.size = "small";
     this.hasBottomPadding = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y",
         inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
@@ -92,7 +93,7 @@ class LuksoModal extends withTheme(TailwindElement) {
       disableAnimations: this.disableAnimations,
       hasBottomPadding: this.hasBottomPadding
     });
-    return x`
+    return html`
       <div data-testid="modal" class=${wrapper()}>
         <div class=${inner()}>
           <div class=${overlay()} @click=${this.handleBackdropClick}></div>
@@ -105,16 +106,16 @@ class LuksoModal extends withTheme(TailwindElement) {
   }
 }
 __decorateClass([
-  n({ type: Boolean, attribute: "is-open" })
+  property({ type: Boolean, attribute: "is-open" })
 ], LuksoModal.prototype, "isOpen");
 __decorateClass([
-  n({ type: Boolean, attribute: "disable-animations" })
+  property({ type: Boolean, attribute: "disable-animations" })
 ], LuksoModal.prototype, "disableAnimations");
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoModal.prototype, "size");
 __decorateClass([
-  n({ type: Boolean, attribute: "has-bottom-padding" })
+  property({ type: Boolean, attribute: "has-bottom-padding" })
 ], LuksoModal.prototype, "hasBottomPadding");
 customElements.define("lukso-modal", LuksoModal);
 

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const index = require('../../chunks/index-CaJky2qL.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
 const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
 
@@ -35,7 +35,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "h-78 grid items-center",
         mobileMenuWrapper: "items-center justify-end pr-6 flex gap-2",
@@ -147,21 +147,21 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     }
   }
   desktopMenuTemplate(styles) {
-    return shared_tailwindElement_index.x` <div class=${styles.desktopMenuWrapper()}>
+    return lit.html` <div class=${styles.desktopMenuWrapper()}>
       <slot name="desktop-menu"></slot>
     </div>`;
   }
   desktopCenterTemplate(styles) {
-    return shared_tailwindElement_index.x`<div class=${styles.desktopCenterWrapper()}>
+    return lit.html`<div class=${styles.desktopCenterWrapper()}>
         <slot name="desktop-center"></slot>
       </div>
       <div class=${styles.desktopCenterPlaceholder()}></div>`;
   }
   mobileMenuTemplate(styles) {
-    return shared_tailwindElement_index.x`<div class=${styles.mobileMenuWrapper()}>
+    return lit.html`<div class=${styles.mobileMenuWrapper()}>
       <slot name="mobile-menu"></slot>
 
-      ${this.hasMobileDropdownMenu ? shared_tailwindElement_index.x` <div
+      ${this.hasMobileDropdownMenu ? lit.html` <div
               class="flex items-center justify-center w-8 h-8 cursor-pointer"
               @click=${this.handleMenuToggle}
             >
@@ -172,11 +172,11 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
               @click=${this.handleMenuToggle}
             >
               <slot name="mobile-dropdown"></slot>
-            </div>` : shared_tailwindElement_index.E}
+            </div>` : lit.nothing}
     </div>`;
   }
   brandTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="flex items-center px-6 md:px-10 h-[inherit]">
         <div class="flex cursor-pointer group" @click=${this.handleBrandClick}>
           <img
@@ -190,11 +190,11 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
           >
             <span>${this.title}</span>
           </div>
-          ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
+          ${this.isTestnet ? lit.html`<lukso-tag background-color="yellow-65" class="ml-2">
                 TESTNET
-              </lukso-tag>` : shared_tailwindElement_index.E}
+              </lukso-tag>` : lit.nothing}
         </div>
-        ${this.icon ? shared_tailwindElement_index.x`<div
+        ${this.icon ? lit.html`<div
               class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
             >
               <lukso-icon
@@ -203,12 +203,12 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
                 color="purple-51"
                 @click=${this.handleIconClick}
               ></lukso-icon>
-            </div>` : shared_tailwindElement_index.E}
+            </div>` : lit.nothing}
       </div>
     `;
   }
   menuTemplate(styles) {
-    return shared_tailwindElement_index.x`<div class="flex items-center justify-end">
+    return lit.html`<div class="flex items-center justify-end">
       ${this.desktopMenuTemplate(styles)} ${this.mobileMenuTemplate(styles)}
     </div>`;
   }
@@ -220,47 +220,47 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
       mobileBreakpoint: this.mobileBreakpoint,
       isMenuOpen: this.isMenuOpen
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <nav data-testid="navbar" class=${styles.wrapper()}>
         ${this.brandTemplate()}
-        ${this.isCenter ? shared_tailwindElement_index.E : this.desktopCenterTemplate(styles)}
-        ${this.isCenter ? shared_tailwindElement_index.E : this.hasMenu ? this.menuTemplate(styles) : shared_tailwindElement_index.E}
+        ${this.isCenter ? lit.nothing : this.desktopCenterTemplate(styles)}
+        ${this.isCenter ? lit.nothing : this.hasMenu ? this.menuTemplate(styles) : lit.nothing}
       </nav>
     `;
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoNavbar.prototype, "title", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-center" })
+  decorators_js.property({ type: Boolean, attribute: "is-center" })
 ], exports.LuksoNavbar.prototype, "isCenter", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-sticky" })
+  decorators_js.property({ type: Boolean, attribute: "is-sticky" })
 ], exports.LuksoNavbar.prototype, "isSticky", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-transparent" })
+  decorators_js.property({ type: Boolean, attribute: "is-transparent" })
 ], exports.LuksoNavbar.prototype, "isTransparent", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-testnet" })
+  decorators_js.property({ type: Boolean, attribute: "is-testnet" })
 ], exports.LuksoNavbar.prototype, "isTestnet", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoNavbar.prototype, "icon", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "has-menu" })
+  decorators_js.property({ type: Boolean, attribute: "has-menu" })
 ], exports.LuksoNavbar.prototype, "hasMenu", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
+  decorators_js.property({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
 ], exports.LuksoNavbar.prototype, "hasMobileDropdownMenu", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "logo-url" })
+  decorators_js.property({ type: String, attribute: "logo-url" })
 ], exports.LuksoNavbar.prototype, "logoUrl", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "mobile-breakpoint" })
+  decorators_js.property({ type: String, attribute: "mobile-breakpoint" })
 ], exports.LuksoNavbar.prototype, "mobileBreakpoint", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoNavbar.prototype, "isMenuOpen", 2);
 exports.LuksoNavbar = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-navbar")