@waggylabs/yumekit 0.4.0-beta.39 → 0.4.0-beta.41

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.
@@ -51,25 +51,37 @@ class YumeDrawer extends HTMLElement {
51
51
  // -------------------------------------------------------------------------
52
52
 
53
53
  /** Which anchor element ID triggers this drawer. */
54
- get anchor() { return this.getAttribute("anchor"); }
55
- set anchor(id) { this.setAttribute("anchor", id); }
54
+ get anchor() {
55
+ return this.getAttribute("anchor");
56
+ }
57
+ set anchor(id) {
58
+ this.setAttribute("anchor", id);
59
+ }
56
60
 
57
61
  /**
58
62
  * Which edge the drawer slides in from.
59
63
  * Accepted values: "left" | "right" | "top" | "bottom" (default "left").
60
64
  */
61
- get position() { return this.getAttribute("position") || "left"; }
62
- set position(val) { this.setAttribute("position", val); }
65
+ get position() {
66
+ return this.getAttribute("position") || "left";
67
+ }
68
+ set position(val) {
69
+ this.setAttribute("position", val);
70
+ }
63
71
 
64
72
  /** Whether the drawer is resizable by dragging. */
65
- get resizable() { return this.hasAttribute("resizable"); }
73
+ get resizable() {
74
+ return this.hasAttribute("resizable");
75
+ }
66
76
  set resizable(val) {
67
77
  if (val) this.setAttribute("resizable", "");
68
78
  else this.removeAttribute("resizable");
69
79
  }
70
80
 
71
81
  /** Whether the drawer is currently visible. */
72
- get visible() { return this.hasAttribute("visible"); }
82
+ get visible() {
83
+ return this.hasAttribute("visible");
84
+ }
73
85
  set visible(val) {
74
86
  if (val) this.setAttribute("visible", "");
75
87
  else this.removeAttribute("visible");
@@ -278,6 +290,13 @@ class YumeDrawer extends HTMLElement {
278
290
  padding: var(--component-drawer-handle-padding, 4px);
279
291
  cursor: ew-resize;
280
292
  }
293
+
294
+ .drawer-panel[data-position="left"] > .resize-handle svg,
295
+ .drawer-panel[data-position="right"] > .resize-handle svg {
296
+ width: 16px;
297
+ height: 24px;
298
+ flex-shrink: 0;
299
+ }
281
300
  .drawer-panel[data-position="left"] > .resize-handle {
282
301
  order: 99;
283
302
  }
@@ -291,6 +310,13 @@ class YumeDrawer extends HTMLElement {
291
310
  padding: var(--component-drawer-handle-padding, 4px);
292
311
  cursor: ns-resize;
293
312
  }
313
+
314
+ .drawer-panel[data-position="top"] > .resize-handle svg,
315
+ .drawer-panel[data-position="bottom"] > .resize-handle svg {
316
+ width: 24px;
317
+ height: 16px;
318
+ flex-shrink: 0;
319
+ }
294
320
  .drawer-panel[data-position="top"] > .resize-handle {
295
321
  order: 99;
296
322
  }
@@ -486,14 +486,22 @@ class YumeSelect extends HTMLElement {
486
486
  // Clear button click → clear selection
487
487
  this.clearButton?.addEventListener("click", (e) => {
488
488
  e.stopPropagation();
489
- this.value = "";
490
- this._filterOptions("");
491
- if (this.searchInput) {
492
- this.searchInput.value = "";
493
- this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
494
- this.searchInput.focus();
495
- if (!this.dropdown.classList.contains("open")) {
496
- this._openDropdown();
489
+ if (this.hasAttribute("multiple")) {
490
+ this.selectedValues = new Set();
491
+ this.setAttribute("value", "");
492
+ this._renderTags();
493
+ this._updateSelectedStyles();
494
+ if (this.clearButton) this.clearButton.style.display = "none";
495
+ } else {
496
+ this.value = "";
497
+ this._filterOptions("");
498
+ if (this.searchInput) {
499
+ this.searchInput.value = "";
500
+ this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
501
+ this.searchInput.focus();
502
+ if (!this.dropdown.classList.contains("open")) {
503
+ this._openDropdown();
504
+ }
497
505
  }
498
506
  }
499
507
  this.dispatchEvent(new CustomEvent("change", {
@@ -577,15 +585,14 @@ class YumeSelect extends HTMLElement {
577
585
  const showClearButton = (isSearchable || isClearable) && !isMulti;
578
586
  const valueSet = isMulti ? this.selectedValues : new Set([this.value]);
579
587
  const placeholder = this.getAttribute("placeholder") || "Select...";
588
+ const clearButtonHTML = `<button class="clear-button" style="display:none" tabindex="-1" type="button"><y-icon name="close" size="medium"></y-icon></button>`;
580
589
 
581
590
  let containerInner;
582
591
  if (isSearchable && !isMulti) {
583
592
  // Single searchable: inline input replacing the value display
584
593
  containerInner = `
585
594
  <input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
586
- <button class="clear-button" style="display:none" tabindex="-1" type="button">
587
- <y-icon name="close" size="small"></y-icon>
588
- </button>
595
+ ${clearButtonHTML}
589
596
  `;
590
597
  } else if (isSearchable && isMulti && isTagMode) {
591
598
  // Multi-tag searchable: input lives inside the value display after tags
@@ -593,13 +600,20 @@ class YumeSelect extends HTMLElement {
593
600
  <div class="value-display">
594
601
  <input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
595
602
  </div>
603
+ ${isClearable ? clearButtonHTML : ""}
604
+ `;
605
+ } else if (isMulti && isTagMode) {
606
+ // Multi-tag (non-searchable): tags + optional clear button
607
+ containerInner = `
608
+ <div class="value-display"></div>
609
+ ${isClearable ? clearButtonHTML : ""}
596
610
  `;
597
611
  } else if (showClearButton) {
598
612
  // Clearable but not searchable: value display + clear button
599
613
  containerInner = `
600
614
  <div class="value-display">${this._getDisplayText()}</div>
601
615
  <button class="clear-button" style="display:none" tabindex="-1" type="button">
602
- <y-icon name="close" size="small"></y-icon>
616
+ <y-icon name="close" size="medium"></y-icon>
603
617
  </button>
604
618
  `;
605
619
  } else {
@@ -763,6 +777,9 @@ class YumeSelect extends HTMLElement {
763
777
 
764
778
  if (isTagMode) {
765
779
  this._renderTags();
780
+ if (isClearable && this.clearButton) {
781
+ this.clearButton.style.display = this.selectedValues.size > 0 ? "flex" : "none";
782
+ }
766
783
  } else if (isSearchable && !isMulti && this.searchInput) {
767
784
  // Update inline search input to reflect current selection
768
785
  const isOpen = this.dropdown?.classList.contains("open");
@@ -300,7 +300,7 @@ class YumeSlider extends HTMLElement {
300
300
  error: "var(--error-background-hover)",
301
301
  help: "var(--help-background-hover)",
302
302
  };
303
- return colorMap[color] || color;
303
+ return colorMap[color] || `color-mix(in srgb, ${color} 40%, transparent)`;
304
304
  }
305
305
 
306
306
  _snapToStep(val) {
@@ -150,6 +150,9 @@ class YumeTag extends HTMLElement {
150
150
  }
151
151
  .remove svg {
152
152
  pointer-events: none;
153
+ width: 1.1em;
154
+ height: 1.1em;
155
+ stroke-width: 2.5;
153
156
  }
154
157
  `;
155
158
 
package/dist/icons/all.js CHANGED
@@ -102,7 +102,7 @@ var compTooltip = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24
102
102
 
103
103
  var compTextarea = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"7\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n <line x1=\"7\" y1=\"16\" x2=\"13\" y2=\"16\"/>\n <line x1=\"15\" y1=\"19\" x2=\"19\" y2=\"15\"/>\n <line x1=\"18\" y1=\"19\" x2=\"19\" y2=\"18\"/>\n</svg>\n";
104
104
 
105
- var compRating = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n <polygon points=\"12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n <polygon points=\"19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03\"/>\n</svg>\n";
105
+ var compRating = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\"/>\n <polygon points=\"12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03\"/>\n <polygon points=\"19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n</svg>\n";
106
106
 
107
107
  var compass = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"/>\n</svg>\n";
108
108
 
package/dist/index.js CHANGED
@@ -131,7 +131,7 @@ var compTooltip = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24
131
131
 
132
132
  var compTextarea = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"7\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n <line x1=\"7\" y1=\"16\" x2=\"13\" y2=\"16\"/>\n <line x1=\"15\" y1=\"19\" x2=\"19\" y2=\"15\"/>\n <line x1=\"18\" y1=\"19\" x2=\"19\" y2=\"18\"/>\n</svg>\n";
133
133
 
134
- var compRating = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n <polygon points=\"12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n <polygon points=\"19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03\"/>\n</svg>\n";
134
+ var compRating = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"5,9 5.71,11.03 7.85,11.07 6.14,12.37 6.76,14.43 5,13.2 3.24,14.43 3.86,12.37 2.15,11.07 4.29,11.03\"/>\n <polygon points=\"12,9 12.71,11.03 14.85,11.07 13.14,12.37 13.76,14.43 12,13.2 10.24,14.43 10.86,12.37 9.15,11.07 11.29,11.03\"/>\n <polygon points=\"19,9 19.71,11.03 21.85,11.07 20.14,12.37 20.76,14.43 19,13.2 17.24,14.43 17.86,12.37 16.15,11.07 18.29,11.03\" fill=\"currentColor\" stroke=\"none\"/>\n</svg>\n";
135
135
 
136
136
  var compass = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"/>\n</svg>\n";
137
137
 
@@ -3338,25 +3338,37 @@ class YumeDrawer extends HTMLElement {
3338
3338
  // -------------------------------------------------------------------------
3339
3339
 
3340
3340
  /** Which anchor element ID triggers this drawer. */
3341
- get anchor() { return this.getAttribute("anchor"); }
3342
- set anchor(id) { this.setAttribute("anchor", id); }
3341
+ get anchor() {
3342
+ return this.getAttribute("anchor");
3343
+ }
3344
+ set anchor(id) {
3345
+ this.setAttribute("anchor", id);
3346
+ }
3343
3347
 
3344
3348
  /**
3345
3349
  * Which edge the drawer slides in from.
3346
3350
  * Accepted values: "left" | "right" | "top" | "bottom" (default "left").
3347
3351
  */
3348
- get position() { return this.getAttribute("position") || "left"; }
3349
- set position(val) { this.setAttribute("position", val); }
3352
+ get position() {
3353
+ return this.getAttribute("position") || "left";
3354
+ }
3355
+ set position(val) {
3356
+ this.setAttribute("position", val);
3357
+ }
3350
3358
 
3351
3359
  /** Whether the drawer is resizable by dragging. */
3352
- get resizable() { return this.hasAttribute("resizable"); }
3360
+ get resizable() {
3361
+ return this.hasAttribute("resizable");
3362
+ }
3353
3363
  set resizable(val) {
3354
3364
  if (val) this.setAttribute("resizable", "");
3355
3365
  else this.removeAttribute("resizable");
3356
3366
  }
3357
3367
 
3358
3368
  /** Whether the drawer is currently visible. */
3359
- get visible() { return this.hasAttribute("visible"); }
3369
+ get visible() {
3370
+ return this.hasAttribute("visible");
3371
+ }
3360
3372
  set visible(val) {
3361
3373
  if (val) this.setAttribute("visible", "");
3362
3374
  else this.removeAttribute("visible");
@@ -3565,6 +3577,13 @@ class YumeDrawer extends HTMLElement {
3565
3577
  padding: var(--component-drawer-handle-padding, 4px);
3566
3578
  cursor: ew-resize;
3567
3579
  }
3580
+
3581
+ .drawer-panel[data-position="left"] > .resize-handle svg,
3582
+ .drawer-panel[data-position="right"] > .resize-handle svg {
3583
+ width: 16px;
3584
+ height: 24px;
3585
+ flex-shrink: 0;
3586
+ }
3568
3587
  .drawer-panel[data-position="left"] > .resize-handle {
3569
3588
  order: 99;
3570
3589
  }
@@ -3578,6 +3597,13 @@ class YumeDrawer extends HTMLElement {
3578
3597
  padding: var(--component-drawer-handle-padding, 4px);
3579
3598
  cursor: ns-resize;
3580
3599
  }
3600
+
3601
+ .drawer-panel[data-position="top"] > .resize-handle svg,
3602
+ .drawer-panel[data-position="bottom"] > .resize-handle svg {
3603
+ width: 24px;
3604
+ height: 16px;
3605
+ flex-shrink: 0;
3606
+ }
3581
3607
  .drawer-panel[data-position="top"] > .resize-handle {
3582
3608
  order: 99;
3583
3609
  }
@@ -5889,14 +5915,22 @@ class YumeSelect extends HTMLElement {
5889
5915
  // Clear button click → clear selection
5890
5916
  this.clearButton?.addEventListener("click", (e) => {
5891
5917
  e.stopPropagation();
5892
- this.value = "";
5893
- this._filterOptions("");
5894
- if (this.searchInput) {
5895
- this.searchInput.value = "";
5896
- this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
5897
- this.searchInput.focus();
5898
- if (!this.dropdown.classList.contains("open")) {
5899
- this._openDropdown();
5918
+ if (this.hasAttribute("multiple")) {
5919
+ this.selectedValues = new Set();
5920
+ this.setAttribute("value", "");
5921
+ this._renderTags();
5922
+ this._updateSelectedStyles();
5923
+ if (this.clearButton) this.clearButton.style.display = "none";
5924
+ } else {
5925
+ this.value = "";
5926
+ this._filterOptions("");
5927
+ if (this.searchInput) {
5928
+ this.searchInput.value = "";
5929
+ this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
5930
+ this.searchInput.focus();
5931
+ if (!this.dropdown.classList.contains("open")) {
5932
+ this._openDropdown();
5933
+ }
5900
5934
  }
5901
5935
  }
5902
5936
  this.dispatchEvent(new CustomEvent("change", {
@@ -5980,15 +6014,14 @@ class YumeSelect extends HTMLElement {
5980
6014
  const showClearButton = (isSearchable || isClearable) && !isMulti;
5981
6015
  const valueSet = isMulti ? this.selectedValues : new Set([this.value]);
5982
6016
  const placeholder = this.getAttribute("placeholder") || "Select...";
6017
+ const clearButtonHTML = `<button class="clear-button" style="display:none" tabindex="-1" type="button"><y-icon name="close" size="medium"></y-icon></button>`;
5983
6018
 
5984
6019
  let containerInner;
5985
6020
  if (isSearchable && !isMulti) {
5986
6021
  // Single searchable: inline input replacing the value display
5987
6022
  containerInner = `
5988
6023
  <input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
5989
- <button class="clear-button" style="display:none" tabindex="-1" type="button">
5990
- <y-icon name="close" size="small"></y-icon>
5991
- </button>
6024
+ ${clearButtonHTML}
5992
6025
  `;
5993
6026
  } else if (isSearchable && isMulti && isTagMode) {
5994
6027
  // Multi-tag searchable: input lives inside the value display after tags
@@ -5996,13 +6029,20 @@ class YumeSelect extends HTMLElement {
5996
6029
  <div class="value-display">
5997
6030
  <input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
5998
6031
  </div>
6032
+ ${isClearable ? clearButtonHTML : ""}
6033
+ `;
6034
+ } else if (isMulti && isTagMode) {
6035
+ // Multi-tag (non-searchable): tags + optional clear button
6036
+ containerInner = `
6037
+ <div class="value-display"></div>
6038
+ ${isClearable ? clearButtonHTML : ""}
5999
6039
  `;
6000
6040
  } else if (showClearButton) {
6001
6041
  // Clearable but not searchable: value display + clear button
6002
6042
  containerInner = `
6003
6043
  <div class="value-display">${this._getDisplayText()}</div>
6004
6044
  <button class="clear-button" style="display:none" tabindex="-1" type="button">
6005
- <y-icon name="close" size="small"></y-icon>
6045
+ <y-icon name="close" size="medium"></y-icon>
6006
6046
  </button>
6007
6047
  `;
6008
6048
  } else {
@@ -6166,6 +6206,9 @@ class YumeSelect extends HTMLElement {
6166
6206
 
6167
6207
  if (isTagMode) {
6168
6208
  this._renderTags();
6209
+ if (isClearable && this.clearButton) {
6210
+ this.clearButton.style.display = this.selectedValues.size > 0 ? "flex" : "none";
6211
+ }
6169
6212
  } else if (isSearchable && !isMulti && this.searchInput) {
6170
6213
  // Update inline search input to reflect current selection
6171
6214
  const isOpen = this.dropdown?.classList.contains("open");
@@ -6513,7 +6556,7 @@ class YumeSlider extends HTMLElement {
6513
6556
  error: "var(--error-background-hover)",
6514
6557
  help: "var(--help-background-hover)",
6515
6558
  };
6516
- return colorMap[color] || color;
6559
+ return colorMap[color] || `color-mix(in srgb, ${color} 40%, transparent)`;
6517
6560
  }
6518
6561
 
6519
6562
  _snapToStep(val) {
@@ -7380,6 +7423,9 @@ class YumeTag extends HTMLElement {
7380
7423
  }
7381
7424
  .remove svg {
7382
7425
  pointer-events: none;
7426
+ width: 1.1em;
7427
+ height: 1.1em;
7428
+ stroke-width: 2.5;
7383
7429
  }
7384
7430
  `;
7385
7431