@lukso/web-components 1.171.2 → 1.172.14

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

@@ -2,10 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-CQo4gGTi.cjs');
-const safeCustomElement = require('../../safe-custom-element-DRyGbLN8.cjs');
-const state = require('../../state-Dte59Cra.cjs');
-const index = require('../../index-D0nCA-7X.cjs');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
+const index = require('../../chunks/index-BOEPqh0N.js');
+require('../../chunks/directive-CY66atYi.js');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
 
@@ -57,7 +59,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     outline-none transition transition-all duration-150 appearance-none shrink-0`;
   }
   checkedIconTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <lukso-icon
         class=${index.customClassMap({
       hidden: !this.checked
@@ -68,7 +70,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     `;
   }
   checkboxTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         class=${index.customClassMap({
       [this.defaultCheckboxStyles]: true,
@@ -87,7 +89,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   }
   inputTemplate() {
     const id = this.id || this.name;
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <input
         name=${this.name}
         ?checked=${this.checked ? "checked" : void 0}
@@ -106,7 +108,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     `;
   }
   labelTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <span
         class=${index.customClassMap({
       [this.defaultLabelStyles]: true,
@@ -121,14 +123,14 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
     `;
   }
   profileUsernameTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="flex items-center text-neutral-20 gap-2 justify-center">
         <slot></slot>
       </div>
     `;
   }
   render() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div>
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
@@ -144,8 +146,8 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
           @mouseleave=${this.handleMouseOut}
         >
           ${this.inputTemplate()} ${this.checkboxTemplate()}
-          ${this.type === "text" ? this.labelTemplate() : shared_tailwindElement_index.E}
-          ${this.type === "profile" ? this.profileUsernameTemplate() : shared_tailwindElement_index.E}
+          ${this.type === "text" ? this.labelTemplate() : lit.nothing}
+          ${this.type === "profile" ? this.profileUsernameTemplate() : lit.nothing}
         </label>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -179,46 +181,46 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "name", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "id", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "ref", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "type", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "size", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "label", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "description", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCheckbox.prototype, "error", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoCheckbox.prototype, "checked", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoCheckbox.prototype, "customClass", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoCheckbox.prototype, "isReadonly", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoCheckbox.prototype, "isDisabled", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoCheckbox.prototype, "hasHighlight", 2);
 exports.LuksoCheckbox = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-checkbox")

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

@@ -1,7 +1,9 @@
-import { a as TailwindElement, x, E } from '../../index-DUvJL4Yz.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-B49fAUL7.js';
-import { r } from '../../state-BR0gwm98.js';
-import { c as customClassMap } from '../../index-F8ll4iy2.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
+import { TailwindElement } from '../../shared/tailwind-element/index.js';
+import { c as customClassMap } from '../../chunks/index-C5S-_QDF.js';
+import '../../chunks/directive-DUHAbymA.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
 
@@ -53,7 +55,7 @@ let LuksoCheckbox = class extends TailwindElement {
     outline-none transition transition-all duration-150 appearance-none shrink-0`;
   }
   checkedIconTemplate() {
-    return x`
+    return html`
       <lukso-icon
         class=${customClassMap({
       hidden: !this.checked
@@ -64,7 +66,7 @@ let LuksoCheckbox = class extends TailwindElement {
     `;
   }
   checkboxTemplate() {
-    return x`
+    return html`
       <div
         class=${customClassMap({
       [this.defaultCheckboxStyles]: true,
@@ -83,7 +85,7 @@ let LuksoCheckbox = class extends TailwindElement {
   }
   inputTemplate() {
     const id = this.id || this.name;
-    return x`
+    return html`
       <input
         name=${this.name}
         ?checked=${this.checked ? "checked" : void 0}
@@ -102,7 +104,7 @@ let LuksoCheckbox = class extends TailwindElement {
     `;
   }
   labelTemplate() {
-    return x`
+    return html`
       <span
         class=${customClassMap({
       [this.defaultLabelStyles]: true,
@@ -117,14 +119,14 @@ let LuksoCheckbox = class extends TailwindElement {
     `;
   }
   profileUsernameTemplate() {
-    return x`
+    return html`
       <div class="flex items-center text-neutral-20 gap-2 justify-center">
         <slot></slot>
       </div>
     `;
   }
   render() {
-    return x`
+    return html`
       <div>
         <lukso-form-label label=${this.label}></lukso-form-label>
         <lukso-form-description
@@ -140,8 +142,8 @@ let LuksoCheckbox = class extends TailwindElement {
           @mouseleave=${this.handleMouseOut}
         >
           ${this.inputTemplate()} ${this.checkboxTemplate()}
-          ${this.type === "text" ? this.labelTemplate() : E}
-          ${this.type === "profile" ? this.profileUsernameTemplate() : E}
+          ${this.type === "text" ? this.labelTemplate() : nothing}
+          ${this.type === "profile" ? this.profileUsernameTemplate() : nothing}
         </label>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -175,46 +177,46 @@ let LuksoCheckbox = class extends TailwindElement {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "ref", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "type", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "size", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoCheckbox.prototype, "error", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoCheckbox.prototype, "checked", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoCheckbox.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoCheckbox.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoCheckbox.prototype, "isDisabled", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoCheckbox.prototype, "hasHighlight", 2);
 LuksoCheckbox = __decorateClass([
   safeCustomElement("lukso-checkbox")

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

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-CQo4gGTi.cjs');
-const safeCustomElement = require('../../safe-custom-element-DRyGbLN8.cjs');
-const state = require('../../state-Dte59Cra.cjs');
-const query = require('../../query-EFiHeHdi.cjs');
-const index = require('../../index-CaJky2qL.cjs');
+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('../../tailwind-config.cjs');
-const axe = require('../../axe-C-H1UVi1.cjs');
+const cn = require('../../chunks/cn-zamUNFMe.js');
+require('viem');
+require('axe-core');
 require('../lukso-icon/index.cjs');
 require('../lukso-form-label/index.cjs');
 require('../lukso-form-description/index.cjs');
@@ -48,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",
@@ -175,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()}
@@ -189,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>
 
@@ -216,43 +218,43 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCollapse.prototype, "label", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCollapse.prototype, "description", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoCollapse.prototype, "error", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String, attribute: "trigger-label" })
+  decorators_js.property({ type: String, attribute: "trigger-label" })
 ], exports.LuksoCollapse.prototype, "triggerLabel", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Object, attribute: "toggle-label" })
+  decorators_js.property({ type: Object, attribute: "toggle-label" })
 ], exports.LuksoCollapse.prototype, "toggleLabel", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "is-open" })
+  decorators_js.property({ type: Boolean, attribute: "is-open" })
 ], exports.LuksoCollapse.prototype, "isOpen", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoCollapse.prototype, "customClass", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoCollapse.prototype, "isDisabled", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String, attribute: "icon" })
+  decorators_js.property({ type: String, attribute: "icon" })
 ], exports.LuksoCollapse.prototype, "icon", 2);
 __decorateClass([
-  safeCustomElement.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")

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

@@ -1,10 +1,12 @@
-import { a as TailwindElement, E, x } from '../../index-DUvJL4Yz.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-B49fAUL7.js';
-import { r } from '../../state-BR0gwm98.js';
-import { e } from '../../query-CHb9Ft_d.js';
-import { c as ce } from '../../index-B9iart53.js';
+import { nothing, html } 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 { TailwindElement } from '../../shared/tailwind-element/index.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../axe-BK9JSROP.js';
+import { c as cn } from '../../chunks/cn-LM_JlZIN.js';
+import 'viem';
+import 'axe-core';
 import '../lukso-icon/index.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
@@ -44,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",
@@ -171,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
@@ -185,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>
 
@@ -212,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,15 +2,18 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-CQo4gGTi.cjs');
-const safeCustomElement = require('../../safe-custom-element-DRyGbLN8.cjs');
-const state = require('../../state-Dte59Cra.cjs');
-const index = require('../../index-CaJky2qL.cjs');
-const styleMap = require('../../style-map-Bsh7bGbD.cjs');
+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 safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 require('../../tailwind-config.cjs');
-const axe = require('../../axe-C-H1UVi1.cjs');
+const cn = require('../../chunks/cn-zamUNFMe.js');
+require('viem');
+require('axe-core');
 require('../lukso-icon/index.cjs');
-require('../../index-CptAIlsO.cjs');
+require('../../chunks/index-cakeic-M.js');
 require('../lukso-form-label/index.cjs');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
@@ -47,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
@@ -155,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}
@@ -178,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}`
@@ -279,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}
@@ -298,52 +301,52 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
   }
 };
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "value", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "name", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "placeholder", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "label", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "id", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "description", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoColorPicker.prototype, "error", 2);
 __decorateClass([
-  safeCustomElement.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoColorPicker.prototype, "customClass", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoColorPicker.prototype, "isFullWidth", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoColorPicker.prototype, "isReadonly", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoColorPicker.prototype, "isDisabled", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoColorPicker.prototype, "autofocus", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Boolean, attribute: "keep-focus-on-escape" })
+  decorators_js.property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], exports.LuksoColorPicker.prototype, "keepFocusOnEscape", 2);
 __decorateClass([
-  safeCustomElement.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")