@lukso/web-components 1.172.13 → 1.172.17

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

@@ -2,14 +2,15 @@
 
 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 query = require('../../chunks/query-D3HF7Pde.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const index = require('../../chunks/index-BBPgtFEP.js');
 require('../../tailwind-config.cjs');
-const axe = require('../../chunks/axe-MHuN9KU0.js');
+require('../../chunks/index-oDo-wiUs.js');
+const cn = require('../../chunks/cn-JMx_imgS.js');
+require('viem');
+require('axe-core');
 require('../lukso-icon/index.cjs');
 require('../lukso-form-label/index.cjs');
 require('../lukso-form-description/index.cjs');
@@ -25,7 +26,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index.TailwindElement {
+exports.LuksoCollapse = class LuksoCollapse extends index.TailwindElement {
   constructor() {
     super(...arguments);
     this.label = "";
@@ -49,7 +50,7 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
         new CustomEvent(this.isOpen ? "after-enter" : "after-leave")
       );
     };
-    this.collapseStyles = index.ce({
+    this.collapseStyles = tailwindVariants.tv({
       slots: {
         base: "transition transition-all duration-150 border bg-neutral-100",
         header: "flex items-center justify-between cursor-pointer overflow-hidden",
@@ -176,13 +177,13 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
       size: this.size,
       hasError: !!this.error
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="w-[inherit]">
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
           description=${this.description}
         ></lukso-form-description>
-        <div class=${axe.cn(base(), this.customClass)}>
+        <div class=${cn.cn(base(), this.customClass)}>
           <!-- Header -->
           <div
             class=${header()}
@@ -190,13 +191,13 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
           >
             <span class=${triggerLabel()}>${this.triggerLabel}</span>
             <div class="flex items-center">
-              ${this.toggleLabel ? shared_tailwindElement_index.x`<span class=${toggleLabel()}>
+              ${this.toggleLabel ? lit.html`<span class=${toggleLabel()}>
                     ${this.isOpen ? this.toggleLabel?.close : this.toggleLabel?.open}
-                  </span>` : shared_tailwindElement_index.E}
-              ${this.icon ? shared_tailwindElement_index.x`<lukso-icon
+                  </span>` : lit.nothing}
+              ${this.icon ? lit.html`<lukso-icon
                     name=${this.icon}
                     class=${icon()}
-                  ></lukso-icon>` : shared_tailwindElement_index.E}
+                  ></lukso-icon>` : lit.nothing}
             </div>
           </div>
 
@@ -217,44 +218,44 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCollapse.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCollapse.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCollapse.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "trigger-label" })
+  decorators_js.property({ type: String, attribute: "trigger-label" })
 ], exports.LuksoCollapse.prototype, "triggerLabel", 2);
 __decorateClass([
-  property.n({ type: Object, attribute: "toggle-label" })
+  decorators_js.property({ type: Object, attribute: "toggle-label" })
 ], exports.LuksoCollapse.prototype, "toggleLabel", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-open" })
+  decorators_js.property({ type: Boolean, attribute: "is-open" })
 ], exports.LuksoCollapse.prototype, "isOpen", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoCollapse.prototype, "customClass", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoCollapse.prototype, "isDisabled", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "icon" })
+  decorators_js.property({ type: String, attribute: "icon" })
 ], exports.LuksoCollapse.prototype, "icon", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCollapse.prototype, "size", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoCollapse.prototype, "maxHeight", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoCollapse.prototype, "observedHeight", 2);
 __decorateClass([
-  query.e(".collapse-content")
+  decorators_js.query(".collapse-content")
 ], exports.LuksoCollapse.prototype, "contentElement", 2);
 exports.LuksoCollapse = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-collapse")
+  index.safeCustomElement("lukso-collapse")
 ], exports.LuksoCollapse);

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

@@ -1,11 +1,12 @@
-import { T as TailwindElement, E, x } 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 { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { nothing, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { T as TailwindElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../chunks/axe-DJKac19y.js';
+import '../../chunks/index-CSnDkMHN.js';
+import { c as cn } from '../../chunks/cn-Df_5FiGi.js';
+import 'viem';
+import 'axe-core';
 import '../lukso-icon/index.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
@@ -45,7 +46,7 @@ let LuksoCollapse = class extends TailwindElement {
         new CustomEvent(this.isOpen ? "after-enter" : "after-leave")
       );
     };
-    this.collapseStyles = ce({
+    this.collapseStyles = tv({
       slots: {
         base: "transition transition-all duration-150 border bg-neutral-100",
         header: "flex items-center justify-between cursor-pointer overflow-hidden",
@@ -172,7 +173,7 @@ let LuksoCollapse = class extends TailwindElement {
       size: this.size,
       hasError: !!this.error
     });
-    return x`
+    return html`
       <div class="w-[inherit]">
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
@@ -186,13 +187,13 @@ let LuksoCollapse = class extends TailwindElement {
           >
             <span class=${triggerLabel()}>${this.triggerLabel}</span>
             <div class="flex items-center">
-              ${this.toggleLabel ? x`<span class=${toggleLabel()}>
+              ${this.toggleLabel ? html`<span class=${toggleLabel()}>
                     ${this.isOpen ? this.toggleLabel?.close : this.toggleLabel?.open}
-                  </span>` : E}
-              ${this.icon ? x`<lukso-icon
+                  </span>` : nothing}
+              ${this.icon ? html`<lukso-icon
                     name=${this.icon}
                     class=${icon()}
-                  ></lukso-icon>` : E}
+                  ></lukso-icon>` : nothing}
             </div>
           </div>
 
@@ -213,43 +214,43 @@ let LuksoCollapse = class extends TailwindElement {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCollapse.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCollapse.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCollapse.prototype, "error", 2);
 __decorateClass([
-  n({ type: String, attribute: "trigger-label" })
+  property({ type: String, attribute: "trigger-label" })
 ], LuksoCollapse.prototype, "triggerLabel", 2);
 __decorateClass([
-  n({ type: Object, attribute: "toggle-label" })
+  property({ type: Object, attribute: "toggle-label" })
 ], LuksoCollapse.prototype, "toggleLabel", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-open" })
+  property({ type: Boolean, attribute: "is-open" })
 ], LuksoCollapse.prototype, "isOpen", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoCollapse.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoCollapse.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: String, attribute: "icon" })
+  property({ type: String, attribute: "icon" })
 ], LuksoCollapse.prototype, "icon", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCollapse.prototype, "size", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCollapse.prototype, "maxHeight", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCollapse.prototype, "observedHeight", 2);
 __decorateClass([
-  e(".collapse-content")
+  query(".collapse-content")
 ], LuksoCollapse.prototype, "contentElement", 2);
 LuksoCollapse = __decorateClass([
   safeCustomElement("lukso-collapse")

package/dist/components/lukso-color-picker/index.cjs

@@ -2,16 +2,18 @@
 
 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 styleMap = require('../../chunks/style-map-B7XFhSOK.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const styleMap = require('../../chunks/style-map-AEeBQfPb.js');
+const index = require('../../chunks/index-BBPgtFEP.js');
 require('../../tailwind-config.cjs');
-const axe = require('../../chunks/axe-MHuN9KU0.js');
+require('../../chunks/index-oDo-wiUs.js');
+const cn = require('../../chunks/cn-JMx_imgS.js');
+require('viem');
+require('axe-core');
 require('../lukso-icon/index.cjs');
-require('../../chunks/index-BHAtoIlu.js');
+require('../../chunks/index-Dh7fuono.js');
 require('../lukso-form-label/index.cjs');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
@@ -29,7 +31,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const FOCUS_DELAY_MS = 10;
-exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement_index.TailwindStyledElement(style) {
+exports.LuksoColorPicker = class LuksoColorPicker extends index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -48,7 +50,7 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
     this.size = "medium";
     this.hasFocus = false;
     this.hasHighlight = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "group grid border overflow-hidden",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
@@ -156,19 +158,19 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
     }
   }
   inputTemplate(styles) {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <input
         .value=${this.value}
-        name=${this.name ? this.name : shared_tailwindElement_index.E}
+        name=${this.name ? this.name : lit.nothing}
         type="text"
-        placeholder=${this.placeholder ? this.placeholder : shared_tailwindElement_index.E}
+        placeholder=${this.placeholder ? this.placeholder : lit.nothing}
         ?autofocus=${this.autofocus}
         autocomplete="off"
-        id=${this.id ? this.id : shared_tailwindElement_index.E}
+        id=${this.id ? this.id : lit.nothing}
         data-testid=${this.name ? `input-${this.name}` : "input"}
         ?readonly=${this.isReadonly ? true : void 0}
         ?disabled=${this.isDisabled ? true : void 0}
-        class=${axe.cn(styles, this.customClass)}
+        class=${cn.cn(styles, this.customClass)}
         @focus=${this.handleFocus}
         @input=${this.handleInput}
         @change=${this.handleChange}
@@ -179,7 +181,7 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
     `;
   }
   colorPickerTemplate(styles, colorInputStyles) {
-    return shared_tailwindElement_index.x`<div
+    return lit.html`<div
       class=${styles}
       style=${styleMap.o({
       backgroundColor: `${this.value}`
@@ -280,7 +282,7 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
       isFullWidth: this.isFullWidth,
       size: this.size
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="w-[inherit]">
         <lukso-form-label
           for-name=${this.name}
@@ -299,53 +301,53 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "value", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "name", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "placeholder", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoColorPicker.prototype, "customClass", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoColorPicker.prototype, "isFullWidth", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoColorPicker.prototype, "isReadonly", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoColorPicker.prototype, "isDisabled", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoColorPicker.prototype, "autofocus", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "keep-focus-on-escape" })
+  decorators_js.property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], exports.LuksoColorPicker.prototype, "keepFocusOnEscape", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "size", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoColorPicker.prototype, "hasFocus", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoColorPicker.prototype, "hasHighlight", 2);
 exports.LuksoColorPicker = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-color-picker")
+  index.safeCustomElement("lukso-color-picker")
 ], exports.LuksoColorPicker);

package/dist/components/lukso-color-picker/index.js

@@ -1,13 +1,15 @@
-import { b as TailwindStyledElement, E, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
-import { o } from '../../chunks/style-map-BPljJihp.js';
-import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
+import { o } from '../../chunks/style-map-auscxO0L.js';
+import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../chunks/axe-DJKac19y.js';
+import '../../chunks/index-CSnDkMHN.js';
+import { c as cn } from '../../chunks/cn-Df_5FiGi.js';
+import 'viem';
+import 'axe-core';
 import '../lukso-icon/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA_aKopU.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
@@ -44,7 +46,7 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
     this.size = "medium";
     this.hasFocus = false;
     this.hasHighlight = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "group grid border overflow-hidden",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
@@ -152,15 +154,15 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
     }
   }
   inputTemplate(styles) {
-    return x`
+    return html`
       <input
         .value=${this.value}
-        name=${this.name ? this.name : E}
+        name=${this.name ? this.name : nothing}
         type="text"
-        placeholder=${this.placeholder ? this.placeholder : E}
+        placeholder=${this.placeholder ? this.placeholder : nothing}
         ?autofocus=${this.autofocus}
         autocomplete="off"
-        id=${this.id ? this.id : E}
+        id=${this.id ? this.id : nothing}
         data-testid=${this.name ? `input-${this.name}` : "input"}
         ?readonly=${this.isReadonly ? true : void 0}
         ?disabled=${this.isDisabled ? true : void 0}
@@ -175,7 +177,7 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
     `;
   }
   colorPickerTemplate(styles, colorInputStyles) {
-    return x`<div
+    return html`<div
       class=${styles}
       style=${o({
       backgroundColor: `${this.value}`
@@ -276,7 +278,7 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
       isFullWidth: this.isFullWidth,
       size: this.size
     });
-    return x`
+    return html`
       <div class="w-[inherit]">
         <lukso-form-label
           for-name=${this.name}
@@ -295,52 +297,52 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "value", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "placeholder", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "error", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoColorPicker.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoColorPicker.prototype, "isFullWidth", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoColorPicker.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoColorPicker.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoColorPicker.prototype, "autofocus", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "keep-focus-on-escape" })
+  property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], LuksoColorPicker.prototype, "keepFocusOnEscape", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoColorPicker.prototype, "size", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoColorPicker.prototype, "hasFocus", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoColorPicker.prototype, "hasHighlight", 2);
 LuksoColorPicker = __decorateClass([
   safeCustomElement("lukso-color-picker")

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

@@ -2,13 +2,13 @@
 
 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 safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const index = require('../../chunks/index-BBPgtFEP.js');
 require('../lukso-icon/index.cjs');
-require('../../chunks/index-BAf8Hzhe.js');
-require('../../chunks/index-glHBylgQ.js');
+require('../lukso-profile/index.cjs');
+require('../../chunks/index-y7UFhQ9u.js');
 const uniqId = require('../../chunks/uniq-id-Cszs24DQ.js');
 
 const debounceFunction = (func, timeout = 100) => {
@@ -33,7 +33,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index.TailwindStyledElement(style) {
+exports.LuksoDropdown = class LuksoDropdown extends index.TailwindStyledElement(style) {
   constructor() {
     super();
     this.id = "";
@@ -46,7 +46,7 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
     this.size = "large";
     this.trigger = "click";
     this.maxHeight = void 0;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "absolute z-50",
         dropdown: `bg-neutral-100 border border-neutral-90 shadow-1xl
@@ -204,12 +204,12 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
       hasMaxHeight: this.maxHeight !== void 0
     });
     if (!this.isOpen) {
-      return shared_tailwindElement_index.E;
+      return lit.nothing;
     }
-    return shared_tailwindElement_index.x`<div id=${this.id} class=${wrapper()}>
+    return lit.html`<div id=${this.id} class=${wrapper()}>
       <div
         class=${dropdown()}
-        style=${this.maxHeight ? `max-height: ${this.maxHeight}px;` : shared_tailwindElement_index.E}
+        style=${this.maxHeight ? `max-height: ${this.maxHeight}px;` : lit.nothing}
       >
         <slot></slot>
       </div>
@@ -217,35 +217,35 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoDropdown.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "trigger-id" })
+  decorators_js.property({ type: String, attribute: "trigger-id" })
 ], exports.LuksoDropdown.prototype, "triggerId", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-open", reflect: true })
+  decorators_js.property({ type: Boolean, attribute: "is-open", reflect: true })
 ], exports.LuksoDropdown.prototype, "isOpen", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-open-on-outside-click" })
+  decorators_js.property({ type: Boolean, attribute: "is-open-on-outside-click" })
 ], exports.LuksoDropdown.prototype, "isOpenOnOutsideClick", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "open-top" })
+  decorators_js.property({ type: Boolean, attribute: "open-top" })
 ], exports.LuksoDropdown.prototype, "openTop", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-right" })
+  decorators_js.property({ type: Boolean, attribute: "is-right" })
 ], exports.LuksoDropdown.prototype, "isRight", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoDropdown.prototype, "isFullWidth", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoDropdown.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoDropdown.prototype, "trigger", 2);
 __decorateClass([
-  property.n({ type: Number, attribute: "max-height", reflect: true })
+  decorators_js.property({ type: Number, attribute: "max-height", reflect: true })
 ], exports.LuksoDropdown.prototype, "maxHeight", 2);
 exports.LuksoDropdown = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-dropdown")
+  index.safeCustomElement("lukso-dropdown")
 ], exports.LuksoDropdown);