@keenmate/web-multiselect 1.4.0 → 1.5.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 (15) hide show
  1. package/README.md +40 -5
  2. package/dist/multiselect.js +779 -797
  3. package/dist/multiselect.umd.js +14 -14
  4. package/dist/style.css +1 -1
  5. package/package.json +2 -2
  6. package/src/scss/_badges-display.scss +71 -70
  7. package/src/scss/_base.scss +3 -2
  8. package/src/scss/_css-variables.scss +264 -267
  9. package/src/scss/_debug.scss +23 -23
  10. package/src/scss/_input-dropdown.scss +73 -70
  11. package/src/scss/_modifiers.scss +6 -65
  12. package/src/scss/_options.scss +91 -91
  13. package/src/scss/_rtl.scss +10 -10
  14. package/src/scss/_tooltips-popover.scss +45 -45
  15. package/src/scss/_variables.scss +297 -314
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,81 +79,80 @@
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
 
126
125
  // Focused + Hover
127
126
  &--focused:hover {
128
- background: var(--ms-option-bg-focused-hover, $ml-option-bg-focused-hover);
129
- color: var(--ms-option-color-focused-hover, var(--ms-option-color-focused, var(--ms-option-text-color, $ml-option-color)));
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)));
130
129
  }
131
130
 
132
131
  // Matched + Hover
133
132
  &--matched:hover {
134
- background: var(--ms-option-bg-matched-hover, $ml-option-bg-matched-hover);
135
- color: var(--ms-option-color-matched-hover, var(--ms-option-color-matched, var(--ms-option-text-color, $ml-option-color)));
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)));
136
135
  }
137
136
 
138
137
  // Selected + Focused
139
138
  &--selected#{&}--focused {
140
- background: var(--ms-option-bg-selected-focused, $ml-option-bg-selected-focused);
141
- color: var(--ms-option-color-selected-focused, var(--ms-option-color-selected, var(--ms-option-text-color, $ml-option-color)));
142
- outline: var(--ms-option-outline-focused, $ml-option-outline-focused);
143
- outline-offset: var(--ms-option-focus-outline-offset, $ml-option-focus-outline-offset);
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);
144
143
  }
145
144
 
146
145
  // Selected + Matched
147
146
  &--selected#{&}--matched {
148
- background: var(--ms-option-bg-selected-matched, $ml-option-bg-selected-matched);
149
- color: var(--ms-option-color-selected-matched, var(--ms-option-color-selected, var(--ms-option-text-color, $ml-option-color)));
150
- border-left: var(--ms-option-border-matched, $ml-option-border-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);
151
150
  }
152
151
 
153
152
  // Disabled + Selected
154
153
  &--disabled#{&}--selected {
155
- background: var(--ms-option-bg-disabled-selected, $ml-option-bg-disabled-selected);
156
- color: var(--ms-option-color-disabled-selected, var(--ms-option-color-selected, var(--ms-option-text-color, $ml-option-color)));
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)));
157
156
  }
158
157
 
159
158
  // Disabled + Focused (prevents focus outline on disabled items)
@@ -161,9 +160,9 @@
161
160
  outline: none;
162
161
  }
163
162
 
164
- // Checkbox alignment variants
165
- &[data-checkbox-align="center"] {
166
- --ms-checkbox-align: center;
163
+ // Checkbox alignment variants (center is default, defined in _css-variables.scss)
164
+ &[data-checkbox-align="top"] {
165
+ --ms-checkbox-align: flex-start;
167
166
  }
168
167
 
169
168
  &[data-checkbox-align="bottom"] {
@@ -184,20 +183,20 @@
184
183
  -moz-appearance: none;
185
184
  flex-shrink: 0;
186
185
  position: relative;
187
- margin-top: var(--ms-checkbox-margin-top, $ml-checkbox-margin-top);
188
- margin-right: var(--ms-checkbox-margin-right, $ml-checkbox-margin-right);
189
- margin-bottom: var(--ms-checkbox-margin-bottom, $ml-checkbox-margin-bottom);
190
- margin-left: var(--ms-checkbox-margin-left, $ml-checkbox-margin-left);
191
- width: var(--ms-checkbox-size, $ml-checkbox-size);
192
- height: var(--ms-checkbox-size, $ml-checkbox-size);
193
- 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));
194
193
  transform-origin: top left;
195
194
  cursor: pointer;
196
195
 
197
196
  // Custom checkbox appearance
198
- background: var(--ms-checkbox-bg, $ml-checkbox-bg);
199
- border: var(--ms-checkbox-border, $ml-checkbox-border);
200
- 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);
201
200
  transition: background-color 0.15s ease, border-color 0.15s ease;
202
201
 
203
202
  // Checkmark using ::after pseudo-element
@@ -212,19 +211,19 @@
212
211
  height: 55%;
213
212
  transform: translate(-50%, -50%) rotate(45deg);
214
213
  // Checkmark shape (right and bottom borders form the check)
215
- border: solid var(--ms-checkbox-checkmark-color, $ml-checkbox-checkmark-color);
214
+ border: solid var(--ms-checkbox-checkmark-color, $ms-checkbox-checkmark-color);
216
215
  border-width: 0 2px 2px 0;
217
216
  }
218
217
 
219
218
  // Hover state
220
219
  &:hover:not(:disabled) {
221
- 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);
222
221
  }
223
222
 
224
223
  // Checked state
225
224
  &:checked {
226
- background: var(--ms-checkbox-checked-bg, $ml-checkbox-checked-bg);
227
- 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);
228
227
 
229
228
  &::after {
230
229
  display: block;
@@ -233,25 +232,25 @@
233
232
 
234
233
  // Checked + Hover
235
234
  &:checked:hover:not(:disabled) {
236
- background: var(--ms-checkbox-checked-bg-hover, $ml-checkbox-checked-bg-hover);
237
- border-color: var(--ms-checkbox-checked-border-color-hover, $ml-checkbox-checked-border-color-hover);
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);
238
237
  }
239
238
 
240
239
  // Focus state (accessibility)
241
240
  &:focus-visible {
242
- 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);
243
242
  outline-offset: 2px;
244
243
  }
245
244
 
246
245
  // Disabled state
247
246
  &:disabled {
248
247
  cursor: not-allowed;
249
- background: var(--ms-checkbox-disabled-bg, $ml-checkbox-disabled-bg);
250
- 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);
251
250
  opacity: 0.6;
252
251
 
253
252
  &:checked {
254
- background: var(--ms-checkbox-disabled-bg, $ml-checkbox-disabled-bg);
253
+ background: var(--ms-checkbox-disabled-bg, $ms-checkbox-disabled-bg);
255
254
  }
256
255
  }
257
256
 
@@ -265,23 +264,24 @@
265
264
  // ==============================================================================
266
265
 
267
266
  // Option content (rich content wrapper)
267
+ // Note: Uses flex-start to prevent clipping of tall custom content in virtual scroll mode
268
268
  .ms__option-content {
269
269
  flex: 1;
270
270
  display: flex;
271
271
  align-items: flex-start;
272
- gap: var(--ms-option-content-gap, $ml-option-content-gap);
272
+ gap: var(--ms-option-content-gap, $ms-option-content-gap);
273
273
  min-width: 0; // Allow text truncation
274
274
  }
275
275
 
276
276
  // Option icon/SVG
277
277
  .ms__option-icon {
278
278
  flex-shrink: 0;
279
- width: var(--ms-option-icon-size, $ml-option-icon-size);
280
- height: var(--ms-option-icon-size, $ml-option-icon-size);
279
+ width: var(--ms-option-icon-size, $ms-option-icon-size);
280
+ height: var(--ms-option-icon-size, $ms-option-icon-size);
281
281
  display: flex;
282
282
  align-items: center;
283
283
  justify-content: center;
284
- font-size: var(--ms-option-icon-font-size, $ml-option-icon-font-size);
284
+ font-size: var(--ms-option-icon-font-size, $ms-option-icon-font-size);
285
285
 
286
286
  svg {
287
287
  width: 100%;
@@ -298,36 +298,36 @@
298
298
 
299
299
  // Option title/main text
300
300
  .ms__option-title {
301
- font-size: var(--ms-option-title-font-size, $ml-option-title-font-size);
302
- color: var(--ms-option-title-color, $ml-option-title-color);
303
- line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
301
+ font-size: var(--ms-option-title-font-size, $ms-option-title-font-size);
302
+ color: var(--ms-option-title-color, $ms-option-title-color);
303
+ line-height: var(--ms-line-height-relaxed, $ms-line-height-relaxed);
304
304
 
305
305
  // Highlight matched text
306
306
  mark {
307
- background: var(--ms-option-mark-background, $ml-option-mark-bg);
308
- color: var(--ms-option-mark-color, $ml-option-mark-color);
309
- font-weight: var(--ms-option-mark-font-weight, $ml-option-mark-font-weight);
307
+ background: var(--ms-option-mark-background, $ms-option-mark-bg);
308
+ color: var(--ms-option-mark-color, $ms-option-mark-color);
309
+ font-weight: var(--ms-option-mark-font-weight, $ms-option-mark-font-weight);
310
310
  }
311
311
  }
312
312
 
313
313
  // Option subtitle (multiline support)
314
314
  .ms__option-subtitle {
315
- margin-top: var(--ms-option-subtitle-margin-top, $ml-option-subtitle-margin-top);
316
- font-size: var(--ms-option-subtitle-font-size, $ml-option-subtitle-font-size);
317
- color: var(--ms-option-subtitle-color, $ml-option-subtitle-color);
318
- line-height: var(--ms-option-subtitle-line-height, $ml-option-subtitle-line-height);
315
+ margin-top: var(--ms-option-subtitle-margin-top, $ms-option-subtitle-margin-top);
316
+ font-size: var(--ms-option-subtitle-font-size, $ms-option-subtitle-font-size);
317
+ color: var(--ms-option-subtitle-color, $ms-option-subtitle-color);
318
+ line-height: var(--ms-option-subtitle-line-height, $ms-option-subtitle-line-height);
319
319
 
320
320
  // Subtitle color states (for solid background themes)
321
321
  .ms__option:hover & {
322
- color: var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color, $ml-option-subtitle-color));
322
+ color: var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color, $ms-option-subtitle-color));
323
323
  }
324
324
 
325
325
  .ms__option--selected & {
326
- color: var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ml-option-subtitle-color));
326
+ color: var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ms-option-subtitle-color));
327
327
  }
328
328
 
329
329
  .ms__option--selected:hover & {
330
- color: var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ml-option-subtitle-color)));
330
+ color: var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ms-option-subtitle-color)));
331
331
  }
332
332
  }
333
333
 
@@ -337,10 +337,10 @@
337
337
 
338
338
  // Empty state
339
339
  .ms__empty {
340
- padding: var(--ms-empty-padding, $ml-empty-padding);
340
+ padding: var(--ms-empty-padding, $ms-empty-padding);
341
341
  text-align: center;
342
- font-size: var(--ms-empty-font-size, $ml-empty-font-size);
343
- color: var(--ms-empty-color, $ml-empty-color);
342
+ font-size: var(--ms-empty-font-size, $ms-empty-font-size);
343
+ color: var(--ms-empty-color, $ms-empty-color);
344
344
  }
345
345
 
346
346
  // Loading state
@@ -349,11 +349,11 @@
349
349
  flex-direction: column;
350
350
  align-items: center;
351
351
  justify-content: center;
352
- padding: var(--ms-loader-padding, $ml-loader-padding);
353
- gap: var(--ms-loader-gap, $ml-loader-gap);
352
+ padding: var(--ms-loader-padding, $ms-loader-padding);
353
+ gap: var(--ms-loader-gap, $ms-loader-gap);
354
354
  }
355
355
 
356
356
  .ms__loading-text {
357
- font-size: var(--ms-loading-text-font-size, $ml-loading-text-font-size);
358
- color: var(--ms-loading-color, $ml-loading-text-color);
357
+ font-size: var(--ms-loading-text-font-size, $ms-loading-text-font-size);
358
+ color: var(--ms-loading-color, $ms-loading-text-color);
359
359
  }
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
 
@@ -76,15 +76,15 @@
76
76
 
77
77
  // Remove button on left side of badge (RTL)
78
78
  .ms__badge-remove {
79
- border-radius: var(--ms-badge-border-radius, $ml-badge-border-radius) 0 0 var(--ms-badge-border-radius, $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
84
  // Badge text rounded on right (RTL)
85
85
  .ms__badge-text {
86
- border-radius: 0 var(--ms-badge-border-radius, $ml-badge-border-radius) var(--ms-badge-border-radius, $ml-badge-border-radius) 0;
87
- border-right: var(--ms-badge-text-border, $ml-badge-text-border);
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
88
  border-left: none;
89
89
  }
90
90
 
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
  }