@keenmate/web-multiselect 1.5.1 → 1.6.0

package/src/css/_input-dropdown.css

@@ -0,0 +1,263 @@
+/* ==============================================================================
+   INPUT & DROPDOWN COMPONENTS
+   ==============================================================================
+   Input field, toggle icon, count badge, floating hint, dropdown container, and actions
+*/
+
+/* ==============================================================================
+   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);
+  padding: var(--ms-input-padding);
+  padding-right: var(--ms-input-padding-right); /* Space for dropdown icon */
+  font-size: var(--ms-input-font-size);
+  border: var(--ms-input-border);
+  border-radius: var(--ms-input-border-radius);
+  background: var(--ms-input-background);
+  color: var(--ms-input-color);
+  cursor: pointer;
+  transition: border var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+.ms__input:hover:not(:focus):not(:disabled) {
+  border: var(--ms-input-border-hover);
+}
+
+.ms__input:focus {
+  outline: none;
+  border: var(--ms-input-border-focus);
+}
+
+.ms__input::placeholder {
+  color: var(--ms-input-placeholder-color);
+  opacity: 0; /* Initially hidden until component is ready */
+  transition: opacity var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+/* Show placeholder only after component is fully initialized */
+:host([data-ready]) .ms__input::placeholder {
+  opacity: var(--ms-placeholder-opacity);
+}
+
+/* Size variants */
+.ms__input.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.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.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.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);
+  top: 50%;
+  transform: var(--ms-transform-center-y);
+  pointer-events: none;
+  color: var(--ms-toggle-icon-color);
+  transition: transform var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+.ms--open .ms__toggle {
+  transform: var(--ms-transform-center-y) rotate(var(--ms-transform-rotate-180));
+  color: var(--ms-toggle-icon-color-open);
+}
+
+/* ==============================================================================
+   COUNT BADGE (IN INPUT)
+   ==============================================================================
+*/
+
+/* Count badge (appears next to toggle icon) */
+.ms__counter {
+  position: absolute;
+  right: var(--ms-counter-offset); /* Space for toggle icon */
+  top: 50%;
+  transform: var(--ms-transform-center-y);
+  padding: var(--ms-counter-padding);
+  background: var(--ms-counter-badge-background);
+  color: var(--ms-counter-badge-color);
+  font-size: var(--ms-counter-font-size);
+  font-weight: var(--ms-counter-font-weight);
+  border-radius: var(--ms-counter-border-radius);
+  cursor: pointer;
+  transition: all var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+.ms__counter:hover {
+  background: var(--ms-counter-badge-background-hover);
+  transform: var(--ms-transform-center-y) scale(var(--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);
+  padding: var(--ms-hint-padding);
+  background: var(--ms-hint-background);
+  border: var(--ms-hint-border);
+  border-radius: var(--ms-hint-border-radius);
+  box-shadow: var(--ms-hint-box-shadow);
+  font-size: var(--ms-hint-font-size);
+  color: var(--ms-hint-color);
+  line-height: var(--ms-line-height-relaxed);
+  max-width: 100%;
+}
+
+.ms__hint--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);
+  background: var(--ms-dropdown-background);
+  border: var(--ms-dropdown-border);
+  border-radius: var(--ms-dropdown-border-radius);
+  box-shadow: var(--ms-dropdown-box-shadow);
+  max-height: var(--ms-options-max-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+  color: var(--ms-dropdown-text-color);
+
+  /* Scrollbar styling */
+  scrollbar-width: thin;  /* Firefox */
+  scrollbar-color: var(--ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg);
+}
+
+.ms__dropdown::-webkit-scrollbar {
+  width: var(--ms-scrollbar-width);
+}
+
+.ms__dropdown::-webkit-scrollbar-track {
+  background: var(--ms-scrollbar-track-bg);
+}
+
+.ms__dropdown::-webkit-scrollbar-thumb {
+  background: var(--ms-scrollbar-thumb-bg);
+  border-radius: var(--ms-scrollbar-thumb-border-radius);
+}
+
+.ms__dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--ms-scrollbar-thumb-bg-hover);
+}
+
+.ms__dropdown--visible {
+  display: block;
+}
+
+.ms__dropdown--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);
+  padding: var(--ms-actions-padding);
+  border-bottom: var(--ms-actions-border-bottom);
+}
+
+.ms__actions--wrap {
+  flex-wrap: wrap;
+}
+
+.ms__actions--sticky {
+  position: sticky;
+  top: 0;
+  z-index: var(--ms-z-index-sticky);
+  background: var(--ms-actions-background);
+}
+
+.ms__action-btn {
+  flex: 1;
+  font-family: inherit; /* Form elements don't inherit font by default */
+  padding: var(--ms-action-btn-padding);
+  font-size: var(--ms-action-btn-font-size);
+  border: var(--ms-action-btn-border);
+  border-radius: var(--ms-action-btn-border-radius);
+  background: var(--ms-action-button-background);
+  color: var(--ms-action-button-color);
+  cursor: pointer;
+  transition: all var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+.ms__action-btn:hover {
+  background: var(--ms-action-button-background-hover);
+  border-color: var(--ms-action-button-border-color-hover);
+}
+
+.ms__action-btn:active {
+  transform: scale(var(--ms-transform-scale-active));
+}
+
+.ms__action-btn:disabled,
+.ms__action-btn[disabled] {
+  opacity: var(--ms-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/src/css/_modifiers.css

@@ -0,0 +1,32 @@
+/* ==============================================================================
+   MODIFIERS & VARIANTS
+   ==============================================================================
+   State modifiers (disabled, no-checkboxes)
+   Note: Size variants removed - use --ms-rem for global scaling instead
+*/
+
+/* ==============================================================================
+   STATE MODIFIERS
+   ==============================================================================
+*/
+
+/* Disabled state */
+.ms--disabled .ms__input {
+  opacity: var(--ms-disabled-input-opacity);
+  cursor: not-allowed;
+  background: var(--ms-input-bg-disabled);
+}
+
+.ms--disabled .ms__toggle {
+  opacity: var(--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); /* Adjust padding */
+}
+
+.ms--no-checkboxes .ms__option-content {
+  padding-left: 0; /* No extra padding needed */
+}

package/src/css/_options.css

@@ -0,0 +1,365 @@
+/* ==============================================================================
+   OPTIONS & CONTENT
+   ==============================================================================
+   Options list, groups, checkbox, option content, icons, text, and states
+*/
+
+/* ==============================================================================
+   OPTIONS CONTAINER
+   ==============================================================================
+*/
+
+/* Options container */
+.ms__options {
+  padding: var(--ms-options-padding);
+
+  /* Scrollbar styling */
+  scrollbar-width: thin;  /* Firefox */
+  scrollbar-color: var(--ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg);
+}
+
+.ms__options::-webkit-scrollbar {
+  width: var(--ms-scrollbar-width);
+}
+
+.ms__options::-webkit-scrollbar-track {
+  background: var(--ms-scrollbar-track-bg);
+}
+
+.ms__options::-webkit-scrollbar-thumb {
+  background: var(--ms-scrollbar-thumb-bg);
+  border-radius: var(--ms-scrollbar-thumb-border-radius);
+}
+
+.ms__options::-webkit-scrollbar-thumb:hover {
+  background: var(--ms-scrollbar-thumb-bg-hover);
+}
+
+/* Virtual scroll - enforce consistent heights */
+.ms__options--virtual .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 - consecutive groups */
+.ms__group + .ms__group {
+  border-top: var(--ms-group-border-top);
+  margin-top: var(--ms-group-margin-top);
+  padding-top: var(--ms-group-padding-top);
+}
+
+/* Group label */
+.ms__group-label {
+  padding: var(--ms-group-label-padding);
+  font-size: var(--ms-group-label-font-size);
+  font-weight: var(--ms-group-label-font-weight);
+  color: var(--ms-group-label-color);
+  text-transform: var(--ms-group-label-transform);
+  letter-spacing: var(--ms-group-label-letter-spacing);
+}
+
+/* ==============================================================================
+   INDIVIDUAL OPTION
+   ==============================================================================
+*/
+
+/* Individual option */
+.ms__option {
+  display: flex;
+  align-items: var(--ms-checkbox-align, center); /* Support checkbox alignment */
+  gap: var(--ms-option-gap);
+  padding: var(--ms-option-padding);
+  color: var(--ms-option-text-color);
+  background: var(--ms-option-background);
+  cursor: pointer;
+}
+
+.ms__option:hover {
+  background: var(--ms-option-background-hover);
+  color: var(--ms-option-color-hover, inherit);
+}
+
+.ms__option--focused {
+  background: var(--ms-option-background-focused);
+  color: var(--ms-option-color-focused, inherit);
+  outline: var(--ms-option-outline-focused);
+  outline-offset: var(--ms-option-focus-outline-offset);
+}
+
+.ms__option--matched {
+  background: var(--ms-option-background-matched);
+  color: var(--ms-option-color-matched, inherit);
+  border-left: var(--ms-option-border-matched);
+}
+
+.ms__option--selected {
+  background: var(--ms-option-background-selected);
+}
+
+.ms__option--selected:hover {
+  background: var(--ms-option-bg-selected-hover, var(--ms-option-background-selected));
+}
+
+.ms__option--disabled {
+  opacity: var(--ms-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.ms__option--disabled:hover {
+  background: var(--ms-option-background);
+}
+
+/* Focused + Hover */
+.ms__option--focused:hover {
+  background: var(--ms-option-bg-focused-hover);
+  color: var(--ms-option-color-focused-hover, var(--ms-option-color-focused, var(--ms-option-text-color)));
+}
+
+/* Matched + Hover */
+.ms__option--matched:hover {
+  background: var(--ms-option-bg-matched-hover);
+  color: var(--ms-option-color-matched-hover, var(--ms-option-color-matched, var(--ms-option-text-color)));
+}
+
+/* Selected + Focused */
+.ms__option--selected.ms__option--focused {
+  background: var(--ms-option-bg-selected-focused);
+  outline: var(--ms-option-outline-focused);
+  outline-offset: var(--ms-option-focus-outline-offset);
+}
+
+/* Selected + Matched */
+.ms__option--selected.ms__option--matched {
+  background: var(--ms-option-bg-selected-matched);
+  border-left: var(--ms-option-border-matched);
+}
+
+/* Disabled + Selected */
+.ms__option--disabled.ms__option--selected {
+  background: var(--ms-option-bg-disabled-selected);
+}
+
+/* Disabled + Focused (prevents focus outline on disabled items) */
+.ms__option--disabled.ms__option--focused {
+  outline: none;
+}
+
+/* Checkbox alignment variants (center is default, defined in _variables.css) */
+.ms__option[data-checkbox-align="top"] {
+  --ms-checkbox-align: flex-start;
+}
+
+.ms__option[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);
+  margin-right: var(--ms-checkbox-margin-right);
+  margin-bottom: var(--ms-checkbox-margin-bottom);
+  margin-left: var(--ms-checkbox-margin-left);
+  width: var(--ms-checkbox-size);
+  height: var(--ms-checkbox-size);
+  transform: scale(var(--ms-checkbox-scale));
+  transform-origin: top left;
+  cursor: pointer;
+
+  /* Custom checkbox appearance */
+  background: var(--ms-checkbox-bg);
+  border: var(--ms-checkbox-border);
+  border-radius: var(--ms-checkbox-border-radius);
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+/* Checkmark using ::after pseudo-element */
+.ms__checkbox::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);
+  border-width: 0 2px 2px 0;
+}
+
+/* Hover state */
+.ms__checkbox:hover:not(:disabled) {
+  border-color: var(--ms-checkbox-hover-border-color);
+}
+
+/* Checked state */
+.ms__checkbox:checked {
+  background: var(--ms-checkbox-checked-bg);
+  border: var(--ms-checkbox-checked-border);
+}
+
+.ms__checkbox:checked::after {
+  display: block;
+}
+
+/* Checked + Hover */
+.ms__checkbox:checked:hover:not(:disabled) {
+  background: var(--ms-checkbox-checked-bg-hover);
+  border-color: var(--ms-checkbox-checked-border-color-hover);
+}
+
+/* Focus state (accessibility) */
+.ms__checkbox:focus-visible {
+  outline: 2px solid var(--ms-checkbox-checked-bg);
+  outline-offset: 2px;
+}
+
+/* Disabled state */
+.ms__checkbox:disabled {
+  cursor: not-allowed;
+  background: var(--ms-checkbox-disabled-bg);
+  border: var(--ms-checkbox-disabled-border);
+  opacity: 0.6;
+}
+
+.ms__checkbox:disabled:checked {
+  background: var(--ms-checkbox-disabled-bg);
+}
+
+.ms__option--disabled .ms__checkbox {
+  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);
+  min-width: 0; /* Allow text truncation */
+}
+
+/* Option icon/SVG */
+.ms__option-icon {
+  flex-shrink: 0;
+  width: var(--ms-option-icon-size);
+  height: var(--ms-option-icon-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ms-option-icon-font-size);
+}
+
+.ms__option-icon 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);
+  color: var(--ms-option-title-color);
+  line-height: var(--ms-line-height-relaxed);
+}
+
+/* Title color states (for solid background themes) */
+.ms__option:hover .ms__option-title {
+  color: var(--ms-option-title-color-hover, var(--ms-option-title-color));
+}
+
+.ms__option--selected .ms__option-title {
+  color: var(--ms-option-title-color-selected, var(--ms-option-title-color));
+}
+
+.ms__option--selected:hover .ms__option-title {
+  color: var(--ms-option-title-color-selected-hover, var(--ms-option-title-color-selected, var(--ms-option-title-color)));
+}
+
+/* Highlight matched text */
+.ms__option-title mark {
+  background: var(--ms-option-mark-background);
+  color: var(--ms-option-mark-color);
+  font-weight: var(--ms-option-mark-font-weight);
+}
+
+/* Option subtitle (multiline support) */
+.ms__option-subtitle {
+  margin-top: var(--ms-option-subtitle-margin-top);
+  font-size: var(--ms-option-subtitle-font-size);
+  color: var(--ms-option-subtitle-color);
+  line-height: var(--ms-option-subtitle-line-height);
+}
+
+/* Subtitle color states (for solid background themes) */
+.ms__option:hover .ms__option-subtitle {
+  color: var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color));
+}
+
+.ms__option--selected .ms__option-subtitle {
+  color: var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color));
+}
+
+.ms__option--selected:hover .ms__option-subtitle {
+  color: var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color)));
+}
+
+/* ==============================================================================
+   STATES
+   ==============================================================================
+*/
+
+/* Empty state */
+.ms__empty {
+  padding: var(--ms-empty-padding);
+  text-align: center;
+  font-size: var(--ms-empty-font-size);
+  color: var(--ms-empty-color);
+}
+
+/* Loading state */
+.ms__loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ms-loader-padding);
+  gap: var(--ms-loader-gap);
+}
+
+.ms__loading-text {
+  font-size: var(--ms-loading-text-font-size);
+  color: var(--ms-loading-color);
+}