@keenmate/web-multiselect 1.3.0 → 1.5.0-rc01

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 (15) hide show
  1. package/README.md +97 -4
  2. package/dist/multiselect.js +838 -860
  3. package/dist/multiselect.umd.js +10 -10
  4. package/dist/style.css +1 -1
  5. package/package.json +2 -2
  6. package/src/scss/_badges-display.scss +81 -64
  7. package/src/scss/_base.scss +3 -2
  8. package/src/scss/_css-variables.scss +273 -261
  9. package/src/scss/_debug.scss +23 -23
  10. package/src/scss/_input-dropdown.scss +76 -69
  11. package/src/scss/_modifiers.scss +6 -65
  12. package/src/scss/_options.scss +126 -70
  13. package/src/scss/_rtl.scss +13 -11
  14. package/src/scss/_tooltips-popover.scss +45 -45
  15. package/src/scss/_variables.scss +302 -304
package/src/scss/_options.scss CHANGED
@@ -11,27 +11,27 @@
11
11
 
12
12
  // Options container
13
13
  .ms__options {
14
- padding: var(--ms-options-padding, $ml-options-padding);
14
+ padding: var(--ms-options-padding, $ms-options-padding);
15
15
 
16
16
  // Scrollbar styling
17
17
  scrollbar-width: thin; // Firefox
18
- scrollbar-color: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
18
+ scrollbar-color: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
19
19
 
20
20
  &::-webkit-scrollbar {
21
- width: var(--ms-scrollbar-width, $ml-scrollbar-width);
21
+ width: var(--ms-scrollbar-width, $ms-scrollbar-width);
22
22
  }
23
23
 
24
24
  &::-webkit-scrollbar-track {
25
- background: var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
25
+ background: var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
26
26
  }
27
27
 
28
28
  &::-webkit-scrollbar-thumb {
29
- background: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg);
30
- border-radius: var(--ms-scrollbar-thumb-border-radius, $ml-scrollbar-thumb-border-radius);
29
+ background: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg);
30
+ border-radius: var(--ms-scrollbar-thumb-border-radius, $ms-scrollbar-thumb-border-radius);
31
31
  }
32
32
 
33
33
  &::-webkit-scrollbar-thumb:hover {
34
- background: var(--ms-scrollbar-thumb-bg-hover, $ml-scrollbar-thumb-bg-hover);
34
+ background: var(--ms-scrollbar-thumb-bg-hover, $ms-scrollbar-thumb-bg-hover);
35
35
  }
36
36
  }
37
37
 
@@ -55,20 +55,20 @@
55
55
  // Group
56
56
  .ms__group {
57
57
  & + & {
58
- border-top: var(--ms-group-border-top, $ml-group-border-top);
59
- margin-top: var(--ms-group-margin-top, $ml-group-margin-top);
60
- padding-top: var(--ms-group-padding-top, $ml-group-padding-top);
58
+ border-top: var(--ms-group-border-top, $ms-group-border-top);
59
+ margin-top: var(--ms-group-margin-top, $ms-group-margin-top);
60
+ padding-top: var(--ms-group-padding-top, $ms-group-padding-top);
61
61
  }
62
62
  }
63
63
 
64
64
  // Group label
65
65
  .ms__group-label {
66
- padding: var(--ms-group-label-padding, $ml-group-label-padding);
67
- font-size: var(--ms-group-label-font-size, $ml-group-label-font-size);
68
- font-weight: var(--ms-group-label-font-weight, $ml-group-label-font-weight);
69
- color: var(--ms-group-label-color, $ml-group-label-color);
70
- text-transform: var(--ms-group-label-transform, $ml-group-label-transform);
71
- letter-spacing: var(--ms-group-label-letter-spacing, $ml-group-label-letter-spacing);
66
+ padding: var(--ms-group-label-padding, $ms-group-label-padding);
67
+ font-size: var(--ms-group-label-font-size, $ms-group-label-font-size);
68
+ font-weight: var(--ms-group-label-font-weight, $ms-group-label-font-weight);
69
+ color: var(--ms-group-label-color, $ms-group-label-color);
70
+ text-transform: var(--ms-group-label-transform, $ms-group-label-transform);
71
+ letter-spacing: var(--ms-group-label-letter-spacing, $ms-group-label-letter-spacing);
72
72
  }
73
73
 
74
74
  // ==============================================================================
@@ -79,50 +79,87 @@
79
79
  .ms__option {
80
80
  display: flex;
81
81
  align-items: var(--ms-checkbox-align, flex-start); // Support checkbox alignment
82
- gap: var(--ms-option-gap, $ml-option-gap);
83
- padding: var(--ms-option-padding, $ml-option-padding);
84
- color: var(--ms-option-text-color, $ml-option-color);
85
- background: var(--ms-option-background, $ml-option-bg);
82
+ gap: var(--ms-option-gap, $ms-option-gap);
83
+ padding: var(--ms-option-padding, $ms-option-padding);
84
+ color: var(--ms-option-text-color, $ms-option-color);
85
+ background: var(--ms-option-background, $ms-option-bg);
86
86
  cursor: pointer;
87
- transition: background-color var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
88
87
 
89
88
  &:hover {
90
- background: var(--ms-option-background-hover, $ml-option-bg-hover);
89
+ background: var(--ms-option-background-hover, $ms-option-bg-hover);
91
90
  color: var(--ms-option-color-hover, inherit);
92
91
  }
93
92
 
94
93
  &--focused {
95
- background: var(--ms-option-background-focused, $ml-option-bg-focused);
94
+ background: var(--ms-option-background-focused, $ms-option-bg-focused);
96
95
  color: var(--ms-option-color-focused, inherit);
97
- outline: var(--ms-option-outline-focused, $ml-option-outline-focused);
98
- outline-offset: var(--ms-option-focus-outline-offset, $ml-option-focus-outline-offset);
96
+ outline: var(--ms-option-outline-focused, $ms-option-outline-focused);
97
+ outline-offset: var(--ms-option-focus-outline-offset, $ms-option-focus-outline-offset);
99
98
  }
100
99
 
101
100
  &--matched {
102
- background: var(--ms-option-background-matched, $ml-option-bg-matched);
101
+ background: var(--ms-option-background-matched, $ms-option-bg-matched);
103
102
  color: var(--ms-option-color-matched, inherit);
104
- border-left: var(--ms-option-border-matched, $ml-option-border-matched);
103
+ border-left: var(--ms-option-border-matched, $ms-option-border-matched);
105
104
  }
106
105
 
107
106
  &--selected {
108
- background: var(--ms-option-background-selected, $ml-option-bg-selected);
107
+ background: var(--ms-option-background-selected, $ms-option-bg-selected);
109
108
  color: var(--ms-option-color-selected, inherit);
110
109
 
111
110
  &:hover {
112
- background: var(--ms-option-bg-selected-hover, var(--ms-option-background-selected, $ml-option-bg-selected));
111
+ background: var(--ms-option-bg-selected-hover, var(--ms-option-background-selected, $ms-option-bg-selected));
113
112
  color: var(--ms-option-color-selected-hover, var(--ms-option-color-selected, inherit));
114
113
  }
115
114
  }
116
115
 
117
116
  &--disabled {
118
- opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
117
+ opacity: var(--ms-disabled-opacity, $ms-disabled-opacity);
119
118
  cursor: not-allowed;
120
119
 
121
120
  &:hover {
122
- background: var(--ms-option-background, $ml-option-bg);
121
+ background: var(--ms-option-background, $ms-option-bg);
123
122
  }
124
123
  }
125
124
 
125
+ // Focused + Hover
126
+ &--focused:hover {
127
+ background: var(--ms-option-bg-focused-hover, $ms-option-bg-focused-hover);
128
+ color: var(--ms-option-color-focused-hover, var(--ms-option-color-focused, var(--ms-option-text-color, $ms-option-color)));
129
+ }
130
+
131
+ // Matched + Hover
132
+ &--matched:hover {
133
+ background: var(--ms-option-bg-matched-hover, $ms-option-bg-matched-hover);
134
+ color: var(--ms-option-color-matched-hover, var(--ms-option-color-matched, var(--ms-option-text-color, $ms-option-color)));
135
+ }
136
+
137
+ // Selected + Focused
138
+ &--selected#{&}--focused {
139
+ background: var(--ms-option-bg-selected-focused, $ms-option-bg-selected-focused);
140
+ color: var(--ms-option-color-selected-focused, var(--ms-option-color-selected, var(--ms-option-text-color, $ms-option-color)));
141
+ outline: var(--ms-option-outline-focused, $ms-option-outline-focused);
142
+ outline-offset: var(--ms-option-focus-outline-offset, $ms-option-focus-outline-offset);
143
+ }
144
+
145
+ // Selected + Matched
146
+ &--selected#{&}--matched {
147
+ background: var(--ms-option-bg-selected-matched, $ms-option-bg-selected-matched);
148
+ color: var(--ms-option-color-selected-matched, var(--ms-option-color-selected, var(--ms-option-text-color, $ms-option-color)));
149
+ border-left: var(--ms-option-border-matched, $ms-option-border-matched);
150
+ }
151
+
152
+ // Disabled + Selected
153
+ &--disabled#{&}--selected {
154
+ background: var(--ms-option-bg-disabled-selected, $ms-option-bg-disabled-selected);
155
+ color: var(--ms-option-color-disabled-selected, var(--ms-option-color-selected, var(--ms-option-text-color, $ms-option-color)));
156
+ }
157
+
158
+ // Disabled + Focused (prevents focus outline on disabled items)
159
+ &--disabled#{&}--focused {
160
+ outline: none;
161
+ }
162
+
126
163
  // Checkbox alignment variants
127
164
  &[data-checkbox-align="center"] {
128
165
  --ms-checkbox-align: center;
@@ -146,20 +183,20 @@
146
183
  -moz-appearance: none;
147
184
  flex-shrink: 0;
148
185
  position: relative;
149
- margin-top: var(--ms-checkbox-margin-top, $ml-checkbox-margin-top);
150
- margin-right: var(--ms-checkbox-margin-right, $ml-checkbox-margin-right);
151
- margin-bottom: var(--ms-checkbox-margin-bottom, $ml-checkbox-margin-bottom);
152
- margin-left: var(--ms-checkbox-margin-left, $ml-checkbox-margin-left);
153
- width: var(--ms-checkbox-size, $ml-checkbox-size);
154
- height: var(--ms-checkbox-size, $ml-checkbox-size);
155
- transform: scale(var(--ms-checkbox-scale, $ml-checkbox-scale));
186
+ margin-top: var(--ms-checkbox-margin-top, $ms-checkbox-margin-top);
187
+ margin-right: var(--ms-checkbox-margin-right, $ms-checkbox-margin-right);
188
+ margin-bottom: var(--ms-checkbox-margin-bottom, $ms-checkbox-margin-bottom);
189
+ margin-left: var(--ms-checkbox-margin-left, $ms-checkbox-margin-left);
190
+ width: var(--ms-checkbox-size, $ms-checkbox-size);
191
+ height: var(--ms-checkbox-size, $ms-checkbox-size);
192
+ transform: scale(var(--ms-checkbox-scale, $ms-checkbox-scale));
156
193
  transform-origin: top left;
157
194
  cursor: pointer;
158
195
 
159
196
  // Custom checkbox appearance
160
- background: var(--ms-checkbox-bg, $ml-checkbox-bg);
161
- border: var(--ms-checkbox-border, $ml-checkbox-border);
162
- border-radius: var(--ms-checkbox-border-radius, $ml-checkbox-border-radius);
197
+ background: var(--ms-checkbox-bg, $ms-checkbox-bg);
198
+ border: var(--ms-checkbox-border, $ms-checkbox-border);
199
+ border-radius: var(--ms-checkbox-border-radius, $ms-checkbox-border-radius);
163
200
  transition: background-color 0.15s ease, border-color 0.15s ease;
164
201
 
165
202
  // Checkmark using ::after pseudo-element
@@ -174,40 +211,46 @@
174
211
  height: 55%;
175
212
  transform: translate(-50%, -50%) rotate(45deg);
176
213
  // Checkmark shape (right and bottom borders form the check)
177
- border: solid var(--ms-checkbox-checkmark-color, $ml-checkbox-checkmark-color);
214
+ border: solid var(--ms-checkbox-checkmark-color, $ms-checkbox-checkmark-color);
178
215
  border-width: 0 2px 2px 0;
179
216
  }
180
217
 
181
218
  // Hover state
182
219
  &:hover:not(:disabled) {
183
- border-color: var(--ms-checkbox-hover-border-color, $ml-checkbox-hover-border-color);
220
+ border-color: var(--ms-checkbox-hover-border-color, $ms-checkbox-hover-border-color);
184
221
  }
185
222
 
186
223
  // Checked state
187
224
  &:checked {
188
- background: var(--ms-checkbox-checked-bg, $ml-checkbox-checked-bg);
189
- border: var(--ms-checkbox-checked-border, $ml-checkbox-checked-border);
225
+ background: var(--ms-checkbox-checked-bg, $ms-checkbox-checked-bg);
226
+ border: var(--ms-checkbox-checked-border, $ms-checkbox-checked-border);
190
227
 
191
228
  &::after {
192
229
  display: block;
193
230
  }
194
231
  }
195
232
 
233
+ // Checked + Hover
234
+ &:checked:hover:not(:disabled) {
235
+ background: var(--ms-checkbox-checked-bg-hover, $ms-checkbox-checked-bg-hover);
236
+ border-color: var(--ms-checkbox-checked-border-color-hover, $ms-checkbox-checked-border-color-hover);
237
+ }
238
+
196
239
  // Focus state (accessibility)
197
240
  &:focus-visible {
198
- outline: 2px solid var(--ms-checkbox-checked-bg, $ml-checkbox-checked-bg);
241
+ outline: 2px solid var(--ms-checkbox-checked-bg, $ms-checkbox-checked-bg);
199
242
  outline-offset: 2px;
200
243
  }
201
244
 
202
245
  // Disabled state
203
246
  &:disabled {
204
247
  cursor: not-allowed;
205
- background: var(--ms-checkbox-disabled-bg, $ml-checkbox-disabled-bg);
206
- border: var(--ms-checkbox-disabled-border, $ml-checkbox-disabled-border);
248
+ background: var(--ms-checkbox-disabled-bg, $ms-checkbox-disabled-bg);
249
+ border: var(--ms-checkbox-disabled-border, $ms-checkbox-disabled-border);
207
250
  opacity: 0.6;
208
251
 
209
252
  &:checked {
210
- background: var(--ms-checkbox-disabled-bg, $ml-checkbox-disabled-bg);
253
+ background: var(--ms-checkbox-disabled-bg, $ms-checkbox-disabled-bg);
211
254
  }
212
255
  }
213
256
 
@@ -225,19 +268,19 @@
225
268
  flex: 1;
226
269
  display: flex;
227
270
  align-items: flex-start;
228
- gap: var(--ms-option-content-gap, $ml-option-content-gap);
271
+ gap: var(--ms-option-content-gap, $ms-option-content-gap);
229
272
  min-width: 0; // Allow text truncation
230
273
  }
231
274
 
232
275
  // Option icon/SVG
233
276
  .ms__option-icon {
234
277
  flex-shrink: 0;
235
- width: var(--ms-option-icon-size, $ml-option-icon-size);
236
- height: var(--ms-option-icon-size, $ml-option-icon-size);
278
+ width: var(--ms-option-icon-size, $ms-option-icon-size);
279
+ height: var(--ms-option-icon-size, $ms-option-icon-size);
237
280
  display: flex;
238
281
  align-items: center;
239
282
  justify-content: center;
240
- font-size: var(--ms-option-icon-font-size, $ml-option-icon-font-size);
283
+ font-size: var(--ms-option-icon-font-size, $ms-option-icon-font-size);
241
284
 
242
285
  svg {
243
286
  width: 100%;
@@ -254,24 +297,37 @@
254
297
 
255
298
  // Option title/main text
256
299
  .ms__option-title {
257
- font-size: var(--ms-option-title-font-size, $ml-option-title-font-size);
258
- color: var(--ms-option-title-color, $ml-option-title-color);
259
- line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
300
+ font-size: var(--ms-option-title-font-size, $ms-option-title-font-size);
301
+ color: var(--ms-option-title-color, $ms-option-title-color);
302
+ line-height: var(--ms-line-height-relaxed, $ms-line-height-relaxed);
260
303
 
261
304
  // Highlight matched text
262
305
  mark {
263
- background: var(--ms-option-mark-background, $ml-option-mark-bg);
264
- color: var(--ms-option-mark-color, $ml-option-mark-color);
265
- font-weight: var(--ms-option-mark-font-weight, $ml-option-mark-font-weight);
306
+ background: var(--ms-option-mark-background, $ms-option-mark-bg);
307
+ color: var(--ms-option-mark-color, $ms-option-mark-color);
308
+ font-weight: var(--ms-option-mark-font-weight, $ms-option-mark-font-weight);
266
309
  }
267
310
  }
268
311
 
269
312
  // Option subtitle (multiline support)
270
313
  .ms__option-subtitle {
271
- margin-top: var(--ms-option-subtitle-margin-top, $ml-option-subtitle-margin-top);
272
- font-size: var(--ms-option-subtitle-font-size, $ml-option-subtitle-font-size);
273
- color: var(--ms-option-subtitle-color, $ml-option-subtitle-color);
274
- line-height: var(--ms-option-subtitle-line-height, $ml-option-subtitle-line-height);
314
+ margin-top: var(--ms-option-subtitle-margin-top, $ms-option-subtitle-margin-top);
315
+ font-size: var(--ms-option-subtitle-font-size, $ms-option-subtitle-font-size);
316
+ color: var(--ms-option-subtitle-color, $ms-option-subtitle-color);
317
+ line-height: var(--ms-option-subtitle-line-height, $ms-option-subtitle-line-height);
318
+
319
+ // Subtitle color states (for solid background themes)
320
+ .ms__option:hover & {
321
+ color: var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color, $ms-option-subtitle-color));
322
+ }
323
+
324
+ .ms__option--selected & {
325
+ color: var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ms-option-subtitle-color));
326
+ }
327
+
328
+ .ms__option--selected:hover & {
329
+ color: var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ms-option-subtitle-color)));
330
+ }
275
331
  }
276
332
 
277
333
  // ==============================================================================
@@ -280,10 +336,10 @@
280
336
 
281
337
  // Empty state
282
338
  .ms__empty {
283
- padding: var(--ms-empty-padding, $ml-empty-padding);
339
+ padding: var(--ms-empty-padding, $ms-empty-padding);
284
340
  text-align: center;
285
- font-size: var(--ms-empty-font-size, $ml-empty-font-size);
286
- color: var(--ms-empty-color, $ml-empty-color);
341
+ font-size: var(--ms-empty-font-size, $ms-empty-font-size);
342
+ color: var(--ms-empty-color, $ms-empty-color);
287
343
  }
288
344
 
289
345
  // Loading state
@@ -292,11 +348,11 @@
292
348
  flex-direction: column;
293
349
  align-items: center;
294
350
  justify-content: center;
295
- padding: var(--ms-loader-padding, $ml-loader-padding);
296
- gap: var(--ms-loader-gap, $ml-loader-gap);
351
+ padding: var(--ms-loader-padding, $ms-loader-padding);
352
+ gap: var(--ms-loader-gap, $ms-loader-gap);
297
353
  }
298
354
 
299
355
  .ms__loading-text {
300
- font-size: var(--ms-loading-text-font-size, $ml-loading-text-font-size);
301
- color: var(--ms-loading-color, $ml-loading-text-color);
356
+ font-size: var(--ms-loading-text-font-size, $ms-loading-text-font-size);
357
+ color: var(--ms-loading-color, $ms-loading-text-color);
302
358
  }
package/src/scss/_rtl.scss CHANGED
@@ -17,19 +17,19 @@
17
17
 
18
18
  .ms__input {
19
19
  text-align: right;
20
- padding-left: var(--ms-input-padding-right, $ml-input-padding-right);
21
- padding-right: var(--ms-input-padding-h, $ml-input-padding-h);
20
+ padding-left: var(--ms-input-padding-right, $ms-input-padding-right);
21
+ padding-right: var(--ms-input-padding-h, $ms-input-padding-h);
22
22
  }
23
23
 
24
24
  // Move toggle icon to left side
25
25
  .ms__toggle {
26
- left: var(--ms-toggle-right, $ml-toggle-right) !important;
26
+ left: var(--ms-toggle-right, $ms-toggle-right) !important;
27
27
  right: auto !important;
28
28
  }
29
29
 
30
30
  // Move count badge to left side
31
31
  .ms__counter {
32
- left: var(--ms-counter-offset, $ml-counter-offset) !important;
32
+ left: var(--ms-counter-offset, $ms-counter-offset) !important;
33
33
  right: auto !important;
34
34
  }
35
35
 
@@ -48,7 +48,7 @@
48
48
  }
49
49
 
50
50
  .ms__checkbox {
51
- margin-left: var(--ms-spacing-sm, $ml-spacing-sm);
51
+ margin-left: var(--ms-spacing-sm, $ms-spacing-sm);
52
52
  margin-right: 0;
53
53
  }
54
54
 
@@ -57,7 +57,7 @@
57
57
  }
58
58
 
59
59
  .ms__option-icon {
60
- margin-left: var(--ms-spacing-xs, $ml-spacing-xs);
60
+ margin-left: var(--ms-spacing-xs, $ms-spacing-xs);
61
61
  margin-right: 0;
62
62
  }
63
63
 
@@ -74,16 +74,18 @@
74
74
  flex-direction: row-reverse;
75
75
  }
76
76
 
77
- // Remove button on left side of badge
77
+ // Remove button on left side of badge (RTL)
78
78
  .ms__badge-remove {
79
- border-radius: var(--ms-badge-remove-border-radius-rtl, $ml-badge-border-radius) 0 0 var(--ms-badge-remove-border-radius-rtl, $ml-badge-border-radius);
80
- border-left: var(--ms-badge-remove-border, $ml-badge-remove-border);
79
+ border-radius: var(--ms-badge-border-radius, $ms-badge-border-radius) 0 0 var(--ms-badge-border-radius, $ms-badge-border-radius);
80
+ border-left: var(--ms-badge-remove-border, $ms-badge-remove-border);
81
81
  border-right: none;
82
82
  }
83
83
 
84
- // Badge text rounded on right
84
+ // Badge text rounded on right (RTL)
85
85
  .ms__badge-text {
86
- border-radius: 0 var(--ms-badge-text-border-radius-rtl, $ml-badge-border-radius) var(--ms-badge-text-border-radius-rtl, $ml-badge-border-radius) 0;
86
+ border-radius: 0 var(--ms-badge-border-radius, $ms-badge-border-radius) var(--ms-badge-border-radius, $ms-badge-border-radius) 0;
87
+ border-right: var(--ms-badge-text-border, $ms-badge-text-border);
88
+ border-left: none;
87
89
  }
88
90
 
89
91
  // ==============================================================================
package/src/scss/_tooltips-popover.scss CHANGED
@@ -11,21 +11,21 @@
11
11
 
12
12
  .ms__badge-tooltip {
13
13
  position: fixed;
14
- z-index: var(--ms-tooltip-z-index, $ml-tooltip-z-index);
14
+ z-index: var(--ms-tooltip-z-index, $ms-tooltip-z-index);
15
15
  opacity: 0;
16
16
  visibility: hidden;
17
- transition: opacity var(--ms-transition-normal, $ml-transition-normal) ease, visibility var(--ms-transition-normal, $ml-transition-normal) ease;
18
-
19
- background: var(--ms-tooltip-background, $ml-tooltip-bg);
20
- color: var(--ms-tooltip-text-color, $ml-tooltip-color);
21
- padding: var(--ms-tooltip-padding, $ml-tooltip-padding);
22
- border-radius: var(--ms-tooltip-border-radius, $ml-tooltip-border-radius);
23
- font-size: var(--ms-tooltip-font-size, $ml-tooltip-font-size);
24
- line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
25
- max-width: var(--ms-tooltip-max-width, $ml-tooltip-max-width);
17
+ transition: opacity var(--ms-transition-normal, $ms-transition-normal) ease, visibility var(--ms-transition-normal, $ms-transition-normal) ease;
18
+
19
+ background: var(--ms-tooltip-background, $ms-tooltip-bg);
20
+ color: var(--ms-tooltip-text-color, $ms-tooltip-color);
21
+ padding: var(--ms-tooltip-padding, $ms-tooltip-padding);
22
+ border-radius: var(--ms-tooltip-border-radius, $ms-tooltip-border-radius);
23
+ font-size: var(--ms-tooltip-font-size, $ms-tooltip-font-size);
24
+ line-height: var(--ms-line-height-relaxed, $ms-line-height-relaxed);
25
+ max-width: var(--ms-tooltip-max-width, $ms-tooltip-max-width);
26
26
  word-wrap: break-word;
27
27
  white-space: pre-wrap;
28
- box-shadow: var(--ms-tooltip-shadow, $ml-tooltip-shadow);
28
+ box-shadow: var(--ms-tooltip-shadow, $ms-tooltip-shadow);
29
29
  pointer-events: none; // Prevent tooltip from interfering with mouse events
30
30
 
31
31
  &--visible {
@@ -42,13 +42,13 @@
42
42
  .ms__selected-popover {
43
43
  display: none;
44
44
  position: absolute;
45
- z-index: var(--ms-z-index-popover, $ml-z-index-popover);
46
- background: var(--ms-selected-popover-background, $ml-selected-popover-bg);
47
- border: var(--ms-selected-popover-border, $ml-selected-popover-border);
48
- border-radius: var(--ms-selected-popover-border-radius, $ml-selected-popover-border-radius);
49
- box-shadow: var(--ms-selected-popover-box-shadow, $ml-selected-popover-box-shadow);
50
- width: var(--ms-selected-popover-width, $ml-selected-popover-width);
51
- max-height: var(--ms-selected-popover-max-height, $ml-selected-popover-max-height);
45
+ z-index: var(--ms-z-index-popover, $ms-z-index-popover);
46
+ background: var(--ms-selected-popover-background, $ms-selected-popover-bg);
47
+ border: var(--ms-selected-popover-border, $ms-selected-popover-border);
48
+ border-radius: var(--ms-selected-popover-border-radius, $ms-selected-popover-border-radius);
49
+ box-shadow: var(--ms-selected-popover-box-shadow, $ms-selected-popover-box-shadow);
50
+ width: var(--ms-selected-popover-width, $ms-selected-popover-width);
51
+ max-height: var(--ms-selected-popover-max-height, $ms-selected-popover-max-height);
52
52
  overflow: hidden;
53
53
 
54
54
  &--visible {
@@ -68,70 +68,70 @@
68
68
  display: flex;
69
69
  align-items: center;
70
70
  justify-content: space-between;
71
- padding: var(--ms-selected-popover-header-padding, $ml-selected-popover-header-padding);
72
- background: var(--ms-selected-popover-header-background, $ml-selected-popover-header-bg);
73
- border-bottom: var(--ms-selected-popover-header-border-bottom, $ml-selected-popover-header-border-bottom);
74
- font-size: var(--ms-selected-popover-header-font-size, $ml-selected-popover-header-font-size);
75
- font-weight: var(--ms-selected-popover-header-font-weight, $ml-selected-popover-header-font-weight);
76
- color: var(--ms-selected-popover-header-color, $ml-selected-popover-header-color);
71
+ padding: var(--ms-selected-popover-header-padding, $ms-selected-popover-header-padding);
72
+ background: var(--ms-selected-popover-header-background, $ms-selected-popover-header-bg);
73
+ border-bottom: var(--ms-selected-popover-header-border-bottom, $ms-selected-popover-header-border-bottom);
74
+ font-size: var(--ms-selected-popover-header-font-size, $ms-selected-popover-header-font-size);
75
+ font-weight: var(--ms-selected-popover-header-font-weight, $ms-selected-popover-header-font-weight);
76
+ color: var(--ms-selected-popover-header-color, $ms-selected-popover-header-color);
77
77
  }
78
78
 
79
79
  .ms__selected-popover-close {
80
80
  display: flex;
81
81
  align-items: center;
82
82
  justify-content: center;
83
- width: var(--ms-popover-close-size, $ml-popover-close-size);
84
- height: var(--ms-popover-close-size, $ml-popover-close-size);
83
+ width: var(--ms-popover-close-size, $ms-popover-close-size);
84
+ height: var(--ms-popover-close-size, $ms-popover-close-size);
85
85
  padding: 0;
86
86
  border: none;
87
- background: var(--ms-selected-popover-close-background, $ml-selected-popover-close-bg);
88
- color: var(--ms-selected-popover-close-color, $ml-selected-popover-close-color);
89
- font-size: var(--ms-selected-popover-close-font-size, $ml-selected-popover-close-font-size);
90
- line-height: var(--ms-line-height-none, $ml-line-height-none);
87
+ background: var(--ms-selected-popover-close-background, $ms-selected-popover-close-bg);
88
+ color: var(--ms-selected-popover-close-color, $ms-selected-popover-close-color);
89
+ font-size: var(--ms-selected-popover-close-font-size, $ms-selected-popover-close-font-size);
90
+ line-height: var(--ms-line-height-none, $ms-line-height-none);
91
91
  cursor: pointer;
92
- border-radius: var(--ms-selected-popover-close-border-radius, $ml-selected-popover-close-border-radius);
93
- transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
92
+ border-radius: var(--ms-selected-popover-close-border-radius, $ms-selected-popover-close-border-radius);
93
+ transition: all var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
94
94
 
95
95
  &:hover {
96
- background: var(--ms-selected-popover-close-background-hover, $ml-selected-popover-close-bg-hover);
97
- color: var(--ms-selected-popover-close-color-hover, $ml-selected-popover-close-color-hover);
96
+ background: var(--ms-selected-popover-close-background-hover, $ms-selected-popover-close-bg-hover);
97
+ color: var(--ms-selected-popover-close-color-hover, $ms-selected-popover-close-color-hover);
98
98
  }
99
99
  }
100
100
 
101
101
  .ms__selected-popover-body {
102
102
  display: flex;
103
103
  flex-direction: column;
104
- gap: var(--ms-selected-popover-body-gap, $ml-selected-popover-body-gap);
105
- padding: var(--ms-selected-popover-body-padding, $ml-selected-popover-body-padding);
104
+ gap: var(--ms-selected-popover-body-gap, $ms-selected-popover-body-gap);
105
+ padding: var(--ms-selected-popover-body-padding, $ms-selected-popover-body-padding);
106
106
  overflow-y: auto;
107
- max-height: var(--ms-selected-popover-body-max-height, $ml-selected-popover-body-max-height);
107
+ max-height: var(--ms-selected-popover-body-max-height, $ms-selected-popover-body-max-height);
108
108
 
109
109
  // Scrollbar styling
110
110
  scrollbar-width: thin; // Firefox
111
- scrollbar-color: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
111
+ scrollbar-color: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
112
112
 
113
113
  &::-webkit-scrollbar {
114
- width: var(--ms-scrollbar-width, $ml-scrollbar-width);
114
+ width: var(--ms-scrollbar-width, $ms-scrollbar-width);
115
115
  }
116
116
 
117
117
  &::-webkit-scrollbar-track {
118
- background: var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
118
+ background: var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
119
119
  }
120
120
 
121
121
  &::-webkit-scrollbar-thumb {
122
- background: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg);
123
- border-radius: var(--ms-scrollbar-thumb-border-radius, $ml-scrollbar-thumb-border-radius);
122
+ background: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg);
123
+ border-radius: var(--ms-scrollbar-thumb-border-radius, $ms-scrollbar-thumb-border-radius);
124
124
  }
125
125
 
126
126
  &::-webkit-scrollbar-thumb:hover {
127
- background: var(--ms-scrollbar-thumb-bg-hover, $ml-scrollbar-thumb-bg-hover);
127
+ background: var(--ms-scrollbar-thumb-bg-hover, $ms-scrollbar-thumb-bg-hover);
128
128
  }
129
129
 
130
130
  // Badges inside popover (non-virtual mode)
131
131
  .ms__badge {
132
132
  width: 100%;
133
133
  min-height: fit-content; // Allow badges to expand based on content
134
- line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed); // Override line-height: 1 to allow multi-line content
134
+ line-height: var(--ms-line-height-relaxed, $ms-line-height-relaxed); // Override line-height: 1 to allow multi-line content
135
135
  }
136
136
 
137
137
  .ms__badge-text {
@@ -157,7 +157,7 @@
157
157
  height: var(--ms-badge-height-virtual, 36px);
158
158
  min-height: var(--ms-badge-height-virtual, 36px);
159
159
  max-height: var(--ms-badge-height-virtual, 36px);
160
- margin-bottom: var(--ms-selected-popover-body-gap, $ml-selected-popover-body-gap); // Add gap between badges
160
+ margin-bottom: var(--ms-selected-popover-body-gap, $ms-selected-popover-body-gap); // Add gap between badges
161
161
  overflow: hidden;
162
162
  box-sizing: border-box;
163
163
  }