@lukso/web-components 1.42.0 → 1.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/components/index.cjs +3 -3
  2. package/dist/components/index.js +3 -3
  3. package/dist/components/lukso-button/index.cjs +1 -1
  4. package/dist/components/lukso-button/index.js +1 -1
  5. package/dist/components/lukso-card/index.cjs +35 -42
  6. package/dist/components/lukso-card/index.d.ts.map +1 -1
  7. package/dist/components/lukso-card/index.js +35 -42
  8. package/dist/components/lukso-checkbox/index.cjs +3 -2
  9. package/dist/components/lukso-checkbox/index.d.ts.map +1 -1
  10. package/dist/components/lukso-checkbox/index.js +3 -2
  11. package/dist/components/lukso-footer/index.cjs +1 -1
  12. package/dist/components/lukso-footer/index.js +1 -1
  13. package/dist/components/lukso-icon/index.cjs +2 -2
  14. package/dist/components/lukso-icon/index.js +2 -2
  15. package/dist/components/lukso-input/index.cjs +14 -7
  16. package/dist/components/lukso-input/index.d.ts.map +1 -1
  17. package/dist/components/lukso-input/index.js +14 -7
  18. package/dist/components/lukso-modal/index.cjs +1 -1
  19. package/dist/components/lukso-modal/index.js +1 -1
  20. package/dist/components/lukso-navbar/index.cjs +2 -2
  21. package/dist/components/lukso-navbar/index.js +2 -2
  22. package/dist/components/lukso-profile/index.cjs +2 -2
  23. package/dist/components/lukso-profile/index.js +2 -2
  24. package/dist/components/lukso-progress/index.cjs +2 -2
  25. package/dist/components/lukso-progress/index.js +2 -2
  26. package/dist/components/lukso-sanitize/index.cjs +1 -1
  27. package/dist/components/lukso-sanitize/index.js +1 -1
  28. package/dist/components/lukso-search/index.cjs +133 -38
  29. package/dist/components/lukso-search/index.d.ts +20 -12
  30. package/dist/components/lukso-search/index.d.ts.map +1 -1
  31. package/dist/components/lukso-search/index.js +133 -38
  32. package/dist/components/lukso-search/lukso-search.stories.d.ts +2 -0
  33. package/dist/components/lukso-search/lukso-search.stories.d.ts.map +1 -1
  34. package/dist/components/lukso-share/index.cjs +1 -1
  35. package/dist/components/lukso-share/index.js +1 -1
  36. package/dist/components/lukso-switch/index.cjs +5 -4
  37. package/dist/components/lukso-switch/index.d.ts.map +1 -1
  38. package/dist/components/lukso-switch/index.js +5 -4
  39. package/dist/components/lukso-tag/index.cjs +2 -2
  40. package/dist/components/lukso-tag/index.js +2 -2
  41. package/dist/components/lukso-terms/index.cjs +2 -2
  42. package/dist/components/lukso-terms/index.js +2 -2
  43. package/dist/components/lukso-test/index.cjs +2 -2
  44. package/dist/components/lukso-test/index.js +2 -2
  45. package/dist/components/lukso-username/index.cjs +2 -2
  46. package/dist/components/lukso-username/index.js +2 -2
  47. package/dist/components/lukso-wizard/index.cjs +2 -2
  48. package/dist/components/lukso-wizard/index.js +2 -2
  49. package/dist/{directive-helpers-8f79cbe5.js → directive-helpers-422da386.js} +1 -1
  50. package/dist/{directive-helpers-01f1c3b1.cjs → directive-helpers-b2851157.cjs} +1 -1
  51. package/dist/index-5b6b1166.js +59 -0
  52. package/dist/index-7ef6f8a1.cjs +67 -0
  53. package/dist/index.cjs +3 -3
  54. package/dist/index.js +3 -3
  55. package/dist/shared/tailwind-element/index.cjs +1 -1
  56. package/dist/shared/tailwind-element/index.js +1 -1
  57. package/dist/{style-map-5daca6c4.js → style-map-6cdbbb8b.js} +1 -1
  58. package/dist/{style-map-3b9af808.cjs → style-map-c00f9dd9.cjs} +1 -1
  59. package/package.json +1 -1
  60. package/tailwind.config.cjs +1 -0
  61. package/dist/index-930f6cf2.cjs +0 -67
  62. package/dist/index-ed87f41b.js +0 -59
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-ed87f41b.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-5b6b1166.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
6
6
  import '../lukso-profile/index.js';
7
7
  import '../lukso-username/index.js';
8
8
  import '../../directive-2bb7789e.js';
9
- import '../../style-map-5daca6c4.js';
9
+ import '../../style-map-6cdbbb8b.js';
10
10
 
11
11
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
12
12
 
@@ -26,7 +26,6 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
26
26
  super(...arguments);
27
27
  this.value = "";
28
28
  this.name = "";
29
- this.type = "text";
30
29
  this.placeholder = "";
31
30
  this.label = "";
32
31
  this.autocomplete = "off";
@@ -44,18 +43,35 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
44
43
  this.isSearching = false;
45
44
  this.noResultsText = "";
46
45
  this.showNoResults = false;
46
+ this.selected = void 0;
47
47
  this.hasFocus = false;
48
48
  this.hasHighlight = false;
49
49
  this.isDebouncing = false;
50
+ this.resultsParsed = [];
51
+ this.searchTerm = "";
50
52
  this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-10
51
53
  border-solid h-[48px] placeholder:text-neutral-70
52
54
  outline-none transition transition-all duration-150 appearance-none rounded-12`;
53
55
  }
56
+ willUpdate(changedProperties) {
57
+ if (changedProperties.has("selected")) {
58
+ const selectedOption = this.shadowRoot?.querySelector(
59
+ `[data-index="${changedProperties.get("selected")}"`
60
+ );
61
+ if (selectedOption) {
62
+ selectedOption.scrollIntoView({
63
+ behavior: "smooth",
64
+ block: "center",
65
+ inline: "nearest"
66
+ });
67
+ }
68
+ }
69
+ }
54
70
  inputTemplate() {
55
71
  return x`
56
72
  <input
57
73
  name=${this.name}
58
- type=${this.type}
74
+ type="text"
59
75
  .value=${this.value}
60
76
  placeholder=${this.placeholder}
61
77
  ?autofocus=${this.autofocus}
@@ -79,6 +95,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
79
95
  @focus=${this.handleFocus}
80
96
  @input=${this.handleSearch}
81
97
  @blur=${this.handleBlur}
98
+ @click=${this.handleInputClick}
82
99
  @mouseenter=${this.handleMouseOver}
83
100
  @mouseleave=${this.handleMouseOut}
84
101
  />
@@ -107,47 +124,87 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
107
124
  }
108
125
  resultsTemplate() {
109
126
  const resultTemplates = [];
110
- if (this.results === "" && !this.showNoResults || this.showNoResults && !this.noResultsText) {
111
- return x``;
127
+ this.resultsParsed = JSON.parse(this.results);
128
+ for (const result of Object.entries(this.resultsParsed)) {
129
+ const index = Number(result[0]);
130
+ if ("value" in result[1]) {
131
+ resultTemplates.push(this.resultStringTemplate(result[1], index));
132
+ } else if ("address" in result[1]) {
133
+ resultTemplates.push(this.resultProfileTemplate(result[1], index));
134
+ } else {
135
+ console.error("Unknown result type", result);
136
+ }
112
137
  }
138
+ return x`${this.dropdownWrapperTemplate(resultTemplates)}`;
139
+ }
140
+ noResultsTemplate() {
141
+ return x`${this.dropdownWrapperTemplate(
142
+ x`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
143
+ ${this.noResultsText}
144
+ </div>`
145
+ )}`;
146
+ }
147
+ loadingTemplate() {
113
148
  if (this.showNoResults) {
114
- resultTemplates.push(this.resultEmptyTemplate());
115
- } else {
116
- const results = JSON.parse(this.results);
117
- for (const result of Object.entries(results)) {
118
- if ("value" in result[1]) {
119
- resultTemplates.push(this.resultStringTemplate(result[1]));
120
- } else if ("address" in result[1]) {
121
- resultTemplates.push(this.resultProfileTemplate(result[1]));
122
- } else {
123
- console.error("Unknown result type", result);
124
- }
125
- }
149
+ return x`${this.dropdownWrapperTemplate(x`
150
+ <div role="status" class="flex flex-col gap-1">
151
+ <div
152
+ class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
153
+ ></div>
154
+ </div>
155
+ `)}`;
156
+ }
157
+ if (this.resultsParsed.length === 0 || this.resultsParsed.length > 5) {
158
+ return x`${this.dropdownWrapperTemplate(x`
159
+ <div role="status" class="flex flex-col gap-1">
160
+ ${[...Array(5)].map(
161
+ () => x`<div
162
+ class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
163
+ ></div>`
164
+ )}
165
+ </div>
166
+ `)}`;
126
167
  }
168
+ return x`${this.dropdownWrapperTemplate(x`
169
+ <div role="status" class="flex flex-col gap-1">
170
+ ${this.resultsParsed.map(
171
+ () => x`<div
172
+ class="h-10 bg-neutral-95 w-full rounded-8 animate-pulse animation-delay-none"
173
+ ></div>`
174
+ )}
175
+ </div>
176
+ `)}`;
177
+ }
178
+ dropdownWrapperTemplate(innerTemplate) {
127
179
  return x`<div
128
180
  class="bg-neutral-100 border border-neutral-90 shadow-1xl rounded-12 p-3 mt-2 z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64"
129
181
  >
130
- ${resultTemplates}
182
+ ${innerTemplate}
131
183
  </div>`;
132
184
  }
133
- resultEmptyTemplate() {
134
- return x`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
135
- ${this.noResultsText}
136
- </div>`;
137
- }
138
- resultStringTemplate(result) {
185
+ resultStringTemplate(result, index) {
139
186
  return x`<div
140
187
  data-id="${result.id}"
141
- class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2"
188
+ data-index="${index + 1}"
189
+ class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2 ${customClassMap(
190
+ {
191
+ ["bg-neutral-98"]: this.selected === index + 1
192
+ }
193
+ )}'"
142
194
  @click=${() => this.handleSelect(result)}
143
195
  >
144
196
  ${result.value}
145
197
  </div>`;
146
198
  }
147
- resultProfileTemplate(result) {
199
+ resultProfileTemplate(result, index) {
148
200
  return x`<div
149
201
  data-id="${result.address}"
150
- class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center"
202
+ data-index="${index + 1}"
203
+ class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center ${customClassMap(
204
+ {
205
+ ["bg-neutral-98"]: this.selected === index + 1
206
+ }
207
+ )}"
151
208
  @click=${() => this.handleSelect(result)}
152
209
  >
153
210
  <lukso-profile
@@ -165,7 +222,8 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
165
222
  ></lukso-username>
166
223
  </div>`;
167
224
  }
168
- handleSelect(result) {
225
+ async handleSelect(result) {
226
+ await this.updateComplete;
169
227
  const selectEvent = new CustomEvent("on-select", {
170
228
  detail: {
171
229
  value: result
@@ -181,11 +239,37 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
181
239
  this.hasHighlight = true;
182
240
  }
183
241
  }
184
- handleBlur() {
242
+ async handleBlur(event) {
243
+ await this.updateComplete;
185
244
  this.hasFocus = false;
186
245
  this.hasHighlight = false;
246
+ const target = event.target;
247
+ const blurEvent = new CustomEvent("on-blur", {
248
+ detail: {
249
+ value: target.value,
250
+ event
251
+ },
252
+ bubbles: false,
253
+ composed: true
254
+ });
255
+ this.dispatchEvent(blurEvent);
256
+ }
257
+ async handleInputClick(event) {
258
+ await this.updateComplete;
259
+ const target = event.target;
260
+ const clickEvent = new CustomEvent("on-input-click", {
261
+ detail: {
262
+ value: target.value,
263
+ event
264
+ },
265
+ bubbles: false,
266
+ composed: true
267
+ });
268
+ this.dispatchEvent(clickEvent);
187
269
  }
188
- searchDebounce(searchTerm) {
270
+ async searchDebounce(searchTerm) {
271
+ await this.updateComplete;
272
+ this.value = searchTerm;
189
273
  this.debounceTimer = setTimeout(() => {
190
274
  const changeEvent = new CustomEvent("on-search", {
191
275
  detail: {
@@ -224,16 +308,21 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
224
308
  <div class="flex relative items-center">
225
309
  ${this.inputTemplate()}
226
310
  <lukso-icon
227
- name="${this.isSearching || this.isDebouncing ? "spinner" : "search"}"
311
+ name="search"
228
312
  class="absolute right-0 mr-3 ${customClassMap({
229
313
  ["opacity-60 cursor-not-allowed"]: this.isDisabled,
230
- ["cursor-not-allowed"]: this.isReadonly,
231
- ["animate-spin"]: this.isSearching || this.isDebouncing
314
+ ["cursor-not-allowed"]: this.isReadonly
232
315
  })}"
233
316
  @mouseenter=${this.handleMouseOver}
234
317
  ></lukso-icon>
235
318
  </div>
236
- ${this.results || this.showNoResults && this.hasFocus ? this.resultsTemplate() : A}
319
+ <!-- results dropdown -->
320
+ ${this.results && !(this.isSearching || this.isDebouncing) ? this.resultsTemplate() : A}
321
+ <!-- no results dropdown -->
322
+ ${this.showNoResults && !(this.isSearching || this.isDebouncing) ? this.noResultsTemplate() : A}
323
+ <!-- loading dropdown -->
324
+ ${this.value && (this.isSearching || this.isDebouncing) ? this.loadingTemplate() : A}
325
+ <!-- error -->
237
326
  ${this.error ? this.errorTemplate() : A}
238
327
  </div>
239
328
  `;
@@ -245,9 +334,6 @@ __decorateClass([
245
334
  __decorateClass([
246
335
  e({ type: String })
247
336
  ], LuksoSearch.prototype, "name", 2);
248
- __decorateClass([
249
- e({ type: String })
250
- ], LuksoSearch.prototype, "type", 2);
251
337
  __decorateClass([
252
338
  e({ type: String })
253
339
  ], LuksoSearch.prototype, "placeholder", 2);
@@ -299,6 +385,9 @@ __decorateClass([
299
385
  __decorateClass([
300
386
  e({ type: Boolean, attribute: "show-no-results" })
301
387
  ], LuksoSearch.prototype, "showNoResults", 2);
388
+ __decorateClass([
389
+ e({ type: Number })
390
+ ], LuksoSearch.prototype, "selected", 2);
302
391
  __decorateClass([
303
392
  t()
304
393
  ], LuksoSearch.prototype, "hasFocus", 2);
@@ -311,6 +400,12 @@ __decorateClass([
311
400
  __decorateClass([
312
401
  t()
313
402
  ], LuksoSearch.prototype, "debounceTimer", 2);
403
+ __decorateClass([
404
+ t()
405
+ ], LuksoSearch.prototype, "resultsParsed", 2);
406
+ __decorateClass([
407
+ t()
408
+ ], LuksoSearch.prototype, "searchTerm", 2);
314
409
  LuksoSearch = __decorateClass([
315
410
  e$1("lukso-search")
316
411
  ], LuksoSearch);
@@ -10,4 +10,6 @@ export declare const ProfileSearch: any;
10
10
  export declare const SearchingState: any;
11
11
  /** To show that search hes no results add `show-no-results` attribute. You can also customize no results text with `no-results-text` attribute. */
12
12
  export declare const NoResults: any;
13
+ /** Example of selected option. */
14
+ export declare const SelectedOption: any;
13
15
  //# sourceMappingURL=lukso-search.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"lukso-search.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/lukso-search.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,mHAAmH;AACnH,QAAA,MAAM,IAAI,EAAE,IA6NX,CAAA;AAED,eAAe,IAAI,CAAA;AAyEnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA;AAqB9C,0FAA0F;AAC1F,eAAO,MAAM,cAAc,KAAoB,CAAA;AAM/C,mJAAmJ;AACnJ,eAAO,MAAM,SAAS,KAAoB,CAAA"}
1
+ {"version":3,"file":"lukso-search.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/lukso-search.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,mHAAmH;AACnH,QAAA,MAAM,IAAI,EAAE,IA6OX,CAAA;AAED,eAAe,IAAI,CAAA;AA8EnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAM9C,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA;AAsB9C,0FAA0F;AAC1F,eAAO,MAAM,cAAc,KAAoB,CAAA;AAQ/C,mJAAmJ;AACnJ,eAAO,MAAM,SAAS,KAAoB,CAAA;AAQ1C,mCAAmC;AACnC,eAAO,MAAM,cAAc,KAAoB,CAAA"}
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
 
8
8
  const style = ":host {\n display: inline-flex\n}";
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x } from '../../index-ed87f41b.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
 
4
4
  const style = ":host {\n display: inline-flex\n}";
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-3b9af808.cjs');
7
+ const styleMap = require('../../style-map-c00f9dd9.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10
 
@@ -28,9 +28,10 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
28
28
  this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
29
29
  this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
30
30
  }
31
- handleChange(event) {
32
- this.isChecked = !this.isChecked;
31
+ async handleChange(event) {
33
32
  const target = event.target;
33
+ this.isChecked = target.checked;
34
+ await this.updateComplete;
34
35
  const changeEvent = new CustomEvent("on-change", {
35
36
  detail: {
36
37
  value: target.checked,
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;YAEZ,YAAY;IAe1B,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-ed87f41b.js';
1
+ import { a as TailwindElement, x } from '../../index-5b6b1166.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-5daca6c4.js';
3
+ import { o } from '../../style-map-6cdbbb8b.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
@@ -24,9 +24,10 @@ let LuksoSwitch = class extends TailwindElement {
24
24
  this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
25
25
  this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
26
26
  }
27
- handleChange(event) {
28
- this.isChecked = !this.isChecked;
27
+ async handleChange(event) {
29
28
  const target = event.target;
29
+ this.isChecked = target.checked;
30
+ await this.updateComplete;
30
31
  const changeEvent = new CustomEvent("on-change", {
31
32
  detail: {
32
33
  value: target.checked,
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-3b9af808.cjs');
7
+ const styleMap = require('../../style-map-c00f9dd9.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10
 
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, x } from '../../index-ed87f41b.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-5daca6c4.js';
3
+ import { o } from '../../style-map-6cdbbb8b.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
@@ -2,14 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const state = require('../../state-51b50a6b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-sanitize/index.cjs');
11
11
  require('../../directive-8278ab14.cjs');
12
- require('../../style-map-3b9af808.cjs');
12
+ require('../../style-map-c00f9dd9.cjs');
13
13
 
14
14
  const style = ":host {\n display: flex;\n height: 100%\n}";
15
15
 
@@ -1,11 +1,11 @@
1
- import { T as TailwindStyledElement, x } from '../../index-ed87f41b.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-sanitize/index.js';
7
7
  import '../../directive-2bb7789e.js';
8
- import '../../style-map-5daca6c4.js';
8
+ import '../../style-map-6cdbbb8b.js';
9
9
 
10
10
  const style = ":host {\n display: flex;\n height: 100%\n}";
11
11
 
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
- const directiveHelpers = require('../../directive-helpers-01f1c3b1.cjs');
8
+ const directiveHelpers = require('../../directive-helpers-b2851157.cjs');
9
9
 
10
10
  /**
11
11
  * @license
@@ -1,7 +1,7 @@
1
- import { c as A$1, b as T, T as TailwindStyledElement, x as x$1 } from '../../index-ed87f41b.js';
1
+ import { c as A$1, b as T, T as TailwindStyledElement, x as x$1 } from '../../index-5b6b1166.js';
2
2
  import { e as e$2, a as e$3 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { i as i$1, t as t$1, e as e$1 } from '../../directive-2bb7789e.js';
4
- import { e } from '../../directive-helpers-8f79cbe5.js';
4
+ import { e } from '../../directive-helpers-422da386.js';
5
5
 
6
6
  /**
7
7
  * @license
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-3b9af808.cjs');
7
+ const styleMap = require('../../style-map-c00f9dd9.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10
 
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, x, c as A } from '../../index-ed87f41b.js';
1
+ import { T as TailwindStyledElement, x, c as A } from '../../index-5b6b1166.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-5daca6c4.js';
3
+ import { o } from '../../style-map-6cdbbb8b.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
5
+ const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
- const directiveHelpers = require('../../directive-helpers-01f1c3b1.cjs');
8
+ const directiveHelpers = require('../../directive-helpers-b2851157.cjs');
9
9
  const index = require('../../index-e9668573.cjs');
10
10
 
11
11
  /**
@@ -1,7 +1,7 @@
1
- import { b as T, T as TailwindStyledElement, x } from '../../index-ed87f41b.js';
1
+ import { b as T, T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
2
2
  import { e as e$1, a as e$2 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { e, i, t } from '../../directive-2bb7789e.js';
4
- import { m, f, c as c$1, p, a } from '../../directive-helpers-8f79cbe5.js';
4
+ import { m, f, c as c$1, p, a } from '../../directive-helpers-422da386.js';
5
5
  import { c as customClassMap } from '../../index-5e194caf.js';
6
6
 
7
7
  /**
@@ -1,4 +1,4 @@
1
- import { j } from './index-ed87f41b.js';
1
+ import { j } from './index-5b6b1166.js';
2
2
 
3
3
  /**
4
4
  * @license
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const shared_tailwindElement_index = require('./index-930f6cf2.cjs');
3
+ const shared_tailwindElement_index = require('./index-7ef6f8a1.cjs');
4
4
 
5
5
  /**
6
6
  * @license