@keenmate/web-multiselect 1.0.0-rc11 → 1.1.0

package/src/scss/_input-dropdown.scss

@@ -10,39 +10,39 @@
 // ==============================================================================
 
 // Input wrapper
-.ml__input-wrapper {
+.ms__input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
 }
 
 // Search input
-.ml__input {
+.ms__input {
   width: 100%;
-  padding: var(--ml-input-padding, $ml-input-padding);
-  padding-right: var(--ml-input-padding-right, $ml-input-padding-right); // Space for dropdown icon
-  font-size: var(--ml-input-font-size, $ml-input-font-size);
-  border: var(--ml-input-border-style, $ml-input-border-style);
-  border-radius: var(--ml-input-border-radius, $ml-input-border-radius);
-  background: var(--ml-input-bg, $ml-input-bg);
-  color: var(--ml-input-text, $ml-input-text);
+  padding: var(--ms-input-padding, $ml-input-padding);
+  padding-right: var(--ms-input-padding-right, $ml-input-padding-right); // Space for dropdown icon
+  font-size: var(--ms-input-font-size, $ml-input-font-size);
+  border: var(--ms-input-border-style, $ml-input-border-style);
+  border-radius: var(--ms-input-border-radius, $ml-input-border-radius);
+  background: var(--ms-input-background, $ml-input-bg);
+  color: var(--ms-input-color, $ml-input-text);
   cursor: pointer;
-  transition: border-color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+  transition: border-color var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
 
   &:focus {
     outline: none;
-    border-color: var(--ml-input-focus-border-color, $ml-input-focus-border-color);
+    border-color: var(--ms-input-border-color-focus, $ml-input-focus-border-color);
   }
 
   &::placeholder {
-    color: var(--ml-input-placeholder-color, $ml-input-placeholder-color);
+    color: var(--ms-input-placeholder-color, $ml-input-placeholder-color);
     opacity: 0; // Initially hidden until component is ready
-    transition: opacity var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+    transition: opacity var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
   }
 
   // Show placeholder only after component is fully initialized
   :host([data-ready]) &::placeholder {
-    opacity: var(--ml-placeholder-opacity, $ml-placeholder-opacity);
+    opacity: var(--ms-placeholder-opacity, $ml-placeholder-opacity);
   }
 }
 
@@ -51,17 +51,18 @@
 // ==============================================================================
 
 // Dropdown toggle icon
-.ml__toggle {
+.ms__toggle {
   position: absolute;
-  right: var(--ml-toggle-right, $ml-toggle-right);
+  right: var(--ms-toggle-right, $ml-toggle-right);
   top: 50%;
-  transform: var(--ml-transform-center-y, $ml-transform-center-y);
+  transform: var(--ms-transform-center-y, $ml-transform-center-y);
   pointer-events: none;
-  color: var(--ml-toggle-color, $ml-toggle-color);
-  transition: transform var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+  color: var(--ms-toggle-icon-color, $ml-toggle-color);
+  transition: transform var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
 
-  .ml--open & {
-    transform: var(--ml-transform-center-y, $ml-transform-center-y) rotate(var(--ml-transform-rotate-180, $ml-transform-rotate-180));
+  .ms--open & {
+    transform: var(--ms-transform-center-y, $ml-transform-center-y) rotate(var(--ms-transform-rotate-180, $ml-transform-rotate-180));
+    color: var(--ms-toggle-icon-color-open, $ml-toggle-color);
   }
 }
 
@@ -70,24 +71,24 @@
 // ==============================================================================
 
 // Count badge (appears next to toggle icon)
-.ml__count-badge {
+.ms__counter {
   position: absolute;
-  right: var(--ml-count-badge-offset, $ml-count-badge-offset); // Space for toggle icon
+  right: var(--ms-counter-offset, $ml-counter-offset); // Space for toggle icon
   top: 50%;
-  transform: var(--ml-transform-center-y, $ml-transform-center-y);
-  padding: var(--ml-count-badge-padding, $ml-count-badge-padding);
-  background: var(--ml-count-badge-bg, $ml-count-badge-bg);
-  color: var(--ml-count-badge-color, $ml-count-badge-color);
-  font-size: var(--ml-count-badge-font-size, $ml-count-badge-font-size);
-  font-weight: var(--ml-count-badge-font-weight, $ml-count-badge-font-weight);
-  border-radius: var(--ml-count-badge-border-radius, $ml-count-badge-border-radius);
+  transform: var(--ms-transform-center-y, $ml-transform-center-y);
+  padding: var(--ms-counter-padding, $ml-counter-padding);
+  background: var(--ms-counter-badge-background, $ml-counter-bg);
+  color: var(--ms-counter-badge-color, $ml-counter-color);
+  font-size: var(--ms-counter-font-size, $ml-counter-font-size);
+  font-weight: var(--ms-counter-font-weight, $ml-counter-font-weight);
+  border-radius: var(--ms-counter-border-radius, $ml-counter-border-radius);
   cursor: pointer;
-  transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+  transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
 
   &:hover {
-    background: var(--ml-count-badge-bg-hover, $ml-count-badge-bg-hover);
-    transform: var(--ml-transform-center-y, $ml-transform-center-y)
-      scale(var(--ml-transform-scale-hover, $ml-transform-scale-hover));
+    background: var(--ms-counter-badge-background-hover, $ml-counter-bg-hover);
+    transform: var(--ms-transform-center-y, $ml-transform-center-y)
+      scale(var(--ms-transform-scale-hover, $ml-transform-scale-hover));
   }
 }
 
@@ -96,18 +97,18 @@
 // ==============================================================================
 
 // Floating search hint (appears above input)
-.ml__hint {
+.ms__hint {
   display: none;
   position: absolute;
-  z-index: var(--ml-z-index-popover, $ml-z-index-popover);
-  padding: var(--ml-hint-padding, $ml-hint-padding);
-  background: var(--ml-hint-bg, $ml-hint-bg);
-  border: var(--ml-hint-border, $ml-hint-border);
-  border-radius: var(--ml-hint-border-radius, $ml-hint-border-radius);
-  box-shadow: var(--ml-hint-box-shadow, $ml-hint-box-shadow);
-  font-size: var(--ml-hint-font-size, $ml-hint-font-size);
-  color: var(--ml-hint-color, $ml-hint-color);
-  line-height: var(--ml-line-height-relaxed, $ml-line-height-relaxed);
+  z-index: var(--ms-z-index-popover, $ml-z-index-popover);
+  padding: var(--ms-hint-padding, $ml-hint-padding);
+  background: var(--ms-hint-background, $ml-hint-bg);
+  border: var(--ms-hint-border, $ml-hint-border);
+  border-radius: var(--ms-hint-border-radius, $ml-hint-border-radius);
+  box-shadow: var(--ms-hint-box-shadow, $ml-hint-box-shadow);
+  font-size: var(--ms-hint-font-size, $ml-hint-font-size);
+  color: var(--ms-hint-color, $ml-hint-color);
+  line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
   max-width: 100%;
 
   &--visible {
@@ -120,20 +121,20 @@
 // ==============================================================================
 
 // Floating dropdown (appears below input)
-.ml__dropdown {
+.ms__dropdown {
   display: none;
   position: absolute;
-  z-index: var(--ml-z-index-dropdown, $ml-z-index-dropdown);
-  background: var(--ml-dropdown-bg, $ml-dropdown-bg);
-  border: var(--ml-dropdown-border, $ml-dropdown-border);
-  border-radius: var(--ml-dropdown-border-radius, $ml-dropdown-border-radius);
-  box-shadow: var(--ml-dropdown-box-shadow, $ml-dropdown-box-shadow);
-  max-height: var(--ml-dropdown-max-height, $ml-dropdown-max-height);
+  z-index: var(--ms-z-index-dropdown, $ml-z-index-dropdown);
+  background: var(--ms-dropdown-background, $ml-dropdown-bg);
+  border: var(--ms-dropdown-border, $ml-dropdown-border);
+  border-radius: var(--ms-dropdown-border-radius, $ml-dropdown-border-radius);
+  box-shadow: var(--ms-dropdown-box-shadow, $ml-dropdown-box-shadow);
+  max-height: var(--ms-options-max-height, $ml-options-max-height);
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: pan-y;
   -webkit-overflow-scrolling: touch;
-  color: var(--ml-dropdown-color, $ml-dropdown-color);
+  color: var(--ms-dropdown-text-color, $ml-option-color);
 
   &--visible {
     display: block;
@@ -151,37 +152,49 @@
 // ==============================================================================
 
 // Dropdown actions (Select All / Clear All)
-.ml__actions {
+.ms__actions {
   display: flex;
-  gap: var(--ml-actions-gap, $ml-actions-gap);
-  padding: var(--ml-actions-padding, $ml-actions-padding);
-  border-bottom: var(--ml-actions-border-bottom, $ml-actions-border-bottom);
+  flex-wrap: nowrap;
+  gap: var(--ms-actions-gap, $ml-actions-gap);
+  padding: var(--ms-actions-padding, $ml-actions-padding);
+  border-bottom: var(--ms-actions-border-bottom, $ml-actions-border-bottom);
+
+  &--wrap {
+    flex-wrap: wrap;
+  }
 
   &--sticky {
     position: sticky;
     top: 0;
-    z-index: var(--ml-z-index-sticky, $ml-z-index-sticky);
-    background: var(--ml-actions-bg, $ml-actions-bg);
+    z-index: var(--ms-z-index-sticky, $ml-z-index-sticky);
+    background: var(--ms-actions-background, $ml-actions-bg);
   }
 }
 
-.ml__action-btn {
+.ms__action-btn {
   flex: 1;
-  padding: var(--ml-action-btn-padding, $ml-action-btn-padding);
-  font-size: var(--ml-action-btn-font-size, $ml-action-btn-font-size);
-  border: var(--ml-action-btn-border, $ml-action-btn-border);
-  border-radius: var(--ml-action-btn-border-radius, $ml-action-btn-border-radius);
-  background: var(--ml-action-btn-bg, $ml-action-btn-bg);
-  color: var(--ml-action-btn-color, $ml-action-btn-color);
+  padding: var(--ms-action-btn-padding, $ml-action-btn-padding);
+  font-size: var(--ms-action-btn-font-size, $ml-action-btn-font-size);
+  border: var(--ms-action-btn-border, $ml-action-btn-border);
+  border-radius: var(--ms-action-btn-border-radius, $ml-action-btn-border-radius);
+  background: var(--ms-action-button-background, $ml-action-btn-bg);
+  color: var(--ms-action-button-color, $ml-action-btn-color);
   cursor: pointer;
-  transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+  transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
 
   &:hover {
-    background: var(--ml-action-btn-bg-hover, $ml-action-btn-bg-hover);
-    border-color: var(--ml-action-btn-border-color-hover, $ml-action-btn-border-color-hover);
+    background: var(--ms-action-button-background-hover, $ml-action-btn-bg-hover);
+    border-color: var(--ms-action-button-border-color-hover, $ml-action-btn-border-color-hover);
   }
 
   &:active {
-    transform: scale(var(--ml-transform-scale-active, $ml-transform-scale-active));
+    transform: scale(var(--ms-transform-scale-active, $ml-transform-scale-active));
+  }
+
+  &:disabled,
+  &[disabled] {
+    opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
   }
 }

package/src/scss/_modifiers.scss

@@ -9,59 +9,59 @@
 // SIZE VARIANTS
 // ==============================================================================
 
-.ml--xs {
-  .ml__input {
-    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+.ms--xs {
+  .ms__input {
+    font-size: var(--ms-font-size-xs, $ml-font-size-xs);
   }
 
-  .ml__option {
-    padding: var(--ml-spacing-xs, $ml-spacing-xs) var(--ml-spacing-sm, $ml-spacing-sm);
+  .ms__option {
+    padding: var(--ms-spacing-xs, $ml-spacing-xs) var(--ms-spacing-sm, $ml-spacing-sm);
   }
 
-  .ml__option-title {
-    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+  .ms__option-title {
+    font-size: var(--ms-font-size-xs, $ml-font-size-xs);
   }
 
-  .ml__pill {
-    font-size: var(--ml-font-size-2xs, $ml-font-size-2xs);
+  .ms__badge {
+    font-size: var(--ms-font-size-2xs, $ml-font-size-2xs);
   }
 }
 
-.ml--sm {
-  .ml__input {
-    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+.ms--sm {
+  .ms__input {
+    font-size: var(--ms-font-size-xs, $ml-font-size-xs);
   }
 
-  .ml__option-title {
-    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+  .ms__option-title {
+    font-size: var(--ms-font-size-xs, $ml-font-size-xs);
   }
 }
 
-.ml--lg {
-  .ml__input {
-    font-size: var(--ml-font-size-base, $ml-font-size-base);
+.ms--lg {
+  .ms__input {
+    font-size: var(--ms-font-size-base, $ml-font-size-base);
   }
 
-  .ml__option-title {
-    font-size: var(--ml-font-size-base, $ml-font-size-base);
+  .ms__option-title {
+    font-size: var(--ms-font-size-base, $ml-font-size-base);
   }
 
-  .ml__pill {
-    font-size: var(--ml-font-size-sm, $ml-font-size-sm);
+  .ms__badge {
+    font-size: var(--ms-font-size-sm, $ml-font-size-sm);
   }
 }
 
-.ml--xl {
-  .ml__input {
-    font-size: var(--ml-font-size-lg, $ml-font-size-lg);
+.ms--xl {
+  .ms__input {
+    font-size: var(--ms-font-size-lg, $ml-font-size-lg);
   }
 
-  .ml__option-title {
-    font-size: var(--ml-font-size-lg, $ml-font-size-lg);
+  .ms__option-title {
+    font-size: var(--ms-font-size-lg, $ml-font-size-lg);
   }
 
-  .ml__pill {
-    font-size: var(--ml-font-size-base, $ml-font-size-base);
+  .ms__badge {
+    font-size: var(--ms-font-size-base, $ml-font-size-base);
   }
 }
 
@@ -70,26 +70,26 @@
 // ==============================================================================
 
 // Disabled state
-.ml--disabled {
-  .ml__input {
-    opacity: var(--ml-disabled-input-opacity, $ml-disabled-input-opacity);
+.ms--disabled {
+  .ms__input {
+    opacity: var(--ms-disabled-input-opacity, $ml-disabled-input-opacity);
     cursor: not-allowed;
-    background: var(--ml-input-bg-disabled, $ml-input-bg-disabled);
+    background: var(--ms-input-bg-disabled, $ml-input-bg-disabled);
   }
 
-  .ml__toggle {
-    opacity: var(--ml-disabled-input-opacity, $ml-disabled-input-opacity);
+  .ms__toggle {
+    opacity: var(--ms-disabled-input-opacity, $ml-disabled-input-opacity);
   }
 }
 
 // No checkboxes modifier (for simple select mode)
-.ml--no-checkboxes {
-  .ml__option {
+.ms--no-checkboxes {
+  .ms__option {
     gap: 0; // Remove gap since there's no checkbox
-    padding-left: var(--ml-option-padding-h, $ml-option-padding-h); // Adjust padding
+    padding-left: var(--ms-option-padding-h, $ml-option-padding-h); // Adjust padding
   }
 
-  .ml__option-content {
+  .ms__option-content {
     padding-left: 0; // No extra padding needed
   }
 }

package/src/scss/_options.scss

@@ -10,18 +10,18 @@
 // ==============================================================================
 
 // Options container
-.ml__options {
-  padding: var(--ml-options-padding, $ml-options-padding);
+.ms__options {
+  padding: var(--ms-options-padding, $ml-options-padding);
 }
 
 // Virtual scroll - enforce consistent heights
-.ml__options--virtual {
+.ms__options--virtual {
   // overflow and position are set inline for proper dimensions
 
-  .ml__option {
-    height: var(--ml-option-height, 50px);
-    min-height: var(--ml-option-height, 50px);
-    max-height: var(--ml-option-height, 50px);
+  .ms__option {
+    height: var(--ms-option-height, 50px);
+    min-height: var(--ms-option-height, 50px);
+    max-height: var(--ms-option-height, 50px);
     overflow: hidden;
     box-sizing: border-box;
   }
@@ -32,22 +32,22 @@
 // ==============================================================================
 
 // Group
-.ml__group {
+.ms__group {
   & + & {
-    border-top: var(--ml-group-border-top, $ml-group-border-top);
-    margin-top: var(--ml-group-margin-top, $ml-group-margin-top);
-    padding-top: var(--ml-group-padding-top, $ml-group-padding-top);
+    border-top: var(--ms-group-border-top, $ml-group-border-top);
+    margin-top: var(--ms-group-margin-top, $ml-group-margin-top);
+    padding-top: var(--ms-group-padding-top, $ml-group-padding-top);
   }
 }
 
 // Group label
-.ml__group-label {
-  padding: var(--ml-group-label-padding, $ml-group-label-padding);
-  font-size: var(--ml-group-label-font-size, $ml-group-label-font-size);
-  font-weight: var(--ml-group-label-font-weight, $ml-group-label-font-weight);
-  color: var(--ml-group-label-color, $ml-group-label-color);
-  text-transform: var(--ml-group-label-transform, $ml-group-label-transform);
-  letter-spacing: var(--ml-group-label-letter-spacing, $ml-group-label-letter-spacing);
+.ms__group-label {
+  padding: var(--ms-group-label-padding, $ml-group-label-padding);
+  font-size: var(--ms-group-label-font-size, $ml-group-label-font-size);
+  font-weight: var(--ms-group-label-font-weight, $ml-group-label-font-weight);
+  color: var(--ms-group-label-color, $ml-group-label-color);
+  text-transform: var(--ms-group-label-transform, $ml-group-label-transform);
+  letter-spacing: var(--ms-group-label-letter-spacing, $ml-group-label-letter-spacing);
 }
 
 // ==============================================================================
@@ -55,45 +55,56 @@
 // ==============================================================================
 
 // Individual option
-.ml__option {
+.ms__option {
   display: flex;
-  align-items: flex-start;
-  gap: var(--ml-option-gap, $ml-option-gap);
-  padding: var(--ml-option-padding, $ml-option-padding);
+  align-items: var(--ms-checkbox-align, flex-start); // Support checkbox alignment
+  gap: var(--ms-option-gap, $ml-option-gap);
+  padding: var(--ms-option-padding, $ml-option-padding);
+  color: var(--ms-option-text-color, $ml-option-color);
+  background: var(--ms-option-background, $ml-option-bg);
   cursor: pointer;
-  transition: background-color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+  transition: background-color var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
 
   &:hover {
-    background: var(--ml-option-bg-hover, $ml-option-bg-hover);
+    background: var(--ms-option-background-hover, $ml-option-bg-hover);
   }
 
   &--focused {
-    background: var(--ml-option-bg-focused, $ml-option-bg-focused);
-    outline: var(--ml-option-outline-focused, $ml-option-outline-focused);
-    outline-offset: var(--ml-option-focus-outline-offset, $ml-option-focus-outline-offset);
+    background: var(--ms-option-background-focused, $ml-option-bg-focused);
+    outline: var(--ms-option-outline-focused, $ml-option-outline-focused);
+    outline-offset: var(--ms-option-focus-outline-offset, $ml-option-focus-outline-offset);
   }
 
   &--matched {
-    background: var(--ml-option-bg-matched, $ml-option-bg-matched);
-    border-left: var(--ml-option-border-matched, $ml-option-border-matched);
+    background: var(--ms-option-background-matched, $ml-option-bg-matched);
+    border-left: var(--ms-option-border-matched, $ml-option-border-matched);
   }
 
   &--selected {
-    background: var(--ml-option-bg-selected, $ml-option-bg-selected);
+    background: var(--ms-option-background-selected, $ml-option-bg-selected);
 
     &:hover {
-      background: var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, $ml-option-bg-selected));
+      background: var(--ms-option-bg-selected-hover, var(--ms-option-background-selected, $ml-option-bg-selected));
     }
   }
 
   &--disabled {
-    opacity: var(--ml-disabled-opacity, $ml-disabled-opacity);
+    opacity: var(--ms-disabled-opacity, $ml-disabled-opacity);
     cursor: not-allowed;
 
     &:hover {
-      background: var(--ml-option-bg, $ml-option-bg);
+      background: var(--ms-option-background, $ml-option-bg);
     }
   }
+
+  // Checkbox alignment variants
+  &[data-checkbox-align="center"] {
+    --ms-checkbox-align: center;
+  }
+
+  &[data-checkbox-align="bottom"] {
+    --ms-checkbox-align: flex-end;
+  }
 }
 
 // ==============================================================================
@@ -101,12 +112,19 @@
 // ==============================================================================
 
 // Checkbox
-.ml__checkbox {
+.ms__checkbox {
   flex-shrink: 0;
-  margin-top: var(--ml-checkbox-margin-top, $ml-checkbox-margin-top); // Align with first line of text
+  margin-top: var(--ms-checkbox-margin-top, $ml-checkbox-margin-top); // Align with first line of text
+  margin-right: var(--ms-checkbox-margin-right, $ml-checkbox-margin-right);
+  margin-bottom: var(--ms-checkbox-margin-bottom, $ml-checkbox-margin-bottom);
+  margin-left: var(--ms-checkbox-margin-left, $ml-checkbox-margin-left);
+  width: var(--ms-checkbox-size, $ml-checkbox-size);
+  height: var(--ms-checkbox-size, $ml-checkbox-size);
+  transform: scale(var(--ms-checkbox-scale, $ml-checkbox-scale));
+  transform-origin: top left;
   cursor: pointer;
 
-  .ml__option--disabled & {
+  .ms__option--disabled & {
     cursor: not-allowed;
   }
 }
@@ -116,23 +134,23 @@
 // ==============================================================================
 
 // Option content (rich content wrapper)
-.ml__option-content {
+.ms__option-content {
   flex: 1;
   display: flex;
   align-items: flex-start;
-  gap: var(--ml-option-content-gap, $ml-option-content-gap);
+  gap: var(--ms-option-content-gap, $ml-option-content-gap);
   min-width: 0; // Allow text truncation
 }
 
 // Option icon/SVG
-.ml__option-icon {
+.ms__option-icon {
   flex-shrink: 0;
-  width: var(--ml-option-icon-size, $ml-option-icon-size);
-  height: var(--ml-option-icon-size, $ml-option-icon-size);
+  width: var(--ms-option-icon-size, $ml-option-icon-size);
+  height: var(--ms-option-icon-size, $ml-option-icon-size);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--ml-option-icon-font-size, $ml-option-icon-font-size);
+  font-size: var(--ms-option-icon-font-size, $ml-option-icon-font-size);
 
   svg {
     width: 100%;
@@ -142,31 +160,31 @@
 }
 
 // Option text container
-.ml__option-text {
+.ms__option-text {
   flex: 1;
   min-width: 0;
 }
 
 // Option title/main text
-.ml__option-title {
-  font-size: var(--ml-option-title-font-size, $ml-option-title-font-size);
-  color: var(--ml-option-title-color, $ml-option-title-color);
-  line-height: var(--ml-line-height-relaxed, $ml-line-height-relaxed);
+.ms__option-title {
+  font-size: var(--ms-option-title-font-size, $ml-option-title-font-size);
+  color: var(--ms-option-title-color, $ml-option-title-color);
+  line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
 
   // Highlight matched text
   mark {
-    background: var(--ml-option-mark-bg, $ml-option-mark-bg);
-    color: var(--ml-option-mark-color, $ml-option-mark-color);
-    font-weight: var(--ml-option-mark-font-weight, $ml-option-mark-font-weight);
+    background: var(--ms-option-mark-background, $ml-option-mark-bg);
+    color: var(--ms-option-mark-color, $ml-option-mark-color);
+    font-weight: var(--ms-option-mark-font-weight, $ml-option-mark-font-weight);
   }
 }
 
 // Option subtitle (multiline support)
-.ml__option-subtitle {
-  margin-top: var(--ml-option-subtitle-margin-top, $ml-option-subtitle-margin-top);
-  font-size: var(--ml-option-subtitle-font-size, $ml-option-subtitle-font-size);
-  color: var(--ml-option-subtitle-color, $ml-option-subtitle-color);
-  line-height: var(--ml-option-subtitle-line-height, $ml-option-subtitle-line-height);
+.ms__option-subtitle {
+  margin-top: var(--ms-option-subtitle-margin-top, $ml-option-subtitle-margin-top);
+  font-size: var(--ms-option-subtitle-font-size, $ml-option-subtitle-font-size);
+  color: var(--ms-option-subtitle-color, $ml-option-subtitle-color);
+  line-height: var(--ms-option-subtitle-line-height, $ml-option-subtitle-line-height);
 }
 
 // ==============================================================================
@@ -174,24 +192,24 @@
 // ==============================================================================
 
 // Empty state
-.ml__empty {
-  padding: var(--ml-empty-padding, $ml-empty-padding);
+.ms__empty {
+  padding: var(--ms-empty-padding, $ml-empty-padding);
   text-align: center;
-  font-size: var(--ml-empty-font-size, $ml-empty-font-size);
-  color: var(--ml-empty-color, $ml-empty-color);
+  font-size: var(--ms-empty-font-size, $ml-empty-font-size);
+  color: var(--ms-empty-color, $ml-empty-color);
 }
 
 // Loading state
-.ml__loader {
+.ms__loader {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--ml-loader-padding, $ml-loader-padding);
-  gap: var(--ml-loader-gap, $ml-loader-gap);
+  padding: var(--ms-loader-padding, $ml-loader-padding);
+  gap: var(--ms-loader-gap, $ml-loader-gap);
 }
 
-.ml__loading-text {
-  font-size: var(--ml-loading-text-font-size, $ml-loading-text-font-size);
-  color: var(--ml-loading-text-color, $ml-loading-text-color);
+.ms__loading-text {
+  font-size: var(--ms-loading-text-font-size, $ml-loading-text-font-size);
+  color: var(--ms-loading-color, $ml-loading-text-color);
 }