@lukso/web-components 1.66.1 → 1.68.0

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-688c3040.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-c86dd6e2.cjs');
+require('../../style-map-7d4ddea1.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-98e8e0d5.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-3527fb14.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-9fdda015.js';
+import '../../style-map-21f59b89.js';
 import '../../directive-2bb7789e.js';
-import '../../index-1765cfe1.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-688c3040.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c86dd6e2.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-3527fb14.js';
+import { a as TailwindElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-9fdda015.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-688c3040.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c86dd6e2.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-3527fb14.js';
+import { a as TailwindElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-9fdda015.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-688c3040.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-3527fb14.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-688c3040.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-c86dd6e2.cjs');
-require('../../index-98e8e0d5.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-3527fb14.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-9fdda015.js';
-import '../../index-1765cfe1.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-688c3040.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-c86dd6e2.cjs');
+require('../../style-map-7d4ddea1.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../index-e9668573.cjs');
-require('../../index-98e8e0d5.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-3527fb14.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-9fdda015.js';
+import '../../style-map-21f59b89.js';
 import '../../directive-2bb7789e.js';
 import '../../index-5e194caf.js';
-import '../../index-1765cfe1.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-688c3040.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-3527fb14.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-688c3040.cjs');
+const shared_tailwindElement_index = require('../../index-5cc4a839.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c86dd6e2.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-3527fb14.js';
+import { a as TailwindElement, x } from '../../index-814bcac2.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-9fdda015.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-688c3040.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-98e8e0d5.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-3527fb14.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-1765cfe1.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-688c3040.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-c86dd6e2.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-3527fb14.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-9fdda015.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-688c3040.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-3527fb14.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,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-688c3040.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');
+const index = require('../../index-66211c85.cjs');
+const styleMap = require('../../style-map-7d4ddea1.cjs');
 require('../../directive-8278ab14.cjs');
 
 var top = 'top';
@@ -3473,9 +3474,17 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
     this.copyText = "";
     this.copyValue = "";
     this.offset = 10;
+    this.options = "";
     this.showCopy = false;
-    this.defaultTooltipStyles = "bg-neutral-20 p-4 hidden";
+    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") {
@@ -3495,7 +3504,7 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
       this.tooltipInstance.destroy();
       this.tooltipInstance = void 0;
     }
-    if (!this.text) {
+    if (!this.text && !this.options) {
       return;
     }
     this.tooltipInstance = tippy(trigger, {
@@ -3527,25 +3536,44 @@ exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.T
     await this.updateComplete;
     if (changedProperties.has("show") && this.trigger === "manual") {
       if (this.show) {
-        !!!this.tooltipInstance && this.initTooltip();
+        !this.tooltipInstance && this.initTooltip();
         this.tooltipInstance.show();
       } else {
         this.tooltipInstance?.hide();
       }
       return;
     }
+    if (changedProperties.has("options") && !!this.options) {
+      try {
+        this.optionsParsed = JSON.parse(this.options);
+      } catch (error) {
+        console.warn("Could not parse options", error);
+      }
+    }
     this.initTooltip();
   }
+  optionsTemplate() {
+    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}
+          </li>`
+    )}
+    </ul>`;
+  }
   render() {
+    const { tooltip, trigger } = this.tooltipStyles();
     return shared_tailwindElement_index.x`
-      <div
-        id="tooltip"
-        role="tooltip"
-        class=${index.customClassMap({
-      [this.defaultTooltipStyles]: true
-    })}
-      >
-        ${this.text}
+      <div id="tooltip" role="tooltip" class=${tooltip()}>
+        ${this.options ? this.optionsTemplate() : this.text}
       </div>
       ${this.isClipboardCopy ? shared_tailwindElement_index.x`<lukso-tooltip
             variant=${this.variant}
@@ -3557,18 +3585,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>`}
     `;
@@ -3610,9 +3630,15 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: Number })
 ], exports.LuksoTooltip.prototype, "offset", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String })
+], exports.LuksoTooltip.prototype, "options", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoTooltip.prototype, "showCopy", 2);
+__decorateClass([
+  state.t()
+], exports.LuksoTooltip.prototype, "optionsParsed", 2);
 exports.LuksoTooltip = __decorateClass([
   queryAssignedElements.e("lukso-tooltip")
 ], exports.LuksoTooltip);

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

@@ -1,8 +1,13 @@
-import { PropertyValues } from 'lit';
+import { type PropertyValues } from 'lit';
 export type TooltipVariant = 'dark' | 'light' | 'success' | 'danger' | 'white';
 export type TooltipSize = 'medium' | 'large';
 export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'auto' | 'auto-start' | 'auto-end';
 export type TooltipTrigger = 'mouseenter' | 'click' | 'manual';
+export type TooltipOption = {
+    id?: string;
+    value: string;
+    text: string;
+};
 declare const LuksoTooltip_base: typeof import("lit").LitElement;
 export declare class LuksoTooltip extends LuksoTooltip_base {
     variant: TooltipVariant;
@@ -17,13 +22,16 @@ export declare class LuksoTooltip extends LuksoTooltip_base {
     copyText: string;
     copyValue: string;
     offset: number;
+    options: string;
     showCopy: boolean;
-    private defaultTooltipStyles;
+    optionsParsed: TooltipOption[];
     private tooltipInstance;
+    private tooltipStyles;
     private hideOnClickCheck;
     private initTooltip;
     private handleClick;
     willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
+    private optionsTemplate;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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,cAAc,EAAQ,MAAM,KAAK,CAAA;AAQ1C,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,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,EAAE,MAAM,CAAK;IAGjB,QAAQ,EAAE,MAAM,CAAM;IAGtB,IAAI,EAAE,OAAO,CAAQ;IAGrB,WAAW,EAAE,MAAM,CAAS;IAG5B,eAAe,EAAE,OAAO,CAAQ;IAGhC,QAAQ,EAAE,MAAM,CAAK;IAGrB,SAAS,EAAE,MAAM,CAAK;IAGtB,MAAM,EAAE,MAAM,CAAK;IAGnB,QAAQ,EAAE,OAAO,CAAQ;IAEzB,OAAO,CAAC,oBAAoB,CAA6B;IAEzD,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;IAiBxD,MAAM;CAuCP;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,OAAO,CAAC,eAAe;IAqBvB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}