@lukso/web-components 1.125.0 → 1.126.0

package/dist/components/index.cjs

@@ -15,7 +15,7 @@ const components_luksoInput_index = require('./lukso-input/index.cjs');
 const components_luksoModal_index = require('./lukso-modal/index.cjs');
 const components_luksoNavbar_index = require('./lukso-navbar/index.cjs');
 const components_luksoPagination_index = require('./lukso-pagination/index.cjs');
-const components_luksoProfile_index = require('../index-188719ef.cjs');
+const components_luksoProfile_index = require('../index-e5b0ba18.cjs');
 const components_luksoProgress_index = require('./lukso-progress/index.cjs');
 const components_luksoSanitize_index = require('./lukso-sanitize/index.cjs');
 const components_luksoSearch_index = require('./lukso-search/index.cjs');
@@ -29,15 +29,15 @@ const components_luksoTextarea_index = require('./lukso-textarea/index.cjs');
 const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-51f597c4.cjs');
+const shared_tailwindElement_index = require('../index-b44989bb.cjs');
 require('../cn-b6daa995.cjs');
-require('../property-a2c3c430.cjs');
-require('../state-0d05f6ea.cjs');
+require('../property-65ed3fa1.cjs');
+require('../state-ec4491d8.cjs');
 require('../index-2b104ecb.cjs');
 require('../tailwind-config.cjs');
-require('../style-map-d3b1c1d5.cjs');
+require('../style-map-227a49cb.cjs');
 require('../directive-8278ab14.cjs');
-require('../index-65515396.cjs');
+require('../index-2ffc105b.cjs');
 require('../index-e9668573.cjs');
 require('../uniq-id-f0b18085.cjs');
 

package/dist/components/index.js

@@ -11,7 +11,7 @@ export { LuksoInput } from './lukso-input/index.js';
 export { LuksoModal } from './lukso-modal/index.js';
 export { LuksoNavbar } from './lukso-navbar/index.js';
 export { LuksoPagination } from './lukso-pagination/index.js';
-export { L as LuksoProfile } from '../index-d8500104.js';
+export { L as LuksoProfile } from '../index-da14e190.js';
 export { LuksoProgress } from './lukso-progress/index.js';
 export { LuksoSanitize } from './lukso-sanitize/index.js';
 export { LuksoSearch } from './lukso-search/index.js';
@@ -25,14 +25,14 @@ export { LuksoTextarea } from './lukso-textarea/index.js';
 export { LuksoTooltip } from './lukso-tooltip/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-5d8104dc.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-869a59a0.js';
 import '../cn-90c03edf.js';
-import '../property-2a7bbcd8.js';
-import '../state-a01f91dc.js';
+import '../property-ff5733e6.js';
+import '../state-9bdaddc0.js';
 import '../index-d14b6a34.js';
 import '../tailwind-config.js';
-import '../style-map-bece8358.js';
+import '../style-map-8a1e2472.js';
 import '../directive-2bb7789e.js';
-import '../index-e496b515.js';
+import '../index-b74237f9.js';
 import '../index-5e194caf.js';
 import '../uniq-id-ce2d165c.js';

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
@@ -27,7 +27,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
   constructor() {
     super(...arguments);
     this.variant = "primary";
-    this.size = "medium";
+    this.size = "large";
     this.disabled = false;
     this.isFullWidth = false;
     this.isLongPress = false;
@@ -87,8 +87,9 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
           hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
         },
         size: {
-          medium: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12",
-          small: "h-7 px-3 paragraph-inter-12-medium rounded-8"
+          small: "h-7 px-3 paragraph-inter-12-medium rounded-8",
+          medium: "h-10 px-4 paragraph-inter-14-semi-bold rounded-10",
+          large: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12"
         },
         isLongPress: {
           true: `relative overflow-hidden z-[1] active:outline-0
@@ -118,17 +119,17 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
           class: "text-purple-41"
         },
         {
-          size: ["medium", "small"],
+          size: ["medium", "small", "large"],
           color: "link",
           class: "p-0 h-[initial]"
         },
         {
-          size: ["medium"],
+          size: ["medium", "large"],
           color: ["primary", "landing", "success", "danger", "warning"],
           class: "hover:shadow-button-medium-hover-primary active:shadow-button-medium-press-primary"
         },
         {
-          size: ["medium"],
+          size: ["medium", "large"],
           color: ["secondary"],
           class: "hover:shadow-button-medium-hover-secondary active:shadow-button-medium-press-secondary"
         },
@@ -142,15 +143,20 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
           color: ["secondary"],
           class: "hover:shadow-button-small-hover-secondary active:shadow-button-small-press-secondary"
         },
+        {
+          isIcon: true,
+          size: ["small"],
+          class: "px-0 w-7"
+        },
         {
           isIcon: true,
           size: ["medium"],
-          class: "px-0 w-12"
+          class: "px-0 w-10"
         },
         {
           isIcon: true,
-          size: ["small"],
-          class: "px-0 w-7"
+          size: ["large"],
+          class: "px-0 w-12"
         }
       ]
     });
@@ -165,6 +171,9 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
             text: "ml-1"
           },
           medium: {
+            text: "ml-[6px]"
+          },
+          large: {
             text: "ml-2"
           }
         }

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

@@ -5,7 +5,7 @@ export type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
 declare const LuksoButton_base: typeof import("lit").LitElement;
 export declare class LuksoButton extends LuksoButton_base {
     variant: ButtonVariant;
-    size: InputSize;
+    size: InputSize | 'large';
     disabled: boolean;
     isFullWidth: boolean;
     isLongPress: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,CAAA;AACb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,SAAS,CAAW;IAG1B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,SAAS,UAAQ;IAGjB,IAAI,EAAE,UAAU,CAAW;IAG3B,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,QAAQ,UAAQ;IAGhB,KAAK,SAAK;IAGV,MAAM,UAAQ;IAGd,KAAK,SAAK;IAGV,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,YAAY,CAwGlB;IAEF,OAAO,CAAC,aAAa,CAenB;IAEF,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAcrB,eAAe;IAkBf,eAAe;IAQf,cAAc;IA+Bd,YAAY;IAwBZ,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,CAAA;AACb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,SAAS,GAAG,OAAO,CAAU;IAGnC,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,SAAS,UAAQ;IAGjB,IAAI,EAAE,UAAU,CAAW;IAG3B,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,QAAQ,UAAQ;IAGhB,KAAK,SAAK;IAGV,MAAM,UAAQ;IAGd,KAAK,SAAK;IAGV,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,YAAY,CA8GlB;IAEF,OAAO,CAAC,aAAa,CAkBnB;IAEF,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAcrB,eAAe;IAkBf,eAAe;IAQf,cAAc;IA+Bd,YAAY;IAwBZ,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x, E } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
+import { T as TailwindStyledElement, x, E } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
@@ -23,7 +23,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.variant = "primary";
-    this.size = "medium";
+    this.size = "large";
     this.disabled = false;
     this.isFullWidth = false;
     this.isLongPress = false;
@@ -83,8 +83,9 @@ let LuksoButton = class extends TailwindStyledElement(style) {
           hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
         },
         size: {
-          medium: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12",
-          small: "h-7 px-3 paragraph-inter-12-medium rounded-8"
+          small: "h-7 px-3 paragraph-inter-12-medium rounded-8",
+          medium: "h-10 px-4 paragraph-inter-14-semi-bold rounded-10",
+          large: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12"
         },
         isLongPress: {
           true: `relative overflow-hidden z-[1] active:outline-0
@@ -114,17 +115,17 @@ let LuksoButton = class extends TailwindStyledElement(style) {
           class: "text-purple-41"
         },
         {
-          size: ["medium", "small"],
+          size: ["medium", "small", "large"],
           color: "link",
           class: "p-0 h-[initial]"
         },
         {
-          size: ["medium"],
+          size: ["medium", "large"],
           color: ["primary", "landing", "success", "danger", "warning"],
           class: "hover:shadow-button-medium-hover-primary active:shadow-button-medium-press-primary"
         },
         {
-          size: ["medium"],
+          size: ["medium", "large"],
           color: ["secondary"],
           class: "hover:shadow-button-medium-hover-secondary active:shadow-button-medium-press-secondary"
         },
@@ -138,15 +139,20 @@ let LuksoButton = class extends TailwindStyledElement(style) {
           color: ["secondary"],
           class: "hover:shadow-button-small-hover-secondary active:shadow-button-small-press-secondary"
         },
+        {
+          isIcon: true,
+          size: ["small"],
+          class: "px-0 w-7"
+        },
         {
           isIcon: true,
           size: ["medium"],
-          class: "px-0 w-12"
+          class: "px-0 w-10"
         },
         {
           isIcon: true,
-          size: ["small"],
-          class: "px-0 w-7"
+          size: ["large"],
+          class: "px-0 w-12"
         }
       ]
     });
@@ -161,6 +167,9 @@ let LuksoButton = class extends TailwindStyledElement(style) {
             text: "ml-1"
           },
           medium: {
+            text: "ml-[6px]"
+          },
+          large: {
             text: "ml-2"
           }
         }

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

@@ -24,6 +24,10 @@ export declare const NavText: any;
 export declare const LinkVariant: any;
 /** Example of `small` size button.  */
 export declare const SmallSize: any;
+/** Example of `medium` size button.  */
+export declare const MediumSize: any;
+/** Example of `large` size button.  */
+export declare const LargeSize: any;
 /** If you need button to take full width of the parent element add `is-full-width` property. */
 export declare const FullWidth: any;
 /** In order to have disabled button add `disabled` property. */

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/lukso-button.stories.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IA2NX,CAAA;AAED,eAAe,IAAI,CAAA;AA6CnB,oDAAoD;AACpD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAexC,sCAAsC;AACtC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAWxC,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,oCAAoC;AACpC,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,kCAAkC;AAClC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAWrC,wCAAwC;AACxC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,sCAAsC;AACtC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,kCAAkC;AAClC,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,uCAAuC;AACvC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,gGAAgG;AAChG,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,gEAAgE;AAChE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,6GAA6G;AAC7G,eAAO,MAAM,UAAU,KAAoB,CAAA;AAe3C;;GAEG;AACH,eAAO,MAAM,eAAe,KAAoB,CAAA;AAahD;4FAC4F;AAC5F,eAAO,MAAM,IAAI,KAAoB,CAAA;AAerC;GACG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAA;AAc9C,uEAAuE;AACvE,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAalD,iDAAiD;AACjD,eAAO,MAAM,aAAa,KAAoB,CAAA"}
+{"version":3,"file":"lukso-button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/lukso-button.stories.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IA2NX,CAAA;AAED,eAAe,IAAI,CAAA;AA6CnB,oDAAoD;AACpD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAexC,sCAAsC;AACtC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAWxC,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,oCAAoC;AACpC,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,kCAAkC;AAClC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAWrC,wCAAwC;AACxC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,sCAAsC;AACtC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,kCAAkC;AAClC,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,uCAAuC;AACvC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,wCAAwC;AACxC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,uCAAuC;AACvC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,gGAAgG;AAChG,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,gEAAgE;AAChE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,6GAA6G;AAC7G,eAAO,MAAM,UAAU,KAAoB,CAAA;AAe3C;;GAEG;AACH,eAAO,MAAM,eAAe,KAAoB,CAAA;AAahD;4FAC4F;AAC5F,eAAO,MAAM,IAAI,KAAoB,CAAA;AAerC;GACG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAA;AAc9C,uEAAuE;AACvE,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAalD,iDAAiD;AACjD,eAAO,MAAM,aAAa,KAAoB,CAAA"}

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../index-188719ef.cjs');
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
-const styleMap = require('../../style-map-d3b1c1d5.cjs');
+const components_luksoProfile_index = require('../../index-e5b0ba18.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
+const styleMap = require('../../style-map-227a49cb.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
-const index$1 = require('../../index-65515396.cjs');
+const index$1 = require('../../index-2ffc105b.cjs');
 require('../lukso-image/index.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,12 +1,12 @@
-import { m as makeBlockie } from '../../index-d8500104.js';
-import { T as TailwindStyledElement, x, E } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
-import { o as o$1 } from '../../style-map-bece8358.js';
+import { m as makeBlockie } from '../../index-da14e190.js';
+import { T as TailwindStyledElement, x, E } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
+import { o as o$1 } from '../../style-map-8a1e2472.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
-import { c as customStyleMap } from '../../index-e496b515.js';
+import { c as customStyleMap } from '../../index-b74237f9.js';
 import '../lukso-image/index.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x, E } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
+import { a as TailwindElement, x, E } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

package/dist/components/lukso-color-picker/index.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
-const state = require('../../state-0d05f6ea.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
+const state = require('../../state-ec4491d8.cjs');
 const index = require('../../index-2b104ecb.cjs');
-const styleMap = require('../../style-map-d3b1c1d5.cjs');
+const styleMap = require('../../style-map-227a49cb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
 require('../lukso-icon/index.cjs');

package/dist/components/lukso-color-picker/index.js

@@ -1,8 +1,8 @@
-import { T as TailwindStyledElement, x, E } from '../../index-5d8104dc.js';
-import { n, t } from '../../property-2a7bbcd8.js';
-import { r } from '../../state-a01f91dc.js';
+import { T as TailwindStyledElement, x, E } from '../../index-869a59a0.js';
+import { n, t } from '../../property-ff5733e6.js';
+import { r } from '../../state-9bdaddc0.js';
 import { c as ce } from '../../index-d14b6a34.js';
-import { o } from '../../style-map-bece8358.js';
+import { o } from '../../style-map-8a1e2472.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
 import '../lukso-icon/index.js';

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

@@ -2,23 +2,21 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-51f597c4.cjs');
-const property = require('../../property-a2c3c430.cjs');
+const shared_tailwindElement_index = require('../../index-b44989bb.cjs');
+const property = require('../../property-65ed3fa1.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-188719ef.cjs');
+require('../../index-e5b0ba18.cjs');
 require('../lukso-username/index.cjs');
 const uniqId = require('../../uniq-id-f0b18085.cjs');
-require('../../style-map-d3b1c1d5.cjs');
+require('../../style-map-227a49cb.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../state-0d05f6ea.cjs');
-require('../../index-65515396.cjs');
+require('../../state-ec4491d8.cjs');
+require('../../index-2ffc105b.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-b6daa995.cjs');
 
-const style = ":host {\n    display: flex;\n    width: 100%\n}";
-
 const debounceFunction = (func, timeout = 100) => {
   let timer;
   return (...args) => {
@@ -29,6 +27,8 @@ const debounceFunction = (func, timeout = 100) => {
   };
 };
 
+const style = ":host {\n    display: flex;\n    width: 100%\n}";
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -51,37 +51,75 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
     this.isRight = false;
     this.isFullWidth = false;
     this.size = "medium";
+    this.trigger = "click";
     this.styles = index.ce({
-      base: `bg-neutral-100 border w-full border-neutral-90 shadow-1xl z-50
-      flex absolute flex-col gap-1 overflow-y-auto max-h-64 w-[max-content]`,
+      slots: {
+        wrapper: "absolute z-50",
+        dropdown: `bg-neutral-100 border border-neutral-90 shadow-1xl
+        flex flex-col gap-1 overflow-y-auto w-[max-content] animate-fade-in animation-duration-200`
+      },
       variants: {
         openTop: {
-          true: "bottom-[48px] mb-2 mt-0"
+          true: {
+            wrapper: "mt-0"
+          }
         },
         size: {
-          small: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular",
-          medium: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular"
+          small: {
+            dropdown: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular max-h-52"
+          },
+          medium: {
+            dropdown: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular max-h-64"
+          },
+          large: "rounded-12 p-3 mt-2 min-w-[200px] paragraph-inter-16-semi-bold max-h-64"
         },
         isRight: {
-          true: "right-0"
+          true: {
+            wrapper: "right-0"
+          }
         },
         isFullWidth: {
-          true: "w-full"
+          true: { wrapper: "w-full", dropdown: "w-full" }
         }
       },
       compoundVariants: [
         {
           isFullWidth: false,
           size: "small",
-          class: "max-w-[200px]"
+          class: { dropdown: "max-w-[200px]" }
         },
         {
           isFullWidth: false,
           size: "medium",
-          class: "max-w-[300px]"
+          class: { dropdown: "max-w-[300px]" }
+        },
+        {
+          isFullWidth: false,
+          size: "large",
+          class: { dropdown: "max-w-[400px]" }
+        },
+        {
+          openTop: true,
+          size: "small",
+          class: { wrapper: "bottom-7 mb-1" }
+        },
+        {
+          openTop: true,
+          size: ["medium", "large"],
+          class: { wrapper: "bottom-12 mb-2" }
         }
       ]
     });
+    this.handleMouseEnter = () => {
+      this.isOpen = true;
+    };
+    this.handleMouseLeave = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget?.id === this.id || relatedTarget?.id === this.triggerId) {
+        return;
+      }
+      this.isOpen = false;
+    };
     this.handleClick = debounceFunction((event) => {
       const element = event.target;
       if (element.id === this.triggerId || this.id === element.id) {
@@ -96,13 +134,40 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
       this.id = uniqId.uniqId();
     }
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("isOpen") && this.trigger === "hover") {
+      const dropdownElement = this.shadowRoot?.getElementById(this.id);
+      if (this.isOpen && dropdownElement) {
+        dropdownElement.addEventListener("mouseenter", this.handleMouseEnter);
+        dropdownElement.addEventListener("mouseleave", this.handleMouseLeave);
+      } else if (dropdownElement) {
+        dropdownElement.removeEventListener("mouseenter", this.handleMouseEnter);
+        dropdownElement.removeEventListener("mouseleave", this.handleMouseLeave);
+      }
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("click", this.handleClick.bind(this));
+    if (this.trigger === "hover") {
+      const triggerElement = document.getElementById(this.triggerId);
+      if (triggerElement) {
+        triggerElement.addEventListener("mouseenter", this.handleMouseEnter);
+        triggerElement.addEventListener("mouseleave", this.handleMouseLeave);
+      }
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener("click", this.handleClick);
+    if (this.trigger === "hover") {
+      const triggerElement = document.getElementById(this.triggerId);
+      if (triggerElement) {
+        triggerElement.removeEventListener("mouseenter", this.handleMouseEnter);
+        triggerElement.removeEventListener("mouseleave", this.handleMouseLeave);
+      }
+    }
   }
   async willUpdate(changedProperties) {
     if (changedProperties.has("isOpen")) {
@@ -121,7 +186,7 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
     }
   }
   render() {
-    const styles = this.styles({
+    const { wrapper, dropdown } = this.styles({
       openTop: this.openTop,
       size: this.size,
       isRight: this.isRight,
@@ -130,8 +195,10 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
     if (!this.isOpen) {
       return shared_tailwindElement_index.E;
     }
-    return shared_tailwindElement_index.x`<div class="${styles} animate-fade-in animation-duration-200">
-      <slot></slot>
+    return shared_tailwindElement_index.x`<div id=${this.id} class=${wrapper()}>
+      <div class=${dropdown()}>
+        <slot></slot>
+      </div>
     </div>`;
   }
 };
@@ -159,6 +226,9 @@ __decorateClass([
 __decorateClass([
   property.n({ type: String })
 ], exports.LuksoDropdown.prototype, "size", 2);
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoDropdown.prototype, "trigger", 2);
 exports.LuksoDropdown = __decorateClass([
   property.t("lukso-dropdown")
 ], exports.LuksoDropdown);

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

@@ -3,6 +3,7 @@ import type { InputSize } from '../../shared/types';
 export type LuksoDropdownOnChangeEventDetail = {
     isOpen: boolean;
 };
+export type LuksoDropdownTrigger = 'click' | 'hover';
 declare const LuksoDropdown_base: typeof import("lit").LitElement;
 export declare class LuksoDropdown extends LuksoDropdown_base {
     id: string;
@@ -12,9 +13,13 @@ export declare class LuksoDropdown extends LuksoDropdown_base {
     openTop: boolean;
     isRight: boolean;
     isFullWidth: boolean;
-    size: InputSize;
+    size: InputSize | 'large';
+    trigger: LuksoDropdownTrigger;
     constructor();
     private styles;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    updated(changedProperties: PropertyValues<this>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues<this>): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKxD,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAKpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,gCAAgC,GAAG;IAC7C,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;;AAED,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,EAAE,SAAK;IAGP,SAAS,SAAK;IAGd,MAAM,UAAQ;IAGd,oBAAoB,UAAQ;IAG5B,OAAO,UAAQ;IAGf,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAW;;IAU1B,OAAO,CAAC,MAAM,CA8BZ;IAEF,iBAAiB;IAKjB,oBAAoB;IAKd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAiBxD,OAAO,CAAC,WAAW,CAajB;IAEF,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAIxD,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AAMpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,gCAAgC,GAAG;IAC7C,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,CAAA;;AAEpD,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,EAAE,SAAK;IAGP,SAAS,SAAK;IAGd,MAAM,UAAQ;IAGd,oBAAoB,UAAQ;IAG5B,OAAO,UAAQ;IAGf,OAAO,UAAQ;IAGf,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAW;IAGpC,OAAO,EAAE,oBAAoB,CAAU;;IAUvC,OAAO,CAAC,MAAM,CA4DZ;IAEF,OAAO,CAAC,gBAAgB,CAEvB;IAED,OAAO,CAAC,gBAAgB,CASvB;IAED,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAiB/C,iBAAiB;IAejB,oBAAoB;IAcd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAiBxD,OAAO,CAAC,WAAW,CAajB;IAEF,MAAM;CAkBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}