@keenmate/web-multiselect 1.5.1 → 1.6.0

package/src/scss/_input-dropdown.scss

@@ -1,259 +0,0 @@
-// ==============================================================================
-// INPUT & DROPDOWN COMPONENTS
-// ==============================================================================
-// Input field, toggle icon, count badge, floating hint, dropdown container, and actions
-
-@use 'variables' as *;
-
-// ==============================================================================
-// INPUT COMPONENT
-// ==============================================================================
-
-// Input wrapper
-.ms__input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-// Search input
-.ms__input {
-  box-sizing: border-box;
-  width: 100%;
-  font-family: inherit; // Form elements don't inherit font by default
-  height: var(--ms-input-height, $ms-input-height);
-  padding: var(--ms-input-padding, $ms-input-padding);
-  padding-right: var(--ms-input-padding-right, $ms-input-padding-right); // Space for dropdown icon
-  font-size: var(--ms-input-font-size, $ms-input-font-size);
-  border: var(--ms-input-border-style, $ms-input-border-style);
-  border-radius: var(--ms-input-border-radius, $ms-input-border-radius);
-  background: var(--ms-input-background, $ms-input-bg);
-  color: var(--ms-input-color, $ms-input-text);
-  cursor: pointer;
-  transition: border-color var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
-
-  &:hover:not(:focus):not(:disabled) {
-    border-color: var(--ms-input-border-color-hover, var(--ms-input-border-color, $ms-input-border));
-  }
-
-  &:focus {
-    outline: none;
-    border-color: var(--ms-input-border-color-focus, $ms-input-focus-border-color);
-  }
-
-  &::placeholder {
-    color: var(--ms-input-placeholder-color, $ms-input-placeholder-color);
-    opacity: 0; // Initially hidden until component is ready
-    transition: opacity var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
-  }
-
-  // Show placeholder only after component is fully initialized
-  :host([data-ready]) &::placeholder {
-    opacity: var(--ms-placeholder-opacity, $ms-placeholder-opacity);
-  }
-
-  // Size variants
-  &.ms__input--xs {
-    font-size: var(--ms-input-size-xs-font);
-    padding: var(--ms-input-size-xs-padding-v) var(--ms-input-size-xs-padding-h);
-    padding-right: calc(var(--ms-input-size-xs-padding-h) * 2.5);
-    height: var(--ms-input-size-xs-height);
-  }
-
-  &.ms__input--sm {
-    font-size: var(--ms-input-size-sm-font);
-    padding: var(--ms-input-size-sm-padding-v) var(--ms-input-size-sm-padding-h);
-    padding-right: calc(var(--ms-input-size-sm-padding-h) * 2.5);
-    height: var(--ms-input-size-sm-height);
-  }
-
-  &.ms__input--lg {
-    font-size: var(--ms-input-size-lg-font);
-    padding: var(--ms-input-size-lg-padding-v) var(--ms-input-size-lg-padding-h);
-    padding-right: calc(var(--ms-input-size-lg-padding-h) * 2.5);
-    height: var(--ms-input-size-lg-height);
-  }
-
-  &.ms__input--xl {
-    font-size: var(--ms-input-size-xl-font);
-    padding: var(--ms-input-size-xl-padding-v) var(--ms-input-size-xl-padding-h);
-    padding-right: calc(var(--ms-input-size-xl-padding-h) * 2.5);
-    height: var(--ms-input-size-xl-height);
-  }
-}
-
-// ==============================================================================
-// TOGGLE ICON
-// ==============================================================================
-
-// Dropdown toggle icon
-.ms__toggle {
-  position: absolute;
-  right: var(--ms-toggle-right, $ms-toggle-right);
-  top: 50%;
-  transform: var(--ms-transform-center-y, $ms-transform-center-y);
-  pointer-events: none;
-  color: var(--ms-toggle-icon-color, $ms-toggle-color);
-  transition: transform var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
-
-  .ms--open & {
-    transform: var(--ms-transform-center-y, $ms-transform-center-y) rotate(var(--ms-transform-rotate-180, $ms-transform-rotate-180));
-    color: var(--ms-toggle-icon-color-open, $ms-toggle-color);
-  }
-}
-
-// ==============================================================================
-// COUNT BADGE (IN INPUT)
-// ==============================================================================
-
-// Count badge (appears next to toggle icon)
-.ms__counter {
-  position: absolute;
-  right: var(--ms-counter-offset, $ms-counter-offset); // Space for toggle icon
-  top: 50%;
-  transform: var(--ms-transform-center-y, $ms-transform-center-y);
-  padding: var(--ms-counter-padding, $ms-counter-padding);
-  background: var(--ms-counter-badge-background, $ms-counter-bg);
-  color: var(--ms-counter-badge-color, $ms-counter-color);
-  font-size: var(--ms-counter-font-size, $ms-counter-font-size);
-  font-weight: var(--ms-counter-font-weight, $ms-counter-font-weight);
-  border-radius: var(--ms-counter-border-radius, $ms-counter-border-radius);
-  cursor: pointer;
-  transition: all var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
-
-  &:hover {
-    background: var(--ms-counter-badge-background-hover, $ms-counter-bg-hover);
-    transform: var(--ms-transform-center-y, $ms-transform-center-y)
-      scale(var(--ms-transform-scale-hover, $ms-transform-scale-hover));
-  }
-}
-
-// ==============================================================================
-// FLOATING HINT
-// ==============================================================================
-
-// Floating search hint (appears above input)
-.ms__hint {
-  display: none;
-  position: absolute;
-  z-index: var(--ms-z-index-popover, $ms-z-index-popover);
-  padding: var(--ms-hint-padding, $ms-hint-padding);
-  background: var(--ms-hint-background, $ms-hint-bg);
-  border: var(--ms-hint-border, $ms-hint-border);
-  border-radius: var(--ms-hint-border-radius, $ms-hint-border-radius);
-  box-shadow: var(--ms-hint-box-shadow, $ms-hint-box-shadow);
-  font-size: var(--ms-hint-font-size, $ms-hint-font-size);
-  color: var(--ms-hint-color, $ms-hint-color);
-  line-height: var(--ms-line-height-relaxed, $ms-line-height-relaxed);
-  max-width: 100%;
-
-  &--visible {
-    display: block;
-  }
-}
-
-// ==============================================================================
-// DROPDOWN CONTAINER
-// ==============================================================================
-
-// Floating dropdown (appears below input)
-.ms__dropdown {
-  display: none;
-  position: absolute;
-  font-family: inherit; // Ensure font inherits from container
-  z-index: var(--ms-z-index-dropdown, $ms-z-index-dropdown);
-  background: var(--ms-dropdown-background, $ms-dropdown-bg);
-  border: var(--ms-dropdown-border, $ms-dropdown-border);
-  border-radius: var(--ms-dropdown-border-radius, $ms-dropdown-border-radius);
-  box-shadow: var(--ms-dropdown-box-shadow, $ms-dropdown-box-shadow);
-  max-height: var(--ms-options-max-height, $ms-options-max-height);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  touch-action: pan-y;
-  -webkit-overflow-scrolling: touch;
-  color: var(--ms-dropdown-text-color, $ms-option-color);
-
-  // Scrollbar styling
-  scrollbar-width: thin;  // Firefox
-  scrollbar-color: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
-
-  &::-webkit-scrollbar {
-    width: var(--ms-scrollbar-width, $ms-scrollbar-width);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg);
-    border-radius: var(--ms-scrollbar-thumb-border-radius, $ms-scrollbar-thumb-border-radius);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--ms-scrollbar-thumb-bg-hover, $ms-scrollbar-thumb-bg-hover);
-  }
-
-  &--visible {
-    display: block;
-  }
-
-  &--virtual {
-    // In virtual scroll mode, let the options container handle scrolling
-    overflow-y: visible;
-    max-height: none;
-  }
-}
-
-// ==============================================================================
-// DROPDOWN ACTIONS
-// ==============================================================================
-
-// Dropdown actions (Select All / Clear All)
-.ms__actions {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: var(--ms-actions-gap, $ms-actions-gap);
-  padding: var(--ms-actions-padding, $ms-actions-padding);
-  border-bottom: var(--ms-actions-border-bottom, $ms-actions-border-bottom);
-
-  &--wrap {
-    flex-wrap: wrap;
-  }
-
-  &--sticky {
-    position: sticky;
-    top: 0;
-    z-index: var(--ms-z-index-sticky, $ms-z-index-sticky);
-    background: var(--ms-actions-background, $ms-actions-bg);
-  }
-}
-
-.ms__action-btn {
-  flex: 1;
-  font-family: inherit; // Form elements don't inherit font by default
-  padding: var(--ms-action-btn-padding, $ms-action-btn-padding);
-  font-size: var(--ms-action-btn-font-size, $ms-action-btn-font-size);
-  border: var(--ms-action-btn-border, $ms-action-btn-border);
-  border-radius: var(--ms-action-btn-border-radius, $ms-action-btn-border-radius);
-  background: var(--ms-action-button-background, $ms-action-btn-bg);
-  color: var(--ms-action-button-color, $ms-action-btn-color);
-  cursor: pointer;
-  transition: all var(--ms-transition-fast, $ms-transition-fast) var(--ms-easing-snappy, $ms-easing-snappy);
-
-  &:hover {
-    background: var(--ms-action-button-background-hover, $ms-action-btn-bg-hover);
-    border-color: var(--ms-action-button-border-color-hover, $ms-action-btn-border-color-hover);
-  }
-
-  &:active {
-    transform: scale(var(--ms-transform-scale-active, $ms-transform-scale-active));
-  }
-
-  &:disabled,
-  &[disabled] {
-    opacity: var(--ms-disabled-opacity, $ms-disabled-opacity);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}

package/src/scss/_modifiers.scss

@@ -1,36 +0,0 @@
-// ==============================================================================
-// MODIFIERS & VARIANTS
-// ==============================================================================
-// State modifiers (disabled, no-checkboxes)
-// Note: Size variants removed - use --ms-rem for global scaling instead
-
-@use 'variables' as *;
-
-// ==============================================================================
-// STATE MODIFIERS
-// ==============================================================================
-
-// Disabled state
-.ms--disabled {
-  .ms__input {
-    opacity: var(--ms-disabled-input-opacity, $ms-disabled-input-opacity);
-    cursor: not-allowed;
-    background: var(--ms-input-bg-disabled, $ms-input-bg-disabled);
-  }
-
-  .ms__toggle {
-    opacity: var(--ms-disabled-input-opacity, $ms-disabled-input-opacity);
-  }
-}
-
-// No checkboxes modifier (for simple select mode)
-.ms--no-checkboxes {
-  .ms__option {
-    gap: 0; // Remove gap since there's no checkbox
-    padding-left: var(--ms-option-padding-h, $ms-option-padding-h); // Adjust padding
-  }
-
-  .ms__option-content {
-    padding-left: 0; // No extra padding needed
-  }
-}

package/src/scss/_options.scss

@@ -1,358 +0,0 @@
-// ==============================================================================
-// OPTIONS & CONTENT
-// ==============================================================================
-// Options list, groups, checkbox, option content, icons, text, and states
-
-@use 'variables' as *;
-
-// ==============================================================================
-// OPTIONS CONTAINER
-// ==============================================================================
-
-// Options container
-.ms__options {
-  padding: var(--ms-options-padding, $ms-options-padding);
-
-  // Scrollbar styling
-  scrollbar-width: thin;  // Firefox
-  scrollbar-color: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
-
-  &::-webkit-scrollbar {
-    width: var(--ms-scrollbar-width, $ms-scrollbar-width);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--ms-scrollbar-track-bg, $ms-scrollbar-track-bg);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--ms-scrollbar-thumb-bg, $ms-scrollbar-thumb-bg);
-    border-radius: var(--ms-scrollbar-thumb-border-radius, $ms-scrollbar-thumb-border-radius);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--ms-scrollbar-thumb-bg-hover, $ms-scrollbar-thumb-bg-hover);
-  }
-}
-
-// Virtual scroll - enforce consistent heights
-.ms__options--virtual {
-  // overflow and position are set inline for proper dimensions
-
-  .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;
-  }
-}
-
-// ==============================================================================
-// GROUPS
-// ==============================================================================
-
-// Group
-.ms__group {
-  & + & {
-    border-top: var(--ms-group-border-top, $ms-group-border-top);
-    margin-top: var(--ms-group-margin-top, $ms-group-margin-top);
-    padding-top: var(--ms-group-padding-top, $ms-group-padding-top);
-  }
-}
-
-// Group label
-.ms__group-label {
-  padding: var(--ms-group-label-padding, $ms-group-label-padding);
-  font-size: var(--ms-group-label-font-size, $ms-group-label-font-size);
-  font-weight: var(--ms-group-label-font-weight, $ms-group-label-font-weight);
-  color: var(--ms-group-label-color, $ms-group-label-color);
-  text-transform: var(--ms-group-label-transform, $ms-group-label-transform);
-  letter-spacing: var(--ms-group-label-letter-spacing, $ms-group-label-letter-spacing);
-}
-
-// ==============================================================================
-// INDIVIDUAL OPTION
-// ==============================================================================
-
-// Individual option
-.ms__option {
-  display: flex;
-  align-items: var(--ms-checkbox-align, flex-start); // Support checkbox alignment
-  gap: var(--ms-option-gap, $ms-option-gap);
-  padding: var(--ms-option-padding, $ms-option-padding);
-  color: var(--ms-option-text-color, $ms-option-color);
-  background: var(--ms-option-background, $ms-option-bg);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--ms-option-background-hover, $ms-option-bg-hover);
-    color: var(--ms-option-color-hover, inherit);
-  }
-
-  &--focused {
-    background: var(--ms-option-background-focused, $ms-option-bg-focused);
-    color: var(--ms-option-color-focused, inherit);
-    outline: var(--ms-option-outline-focused, $ms-option-outline-focused);
-    outline-offset: var(--ms-option-focus-outline-offset, $ms-option-focus-outline-offset);
-  }
-
-  &--matched {
-    background: var(--ms-option-background-matched, $ms-option-bg-matched);
-    color: var(--ms-option-color-matched, inherit);
-    border-left: var(--ms-option-border-matched, $ms-option-border-matched);
-  }
-
-  &--selected {
-    background: var(--ms-option-background-selected, $ms-option-bg-selected);
-    color: var(--ms-option-color-selected, inherit);
-
-    &:hover {
-      background: var(--ms-option-bg-selected-hover, var(--ms-option-background-selected, $ms-option-bg-selected));
-      color: var(--ms-option-color-selected-hover, var(--ms-option-color-selected, inherit));
-    }
-  }
-
-  &--disabled {
-    opacity: var(--ms-disabled-opacity, $ms-disabled-opacity);
-    cursor: not-allowed;
-
-    &:hover {
-      background: var(--ms-option-background, $ms-option-bg);
-    }
-  }
-
-  // Focused + Hover
-  &--focused:hover {
-    background: var(--ms-option-bg-focused-hover, $ms-option-bg-focused-hover);
-    color: var(--ms-option-color-focused-hover, var(--ms-option-color-focused, var(--ms-option-text-color, $ms-option-color)));
-  }
-
-  // Matched + Hover
-  &--matched:hover {
-    background: var(--ms-option-bg-matched-hover, $ms-option-bg-matched-hover);
-    color: var(--ms-option-color-matched-hover, var(--ms-option-color-matched, var(--ms-option-text-color, $ms-option-color)));
-  }
-
-  // Selected + Focused
-  &--selected#{&}--focused {
-    background: var(--ms-option-bg-selected-focused, $ms-option-bg-selected-focused);
-    color: var(--ms-option-color-selected-focused, var(--ms-option-color-selected, var(--ms-option-text-color, $ms-option-color)));
-    outline: var(--ms-option-outline-focused, $ms-option-outline-focused);
-    outline-offset: var(--ms-option-focus-outline-offset, $ms-option-focus-outline-offset);
-  }
-
-  // Selected + Matched
-  &--selected#{&}--matched {
-    background: var(--ms-option-bg-selected-matched, $ms-option-bg-selected-matched);
-    color: var(--ms-option-color-selected-matched, var(--ms-option-color-selected, var(--ms-option-text-color, $ms-option-color)));
-    border-left: var(--ms-option-border-matched, $ms-option-border-matched);
-  }
-
-  // Disabled + Selected
-  &--disabled#{&}--selected {
-    background: var(--ms-option-bg-disabled-selected, $ms-option-bg-disabled-selected);
-    color: var(--ms-option-color-disabled-selected, var(--ms-option-color-selected, var(--ms-option-text-color, $ms-option-color)));
-  }
-
-  // Disabled + Focused (prevents focus outline on disabled items)
-  &--disabled#{&}--focused {
-    outline: none;
-  }
-
-  // Checkbox alignment variants (center is default, defined in _css-variables.scss)
-  &[data-checkbox-align="top"] {
-    --ms-checkbox-align: flex-start;
-  }
-
-  &[data-checkbox-align="bottom"] {
-    --ms-checkbox-align: flex-end;
-  }
-}
-
-// ==============================================================================
-// CHECKBOX (Custom Styled)
-// ==============================================================================
-// Uses a hidden native checkbox with a custom styled pseudo-element overlay.
-// This allows full control over background, border, and checkmark colors.
-
-.ms__checkbox {
-  // Hide native checkbox but keep it accessible
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  flex-shrink: 0;
-  position: relative;
-  margin-top: var(--ms-checkbox-margin-top, $ms-checkbox-margin-top);
-  margin-right: var(--ms-checkbox-margin-right, $ms-checkbox-margin-right);
-  margin-bottom: var(--ms-checkbox-margin-bottom, $ms-checkbox-margin-bottom);
-  margin-left: var(--ms-checkbox-margin-left, $ms-checkbox-margin-left);
-  width: var(--ms-checkbox-size, $ms-checkbox-size);
-  height: var(--ms-checkbox-size, $ms-checkbox-size);
-  transform: scale(var(--ms-checkbox-scale, $ms-checkbox-scale));
-  transform-origin: top left;
-  cursor: pointer;
-
-  // Custom checkbox appearance
-  background: var(--ms-checkbox-bg, $ms-checkbox-bg);
-  border: var(--ms-checkbox-border, $ms-checkbox-border);
-  border-radius: var(--ms-checkbox-border-radius, $ms-checkbox-border-radius);
-  transition: background-color 0.15s ease, border-color 0.15s ease;
-
-  // Checkmark using ::after pseudo-element
-  &::after {
-    content: '';
-    position: absolute;
-    display: none;
-    // Checkmark positioning (centered, slightly offset for visual balance)
-    left: 50%;
-    top: 45%;
-    width: 30%;
-    height: 55%;
-    transform: translate(-50%, -50%) rotate(45deg);
-    // Checkmark shape (right and bottom borders form the check)
-    border: solid var(--ms-checkbox-checkmark-color, $ms-checkbox-checkmark-color);
-    border-width: 0 2px 2px 0;
-  }
-
-  // Hover state
-  &:hover:not(:disabled) {
-    border-color: var(--ms-checkbox-hover-border-color, $ms-checkbox-hover-border-color);
-  }
-
-  // Checked state
-  &:checked {
-    background: var(--ms-checkbox-checked-bg, $ms-checkbox-checked-bg);
-    border: var(--ms-checkbox-checked-border, $ms-checkbox-checked-border);
-
-    &::after {
-      display: block;
-    }
-  }
-
-  // Checked + Hover
-  &:checked:hover:not(:disabled) {
-    background: var(--ms-checkbox-checked-bg-hover, $ms-checkbox-checked-bg-hover);
-    border-color: var(--ms-checkbox-checked-border-color-hover, $ms-checkbox-checked-border-color-hover);
-  }
-
-  // Focus state (accessibility)
-  &:focus-visible {
-    outline: 2px solid var(--ms-checkbox-checked-bg, $ms-checkbox-checked-bg);
-    outline-offset: 2px;
-  }
-
-  // Disabled state
-  &:disabled {
-    cursor: not-allowed;
-    background: var(--ms-checkbox-disabled-bg, $ms-checkbox-disabled-bg);
-    border: var(--ms-checkbox-disabled-border, $ms-checkbox-disabled-border);
-    opacity: 0.6;
-
-    &:checked {
-      background: var(--ms-checkbox-disabled-bg, $ms-checkbox-disabled-bg);
-    }
-  }
-
-  .ms__option--disabled & {
-    cursor: not-allowed;
-  }
-}
-
-// ==============================================================================
-// OPTION CONTENT
-// ==============================================================================
-
-// Option content (rich content wrapper)
-.ms__option-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--ms-option-content-gap, $ms-option-content-gap);
-  min-width: 0; // Allow text truncation
-}
-
-// Option icon/SVG
-.ms__option-icon {
-  flex-shrink: 0;
-  width: var(--ms-option-icon-size, $ms-option-icon-size);
-  height: var(--ms-option-icon-size, $ms-option-icon-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--ms-option-icon-font-size, $ms-option-icon-font-size);
-
-  svg {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-  }
-}
-
-// Option text container
-.ms__option-text {
-  flex: 1;
-  min-width: 0;
-}
-
-// Option title/main text
-.ms__option-title {
-  font-size: var(--ms-option-title-font-size, $ms-option-title-font-size);
-  color: var(--ms-option-title-color, $ms-option-title-color);
-  line-height: var(--ms-line-height-relaxed, $ms-line-height-relaxed);
-
-  // Highlight matched text
-  mark {
-    background: var(--ms-option-mark-background, $ms-option-mark-bg);
-    color: var(--ms-option-mark-color, $ms-option-mark-color);
-    font-weight: var(--ms-option-mark-font-weight, $ms-option-mark-font-weight);
-  }
-}
-
-// Option subtitle (multiline support)
-.ms__option-subtitle {
-  margin-top: var(--ms-option-subtitle-margin-top, $ms-option-subtitle-margin-top);
-  font-size: var(--ms-option-subtitle-font-size, $ms-option-subtitle-font-size);
-  color: var(--ms-option-subtitle-color, $ms-option-subtitle-color);
-  line-height: var(--ms-option-subtitle-line-height, $ms-option-subtitle-line-height);
-
-  // Subtitle color states (for solid background themes)
-  .ms__option:hover & {
-    color: var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color, $ms-option-subtitle-color));
-  }
-
-  .ms__option--selected & {
-    color: var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ms-option-subtitle-color));
-  }
-
-  .ms__option--selected:hover & {
-    color: var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color, $ms-option-subtitle-color)));
-  }
-}
-
-// ==============================================================================
-// STATES
-// ==============================================================================
-
-// Empty state
-.ms__empty {
-  padding: var(--ms-empty-padding, $ms-empty-padding);
-  text-align: center;
-  font-size: var(--ms-empty-font-size, $ms-empty-font-size);
-  color: var(--ms-empty-color, $ms-empty-color);
-}
-
-// Loading state
-.ms__loader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--ms-loader-padding, $ms-loader-padding);
-  gap: var(--ms-loader-gap, $ms-loader-gap);
-}
-
-.ms__loading-text {
-  font-size: var(--ms-loading-text-font-size, $ms-loading-text-font-size);
-  color: var(--ms-loading-color, $ms-loading-text-color);
-}