@lukso/web-components 1.172.13 → 1.172.14

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

@@ -2,13 +2,14 @@
 
 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 styleMap = require('../../chunks/style-map-B7XFhSOK.js');
-const index = require('../../chunks/index-CaJky2qL.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const styleMap = require('../../chunks/style-map-AEeBQfPb.js');
+const tailwindVariants = require('tailwind-variants');
 const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
 const uniqId = require('../../chunks/uniq-id-Cszs24DQ.js');
-require('../../chunks/index-BHAtoIlu.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.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');
@@ -35,7 +36,7 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
     this.error = "";
     this.isChecked = false;
     this.isDisabled = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
         input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
@@ -94,7 +95,7 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
     if (!this.color) {
       this.color = DEFAULT_COLOR;
     }
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div>
         <lukso-form-label
           for-name=${this.name}
@@ -132,28 +133,28 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "color", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "name", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoSwitch.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-checked" })
+  decorators_js.property({ type: Boolean, attribute: "is-checked" })
 ], exports.LuksoSwitch.prototype, "isChecked", 2);
 __decorateClass([
-  property.n({
+  decorators_js.property({
     type: Boolean,
     attribute: "is-disabled"
   })

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

@@ -1,10 +1,11 @@
-import { T as TailwindElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { o } from '../../chunks/style-map-BPljJihp.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { o } from '../../chunks/style-map-auscxO0L.js';
+import { tv } from 'tailwind-variants';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
 import { u as uniqId } from '../../chunks/uniq-id-CGUN-pJV.js';
-import '../../chunks/index-B_H2eYG_.js';
+import { TailwindElement } from '../../shared/tailwind-element/index.js';
+import '../../chunks/index-CA6SrfZ-.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
@@ -31,7 +32,7 @@ let LuksoSwitch = class extends TailwindElement {
     this.error = "";
     this.isChecked = false;
     this.isDisabled = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
         input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
@@ -90,7 +91,7 @@ let LuksoSwitch = class extends TailwindElement {
     if (!this.color) {
       this.color = DEFAULT_COLOR;
     }
-    return x`
+    return html`
       <div>
         <lukso-form-label
           for-name=${this.name}
@@ -128,28 +129,28 @@ let LuksoSwitch = class extends TailwindElement {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "color", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoSwitch.prototype, "error", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-checked" })
+  property({ type: Boolean, attribute: "is-checked" })
 ], LuksoSwitch.prototype, "isChecked", 2);
 __decorateClass([
-  n({
+  property({
     type: Boolean,
     attribute: "is-disabled"
   })

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

@@ -2,11 +2,12 @@
 
 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 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 index$1 = require('../../chunks/index-C5YyB6ug.js');
+const index = require('../../chunks/index-DvLZWpq9.js');
+const shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -28,7 +29,7 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
     this.backgroundColor = "";
     this.borderColor = "";
     this.textColor = "";
-    this.tagStyles = index.ce({
+    this.tagStyles = tailwindVariants.tv({
       base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
       variants: {
         size: {
@@ -67,11 +68,11 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
       size: this.size,
       isRounded: this.isRounded
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         data-testid="tag"
         class=${tagStyles}
-        style=${index$1.customStyleMap({
+        style=${index.customStyleMap({
       [`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
       [`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
       [`color: var(--${this.textColor})`]: !!this.textColor
@@ -83,19 +84,19 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTag.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-rounded" })
+  decorators_js.property({ type: Boolean, attribute: "is-rounded" })
 ], exports.LuksoTag.prototype, "isRounded", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "background-color" })
+  decorators_js.property({ type: String, attribute: "background-color" })
 ], exports.LuksoTag.prototype, "backgroundColor", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "border-color" })
+  decorators_js.property({ type: String, attribute: "border-color" })
 ], exports.LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "text-color" })
+  decorators_js.property({ type: String, attribute: "text-color" })
 ], exports.LuksoTag.prototype, "textColor", 2);
 exports.LuksoTag = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-tag")

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

@@ -1,8 +1,9 @@
-import { b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { tv } from 'tailwind-variants';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
-import { c as customStyleMap } from '../../chunks/index-CZGvLdJ0.js';
+import { c as customStyleMap } from '../../chunks/index-CqZm8OfY.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
 
 const style = ":host {\n    display: inline-flex\n}";
 
@@ -24,7 +25,7 @@ let LuksoTag = class extends TailwindStyledElement(style) {
     this.backgroundColor = "";
     this.borderColor = "";
     this.textColor = "";
-    this.tagStyles = ce({
+    this.tagStyles = tv({
       base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
       variants: {
         size: {
@@ -63,7 +64,7 @@ let LuksoTag = class extends TailwindStyledElement(style) {
       size: this.size,
       isRounded: this.isRounded
     });
-    return x`
+    return html`
       <div
         data-testid="tag"
         class=${tagStyles}
@@ -79,19 +80,19 @@ let LuksoTag = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTag.prototype, "size", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-rounded" })
+  property({ type: Boolean, attribute: "is-rounded" })
 ], LuksoTag.prototype, "isRounded", 2);
 __decorateClass([
-  n({ type: String, attribute: "background-color" })
+  property({ type: String, attribute: "background-color" })
 ], LuksoTag.prototype, "backgroundColor", 2);
 __decorateClass([
-  n({ type: String, attribute: "border-color" })
+  property({ type: String, attribute: "border-color" })
 ], LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
-  n({ type: String, attribute: "text-color" })
+  property({ type: String, attribute: "text-color" })
 ], LuksoTag.prototype, "textColor", 2);
 LuksoTag = __decorateClass([
   safeCustomElement("lukso-tag")

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

@@ -2,13 +2,14 @@
 
 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 lit = require('lit');
+const decorators_js = require('lit/decorators.js');
 const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
-const index = require('../../chunks/index-DG4rMUh3.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-icon/index.cjs');
-require('../../chunks/index-BHAtoIlu.js');
+require('../../chunks/index-cakeic-M.js');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 
@@ -58,7 +59,7 @@ exports.LuksoTerms = class LuksoTerms extends shared_tailwindElement_index.Tailw
     });
   }
   render() {
-    return shared_tailwindElement_index.x`<div
+    return lit.html`<div
       id="scroll-container"
       class="border border-solid border-neutral-90 rounded-12 overflow-y-scroll relative scrollbar-none"
       @scroll=${this.handleScroll}
@@ -87,10 +88,10 @@ exports.LuksoTerms = class LuksoTerms extends shared_tailwindElement_index.Tailw
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTerms.prototype, "text", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoTerms.prototype, "hasScrollButton", 2);
 exports.LuksoTerms = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-terms")

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

@@ -1,10 +1,11 @@
-import { b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
-import { c as customClassMap } from '../../chunks/index-F8ll4iy2.js';
+import { TailwindStyledElement } from '../../shared/tailwind-element/index.js';
+import { c as customClassMap } from '../../chunks/index-C5S-_QDF.js';
+import '../../chunks/directive-DUHAbymA.js';
 import '../lukso-icon/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA6SrfZ-.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 
@@ -54,7 +55,7 @@ let LuksoTerms = class extends TailwindStyledElement(style) {
     });
   }
   render() {
-    return x`<div
+    return html`<div
       id="scroll-container"
       class="border border-solid border-neutral-90 rounded-12 overflow-y-scroll relative scrollbar-none"
       @scroll=${this.handleScroll}
@@ -83,10 +84,10 @@ let LuksoTerms = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTerms.prototype, "text", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoTerms.prototype, "hasScrollButton", 2);
 LuksoTerms = __decorateClass([
   safeCustomElement("lukso-terms")

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

@@ -2,15 +2,17 @@
 
 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('../../tailwind-config.cjs');
-const axe = require('../../chunks/axe-MHuN9KU0.js');
+const cn = require('../../chunks/cn-zamUNFMe.js');
+require('viem');
+require('axe-core');
 require('../lukso-icon/index.cjs');
-require('../../chunks/index-BHAtoIlu.js');
+require('../../chunks/index-cakeic-M.js');
 require('../lukso-form-label/index.cjs');
 require('../lukso-form-description/index.cjs');
 require('../lukso-form-error/index.cjs');
@@ -51,7 +53,7 @@ exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index
     this.rows = 4;
     this.hasFocus = false;
     this.hasHighlight = false;
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "group flex",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
@@ -132,18 +134,18 @@ exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index
     }
   }
   inputTemplate(styles) {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <textarea
-        name=${this.name ? this.name : shared_tailwindElement_index.E}
-        placeholder=${this.placeholder ? this.placeholder : shared_tailwindElement_index.E}
-        ref=${this.ref ? this.ref : shared_tailwindElement_index.E}
-        id=${this.id ? this.id : shared_tailwindElement_index.E}
+        name=${this.name ? this.name : lit.nothing}
+        placeholder=${this.placeholder ? this.placeholder : lit.nothing}
+        ref=${this.ref ? this.ref : lit.nothing}
+        id=${this.id ? this.id : lit.nothing}
         rows=${this.rows}
         data-testid=${this.name ? `textarea-${this.name}` : "textarea"}
         ?autofocus=${this.autofocus}
         ?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}
@@ -283,7 +285,7 @@ ${this.value}</textarea
       size: this.size,
       isNonResizable: this.isNonResizable
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="w-[inherit]">
         <lukso-form-label
           for-name=${this.name}
@@ -303,64 +305,64 @@ ${this.value}</textarea
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "value", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "name", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "placeholder", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "ref", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoTextarea.prototype, "customClass", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoTextarea.prototype, "isFullWidth", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoTextarea.prototype, "isReadonly", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoTextarea.prototype, "isDisabled", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoTextarea.prototype, "autofocus", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoTextarea.prototype, "borderless", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-non-resizable" })
+  decorators_js.property({ type: Boolean, attribute: "is-non-resizable" })
 ], exports.LuksoTextarea.prototype, "isNonResizable", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "keep-focus-on-escape" })
+  decorators_js.property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], exports.LuksoTextarea.prototype, "keepFocusOnEscape", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoTextarea.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoTextarea.prototype, "rows", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoTextarea.prototype, "hasFocus", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoTextarea.prototype, "hasHighlight", 2);
 exports.LuksoTextarea = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-textarea")

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

@@ -1,12 +1,14 @@
-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 { nothing, html } from 'lit';
+import { property, state } 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 { c as cn } from '../../chunks/axe-DJKac19y.js';
+import { c as cn } from '../../chunks/cn-LM_JlZIN.js';
+import 'viem';
+import 'axe-core';
 import '../lukso-icon/index.js';
-import '../../chunks/index-B_H2eYG_.js';
+import '../../chunks/index-CA6SrfZ-.js';
 import '../lukso-form-label/index.js';
 import '../lukso-form-description/index.js';
 import '../lukso-form-error/index.js';
@@ -47,7 +49,7 @@ let LuksoTextarea = class extends TailwindStyledElement(style) {
     this.rows = 4;
     this.hasFocus = false;
     this.hasHighlight = false;
-    this.styles = ce({
+    this.styles = tv({
       slots: {
         wrapper: "group flex",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
@@ -128,12 +130,12 @@ let LuksoTextarea = class extends TailwindStyledElement(style) {
     }
   }
   inputTemplate(styles) {
-    return x`
+    return html`
       <textarea
-        name=${this.name ? this.name : E}
-        placeholder=${this.placeholder ? this.placeholder : E}
-        ref=${this.ref ? this.ref : E}
-        id=${this.id ? this.id : E}
+        name=${this.name ? this.name : nothing}
+        placeholder=${this.placeholder ? this.placeholder : nothing}
+        ref=${this.ref ? this.ref : nothing}
+        id=${this.id ? this.id : nothing}
         rows=${this.rows}
         data-testid=${this.name ? `textarea-${this.name}` : "textarea"}
         ?autofocus=${this.autofocus}
@@ -279,7 +281,7 @@ ${this.value}</textarea
       size: this.size,
       isNonResizable: this.isNonResizable
     });
-    return x`
+    return html`
       <div class="w-[inherit]">
         <lukso-form-label
           for-name=${this.name}
@@ -299,64 +301,64 @@ ${this.value}</textarea
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "value", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "placeholder", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "ref", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "error", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoTextarea.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoTextarea.prototype, "isFullWidth", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoTextarea.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoTextarea.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoTextarea.prototype, "autofocus", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoTextarea.prototype, "borderless", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-non-resizable" })
+  property({ type: Boolean, attribute: "is-non-resizable" })
 ], LuksoTextarea.prototype, "isNonResizable", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "keep-focus-on-escape" })
+  property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], LuksoTextarea.prototype, "keepFocusOnEscape", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoTextarea.prototype, "size", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoTextarea.prototype, "rows", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoTextarea.prototype, "hasFocus", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoTextarea.prototype, "hasHighlight", 2);
 LuksoTextarea = __decorateClass([
   safeCustomElement("lukso-textarea")