@keenmate/web-multiselect 1.0.0 → 1.2.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 (13) hide show
  1. package/README.md +166 -110
  2. package/dist/multiselect.js +1121 -1088
  3. package/dist/multiselect.umd.js +43 -43
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/scss/_badges-display.scss +76 -76
  7. package/src/scss/_css-variables.scss +387 -215
  8. package/src/scss/_input-dropdown.scss +101 -70
  9. package/src/scss/_modifiers.scss +38 -38
  10. package/src/scss/_options.scss +75 -70
  11. package/src/scss/_rtl.scss +31 -31
  12. package/src/scss/_tooltips-popover.scss +51 -51
  13. package/src/scss/_variables.scss +34 -2
package/src/scss/_input-dropdown.scss CHANGED
@@ -10,39 +10,69 @@
10
10
  // ==============================================================================
11
11
 
12
12
  // Input wrapper
13
- .ml__input-wrapper {
13
+ .ms__input-wrapper {
14
14
  position: relative;
15
15
  display: flex;
16
16
  align-items: center;
17
17
  }
18
18
 
19
19
  // Search input
20
- .ml__input {
20
+ .ms__input {
21
+ box-sizing: border-box;
21
22
  width: 100%;
22
- padding: var(--ml-input-padding, $ml-input-padding);
23
- padding-right: var(--ml-input-padding-right, $ml-input-padding-right); // Space for dropdown icon
24
- font-size: var(--ml-input-font-size, $ml-input-font-size);
25
- border: var(--ml-input-border-style, $ml-input-border-style);
26
- border-radius: var(--ml-input-border-radius, $ml-input-border-radius);
27
- background: var(--ml-input-bg, $ml-input-bg);
28
- color: var(--ml-input-text, $ml-input-text);
23
+ padding: var(--ms-input-padding, $ml-input-padding);
24
+ padding-right: var(--ms-input-padding-right, $ml-input-padding-right); // Space for dropdown icon
25
+ font-size: var(--ms-input-font-size, $ml-input-font-size);
26
+ border: var(--ms-input-border-style, $ml-input-border-style);
27
+ border-radius: var(--ms-input-border-radius, $ml-input-border-radius);
28
+ background: var(--ms-input-background, $ml-input-bg);
29
+ color: var(--ms-input-color, $ml-input-text);
29
30
  cursor: pointer;
30
- transition: border-color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
31
+ transition: border-color var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
31
32
 
32
33
  &:focus {
33
34
  outline: none;
34
- border-color: var(--ml-input-focus-border-color, $ml-input-focus-border-color);
35
+ border-color: var(--ms-input-border-color-focus, $ml-input-focus-border-color);
35
36
  }
36
37
 
37
38
  &::placeholder {
38
- color: var(--ml-input-placeholder-color, $ml-input-placeholder-color);
39
+ color: var(--ms-input-placeholder-color, $ml-input-placeholder-color);
39
40
  opacity: 0; // Initially hidden until component is ready
40
- transition: opacity var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
41
+ transition: opacity var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
41
42
  }
42
43
 
43
44
  // Show placeholder only after component is fully initialized
44
45
  :host([data-ready]) &::placeholder {
45
- opacity: var(--ml-placeholder-opacity, $ml-placeholder-opacity);
46
+ opacity: var(--ms-placeholder-opacity, $ml-placeholder-opacity);
47
+ }
48
+
49
+ // Size variants
50
+ &.ms__input--xs {
51
+ font-size: var(--ms-input-size-xs-font);
52
+ padding: var(--ms-input-size-xs-padding-v) var(--ms-input-size-xs-padding-h);
53
+ padding-right: calc(var(--ms-input-size-xs-padding-h) * 2.5);
54
+ height: var(--ms-input-size-xs-height);
55
+ }
56
+
57
+ &.ms__input--sm {
58
+ font-size: var(--ms-input-size-sm-font);
59
+ padding: var(--ms-input-size-sm-padding-v) var(--ms-input-size-sm-padding-h);
60
+ padding-right: calc(var(--ms-input-size-sm-padding-h) * 2.5);
61
+ height: var(--ms-input-size-sm-height);
62
+ }
63
+
64
+ &.ms__input--lg {
65
+ font-size: var(--ms-input-size-lg-font);
66
+ padding: var(--ms-input-size-lg-padding-v) var(--ms-input-size-lg-padding-h);
67
+ padding-right: calc(var(--ms-input-size-lg-padding-h) * 2.5);
68
+ height: var(--ms-input-size-lg-height);
69
+ }
70
+
71
+ &.ms__input--xl {
72
+ font-size: var(--ms-input-size-xl-font);
73
+ padding: var(--ms-input-size-xl-padding-v) var(--ms-input-size-xl-padding-h);
74
+ padding-right: calc(var(--ms-input-size-xl-padding-h) * 2.5);
75
+ height: var(--ms-input-size-xl-height);
46
76
  }
47
77
  }
48
78
 
@@ -51,17 +81,18 @@
51
81
  // ==============================================================================
52
82
 
53
83
  // Dropdown toggle icon
54
- .ml__toggle {
84
+ .ms__toggle {
55
85
  position: absolute;
56
- right: var(--ml-toggle-right, $ml-toggle-right);
86
+ right: var(--ms-toggle-right, $ml-toggle-right);
57
87
  top: 50%;
58
- transform: var(--ml-transform-center-y, $ml-transform-center-y);
88
+ transform: var(--ms-transform-center-y, $ml-transform-center-y);
59
89
  pointer-events: none;
60
- color: var(--ml-toggle-color, $ml-toggle-color);
61
- transition: transform var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
90
+ color: var(--ms-toggle-icon-color, $ml-toggle-color);
91
+ transition: transform var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
62
92
 
63
- .ml--open & {
64
- transform: var(--ml-transform-center-y, $ml-transform-center-y) rotate(var(--ml-transform-rotate-180, $ml-transform-rotate-180));
93
+ .ms--open & {
94
+ transform: var(--ms-transform-center-y, $ml-transform-center-y) rotate(var(--ms-transform-rotate-180, $ml-transform-rotate-180));
95
+ color: var(--ms-toggle-icon-color-open, $ml-toggle-color);
65
96
  }
66
97
  }
67
98
 
@@ -70,24 +101,24 @@
70
101
  // ==============================================================================
71
102
 
72
103
  // Count badge (appears next to toggle icon)
73
- .ml__counter {
104
+ .ms__counter {
74
105
  position: absolute;
75
- right: var(--ml-counter-offset, $ml-counter-offset); // Space for toggle icon
106
+ right: var(--ms-counter-offset, $ml-counter-offset); // Space for toggle icon
76
107
  top: 50%;
77
- transform: var(--ml-transform-center-y, $ml-transform-center-y);
78
- padding: var(--ml-counter-padding, $ml-counter-padding);
79
- background: var(--ml-counter-bg, $ml-counter-bg);
80
- color: var(--ml-counter-color, $ml-counter-color);
81
- font-size: var(--ml-counter-font-size, $ml-counter-font-size);
82
- font-weight: var(--ml-counter-font-weight, $ml-counter-font-weight);
83
- border-radius: var(--ml-counter-border-radius, $ml-counter-border-radius);
108
+ transform: var(--ms-transform-center-y, $ml-transform-center-y);
109
+ padding: var(--ms-counter-padding, $ml-counter-padding);
110
+ background: var(--ms-counter-badge-background, $ml-counter-bg);
111
+ color: var(--ms-counter-badge-color, $ml-counter-color);
112
+ font-size: var(--ms-counter-font-size, $ml-counter-font-size);
113
+ font-weight: var(--ms-counter-font-weight, $ml-counter-font-weight);
114
+ border-radius: var(--ms-counter-border-radius, $ml-counter-border-radius);
84
115
  cursor: pointer;
85
- transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
116
+ transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
86
117
 
87
118
  &:hover {
88
- background: var(--ml-counter-bg-hover, $ml-counter-bg-hover);
89
- transform: var(--ml-transform-center-y, $ml-transform-center-y)
90
- scale(var(--ml-transform-scale-hover, $ml-transform-scale-hover));
119
+ background: var(--ms-counter-badge-background-hover, $ml-counter-bg-hover);
120
+ transform: var(--ms-transform-center-y, $ml-transform-center-y)
121
+ scale(var(--ms-transform-scale-hover, $ml-transform-scale-hover));
91
122
  }
92
123
  }
93
124
 
@@ -96,18 +127,18 @@
96
127
  // ==============================================================================
97
128
 
98
129
  // Floating search hint (appears above input)
99
- .ml__hint {
130
+ .ms__hint {
100
131
  display: none;
101
132
  position: absolute;
102
- z-index: var(--ml-z-index-popover, $ml-z-index-popover);
103
- padding: var(--ml-hint-padding, $ml-hint-padding);
104
- background: var(--ml-hint-bg, $ml-hint-bg);
105
- border: var(--ml-hint-border, $ml-hint-border);
106
- border-radius: var(--ml-hint-border-radius, $ml-hint-border-radius);
107
- box-shadow: var(--ml-hint-box-shadow, $ml-hint-box-shadow);
108
- font-size: var(--ml-hint-font-size, $ml-hint-font-size);
109
- color: var(--ml-hint-color, $ml-hint-color);
110
- line-height: var(--ml-line-height-relaxed, $ml-line-height-relaxed);
133
+ z-index: var(--ms-z-index-popover, $ml-z-index-popover);
134
+ padding: var(--ms-hint-padding, $ml-hint-padding);
135
+ background: var(--ms-hint-background, $ml-hint-bg);
136
+ border: var(--ms-hint-border, $ml-hint-border);
137
+ border-radius: var(--ms-hint-border-radius, $ml-hint-border-radius);
138
+ box-shadow: var(--ms-hint-box-shadow, $ml-hint-box-shadow);
139
+ font-size: var(--ms-hint-font-size, $ml-hint-font-size);
140
+ color: var(--ms-hint-color, $ml-hint-color);
141
+ line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
111
142
  max-width: 100%;
112
143
 
113
144
  &--visible {
@@ -120,20 +151,20 @@
120
151
  // ==============================================================================
121
152
 
122
153
  // Floating dropdown (appears below input)
123
- .ml__dropdown {
154
+ .ms__dropdown {
124
155
  display: none;
125
156
  position: absolute;
126
- z-index: var(--ml-z-index-dropdown, $ml-z-index-dropdown);
127
- background: var(--ml-dropdown-bg, $ml-dropdown-bg);
128
- border: var(--ml-dropdown-border, $ml-dropdown-border);
129
- border-radius: var(--ml-dropdown-border-radius, $ml-dropdown-border-radius);
130
- box-shadow: var(--ml-dropdown-box-shadow, $ml-dropdown-box-shadow);
131
- max-height: var(--ml-options-max-height, $ml-options-max-height);
157
+ z-index: var(--ms-z-index-dropdown, $ml-z-index-dropdown);
158
+ background: var(--ms-dropdown-background, $ml-dropdown-bg);
159
+ border: var(--ms-dropdown-border, $ml-dropdown-border);
160
+ border-radius: var(--ms-dropdown-border-radius, $ml-dropdown-border-radius);
161
+ box-shadow: var(--ms-dropdown-box-shadow, $ml-dropdown-box-shadow);
162
+ max-height: var(--ms-options-max-height, $ml-options-max-height);
132
163
  overflow-y: auto;
133
164
  overscroll-behavior: contain;
134
165
  touch-action: pan-y;
135
166
  -webkit-overflow-scrolling: touch;
136
- color: var(--ml-option-color, $ml-option-color);
167
+ color: var(--ms-dropdown-text-color, $ml-option-color);
137
168
 
138
169
  &--visible {
139
170
  display: block;
@@ -151,12 +182,12 @@
151
182
  // ==============================================================================
152
183
 
153
184
  // Dropdown actions (Select All / Clear All)
154
- .ml__actions {
185
+ .ms__actions {
155
186
  display: flex;
156
187
  flex-wrap: nowrap;
157
- gap: var(--ml-actions-gap, $ml-actions-gap);
158
- padding: var(--ml-actions-padding, $ml-actions-padding);
159
- border-bottom: var(--ml-actions-border-bottom, $ml-actions-border-bottom);
188
+ gap: var(--ms-actions-gap, $ml-actions-gap);
189
+ padding: var(--ms-actions-padding, $ml-actions-padding);
190
+ border-bottom: var(--ms-actions-border-bottom, $ml-actions-border-bottom);
160
191
 
161
192
  &--wrap {
162
193
  flex-wrap: wrap;
@@ -165,34 +196,34 @@
165
196
  &--sticky {
166
197
  position: sticky;
167
198
  top: 0;
168
- z-index: var(--ml-z-index-sticky, $ml-z-index-sticky);
169
- background: var(--ml-actions-bg, $ml-actions-bg);
199
+ z-index: var(--ms-z-index-sticky, $ml-z-index-sticky);
200
+ background: var(--ms-actions-background, $ml-actions-bg);
170
201
  }
171
202
  }
172
203
 
173
- .ml__action-btn {
204
+ .ms__action-btn {
174
205
  flex: 1;
175
- padding: var(--ml-action-btn-padding, $ml-action-btn-padding);
176
- font-size: var(--ml-action-btn-font-size, $ml-action-btn-font-size);
177
- border: var(--ml-action-btn-border, $ml-action-btn-border);
178
- border-radius: var(--ml-action-btn-border-radius, $ml-action-btn-border-radius);
179
- background: var(--ml-action-btn-bg, $ml-action-btn-bg);
180
- color: var(--ml-action-btn-color, $ml-action-btn-color);
206
+ padding: var(--ms-action-btn-padding, $ml-action-btn-padding);
207
+ font-size: var(--ms-action-btn-font-size, $ml-action-btn-font-size);
208
+ border: var(--ms-action-btn-border, $ml-action-btn-border);
209
+ border-radius: var(--ms-action-btn-border-radius, $ml-action-btn-border-radius);
210
+ background: var(--ms-action-button-background, $ml-action-btn-bg);
211
+ color: var(--ms-action-button-color, $ml-action-btn-color);
181
212
  cursor: pointer;
182
- transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
213
+ transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
183
214
 
184
215
  &:hover {
185
- background: var(--ml-action-btn-bg-hover, $ml-action-btn-bg-hover);
186
- border-color: var(--ml-action-btn-border-color-hover, $ml-action-btn-border-color-hover);
216
+ background: var(--ms-action-button-background-hover, $ml-action-btn-bg-hover);
217
+ border-color: var(--ms-action-button-border-color-hover, $ml-action-btn-border-color-hover);
187
218
  }
188
219
 
189
220
  &:active {
190
- transform: scale(var(--ml-transform-scale-active, $ml-transform-scale-active));
221
+ transform: scale(var(--ms-transform-scale-active, $ml-transform-scale-active));
191
222
  }
192
223
 
193
224
  &:disabled,
194
225
  &[disabled] {
195
- opacity: var(--ml-disabled-opacity, $ml-disabled-opacity);
226
+ opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
196
227
  cursor: not-allowed;
197
228
  pointer-events: none;
198
229
  }
package/src/scss/_modifiers.scss CHANGED
@@ -9,59 +9,59 @@
9
9
  // SIZE VARIANTS
10
10
  // ==============================================================================
11
11
 
12
- .ml--xs {
13
- .ml__input {
14
- font-size: var(--ml-font-size-xs, $ml-font-size-xs);
12
+ .ms--xs {
13
+ .ms__input {
14
+ font-size: var(--ms-font-size-xs, $ml-font-size-xs);
15
15
  }
16
16
 
17
- .ml__option {
18
- padding: var(--ml-spacing-xs, $ml-spacing-xs) var(--ml-spacing-sm, $ml-spacing-sm);
17
+ .ms__option {
18
+ padding: var(--ms-spacing-xs, $ml-spacing-xs) var(--ms-spacing-sm, $ml-spacing-sm);
19
19
  }
20
20
 
21
- .ml__option-title {
22
- font-size: var(--ml-font-size-xs, $ml-font-size-xs);
21
+ .ms__option-title {
22
+ font-size: var(--ms-font-size-xs, $ml-font-size-xs);
23
23
  }
24
24
 
25
- .ml__badge {
26
- font-size: var(--ml-font-size-2xs, $ml-font-size-2xs);
25
+ .ms__badge {
26
+ font-size: var(--ms-font-size-2xs, $ml-font-size-2xs);
27
27
  }
28
28
  }
29
29
 
30
- .ml--sm {
31
- .ml__input {
32
- font-size: var(--ml-font-size-xs, $ml-font-size-xs);
30
+ .ms--sm {
31
+ .ms__input {
32
+ font-size: var(--ms-font-size-xs, $ml-font-size-xs);
33
33
  }
34
34
 
35
- .ml__option-title {
36
- font-size: var(--ml-font-size-xs, $ml-font-size-xs);
35
+ .ms__option-title {
36
+ font-size: var(--ms-font-size-xs, $ml-font-size-xs);
37
37
  }
38
38
  }
39
39
 
40
- .ml--lg {
41
- .ml__input {
42
- font-size: var(--ml-font-size-base, $ml-font-size-base);
40
+ .ms--lg {
41
+ .ms__input {
42
+ font-size: var(--ms-font-size-base, $ml-font-size-base);
43
43
  }
44
44
 
45
- .ml__option-title {
46
- font-size: var(--ml-font-size-base, $ml-font-size-base);
45
+ .ms__option-title {
46
+ font-size: var(--ms-font-size-base, $ml-font-size-base);
47
47
  }
48
48
 
49
- .ml__badge {
50
- font-size: var(--ml-font-size-sm, $ml-font-size-sm);
49
+ .ms__badge {
50
+ font-size: var(--ms-font-size-sm, $ml-font-size-sm);
51
51
  }
52
52
  }
53
53
 
54
- .ml--xl {
55
- .ml__input {
56
- font-size: var(--ml-font-size-lg, $ml-font-size-lg);
54
+ .ms--xl {
55
+ .ms__input {
56
+ font-size: var(--ms-font-size-lg, $ml-font-size-lg);
57
57
  }
58
58
 
59
- .ml__option-title {
60
- font-size: var(--ml-font-size-lg, $ml-font-size-lg);
59
+ .ms__option-title {
60
+ font-size: var(--ms-font-size-lg, $ml-font-size-lg);
61
61
  }
62
62
 
63
- .ml__badge {
64
- font-size: var(--ml-font-size-base, $ml-font-size-base);
63
+ .ms__badge {
64
+ font-size: var(--ms-font-size-base, $ml-font-size-base);
65
65
  }
66
66
  }
67
67
 
@@ -70,26 +70,26 @@
70
70
  // ==============================================================================
71
71
 
72
72
  // Disabled state
73
- .ml--disabled {
74
- .ml__input {
75
- opacity: var(--ml-disabled-input-opacity, $ml-disabled-input-opacity);
73
+ .ms--disabled {
74
+ .ms__input {
75
+ opacity: var(--ms-disabled-input-opacity, $ml-disabled-input-opacity);
76
76
  cursor: not-allowed;
77
- background: var(--ml-input-bg-disabled, $ml-input-bg-disabled);
77
+ background: var(--ms-input-bg-disabled, $ml-input-bg-disabled);
78
78
  }
79
79
 
80
- .ml__toggle {
81
- opacity: var(--ml-disabled-input-opacity, $ml-disabled-input-opacity);
80
+ .ms__toggle {
81
+ opacity: var(--ms-disabled-input-opacity, $ml-disabled-input-opacity);
82
82
  }
83
83
  }
84
84
 
85
85
  // No checkboxes modifier (for simple select mode)
86
- .ml--no-checkboxes {
87
- .ml__option {
86
+ .ms--no-checkboxes {
87
+ .ms__option {
88
88
  gap: 0; // Remove gap since there's no checkbox
89
- padding-left: var(--ml-option-padding-h, $ml-option-padding-h); // Adjust padding
89
+ padding-left: var(--ms-option-padding-h, $ml-option-padding-h); // Adjust padding
90
90
  }
91
91
 
92
- .ml__option-content {
92
+ .ms__option-content {
93
93
  padding-left: 0; // No extra padding needed
94
94
  }
95
95
  }
package/src/scss/_options.scss CHANGED
@@ -10,18 +10,18 @@
10
10
  // ==============================================================================
11
11
 
12
12
  // Options container
13
- .ml__options {
14
- padding: var(--ml-options-padding, $ml-options-padding);
13
+ .ms__options {
14
+ padding: var(--ms-options-padding, $ml-options-padding);
15
15
  }
16
16
 
17
17
  // Virtual scroll - enforce consistent heights
18
- .ml__options--virtual {
18
+ .ms__options--virtual {
19
19
  // overflow and position are set inline for proper dimensions
20
20
 
21
- .ml__option {
22
- height: var(--ml-option-height, 50px);
23
- min-height: var(--ml-option-height, 50px);
24
- max-height: var(--ml-option-height, 50px);
21
+ .ms__option {
22
+ height: var(--ms-option-height, 50px);
23
+ min-height: var(--ms-option-height, 50px);
24
+ max-height: var(--ms-option-height, 50px);
25
25
  overflow: hidden;
26
26
  box-sizing: border-box;
27
27
  }
@@ -32,22 +32,22 @@
32
32
  // ==============================================================================
33
33
 
34
34
  // Group
35
- .ml__group {
35
+ .ms__group {
36
36
  & + & {
37
- border-top: var(--ml-group-border-top, $ml-group-border-top);
38
- margin-top: var(--ml-group-margin-top, $ml-group-margin-top);
39
- padding-top: var(--ml-group-padding-top, $ml-group-padding-top);
37
+ border-top: var(--ms-group-border-top, $ml-group-border-top);
38
+ margin-top: var(--ms-group-margin-top, $ml-group-margin-top);
39
+ padding-top: var(--ms-group-padding-top, $ml-group-padding-top);
40
40
  }
41
41
  }
42
42
 
43
43
  // Group label
44
- .ml__group-label {
45
- padding: var(--ml-group-label-padding, $ml-group-label-padding);
46
- font-size: var(--ml-group-label-font-size, $ml-group-label-font-size);
47
- font-weight: var(--ml-group-label-font-weight, $ml-group-label-font-weight);
48
- color: var(--ml-group-label-color, $ml-group-label-color);
49
- text-transform: var(--ml-group-label-transform, $ml-group-label-transform);
50
- letter-spacing: var(--ml-group-label-letter-spacing, $ml-group-label-letter-spacing);
44
+ .ms__group-label {
45
+ padding: var(--ms-group-label-padding, $ml-group-label-padding);
46
+ font-size: var(--ms-group-label-font-size, $ml-group-label-font-size);
47
+ font-weight: var(--ms-group-label-font-weight, $ml-group-label-font-weight);
48
+ color: var(--ms-group-label-color, $ml-group-label-color);
49
+ text-transform: var(--ms-group-label-transform, $ml-group-label-transform);
50
+ letter-spacing: var(--ms-group-label-letter-spacing, $ml-group-label-letter-spacing);
51
51
  }
52
52
 
53
53
  // ==============================================================================
@@ -55,53 +55,55 @@
55
55
  // ==============================================================================
56
56
 
57
57
  // Individual option
58
- .ml__option {
58
+ .ms__option {
59
59
  display: flex;
60
- align-items: var(--ml-checkbox-align, flex-start); // Support checkbox alignment
61
- gap: var(--ml-option-gap, $ml-option-gap);
62
- padding: var(--ml-option-padding, $ml-option-padding);
60
+ align-items: var(--ms-checkbox-align, flex-start); // Support checkbox alignment
61
+ gap: var(--ms-option-gap, $ml-option-gap);
62
+ padding: var(--ms-option-padding, $ml-option-padding);
63
+ color: var(--ms-option-text-color, $ml-option-color);
64
+ background: var(--ms-option-background, $ml-option-bg);
63
65
  cursor: pointer;
64
- transition: background-color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
66
+ transition: background-color var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
65
67
 
66
68
  &:hover {
67
- background: var(--ml-option-bg-hover, $ml-option-bg-hover);
69
+ background: var(--ms-option-background-hover, $ml-option-bg-hover);
68
70
  }
69
71
 
70
72
  &--focused {
71
- background: var(--ml-option-bg-focused, $ml-option-bg-focused);
72
- outline: var(--ml-option-outline-focused, $ml-option-outline-focused);
73
- outline-offset: var(--ml-option-focus-outline-offset, $ml-option-focus-outline-offset);
73
+ background: var(--ms-option-background-focused, $ml-option-bg-focused);
74
+ outline: var(--ms-option-outline-focused, $ml-option-outline-focused);
75
+ outline-offset: var(--ms-option-focus-outline-offset, $ml-option-focus-outline-offset);
74
76
  }
75
77
 
76
78
  &--matched {
77
- background: var(--ml-option-bg-matched, $ml-option-bg-matched);
78
- border-left: var(--ml-option-border-matched, $ml-option-border-matched);
79
+ background: var(--ms-option-background-matched, $ml-option-bg-matched);
80
+ border-left: var(--ms-option-border-matched, $ml-option-border-matched);
79
81
  }
80
82
 
81
83
  &--selected {
82
- background: var(--ml-option-bg-selected, $ml-option-bg-selected);
84
+ background: var(--ms-option-background-selected, $ml-option-bg-selected);
83
85
 
84
86
  &:hover {
85
- background: var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, $ml-option-bg-selected));
87
+ background: var(--ms-option-bg-selected-hover, var(--ms-option-background-selected, $ml-option-bg-selected));
86
88
  }
87
89
  }
88
90
 
89
91
  &--disabled {
90
- opacity: var(--ml-disabled-opacity, $ml-disabled-opacity);
92
+ opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
91
93
  cursor: not-allowed;
92
94
 
93
95
  &:hover {
94
- background: var(--ml-option-bg, $ml-option-bg);
96
+ background: var(--ms-option-background, $ml-option-bg);
95
97
  }
96
98
  }
97
99
 
98
100
  // Checkbox alignment variants
99
101
  &[data-checkbox-align="center"] {
100
- --ml-checkbox-align: center;
102
+ --ms-checkbox-align: center;
101
103
  }
102
104
 
103
105
  &[data-checkbox-align="bottom"] {
104
- --ml-checkbox-align: flex-end;
106
+ --ms-checkbox-align: flex-end;
105
107
  }
106
108
  }
107
109
 
@@ -110,16 +112,19 @@
110
112
  // ==============================================================================
111
113
 
112
114
  // Checkbox
113
- .ml__checkbox {
115
+ .ms__checkbox {
114
116
  flex-shrink: 0;
115
- margin-top: var(--ml-checkbox-margin-top, $ml-checkbox-margin-top); // Align with first line of text
116
- width: var(--ml-checkbox-size, $ml-checkbox-size);
117
- height: var(--ml-checkbox-size, $ml-checkbox-size);
118
- transform: scale(var(--ml-checkbox-scale, $ml-checkbox-scale));
117
+ margin-top: var(--ms-checkbox-margin-top, $ml-checkbox-margin-top); // Align with first line of text
118
+ margin-right: var(--ms-checkbox-margin-right, $ml-checkbox-margin-right);
119
+ margin-bottom: var(--ms-checkbox-margin-bottom, $ml-checkbox-margin-bottom);
120
+ margin-left: var(--ms-checkbox-margin-left, $ml-checkbox-margin-left);
121
+ width: var(--ms-checkbox-size, $ml-checkbox-size);
122
+ height: var(--ms-checkbox-size, $ml-checkbox-size);
123
+ transform: scale(var(--ms-checkbox-scale, $ml-checkbox-scale));
119
124
  transform-origin: top left;
120
125
  cursor: pointer;
121
126
 
122
- .ml__option--disabled & {
127
+ .ms__option--disabled & {
123
128
  cursor: not-allowed;
124
129
  }
125
130
  }
@@ -129,23 +134,23 @@
129
134
  // ==============================================================================
130
135
 
131
136
  // Option content (rich content wrapper)
132
- .ml__option-content {
137
+ .ms__option-content {
133
138
  flex: 1;
134
139
  display: flex;
135
140
  align-items: flex-start;
136
- gap: var(--ml-option-content-gap, $ml-option-content-gap);
141
+ gap: var(--ms-option-content-gap, $ml-option-content-gap);
137
142
  min-width: 0; // Allow text truncation
138
143
  }
139
144
 
140
145
  // Option icon/SVG
141
- .ml__option-icon {
146
+ .ms__option-icon {
142
147
  flex-shrink: 0;
143
- width: var(--ml-option-icon-size, $ml-option-icon-size);
144
- height: var(--ml-option-icon-size, $ml-option-icon-size);
148
+ width: var(--ms-option-icon-size, $ml-option-icon-size);
149
+ height: var(--ms-option-icon-size, $ml-option-icon-size);
145
150
  display: flex;
146
151
  align-items: center;
147
152
  justify-content: center;
148
- font-size: var(--ml-option-icon-font-size, $ml-option-icon-font-size);
153
+ font-size: var(--ms-option-icon-font-size, $ml-option-icon-font-size);
149
154
 
150
155
  svg {
151
156
  width: 100%;
@@ -155,31 +160,31 @@
155
160
  }
156
161
 
157
162
  // Option text container
158
- .ml__option-text {
163
+ .ms__option-text {
159
164
  flex: 1;
160
165
  min-width: 0;
161
166
  }
162
167
 
163
168
  // Option title/main text
164
- .ml__option-title {
165
- font-size: var(--ml-option-title-font-size, $ml-option-title-font-size);
166
- color: var(--ml-option-title-color, $ml-option-title-color);
167
- line-height: var(--ml-line-height-relaxed, $ml-line-height-relaxed);
169
+ .ms__option-title {
170
+ font-size: var(--ms-option-title-font-size, $ml-option-title-font-size);
171
+ color: var(--ms-option-title-color, $ml-option-title-color);
172
+ line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
168
173
 
169
174
  // Highlight matched text
170
175
  mark {
171
- background: var(--ml-option-mark-bg, $ml-option-mark-bg);
172
- color: var(--ml-option-mark-color, $ml-option-mark-color);
173
- font-weight: var(--ml-option-mark-font-weight, $ml-option-mark-font-weight);
176
+ background: var(--ms-option-mark-background, $ml-option-mark-bg);
177
+ color: var(--ms-option-mark-color, $ml-option-mark-color);
178
+ font-weight: var(--ms-option-mark-font-weight, $ml-option-mark-font-weight);
174
179
  }
175
180
  }
176
181
 
177
182
  // Option subtitle (multiline support)
178
- .ml__option-subtitle {
179
- margin-top: var(--ml-option-subtitle-margin-top, $ml-option-subtitle-margin-top);
180
- font-size: var(--ml-option-subtitle-font-size, $ml-option-subtitle-font-size);
181
- color: var(--ml-option-subtitle-color, $ml-option-subtitle-color);
182
- line-height: var(--ml-option-subtitle-line-height, $ml-option-subtitle-line-height);
183
+ .ms__option-subtitle {
184
+ margin-top: var(--ms-option-subtitle-margin-top, $ml-option-subtitle-margin-top);
185
+ font-size: var(--ms-option-subtitle-font-size, $ml-option-subtitle-font-size);
186
+ color: var(--ms-option-subtitle-color, $ml-option-subtitle-color);
187
+ line-height: var(--ms-option-subtitle-line-height, $ml-option-subtitle-line-height);
183
188
  }
184
189
 
185
190
  // ==============================================================================
@@ -187,24 +192,24 @@
187
192
  // ==============================================================================
188
193
 
189
194
  // Empty state
190
- .ml__empty {
191
- padding: var(--ml-empty-padding, $ml-empty-padding);
195
+ .ms__empty {
196
+ padding: var(--ms-empty-padding, $ml-empty-padding);
192
197
  text-align: center;
193
- font-size: var(--ml-empty-font-size, $ml-empty-font-size);
194
- color: var(--ml-empty-color, $ml-empty-color);
198
+ font-size: var(--ms-empty-font-size, $ml-empty-font-size);
199
+ color: var(--ms-empty-color, $ml-empty-color);
195
200
  }
196
201
 
197
202
  // Loading state
198
- .ml__loader {
203
+ .ms__loader {
199
204
  display: flex;
200
205
  flex-direction: column;
201
206
  align-items: center;
202
207
  justify-content: center;
203
- padding: var(--ml-loader-padding, $ml-loader-padding);
204
- gap: var(--ml-loader-gap, $ml-loader-gap);
208
+ padding: var(--ms-loader-padding, $ml-loader-padding);
209
+ gap: var(--ms-loader-gap, $ml-loader-gap);
205
210
  }
206
211
 
207
- .ml__loading-text {
208
- font-size: var(--ml-loading-text-font-size, $ml-loading-text-font-size);
209
- color: var(--ml-loading-text-color, $ml-loading-text-color);
212
+ .ms__loading-text {
213
+ font-size: var(--ms-loading-text-font-size, $ml-loading-text-font-size);
214
+ color: var(--ms-loading-color, $ml-loading-text-color);
210
215
  }