@keenmate/web-multiselect 1.6.1 → 1.8.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 (10) hide show
  1. package/README.md +27 -26
  2. package/dist/multiselect.js +330 -326
  3. package/dist/multiselect.umd.js +17 -17
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/css/_badges-display.css +11 -11
  7. package/src/css/_input-dropdown.css +28 -18
  8. package/src/css/_options.css +8 -8
  9. package/src/css/_tooltips-popover.css +5 -5
  10. package/src/css/_variables.css +67 -58
package/src/css/_variables.css CHANGED
@@ -28,6 +28,12 @@
28
28
  ========================================================================== */
29
29
  font-family: var(--ms-font-family, var(--base-font-family, inherit));
30
30
 
31
+ /* ==========================================================================
32
+ HOST ELEMENT SIZING
33
+ ==========================================================================
34
+ Allows external width/height styling on <web-multiselect> element */
35
+ display: block;
36
+
31
37
  /* ==========================================================================
32
38
  COLORS & THEME
33
39
  ==========================================================================
@@ -50,7 +56,7 @@
50
56
  --ms-text-color-2: var(--base-text-color-2, #353b47);
51
57
  --ms-text-color-3: var(--base-text-color-3, #6b7280);
52
58
  --ms-text-color-4: var(--base-text-color-4, #a0a3a9);
53
- --ms-text-on-accent: var(--base-text-on-accent, #ffffff);
59
+ --ms-text-color-on-accent: var(--base-text-color-on-accent, #ffffff);
54
60
 
55
61
  /* Legacy aliases (for backward compatibility) */
56
62
  --ms-text-primary: var(--ms-text-color-1);
@@ -59,50 +65,53 @@
59
65
  /* Background Colors */
60
66
  --ms-primary-bg: var(--base-primary-bg, #f3f4f6);
61
67
  --ms-primary-bg-hover: var(--base-primary-bg-hover, #e5e7eb);
68
+
69
+ /* Border Base Variables */
62
70
  --ms-border-color: var(--base-border-color, #e5e7eb);
71
+ --ms-border: var(--base-border, 1px solid var(--ms-border-color));
63
72
 
64
73
  /* ==========================================================================
65
74
  SEMANTIC VARIABLES - Component-Specific Theming
66
75
  ==========================================================================
67
76
  Pattern: --ms-{component}-{property}-{state}
68
- Example: --ms-input-background, --ms-option-text-color-hover */
77
+ Example: --ms-input-bg, --ms-option-text-color-hover */
69
78
 
70
79
  /* Input Component Semantic Variables */
71
- --ms-input-background: var(--base-input-background, #ffffff);
80
+ --ms-input-bg: var(--base-input-bg, #ffffff);
72
81
  --ms-input-color: var(--base-input-color, var(--ms-text-color-1));
73
82
  --ms-input-border: var(--base-input-border, 1px solid var(--ms-border-color));
74
83
  --ms-input-border-hover: var(--base-input-border-hover, 1px solid var(--ms-accent-color));
75
84
  --ms-input-border-focus: var(--base-input-border-focus, 1px solid var(--ms-accent-color));
76
85
  --ms-input-placeholder-color: var(--base-input-placeholder-color, var(--ms-text-color-4));
77
- --ms-input-background-disabled: var(--base-input-background-disabled, rgba(107, 114, 128, 0.05));
86
+ --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
78
87
 
79
88
  /* Toggle Icon Semantic Variables */
80
89
  --ms-toggle-icon-color: var(--ms-text-color-3);
81
90
  --ms-toggle-icon-color-open: var(--ms-text-color-3);
82
91
 
83
92
  /* Counter Badge (in Input) Semantic Variables */
84
- --ms-counter-badge-background: var(--ms-accent-color);
85
- --ms-counter-badge-background-hover: var(--ms-accent-color-hover);
86
- --ms-counter-badge-color: var(--ms-text-on-accent);
93
+ --ms-counter-badge-bg: var(--ms-accent-color);
94
+ --ms-counter-badge-bg-hover: var(--ms-accent-color-hover);
95
+ --ms-counter-badge-color: var(--ms-text-color-on-accent);
87
96
 
88
97
  /* Floating Hint Semantic Variables */
89
- --ms-hint-background: var(--base-hint-background, #ffffff);
98
+ --ms-hint-bg: var(--base-hint-bg, #ffffff);
90
99
  --ms-hint-color: var(--ms-text-color-4);
91
100
  --ms-hint-border-color: var(--ms-border-color);
92
101
 
93
102
  /* Dropdown Semantic Variables */
94
- --ms-dropdown-background: var(--base-dropdown-background, #ffffff);
103
+ --ms-dropdown-bg: var(--base-dropdown-bg, #ffffff);
95
104
  --ms-dropdown-text-color: var(--ms-text-color-1);
96
105
  --ms-dropdown-border-color: var(--ms-border-color);
97
106
  --ms-dropdown-box-shadow-semantic: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
98
107
 
99
108
  /* Dropdown Actions Semantic Variables */
100
- --ms-actions-background: var(--base-actions-background, #ffffff);
109
+ --ms-actions-bg: var(--base-actions-bg, #ffffff);
101
110
  --ms-actions-border-color: var(--ms-border-color);
102
111
 
103
112
  /* Action Button Semantic Variables */
104
- --ms-action-button-background: transparent;
105
- --ms-action-button-background-hover: var(--ms-primary-bg);
113
+ --ms-action-button-bg: transparent;
114
+ --ms-action-button-bg-hover: var(--ms-primary-bg);
106
115
  --ms-action-button-border-color: var(--ms-border-color);
107
116
  --ms-action-button-border-color-hover: var(--ms-accent-color);
108
117
  --ms-action-button-color: var(--ms-text-color-1);
@@ -113,21 +122,21 @@
113
122
 
114
123
  /* Option Semantic Variables */
115
124
  --ms-option-text-color: var(--ms-text-color-1);
116
- --ms-option-background: transparent;
117
- --ms-option-background-hover: var(--ms-primary-bg);
125
+ --ms-option-bg: transparent;
126
+ --ms-option-bg-hover: var(--ms-primary-bg);
118
127
  --ms-option-color-hover: inherit;
119
- --ms-option-background-focused: var(--ms-primary-bg);
128
+ --ms-option-bg-focused: var(--ms-primary-bg);
120
129
  --ms-option-color-focused: inherit;
121
130
  --ms-option-outline-color-focused: var(--ms-accent-color);
122
- --ms-option-background-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
123
- --ms-option-background-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
131
+ --ms-option-bg-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
132
+ --ms-option-bg-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
124
133
  --ms-option-color-matched: inherit;
125
134
  --ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
126
135
 
127
136
  /* Option Content Semantic Variables */
128
137
  --ms-option-title-color: var(--ms-text-color-1);
129
138
  --ms-option-subtitle-color: var(--ms-text-color-3);
130
- --ms-option-mark-background: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
139
+ --ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
131
140
  --ms-option-mark-color: inherit;
132
141
 
133
142
  /* Empty/Loading State Semantic Variables */
@@ -135,52 +144,52 @@
135
144
  --ms-loading-color: var(--ms-text-color-3);
136
145
 
137
146
  /* Badge Semantic Variables */
138
- --ms-badge-background: var(--ms-accent-color-light);
139
- --ms-badge-background-hover: var(--base-badge-background-hover, var(--ms-input-background));
140
- --ms-badge-background-active: var(--ms-accent-color-light-hover);
147
+ --ms-badge-bg: var(--ms-accent-color-light);
148
+ --ms-badge-bg-hover: var(--base-badge-bg-hover, var(--ms-input-bg));
149
+ --ms-badge-bg-active: var(--ms-accent-color-light-hover);
141
150
 
142
151
  /* Badge Text Semantic Variables */
143
- --ms-badge-text-background: var(--ms-accent-color-light);
152
+ --ms-badge-text-bg: var(--ms-accent-color-light);
144
153
  --ms-badge-text-color: var(--ms-accent-color);
145
- --ms-badge-text-background-hover: var(--base-badge-background-hover, var(--ms-input-background));
154
+ --ms-badge-text-bg-hover: var(--base-badge-bg-hover, var(--ms-input-bg));
146
155
  --ms-badge-text-color-hover: var(--ms-badge-text-color);
147
156
 
148
157
  /* Badge Remove Button Semantic Variables */
149
- --ms-badge-remove-background: var(--ms-accent-color);
150
- --ms-badge-remove-background-hover: var(--ms-accent-color-hover);
151
- --ms-badge-remove-color: var(--ms-text-on-accent);
158
+ --ms-badge-remove-bg: var(--ms-accent-color);
159
+ --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
160
+ --ms-badge-remove-color: var(--ms-text-color-on-accent);
152
161
 
153
162
  /* Badge Counter Variant Semantic Variables */
154
163
  --ms-badge-counter-border-color: var(--ms-border-color);
155
- --ms-badge-counter-text-background: var(--ms-primary-bg);
164
+ --ms-badge-counter-text-bg: var(--ms-primary-bg);
156
165
  --ms-badge-counter-text-color: var(--ms-text-color-3);
157
- --ms-badge-counter-remove-background: var(--ms-text-color-3);
158
- --ms-badge-counter-remove-background-hover: var(--ms-text-color-1);
159
- --ms-badge-counter-remove-color: var(--ms-text-on-accent);
166
+ --ms-badge-counter-remove-bg: var(--ms-text-color-3);
167
+ --ms-badge-counter-remove-bg-hover: var(--ms-text-color-1);
168
+ --ms-badge-counter-remove-color: var(--ms-text-color-on-accent);
160
169
 
161
170
  /* Count Display Semantic Variables */
162
- --ms-counter-wrapper-background: transparent;
163
- --ms-counter-wrapper-background-hover: var(--ms-primary-bg);
171
+ --ms-counter-wrapper-bg: transparent;
172
+ --ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
164
173
  --ms-counter-wrapper-border-color: var(--ms-border-color);
165
174
  --ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
166
175
  --ms-count-text-color: var(--ms-text-color-1);
167
- --ms-count-clear-background: transparent;
168
- --ms-count-clear-background-hover: var(--ms-accent-color);
176
+ --ms-count-clear-bg: transparent;
177
+ --ms-count-clear-bg-hover: var(--ms-accent-color);
169
178
  --ms-count-clear-color: var(--ms-text-color-3);
170
179
  --ms-count-clear-color-hover: var(--ms-accent-color);
171
180
 
172
181
  /* Tooltip Semantic Variables */
173
- --ms-tooltip-background: var(--base-tooltip-background, #333333);
182
+ --ms-tooltip-bg: var(--base-tooltip-bg, #333333);
174
183
  --ms-tooltip-text-color: var(--base-tooltip-text-color, #ffffff);
175
184
 
176
185
  /* Selected Popover Semantic Variables */
177
- --ms-selected-popover-background: var(--base-popover-background, #ffffff);
186
+ --ms-selected-popover-bg: var(--base-popover-bg, #ffffff);
178
187
  --ms-selected-popover-border-color: var(--ms-border-color);
179
- --ms-selected-popover-header-background: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
188
+ --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
180
189
  --ms-selected-popover-header-color: var(--ms-text-color-1);
181
190
  --ms-selected-popover-header-border-color: var(--ms-border-color);
182
- --ms-selected-popover-close-background: transparent;
183
- --ms-selected-popover-close-background-hover: var(--ms-accent-color);
191
+ --ms-selected-popover-close-bg: transparent;
192
+ --ms-selected-popover-close-bg-hover: var(--ms-accent-color);
184
193
  --ms-selected-popover-close-color: var(--ms-text-color-3);
185
194
  --ms-selected-popover-close-color-hover: var(--ms-accent-color);
186
195
 
@@ -240,7 +249,7 @@
240
249
  --ms-counter-offset: calc(3.2 * var(--ms-rem));
241
250
  --ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem));
242
251
  --ms-counter-bg: var(--ms-accent-color);
243
- --ms-counter-color: var(--ms-text-on-accent);
252
+ --ms-counter-color: var(--ms-text-color-on-accent);
244
253
  --ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
245
254
  --ms-counter-font-weight: var(--base-font-weight-semibold, 600);
246
255
  --ms-counter-border-radius: var(--ms-border-radius-sm);
@@ -251,7 +260,7 @@
251
260
  FLOATING HINT
252
261
  ========================================================================== */
253
262
  --ms-hint-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
254
- --ms-hint-border: 1px solid var(--ms-border-color);
263
+ --ms-hint-border: var(--ms-border);
255
264
  --ms-hint-border-radius: var(--ms-border-radius-lg);
256
265
  --ms-hint-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
257
266
  --ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
@@ -272,12 +281,12 @@
272
281
  ========================================================================== */
273
282
  --ms-actions-gap: calc(0.4 * var(--ms-rem));
274
283
  --ms-actions-padding: calc(0.8 * var(--ms-rem));
275
- --ms-actions-border-bottom: 1px solid var(--ms-border-color);
284
+ --ms-actions-border-bottom: var(--ms-border);
276
285
 
277
286
  /* Action Button */
278
287
  --ms-action-btn-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
279
288
  --ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
280
- --ms-action-btn-border: 1px solid var(--ms-border-color);
289
+ --ms-action-btn-border: var(--ms-border);
281
290
  --ms-action-btn-border-radius: var(--ms-border-radius-sm);
282
291
  --ms-action-btn-bg: transparent;
283
292
  --ms-action-btn-color: inherit;
@@ -291,7 +300,7 @@
291
300
  --ms-options-padding: 0;
292
301
 
293
302
  /* Group */
294
- --ms-group-border-top: 1px solid var(--ms-border-color);
303
+ --ms-group-border-top: var(--ms-border);
295
304
  --ms-group-margin-top: calc(0.4 * var(--ms-rem));
296
305
  --ms-group-padding-top: calc(0.4 * var(--ms-rem));
297
306
 
@@ -357,15 +366,15 @@
357
366
  --ms-checkbox-align: center;
358
367
 
359
368
  /* Checkbox Styling */
360
- --ms-checkbox-bg: var(--ms-input-background);
361
- --ms-checkbox-border: 1px solid var(--ms-border-color);
369
+ --ms-checkbox-bg: var(--ms-input-bg);
370
+ --ms-checkbox-border: var(--ms-border);
362
371
  --ms-checkbox-border-radius: calc(0.3 * var(--ms-rem));
363
372
  --ms-checkbox-checked-bg: var(--ms-accent-color);
364
373
  --ms-checkbox-checked-border: 1px solid var(--ms-accent-color);
365
- --ms-checkbox-checkmark-color: var(--ms-text-on-accent);
374
+ --ms-checkbox-checkmark-color: var(--ms-text-color-on-accent);
366
375
  --ms-checkbox-hover-border-color: var(--ms-accent-color);
367
376
  --ms-checkbox-disabled-bg: var(--ms-primary-bg);
368
- --ms-checkbox-disabled-border: 1px solid var(--ms-border-color);
377
+ --ms-checkbox-disabled-border: var(--ms-border);
369
378
 
370
379
  /* Checkbox State Combinations */
371
380
  --ms-checkbox-checked-bg-hover: var(--ms-accent-color-hover);
@@ -402,7 +411,7 @@
402
411
  --ms-badge-font-weight: var(--base-font-weight-semibold, 600);
403
412
  --ms-badge-border-radius: var(--ms-border-radius-sm);
404
413
  --ms-badge-bg: var(--ms-accent-color-light);
405
- --ms-badge-bg-hover: var(--ms-badge-background-hover);
414
+ --ms-badge-bg-hover: var(--ms-badge-bg-hover);
406
415
  --ms-badge-bg-active: var(--ms-accent-color-light-hover);
407
416
  --ms-order-first: -1;
408
417
 
@@ -418,7 +427,7 @@
418
427
  /* Badge Remove Button */
419
428
  --ms-badge-remove-width: calc(2.7 * var(--ms-rem));
420
429
  --ms-badge-remove-bg: var(--ms-accent-color);
421
- --ms-badge-remove-color: var(--ms-text-on-accent);
430
+ --ms-badge-remove-color: var(--ms-text-color-on-accent);
422
431
  --ms-badge-remove-border: none;
423
432
  --ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
424
433
  --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
@@ -427,19 +436,19 @@
427
436
 
428
437
  /* Badge Indicator */
429
438
  --ms-badge-counter-bg: transparent;
430
- --ms-badge-counter-border: 1px solid var(--ms-border-color);
439
+ --ms-badge-counter-border: var(--ms-border);
431
440
  --ms-badge-counter-border-radius: var(--ms-border-radius-sm);
432
441
  --ms-badge-counter-text-color: var(--ms-text-color-3);
433
- --ms-badge-counter-text-bg: var(--ms-badge-counter-text-background);
442
+ --ms-badge-counter-text-bg: var(--ms-badge-counter-text-bg);
434
443
  --ms-badge-counter-remove-bg: var(--ms-text-color-3);
435
- --ms-badge-counter-remove-color: var(--ms-text-on-accent);
436
- --ms-badge-counter-remove-bg-hover: var(--ms-badge-counter-remove-background-hover);
444
+ --ms-badge-counter-remove-color: var(--ms-text-color-on-accent);
445
+ --ms-badge-counter-remove-bg-hover: var(--ms-badge-counter-remove-bg-hover);
437
446
 
438
447
  /* ==========================================================================
439
448
  "+X MORE" BADGE
440
449
  ========================================================================== */
441
450
  --ms-more-badge-bg: var(--ms-accent-color-light);
442
- --ms-more-badge-hover-bg: var(--ms-badge-background-hover);
451
+ --ms-more-badge-hover-bg: var(--ms-badge-bg-hover);
443
452
  --ms-more-badge-active-bg: var(--ms-accent-color-light-hover);
444
453
 
445
454
  /* ==========================================================================
@@ -452,7 +461,7 @@
452
461
 
453
462
  /* Count Badge Wrapper */
454
463
  --ms-counter-wrapper-bg: transparent;
455
- --ms-counter-wrapper-border: 1px solid var(--ms-border-color);
464
+ --ms-counter-wrapper-border: var(--ms-border);
456
465
  --ms-counter-wrapper-border-radius: var(--ms-border-radius-sm);
457
466
  --ms-counter-wrapper-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
458
467
  --ms-counter-wrapper-gap: calc(0.4 * var(--ms-rem));
@@ -495,14 +504,14 @@
495
504
  --ms-z-index-popover: 10000;
496
505
  --ms-selected-popover-width: calc(32 * var(--ms-rem));
497
506
  --ms-selected-popover-max-height: calc(32 * var(--ms-rem));
498
- --ms-selected-popover-border: 1px solid var(--ms-border-color);
507
+ --ms-selected-popover-border: var(--ms-border);
499
508
  --ms-selected-popover-border-radius: var(--ms-border-radius-lg);
500
509
  --ms-selected-popover-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
501
510
 
502
511
  /* Popover Header */
503
512
  --ms-selected-popover-header-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
504
513
  --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
505
- --ms-selected-popover-header-border-bottom: 1px solid var(--ms-border-color);
514
+ --ms-selected-popover-header-border-bottom: var(--ms-border);
506
515
  --ms-selected-popover-header-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
507
516
  --ms-selected-popover-header-font-weight: var(--base-font-weight-semibold, 600);
508
517
  --ms-selected-popover-header-color: var(--ms-text-color-1);