@keenmate/web-multiselect 1.7.0 → 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.
- 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 +8 -8
- package/src/css/_tooltips-popover.css +5 -5
- package/src/css/_variables.css +48 -48
package/src/css/_variables.css
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
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);
|
|
@@ -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-hint-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-actions-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-badge-bg-hover, 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-badge-bg-hover, 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-popover-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);
|
|
@@ -366,12 +366,12 @@
|
|
|
366
366
|
--ms-checkbox-align: center;
|
|
367
367
|
|
|
368
368
|
/* Checkbox Styling */
|
|
369
|
-
--ms-checkbox-bg: var(--ms-input-
|
|
369
|
+
--ms-checkbox-bg: var(--ms-input-bg);
|
|
370
370
|
--ms-checkbox-border: var(--ms-border);
|
|
371
371
|
--ms-checkbox-border-radius: calc(0.3 * var(--ms-rem));
|
|
372
372
|
--ms-checkbox-checked-bg: var(--ms-accent-color);
|
|
373
373
|
--ms-checkbox-checked-border: 1px solid var(--ms-accent-color);
|
|
374
|
-
--ms-checkbox-checkmark-color: var(--ms-text-on-accent);
|
|
374
|
+
--ms-checkbox-checkmark-color: var(--ms-text-color-on-accent);
|
|
375
375
|
--ms-checkbox-hover-border-color: var(--ms-accent-color);
|
|
376
376
|
--ms-checkbox-disabled-bg: var(--ms-primary-bg);
|
|
377
377
|
--ms-checkbox-disabled-border: var(--ms-border);
|
|
@@ -411,7 +411,7 @@
|
|
|
411
411
|
--ms-badge-font-weight: var(--base-font-weight-semibold, 600);
|
|
412
412
|
--ms-badge-border-radius: var(--ms-border-radius-sm);
|
|
413
413
|
--ms-badge-bg: var(--ms-accent-color-light);
|
|
414
|
-
--ms-badge-bg-hover: var(--ms-badge-
|
|
414
|
+
--ms-badge-bg-hover: var(--ms-badge-bg-hover);
|
|
415
415
|
--ms-badge-bg-active: var(--ms-accent-color-light-hover);
|
|
416
416
|
--ms-order-first: -1;
|
|
417
417
|
|
|
@@ -427,7 +427,7 @@
|
|
|
427
427
|
/* Badge Remove Button */
|
|
428
428
|
--ms-badge-remove-width: calc(2.7 * var(--ms-rem));
|
|
429
429
|
--ms-badge-remove-bg: var(--ms-accent-color);
|
|
430
|
-
--ms-badge-remove-color: var(--ms-text-on-accent);
|
|
430
|
+
--ms-badge-remove-color: var(--ms-text-color-on-accent);
|
|
431
431
|
--ms-badge-remove-border: none;
|
|
432
432
|
--ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
|
|
433
433
|
--ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
|
|
@@ -439,16 +439,16 @@
|
|
|
439
439
|
--ms-badge-counter-border: var(--ms-border);
|
|
440
440
|
--ms-badge-counter-border-radius: var(--ms-border-radius-sm);
|
|
441
441
|
--ms-badge-counter-text-color: var(--ms-text-color-3);
|
|
442
|
-
--ms-badge-counter-text-bg: var(--ms-badge-counter-text-
|
|
442
|
+
--ms-badge-counter-text-bg: var(--ms-badge-counter-text-bg);
|
|
443
443
|
--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-
|
|
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);
|
|
446
446
|
|
|
447
447
|
/* ==========================================================================
|
|
448
448
|
"+X MORE" BADGE
|
|
449
449
|
========================================================================== */
|
|
450
450
|
--ms-more-badge-bg: var(--ms-accent-color-light);
|
|
451
|
-
--ms-more-badge-hover-bg: var(--ms-badge-
|
|
451
|
+
--ms-more-badge-hover-bg: var(--ms-badge-bg-hover);
|
|
452
452
|
--ms-more-badge-active-bg: var(--ms-accent-color-light-hover);
|
|
453
453
|
|
|
454
454
|
/* ==========================================================================
|