@waggylabs/yumekit 0.4.0-beta.38 → 0.4.0-beta.40

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 (7) hide show
  1. package/dist/components/y-drawer.js +32 -6
  2. package/dist/components/y-select.js +28 -11
  3. package/dist/components/y-slider.js +1 -1
  4. package/dist/icons/all.js +7 -1
  5. package/dist/index.js +68 -23
  6. package/dist/yumekit.min.js +1 -1
  7. package/package.json +1 -1
package/dist/components/y-drawer.js CHANGED
@@ -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
  }
package/dist/components/y-select.js CHANGED
@@ -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="small"></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,6 +600,13 @@ 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
@@ -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");
package/dist/components/y-slider.js CHANGED
@@ -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) {
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
 
@@ -114,6 +114,10 @@ var downFromBracket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2
114
114
 
115
115
  var downToBracket = "<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 <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"7 10 12 15 17 10\"/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/>\n</svg>\n";
116
116
 
117
+ var ellipsisH = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <circle cx=\"5\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"19\" cy=\"12\" r=\"1.5\"/>\n</svg>\n";
118
+
119
+ var ellipsisV = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <circle cx=\"12\" cy=\"5\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"19\" r=\"1.5\"/>\n</svg>\n";
120
+
117
121
  var expandDown = "<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 <polyline points=\"17 13 12 18 7 13\"/>\n <polyline points=\"17 6 12 11 7 6\"/>\n</svg>\n";
118
122
 
119
123
  var expandLeft = "<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 <polyline points=\"11 17 6 12 11 7\"/>\n <polyline points=\"18 17 13 12 18 7\"/>\n</svg>\n";
@@ -297,6 +301,8 @@ registerIcons({
297
301
  discord,
298
302
  "down-from-bracket": downFromBracket,
299
303
  "down-to-bracket": downToBracket,
304
+ "ellipsis-h": ellipsisH,
305
+ "ellipsis-v": ellipsisV,
300
306
  "expand-down": expandDown,
301
307
  "expand-left": expandLeft,
302
308
  "expand-right": expandRight,
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
 
@@ -143,6 +143,10 @@ var downFromBracket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2
143
143
 
144
144
  var downToBracket = "<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 <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"7 10 12 15 17 10\"/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/>\n</svg>\n";
145
145
 
146
+ var ellipsisH = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <circle cx=\"5\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"19\" cy=\"12\" r=\"1.5\"/>\n</svg>\n";
147
+
148
+ var ellipsisV = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <circle cx=\"12\" cy=\"5\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"19\" r=\"1.5\"/>\n</svg>\n";
149
+
146
150
  var expandDown = "<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 <polyline points=\"17 13 12 18 7 13\"/>\n <polyline points=\"17 6 12 11 7 6\"/>\n</svg>\n";
147
151
 
148
152
  var expandLeft = "<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 <polyline points=\"11 17 6 12 11 7\"/>\n <polyline points=\"18 17 13 12 18 7\"/>\n</svg>\n";
@@ -326,6 +330,8 @@ registerIcons({
326
330
  discord,
327
331
  "down-from-bracket": downFromBracket,
328
332
  "down-to-bracket": downToBracket,
333
+ "ellipsis-h": ellipsisH,
334
+ "ellipsis-v": ellipsisV,
329
335
  "expand-down": expandDown,
330
336
  "expand-left": expandLeft,
331
337
  "expand-right": expandRight,
@@ -1225,10 +1231,6 @@ if (!customElements.get("y-icon")) {
1225
1231
  customElements.define("y-icon", YumeIcon);
1226
1232
  }
1227
1233
 
1228
- var ellipsisV = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <circle cx=\"12\" cy=\"5\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"19\" r=\"1.5\"/>\n</svg>\n";
1229
-
1230
- var ellipsisH = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <circle cx=\"5\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"12\" cy=\"12\" r=\"1.5\"/>\n <circle cx=\"19\" cy=\"12\" r=\"1.5\"/>\n</svg>\n";
1231
-
1232
1234
  class YumeMenu extends HTMLElement {
1233
1235
  static get observedAttributes() {
1234
1236
  return ["items", "anchor", "visible", "direction", "size"];
@@ -3336,25 +3338,37 @@ class YumeDrawer extends HTMLElement {
3336
3338
  // -------------------------------------------------------------------------
3337
3339
 
3338
3340
  /** Which anchor element ID triggers this drawer. */
3339
- get anchor() { return this.getAttribute("anchor"); }
3340
- 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
+ }
3341
3347
 
3342
3348
  /**
3343
3349
  * Which edge the drawer slides in from.
3344
3350
  * Accepted values: "left" | "right" | "top" | "bottom" (default "left").
3345
3351
  */
3346
- get position() { return this.getAttribute("position") || "left"; }
3347
- 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
+ }
3348
3358
 
3349
3359
  /** Whether the drawer is resizable by dragging. */
3350
- get resizable() { return this.hasAttribute("resizable"); }
3360
+ get resizable() {
3361
+ return this.hasAttribute("resizable");
3362
+ }
3351
3363
  set resizable(val) {
3352
3364
  if (val) this.setAttribute("resizable", "");
3353
3365
  else this.removeAttribute("resizable");
3354
3366
  }
3355
3367
 
3356
3368
  /** Whether the drawer is currently visible. */
3357
- get visible() { return this.hasAttribute("visible"); }
3369
+ get visible() {
3370
+ return this.hasAttribute("visible");
3371
+ }
3358
3372
  set visible(val) {
3359
3373
  if (val) this.setAttribute("visible", "");
3360
3374
  else this.removeAttribute("visible");
@@ -3563,6 +3577,13 @@ class YumeDrawer extends HTMLElement {
3563
3577
  padding: var(--component-drawer-handle-padding, 4px);
3564
3578
  cursor: ew-resize;
3565
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
+ }
3566
3587
  .drawer-panel[data-position="left"] > .resize-handle {
3567
3588
  order: 99;
3568
3589
  }
@@ -3576,6 +3597,13 @@ class YumeDrawer extends HTMLElement {
3576
3597
  padding: var(--component-drawer-handle-padding, 4px);
3577
3598
  cursor: ns-resize;
3578
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
+ }
3579
3607
  .drawer-panel[data-position="top"] > .resize-handle {
3580
3608
  order: 99;
3581
3609
  }
@@ -5887,14 +5915,22 @@ class YumeSelect extends HTMLElement {
5887
5915
  // Clear button click → clear selection
5888
5916
  this.clearButton?.addEventListener("click", (e) => {
5889
5917
  e.stopPropagation();
5890
- this.value = "";
5891
- this._filterOptions("");
5892
- if (this.searchInput) {
5893
- this.searchInput.value = "";
5894
- this.searchInput.placeholder = this.getAttribute("placeholder") || "Select...";
5895
- this.searchInput.focus();
5896
- if (!this.dropdown.classList.contains("open")) {
5897
- 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
+ }
5898
5934
  }
5899
5935
  }
5900
5936
  this.dispatchEvent(new CustomEvent("change", {
@@ -5978,15 +6014,14 @@ class YumeSelect extends HTMLElement {
5978
6014
  const showClearButton = (isSearchable || isClearable) && !isMulti;
5979
6015
  const valueSet = isMulti ? this.selectedValues : new Set([this.value]);
5980
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="small"></y-icon></button>`;
5981
6018
 
5982
6019
  let containerInner;
5983
6020
  if (isSearchable && !isMulti) {
5984
6021
  // Single searchable: inline input replacing the value display
5985
6022
  containerInner = `
5986
6023
  <input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
5987
- <button class="clear-button" style="display:none" tabindex="-1" type="button">
5988
- <y-icon name="close" size="small"></y-icon>
5989
- </button>
6024
+ ${clearButtonHTML}
5990
6025
  `;
5991
6026
  } else if (isSearchable && isMulti && isTagMode) {
5992
6027
  // Multi-tag searchable: input lives inside the value display after tags
@@ -5994,6 +6029,13 @@ class YumeSelect extends HTMLElement {
5994
6029
  <div class="value-display">
5995
6030
  <input class="search-input" type="text" placeholder="${placeholder}" autocomplete="off">
5996
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 : ""}
5997
6039
  `;
5998
6040
  } else if (showClearButton) {
5999
6041
  // Clearable but not searchable: value display + clear button
@@ -6164,6 +6206,9 @@ class YumeSelect extends HTMLElement {
6164
6206
 
6165
6207
  if (isTagMode) {
6166
6208
  this._renderTags();
6209
+ if (isClearable && this.clearButton) {
6210
+ this.clearButton.style.display = this.selectedValues.size > 0 ? "flex" : "none";
6211
+ }
6167
6212
  } else if (isSearchable && !isMulti && this.searchInput) {
6168
6213
  // Update inline search input to reflect current selection
6169
6214
  const isOpen = this.dropdown?.classList.contains("open");
@@ -6511,7 +6556,7 @@ class YumeSlider extends HTMLElement {
6511
6556
  error: "var(--error-background-hover)",
6512
6557
  help: "var(--help-background-hover)",
6513
6558
  };
6514
- return colorMap[color] || color;
6559
+ return colorMap[color] || `color-mix(in srgb, ${color} 40%, transparent)`;
6515
6560
  }
6516
6561
 
6517
6562
  _snapToStep(val) {