@lukso/web-components 1.67.0 → 1.68.1

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
-const index = require('../../index-e8741080.cjs');
+const index = require('../../index-66211c85.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
-require('../../style-map-c75e9a96.cjs');
+require('../../style-map-7d4ddea1.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-21e30dce.cjs');
+require('../../index-0e131d65.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -37,7 +37,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.navbarStyles = index.se({
+    this.navbarStyles = index.ie({
       slots: {
         wrapper: `bg-neutral-100 shadow-pink-drop-shadow h-78 grid items-center`,
         mobileMenuWrapper: `items-center justify-end pr-6 flex gap-2`,

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

@@ -1,12 +1,12 @@
-import { a as TailwindElement, x, A } from '../../index-987980d1.js';
+import { a as TailwindElement, x, A } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
-import { s as se } from '../../index-c55a1069.js';
+import { i as ie } from '../../index-faa8c4ae.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
-import '../../style-map-de03e3eb.js';
+import '../../style-map-21f59b89.js';
 import '../../directive-2bb7789e.js';
-import '../../index-ccc127cd.js';
+import '../../index-f171e7da.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -33,7 +33,7 @@ let LuksoNavbar = class extends TailwindElement {
     this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.navbarStyles = se({
+    this.navbarStyles = ie({
       slots: {
         wrapper: `bg-neutral-100 shadow-pink-drop-shadow h-78 grid items-center`,
         mobileMenuWrapper: `items-center justify-end pr-6 flex gap-2`,

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c75e9a96.cjs');
+const styleMap = require('../../style-map-7d4ddea1.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-987980d1.js';
+import { a as TailwindElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-de03e3eb.js';
+import { o } from '../../style-map-21f59b89.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c75e9a96.cjs');
+const styleMap = require('../../style-map-7d4ddea1.cjs');
 require('../../tailwind-config.cjs');
-const cn = require('../../cn-4ec0bd94.cjs');
+const cn = require('../../cn-5a985a94.cjs');
 require('../../directive-8278ab14.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,8 +1,8 @@
-import { a as TailwindElement, x } from '../../index-987980d1.js';
+import { a as TailwindElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-de03e3eb.js';
+import { o } from '../../style-map-21f59b89.js';
 import '../../tailwind-config.js';
-import { c as cn } from '../../cn-616567d4.js';
+import { c as cn } from '../../cn-e708e7fa.js';
 import '../../directive-2bb7789e.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

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

@@ -1,4 +1,4 @@
-import { A, b as T, a as TailwindElement, x } from '../../index-987980d1.js';
+import { A, b as T, a as TailwindElement, x } from '../../index-814bcac2.js';
 import { n, e as e$2 } from '../../query-assigned-elements-5d94572f.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');
@@ -10,8 +10,8 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-c75e9a96.cjs');
-require('../../index-21e30dce.cjs');
+require('../../style-map-7d4ddea1.cjs');
+require('../../index-0e131d65.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}";
 

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-987980d1.js';
+import { T as TailwindStyledElement, x, A } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,8 +6,8 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-de03e3eb.js';
-import '../../index-ccc127cd.js';
+import '../../style-map-21f59b89.js';
+import '../../index-f171e7da.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
-const index = require('../../index-e8741080.cjs');
+const index = require('../../index-66211c85.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-require('../../style-map-c75e9a96.cjs');
+require('../../style-map-7d4ddea1.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../index-e9668573.cjs');
-require('../../index-21e30dce.cjs');
+require('../../index-0e131d65.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}";
 
@@ -47,7 +47,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
     this.isLargeIcon = false;
     this.optionsParsed = [];
     this.valueParsed = void 0;
-    this.inputStyles = index.se({
+    this.inputStyles = index.ie({
       base: `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
       border border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
       outline-none transition transition-all duration-150 appearance-none rounded-12
@@ -68,7 +68,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         }
       }
     });
-    this.dropdownWrapperStyles = index.se({
+    this.dropdownWrapperStyles = index.ie({
       base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50
       flex absolute flex-col gap-1 overflow-y-auto max-h-64 mt-2`,
       variants: {
@@ -77,7 +77,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         }
       }
     });
-    this.optionsStyles = index.se({
+    this.optionsStyles = index.ie({
       base: `paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2
       whitespace-nowrap hover:bg-neutral-98 flex items-center`,
       variants: {
@@ -89,7 +89,7 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         }
       }
     });
-    this.iconStyles = index.se({
+    this.iconStyles = index.ie({
       base: `absolute right-0 mr-3 transition cursor-pointer`,
       variants: {
         isDisabled: {

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

@@ -1,14 +1,14 @@
-import { T as TailwindStyledElement, x, A } from '../../index-987980d1.js';
+import { T as TailwindStyledElement, x, A } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
-import { s as se } from '../../index-c55a1069.js';
+import { i as ie } from '../../index-faa8c4ae.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-import '../../style-map-de03e3eb.js';
+import '../../style-map-21f59b89.js';
 import '../../directive-2bb7789e.js';
 import '../../index-5e194caf.js';
-import '../../index-ccc127cd.js';
+import '../../index-f171e7da.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -43,7 +43,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
     this.isLargeIcon = false;
     this.optionsParsed = [];
     this.valueParsed = void 0;
-    this.inputStyles = se({
+    this.inputStyles = ie({
       base: `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-11
       border border-solid h-[48px] placeholder:text-neutral-70 select-none whitespace-nowrap
       outline-none transition transition-all duration-150 appearance-none rounded-12
@@ -64,7 +64,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.dropdownWrapperStyles = se({
+    this.dropdownWrapperStyles = ie({
       base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl rounded-12 p-3 z-50
       flex absolute flex-col gap-1 overflow-y-auto max-h-64 mt-2`,
       variants: {
@@ -73,7 +73,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.optionsStyles = se({
+    this.optionsStyles = ie({
       base: `paragraph-inter-14-regular text-neutral-20 cursor-pointer rounded-8 p-2
       whitespace-nowrap hover:bg-neutral-98 flex items-center`,
       variants: {
@@ -85,7 +85,7 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         }
       }
     });
-    this.iconStyles = se({
+    this.iconStyles = ie({
       base: `absolute right-0 mr-3 transition cursor-pointer`,
       variants: {
         isDisabled: {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-987980d1.js';
+import { T as TailwindStyledElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c75e9a96.cjs');
+const styleMap = require('../../style-map-7d4ddea1.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-987980d1.js';
+import { a as TailwindElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-de03e3eb.js';
+import { o } from '../../style-map-21f59b89.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const index = require('../../index-e8741080.cjs');
-const index$1 = require('../../index-21e30dce.cjs');
+const index = require('../../index-66211c85.cjs');
+const index$1 = require('../../index-0e131d65.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -29,7 +29,7 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
     this.backgroundColor = "";
     this.borderColor = "";
     this.textColor = "";
-    this.tagStyles = index.se({
+    this.tagStyles = index.ie({
       base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2",
       variants: {
         size: {

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

@@ -1,7 +1,7 @@
-import { T as TailwindStyledElement, x } from '../../index-987980d1.js';
+import { T as TailwindStyledElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { s as se } from '../../index-c55a1069.js';
-import { c as customStyleMap } from '../../index-ccc127cd.js';
+import { i as ie } from '../../index-faa8c4ae.js';
+import { c as customStyleMap } from '../../index-f171e7da.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -25,7 +25,7 @@ let LuksoTag = class extends TailwindStyledElement(style) {
     this.backgroundColor = "";
     this.borderColor = "";
     this.textColor = "";
-    this.tagStyles = se({
+    this.tagStyles = ie({
       base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2",
       variants: {
         size: {

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-c75e9a96.cjs');
+require('../../style-map-7d4ddea1.cjs');
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x } from '../../index-987980d1.js';
+import { T as TailwindStyledElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.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-de03e3eb.js';
+import '../../style-map-21f59b89.js';
 
 const style = ":host {\n    display: flex;\n    height: 100%\n}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

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

@@ -1,4 +1,4 @@
-import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-987980d1.js';
+import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-814bcac2.js';
 import { n as n$3, e as e$3 } from '../../query-assigned-elements-5d94572f.js';
 import { e as e$2, i as i$3, t as t$3 } from '../../directive-2bb7789e.js';
 

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

@@ -2,9 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-9158df3a.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
+const index = require('../../index-66211c85.cjs');
+const styleMap = require('../../style-map-7d4ddea1.cjs');
+require('../../directive-8278ab14.cjs');
 
 var top = 'top';
 var bottom = 'bottom';
@@ -3475,6 +3478,13 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
     this.showCopy = false;
     this.optionsParsed = [];
     this.tooltipInstance = void 0;
+    this.tooltipStyles = index.ie({
+      slots: {
+        tooltip: "hidden",
+        trigger: "cursor-pointer flex flex-col items-center",
+        options: "rounded-4 hover:bg-neutral-95"
+      }
+    });
   }
   hideOnClickCheck() {
     if (this.hideOnClick === "toggle") {
@@ -3542,21 +3552,31 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
     }
     this.initTooltip();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.tooltipInstance?.destroy();
+  }
   optionsTemplate() {
-    return shared_tailwindElement_index.x`
-      ${Object.entries(this.optionsParsed).map(
-      (option) => shared_tailwindElement_index.x`<div
-            class="mb-1 rounded-4 px-2 py-1 hover:cursor-pointer hover:bg-neutral-95"
+    const { options } = this.tooltipStyles();
+    return shared_tailwindElement_index.x`<ul>
+      ${Object.entries(this.optionsParsed)?.map(
+      (option) => shared_tailwindElement_index.x`<li
+            class=${options()}
+            style=${styleMap.o({
+        padding: "4px 8px",
+        cursor: "pointer"
+      })}
             onClick="navigator.clipboard.writeText('${option[1].value}')"
           >
             ${option[1].text}
-          </div>`
+          </li>`
     )}
-    `;
+    </ul>`;
   }
   render() {
+    const { tooltip, trigger } = this.tooltipStyles();
     return shared_tailwindElement_index.x`
-      <div id="tooltip" role="tooltip" class="bg-neutral-20 p-4 hidden">
+      <div id="tooltip" role="tooltip" class=${tooltip()}>
         ${this.options ? this.optionsTemplate() : this.text}
       </div>
       ${this.isClipboardCopy ? shared_tailwindElement_index.x`<lukso-tooltip
@@ -3569,18 +3589,10 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
             ?show=${this.showCopy ? true : void 0}
             text=${this.copyText}
           >
-            <div
-              id="trigger"
-              class="cursor-pointer flex flex-col items-center"
-              @click=${this.handleClick}
-            >
+            <div id="trigger" class=${trigger()} @click=${this.handleClick}>
               <slot></slot>
             </div>
-          </lukso-tooltip>` : shared_tailwindElement_index.x`<div
-            id="trigger"
-            class="cursor-pointer flex flex-col items-center"
-            @click=${this.handleClick}
-          >
+          </lukso-tooltip>` : shared_tailwindElement_index.x`<div id="trigger" class=${trigger()} @click=${this.handleClick}>
             <slot></slot>
           </div>`}
     `;

package/dist/components/lukso-tooltip/index.d.ts

@@ -26,10 +26,12 @@ export declare class LuksoTooltip extends LuksoTooltip_base {
     showCopy: boolean;
     optionsParsed: TooltipOption[];
     private tooltipInstance;
+    private tooltipStyles;
     private hideOnClickCheck;
     private initTooltip;
     private handleClick;
     willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
+    disconnectedCallback(): void;
     private optionsTemplate;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/lukso-tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAO/C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC9E,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC5C,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,YAAY,GACZ,UAAU,CAAA;AACd,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;;AAED,qBACa,YAAa,SAAQ,iBAA4B;IAE5D,OAAO,EAAE,cAAc,CAAU;IAGjC,IAAI,EAAE,WAAW,CAAW;IAG5B,SAAS,EAAE,gBAAgB,CAAQ;IAGnC,OAAO,EAAE,cAAc,CAAe;IAGtC,IAAI,SAAK;IAGT,QAAQ,SAAM;IAGd,IAAI,UAAQ;IAGZ,WAAW,SAAS;IAGpB,eAAe,UAAQ;IAGvB,QAAQ,SAAK;IAGb,SAAS,SAAK;IAGd,MAAM,SAAK;IAGX,OAAO,SAAK;IAGZ,QAAQ,UAAQ;IAGhB,aAAa,EAAE,aAAa,EAAE,CAAK;IAEnC,OAAO,CAAC,eAAe,CAAY;IAEnC,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,WAAW;IAab,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAyBxD,OAAO,CAAC,eAAe;IAcvB,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAS/C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC9E,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC5C,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,YAAY,GACZ,UAAU,CAAA;AACd,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;;AAED,qBACa,YAAa,SAAQ,iBAA4B;IAE5D,OAAO,EAAE,cAAc,CAAU;IAGjC,IAAI,EAAE,WAAW,CAAW;IAG5B,SAAS,EAAE,gBAAgB,CAAQ;IAGnC,OAAO,EAAE,cAAc,CAAe;IAGtC,IAAI,SAAK;IAGT,QAAQ,SAAM;IAGd,IAAI,UAAQ;IAGZ,WAAW,SAAS;IAGpB,eAAe,UAAQ;IAGvB,QAAQ,SAAK;IAGb,SAAS,SAAK;IAGd,MAAM,SAAK;IAGX,OAAO,SAAK;IAGZ,QAAQ,UAAQ;IAGhB,aAAa,EAAE,aAAa,EAAE,CAAK;IAEnC,OAAO,CAAC,eAAe,CAAY;IAEnC,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,WAAW;IAab,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAyBxD,oBAAoB;IAKpB,OAAO,CAAC,eAAe;IAqBvB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

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

@@ -1,6 +1,9 @@
-import { T as TailwindStyledElement, x } from '../../index-987980d1.js';
+import { T as TailwindStyledElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
+import { i as ie } from '../../index-faa8c4ae.js';
+import { o } from '../../style-map-21f59b89.js';
+import '../../directive-2bb7789e.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -3471,6 +3474,13 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
     this.showCopy = false;
     this.optionsParsed = [];
     this.tooltipInstance = void 0;
+    this.tooltipStyles = ie({
+      slots: {
+        tooltip: "hidden",
+        trigger: "cursor-pointer flex flex-col items-center",
+        options: "rounded-4 hover:bg-neutral-95"
+      }
+    });
   }
   hideOnClickCheck() {
     if (this.hideOnClick === "toggle") {
@@ -3538,21 +3548,31 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
     }
     this.initTooltip();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.tooltipInstance?.destroy();
+  }
   optionsTemplate() {
-    return x`
-      ${Object.entries(this.optionsParsed).map(
-      (option) => x`<div
-            class="mb-1 rounded-4 px-2 py-1 hover:cursor-pointer hover:bg-neutral-95"
+    const { options } = this.tooltipStyles();
+    return x`<ul>
+      ${Object.entries(this.optionsParsed)?.map(
+      (option) => x`<li
+            class=${options()}
+            style=${o({
+        padding: "4px 8px",
+        cursor: "pointer"
+      })}
             onClick="navigator.clipboard.writeText('${option[1].value}')"
           >
             ${option[1].text}
-          </div>`
+          </li>`
     )}
-    `;
+    </ul>`;
   }
   render() {
+    const { tooltip, trigger } = this.tooltipStyles();
     return x`
-      <div id="tooltip" role="tooltip" class="bg-neutral-20 p-4 hidden">
+      <div id="tooltip" role="tooltip" class=${tooltip()}>
         ${this.options ? this.optionsTemplate() : this.text}
       </div>
       ${this.isClipboardCopy ? x`<lukso-tooltip
@@ -3565,18 +3585,10 @@ let LuksoTooltip = class extends TailwindStyledElement(style) {
             ?show=${this.showCopy ? true : void 0}
             text=${this.copyText}
           >
-            <div
-              id="trigger"
-              class="cursor-pointer flex flex-col items-center"
-              @click=${this.handleClick}
-            >
+            <div id="trigger" class=${trigger()} @click=${this.handleClick}>
               <slot></slot>
             </div>
-          </lukso-tooltip>` : x`<div
-            id="trigger"
-            class="cursor-pointer flex flex-col items-center"
-            @click=${this.handleClick}
-          >
+          </lukso-tooltip>` : x`<div id="trigger" class=${trigger()} @click=${this.handleClick}>
             <slot></slot>
           </div>`}
     `;

package/dist/components/lukso-tooltip/lukso-tooltip.stories.d.ts

@@ -24,6 +24,6 @@ export declare const PlacementBottom: any;
 export declare const Offset: any;
 /** Tooltip can work as clipboard copy component. For that wou need to enable `is-clipboard-copy` and set `copy-text` attribute..  */
 export declare const ClipboardCopy: any;
-/** Tooltip with options (copied to clipboard).  */
+/** Tooltip with `options` (copied to clipboard).  */
 export declare const OptionsTooltip: any;
 //# sourceMappingURL=lukso-tooltip.stories.d.ts.map

package/dist/components/lukso-tooltip/lukso-tooltip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/lukso-tooltip.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IAmLX,CAAA;AAED,eAAe,IAAI,CAAA;AAuCnB,8CAA8C;AAC9C,eAAO,MAAM,cAAc,KAA2B,CAAA;AAMtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,sEAAsE;AACtE,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAUhD,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAA2B,CAAA;AASjD,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAA2B,CAAA;AASpD,qCAAqC;AACrC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAStD,oCAAoC;AACpC,eAAO,MAAM,aAAa,KAA2B,CAAA;AASrD,oEAAoE;AACpE,eAAO,MAAM,cAAc,KAA2B,CAAA;AAOtD,eAAO,MAAM,aAAa,KAA2B,CAAA;AAQrD,eAAO,MAAM,eAAe,KAA2B,CAAA;AASvD,8DAA8D;AAC9D,eAAO,MAAM,MAAM,KAA2B,CAAA;AAS9C,qIAAqI;AACrI,eAAO,MAAM,aAAa,KAA2B,CAAA;AAUrD,mDAAmD;AACnD,eAAO,MAAM,cAAc,KAA2B,CAAA"}
+{"version":3,"file":"lukso-tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tooltip/lukso-tooltip.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IAmLX,CAAA;AAED,eAAe,IAAI,CAAA;AAuCnB,8CAA8C;AAC9C,eAAO,MAAM,cAAc,KAA2B,CAAA;AAMtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,sEAAsE;AACtE,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAUhD,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAA2B,CAAA;AASjD,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAA2B,CAAA;AASpD,qCAAqC;AACrC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAStD,oCAAoC;AACpC,eAAO,MAAM,aAAa,KAA2B,CAAA;AASrD,oEAAoE;AACpE,eAAO,MAAM,cAAc,KAA2B,CAAA;AAOtD,eAAO,MAAM,aAAa,KAA2B,CAAA;AAQrD,eAAO,MAAM,eAAe,KAA2B,CAAA;AASvD,8DAA8D;AAC9D,eAAO,MAAM,MAAM,KAA2B,CAAA;AAS9C,qIAAqI;AACrI,eAAO,MAAM,aAAa,KAA2B,CAAA;AAUrD,qDAAqD;AACrD,eAAO,MAAM,cAAc,KAA2B,CAAA"}