@lukso/web-components 1.172.13 → 1.172.14

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

@@ -2,12 +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 state = require('../../chunks/state-CFjY89m3.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 shared_tailwindElement_index = require('../../shared/tailwind-element/index.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,7 +27,7 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
     this.isLoading = true;
     this.resolvedPlaceholder = "";
     this.hasError = false;
-    this.imageStyles = index.ce({
+    this.imageStyles = tailwindVariants.tv({
       slots: {
         wrapper: "size-full bg-neutral-100",
         placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
@@ -89,7 +89,7 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
       isLoading: this.isLoading,
       hasError: this.hasError
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class=${wrapper()}>
         <div
           class=${placeholder()}
@@ -111,19 +111,19 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
   }
 };
 __decorateClass([
-  property.n({ type: String, reflect: true })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.LuksoImage.prototype, "src", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoImage.prototype, "placeholder", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoImage.prototype, "isLoading", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoImage.prototype, "resolvedPlaceholder", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoImage.prototype, "hasError", 2);
 exports.LuksoImage = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-image")

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

@@ -1,9 +1,9 @@
-import { T as TailwindElement, x } from '../../chunks/index-5X9ujrWL.js';
-import { n } from '../../chunks/property-DfumgIL6.js';
-import { r } from '../../chunks/state-CaelFSbE.js';
-import { o } from '../../chunks/style-map-BPljJihp.js';
-import { c as ce } from '../../chunks/index-B9iart53.js';
+import { html } from 'lit';
+import { property, state } 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 { TailwindElement } from '../../shared/tailwind-element/index.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -23,7 +23,7 @@ let LuksoImage = class extends TailwindElement {
     this.isLoading = true;
     this.resolvedPlaceholder = "";
     this.hasError = false;
-    this.imageStyles = ce({
+    this.imageStyles = tv({
       slots: {
         wrapper: "size-full bg-neutral-100",
         placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
@@ -85,7 +85,7 @@ let LuksoImage = class extends TailwindElement {
       isLoading: this.isLoading,
       hasError: this.hasError
     });
-    return x`
+    return html`
       <div class=${wrapper()}>
         <div
           class=${placeholder()}
@@ -107,19 +107,19 @@ let LuksoImage = class extends TailwindElement {
   }
 };
 __decorateClass([
-  n({ type: String, reflect: true })
+  property({ type: String, reflect: true })
 ], LuksoImage.prototype, "src", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoImage.prototype, "placeholder", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoImage.prototype, "isLoading", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoImage.prototype, "resolvedPlaceholder", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoImage.prototype, "hasError", 2);
 LuksoImage = __decorateClass([
   safeCustomElement("lukso-image")

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

@@ -2,18 +2,20 @@
 
 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');
 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');
+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');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -45,7 +47,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     this.keepFocusOnEscape = false;
     this.hasFocus = false;
     this.hasHighlight = false;
-    this.inputStyles = index.ce({
+    this.inputStyles = tailwindVariants.tv({
       slots: {
         wrapper: "group flex",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
@@ -172,23 +174,23 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
   }
   // @input works better in vue
   inputTemplate(styles) {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <input
-        name=${this.name ? this.name : shared_tailwindElement_index.E}
+        name=${this.name ? this.name : lit.nothing}
         type=${this.type}
         .value=${this.value}
-        placeholder=${this.placeholder ? this.placeholder : shared_tailwindElement_index.E}
+        placeholder=${this.placeholder ? this.placeholder : lit.nothing}
         ?autofocus=${this.autofocus}
-        min=${this.min ? this.min : shared_tailwindElement_index.E}
-        max=${this.max ? this.max : shared_tailwindElement_index.E}
+        min=${this.min ? this.min : lit.nothing}
+        max=${this.max ? this.max : lit.nothing}
         autocomplete=${this.autocomplete}
-        ref=${this.ref ? this.ref : shared_tailwindElement_index.E}
-        id=${this.id ? this.id : shared_tailwindElement_index.E}
+        ref=${this.ref ? this.ref : lit.nothing}
+        id=${this.id ? this.id : lit.nothing}
         data-testid=${this.name ? `input-${this.name}` : "input"}
-        accept=${this.accept ? this.accept : shared_tailwindElement_index.E}
+        accept=${this.accept ? this.accept : lit.nothing}
         ?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}
@@ -203,7 +205,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     `;
   }
   unitTemplate(styles) {
-    return shared_tailwindElement_index.x`<div
+    return lit.html`<div
       class=${styles}
       @mouseenter=${this.handleMouseOver}
       @mouseleave=${this.handleMouseOut}
@@ -214,7 +216,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
   }
   rightIconTemplate(styles) {
     const iconSize = this.size === "small" ? "small" : "medium";
-    return shared_tailwindElement_index.x`<lukso-icon
+    return lit.html`<lukso-icon
       name=${this.rightIcon}
       size=${iconSize}
       class=${styles}
@@ -370,7 +372,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       hasRightIcon: !!this.rightIcon,
       isRightIconClickable: this.isRightIconClickable
     });
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="w-[inherit]">
         <lukso-form-label
           for-name=${this.name}
@@ -382,9 +384,9 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
         <div class=${wrapper()}>
           <div class="relative w-[inherit]">
             ${this.inputTemplate(input())}
-            ${this.rightIcon ? this.rightIconTemplate(rightIcon()) : shared_tailwindElement_index.E}
+            ${this.rightIcon ? this.rightIconTemplate(rightIcon()) : lit.nothing}
           </div>
-          ${this.unit ? this.unitTemplate(unit()) : shared_tailwindElement_index.E}
+          ${this.unit ? this.unitTemplate(unit()) : lit.nothing}
         </div>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -392,82 +394,82 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "value", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "name", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "type", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "placeholder", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "autocomplete", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "id", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "ref", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "accept", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "unit", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "custom-class" })
+  decorators_js.property({ type: String, attribute: "custom-class" })
 ], exports.LuksoInput.prototype, "customClass", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoInput.prototype, "isFullWidth", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoInput.prototype, "isReadonly", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoInput.prototype, "isDisabled", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoInput.prototype, "autofocus", 2);
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoInput.prototype, "max", 2);
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoInput.prototype, "min", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoInput.prototype, "borderless", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoInput.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "right-icon" })
+  decorators_js.property({ type: String, attribute: "right-icon" })
 ], exports.LuksoInput.prototype, "rightIcon", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-right-icon-clickable" })
+  decorators_js.property({ type: Boolean, attribute: "is-right-icon-clickable" })
 ], exports.LuksoInput.prototype, "isRightIconClickable", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "keep-focus-on-escape" })
+  decorators_js.property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], exports.LuksoInput.prototype, "keepFocusOnEscape", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoInput.prototype, "hasFocus", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoInput.prototype, "hasHighlight", 2);
 exports.LuksoInput = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-input")

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

@@ -1,15 +1,17 @@
-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 '../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';
+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';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -41,7 +43,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     this.keepFocusOnEscape = false;
     this.hasFocus = false;
     this.hasHighlight = false;
-    this.inputStyles = ce({
+    this.inputStyles = tv({
       slots: {
         wrapper: "group flex",
         input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
@@ -168,20 +170,20 @@ let LuksoInput = class extends TailwindStyledElement(style) {
   }
   // @input works better in vue
   inputTemplate(styles) {
-    return x`
+    return html`
       <input
-        name=${this.name ? this.name : E}
+        name=${this.name ? this.name : nothing}
         type=${this.type}
         .value=${this.value}
-        placeholder=${this.placeholder ? this.placeholder : E}
+        placeholder=${this.placeholder ? this.placeholder : nothing}
         ?autofocus=${this.autofocus}
-        min=${this.min ? this.min : E}
-        max=${this.max ? this.max : E}
+        min=${this.min ? this.min : nothing}
+        max=${this.max ? this.max : nothing}
         autocomplete=${this.autocomplete}
-        ref=${this.ref ? this.ref : E}
-        id=${this.id ? this.id : E}
+        ref=${this.ref ? this.ref : nothing}
+        id=${this.id ? this.id : nothing}
         data-testid=${this.name ? `input-${this.name}` : "input"}
-        accept=${this.accept ? this.accept : E}
+        accept=${this.accept ? this.accept : nothing}
         ?readonly=${this.isReadonly ? true : void 0}
         ?disabled=${this.isDisabled ? true : void 0}
         class=${cn(styles, this.customClass)}
@@ -199,7 +201,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     `;
   }
   unitTemplate(styles) {
-    return x`<div
+    return html`<div
       class=${styles}
       @mouseenter=${this.handleMouseOver}
       @mouseleave=${this.handleMouseOut}
@@ -210,7 +212,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
   }
   rightIconTemplate(styles) {
     const iconSize = this.size === "small" ? "small" : "medium";
-    return x`<lukso-icon
+    return html`<lukso-icon
       name=${this.rightIcon}
       size=${iconSize}
       class=${styles}
@@ -366,7 +368,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
       hasRightIcon: !!this.rightIcon,
       isRightIconClickable: this.isRightIconClickable
     });
-    return x`
+    return html`
       <div class="w-[inherit]">
         <lukso-form-label
           for-name=${this.name}
@@ -378,9 +380,9 @@ let LuksoInput = class extends TailwindStyledElement(style) {
         <div class=${wrapper()}>
           <div class="relative w-[inherit]">
             ${this.inputTemplate(input())}
-            ${this.rightIcon ? this.rightIconTemplate(rightIcon()) : E}
+            ${this.rightIcon ? this.rightIconTemplate(rightIcon()) : nothing}
           </div>
-          ${this.unit ? this.unitTemplate(unit()) : E}
+          ${this.unit ? this.unitTemplate(unit()) : nothing}
         </div>
         <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
@@ -388,82 +390,82 @@ let LuksoInput = class extends TailwindStyledElement(style) {
   }
 };
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "value", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "name", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "type", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "placeholder", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "label", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "autocomplete", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "id", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "ref", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "accept", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "description", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "error", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "unit", 2);
 __decorateClass([
-  n({ type: String, attribute: "custom-class" })
+  property({ type: String, attribute: "custom-class" })
 ], LuksoInput.prototype, "customClass", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-full-width" })
+  property({ type: Boolean, attribute: "is-full-width" })
 ], LuksoInput.prototype, "isFullWidth", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-readonly" })
+  property({ type: Boolean, attribute: "is-readonly" })
 ], LuksoInput.prototype, "isReadonly", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-disabled" })
+  property({ type: Boolean, attribute: "is-disabled" })
 ], LuksoInput.prototype, "isDisabled", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoInput.prototype, "autofocus", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoInput.prototype, "max", 2);
 __decorateClass([
-  n({ type: Number })
+  property({ type: Number })
 ], LuksoInput.prototype, "min", 2);
 __decorateClass([
-  n({ type: Boolean })
+  property({ type: Boolean })
 ], LuksoInput.prototype, "borderless", 2);
 __decorateClass([
-  n({ type: String })
+  property({ type: String })
 ], LuksoInput.prototype, "size", 2);
 __decorateClass([
-  n({ type: String, attribute: "right-icon" })
+  property({ type: String, attribute: "right-icon" })
 ], LuksoInput.prototype, "rightIcon", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "is-right-icon-clickable" })
+  property({ type: Boolean, attribute: "is-right-icon-clickable" })
 ], LuksoInput.prototype, "isRightIconClickable", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "keep-focus-on-escape" })
+  property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], LuksoInput.prototype, "keepFocusOnEscape", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoInput.prototype, "hasFocus", 2);
 __decorateClass([
-  r()
+  state()
 ], LuksoInput.prototype, "hasHighlight", 2);
 LuksoInput = __decorateClass([
   safeCustomElement("lukso-input")