@lukso/web-components 1.131.0 → 1.131.1

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x, E } from '../../index-2d057f81.js';
-import { n, t } from '../../property-5367c26a.js';
-import { o } from '../../style-map-9e6bb4a6.js';
+import { a as TailwindElement, x, E } from '../../index-44537fbb.js';
+import { n, t } from '../../property-27a56e78.js';
+import { o } from '../../style-map-d0cf7858.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import { u as uniqId } from '../../uniq-id-ce2d165c.js';
 import '../lukso-sanitize/index.js';
@@ -19,14 +19,53 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const DEFAULT_COLOR = "green-54";
 let LuksoSwitch = class extends TailwindElement {
-  color = DEFAULT_COLOR;
-  id = "";
-  name = "switch";
-  label = "";
-  description = "";
-  error = "";
-  isChecked = false;
-  isDisabled = false;
+  constructor() {
+    super();
+    this.color = DEFAULT_COLOR;
+    this.id = "";
+    this.name = "switch";
+    this.label = "";
+    this.description = "";
+    this.error = "";
+    this.isChecked = false;
+    this.isDisabled = false;
+    this.styles = ce({
+      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"
+      },
+      variants: {
+        isChecked: {
+          true: {
+            input: "translate-x-4"
+          },
+          false: {
+            label: "bg-neutral-90",
+            input: "border-neutral-90"
+          }
+        },
+        isDisabled: {
+          true: {
+            label: "opacity-70 cursor-not-allowed",
+            input: "cursor-not-allowed"
+          },
+          false: {
+            label: "cursor-pointer",
+            input: "cursor-pointer"
+          }
+        },
+        hasError: {
+          true: {
+            label: "!bg-red-65",
+            input: "!border-red-65"
+          }
+        }
+      }
+    });
+    if (!this.id) {
+      this.id = `switch-${uniqId()}`;
+    }
+  }
   async handleChange(event) {
     const target = event.target;
     await this.updateComplete;
@@ -40,45 +79,6 @@ let LuksoSwitch = class extends TailwindElement {
     });
     this.dispatchEvent(changeEvent);
   }
-  constructor() {
-    super();
-    if (!this.id) {
-      this.id = `switch-${uniqId()}`;
-    }
-  }
-  styles = ce({
-    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"
-    },
-    variants: {
-      isChecked: {
-        true: {
-          input: "translate-x-4"
-        },
-        false: {
-          label: "bg-neutral-90",
-          input: "border-neutral-90"
-        }
-      },
-      isDisabled: {
-        true: {
-          label: "opacity-70 cursor-not-allowed",
-          input: "cursor-not-allowed"
-        },
-        false: {
-          label: "cursor-pointer",
-          input: "cursor-pointer"
-        }
-      },
-      hasError: {
-        true: {
-          label: "!bg-red-65",
-          input: "!border-red-65"
-        }
-      }
-    }
-  });
   labelTemplate() {
     return x`
       <div

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-96bba619.cjs');
-const property = require('../../property-98f7e05b.cjs');
+const shared_tailwindElement_index = require('../../index-b103f110.cjs');
+const property = require('../../property-e2dd6303.cjs');
 const index = require('../../index-2b104ecb.cjs');
-const index$1 = require('../../index-5df012eb.cjs');
+const index$1 = require('../../index-6bad7e66.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -22,36 +22,39 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindStyledElement(style) {
-  size = "small";
-  isRounded = false;
-  backgroundColor = "";
-  borderColor = "";
-  textColor = "";
-  tagStyles = index.ce({
-    base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
-    variants: {
-      size: {
-        "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
-        small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
-        large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.isRounded = false;
+    this.backgroundColor = "";
+    this.borderColor = "";
+    this.textColor = "";
+    this.tagStyles = index.ce({
+      base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
+      variants: {
+        size: {
+          "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
+          small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
+          large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+        },
+        isRounded: {
+          true: "rounded-[56px]"
+        }
       },
-      isRounded: {
-        true: "rounded-[56px]"
-      }
-    },
-    compoundVariants: [
-      {
-        size: "small",
-        isRounded: true,
-        class: "px-3"
-      },
-      {
-        size: "x-small",
-        isRounded: true,
-        class: "px-2"
-      }
-    ]
-  });
+      compoundVariants: [
+        {
+          size: "small",
+          isRounded: true,
+          class: "px-3"
+        },
+        {
+          size: "x-small",
+          isRounded: true,
+          class: "px-2"
+        }
+      ]
+    });
+  }
   resolveBorderColor() {
     if (this.borderColor) {
       return this.borderColor;

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x } from '../../index-2d057f81.js';
-import { n, t } from '../../property-5367c26a.js';
+import { T as TailwindStyledElement, x } from '../../index-44537fbb.js';
+import { n, t } from '../../property-27a56e78.js';
 import { c as ce } from '../../index-d14b6a34.js';
-import { c as customStyleMap } from '../../index-5387057e.js';
+import { c as customStyleMap } from '../../index-1db9d1ee.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -18,36 +18,39 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let LuksoTag = class extends TailwindStyledElement(style) {
-  size = "small";
-  isRounded = false;
-  backgroundColor = "";
-  borderColor = "";
-  textColor = "";
-  tagStyles = ce({
-    base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
-    variants: {
-      size: {
-        "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
-        small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
-        large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.isRounded = false;
+    this.backgroundColor = "";
+    this.borderColor = "";
+    this.textColor = "";
+    this.tagStyles = ce({
+      base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
+      variants: {
+        size: {
+          "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
+          small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
+          large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+        },
+        isRounded: {
+          true: "rounded-[56px]"
+        }
       },
-      isRounded: {
-        true: "rounded-[56px]"
-      }
-    },
-    compoundVariants: [
-      {
-        size: "small",
-        isRounded: true,
-        class: "px-3"
-      },
-      {
-        size: "x-small",
-        isRounded: true,
-        class: "px-2"
-      }
-    ]
-  });
+      compoundVariants: [
+        {
+          size: "small",
+          isRounded: true,
+          class: "px-3"
+        },
+        {
+          size: "x-small",
+          isRounded: true,
+          class: "px-2"
+        }
+      ]
+    });
+  }
   resolveBorderColor() {
     if (this.borderColor) {
       return this.borderColor;

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-96bba619.cjs');
-const property = require('../../property-98f7e05b.cjs');
-const state = require('../../state-eba8ded5.cjs');
+const shared_tailwindElement_index = require('../../index-b103f110.cjs');
+const property = require('../../property-e2dd6303.cjs');
+const state = require('../../state-e20739c9.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-b13b92c1.cjs');
+require('../../style-map-ff389c6a.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 
@@ -25,11 +25,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.LuksoTerms = class LuksoTerms extends shared_tailwindElement_index.TailwindStyledElement(style) {
-  text = "";
-  hasScrollButton = true;
-  defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.hasScrollButton = true;
+    this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
     bg-gradient-to-b from-transparent to-neutral-100/80
     flex justify-center transition-opacity opacity-0`;
+  }
   onScrollBottom() {
     const event = new CustomEvent("on-bottom-scroll", {
       bubbles: true,

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

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-2d057f81.js';
-import { n, t } from '../../property-5367c26a.js';
-import { r } from '../../state-bdfaec36.js';
+import { T as TailwindStyledElement, x } from '../../index-44537fbb.js';
+import { n, t } from '../../property-27a56e78.js';
+import { r } from '../../state-cda0c5ee.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-9e6bb4a6.js';
+import '../../style-map-d0cf7858.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 
@@ -21,11 +21,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let LuksoTerms = class extends TailwindStyledElement(style) {
-  text = "";
-  hasScrollButton = true;
-  defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.hasScrollButton = true;
+    this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
     bg-gradient-to-b from-transparent to-neutral-100/80
     flex justify-center transition-opacity opacity-0`;
+  }
   onScrollBottom() {
     const event = new CustomEvent("on-bottom-scroll", {
       bubbles: true,

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-96bba619.cjs');
-const property = require('../../property-98f7e05b.cjs');
+const shared_tailwindElement_index = require('../../index-b103f110.cjs');
+const property = require('../../property-e2dd6303.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 
 /**
@@ -56,18 +56,21 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.LuksoTest = class LuksoTest extends shared_tailwindElement_index.TailwindStyledElement(style) {
-  name = "World";
-  clicked = false;
-  disabled = false;
-  duration = 1e3;
-  controller = new t(this, {
-    defaultOptions: {
-      keyframeOptions: {
-        duration: this.duration,
-        fill: "backwards"
+  constructor() {
+    super(...arguments);
+    this.name = "World";
+    this.clicked = false;
+    this.disabled = false;
+    this.duration = 1e3;
+    this.controller = new t(this, {
+      defaultOptions: {
+        keyframeOptions: {
+          duration: this.duration,
+          fill: "backwards"
+        }
       }
-    }
-  });
+    });
+  }
   _onClick() {
     if (this.disabled) {
       return;

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

@@ -1,5 +1,5 @@
-import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-2d057f81.js';
-import { n as n$3, t as t$4 } from '../../property-5367c26a.js';
+import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-44537fbb.js';
+import { n as n$3, t as t$4 } from '../../property-27a56e78.js';
 import { e as e$3, i as i$3, t as t$3 } from '../../directive-2bb7789e.js';
 
 /**
@@ -52,18 +52,21 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let LuksoTest = class extends TailwindStyledElement(style) {
-  name = "World";
-  clicked = false;
-  disabled = false;
-  duration = 1e3;
-  controller = new t(this, {
-    defaultOptions: {
-      keyframeOptions: {
-        duration: this.duration,
-        fill: "backwards"
+  constructor() {
+    super(...arguments);
+    this.name = "World";
+    this.clicked = false;
+    this.disabled = false;
+    this.duration = 1e3;
+    this.controller = new t(this, {
+      defaultOptions: {
+        keyframeOptions: {
+          duration: this.duration,
+          fill: "backwards"
+        }
       }
-    }
-  });
+    });
+  }
   _onClick() {
     if (this.disabled) {
       return;

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-96bba619.cjs');
-const property = require('../../property-98f7e05b.cjs');
-const state = require('../../state-eba8ded5.cjs');
+const shared_tailwindElement_index = require('../../index-b103f110.cjs');
+const property = require('../../property-e2dd6303.cjs');
+const state = require('../../state-e20739c9.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
-require('../../style-map-b13b92c1.cjs');
+require('../../style-map-ff389c6a.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
@@ -28,92 +28,95 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const FOCUS_DELAY_MS = 10;
 exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index.TailwindStyledElement(style) {
-  value = "";
-  name = "";
-  placeholder = "";
-  label = "";
-  id = "";
-  ref = void 0;
-  description = "";
-  error = "";
-  customClass = "";
-  isFullWidth = false;
-  isReadonly = false;
-  isDisabled = false;
-  autofocus = false;
-  borderless = false;
-  isNonResizable = false;
-  keepFocusOnEscape = false;
-  size = "medium";
-  rows = 4;
-  hasFocus = false;
-  hasHighlight = false;
-  styles = index.ce({
-    slots: {
-      wrapper: "group flex",
-      input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.name = "";
+    this.placeholder = "";
+    this.label = "";
+    this.id = "";
+    this.ref = void 0;
+    this.description = "";
+    this.error = "";
+    this.customClass = "";
+    this.isFullWidth = false;
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.autofocus = false;
+    this.borderless = false;
+    this.isNonResizable = false;
+    this.keepFocusOnEscape = false;
+    this.size = "medium";
+    this.rows = 4;
+    this.hasFocus = false;
+    this.hasHighlight = false;
+    this.styles = index.ce({
+      slots: {
+        wrapper: "group flex",
+        input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
         outline-none transition transition-all duration-150 appearance-none`
-    },
-    variants: {
-      hasError: {
-        true: {
-          input: "border-red-85"
-        },
-        false: {
-          input: "border-neutral-90"
-        }
-      },
-      hasHighlight: {
-        true: {
-          input: "border-neutral-35"
-        }
-      },
-      borderless: {
-        true: { input: "border-0" },
-        false: { input: "border" }
-      },
-      isReadonly: {
-        true: { input: "cursor-not-allowed" }
       },
-      isDisabled: {
-        true: {
-          input: "text-neutral-60 cursor-not-allowed"
+      variants: {
+        hasError: {
+          true: {
+            input: "border-red-85"
+          },
+          false: {
+            input: "border-neutral-90"
+          }
         },
-        false: { input: "text-neutral-20" }
-      },
-      isFullWidth: {
-        true: { wrapper: "w-full" },
-        false: { wrapper: "w-[350px]" }
-      },
-      size: {
-        small: {
-          input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
+        hasHighlight: {
+          true: {
+            input: "border-neutral-35"
+          }
         },
-        medium: {
-          input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
-        }
-      },
-      isNonResizable: {
-        true: {
-          input: "resize-none"
+        borderless: {
+          true: { input: "border-0" },
+          false: { input: "border" }
+        },
+        isReadonly: {
+          true: { input: "cursor-not-allowed" }
+        },
+        isDisabled: {
+          true: {
+            input: "text-neutral-60 cursor-not-allowed"
+          },
+          false: { input: "text-neutral-20" }
+        },
+        isFullWidth: {
+          true: { wrapper: "w-full" },
+          false: { wrapper: "w-[350px]" }
+        },
+        size: {
+          small: {
+            input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
+          },
+          medium: {
+            input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
+          }
+        },
+        isNonResizable: {
+          true: {
+            input: "resize-none"
+          }
         }
-      }
-    },
-    compoundVariants: [
-      {
-        isFullWidth: false,
-        size: "small",
-        class: { wrapper: "w-[210px]" }
       },
-      {
-        hasHighlight: true,
-        hasError: true,
-        class: {
-          input: "border-red-65"
+      compoundVariants: [
+        {
+          isFullWidth: false,
+          size: "small",
+          class: { wrapper: "w-[210px]" }
+        },
+        {
+          hasHighlight: true,
+          hasError: true,
+          class: {
+            input: "border-red-65"
+          }
         }
-      }
-    ]
-  });
+      ]
+    });
+  }
   connectedCallback() {
     super.connectedCallback();
     if (this.autofocus) {