@lukso/web-components 1.92.0 → 1.94.0

package/dist/components/index.cjs

@@ -6,7 +6,7 @@ const components_luksoButton_index = require('./lukso-button/index.cjs');
 const components_luksoCard_index = require('./lukso-card/index.cjs');
 const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
 const components_luksoColorPicker_index = require('./lukso-color-picker/index.cjs');
-const components_luksoDropdown_index = require('../index-3e12bd24.cjs');
+const components_luksoDropdown_index = require('../index-fb4ea5c3.cjs');
 const components_luksoDropdownOption_index = require('./lukso-dropdown-option/index.cjs');
 const components_luksoFooter_index = require('./lukso-footer/index.cjs');
 const components_luksoIcon_index = require('./lukso-icon/index.cjs');

package/dist/components/index.js

@@ -2,7 +2,7 @@ export { LuksoButton } from './lukso-button/index.js';
 export { LuksoCard } from './lukso-card/index.js';
 export { LuksoCheckbox } from './lukso-checkbox/index.js';
 export { LuksoColorPicker } from './lukso-color-picker/index.js';
-export { L as LuksoDropdown } from '../index-6fb7dc60.js';
+export { L as LuksoDropdown } from '../index-68890bd1.js';
 export { LuksoDropdownOption } from './lukso-dropdown-option/index.js';
 export { LuksoFooter } from './lukso-footer/index.js';
 export { LuksoIcon } from './lukso-icon/index.js';

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

@@ -26,6 +26,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const FOCUS_DELAY_MS = 10;
 exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -135,6 +136,17 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
       ]
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autofocus) {
+      setTimeout(() => {
+        const input = this.shadowRoot?.querySelector(
+          "input[autofocus]"
+        );
+        input?.focus();
+      }, FOCUS_DELAY_MS);
+    }
+  }
   inputTemplate(styles) {
     return shared_tailwindElement_index.x`
       <input

package/dist/components/lukso-color-picker/index.d.ts

@@ -18,6 +18,7 @@ export declare class LuksoColorPicker extends LuksoColorPicker_base {
     private hasFocus;
     private hasHighlight;
     private styles;
+    connectedCallback(): void;
     inputTemplate(styles: string): import("lit-html").TemplateResult<1>;
     colorPickerTemplate(styles: string, colorInputStyles: string): import("lit-html").TemplateResult<1>;
     labelTemplate(): import("lit-html").TemplateResult<1>;

package/dist/components/lukso-color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/index.ts"],"names":[],"mappings":"AAOA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,gBAAiB,SAAQ,qBAA4B;IAEhE,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAY;IAGvB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,MAAM,CAwFZ;IAEF,aAAa,CAAC,MAAM,EAAE,MAAM;IAwB5B,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM;IAiB5D,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;IAe3B,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAA;KACvC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/index.ts"],"names":[],"mappings":"AAOA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,gBAAiB,SAAQ,qBAA4B;IAEhE,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAY;IAGvB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,MAAM,CAwFZ;IAEF,iBAAiB;IAajB,aAAa,CAAC,MAAM,EAAE,MAAM;IAwB5B,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM;IAiB5D,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;IAe3B,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAA;KACvC;CACF"}

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

@@ -22,6 +22,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const FOCUS_DELAY_MS = 10;
 let LuksoColorPicker = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -131,6 +132,17 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
       ]
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autofocus) {
+      setTimeout(() => {
+        const input = this.shadowRoot?.querySelector(
+          "input[autofocus]"
+        );
+        input?.focus();
+      }, FOCUS_DELAY_MS);
+    }
+  }
   inputTemplate(styles) {
     return x`
       <input

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

@@ -8,7 +8,7 @@ require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-const components_luksoDropdown_index = require('../../index-3e12bd24.cjs');
+const components_luksoDropdown_index = require('../../index-fb4ea5c3.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../style-map-77b74f74.cjs');
 require('../../directive-8278ab14.cjs');

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;AAIpC,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;IAenB,MAAM;CAcP;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;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"}

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

@@ -4,7 +4,7 @@ import '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-export { L as LuksoDropdown } from '../../index-6fb7dc60.js';
+export { L as LuksoDropdown } from '../../index-68890bd1.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../style-map-d5d85b80.js';
 import '../../directive-2bb7789e.js';

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

@@ -26,6 +26,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const FOCUS_DELAY_MS = 10;
 exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -161,6 +162,15 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       ]
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autofocus) {
+      setTimeout(() => {
+        const input = this.shadowRoot?.querySelector("input");
+        input?.focus();
+      }, FOCUS_DELAY_MS);
+    }
+  }
   // @input works better in vue
   inputTemplate(styles) {
     return shared_tailwindElement_index.x`

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

@@ -28,6 +28,7 @@ export declare class LuksoInput extends LuksoInput_base {
     private hasFocus;
     private hasHighlight;
     private inputStyles;
+    connectedCallback(): void;
     inputTemplate(styles: string): import("lit-html").TemplateResult<1>;
     labelTemplate(): import("lit-html").TemplateResult<1>;
     descriptionTemplate(): import("lit-html").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAW;IAG1B,SAAS,SAAK;IAGd,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAwGjB;IAGF,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAShC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAW;IAG1B,SAAS,SAAK;IAGd,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAwGjB;IAEF,iBAAiB;IAYjB,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAShC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -22,6 +22,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const FOCUS_DELAY_MS = 10;
 let LuksoInput = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -157,6 +158,15 @@ let LuksoInput = class extends TailwindStyledElement(style) {
       ]
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autofocus) {
+      setTimeout(() => {
+        const input = this.shadowRoot?.querySelector("input");
+        input?.focus();
+      }, FOCUS_DELAY_MS);
+    }
+  }
   // @input works better in vue
   inputTemplate(styles) {
     return x`

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

@@ -10,7 +10,7 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../lukso-input/index.cjs');
-require('../../index-3e12bd24.cjs');
+require('../../index-fb4ea5c3.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../style-map-77b74f74.cjs');

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

@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../lukso-input/index.js';
-import '../../index-6fb7dc60.js';
+import '../../index-68890bd1.js';
 import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../style-map-d5d85b80.js';

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

@@ -9,7 +9,7 @@ const index = require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-const components_luksoDropdown_index = require('../../index-3e12bd24.cjs');
+const components_luksoDropdown_index = require('../../index-fb4ea5c3.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
 require('../../style-map-77b74f74.cjs');

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

@@ -5,7 +5,7 @@ import { c as ce } from '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-import { u as uniqId } from '../../index-6fb7dc60.js';
+import { u as uniqId } from '../../index-68890bd1.js';
 import '../lukso-dropdown-option/index.js';
 import '../../bundle-mjs-fbc6e2a8.js';
 import '../../style-map-d5d85b80.js';

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

@@ -26,6 +26,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const FOCUS_DELAY_MS = 10;
 exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -116,6 +117,15 @@ exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index
       ]
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autofocus) {
+      setTimeout(() => {
+        const textarea = this.shadowRoot?.querySelector("textarea");
+        textarea?.focus();
+      }, FOCUS_DELAY_MS);
+    }
+  }
   inputTemplate(styles) {
     return shared_tailwindElement_index.x`
       <textarea

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

@@ -22,6 +22,7 @@ export declare class LuksoTextarea extends LuksoTextarea_base {
     private hasFocus;
     private hasHighlight;
     private styles;
+    connectedCallback(): void;
     inputTemplate(styles: string): import("lit-html").TemplateResult<1>;
     labelTemplate(): import("lit-html").TemplateResult<1>;
     descriptionTemplate(): import("lit-html").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-textarea/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAE/C,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,cAAc,UAAQ;IAGtB,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,SAAS,CAAW;IAG1B,IAAI,SAAI;IAGR,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,MAAM,CAiEZ;IAEF,aAAa,CAAC,MAAM,EAAE,MAAM;IA6B5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;YAMR,gBAAgB;IAc9B,MAAM;CAyBP;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-textarea/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,aAAc,SAAQ,kBAA4B;IAE7D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,cAAc,UAAQ;IAGtB,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,SAAS,CAAW;IAG1B,IAAI,SAAI;IAGR,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,MAAM,CAiEZ;IAEF,iBAAiB;IAWjB,aAAa,CAAC,MAAM,EAAE,MAAM;IA6B5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;YAMR,gBAAgB;IAc9B,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -22,6 +22,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const FOCUS_DELAY_MS = 10;
 let LuksoTextarea = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
@@ -112,6 +113,15 @@ let LuksoTextarea = class extends TailwindStyledElement(style) {
       ]
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autofocus) {
+      setTimeout(() => {
+        const textarea = this.shadowRoot?.querySelector("textarea");
+        textarea?.focus();
+      }, FOCUS_DELAY_MS);
+    }
+  }
   inputTemplate(styles) {
     return x`
       <textarea

package/dist/{index-6fb7dc60.js → index-68890bd1.js}

@@ -12,6 +12,16 @@ const uniqId = () => {
   return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
 };
 
+const debounceFunction = (func, timeout = 100) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      typeof func === "function" && func.apply(void 0, args);
+    }, timeout);
+  };
+};
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -65,6 +75,16 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
         }
       ]
     });
+    this.handleClick = debounceFunction((event) => {
+      const element = event.target;
+      if (element.id === this.triggerId || this.id === element.id) {
+        this.isOpen = !this.isOpen;
+        return;
+      }
+      if (!this.isOpenOnOutsideClick) {
+        this.isOpen = false;
+      }
+    });
     if (!this.id) {
       this.id = uniqId();
     }
@@ -93,16 +113,6 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
       this.dispatchEvent(changeEvent);
     }
   }
-  handleClick(event) {
-    const element = event.target;
-    if (element.id === this.triggerId || this.id === element.id) {
-      this.isOpen = !this.isOpen;
-      return;
-    }
-    if (!this.isOpenOnOutsideClick) {
-      this.isOpen = false;
-    }
-  }
   render() {
     const styles = this.styles({
       openTop: this.openTop,
@@ -113,7 +123,9 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
     if (!this.isOpen) {
       return A;
     }
-    return x`<div class="${styles}"><slot></slot></div>`;
+    return x`<div class="${styles} animate-fade-in animation-duration-200">
+      <slot></slot>
+    </div>`;
   }
 };
 __decorateClass([

package/dist/{index-3e12bd24.cjs → index-fb4ea5c3.cjs}

@@ -14,6 +14,16 @@ const uniqId = () => {
   return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
 };
 
+const debounceFunction = (func, timeout = 100) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      typeof func === "function" && func.apply(void 0, args);
+    }, timeout);
+  };
+};
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -67,6 +77,16 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
         }
       ]
     });
+    this.handleClick = debounceFunction((event) => {
+      const element = event.target;
+      if (element.id === this.triggerId || this.id === element.id) {
+        this.isOpen = !this.isOpen;
+        return;
+      }
+      if (!this.isOpenOnOutsideClick) {
+        this.isOpen = false;
+      }
+    });
     if (!this.id) {
       this.id = uniqId();
     }
@@ -95,16 +115,6 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
       this.dispatchEvent(changeEvent);
     }
   }
-  handleClick(event) {
-    const element = event.target;
-    if (element.id === this.triggerId || this.id === element.id) {
-      this.isOpen = !this.isOpen;
-      return;
-    }
-    if (!this.isOpenOnOutsideClick) {
-      this.isOpen = false;
-    }
-  }
   render() {
     const styles = this.styles({
       openTop: this.openTop,
@@ -115,7 +125,9 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
     if (!this.isOpen) {
       return shared_tailwindElement_index.A;
     }
-    return shared_tailwindElement_index.x`<div class="${styles}"><slot></slot></div>`;
+    return shared_tailwindElement_index.x`<div class="${styles} animate-fade-in animation-duration-200">
+      <slot></slot>
+    </div>`;
   }
 };
 __decorateClass([

package/dist/index.cjs

@@ -6,7 +6,7 @@ const components_luksoButton_index = require('./components/lukso-button/index.cj
 const components_luksoCard_index = require('./components/lukso-card/index.cjs');
 const components_luksoCheckbox_index = require('./components/lukso-checkbox/index.cjs');
 const components_luksoColorPicker_index = require('./components/lukso-color-picker/index.cjs');
-const components_luksoDropdown_index = require('./index-3e12bd24.cjs');
+const components_luksoDropdown_index = require('./index-fb4ea5c3.cjs');
 const components_luksoDropdownOption_index = require('./components/lukso-dropdown-option/index.cjs');
 const components_luksoFooter_index = require('./components/lukso-footer/index.cjs');
 const components_luksoIcon_index = require('./components/lukso-icon/index.cjs');

package/dist/index.js

@@ -2,7 +2,7 @@ export { LuksoButton } from './components/lukso-button/index.js';
 export { LuksoCard } from './components/lukso-card/index.js';
 export { LuksoCheckbox } from './components/lukso-checkbox/index.js';
 export { LuksoColorPicker } from './components/lukso-color-picker/index.js';
-export { L as LuksoDropdown } from './index-6fb7dc60.js';
+export { L as LuksoDropdown } from './index-68890bd1.js';
 export { LuksoDropdownOption } from './components/lukso-dropdown-option/index.js';
 export { LuksoFooter } from './components/lukso-footer/index.js';
 export { LuksoIcon } from './components/lukso-icon/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.92.0",
+  "version": "1.94.0",
   "type": "module",
   "files": [
     "dist",

package/tailwind.config.cjs

@@ -5,9 +5,9 @@ const { colorPalette, boxShadows, fontWeights, fontSizes, lineHeights, scales, h
 /**
  * Add animation delay utilities. Example: .animation-delay-1000
  */
-const animationDelayPlugin = plugin(function ({ addUtilities, theme, e }) {
+const animationDelayPlugin = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationDelay')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
     }
@@ -18,9 +18,9 @@ const animationDelayPlugin = plugin(function ({ addUtilities, theme, e }) {
 /**
  * Add animation iteration utilities. Example: .animation-iteration-infinite
  */
-const animationIterationPlugin = plugin(function ({ addUtilities, theme, e }) {
+const animationIterationPlugin = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationIteration')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-iteration-${key}`)}`]: {
         animationIterationCount: `${value}`,
@@ -33,9 +33,9 @@ const animationIterationPlugin = plugin(function ({ addUtilities, theme, e }) {
 /**
  * Add animation duration utilities. Example: .animation-duration-1000
  */
-const animationDuration = plugin(function ({ addUtilities, theme, e }) {
+const animationDuration = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationDuration')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-duration-${key}`)}`]: {
         animationDuration: `${value}`,
@@ -48,9 +48,9 @@ const animationDuration = plugin(function ({ addUtilities, theme, e }) {
 /**
  * Add animation fill mode  utilities. Example: .animation-fill-forwards
  */
-const animationFill = plugin(function ({ addUtilities, theme, e }) {
+const animationFill = plugin(({ addUtilities, theme, e }) => {
   const values = theme('animationFill')
-  var utilities = Object.entries(values).map(([key, value]) => {
+  const utilities = Object.entries(values).map(([key, value]) => {
     return {
       [`.${e(`animation-fill-${key}`)}`]: {
         animationFillMode: `${value}`,

package/tools/debounceFunction.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Debounce function execution to prevent multiple calls in a short period of time.
+ *
+ * @param func
+ * @param timeout
+ */
+export declare const debounceFunction: (func: unknown, timeout?: number) => (...args: any[]) => void;
+//# sourceMappingURL=debounceFunction.d.ts.map

package/tools/debounceFunction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounceFunction.d.ts","sourceRoot":"","sources":["../../src/shared/tools/debounceFunction.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,SAAU,OAAO,+CAU7C,CAAA"}