@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/_debug.scss CHANGED
@@ -5,55 +5,55 @@
5
5
 
6
6
  @use 'variables' as *;
7
7
 
8
- .ml-debug-info {
9
- margin-top: $ml-spacing-xs;
10
- padding: $ml-spacing-xs;
11
- background-color: $ml-color-neutral-lightest;
12
- border: 1px solid $ml-color-neutral-light;
13
- border-radius: $ml-border-radius;
14
- font-size: $ml-font-size-xs;
15
- color: $ml-color-neutral-darkest;
8
+ .ms-debug-info {
9
+ margin-top: $ms-spacing-xs;
10
+ padding: $ms-spacing-xs;
11
+ background-color: $ms-color-neutral-lightest;
12
+ border: 1px solid $ms-color-neutral-light;
13
+ border-radius: $ms-border-radius;
14
+ font-size: $ms-font-size-xs;
15
+ color: $ms-color-neutral-darkest;
16
16
 
17
17
  details {
18
18
  summary {
19
19
  cursor: pointer;
20
- font-weight: $ml-font-weight-semibold;
21
- color: $ml-color-accent-dark;
20
+ font-weight: $ms-font-weight-semibold;
21
+ color: $ms-color-accent-dark;
22
22
  user-select: none;
23
- padding: $ml-spacing-xs;
24
- border-radius: $ml-border-radius-sm;
23
+ padding: $ms-spacing-xs;
24
+ border-radius: $ms-border-radius-sm;
25
25
 
26
26
  &:hover {
27
- background-color: $ml-color-neutral-lighter;
27
+ background-color: $ms-color-neutral-lighter;
28
28
  }
29
29
 
30
30
  &:focus {
31
- outline: 2px solid $ml-color-accent-base;
31
+ outline: 2px solid $ms-color-accent-base;
32
32
  outline-offset: 2px;
33
33
  }
34
34
  }
35
35
  }
36
36
 
37
- .ml-debug-stats {
37
+ .ms-debug-stats {
38
38
  display: flex;
39
39
  flex-direction: column;
40
- gap: $ml-spacing-xs;
41
- margin-top: $ml-spacing-xs;
42
- padding: $ml-spacing-xs;
43
- background-color: $ml-color-white;
44
- border-radius: $ml-border-radius-sm;
40
+ gap: $ms-spacing-xs;
41
+ margin-top: $ms-spacing-xs;
42
+ padding: $ms-spacing-xs;
43
+ background-color: $ms-color-white;
44
+ border-radius: $ms-border-radius-sm;
45
45
 
46
46
  span {
47
47
  display: flex;
48
48
  justify-content: space-between;
49
49
  padding: 2px 4px;
50
50
  font-family: monospace;
51
- font-size: $ml-font-size-2xs;
51
+ font-size: $ms-font-size-2xs;
52
52
 
53
53
  &::before {
54
54
  content: '•';
55
- margin-right: $ml-spacing-xs;
56
- color: $ml-color-accent-base;
55
+ margin-right: $ms-spacing-xs;
56
+ color: $ms-color-accent-base;
57
57
  }
58
58
  }
59
59
  }
package/src/scss/_input-dropdown.scss CHANGED
@@ -20,31 +20,36 @@
20
20
  .ms__input {
21
21
  box-sizing: border-box;
22
22
  width: 100%;
23
- height: var(--ms-input-size-md-height, $ms-input-size-md-height); // Default to md size (35px)
24
- padding: var(--ms-input-padding, $ml-input-padding);
25
- padding-right: var(--ms-input-padding-right, $ml-input-padding-right); // Space for dropdown icon
26
- font-size: var(--ms-input-font-size, $ml-input-font-size);
27
- border: var(--ms-input-border-style, $ml-input-border-style);
28
- border-radius: var(--ms-input-border-radius, $ml-input-border-radius);
29
- background: var(--ms-input-background, $ml-input-bg);
30
- color: var(--ms-input-color, $ml-input-text);
23
+ font-family: inherit; // Form elements don't inherit font by default
24
+ height: var(--ms-input-height, $ms-input-height);
25
+ padding: var(--ms-input-padding, $ms-input-padding);
26
+ padding-right: var(--ms-input-padding-right, $ms-input-padding-right); // Space for dropdown icon
27
+ font-size: var(--ms-input-font-size, $ms-input-font-size);
28
+ border: var(--ms-input-border-style, $ms-input-border-style);
29
+ border-radius: var(--ms-input-border-radius, $ms-input-border-radius);
30
+ background: var(--ms-input-background, $ms-input-bg);
31
+ color: var(--ms-input-color, $ms-input-text);
31
32
  cursor: pointer;
32
- transition: border-color var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
33
+ transition: border-color var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
34
+
35
+ &:hover:not(:focus):not(:disabled) {
36
+ border-color: var(--ms-input-border-color-hover, var(--ms-input-border-color, $ms-input-border));
37
+ }
33
38
 
34
39
  &:focus {
35
40
  outline: none;
36
- border-color: var(--ms-input-border-color-focus, $ml-input-focus-border-color);
41
+ border-color: var(--ms-input-border-color-focus, $ms-input-focus-border-color);
37
42
  }
38
43
 
39
44
  &::placeholder {
40
- color: var(--ms-input-placeholder-color, $ml-input-placeholder-color);
45
+ color: var(--ms-input-placeholder-color, $ms-input-placeholder-color);
41
46
  opacity: 0; // Initially hidden until component is ready
42
- transition: opacity var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
47
+ transition: opacity var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
43
48
  }
44
49
 
45
50
  // Show placeholder only after component is fully initialized
46
51
  :host([data-ready]) &::placeholder {
47
- opacity: var(--ms-placeholder-opacity, $ml-placeholder-opacity);
52
+ opacity: var(--ms-placeholder-opacity, $ms-placeholder-opacity);
48
53
  }
49
54
 
50
55
  // Size variants
@@ -84,16 +89,16 @@
84
89
  // Dropdown toggle icon
85
90
  .ms__toggle {
86
91
  position: absolute;
87
- right: var(--ms-toggle-right, $ml-toggle-right);
92
+ right: var(--ms-toggle-right, $ms-toggle-right);
88
93
  top: 50%;
89
- transform: var(--ms-transform-center-y, $ml-transform-center-y);
94
+ transform: var(--ms-transform-center-y, $ms-transform-center-y);
90
95
  pointer-events: none;
91
- color: var(--ms-toggle-icon-color, $ml-toggle-color);
92
- transition: transform var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
96
+ color: var(--ms-toggle-icon-color, $ms-toggle-color);
97
+ transition: transform var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
93
98
 
94
99
  .ms--open & {
95
- transform: var(--ms-transform-center-y, $ml-transform-center-y) rotate(var(--ms-transform-rotate-180, $ml-transform-rotate-180));
96
- color: var(--ms-toggle-icon-color-open, $ml-toggle-color);
100
+ transform: var(--ms-transform-center-y, $ms-transform-center-y) rotate(var(--ms-transform-rotate-180, $ms-transform-rotate-180));
101
+ color: var(--ms-toggle-icon-color-open, $ms-toggle-color);
97
102
  }
98
103
  }
99
104
 
@@ -104,22 +109,22 @@
104
109
  // Count badge (appears next to toggle icon)
105
110
  .ms__counter {
106
111
  position: absolute;
107
- right: var(--ms-counter-offset, $ml-counter-offset); // Space for toggle icon
112
+ right: var(--ms-counter-offset, $ms-counter-offset); // Space for toggle icon
108
113
  top: 50%;
109
- transform: var(--ms-transform-center-y, $ml-transform-center-y);
110
- padding: var(--ms-counter-padding, $ml-counter-padding);
111
- background: var(--ms-counter-badge-background, $ml-counter-bg);
112
- color: var(--ms-counter-badge-color, $ml-counter-color);
113
- font-size: var(--ms-counter-font-size, $ml-counter-font-size);
114
- font-weight: var(--ms-counter-font-weight, $ml-counter-font-weight);
115
- border-radius: var(--ms-counter-border-radius, $ml-counter-border-radius);
114
+ transform: var(--ms-transform-center-y, $ms-transform-center-y);
115
+ padding: var(--ms-counter-padding, $ms-counter-padding);
116
+ background: var(--ms-counter-badge-background, $ms-counter-bg);
117
+ color: var(--ms-counter-badge-color, $ms-counter-color);
118
+ font-size: var(--ms-counter-font-size, $ms-counter-font-size);
119
+ font-weight: var(--ms-counter-font-weight, $ms-counter-font-weight);
120
+ border-radius: var(--ms-counter-border-radius, $ms-counter-border-radius);
116
121
  cursor: pointer;
117
- transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
122
+ transition: all var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
118
123
 
119
124
  &:hover {
120
- background: var(--ms-counter-badge-background-hover, $ml-counter-bg-hover);
121
- transform: var(--ms-transform-center-y, $ml-transform-center-y)
122
- scale(var(--ms-transform-scale-hover, $ml-transform-scale-hover));
125
+ background: var(--ms-counter-badge-background-hover, $ms-counter-bg-hover);
126
+ transform: var(--ms-transform-center-y, $ms-transform-center-y)
127
+ scale(var(--ms-transform-scale-hover, $ms-transform-scale-hover));
123
128
  }
124
129
  }
125
130
 
@@ -131,15 +136,15 @@
131
136
  .ms__hint {
132
137
  display: none;
133
138
  position: absolute;
134
- z-index: var(--ms-z-index-popover, $ml-z-index-popover);
135
- padding: var(--ms-hint-padding, $ml-hint-padding);
136
- background: var(--ms-hint-background, $ml-hint-bg);
137
- border: var(--ms-hint-border, $ml-hint-border);
138
- border-radius: var(--ms-hint-border-radius, $ml-hint-border-radius);
139
- box-shadow: var(--ms-hint-box-shadow, $ml-hint-box-shadow);
140
- font-size: var(--ms-hint-font-size, $ml-hint-font-size);
141
- color: var(--ms-hint-color, $ml-hint-color);
142
- line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
139
+ z-index: var(--ms-z-index-popover, $ms-z-index-popover);
140
+ padding: var(--ms-hint-padding, $ms-hint-padding);
141
+ background: var(--ms-hint-background, $ms-hint-bg);
142
+ border: var(--ms-hint-border, $ms-hint-border);
143
+ border-radius: var(--ms-hint-border-radius, $ms-hint-border-radius);
144
+ box-shadow: var(--ms-hint-box-shadow, $ms-hint-box-shadow);
145
+ font-size: var(--ms-hint-font-size, $ms-hint-font-size);
146
+ color: var(--ms-hint-color, $ms-hint-color);
147
+ line-height: var(--ms-line-height-relaxed, $ms-line-height-relaxed);
143
148
  max-width: 100%;
144
149
 
145
150
  &--visible {
@@ -155,37 +160,38 @@
155
160
  .ms__dropdown {
156
161
  display: none;
157
162
  position: absolute;
158
- z-index: var(--ms-z-index-dropdown, $ml-z-index-dropdown);
159
- background: var(--ms-dropdown-background, $ml-dropdown-bg);
160
- border: var(--ms-dropdown-border, $ml-dropdown-border);
161
- border-radius: var(--ms-dropdown-border-radius, $ml-dropdown-border-radius);
162
- box-shadow: var(--ms-dropdown-box-shadow, $ml-dropdown-box-shadow);
163
- max-height: var(--ms-options-max-height, $ml-options-max-height);
163
+ font-family: inherit; // Ensure font inherits from container
164
+ z-index: var(--ms-z-index-dropdown, $ms-z-index-dropdown);
165
+ background: var(--ms-dropdown-background, $ms-dropdown-bg);
166
+ border: var(--ms-dropdown-border, $ms-dropdown-border);
167
+ border-radius: var(--ms-dropdown-border-radius, $ms-dropdown-border-radius);
168
+ box-shadow: var(--ms-dropdown-box-shadow, $ms-dropdown-box-shadow);
169
+ max-height: var(--ms-options-max-height, $ms-options-max-height);
164
170
  overflow-y: auto;
165
171
  overscroll-behavior: contain;
166
172
  touch-action: pan-y;
167
173
  -webkit-overflow-scrolling: touch;
168
- color: var(--ms-dropdown-text-color, $ml-option-color);
174
+ color: var(--ms-dropdown-text-color, $ms-option-color);
169
175
 
170
176
  // Scrollbar styling
171
177
  scrollbar-width: thin; // Firefox
172
- scrollbar-color: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
178
+ scrollbar-color: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
173
179
 
174
180
  &::-webkit-scrollbar {
175
- width: var(--ms-scrollbar-width, $ml-scrollbar-width);
181
+ width: var(--ms-scrollbar-width, $ms-scrollbar-width);
176
182
  }
177
183
 
178
184
  &::-webkit-scrollbar-track {
179
- background: var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
185
+ background: var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
180
186
  }
181
187
 
182
188
  &::-webkit-scrollbar-thumb {
183
- background: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg);
184
- border-radius: var(--ms-scrollbar-thumb-border-radius, $ml-scrollbar-thumb-border-radius);
189
+ background: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg);
190
+ border-radius: var(--ms-scrollbar-thumb-border-radius, $ms-scrollbar-thumb-border-radius);
185
191
  }
186
192
 
187
193
  &::-webkit-scrollbar-thumb:hover {
188
- background: var(--ms-scrollbar-thumb-bg-hover, $ml-scrollbar-thumb-bg-hover);
194
+ background: var(--ms-scrollbar-thumb-bg-hover, $ms-scrollbar-thumb-bg-hover);
189
195
  }
190
196
 
191
197
  &--visible {
@@ -207,9 +213,9 @@
207
213
  .ms__actions {
208
214
  display: flex;
209
215
  flex-wrap: nowrap;
210
- gap: var(--ms-actions-gap, $ml-actions-gap);
211
- padding: var(--ms-actions-padding, $ml-actions-padding);
212
- border-bottom: var(--ms-actions-border-bottom, $ml-actions-border-bottom);
216
+ gap: var(--ms-actions-gap, $ms-actions-gap);
217
+ padding: var(--ms-actions-padding, $ms-actions-padding);
218
+ border-bottom: var(--ms-actions-border-bottom, $ms-actions-border-bottom);
213
219
 
214
220
  &--wrap {
215
221
  flex-wrap: wrap;
@@ -218,34 +224,35 @@
218
224
  &--sticky {
219
225
  position: sticky;
220
226
  top: 0;
221
- z-index: var(--ms-z-index-sticky, $ml-z-index-sticky);
222
- background: var(--ms-actions-background, $ml-actions-bg);
227
+ z-index: var(--ms-z-index-sticky, $ms-z-index-sticky);
228
+ background: var(--ms-actions-background, $ms-actions-bg);
223
229
  }
224
230
  }
225
231
 
226
232
  .ms__action-btn {
227
233
  flex: 1;
228
- padding: var(--ms-action-btn-padding, $ml-action-btn-padding);
229
- font-size: var(--ms-action-btn-font-size, $ml-action-btn-font-size);
230
- border: var(--ms-action-btn-border, $ml-action-btn-border);
231
- border-radius: var(--ms-action-btn-border-radius, $ml-action-btn-border-radius);
232
- background: var(--ms-action-button-background, $ml-action-btn-bg);
233
- color: var(--ms-action-button-color, $ml-action-btn-color);
234
+ font-family: inherit; // Form elements don't inherit font by default
235
+ padding: var(--ms-action-btn-padding, $ms-action-btn-padding);
236
+ font-size: var(--ms-action-btn-font-size, $ms-action-btn-font-size);
237
+ border: var(--ms-action-btn-border, $ms-action-btn-border);
238
+ border-radius: var(--ms-action-btn-border-radius, $ms-action-btn-border-radius);
239
+ background: var(--ms-action-button-background, $ms-action-btn-bg);
240
+ color: var(--ms-action-button-color, $ms-action-btn-color);
234
241
  cursor: pointer;
235
- transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
242
+ transition: all var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
236
243
 
237
244
  &:hover {
238
- background: var(--ms-action-button-background-hover, $ml-action-btn-bg-hover);
239
- border-color: var(--ms-action-button-border-color-hover, $ml-action-btn-border-color-hover);
245
+ background: var(--ms-action-button-background-hover, $ms-action-btn-bg-hover);
246
+ border-color: var(--ms-action-button-border-color-hover, $ms-action-btn-border-color-hover);
240
247
  }
241
248
 
242
249
  &:active {
243
- transform: scale(var(--ms-transform-scale-active, $ml-transform-scale-active));
250
+ transform: scale(var(--ms-transform-scale-active, $ms-transform-scale-active));
244
251
  }
245
252
 
246
253
  &:disabled,
247
254
  &[disabled] {
248
- opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
255
+ opacity: var(--ms-disabled-opacity, $ms-disabled-opacity);
249
256
  cursor: not-allowed;
250
257
  pointer-events: none;
251
258
  }
package/src/scss/_modifiers.scss CHANGED
@@ -1,70 +1,11 @@
1
1
  // ==============================================================================
2
2
  // MODIFIERS & VARIANTS
3
3
  // ==============================================================================
4
- // Size variants (xs, sm, lg, xl) and state modifiers (disabled, no-checkboxes)
4
+ // State modifiers (disabled, no-checkboxes)
5
+ // Note: Size variants removed - use --ms-rem for global scaling instead
5
6
 
6
7
  @use 'variables' as *;
7
8
 
8
- // ==============================================================================
9
- // SIZE VARIANTS
10
- // ==============================================================================
11
-
12
- .ms--xs {
13
- .ms__input {
14
- font-size: var(--ms-font-size-xs, $ml-font-size-xs);
15
- }
16
-
17
- .ms__option {
18
- padding: var(--ms-spacing-xs, $ml-spacing-xs) var(--ms-spacing-sm, $ml-spacing-sm);
19
- }
20
-
21
- .ms__option-title {
22
- font-size: var(--ms-font-size-xs, $ml-font-size-xs);
23
- }
24
-
25
- .ms__badge {
26
- font-size: var(--ms-font-size-2xs, $ml-font-size-2xs);
27
- }
28
- }
29
-
30
- .ms--sm {
31
- .ms__input {
32
- font-size: var(--ms-font-size-xs, $ml-font-size-xs);
33
- }
34
-
35
- .ms__option-title {
36
- font-size: var(--ms-font-size-xs, $ml-font-size-xs);
37
- }
38
- }
39
-
40
- .ms--lg {
41
- .ms__input {
42
- font-size: var(--ms-font-size-base, $ml-font-size-base);
43
- }
44
-
45
- .ms__option-title {
46
- font-size: var(--ms-font-size-base, $ml-font-size-base);
47
- }
48
-
49
- .ms__badge {
50
- font-size: var(--ms-font-size-sm, $ml-font-size-sm);
51
- }
52
- }
53
-
54
- .ms--xl {
55
- .ms__input {
56
- font-size: var(--ms-font-size-lg, $ml-font-size-lg);
57
- }
58
-
59
- .ms__option-title {
60
- font-size: var(--ms-font-size-lg, $ml-font-size-lg);
61
- }
62
-
63
- .ms__badge {
64
- font-size: var(--ms-font-size-base, $ml-font-size-base);
65
- }
66
- }
67
-
68
9
  // ==============================================================================
69
10
  // STATE MODIFIERS
70
11
  // ==============================================================================
@@ -72,13 +13,13 @@
72
13
  // Disabled state
73
14
  .ms--disabled {
74
15
  .ms__input {
75
- opacity: var(--ms-disabled-input-opacity, $ml-disabled-input-opacity);
16
+ opacity: var(--ms-disabled-input-opacity, $ms-disabled-input-opacity);
76
17
  cursor: not-allowed;
77
- background: var(--ms-input-bg-disabled, $ml-input-bg-disabled);
18
+ background: var(--ms-input-bg-disabled, $ms-input-bg-disabled);
78
19
  }
79
20
 
80
21
  .ms__toggle {
81
- opacity: var(--ms-disabled-input-opacity, $ml-disabled-input-opacity);
22
+ opacity: var(--ms-disabled-input-opacity, $ms-disabled-input-opacity);
82
23
  }
83
24
  }
84
25
 
@@ -86,7 +27,7 @@
86
27
  .ms--no-checkboxes {
87
28
  .ms__option {
88
29
  gap: 0; // Remove gap since there's no checkbox
89
- padding-left: var(--ms-option-padding-h, $ml-option-padding-h); // Adjust padding
30
+ padding-left: var(--ms-option-padding-h, $ms-option-padding-h); // Adjust padding
90
31
  }
91
32
 
92
33
  .ms__option-content {