@keenmate/web-multiselect 1.0.0-rc10 → 1.0.0

package/src/scss/_options.scss

@@ -57,7 +57,7 @@
 // Individual option
 .ml__option {
   display: flex;
-  align-items: flex-start;
+  align-items: var(--ml-checkbox-align, flex-start); // Support checkbox alignment
   gap: var(--ml-option-gap, $ml-option-gap);
   padding: var(--ml-option-padding, $ml-option-padding);
   cursor: pointer;
@@ -94,6 +94,15 @@
       background: var(--ml-option-bg, $ml-option-bg);
     }
   }
+
+  // Checkbox alignment variants
+  &[data-checkbox-align="center"] {
+    --ml-checkbox-align: center;
+  }
+
+  &[data-checkbox-align="bottom"] {
+    --ml-checkbox-align: flex-end;
+  }
 }
 
 // ==============================================================================
@@ -104,6 +113,10 @@
 .ml__checkbox {
   flex-shrink: 0;
   margin-top: var(--ml-checkbox-margin-top, $ml-checkbox-margin-top); // Align with first line of text
+  width: var(--ml-checkbox-size, $ml-checkbox-size);
+  height: var(--ml-checkbox-size, $ml-checkbox-size);
+  transform: scale(var(--ml-checkbox-scale, $ml-checkbox-scale));
+  transform-origin: top left;
   cursor: pointer;
 
   .ml__option--disabled & {

package/src/scss/_rtl.scss

@@ -28,8 +28,8 @@
   }
 
   // Move count badge to left side
-  .ml__count-badge {
-    left: var(--ml-count-badge-offset, $ml-count-badge-offset) !important;
+  .ml__counter {
+    left: var(--ml-counter-offset, $ml-counter-offset) !important;
     right: auto !important;
   }
 
@@ -62,28 +62,28 @@
   }
 
   // ==============================================================================
-  // PILLS LAYOUT
+  // BADGES LAYOUT
   // ==============================================================================
 
-  .ml__pills {
+  .ml__badges {
     direction: rtl;
   }
 
-  // Pills flow right-to-left
-  .ml__pill {
+  // Badges flow right-to-left
+  .ml__badge {
     flex-direction: row-reverse;
   }
 
-  // Remove button on left side of pill
-  .ml__pill-remove {
-    border-radius: var(--ml-pill-remove-border-radius-rtl, $ml-pill-border-radius) 0 0 var(--ml-pill-remove-border-radius-rtl, $ml-pill-border-radius);
-    border-left: var(--ml-pill-remove-border, $ml-pill-remove-border);
+  // Remove button on left side of badge
+  .ml__badge-remove {
+    border-radius: var(--ml-badge-remove-border-radius-rtl, $ml-badge-border-radius) 0 0 var(--ml-badge-remove-border-radius-rtl, $ml-badge-border-radius);
+    border-left: var(--ml-badge-remove-border, $ml-badge-remove-border);
     border-right: none;
   }
 
-  // Pill text rounded on right
-  .ml__pill-text {
-    border-radius: 0 var(--ml-pill-text-border-radius-rtl, $ml-pill-border-radius) var(--ml-pill-text-border-radius-rtl, $ml-pill-border-radius) 0;
+  // Badge text rounded on right
+  .ml__badge-text {
+    border-radius: 0 var(--ml-badge-text-border-radius-rtl, $ml-badge-border-radius) var(--ml-badge-text-border-radius-rtl, $ml-badge-border-radius) 0;
   }
 
   // ==============================================================================
@@ -94,7 +94,7 @@
     direction: rtl;
   }
 
-  .ml__count-badge-wrapper {
+  .ml__counter-wrapper {
     flex-direction: row-reverse;
   }
 

package/src/scss/_tooltips-popover.scss

@@ -1,15 +1,15 @@
 // ==============================================================================
 // TOOLTIPS & POPOVER
 // ==============================================================================
-// Pill tooltips and selected items popover
+// Badge tooltips and selected items popover
 
 @use 'variables' as *;
 
 // ==============================================================================
-// PILL TOOLTIPS
+// BADGE TOOLTIPS
 // ==============================================================================
 
-.ml__pill-tooltip {
+.ml__badge-tooltip {
   position: fixed;
   z-index: var(--ml-tooltip-z-index, $ml-tooltip-z-index);
   opacity: 0;
@@ -106,17 +106,22 @@
   overflow-y: auto;
   max-height: var(--ml-selected-popover-body-max-height, $ml-selected-popover-body-max-height);
 
-  // Pills inside popover
-  .ml__pill {
+  // Badges inside popover (non-virtual mode)
+  .ml__badge {
     width: 100%;
+    min-height: fit-content; // Allow badges to expand based on content
+    line-height: var(--ml-line-height-relaxed, $ml-line-height-relaxed); // Override line-height: 1 to allow multi-line content
   }
 
-  .ml__pill-text {
+  .ml__badge-text {
     flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0; // Allow text truncation
+    min-width: 0; // Allow proper flex sizing
+    white-space: normal; // Explicitly allow wrapping
+    word-wrap: break-word; // Break long words
+    // Remove overflow constraints to allow multi-line content
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // white-space: nowrap;
   }
 
   // Virtual scroll mode
@@ -126,14 +131,21 @@
     max-height: none;      // Remove max-height constraint
     padding: 0;            // Remove padding as virtual scroll has its own spacing
 
-    .ml__pill {
-      // Fixed height for virtual scroll (default: 36px, configurable via pill-height attribute)
-      height: var(--ml-pill-height-virtual, 36px);
-      min-height: var(--ml-pill-height-virtual, 36px);
-      max-height: var(--ml-pill-height-virtual, 36px);
-      margin-bottom: var(--ml-selected-popover-body-gap, $ml-selected-popover-body-gap); // Add gap between pills
+    .ml__badge {
+      // Fixed height for virtual scroll (default: 36px, configurable via badge-height attribute)
+      height: var(--ml-badge-height-virtual, 36px);
+      min-height: var(--ml-badge-height-virtual, 36px);
+      max-height: var(--ml-badge-height-virtual, 36px);
+      margin-bottom: var(--ml-selected-popover-body-gap, $ml-selected-popover-body-gap); // Add gap between badges
       overflow: hidden;
       box-sizing: border-box;
     }
+
+    .ml__badge-text {
+      // Enforce single-line truncation for virtual scroll fixed heights
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 }

package/src/scss/_variables.scss

@@ -111,14 +111,14 @@ $ml-z-index-popover: 10000 !default;
 // 8. LAYOUT & DIMENSIONS
 // ==============================================================================
 $ml-input-icon-spacing: 2.5rem !default;
-$ml-count-badge-offset: 2rem !default;
+$ml-counter-offset: 2rem !default;
 $ml-option-icon-size: 1.25rem !default;
 $ml-count-clear-size: 1rem !default;
-$ml-pill-height: 1.5rem !default;
-$ml-pill-remove-width: 1.5rem !default;
+$ml-badge-height: 1.5rem !default;
+$ml-badge-remove-width: 1.5rem !default;
 $ml-popover-close-size: 1.5rem !default;
 
-$ml-dropdown-max-height: 20rem !default;
+$ml-options-max-height: 20rem !default;
 $ml-selected-popover-width: 20rem !default;
 $ml-selected-popover-max-height: 20rem !default;
 $ml-selected-popover-body-max-height: 18rem !default;
@@ -203,13 +203,13 @@ $ml-toggle-right: $ml-input-padding-h !default;
 
 // Count Badge (in input)
 // ==============================================================================
-$ml-count-badge-padding: 0.125rem 0.25rem !default;
-$ml-count-badge-bg: $ml-accent-color !default;
-$ml-count-badge-color: $ml-text-white !default;
-$ml-count-badge-font-size: $ml-font-size-xs !default;
-$ml-count-badge-font-weight: $ml-font-weight-semibold !default;
-$ml-count-badge-border-radius: $ml-border-radius-sm !default;
-$ml-count-badge-bg-hover: $ml-accent-color-hover !default;
+$ml-counter-padding: 0.125rem 0.25rem !default;
+$ml-counter-bg: $ml-accent-color !default;
+$ml-counter-color: $ml-text-white !default;
+$ml-counter-font-size: $ml-font-size-xs !default;
+$ml-counter-font-weight: $ml-font-weight-semibold !default;
+$ml-counter-border-radius: $ml-border-radius-sm !default;
+$ml-counter-bg-hover: $ml-accent-color-hover !default;
 
 // Floating Hint
 // ==============================================================================
@@ -232,7 +232,7 @@ $ml-dropdown-text: $ml-color-neutral-darkest !default;
 $ml-dropdown-border: $ml-border-width-base solid $ml-dropdown-border-color !default;
 $ml-dropdown-border-radius: $ml-border-radius !default;
 $ml-dropdown-box-shadow: $ml-dropdown-shadow !default;
-$ml-dropdown-color: $ml-dropdown-text !default;
+$ml-option-color: $ml-dropdown-text !default;
 
 // Dropdown Actions
 // ==============================================================================
@@ -326,14 +326,14 @@ $ml-loader-gap: $ml-spacing-sm !default;
 $ml-loading-text-font-size: $ml-font-size-sm !default;
 $ml-loading-text-color: $ml-text-secondary !default;
 
-// Pills Container
+// Badges Container
 // ==============================================================================
-$ml-pill-gap: $ml-spacing-sm !default;
-$ml-pills-gap: $ml-pill-gap !default;
-$ml-pills-margin-bottom: $ml-spacing-sm !default;
-$ml-pills-margin-top: $ml-spacing-sm !default;
-$ml-pills-margin-left: $ml-spacing-xs !default;
-$ml-pills-margin-right: $ml-spacing-xs !default;
+$ml-badge-gap: $ml-spacing-sm !default;
+$ml-badges-gap: $ml-badge-gap !default;
+$ml-badges-margin-bottom: $ml-spacing-sm !default;
+$ml-badges-margin-top: $ml-spacing-sm !default;
+$ml-badges-margin-left: $ml-spacing-xs !default;
+$ml-badges-margin-right: $ml-spacing-xs !default;
 
 // Count Display
 // ==============================================================================
@@ -344,13 +344,13 @@ $ml-count-display-margin-right: $ml-spacing-sm !default;
 
 // Count Badge Wrapper
 // ==============================================================================
-$ml-count-badge-wrapper-bg: transparent !default;
-$ml-count-badge-wrapper-border: $ml-border-width-base solid $ml-border-color !default;
-$ml-count-badge-wrapper-border-radius: $ml-border-radius-sm !default;
-$ml-count-badge-wrapper-padding: $ml-spacing-xs $ml-spacing-sm !default;
-$ml-count-badge-wrapper-gap: $ml-spacing-xs !default;
-$ml-count-badge-wrapper-bg-hover: $ml-option-hover-bg !default;
-$ml-count-badge-wrapper-border-color-hover: $ml-accent-color !default;
+$ml-counter-wrapper-bg: transparent !default;
+$ml-counter-wrapper-border: $ml-border-width-base solid $ml-border-color !default;
+$ml-counter-wrapper-border-radius: $ml-border-radius-sm !default;
+$ml-counter-wrapper-padding: $ml-spacing-xs $ml-spacing-sm !default;
+$ml-counter-wrapper-gap: $ml-spacing-xs !default;
+$ml-counter-wrapper-bg-hover: $ml-option-hover-bg !default;
+$ml-counter-wrapper-border-color-hover: $ml-accent-color !default;
 
 // Count Text
 // ==============================================================================
@@ -368,37 +368,48 @@ $ml-count-clear-border-radius: $ml-border-radius-full !default;
 $ml-count-clear-bg-hover: rgba($ml-accent-color, $ml-opacity-highlight-bg) !default;
 $ml-count-clear-color-hover: $ml-accent-color !default;
 
-// Pill
+// Badge
 // ==============================================================================
-$ml-pill-bg: $ml-color-accent-lightest !default;
-$ml-pill-bg-hover: $ml-color-white !default;
-$ml-pill-bg-active: $ml-color-accent-lighter !default;
+$ml-badge-bg: $ml-color-accent-lightest !default;
+$ml-badge-bg-hover: $ml-color-white !default;
+$ml-badge-bg-active: $ml-color-accent-lighter !default;
 
-$ml-pill-font-size: $ml-font-size-xs !default;
-$ml-pill-font-weight: $ml-font-weight-semibold !default;
-$ml-pill-border-radius: $ml-border-radius !default;
+$ml-badge-font-size: $ml-font-size-xs !default;
+$ml-badge-font-weight: $ml-font-weight-semibold !default;
+$ml-badge-border-radius: $ml-border-radius !default;
 
-// Pill Text
+// Badge Text
 // ==============================================================================
-$ml-pill-text-padding: 0 $ml-spacing-sm !default;
-$ml-pill-text-bg: $ml-pill-bg !default;
-$ml-pill-text-color: $ml-accent-color !default;
+$ml-badge-text-padding: 0 $ml-spacing-sm !default;
+$ml-badge-text-bg: $ml-badge-bg !default;
+$ml-badge-text-color: $ml-accent-color !default;
 
-// Pill Remove Button
+// Badge Remove Button
 // ==============================================================================
-$ml-pill-remove-bg: $ml-accent-color !default;
-$ml-pill-remove-color: $ml-text-white !default;
-$ml-pill-remove-border: none !default;
-$ml-pill-remove-font-size: $ml-font-size-xs !default;
-$ml-pill-remove-bg-hover: $ml-accent-color-hover !default;
-$ml-pill-remove-box-shadow-focus: 0 0 0 $ml-focus-outline-width
+$ml-badge-remove-bg: $ml-accent-color !default;
+$ml-badge-remove-color: $ml-text-white !default;
+$ml-badge-remove-border: none !default;
+$ml-badge-remove-font-size: $ml-font-size-xs !default;
+$ml-badge-remove-bg-hover: $ml-accent-color-hover !default;
+$ml-badge-remove-box-shadow-focus: 0 0 0 $ml-focus-outline-width
   rgba($ml-accent-color, $ml-opacity-focus-shadow) !default;
 
+// Badge Indicator (for "+ X more", "3 selected", compact mode display)
+// ==============================================================================
+$ml-badge-counter-bg: transparent !default;
+$ml-badge-counter-border: $ml-border-width-base solid $ml-border-color !default;
+$ml-badge-counter-border-radius: $ml-border-radius-sm !default;
+$ml-badge-counter-text-color: $ml-text-secondary !default;
+$ml-badge-counter-text-bg: $ml-color-neutral-base !default;
+$ml-badge-counter-remove-bg: $ml-color-neutral-dark !default;
+$ml-badge-counter-remove-color: $ml-color-white !default;
+$ml-badge-counter-remove-bg-hover: $ml-color-neutral-darkest !default;
+
 // "+X more" badge (partial mode)
 // ==============================================================================
-$ml-more-badge-bg: $ml-pill-text-bg !default;
-$ml-more-badge-hover-bg: $ml-pill-bg-hover !default;
-$ml-more-badge-active-bg: $ml-pill-bg-active !default;
+$ml-more-badge-bg: $ml-badge-text-bg !default;
+$ml-more-badge-hover-bg: $ml-badge-bg-hover !default;
+$ml-more-badge-active-bg: $ml-badge-bg-active !default;
 
 // Tooltip
 // ==============================================================================
@@ -444,6 +455,8 @@ $ml-selected-popover-body-padding: $ml-spacing-sm !default;
 // ==============================================================================
 $ml-checkbox-offset: 0.125rem !default;
 $ml-checkbox-margin-top: $ml-checkbox-offset !default;
+$ml-checkbox-size: 16px !default; // Width and height of checkbox
+$ml-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
 
 // Placeholder
 // ==============================================================================

package/src/scss/main.scss

@@ -7,10 +7,10 @@
 // - _variables.scss       : All variables (base primitives + semantic)
 // - _css-variables.scss   : CSS custom properties at :host level (for theming)
 // - _base.scss            : FOUC prevention + layout containers
-// - _input-dropdown.scss  : Input, toggle, badge, hint, dropdown, actions
+// - _input-dropdown.scss  : Input, toggle, counter, hint, dropdown, actions
 // - _options.scss         : Options list, groups, checkbox, content, states
-// - _pills-display.scss   : Pills, count display, individual pills
-// - _tooltips-popover.scss: Pill tooltips + selected items popover
+// - _badges-display.scss  : Badges, count display, individual badges
+// - _tooltips-popover.scss: Badge tooltips + selected items popover
 // - _rtl.scss             : RTL (Right-to-Left) language support
 // - _modifiers.scss       : Size variants + state modifiers
 // - _debug.scss           : Debug information panel
@@ -21,7 +21,7 @@
 @use 'base';
 @use 'input-dropdown';
 @use 'options';
-@use 'pills-display';
+@use 'badges-display';
 @use 'tooltips-popover';
 @use 'rtl';
 @use 'modifiers';