@keenmate/web-multiselect 1.4.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 +39 -4
  2. package/dist/multiselect.js +673 -695
  3. package/dist/multiselect.umd.js +8 -8
  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 +263 -266
  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 +87 -88
  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/_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,35 +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);
33
34
 
34
35
  &:hover:not(:focus):not(:disabled) {
35
- border-color: var(--ms-input-border-color-hover, var(--ms-input-border-color, $ml-input-border));
36
+ border-color: var(--ms-input-border-color-hover, var(--ms-input-border-color, $ms-input-border));
36
37
  }
37
38
 
38
39
  &:focus {
39
40
  outline: none;
40
- 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);
41
42
  }
42
43
 
43
44
  &::placeholder {
44
- color: var(--ms-input-placeholder-color, $ml-input-placeholder-color);
45
+ color: var(--ms-input-placeholder-color, $ms-input-placeholder-color);
45
46
  opacity: 0; // Initially hidden until component is ready
46
- 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);
47
48
  }
48
49
 
49
50
  // Show placeholder only after component is fully initialized
50
51
  :host([data-ready]) &::placeholder {
51
- opacity: var(--ms-placeholder-opacity, $ml-placeholder-opacity);
52
+ opacity: var(--ms-placeholder-opacity, $ms-placeholder-opacity);
52
53
  }
53
54
 
54
55
  // Size variants
@@ -88,16 +89,16 @@
88
89
  // Dropdown toggle icon
89
90
  .ms__toggle {
90
91
  position: absolute;
91
- right: var(--ms-toggle-right, $ml-toggle-right);
92
+ right: var(--ms-toggle-right, $ms-toggle-right);
92
93
  top: 50%;
93
- transform: var(--ms-transform-center-y, $ml-transform-center-y);
94
+ transform: var(--ms-transform-center-y, $ms-transform-center-y);
94
95
  pointer-events: none;
95
- color: var(--ms-toggle-icon-color, $ml-toggle-color);
96
- 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);
97
98
 
98
99
  .ms--open & {
99
- transform: var(--ms-transform-center-y, $ml-transform-center-y) rotate(var(--ms-transform-rotate-180, $ml-transform-rotate-180));
100
- 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);
101
102
  }
102
103
  }
103
104
 
@@ -108,22 +109,22 @@
108
109
  // Count badge (appears next to toggle icon)
109
110
  .ms__counter {
110
111
  position: absolute;
111
- 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
112
113
  top: 50%;
113
- transform: var(--ms-transform-center-y, $ml-transform-center-y);
114
- padding: var(--ms-counter-padding, $ml-counter-padding);
115
- background: var(--ms-counter-badge-background, $ml-counter-bg);
116
- color: var(--ms-counter-badge-color, $ml-counter-color);
117
- font-size: var(--ms-counter-font-size, $ml-counter-font-size);
118
- font-weight: var(--ms-counter-font-weight, $ml-counter-font-weight);
119
- 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);
120
121
  cursor: pointer;
121
- 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);
122
123
 
123
124
  &:hover {
124
- background: var(--ms-counter-badge-background-hover, $ml-counter-bg-hover);
125
- transform: var(--ms-transform-center-y, $ml-transform-center-y)
126
- 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));
127
128
  }
128
129
  }
129
130
 
@@ -135,15 +136,15 @@
135
136
  .ms__hint {
136
137
  display: none;
137
138
  position: absolute;
138
- z-index: var(--ms-z-index-popover, $ml-z-index-popover);
139
- padding: var(--ms-hint-padding, $ml-hint-padding);
140
- background: var(--ms-hint-background, $ml-hint-bg);
141
- border: var(--ms-hint-border, $ml-hint-border);
142
- border-radius: var(--ms-hint-border-radius, $ml-hint-border-radius);
143
- box-shadow: var(--ms-hint-box-shadow, $ml-hint-box-shadow);
144
- font-size: var(--ms-hint-font-size, $ml-hint-font-size);
145
- color: var(--ms-hint-color, $ml-hint-color);
146
- 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);
147
148
  max-width: 100%;
148
149
 
149
150
  &--visible {
@@ -159,37 +160,38 @@
159
160
  .ms__dropdown {
160
161
  display: none;
161
162
  position: absolute;
162
- z-index: var(--ms-z-index-dropdown, $ml-z-index-dropdown);
163
- background: var(--ms-dropdown-background, $ml-dropdown-bg);
164
- border: var(--ms-dropdown-border, $ml-dropdown-border);
165
- border-radius: var(--ms-dropdown-border-radius, $ml-dropdown-border-radius);
166
- box-shadow: var(--ms-dropdown-box-shadow, $ml-dropdown-box-shadow);
167
- 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);
168
170
  overflow-y: auto;
169
171
  overscroll-behavior: contain;
170
172
  touch-action: pan-y;
171
173
  -webkit-overflow-scrolling: touch;
172
- color: var(--ms-dropdown-text-color, $ml-option-color);
174
+ color: var(--ms-dropdown-text-color, $ms-option-color);
173
175
 
174
176
  // Scrollbar styling
175
177
  scrollbar-width: thin; // Firefox
176
- 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);
177
179
 
178
180
  &::-webkit-scrollbar {
179
- width: var(--ms-scrollbar-width, $ml-scrollbar-width);
181
+ width: var(--ms-scrollbar-width, $ms-scrollbar-width);
180
182
  }
181
183
 
182
184
  &::-webkit-scrollbar-track {
183
- background: var(--ms-scrollbar-track-bg, $ml-scrollbar-track-bg);
185
+ background: var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
184
186
  }
185
187
 
186
188
  &::-webkit-scrollbar-thumb {
187
- background: var(--ms-scrollbar-thumb-bg, $ml-scrollbar-thumb-bg);
188
- 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);
189
191
  }
190
192
 
191
193
  &::-webkit-scrollbar-thumb:hover {
192
- 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);
193
195
  }
194
196
 
195
197
  &--visible {
@@ -211,9 +213,9 @@
211
213
  .ms__actions {
212
214
  display: flex;
213
215
  flex-wrap: nowrap;
214
- gap: var(--ms-actions-gap, $ml-actions-gap);
215
- padding: var(--ms-actions-padding, $ml-actions-padding);
216
- 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);
217
219
 
218
220
  &--wrap {
219
221
  flex-wrap: wrap;
@@ -222,34 +224,35 @@
222
224
  &--sticky {
223
225
  position: sticky;
224
226
  top: 0;
225
- z-index: var(--ms-z-index-sticky, $ml-z-index-sticky);
226
- 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);
227
229
  }
228
230
  }
229
231
 
230
232
  .ms__action-btn {
231
233
  flex: 1;
232
- padding: var(--ms-action-btn-padding, $ml-action-btn-padding);
233
- font-size: var(--ms-action-btn-font-size, $ml-action-btn-font-size);
234
- border: var(--ms-action-btn-border, $ml-action-btn-border);
235
- border-radius: var(--ms-action-btn-border-radius, $ml-action-btn-border-radius);
236
- background: var(--ms-action-button-background, $ml-action-btn-bg);
237
- 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);
238
241
  cursor: pointer;
239
- 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);
240
243
 
241
244
  &:hover {
242
- background: var(--ms-action-button-background-hover, $ml-action-btn-bg-hover);
243
- 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);
244
247
  }
245
248
 
246
249
  &:active {
247
- transform: scale(var(--ms-transform-scale-active, $ml-transform-scale-active));
250
+ transform: scale(var(--ms-transform-scale-active, $ms-transform-scale-active));
248
251
  }
249
252
 
250
253
  &:disabled,
251
254
  &[disabled] {
252
- opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
255
+ opacity: var(--ms-disabled-opacity, $ms-disabled-opacity);
253
256
  cursor: not-allowed;
254
257
  pointer-events: none;
255
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 {