@keenmate/web-multiselect 1.7.0 → 1.8.1
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.
- package/README.md +25 -25
- package/dist/multiselect.js +271 -271
- package/dist/multiselect.umd.js +4 -4
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/css/_badges-display.css +11 -11
- package/src/css/_input-dropdown.css +8 -8
- package/src/css/_options.css +9 -8
- package/src/css/_tooltips-popover.css +5 -5
- package/src/css/_variables.css +51 -50
package/src/css/_variables.css
CHANGED
|
@@ -56,15 +56,15 @@
|
|
|
56
56
|
--ms-text-color-2: var(--base-text-color-2, #353b47);
|
|
57
57
|
--ms-text-color-3: var(--base-text-color-3, #6b7280);
|
|
58
58
|
--ms-text-color-4: var(--base-text-color-4, #a0a3a9);
|
|
59
|
-
--ms-text-on-accent: var(--base-text-on-accent, #ffffff);
|
|
59
|
+
--ms-text-color-on-accent: var(--base-text-color-on-accent, #ffffff);
|
|
60
60
|
|
|
61
61
|
/* Legacy aliases (for backward compatibility) */
|
|
62
62
|
--ms-text-primary: var(--ms-text-color-1);
|
|
63
63
|
--ms-text-secondary: var(--ms-text-color-3);
|
|
64
64
|
|
|
65
65
|
/* Background Colors */
|
|
66
|
-
--ms-primary-bg: var(--base-
|
|
67
|
-
--ms-primary-bg-hover: var(--base-
|
|
66
|
+
--ms-primary-bg: var(--base-main-bg, #f3f4f6);
|
|
67
|
+
--ms-primary-bg-hover: var(--base-hover-bg, #e5e7eb);
|
|
68
68
|
|
|
69
69
|
/* Border Base Variables */
|
|
70
70
|
--ms-border-color: var(--base-border-color, #e5e7eb);
|
|
@@ -74,44 +74,44 @@
|
|
|
74
74
|
SEMANTIC VARIABLES - Component-Specific Theming
|
|
75
75
|
==========================================================================
|
|
76
76
|
Pattern: --ms-{component}-{property}-{state}
|
|
77
|
-
Example: --ms-input-
|
|
77
|
+
Example: --ms-input-bg, --ms-option-text-color-hover */
|
|
78
78
|
|
|
79
79
|
/* Input Component Semantic Variables */
|
|
80
|
-
--ms-input-
|
|
80
|
+
--ms-input-bg: var(--base-input-bg, #ffffff);
|
|
81
81
|
--ms-input-color: var(--base-input-color, var(--ms-text-color-1));
|
|
82
82
|
--ms-input-border: var(--base-input-border, 1px solid var(--ms-border-color));
|
|
83
83
|
--ms-input-border-hover: var(--base-input-border-hover, 1px solid var(--ms-accent-color));
|
|
84
84
|
--ms-input-border-focus: var(--base-input-border-focus, 1px solid var(--ms-accent-color));
|
|
85
85
|
--ms-input-placeholder-color: var(--base-input-placeholder-color, var(--ms-text-color-4));
|
|
86
|
-
--ms-input-
|
|
86
|
+
--ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
|
|
87
87
|
|
|
88
88
|
/* Toggle Icon Semantic Variables */
|
|
89
89
|
--ms-toggle-icon-color: var(--ms-text-color-3);
|
|
90
90
|
--ms-toggle-icon-color-open: var(--ms-text-color-3);
|
|
91
91
|
|
|
92
92
|
/* Counter Badge (in Input) Semantic Variables */
|
|
93
|
-
--ms-counter-badge-
|
|
94
|
-
--ms-counter-badge-
|
|
95
|
-
--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);
|
|
96
96
|
|
|
97
97
|
/* Floating Hint Semantic Variables */
|
|
98
|
-
--ms-hint-
|
|
98
|
+
--ms-hint-bg: var(--base-main-bg, #ffffff);
|
|
99
99
|
--ms-hint-color: var(--ms-text-color-4);
|
|
100
100
|
--ms-hint-border-color: var(--ms-border-color);
|
|
101
101
|
|
|
102
102
|
/* Dropdown Semantic Variables */
|
|
103
|
-
--ms-dropdown-
|
|
103
|
+
--ms-dropdown-bg: var(--base-dropdown-bg, #ffffff);
|
|
104
104
|
--ms-dropdown-text-color: var(--ms-text-color-1);
|
|
105
105
|
--ms-dropdown-border-color: var(--ms-border-color);
|
|
106
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));
|
|
107
107
|
|
|
108
108
|
/* Dropdown Actions Semantic Variables */
|
|
109
|
-
--ms-actions-
|
|
109
|
+
--ms-actions-bg: var(--base-main-bg, #ffffff);
|
|
110
110
|
--ms-actions-border-color: var(--ms-border-color);
|
|
111
111
|
|
|
112
112
|
/* Action Button Semantic Variables */
|
|
113
|
-
--ms-action-button-
|
|
114
|
-
--ms-action-button-
|
|
113
|
+
--ms-action-button-bg: transparent;
|
|
114
|
+
--ms-action-button-bg-hover: var(--ms-primary-bg);
|
|
115
115
|
--ms-action-button-border-color: var(--ms-border-color);
|
|
116
116
|
--ms-action-button-border-color-hover: var(--ms-accent-color);
|
|
117
117
|
--ms-action-button-color: var(--ms-text-color-1);
|
|
@@ -122,21 +122,21 @@
|
|
|
122
122
|
|
|
123
123
|
/* Option Semantic Variables */
|
|
124
124
|
--ms-option-text-color: var(--ms-text-color-1);
|
|
125
|
-
--ms-option-
|
|
126
|
-
--ms-option-
|
|
125
|
+
--ms-option-bg: transparent;
|
|
126
|
+
--ms-option-bg-hover: var(--ms-primary-bg);
|
|
127
127
|
--ms-option-color-hover: inherit;
|
|
128
|
-
--ms-option-
|
|
128
|
+
--ms-option-bg-focused: var(--ms-primary-bg);
|
|
129
129
|
--ms-option-color-focused: inherit;
|
|
130
130
|
--ms-option-outline-color-focused: var(--ms-accent-color);
|
|
131
|
-
--ms-option-
|
|
132
|
-
--ms-option-
|
|
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);
|
|
133
133
|
--ms-option-color-matched: inherit;
|
|
134
134
|
--ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
|
|
135
135
|
|
|
136
136
|
/* Option Content Semantic Variables */
|
|
137
137
|
--ms-option-title-color: var(--ms-text-color-1);
|
|
138
138
|
--ms-option-subtitle-color: var(--ms-text-color-3);
|
|
139
|
-
--ms-option-mark-
|
|
139
|
+
--ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
|
|
140
140
|
--ms-option-mark-color: inherit;
|
|
141
141
|
|
|
142
142
|
/* Empty/Loading State Semantic Variables */
|
|
@@ -144,52 +144,52 @@
|
|
|
144
144
|
--ms-loading-color: var(--ms-text-color-3);
|
|
145
145
|
|
|
146
146
|
/* Badge Semantic Variables */
|
|
147
|
-
--ms-badge-
|
|
148
|
-
--ms-badge-
|
|
149
|
-
--ms-badge-
|
|
147
|
+
--ms-badge-bg: var(--ms-accent-color-light);
|
|
148
|
+
--ms-badge-bg-hover: var(--base-hover-bg, var(--ms-input-bg));
|
|
149
|
+
--ms-badge-bg-active: var(--ms-accent-color-light-hover);
|
|
150
150
|
|
|
151
151
|
/* Badge Text Semantic Variables */
|
|
152
|
-
--ms-badge-text-
|
|
152
|
+
--ms-badge-text-bg: var(--ms-accent-color-light);
|
|
153
153
|
--ms-badge-text-color: var(--ms-accent-color);
|
|
154
|
-
--ms-badge-text-
|
|
154
|
+
--ms-badge-text-bg-hover: var(--base-hover-bg, var(--ms-input-bg));
|
|
155
155
|
--ms-badge-text-color-hover: var(--ms-badge-text-color);
|
|
156
156
|
|
|
157
157
|
/* Badge Remove Button Semantic Variables */
|
|
158
|
-
--ms-badge-remove-
|
|
159
|
-
--ms-badge-remove-
|
|
160
|
-
--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);
|
|
161
161
|
|
|
162
162
|
/* Badge Counter Variant Semantic Variables */
|
|
163
163
|
--ms-badge-counter-border-color: var(--ms-border-color);
|
|
164
|
-
--ms-badge-counter-text-
|
|
164
|
+
--ms-badge-counter-text-bg: var(--ms-primary-bg);
|
|
165
165
|
--ms-badge-counter-text-color: var(--ms-text-color-3);
|
|
166
|
-
--ms-badge-counter-remove-
|
|
167
|
-
--ms-badge-counter-remove-
|
|
168
|
-
--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);
|
|
169
169
|
|
|
170
170
|
/* Count Display Semantic Variables */
|
|
171
|
-
--ms-counter-wrapper-
|
|
172
|
-
--ms-counter-wrapper-
|
|
171
|
+
--ms-counter-wrapper-bg: transparent;
|
|
172
|
+
--ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
|
|
173
173
|
--ms-counter-wrapper-border-color: var(--ms-border-color);
|
|
174
174
|
--ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
|
|
175
175
|
--ms-count-text-color: var(--ms-text-color-1);
|
|
176
|
-
--ms-count-clear-
|
|
177
|
-
--ms-count-clear-
|
|
176
|
+
--ms-count-clear-bg: transparent;
|
|
177
|
+
--ms-count-clear-bg-hover: var(--ms-accent-color);
|
|
178
178
|
--ms-count-clear-color: var(--ms-text-color-3);
|
|
179
179
|
--ms-count-clear-color-hover: var(--ms-accent-color);
|
|
180
180
|
|
|
181
181
|
/* Tooltip Semantic Variables */
|
|
182
|
-
--ms-tooltip-
|
|
182
|
+
--ms-tooltip-bg: var(--base-tooltip-bg, #333333);
|
|
183
183
|
--ms-tooltip-text-color: var(--base-tooltip-text-color, #ffffff);
|
|
184
184
|
|
|
185
185
|
/* Selected Popover Semantic Variables */
|
|
186
|
-
--ms-selected-popover-
|
|
186
|
+
--ms-selected-popover-bg: var(--base-dropdown-bg, #ffffff);
|
|
187
187
|
--ms-selected-popover-border-color: var(--ms-border-color);
|
|
188
|
-
--ms-selected-popover-header-
|
|
188
|
+
--ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
|
|
189
189
|
--ms-selected-popover-header-color: var(--ms-text-color-1);
|
|
190
190
|
--ms-selected-popover-header-border-color: var(--ms-border-color);
|
|
191
|
-
--ms-selected-popover-close-
|
|
192
|
-
--ms-selected-popover-close-
|
|
191
|
+
--ms-selected-popover-close-bg: transparent;
|
|
192
|
+
--ms-selected-popover-close-bg-hover: var(--ms-accent-color);
|
|
193
193
|
--ms-selected-popover-close-color: var(--ms-text-color-3);
|
|
194
194
|
--ms-selected-popover-close-color-hover: var(--ms-accent-color);
|
|
195
195
|
|
|
@@ -249,7 +249,7 @@
|
|
|
249
249
|
--ms-counter-offset: calc(3.2 * var(--ms-rem));
|
|
250
250
|
--ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem));
|
|
251
251
|
--ms-counter-bg: var(--ms-accent-color);
|
|
252
|
-
--ms-counter-color: var(--ms-text-on-accent);
|
|
252
|
+
--ms-counter-color: var(--ms-text-color-on-accent);
|
|
253
253
|
--ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
|
|
254
254
|
--ms-counter-font-weight: var(--base-font-weight-semibold, 600);
|
|
255
255
|
--ms-counter-border-radius: var(--ms-border-radius-sm);
|
|
@@ -332,6 +332,7 @@
|
|
|
332
332
|
--ms-option-bg-matched-hover: color-mix(in srgb, var(--ms-accent-color) 12%, transparent);
|
|
333
333
|
--ms-option-bg-selected-focused: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
|
|
334
334
|
--ms-option-bg-selected-matched: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
|
|
335
|
+
--ms-option-disabled-bg: var(--base-disabled-bg, transparent);
|
|
335
336
|
--ms-option-bg-disabled-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
|
|
336
337
|
|
|
337
338
|
--ms-disabled-opacity: 0.5;
|
|
@@ -366,12 +367,12 @@
|
|
|
366
367
|
--ms-checkbox-align: center;
|
|
367
368
|
|
|
368
369
|
/* Checkbox Styling */
|
|
369
|
-
--ms-checkbox-bg: var(--ms-input-
|
|
370
|
+
--ms-checkbox-bg: var(--ms-input-bg);
|
|
370
371
|
--ms-checkbox-border: var(--ms-border);
|
|
371
372
|
--ms-checkbox-border-radius: calc(0.3 * var(--ms-rem));
|
|
372
373
|
--ms-checkbox-checked-bg: var(--ms-accent-color);
|
|
373
374
|
--ms-checkbox-checked-border: 1px solid var(--ms-accent-color);
|
|
374
|
-
--ms-checkbox-checkmark-color: var(--ms-text-on-accent);
|
|
375
|
+
--ms-checkbox-checkmark-color: var(--ms-text-color-on-accent);
|
|
375
376
|
--ms-checkbox-hover-border-color: var(--ms-accent-color);
|
|
376
377
|
--ms-checkbox-disabled-bg: var(--ms-primary-bg);
|
|
377
378
|
--ms-checkbox-disabled-border: var(--ms-border);
|
|
@@ -411,7 +412,7 @@
|
|
|
411
412
|
--ms-badge-font-weight: var(--base-font-weight-semibold, 600);
|
|
412
413
|
--ms-badge-border-radius: var(--ms-border-radius-sm);
|
|
413
414
|
--ms-badge-bg: var(--ms-accent-color-light);
|
|
414
|
-
--ms-badge-bg-hover: var(--ms-badge-
|
|
415
|
+
--ms-badge-bg-hover: var(--ms-badge-bg-hover);
|
|
415
416
|
--ms-badge-bg-active: var(--ms-accent-color-light-hover);
|
|
416
417
|
--ms-order-first: -1;
|
|
417
418
|
|
|
@@ -427,7 +428,7 @@
|
|
|
427
428
|
/* Badge Remove Button */
|
|
428
429
|
--ms-badge-remove-width: calc(2.7 * var(--ms-rem));
|
|
429
430
|
--ms-badge-remove-bg: var(--ms-accent-color);
|
|
430
|
-
--ms-badge-remove-color: var(--ms-text-on-accent);
|
|
431
|
+
--ms-badge-remove-color: var(--ms-text-color-on-accent);
|
|
431
432
|
--ms-badge-remove-border: none;
|
|
432
433
|
--ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
|
|
433
434
|
--ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
|
|
@@ -439,16 +440,16 @@
|
|
|
439
440
|
--ms-badge-counter-border: var(--ms-border);
|
|
440
441
|
--ms-badge-counter-border-radius: var(--ms-border-radius-sm);
|
|
441
442
|
--ms-badge-counter-text-color: var(--ms-text-color-3);
|
|
442
|
-
--ms-badge-counter-text-bg: var(--ms-badge-counter-text-
|
|
443
|
+
--ms-badge-counter-text-bg: var(--ms-badge-counter-text-bg);
|
|
443
444
|
--ms-badge-counter-remove-bg: var(--ms-text-color-3);
|
|
444
|
-
--ms-badge-counter-remove-color: var(--ms-text-on-accent);
|
|
445
|
-
--ms-badge-counter-remove-bg-hover: var(--ms-badge-counter-remove-
|
|
445
|
+
--ms-badge-counter-remove-color: var(--ms-text-color-on-accent);
|
|
446
|
+
--ms-badge-counter-remove-bg-hover: var(--ms-badge-counter-remove-bg-hover);
|
|
446
447
|
|
|
447
448
|
/* ==========================================================================
|
|
448
449
|
"+X MORE" BADGE
|
|
449
450
|
========================================================================== */
|
|
450
451
|
--ms-more-badge-bg: var(--ms-accent-color-light);
|
|
451
|
-
--ms-more-badge-hover-bg: var(--ms-badge-
|
|
452
|
+
--ms-more-badge-hover-bg: var(--ms-badge-bg-hover);
|
|
452
453
|
--ms-more-badge-active-bg: var(--ms-accent-color-light-hover);
|
|
453
454
|
|
|
454
455
|
/* ==========================================================================
|