@keenmate/web-multiselect 1.2.0 → 1.3.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/README.md +32 -0
  2. package/dist/multiselect.js +613 -613
  3. package/dist/multiselect.umd.js +22 -22
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/scss/_badges-display.scss +1 -0
  7. package/src/scss/_base.scss +1 -1
  8. package/src/scss/_css-variables.scss +36 -0
  9. package/src/scss/_input-dropdown.scss +22 -0
  10. package/src/scss/_options.scss +90 -3
  11. package/src/scss/_tooltips-popover.scss +21 -0
  12. package/src/scss/_variables.scss +85 -63
package/src/scss/_variables.scss CHANGED
@@ -12,21 +12,21 @@
12
12
  // ==============================================================================
13
13
  // Raw values that other variables reference
14
14
 
15
- // Padding & Spacing
16
- $padding-xs: 0.25rem !default;
17
- $padding-sm: 0.5rem !default;
18
- $padding-base: 0.75rem !default;
19
- $padding-lg: 1rem !default;
20
-
21
- // Border Radius
22
- $border-radius-base: 0.375rem !default;
23
- $border-radius-sm: 0.25rem !default;
15
+ // Padding & Spacing (using --ms-rem for scalability)
16
+ $padding-xs: calc(0.4 * var(--ms-rem)) !default; // 4px
17
+ $padding-sm: calc(0.8 * var(--ms-rem)) !default; // 8px
18
+ $padding-base: calc(1.2 * var(--ms-rem)) !default; // 12px
19
+ $padding-lg: calc(1.6 * var(--ms-rem)) !default; // 16px
20
+
21
+ // Border Radius (using --ms-rem for scalability)
22
+ $border-radius-base: calc(0.6 * var(--ms-rem)) !default; // 6px
23
+ $border-radius-sm: calc(0.4 * var(--ms-rem)) !default; // 4px
24
24
  $border-radius-full: 50% !default;
25
25
 
26
- // Font Sizes
27
- $font-size-base: 0.875rem !default;
28
- $font-size-sm: 0.75rem !default;
29
- $font-size-lg: 1rem !default;
26
+ // Font Sizes (using --ms-rem for scalability)
27
+ $font-size-base: calc(1.4 * var(--ms-rem)) !default; // 14px
28
+ $font-size-sm: calc(1.2 * var(--ms-rem)) !default; // 12px
29
+ $font-size-lg: calc(1.6 * var(--ms-rem)) !default; // 16px
30
30
 
31
31
  // Border Width
32
32
  $border-width-base: 1px !default;
@@ -34,10 +34,10 @@ $border-width-base: 1px !default;
34
34
  // ==============================================================================
35
35
  // 2. SPACING SCALE
36
36
  // ==============================================================================
37
- $ml-spacing-xs: $padding-xs !default; // 0.25rem
38
- $ml-spacing-sm: $padding-sm !default; // 0.5rem
39
- $ml-spacing-md: $padding-base !default; // 0.75rem
40
- $ml-spacing-lg: $padding-lg !default; // 1rem
37
+ $ml-spacing-xs: $padding-xs !default; // 4px
38
+ $ml-spacing-sm: $padding-sm !default; // 8px
39
+ $ml-spacing-md: $padding-base !default; // 12px
40
+ $ml-spacing-lg: $padding-lg !default; // 16px
41
41
 
42
42
  // ==============================================================================
43
43
  // 3. COLOR PALETTE
@@ -63,14 +63,14 @@ $ml-color-tooltip-bg: #333 !default;
63
63
  $ml-color-tooltip-text: #fff !default;
64
64
 
65
65
  // ==============================================================================
66
- // 4. TYPOGRAPHY SCALE
66
+ // 4. TYPOGRAPHY SCALE (using --ms-rem for scalability)
67
67
  // ==============================================================================
68
- $ml-font-size-2xs: 0.625rem !default;
69
- $ml-font-size-xs: $font-size-sm !default; // 0.75rem
70
- $ml-font-size-sm: $font-size-base !default; // 0.875rem
71
- $ml-font-size-base: $font-size-lg !default; // 1rem
72
- $ml-font-size-lg: 1.125rem !default;
73
- $ml-font-size-xl: 1.25rem !default;
68
+ $ml-font-size-2xs: calc(1 * var(--ms-rem)) !default; // 10px
69
+ $ml-font-size-xs: $font-size-sm !default; // 12px (via $font-size-sm)
70
+ $ml-font-size-sm: $font-size-base !default; // 14px (via $font-size-base)
71
+ $ml-font-size-base: $font-size-lg !default; // 16px (via $font-size-lg)
72
+ $ml-font-size-lg: calc(1.8 * var(--ms-rem)) !default; // 18px
73
+ $ml-font-size-xl: calc(2 * var(--ms-rem)) !default; // 20px
74
74
 
75
75
  $ml-font-weight-medium: 500 !default;
76
76
  $ml-font-weight-semibold: 600 !default;
@@ -108,21 +108,21 @@ $ml-z-index-dropdown: 9999 !default;
108
108
  $ml-z-index-popover: 10000 !default;
109
109
 
110
110
  // ==============================================================================
111
- // 8. LAYOUT & DIMENSIONS
111
+ // 8. LAYOUT & DIMENSIONS (using --ms-rem for scalability)
112
112
  // ==============================================================================
113
- $ml-input-icon-spacing: 2.5rem !default;
114
- $ml-counter-offset: 2rem !default;
115
- $ml-option-icon-size: 1.25rem !default;
116
- $ml-count-clear-size: 1rem !default;
117
- $ml-badge-height: 1.7rem !default;
118
- $ml-badge-remove-width: 1.7rem !default;
119
- $ml-popover-close-size: 1.5rem !default;
113
+ $ml-input-icon-spacing: calc(4 * var(--ms-rem)) !default; // 40px
114
+ $ml-counter-offset: calc(3.2 * var(--ms-rem)) !default; // 32px
115
+ $ml-option-icon-size: calc(2 * var(--ms-rem)) !default; // 20px
116
+ $ml-count-clear-size: calc(1.6 * var(--ms-rem)) !default; // 16px
117
+ $ml-badge-height: calc(2.7 * var(--ms-rem)) !default; // 27px
118
+ $ml-badge-remove-width: calc(2.7 * var(--ms-rem)) !default; // 27px
119
+ $ml-popover-close-size: calc(2.4 * var(--ms-rem)) !default; // 24px
120
120
 
121
- $ml-options-max-height: 20rem !default;
122
- $ml-selected-popover-width: 20rem !default;
123
- $ml-selected-popover-max-height: 20rem !default;
124
- $ml-selected-popover-body-max-height: 18rem !default;
125
- $ml-tooltip-max-width: 20rem !default;
121
+ $ml-options-max-height: calc(32 * var(--ms-rem)) !default; // 320px
122
+ $ml-selected-popover-width: calc(32 * var(--ms-rem)) !default; // 320px
123
+ $ml-selected-popover-max-height: calc(32 * var(--ms-rem)) !default; // 320px
124
+ $ml-selected-popover-body-max-height: calc(28.8 * var(--ms-rem)) !default; // 288px
125
+ $ml-tooltip-max-width: calc(32 * var(--ms-rem)) !default; // 320px
126
126
 
127
127
  // ==============================================================================
128
128
  // 9. OPACITY VALUES
@@ -179,34 +179,35 @@ $ml-input-padding-right: $ml-input-icon-spacing !default;
179
179
  $ml-input-placeholder-color: $ml-color-neutral-dark !default;
180
180
  $ml-input-bg-disabled: rgba($ml-color-neutral-dark, $ml-opacity-disabled-bg) !default;
181
181
 
182
- // Input Size Variants
182
+ // Input Size Variants (using --ms-rem for scalability)
183
183
  // ==============================================================================
184
- // All values in px for consistent sizing across different root font sizes
185
- // Heights: xs=24px, sm=28px, md=35px, lg=42px, xl=50px
186
- $ms-input-size-xs-font: 12px !default;
187
- $ms-input-size-xs-padding-v: 4px !default;
188
- $ms-input-size-xs-padding-h: 8px !default;
189
- $ms-input-size-xs-height: 24px !default;
184
+ // Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px (Pure Admin standard)
185
+ // All values use calc() with --ms-rem for consistent scaling
190
186
 
191
- $ms-input-size-sm-font: 13px !default;
192
- $ms-input-size-sm-padding-v: 5px !default;
193
- $ms-input-size-sm-padding-h: 8px !default;
194
- $ms-input-size-sm-height: 28px !default;
187
+ $ms-input-size-xs-font: calc(1.2 * var(--ms-rem)) !default; // 12px
188
+ $ms-input-size-xs-padding-v: calc(0.4 * var(--ms-rem)) !default; // 4px
189
+ $ms-input-size-xs-padding-h: calc(0.8 * var(--ms-rem)) !default; // 8px
190
+ $ms-input-size-xs-height: calc(3.1 * var(--ms-rem)) !default; // 31px
195
191
 
196
- $ms-input-size-md-font: 14px !default;
197
- $ms-input-size-md-padding-v: 8px !default;
198
- $ms-input-size-md-padding-h: 12px !default;
199
- $ms-input-size-md-height: 35px !default;
192
+ $ms-input-size-sm-font: calc(1.3 * var(--ms-rem)) !default; // 13px
193
+ $ms-input-size-sm-padding-v: calc(0.5 * var(--ms-rem)) !default; // 5px
194
+ $ms-input-size-sm-padding-h: calc(0.8 * var(--ms-rem)) !default; // 8px
195
+ $ms-input-size-sm-height: calc(3.3 * var(--ms-rem)) !default; // 33px
200
196
 
201
- $ms-input-size-lg-font: 16px !default;
202
- $ms-input-size-lg-padding-v: 10px !default;
203
- $ms-input-size-lg-padding-h: 14px !default;
204
- $ms-input-size-lg-height: 42px !default;
197
+ $ms-input-size-md-font: calc(1.4 * var(--ms-rem)) !default; // 14px
198
+ $ms-input-size-md-padding-v: calc(0.8 * var(--ms-rem)) !default; // 8px
199
+ $ms-input-size-md-padding-h: calc(1.2 * var(--ms-rem)) !default; // 12px
200
+ $ms-input-size-md-height: calc(3.5 * var(--ms-rem)) !default; // 35px
205
201
 
206
- $ms-input-size-xl-font: 18px !default;
207
- $ms-input-size-xl-padding-v: 12px !default;
208
- $ms-input-size-xl-padding-h: 16px !default;
209
- $ms-input-size-xl-height: 50px !default;
202
+ $ms-input-size-lg-font: calc(1.6 * var(--ms-rem)) !default; // 16px
203
+ $ms-input-size-lg-padding-v: calc(1 * var(--ms-rem)) !default; // 10px
204
+ $ms-input-size-lg-padding-h: calc(1.4 * var(--ms-rem)) !default; // 14px
205
+ $ms-input-size-lg-height: calc(3.8 * var(--ms-rem)) !default; // 38px
206
+
207
+ $ms-input-size-xl-font: calc(1.8 * var(--ms-rem)) !default; // 18px
208
+ $ms-input-size-xl-padding-v: calc(1.2 * var(--ms-rem)) !default; // 12px
209
+ $ms-input-size-xl-padding-h: calc(1.6 * var(--ms-rem)) !default; // 16px
210
+ $ms-input-size-xl-height: calc(4.1 * var(--ms-rem)) !default; // 41px
210
211
 
211
212
  // Text Colors
212
213
  // ==============================================================================
@@ -232,7 +233,7 @@ $ml-toggle-right: $ml-input-padding-h !default;
232
233
 
233
234
  // Count Badge (in input)
234
235
  // ==============================================================================
235
- $ml-counter-padding: 0.125rem 0.25rem !default;
236
+ $ml-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem)) !default; // 2px 4px
236
237
  $ml-counter-bg: $ml-accent-color !default;
237
238
  $ml-counter-color: $ml-text-white !default;
238
239
  $ml-counter-font-size: $ml-font-size-xs !default;
@@ -315,6 +316,7 @@ $ml-option-outline-focused: $ml-focus-outline-width solid $ml-accent-color !defa
315
316
  $ml-option-bg-matched: rgba($ml-accent-color, 0.08) !default;
316
317
  $ml-option-border-matched: 3px solid rgba($ml-accent-color, 0.4) !default;
317
318
  $ml-option-bg-selected: rgba($ml-accent-color, $ml-opacity-option-selected-bg) !default;
319
+ $ml-option-color-selected: inherit !default; // Text color when selected (use 'inherit' to keep default, or set explicit color like #ffffff)
318
320
 
319
321
  // Option Content
320
322
  // ==============================================================================
@@ -406,6 +408,7 @@ $ml-badge-bg-active: $ml-color-accent-lighter !default;
406
408
  $ml-badge-font-size: $ml-font-size-xs !default;
407
409
  $ml-badge-font-weight: $ml-font-weight-semibold !default;
408
410
  $ml-badge-border-radius: $ml-border-radius !default;
411
+ $ml-badge-border: none !default; // No border by default
409
412
 
410
413
  // Badge Text
411
414
  // ==============================================================================
@@ -482,14 +485,25 @@ $ml-selected-popover-body-padding: $ml-spacing-sm !default;
482
485
 
483
486
  // Checkbox
484
487
  // ==============================================================================
485
- $ml-checkbox-offset: 0.125rem !default;
488
+ $ml-checkbox-offset: calc(0.2 * var(--ms-rem)) !default; // 2px
486
489
  $ml-checkbox-margin-top: $ml-checkbox-offset !default;
487
490
  $ml-checkbox-margin-right: 0 !default; // Horizontal spacing handled by flexbox gap
488
491
  $ml-checkbox-margin-bottom: 0 !default;
489
492
  $ml-checkbox-margin-left: 0 !default;
490
- $ml-checkbox-size: 16px !default; // Width and height of checkbox
493
+ $ml-checkbox-size: calc(1.6 * var(--ms-rem)) !default; // 16px - Width and height of checkbox
491
494
  $ml-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
492
495
 
496
+ // Checkbox Styling (custom checkbox appearance)
497
+ $ml-checkbox-bg: #ffffff !default; // White background for better contrast
498
+ $ml-checkbox-border: 1px solid $ml-color-neutral-base !default; // Darker border (#d1d5db)
499
+ $ml-checkbox-border-radius: calc(0.3 * var(--ms-rem)) !default; // 3px
500
+ $ml-checkbox-checked-bg: $ml-accent-color !default;
501
+ $ml-checkbox-checked-border: 1px solid $ml-accent-color !default;
502
+ $ml-checkbox-checkmark-color: $ml-text-white !default;
503
+ $ml-checkbox-hover-border-color: $ml-accent-color !default;
504
+ $ml-checkbox-disabled-bg: $ml-primary-bg-hover !default;
505
+ $ml-checkbox-disabled-border: 1px solid $ml-border-color !default;
506
+
493
507
  // Placeholder
494
508
  // ==============================================================================
495
509
  $ml-placeholder-opacity: $ml-opacity-placeholder !default;
@@ -498,3 +512,11 @@ $ml-placeholder-opacity: $ml-opacity-placeholder !default;
498
512
  // ==============================================================================
499
513
  $ml-disabled-opacity: $ml-opacity-disabled !default;
500
514
  $ml-disabled-input-opacity: $ml-opacity-disabled-input !default;
515
+
516
+ // Scrollbar
517
+ // ==============================================================================
518
+ $ml-scrollbar-width: 8px !default;
519
+ $ml-scrollbar-track-bg: transparent !default;
520
+ $ml-scrollbar-thumb-bg: $ml-color-neutral-base !default; // #d1d5db
521
+ $ml-scrollbar-thumb-bg-hover: $ml-color-neutral-dark !default; // #6b7280
522
+ $ml-scrollbar-thumb-border-radius: 4px !default;