@keenmate/web-multiselect 1.0.0 → 1.1.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 (12) hide show
  1. package/dist/multiselect.js +1146 -1135
  2. package/dist/multiselect.umd.js +42 -42
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/scss/_badges-display.scss +76 -76
  6. package/src/scss/_css-variables.scss +358 -215
  7. package/src/scss/_input-dropdown.scss +71 -70
  8. package/src/scss/_modifiers.scss +38 -38
  9. package/src/scss/_options.scss +75 -70
  10. package/src/scss/_rtl.scss +31 -31
  11. package/src/scss/_tooltips-popover.scss +51 -51
  12. package/src/scss/_variables.scss +5 -2
package/src/scss/_input-dropdown.scss CHANGED
@@ -10,39 +10,39 @@
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
21
  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);
22
+ padding: var(--ms-input-padding, $ml-input-padding);
23
+ padding-right: var(--ms-input-padding-right, $ml-input-padding-right); // Space for dropdown icon
24
+ font-size: var(--ms-input-font-size, $ml-input-font-size);
25
+ border: var(--ms-input-border-style, $ml-input-border-style);
26
+ border-radius: var(--ms-input-border-radius, $ml-input-border-radius);
27
+ background: var(--ms-input-background, $ml-input-bg);
28
+ color: var(--ms-input-color, $ml-input-text);
29
29
  cursor: pointer;
30
- transition: border-color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
30
+ transition: border-color var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
31
31
 
32
32
  &:focus {
33
33
  outline: none;
34
- border-color: var(--ml-input-focus-border-color, $ml-input-focus-border-color);
34
+ border-color: var(--ms-input-border-color-focus, $ml-input-focus-border-color);
35
35
  }
36
36
 
37
37
  &::placeholder {
38
- color: var(--ml-input-placeholder-color, $ml-input-placeholder-color);
38
+ color: var(--ms-input-placeholder-color, $ml-input-placeholder-color);
39
39
  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);
40
+ transition: opacity var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
41
41
  }
42
42
 
43
43
  // Show placeholder only after component is fully initialized
44
44
  :host([data-ready]) &::placeholder {
45
- opacity: var(--ml-placeholder-opacity, $ml-placeholder-opacity);
45
+ opacity: var(--ms-placeholder-opacity, $ml-placeholder-opacity);
46
46
  }
47
47
  }
48
48
 
@@ -51,17 +51,18 @@
51
51
  // ==============================================================================
52
52
 
53
53
  // Dropdown toggle icon
54
- .ml__toggle {
54
+ .ms__toggle {
55
55
  position: absolute;
56
- right: var(--ml-toggle-right, $ml-toggle-right);
56
+ right: var(--ms-toggle-right, $ml-toggle-right);
57
57
  top: 50%;
58
- transform: var(--ml-transform-center-y, $ml-transform-center-y);
58
+ transform: var(--ms-transform-center-y, $ml-transform-center-y);
59
59
  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);
60
+ color: var(--ms-toggle-icon-color, $ml-toggle-color);
61
+ transition: transform var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
62
62
 
63
- .ml--open & {
64
- transform: var(--ml-transform-center-y, $ml-transform-center-y) rotate(var(--ml-transform-rotate-180, $ml-transform-rotate-180));
63
+ .ms--open & {
64
+ transform: var(--ms-transform-center-y, $ml-transform-center-y) rotate(var(--ms-transform-rotate-180, $ml-transform-rotate-180));
65
+ color: var(--ms-toggle-icon-color-open, $ml-toggle-color);
65
66
  }
66
67
  }
67
68
 
@@ -70,24 +71,24 @@
70
71
  // ==============================================================================
71
72
 
72
73
  // Count badge (appears next to toggle icon)
73
- .ml__counter {
74
+ .ms__counter {
74
75
  position: absolute;
75
- right: var(--ml-counter-offset, $ml-counter-offset); // Space for toggle icon
76
+ right: var(--ms-counter-offset, $ml-counter-offset); // Space for toggle icon
76
77
  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);
78
+ transform: var(--ms-transform-center-y, $ml-transform-center-y);
79
+ padding: var(--ms-counter-padding, $ml-counter-padding);
80
+ background: var(--ms-counter-badge-background, $ml-counter-bg);
81
+ color: var(--ms-counter-badge-color, $ml-counter-color);
82
+ font-size: var(--ms-counter-font-size, $ml-counter-font-size);
83
+ font-weight: var(--ms-counter-font-weight, $ml-counter-font-weight);
84
+ border-radius: var(--ms-counter-border-radius, $ml-counter-border-radius);
84
85
  cursor: pointer;
85
- transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
86
+ transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
86
87
 
87
88
  &: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));
89
+ background: var(--ms-counter-badge-background-hover, $ml-counter-bg-hover);
90
+ transform: var(--ms-transform-center-y, $ml-transform-center-y)
91
+ scale(var(--ms-transform-scale-hover, $ml-transform-scale-hover));
91
92
  }
92
93
  }
93
94
 
@@ -96,18 +97,18 @@
96
97
  // ==============================================================================
97
98
 
98
99
  // Floating search hint (appears above input)
99
- .ml__hint {
100
+ .ms__hint {
100
101
  display: none;
101
102
  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);
103
+ z-index: var(--ms-z-index-popover, $ml-z-index-popover);
104
+ padding: var(--ms-hint-padding, $ml-hint-padding);
105
+ background: var(--ms-hint-background, $ml-hint-bg);
106
+ border: var(--ms-hint-border, $ml-hint-border);
107
+ border-radius: var(--ms-hint-border-radius, $ml-hint-border-radius);
108
+ box-shadow: var(--ms-hint-box-shadow, $ml-hint-box-shadow);
109
+ font-size: var(--ms-hint-font-size, $ml-hint-font-size);
110
+ color: var(--ms-hint-color, $ml-hint-color);
111
+ line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
111
112
  max-width: 100%;
112
113
 
113
114
  &--visible {
@@ -120,20 +121,20 @@
120
121
  // ==============================================================================
121
122
 
122
123
  // Floating dropdown (appears below input)
123
- .ml__dropdown {
124
+ .ms__dropdown {
124
125
  display: none;
125
126
  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);
127
+ z-index: var(--ms-z-index-dropdown, $ml-z-index-dropdown);
128
+ background: var(--ms-dropdown-background, $ml-dropdown-bg);
129
+ border: var(--ms-dropdown-border, $ml-dropdown-border);
130
+ border-radius: var(--ms-dropdown-border-radius, $ml-dropdown-border-radius);
131
+ box-shadow: var(--ms-dropdown-box-shadow, $ml-dropdown-box-shadow);
132
+ max-height: var(--ms-options-max-height, $ml-options-max-height);
132
133
  overflow-y: auto;
133
134
  overscroll-behavior: contain;
134
135
  touch-action: pan-y;
135
136
  -webkit-overflow-scrolling: touch;
136
- color: var(--ml-option-color, $ml-option-color);
137
+ color: var(--ms-dropdown-text-color, $ml-option-color);
137
138
 
138
139
  &--visible {
139
140
  display: block;
@@ -151,12 +152,12 @@
151
152
  // ==============================================================================
152
153
 
153
154
  // Dropdown actions (Select All / Clear All)
154
- .ml__actions {
155
+ .ms__actions {
155
156
  display: flex;
156
157
  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);
158
+ gap: var(--ms-actions-gap, $ml-actions-gap);
159
+ padding: var(--ms-actions-padding, $ml-actions-padding);
160
+ border-bottom: var(--ms-actions-border-bottom, $ml-actions-border-bottom);
160
161
 
161
162
  &--wrap {
162
163
  flex-wrap: wrap;
@@ -165,34 +166,34 @@
165
166
  &--sticky {
166
167
  position: sticky;
167
168
  top: 0;
168
- z-index: var(--ml-z-index-sticky, $ml-z-index-sticky);
169
- background: var(--ml-actions-bg, $ml-actions-bg);
169
+ z-index: var(--ms-z-index-sticky, $ml-z-index-sticky);
170
+ background: var(--ms-actions-background, $ml-actions-bg);
170
171
  }
171
172
  }
172
173
 
173
- .ml__action-btn {
174
+ .ms__action-btn {
174
175
  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);
176
+ padding: var(--ms-action-btn-padding, $ml-action-btn-padding);
177
+ font-size: var(--ms-action-btn-font-size, $ml-action-btn-font-size);
178
+ border: var(--ms-action-btn-border, $ml-action-btn-border);
179
+ border-radius: var(--ms-action-btn-border-radius, $ml-action-btn-border-radius);
180
+ background: var(--ms-action-button-background, $ml-action-btn-bg);
181
+ color: var(--ms-action-button-color, $ml-action-btn-color);
181
182
  cursor: pointer;
182
- transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
183
+ transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
183
184
 
184
185
  &: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);
186
+ background: var(--ms-action-button-background-hover, $ml-action-btn-bg-hover);
187
+ border-color: var(--ms-action-button-border-color-hover, $ml-action-btn-border-color-hover);
187
188
  }
188
189
 
189
190
  &:active {
190
- transform: scale(var(--ml-transform-scale-active, $ml-transform-scale-active));
191
+ transform: scale(var(--ms-transform-scale-active, $ml-transform-scale-active));
191
192
  }
192
193
 
193
194
  &:disabled,
194
195
  &[disabled] {
195
- opacity: var(--ml-disabled-opacity, $ml-disabled-opacity);
196
+ opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
196
197
  cursor: not-allowed;
197
198
  pointer-events: none;
198
199
  }
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
  }