@keenmate/web-multiselect 1.0.0-rc10 → 1.0.0

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-count-badge-offset: 2rem;--ml-count-badge-padding: .125rem .25rem;--ml-count-badge-bg: #3b82f6;--ml-count-badge-color: #ffffff;--ml-count-badge-font-size: .75rem;--ml-count-badge-font-weight: 600;--ml-count-badge-border-radius: .25rem;--ml-count-badge-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-dropdown-max-height: 20rem;--ml-dropdown-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-pills-gap: .5rem;--ml-pills-margin-bottom: .5rem;--ml-pills-margin-top: .5rem;--ml-pills-margin-left: .25rem;--ml-pills-margin-right: .25rem;--ml-pill-gap: .5rem;--ml-pill-height: 1.5rem;--ml-pill-font-size: .75rem;--ml-pill-font-weight: 600;--ml-pill-border-radius: .375rem;--ml-pill-bg: #eff6ff;--ml-pill-bg-hover: #ffffff;--ml-pill-bg-active: #e0f2fe;--ml-order-first: -1;--ml-pill-text-padding: 0 .5rem;--ml-pill-text-bg: #eff6ff;--ml-pill-text-color: #3b82f6;--ml-pill-remove-width: 1.5rem;--ml-pill-remove-bg: #3b82f6;--ml-pill-remove-color: #ffffff;--ml-pill-remove-border: none;--ml-pill-remove-font-size: .75rem;--ml-pill-remove-bg-hover: #2563eb;--ml-pill-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-count-badge-wrapper-bg: transparent;--ml-count-badge-wrapper-border: 1px solid #e5e7eb;--ml-count-badge-wrapper-border-radius: .25rem;--ml-count-badge-wrapper-padding: .25rem .5rem;--ml-count-badge-wrapper-gap: .25rem;--ml-count-badge-wrapper-bg-hover: #f9fafb;--ml-count-badge-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__count-badge{position:absolute;right:var(--ml-count-badge-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-count-badge-padding, .125rem .25rem);background:var(--ml-count-badge-bg, #3b82f6);color:var(--ml-count-badge-color, #ffffff);font-size:var(--ml-count-badge-font-size, .75rem);font-weight:var(--ml-count-badge-font-weight, 600);border-radius:var(--ml-count-badge-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge:hover{background:var(--ml-count-badge-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-dropdown-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:flex-start;gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__pills{display:flex;flex-wrap:wrap;gap:var(--ml-pills-gap, .5rem);padding:0}.ml__pills:empty{display:none}.ml__pills--bottom{margin-top:var(--ml-pills-margin-bottom, .5rem)}.ml__pills--top{margin-bottom:var(--ml-pills-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__pills--left{order:var(--ml-order-first, -1);margin-right:var(--ml-pills-margin-left, .25rem);justify-content:flex-end}.ml__pills--right{margin-left:var(--ml-pills-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__count-badge-wrapper{display:inline-flex;align-items:center;gap:var(--ml-count-badge-wrapper-gap, .25rem);background:var(--ml-count-badge-wrapper-bg, transparent);border:var(--ml-count-badge-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-count-badge-wrapper-border-radius, .25rem);padding:var(--ml-count-badge-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-badge-wrapper:hover{background:var(--ml-count-badge-wrapper-bg-hover, #f9fafb);border-color:var(--ml-count-badge-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__pill{display:inline-flex;align-items:center;height:var(--ml-pill-height, 1.5rem);font-size:var(--ml-pill-font-size, .75rem);font-weight:var(--ml-pill-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-pill-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__pill-text{display:flex;align-items:center;height:100%;padding:var(--ml-pill-text-padding, 0 .5rem);background:var(--ml-pill-text-bg, #eff6ff);color:var(--ml-pill-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__pill-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-pill-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-pill-remove-bg, #3b82f6);color:var(--ml-pill-remove-color, #ffffff);border:var(--ml-pill-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-pill-remove-font-size, .75rem)}.ml__pill-remove:hover{background:var(--ml-pill-remove-bg-hover, #2563eb)}.ml__pill-remove:focus{outline:none;box-shadow:var(--ml-pill-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__pill-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__pill--more{cursor:pointer}.ml__pill--more .ml__pill-text{background:var(--ml-more-badge-bg, #eff6ff);font-weight:var(--ml-pill-font-weight, 600)}.ml__pill--more:hover .ml__pill-text{background:var(--ml-more-badge-hover-bg, #ffffff)}.ml__pill--more:active .ml__pill-text{background:var(--ml-more-badge-active-bg, #e0f2fe)}.ml__pill-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__pill-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__pill{width:100%}.ml__selected-popover-body .ml__pill-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__pill{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, .25rem);overflow:hidden;box-sizing:border-box}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__count-badge{left:var(--ml-count-badge-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__pills{direction:rtl}.ml--rtl .ml__pill{flex-direction:row-reverse}.ml--rtl .ml__pill-remove{border-radius:var(--ml-pill-remove-border-radius-rtl, .375rem) 0 0 var(--ml-pill-remove-border-radius-rtl, .375rem);border-left:var(--ml-pill-remove-border, none);border-right:none}.ml--rtl .ml__pill-text{border-radius:0 var(--ml-pill-text-border-radius-rtl, .375rem) var(--ml-pill-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__count-badge-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__pill{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__pill{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__pill{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}
+@charset "UTF-8";:host{--ml-accent-color: #3b82f6;--ml-accent-color-hover: #2563eb;--ml-accent-color-active: #1d4ed8;--ml-text-primary: #111827;--ml-text-secondary: #6b7280;--ml-text-white: #ffffff;--ml-primary-bg: #f3f4f6;--ml-primary-bg-hover: #e5e7eb;--ml-border-color: #e5e7eb;--ml-input-padding: .5rem .75rem;--ml-input-padding-right: 2.5rem;--ml-input-font-size: .875rem;--ml-input-border-style: 1px solid #d1d5db;--ml-input-border-radius: .375rem;--ml-input-bg: #ffffff;--ml-input-text: #111827;--ml-input-focus-border-color: #3b82f6;--ml-input-placeholder-color: #6b7280;--ml-input-bg-disabled: rgba(107, 114, 128, .05);--ml-toggle-right: .75rem;--ml-toggle-color: #6b7280;--ml-transform-center-y: translateY(-50%);--ml-transform-rotate-180: 180deg;--ml-counter-offset: 2rem;--ml-counter-padding: .125rem .25rem;--ml-counter-bg: #3b82f6;--ml-counter-color: #ffffff;--ml-counter-font-size: .75rem;--ml-counter-font-weight: 600;--ml-counter-border-radius: .25rem;--ml-counter-bg-hover: #2563eb;--ml-transform-scale-hover: 1.1;--ml-hint-padding: .5rem .75rem;--ml-hint-bg: #ffffff;--ml-hint-border: 1px solid #e5e7eb;--ml-hint-border-radius: .375rem;--ml-hint-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--ml-hint-font-size: .75rem;--ml-hint-color: #6b7280;--ml-line-height-relaxed: 1.4;--ml-dropdown-bg: #ffffff;--ml-dropdown-border: 1px solid #e5e7eb;--ml-dropdown-border-radius: .375rem;--ml-dropdown-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-options-max-height: 20rem;--ml-option-color: #111827;--ml-z-index-dropdown: 9999;--ml-z-index-sticky: 1;--ml-actions-gap: .25rem;--ml-actions-padding: .5rem;--ml-actions-border-bottom: 1px solid #e5e7eb;--ml-actions-bg: #ffffff;--ml-action-btn-padding: .25rem .5rem;--ml-action-btn-font-size: .75rem;--ml-action-btn-border: 1px solid #e5e7eb;--ml-action-btn-border-radius: .25rem;--ml-action-btn-bg: transparent;--ml-action-btn-color: inherit;--ml-action-btn-bg-hover: #f3f4f6;--ml-action-btn-border-color-hover: #3b82f6;--ml-transform-scale-active: .98;--ml-options-padding: .25rem 0;--ml-group-border-top: 1px solid #e5e7eb;--ml-group-margin-top: .25rem;--ml-group-padding-top: .25rem;--ml-group-label-padding: .25rem .75rem;--ml-group-label-font-size: .75rem;--ml-group-label-font-weight: 600;--ml-group-label-color: #6b7280;--ml-group-label-transform: uppercase;--ml-group-label-letter-spacing: .05em;--ml-option-gap: .5rem;--ml-option-padding: .5rem .75rem;--ml-option-padding-h: .75rem;--ml-option-bg: transparent;--ml-option-bg-hover: #f9fafb;--ml-option-bg-focused: #f9fafb;--ml-option-outline-focused: 2px solid #3b82f6;--ml-option-focus-outline-offset: -2px;--ml-option-bg-matched: rgba(59, 130, 246, .08);--ml-option-border-matched: 3px solid rgba(59, 130, 246, .4);--ml-option-bg-selected: rgba(59, 130, 246, .1);--ml-disabled-opacity: .5;--ml-option-content-gap: .5rem;--ml-option-icon-size: 1.25rem;--ml-option-icon-font-size: 1rem;--ml-option-title-font-size: .875rem;--ml-option-title-color: inherit;--ml-option-mark-bg: rgba(59, 130, 246, .2);--ml-option-mark-color: inherit;--ml-option-mark-font-weight: 600;--ml-option-subtitle-margin-top: .25rem;--ml-option-subtitle-font-size: .75rem;--ml-option-subtitle-color: #6b7280;--ml-option-subtitle-line-height: 1.3;--ml-checkbox-margin-top: .125rem;--ml-checkbox-size: 16px;--ml-checkbox-scale: 1;--ml-checkbox-align: flex-start;--ml-empty-padding: 1rem .75rem;--ml-empty-font-size: .875rem;--ml-empty-color: #6b7280;--ml-loader-padding: 1rem;--ml-loader-gap: .5rem;--ml-loading-text-font-size: .875rem;--ml-loading-text-color: #6b7280;--ml-badges-gap: .5rem;--ml-badges-margin-bottom: .5rem;--ml-badges-margin-top: .5rem;--ml-badges-margin-left: .25rem;--ml-badges-margin-right: .25rem;--ml-badge-gap: .5rem;--ml-badge-height: 1.5rem;--ml-badge-font-size: .75rem;--ml-badge-font-weight: 600;--ml-badge-border-radius: .375rem;--ml-badge-bg: #eff6ff;--ml-badge-bg-hover: #ffffff;--ml-badge-bg-active: #e0f2fe;--ml-order-first: -1;--ml-badge-text-padding: 0 .5rem;--ml-badge-text-bg: #eff6ff;--ml-badge-text-color: #3b82f6;--ml-badge-remove-width: 1.5rem;--ml-badge-remove-bg: #3b82f6;--ml-badge-remove-color: #ffffff;--ml-badge-remove-border: none;--ml-badge-remove-font-size: .75rem;--ml-badge-remove-bg-hover: #2563eb;--ml-badge-remove-box-shadow-focus: 0 0 0 2px rgba(59, 130, 246, .5);--ml-icon-remove: "×";--ml-badge-counter-bg: transparent;--ml-badge-counter-border: 1px solid #e5e7eb;--ml-badge-counter-border-radius: .25rem;--ml-badge-counter-text-color: #6b7280;--ml-badge-counter-text-bg: #d1d5db;--ml-badge-counter-remove-bg: #6b7280;--ml-badge-counter-remove-color: #ffffff;--ml-badge-counter-remove-bg-hover: #111827;--ml-more-badge-bg: #eff6ff;--ml-more-badge-hover-bg: #ffffff;--ml-more-badge-active-bg: #e0f2fe;--ml-count-display-margin-bottom: .5rem;--ml-count-display-margin-top: .5rem;--ml-count-display-margin-left: .5rem;--ml-count-display-margin-right: .5rem;--ml-counter-wrapper-bg: transparent;--ml-counter-wrapper-border: 1px solid #e5e7eb;--ml-counter-wrapper-border-radius: .25rem;--ml-counter-wrapper-padding: .25rem .5rem;--ml-counter-wrapper-gap: .25rem;--ml-counter-wrapper-bg-hover: #f9fafb;--ml-counter-wrapper-border-color-hover: #3b82f6;--ml-count-text-bg: transparent;--ml-count-text-border: none;--ml-count-text-font-size: .875rem;--ml-count-text-color: #111827;--ml-count-clear-size: 1rem;--ml-count-clear-bg: transparent;--ml-count-clear-color: #6b7280;--ml-count-clear-font-size: 1.125rem;--ml-count-clear-border-radius: 50%;--ml-count-clear-bg-hover: rgba(59, 130, 246, .2);--ml-count-clear-color-hover: #3b82f6;--ml-icon-clear: "×";--ml-tooltip-bg: #333;--ml-tooltip-color: #fff;--ml-tooltip-padding: .5rem .75rem;--ml-tooltip-border-radius: .375rem;--ml-tooltip-font-size: .875rem;--ml-tooltip-max-width: 20rem;--ml-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ml-tooltip-z-index: 10000;--ml-z-index-popover: 10000;--ml-selected-popover-width: 20rem;--ml-selected-popover-max-height: 20rem;--ml-selected-popover-bg: #ffffff;--ml-selected-popover-border: 1px solid #e5e7eb;--ml-selected-popover-border-radius: .375rem;--ml-selected-popover-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ml-selected-popover-header-padding: .5rem .75rem;--ml-selected-popover-header-bg: rgba(59, 130, 246, .1);--ml-selected-popover-header-border-bottom: 1px solid #e5e7eb;--ml-selected-popover-header-font-size: .875rem;--ml-selected-popover-header-font-weight: 600;--ml-selected-popover-header-color: #111827;--ml-popover-close-size: 1.5rem;--ml-selected-popover-close-bg: transparent;--ml-selected-popover-close-color: #6b7280;--ml-selected-popover-close-font-size: 1.25rem;--ml-selected-popover-close-border-radius: 50%;--ml-selected-popover-close-bg-hover: rgba(59, 130, 246, .2);--ml-selected-popover-close-color-hover: #3b82f6;--ml-selected-popover-body-gap: .25rem;--ml-selected-popover-body-padding: .5rem;--ml-selected-popover-body-max-height: 18rem;--ml-font-size-2xs: .625rem;--ml-font-size-xs: .75rem;--ml-font-size-sm: .875rem;--ml-font-size-base: 1rem;--ml-font-size-lg: 1.125rem;--ml-font-weight-medium: 500;--ml-font-weight-semibold: 600;--ml-line-height-none: 1;--ml-spacing-xs: .25rem;--ml-spacing-sm: .5rem;--ml-spacing-md: .75rem;--ml-spacing-lg: 1rem;--ml-transition-fast: .15s;--ml-transition-normal: .2s;--ml-easing-snappy: cubic-bezier(.4, 0, .2, 1);--ml-placeholder-opacity: .6;--ml-disabled-input-opacity: .6}multi-select:not(:defined){display:block;min-height:2.5rem;color:transparent!important;background:transparent}.ml-wrapper{display:flex;flex-direction:column;align-items:stretch}.ml-wrapper--inline{flex-direction:row;align-items:flex-start}.ml{position:relative;width:100%}.ml__input-wrapper{position:relative;display:flex;align-items:center}.ml__input{width:100%;padding:var(--ml-input-padding, .5rem .75rem);padding-right:var(--ml-input-padding-right, 2.5rem);font-size:var(--ml-input-font-size, .875rem);border:var(--ml-input-border-style, 1px solid #d1d5db);border-radius:var(--ml-input-border-radius, .375rem);background:var(--ml-input-bg, #ffffff);color:var(--ml-input-text, #111827);cursor:pointer;transition:border-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__input:focus{outline:none;border-color:var(--ml-input-focus-border-color, #3b82f6)}.ml__input::placeholder{color:var(--ml-input-placeholder-color, #6b7280);opacity:0;transition:opacity var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}:host([data-ready]) .ml__input::placeholder{opacity:var(--ml-placeholder-opacity, .6)}.ml__toggle{position:absolute;right:var(--ml-toggle-right, .75rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));pointer-events:none;color:var(--ml-toggle-color, #6b7280);transition:transform var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml--open .ml__toggle{transform:var(--ml-transform-center-y, translateY(-50%)) rotate(var(--ml-transform-rotate-180, 180deg))}.ml__counter{position:absolute;right:var(--ml-counter-offset, 2rem);top:50%;transform:var(--ml-transform-center-y, translateY(-50%));padding:var(--ml-counter-padding, .125rem .25rem);background:var(--ml-counter-bg, #3b82f6);color:var(--ml-counter-color, #ffffff);font-size:var(--ml-counter-font-size, .75rem);font-weight:var(--ml-counter-font-weight, 600);border-radius:var(--ml-counter-border-radius, .25rem);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__counter:hover{background:var(--ml-counter-bg-hover, #2563eb);transform:var(--ml-transform-center-y, translateY(-50%)) scale(var(--ml-transform-scale-hover, 1.1))}.ml__hint{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);padding:var(--ml-hint-padding, .5rem .75rem);background:var(--ml-hint-bg, #ffffff);border:var(--ml-hint-border, 1px solid #e5e7eb);border-radius:var(--ml-hint-border-radius, .375rem);box-shadow:var(--ml-hint-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1));font-size:var(--ml-hint-font-size, .75rem);color:var(--ml-hint-color, #6b7280);line-height:var(--ml-line-height-relaxed, 1.4);max-width:100%}.ml__hint--visible{display:block}.ml__dropdown{display:none;position:absolute;z-index:var(--ml-z-index-dropdown, 9999);background:var(--ml-dropdown-bg, #ffffff);border:var(--ml-dropdown-border, 1px solid #e5e7eb);border-radius:var(--ml-dropdown-border-radius, .375rem);box-shadow:var(--ml-dropdown-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));max-height:var(--ml-options-max-height, 20rem);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:var(--ml-option-color, #111827)}.ml__dropdown--visible{display:block}.ml__dropdown--virtual{overflow-y:visible;max-height:none}.ml__actions{display:flex;flex-wrap:nowrap;gap:var(--ml-actions-gap, .25rem);padding:var(--ml-actions-padding, .5rem);border-bottom:var(--ml-actions-border-bottom, 1px solid #e5e7eb)}.ml__actions--wrap{flex-wrap:wrap}.ml__actions--sticky{position:sticky;top:0;z-index:var(--ml-z-index-sticky, 1);background:var(--ml-actions-bg, #ffffff)}.ml__action-btn{flex:1;padding:var(--ml-action-btn-padding, .25rem .5rem);font-size:var(--ml-action-btn-font-size, .75rem);border:var(--ml-action-btn-border, 1px solid #e5e7eb);border-radius:var(--ml-action-btn-border-radius, .25rem);background:var(--ml-action-btn-bg, transparent);color:var(--ml-action-btn-color, inherit);cursor:pointer;transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__action-btn:hover{background:var(--ml-action-btn-bg-hover, #f3f4f6);border-color:var(--ml-action-btn-border-color-hover, #3b82f6)}.ml__action-btn:active{transform:scale(var(--ml-transform-scale-active, .98))}.ml__action-btn:disabled,.ml__action-btn[disabled]{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.ml__options{padding:var(--ml-options-padding, .25rem 0)}.ml__options--virtual .ml__option{height:var(--ml-option-height, 50px);min-height:var(--ml-option-height, 50px);max-height:var(--ml-option-height, 50px);overflow:hidden;box-sizing:border-box}.ml__group+.ml__group{border-top:var(--ml-group-border-top, 1px solid #e5e7eb);margin-top:var(--ml-group-margin-top, .25rem);padding-top:var(--ml-group-padding-top, .25rem)}.ml__group-label{padding:var(--ml-group-label-padding, .25rem .75rem);font-size:var(--ml-group-label-font-size, .75rem);font-weight:var(--ml-group-label-font-weight, 600);color:var(--ml-group-label-color, #6b7280);text-transform:var(--ml-group-label-transform, uppercase);letter-spacing:var(--ml-group-label-letter-spacing, .05em)}.ml__option{display:flex;align-items:var(--ml-checkbox-align, flex-start);gap:var(--ml-option-gap, .5rem);padding:var(--ml-option-padding, .5rem .75rem);cursor:pointer;transition:background-color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__option:hover{background:var(--ml-option-bg-hover, #f9fafb)}.ml__option--focused{background:var(--ml-option-bg-focused, #f9fafb);outline:var(--ml-option-outline-focused, 2px solid #3b82f6);outline-offset:var(--ml-option-focus-outline-offset, -2px)}.ml__option--matched{background:var(--ml-option-bg-matched, rgba(59, 130, 246, .08));border-left:var(--ml-option-border-matched, 3px solid rgba(59, 130, 246, .4))}.ml__option--selected{background:var(--ml-option-bg-selected, rgba(59, 130, 246, .1))}.ml__option--selected:hover{background:var(--ml-option-bg-selected-hover, var(--ml-option-bg-selected, rgba(59, 130, 246, .1)))}.ml__option--disabled{opacity:var(--ml-disabled-opacity, .5);cursor:not-allowed}.ml__option--disabled:hover{background:var(--ml-option-bg, transparent)}.ml__option[data-checkbox-align=center]{--ml-checkbox-align: center}.ml__option[data-checkbox-align=bottom]{--ml-checkbox-align: flex-end}.ml__checkbox{flex-shrink:0;margin-top:var(--ml-checkbox-margin-top, .125rem);width:var(--ml-checkbox-size, 16px);height:var(--ml-checkbox-size, 16px);transform:scale(var(--ml-checkbox-scale, 1));transform-origin:top left;cursor:pointer}.ml__option--disabled .ml__checkbox{cursor:not-allowed}.ml__option-content{flex:1;display:flex;align-items:flex-start;gap:var(--ml-option-content-gap, .5rem);min-width:0}.ml__option-icon{flex-shrink:0;width:var(--ml-option-icon-size, 1.25rem);height:var(--ml-option-icon-size, 1.25rem);display:flex;align-items:center;justify-content:center;font-size:var(--ml-option-icon-font-size, 1rem)}.ml__option-icon svg{width:100%;height:100%;fill:currentColor}.ml__option-text{flex:1;min-width:0}.ml__option-title{font-size:var(--ml-option-title-font-size, .875rem);color:var(--ml-option-title-color, inherit);line-height:var(--ml-line-height-relaxed, 1.4)}.ml__option-title mark{background:var(--ml-option-mark-bg, rgba(59, 130, 246, .2));color:var(--ml-option-mark-color, inherit);font-weight:var(--ml-option-mark-font-weight, 600)}.ml__option-subtitle{margin-top:var(--ml-option-subtitle-margin-top, .25rem);font-size:var(--ml-option-subtitle-font-size, .75rem);color:var(--ml-option-subtitle-color, #6b7280);line-height:var(--ml-option-subtitle-line-height, 1.3)}.ml__empty{padding:var(--ml-empty-padding, 1rem .75rem);text-align:center;font-size:var(--ml-empty-font-size, .875rem);color:var(--ml-empty-color, #6b7280)}.ml__loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ml-loader-padding, 1rem);gap:var(--ml-loader-gap, .5rem)}.ml__loading-text{font-size:var(--ml-loading-text-font-size, .875rem);color:var(--ml-loading-text-color, #6b7280)}.ml__badges{display:flex;flex-wrap:wrap;gap:var(--ml-badges-gap, .5rem);padding:0}.ml__badges:empty{display:none}.ml__badges--bottom{margin-top:var(--ml-badges-margin-bottom, .5rem)}.ml__badges--top{margin-bottom:var(--ml-badges-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__badges--left{order:var(--ml-order-first, -1);margin-right:var(--ml-badges-margin-left, .25rem);justify-content:flex-end}.ml__badges--right{margin-left:var(--ml-badges-margin-right, .25rem);justify-content:flex-start}.ml__count-display{display:flex;align-items:center}.ml__count-display:empty{display:none}.ml__count-display--bottom{margin-top:var(--ml-count-display-margin-bottom, .5rem)}.ml__count-display--top{margin-bottom:var(--ml-count-display-margin-top, .5rem);order:var(--ml-order-first, -1)}.ml__count-display--left{order:var(--ml-order-first, -1);margin-right:var(--ml-count-display-margin-left, .5rem);justify-content:flex-start}.ml__count-display--right{margin-left:var(--ml-count-display-margin-right, .5rem);justify-content:flex-end}.ml__counter-wrapper{display:inline-flex;align-items:center;gap:var(--ml-counter-wrapper-gap, .25rem);background:var(--ml-counter-wrapper-bg, transparent);border:var(--ml-counter-wrapper-border, 1px solid #e5e7eb);border-radius:var(--ml-counter-wrapper-border-radius, .25rem);padding:var(--ml-counter-wrapper-padding, .25rem .5rem);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__counter-wrapper:hover{background:var(--ml-counter-wrapper-bg-hover, #f9fafb);border-color:var(--ml-counter-wrapper-border-color-hover, #3b82f6)}.ml__count-text{display:inline-flex;align-items:center;background:var(--ml-count-text-bg, transparent);border:var(--ml-count-text-border, none);padding:0;font-size:var(--ml-count-text-font-size, .875rem);color:var(--ml-count-text-color, #111827);cursor:pointer;transition:color var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--ml-count-clear-size, 1rem);height:var(--ml-count-clear-size, 1rem);padding:0;border:none;background:var(--ml-count-clear-bg, transparent);color:var(--ml-count-clear-color, #6b7280);font-size:var(--ml-count-clear-font-size, 1.125rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-count-clear-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__count-clear:hover{background:var(--ml-count-clear-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-count-clear-color-hover, #3b82f6)}.ml__count-clear:before{content:var(--ml-icon-clear, "×")}.ml__badge{display:inline-flex;align-items:center;height:var(--ml-badge-height, 1.5rem);font-size:var(--ml-badge-font-size, .75rem);font-weight:var(--ml-badge-font-weight, 600);line-height:var(--ml-line-height-none, 1);border-radius:var(--ml-badge-border-radius, .375rem);overflow:hidden;max-width:100%}.ml__badge-text{display:flex;align-items:center;height:100%;padding:var(--ml-badge-text-padding, 0 .5rem);background:var(--ml-badge-text-bg, #eff6ff);color:var(--ml-badge-text-color, #3b82f6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--ml-transition-normal, .2s) ease}.ml__badge-remove{display:flex;align-items:center;justify-content:center;width:var(--ml-badge-remove-width, 1.5rem);height:100%;flex-shrink:0;background:var(--ml-badge-remove-bg, #3b82f6);color:var(--ml-badge-remove-color, #ffffff);border:var(--ml-badge-remove-border, none);cursor:pointer;transition:background-color var(--ml-transition-normal, .2s) ease;font-size:var(--ml-badge-remove-font-size, .75rem)}.ml__badge-remove:hover{background:var(--ml-badge-remove-bg-hover, #2563eb)}.ml__badge-remove:focus{outline:none;box-shadow:var(--ml-badge-remove-box-shadow-focus, 0 0 0 2px rgba(59, 130, 246, .5))}.ml__badge-remove:before{content:var(--ml-icon-remove, "×");font-size:var(--ml-font-size-base, 1rem);line-height:var(--ml-line-height-none, 1)}.ml__badge--counter{border:var(--ml-badge-counter-border, 1px solid #e5e7eb);cursor:pointer}.ml__badge--counter .ml__badge-text{background:var(--ml-badge-counter-text-bg, #d1d5db);color:var(--ml-badge-counter-text-color, #6b7280)}.ml__badge--counter .ml__badge-remove{background:var(--ml-badge-counter-remove-bg, #6b7280);color:var(--ml-badge-counter-remove-color, #ffffff)}.ml__badge--counter .ml__badge-remove:hover{background:var(--ml-badge-counter-remove-bg-hover, #111827)}.ml__badge--more{cursor:pointer}.ml__badge-tooltip{position:fixed;z-index:var(--ml-tooltip-z-index, 10000);opacity:0;visibility:hidden;transition:opacity var(--ml-transition-normal, .2s) ease,visibility var(--ml-transition-normal, .2s) ease;background:var(--ml-tooltip-bg, #333);color:var(--ml-tooltip-color, #fff);padding:var(--ml-tooltip-padding, .5rem .75rem);border-radius:var(--ml-tooltip-border-radius, .375rem);font-size:var(--ml-tooltip-font-size, .875rem);line-height:var(--ml-line-height-relaxed, 1.4);max-width:var(--ml-tooltip-max-width, 20rem);word-wrap:break-word;white-space:pre-wrap;box-shadow:var(--ml-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, .15));pointer-events:none}.ml__badge-tooltip--visible{opacity:1;visibility:visible}.ml__selected-popover{display:none;position:absolute;z-index:var(--ml-z-index-popover, 10000);background:var(--ml-selected-popover-bg, #ffffff);border:var(--ml-selected-popover-border, 1px solid #e5e7eb);border-radius:var(--ml-selected-popover-border-radius, .375rem);box-shadow:var(--ml-selected-popover-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1));width:var(--ml-selected-popover-width, 20rem);max-height:var(--ml-selected-popover-max-height, 20rem);overflow:hidden}.ml__selected-popover--visible{display:flex;flex-direction:column}.ml__selected-popover--virtual{display:block;overflow:visible;max-height:none}.ml__selected-popover-header{display:flex;align-items:center;justify-content:space-between;padding:var(--ml-selected-popover-header-padding, .5rem .75rem);background:var(--ml-selected-popover-header-bg, rgba(59, 130, 246, .1));border-bottom:var(--ml-selected-popover-header-border-bottom, 1px solid #e5e7eb);font-size:var(--ml-selected-popover-header-font-size, .875rem);font-weight:var(--ml-selected-popover-header-font-weight, 600);color:var(--ml-selected-popover-header-color, #111827)}.ml__selected-popover-close{display:flex;align-items:center;justify-content:center;width:var(--ml-popover-close-size, 1.5rem);height:var(--ml-popover-close-size, 1.5rem);padding:0;border:none;background:var(--ml-selected-popover-close-bg, transparent);color:var(--ml-selected-popover-close-color, #6b7280);font-size:var(--ml-selected-popover-close-font-size, 1.25rem);line-height:var(--ml-line-height-none, 1);cursor:pointer;border-radius:var(--ml-selected-popover-close-border-radius, 50%);transition:all var(--ml-transition-fast, .15s) var(--ml-easing-snappy, cubic-bezier(.4, 0, .2, 1))}.ml__selected-popover-close:hover{background:var(--ml-selected-popover-close-bg-hover, rgba(59, 130, 246, .2));color:var(--ml-selected-popover-close-color-hover, #3b82f6)}.ml__selected-popover-body{display:flex;flex-direction:column;gap:var(--ml-selected-popover-body-gap, .25rem);padding:var(--ml-selected-popover-body-padding, .5rem);overflow-y:auto;max-height:var(--ml-selected-popover-body-max-height, 18rem)}.ml__selected-popover-body .ml__badge{width:100%;min-height:fit-content;line-height:var(--ml-line-height-relaxed, 1.4)}.ml__selected-popover-body .ml__badge-text{flex:1;min-width:0;white-space:normal;word-wrap:break-word}.ml__selected-popover-body--virtual{display:block;max-height:none;padding:0}.ml__selected-popover-body--virtual .ml__badge{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, .25rem);overflow:hidden;box-sizing:border-box}.ml__selected-popover-body--virtual .ml__badge-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml--rtl .ml__input-wrapper{direction:rtl}.ml--rtl .ml__input{text-align:right;padding-left:var(--ml-input-padding-right, 2.5rem);padding-right:var(--ml-input-padding-h, .75rem)}.ml--rtl .ml__toggle{left:var(--ml-toggle-right, .75rem)!important;right:auto!important}.ml--rtl .ml__counter{left:var(--ml-counter-offset, 2rem)!important;right:auto!important}.ml--rtl .ml__dropdown{direction:rtl;text-align:right}.ml--rtl .ml__option{flex-direction:row-reverse}.ml--rtl .ml__checkbox{margin-left:var(--ml-spacing-sm, .5rem);margin-right:0}.ml--rtl .ml__option-content{text-align:right}.ml--rtl .ml__option-icon{margin-left:var(--ml-spacing-xs, .25rem);margin-right:0}.ml--rtl .ml__badges{direction:rtl}.ml--rtl .ml__badge{flex-direction:row-reverse}.ml--rtl .ml__badge-remove{border-radius:var(--ml-badge-remove-border-radius-rtl, .375rem) 0 0 var(--ml-badge-remove-border-radius-rtl, .375rem);border-left:var(--ml-badge-remove-border, none);border-right:none}.ml--rtl .ml__badge-text{border-radius:0 var(--ml-badge-text-border-radius-rtl, .375rem) var(--ml-badge-text-border-radius-rtl, .375rem) 0}.ml--rtl .ml__count-display{direction:rtl}.ml--rtl .ml__counter-wrapper{flex-direction:row-reverse}.ml--rtl .ml__selected-popover{direction:rtl;text-align:right}.ml--rtl .ml__actions{direction:rtl}.ml--rtl .ml__group-label,.ml--rtl .ml__empty{text-align:right}.ml--rtl .ml__hint{direction:rtl;text-align:right}.ml--xs .ml__input{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__option{padding:var(--ml-spacing-xs, .25rem) var(--ml-spacing-sm, .5rem)}.ml--xs .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--xs .ml__badge{font-size:var(--ml-font-size-2xs, .625rem)}.ml--sm .ml__input,.ml--sm .ml__option-title{font-size:var(--ml-font-size-xs, .75rem)}.ml--lg .ml__input,.ml--lg .ml__option-title{font-size:var(--ml-font-size-base, 1rem)}.ml--lg .ml__badge{font-size:var(--ml-font-size-sm, .875rem)}.ml--xl .ml__input,.ml--xl .ml__option-title{font-size:var(--ml-font-size-lg, 1.125rem)}.ml--xl .ml__badge{font-size:var(--ml-font-size-base, 1rem)}.ml--disabled .ml__input{opacity:var(--ml-disabled-input-opacity, .6);cursor:not-allowed;background:var(--ml-input-bg-disabled, rgba(107, 114, 128, .05))}.ml--disabled .ml__toggle{opacity:var(--ml-disabled-input-opacity, .6)}.ml--no-checkboxes .ml__option{gap:0;padding-left:var(--ml-option-padding-h, .75rem)}.ml--no-checkboxes .ml__option-content{padding-left:0}.ml-debug-info{margin-top:.25rem;padding:.25rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;font-size:.75rem;color:#111827}.ml-debug-info details summary{cursor:pointer;font-weight:600;color:#2563eb;-webkit-user-select:none;user-select:none;padding:.25rem;border-radius:.25rem}.ml-debug-info details summary:hover{background-color:#f3f4f6}.ml-debug-info details summary:focus{outline:2px solid #3b82f6;outline-offset:2px}.ml-debug-info .ml-debug-stats{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem;padding:.25rem;background-color:#fff;border-radius:.25rem}.ml-debug-info .ml-debug-stats span{display:flex;justify-content:space-between;padding:2px 4px;font-family:monospace;font-size:.625rem}.ml-debug-info .ml-debug-stats span:before{content:"•";margin-right:.25rem;color:#3b82f6}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-multiselect",
-  "version": "1.0.0-rc10",
+  "version": "1.0.0",
   "description": "Lightweight multiselect web component with typeahead search, rich content support, and excellent keyboard navigation",
   "type": "module",
   "main": "./dist/multiselect.umd.js",

package/src/scss/{_pills-display.scss → _badges-display.scss}

@@ -1,19 +1,19 @@
 // ==============================================================================
-// PILLS & DISPLAY MODES
+// BADGES & DISPLAY MODES
 // ==============================================================================
-// Pills container, count display, individual pills, and remove buttons
+// Badges container, count display, individual badges, and remove buttons
 
 @use 'variables' as *;
 
 // ==============================================================================
-// PILLS CONTAINER
+// BADGES CONTAINER
 // ==============================================================================
 
-// Selected pills container
-.ml__pills {
+// Selected badges container
+.ml__badges {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--ml-pills-gap, $ml-pills-gap);
+  gap: var(--ml-badges-gap, $ml-badges-gap);
   padding: 0;
 
   &:empty {
@@ -22,23 +22,23 @@
 
   // Position variants
   &--bottom {
-    margin-top: var(--ml-pills-margin-bottom, $ml-pills-margin-bottom);
+    margin-top: var(--ml-badges-margin-bottom, $ml-badges-margin-bottom);
   }
 
   &--top {
-    margin-bottom: var(--ml-pills-margin-top, $ml-pills-margin-top);
+    margin-bottom: var(--ml-badges-margin-top, $ml-badges-margin-top);
     order: var(--ml-order-first, $ml-order-first); // Place before multiselect in flex container
   }
 
   &--left {
     order: var(--ml-order-first, $ml-order-first); // Place before multiselect
-    margin-right: var(--ml-pills-margin-left, $ml-pills-margin-left);
-    justify-content: flex-end; // Pills at right edge of container, close to input
+    margin-right: var(--ml-badges-margin-left, $ml-badges-margin-left);
+    justify-content: flex-end; // Badges at right edge of container, close to input
   }
 
   &--right {
-    margin-left: var(--ml-pills-margin-right, $ml-pills-margin-right);
-    justify-content: flex-start; // Pills at left edge of container, close to input
+    margin-left: var(--ml-badges-margin-right, $ml-badges-margin-right);
+    justify-content: flex-start; // Badges at left edge of container, close to input
   }
 }
 
@@ -46,7 +46,7 @@
 // COUNT DISPLAY MODE
 // ==============================================================================
 
-// Count display (alternative to pills)
+// Count display (alternative to badges)
 .ml__count-display {
   display: flex;
   align-items: center;
@@ -78,19 +78,19 @@
 }
 
 // Wrapper containing count text and clear button
-.ml__count-badge-wrapper {
+.ml__counter-wrapper {
   display: inline-flex;
   align-items: center;
-  gap: var(--ml-count-badge-wrapper-gap, $ml-count-badge-wrapper-gap);
-  background: var(--ml-count-badge-wrapper-bg, $ml-count-badge-wrapper-bg);
-  border: var(--ml-count-badge-wrapper-border, $ml-count-badge-wrapper-border);
-  border-radius: var(--ml-count-badge-wrapper-border-radius, $ml-count-badge-wrapper-border-radius);
-  padding: var(--ml-count-badge-wrapper-padding, $ml-count-badge-wrapper-padding);
+  gap: var(--ml-counter-wrapper-gap, $ml-counter-wrapper-gap);
+  background: var(--ml-counter-wrapper-bg, $ml-counter-wrapper-bg);
+  border: var(--ml-counter-wrapper-border, $ml-counter-wrapper-border);
+  border-radius: var(--ml-counter-wrapper-border-radius, $ml-counter-wrapper-border-radius);
+  padding: var(--ml-counter-wrapper-padding, $ml-counter-wrapper-padding);
   transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
 
   &:hover {
-    background: var(--ml-count-badge-wrapper-bg-hover, $ml-count-badge-wrapper-bg-hover);
-    border-color: var(--ml-count-badge-wrapper-border-color-hover, $ml-count-badge-wrapper-border-color-hover);
+    background: var(--ml-counter-wrapper-bg-hover, $ml-counter-wrapper-bg-hover);
+    border-color: var(--ml-counter-wrapper-border-color-hover, $ml-counter-wrapper-border-color-hover);
   }
 }
 
@@ -134,58 +134,58 @@
 }
 
 // ==============================================================================
-// INDIVIDUAL PILLS
+// INDIVIDUAL BADGES
 // ==============================================================================
 
-// Individual pill (styled like Pure Admin composite badge)
-.ml__pill {
+// Individual badge (styled like Pure Admin composite badge)
+.ml__badge {
   display: inline-flex;
   align-items: center;
-  height: var(--ml-pill-height, $ml-pill-height); // Match composite badge height
-  font-size: var(--ml-pill-font-size, $ml-pill-font-size);
-  font-weight: var(--ml-pill-font-weight, $ml-pill-font-weight);
+  height: var(--ml-badge-height, $ml-badge-height); // Match composite badge height
+  font-size: var(--ml-badge-font-size, $ml-badge-font-size);
+  font-weight: var(--ml-badge-font-weight, $ml-badge-font-weight);
   line-height: var(--ml-line-height-none, $ml-line-height-none);
-  border-radius: var(--ml-pill-border-radius, $ml-pill-border-radius);
+  border-radius: var(--ml-badge-border-radius, $ml-badge-border-radius);
   overflow: hidden;
   max-width: 100%;
 }
 
-// Pill text (like composite badge label)
-.ml__pill-text {
+// Badge text (like composite badge label)
+.ml__badge-text {
   display: flex;
   align-items: center;
   height: 100%;
-  padding: var(--ml-pill-text-padding, $ml-pill-text-padding);
-  background: var(--ml-pill-text-bg, $ml-pill-text-bg);
-  color: var(--ml-pill-text-color, $ml-pill-text-color);
+  padding: var(--ml-badge-text-padding, $ml-badge-text-padding);
+  background: var(--ml-badge-text-bg, $ml-badge-text-bg);
+  color: var(--ml-badge-text-color, $ml-badge-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition: background-color var(--ml-transition-normal, $ml-transition-normal) ease;
 }
 
-// Pill remove button (like composite badge button)
-.ml__pill-remove {
+// Badge remove button (like composite badge button)
+.ml__badge-remove {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--ml-pill-remove-width, $ml-pill-remove-width);
+  width: var(--ml-badge-remove-width, $ml-badge-remove-width);
   height: 100%;
   flex-shrink: 0;
-  background: var(--ml-pill-remove-bg, $ml-pill-remove-bg);
-  color: var(--ml-pill-remove-color, $ml-pill-remove-color);
-  border: var(--ml-pill-remove-border, $ml-pill-remove-border);
+  background: var(--ml-badge-remove-bg, $ml-badge-remove-bg);
+  color: var(--ml-badge-remove-color, $ml-badge-remove-color);
+  border: var(--ml-badge-remove-border, $ml-badge-remove-border);
   cursor: pointer;
   transition: background-color var(--ml-transition-normal, $ml-transition-normal) ease;
-  font-size: var(--ml-pill-remove-font-size, $ml-pill-remove-font-size);
+  font-size: var(--ml-badge-remove-font-size, $ml-badge-remove-font-size);
 
   &:hover {
-    background: var(--ml-pill-remove-bg-hover, $ml-pill-remove-bg-hover);
+    background: var(--ml-badge-remove-bg-hover, $ml-badge-remove-bg-hover);
   }
 
   &:focus {
     outline: none;
-    box-shadow: var(--ml-pill-remove-box-shadow-focus, $ml-pill-remove-box-shadow-focus);
+    box-shadow: var(--ml-badge-remove-box-shadow-focus, $ml-badge-remove-box-shadow-focus);
   }
 
   &::before {
@@ -196,23 +196,34 @@
 }
 
 // ==============================================================================
-// "+X MORE" PILL VARIANT
+// INDICATOR BADGE VARIANT (for "+ X more", "3 selected", compact mode)
 // ==============================================================================
-
-// "+X more" pill variant (partial mode)
-.ml__pill--more {
+// Gray/neutral styling to distinguish from regular blue badges
+.ml__badge--counter {
+  border: var(--ml-badge-counter-border, $ml-badge-counter-border);
   cursor: pointer;
 
-  .ml__pill-text {
-    background: var(--ml-more-badge-bg, $ml-more-badge-bg);
-    font-weight: var(--ml-pill-font-weight, $ml-pill-font-weight);
+  .ml__badge-text {
+    background: var(--ml-badge-counter-text-bg, $ml-badge-counter-text-bg);
+    color: var(--ml-badge-counter-text-color, $ml-badge-counter-text-color);
   }
 
-  &:hover .ml__pill-text {
-    background: var(--ml-more-badge-hover-bg, $ml-more-badge-hover-bg);
-  }
+  .ml__badge-remove {
+    background: var(--ml-badge-counter-remove-bg, $ml-badge-counter-remove-bg);
+    color: var(--ml-badge-counter-remove-color, $ml-badge-counter-remove-color);
 
-  &:active .ml__pill-text {
-    background: var(--ml-more-badge-active-bg, $ml-more-badge-active-bg);
+    &:hover {
+      background: var(--ml-badge-counter-remove-bg-hover, $ml-badge-counter-remove-bg-hover);
+    }
   }
 }
+
+// ==============================================================================
+// "+X MORE" BADGE VARIANT
+// ==============================================================================
+
+// "+X more" badge variant (partial mode)
+// Now uses .ml__badge--counter for styling, this just adds cursor
+.ml__badge--more {
+  cursor: pointer;
+}

package/src/scss/_base.scss

@@ -21,10 +21,10 @@ multi-select:not(:defined) {
 // LAYOUT CONTAINERS
 // ==============================================================================
 
-// Wrapper (contains multiselect + pills)
+// Wrapper (contains multiselect + badges)
 .ml-wrapper {
   display: flex;
-  flex-direction: column; // Default: pills above/below input
+  flex-direction: column; // Default: badges above/below input
   align-items: stretch;
 
   // Inline layout for left/right positioning

package/src/scss/_css-variables.scss

@@ -66,14 +66,14 @@
   // COUNT BADGE (in input)
   // ==========================================================================
 
-  --ml-count-badge-offset: #{$ml-count-badge-offset};
-  --ml-count-badge-padding: #{$ml-count-badge-padding};
-  --ml-count-badge-bg: #{$ml-count-badge-bg};
-  --ml-count-badge-color: #{$ml-count-badge-color};
-  --ml-count-badge-font-size: #{$ml-count-badge-font-size};
-  --ml-count-badge-font-weight: #{$ml-count-badge-font-weight};
-  --ml-count-badge-border-radius: #{$ml-count-badge-border-radius};
-  --ml-count-badge-bg-hover: #{$ml-count-badge-bg-hover};
+  --ml-counter-offset: #{$ml-counter-offset};
+  --ml-counter-padding: #{$ml-counter-padding};
+  --ml-counter-bg: #{$ml-counter-bg};
+  --ml-counter-color: #{$ml-counter-color};
+  --ml-counter-font-size: #{$ml-counter-font-size};
+  --ml-counter-font-weight: #{$ml-counter-font-weight};
+  --ml-counter-border-radius: #{$ml-counter-border-radius};
+  --ml-counter-bg-hover: #{$ml-counter-bg-hover};
   --ml-transform-scale-hover: #{$ml-transform-scale-hover};
 
   // ==========================================================================
@@ -97,8 +97,8 @@
   --ml-dropdown-border: #{$ml-dropdown-border};
   --ml-dropdown-border-radius: #{$ml-dropdown-border-radius};
   --ml-dropdown-box-shadow: #{$ml-dropdown-box-shadow};
-  --ml-dropdown-max-height: #{$ml-dropdown-max-height};
-  --ml-dropdown-color: #{$ml-dropdown-color};
+  --ml-options-max-height: #{$ml-options-max-height};
+  --ml-option-color: #{$ml-option-color};
   --ml-z-index-dropdown: #{$ml-z-index-dropdown};
   --ml-z-index-sticky: #{$ml-z-index-sticky};
 
@@ -183,6 +183,9 @@
 
   // Checkbox
   --ml-checkbox-margin-top: #{$ml-checkbox-margin-top};
+  --ml-checkbox-size: #{$ml-checkbox-size};
+  --ml-checkbox-scale: #{$ml-checkbox-scale};
+  --ml-checkbox-align: flex-start; // flex-start (top), center, flex-end (bottom)
 
   // ==========================================================================
   // EMPTY & LOADING STATES
@@ -202,45 +205,55 @@
   --ml-loading-text-color: #{$ml-loading-text-color};
 
   // ==========================================================================
-  // PILLS DISPLAY
+  // BADGES DISPLAY
   // ==========================================================================
 
-  --ml-pills-gap: #{$ml-pills-gap};
-  --ml-pills-margin-bottom: #{$ml-pills-margin-bottom};
-  --ml-pills-margin-top: #{$ml-pills-margin-top};
-  --ml-pills-margin-left: #{$ml-pills-margin-left};
-  --ml-pills-margin-right: #{$ml-pills-margin-right};
+  --ml-badges-gap: #{$ml-badges-gap};
+  --ml-badges-margin-bottom: #{$ml-badges-margin-bottom};
+  --ml-badges-margin-top: #{$ml-badges-margin-top};
+  --ml-badges-margin-left: #{$ml-badges-margin-left};
+  --ml-badges-margin-right: #{$ml-badges-margin-right};
 
-  // Individual Pill
-  --ml-pill-gap: #{$ml-pill-gap};
-  --ml-pill-height: #{$ml-pill-height};
-  --ml-pill-font-size: #{$ml-pill-font-size};
-  --ml-pill-font-weight: #{$ml-pill-font-weight};
-  --ml-pill-border-radius: #{$ml-pill-border-radius};
-  --ml-pill-bg: #{$ml-pill-bg};
-  --ml-pill-bg-hover: #{$ml-pill-bg-hover};
-  --ml-pill-bg-active: #{$ml-pill-bg-active};
+  // Individual Badge
+  --ml-badge-gap: #{$ml-badge-gap};
+  --ml-badge-height: #{$ml-badge-height};
+  --ml-badge-font-size: #{$ml-badge-font-size};
+  --ml-badge-font-weight: #{$ml-badge-font-weight};
+  --ml-badge-border-radius: #{$ml-badge-border-radius};
+  --ml-badge-bg: #{$ml-badge-bg};
+  --ml-badge-bg-hover: #{$ml-badge-bg-hover};
+  --ml-badge-bg-active: #{$ml-badge-bg-active};
   --ml-order-first: #{$ml-order-first};
 
   // ==========================================================================
-  // PILL TEXT & REMOVE BUTTON
+  // BADGE TEXT & REMOVE BUTTON
   // ==========================================================================
 
-  // Pill Text
-  --ml-pill-text-padding: #{$ml-pill-text-padding};
-  --ml-pill-text-bg: #{$ml-pill-text-bg};
-  --ml-pill-text-color: #{$ml-pill-text-color};
+  // Badge Text
+  --ml-badge-text-padding: #{$ml-badge-text-padding};
+  --ml-badge-text-bg: #{$ml-badge-text-bg};
+  --ml-badge-text-color: #{$ml-badge-text-color};
 
-  // Pill Remove Button
-  --ml-pill-remove-width: #{$ml-pill-remove-width};
-  --ml-pill-remove-bg: #{$ml-pill-remove-bg};
-  --ml-pill-remove-color: #{$ml-pill-remove-color};
-  --ml-pill-remove-border: #{$ml-pill-remove-border};
-  --ml-pill-remove-font-size: #{$ml-pill-remove-font-size};
-  --ml-pill-remove-bg-hover: #{$ml-pill-remove-bg-hover};
-  --ml-pill-remove-box-shadow-focus: #{$ml-pill-remove-box-shadow-focus};
+  // Badge Remove Button
+  --ml-badge-remove-width: #{$ml-badge-remove-width};
+  --ml-badge-remove-bg: #{$ml-badge-remove-bg};
+  --ml-badge-remove-color: #{$ml-badge-remove-color};
+  --ml-badge-remove-border: #{$ml-badge-remove-border};
+  --ml-badge-remove-font-size: #{$ml-badge-remove-font-size};
+  --ml-badge-remove-bg-hover: #{$ml-badge-remove-bg-hover};
+  --ml-badge-remove-box-shadow-focus: #{$ml-badge-remove-box-shadow-focus};
   --ml-icon-remove: "#{$ml-icon-remove}";
 
+  // Badge Indicator (for "+ X more", "3 selected", compact mode)
+  --ml-badge-counter-bg: #{$ml-badge-counter-bg};
+  --ml-badge-counter-border: #{$ml-badge-counter-border};
+  --ml-badge-counter-border-radius: #{$ml-badge-counter-border-radius};
+  --ml-badge-counter-text-color: #{$ml-badge-counter-text-color};
+  --ml-badge-counter-text-bg: #{$ml-badge-counter-text-bg};
+  --ml-badge-counter-remove-bg: #{$ml-badge-counter-remove-bg};
+  --ml-badge-counter-remove-color: #{$ml-badge-counter-remove-color};
+  --ml-badge-counter-remove-bg-hover: #{$ml-badge-counter-remove-bg-hover};
+
   // ==========================================================================
   // "+X MORE" BADGE
   // ==========================================================================
@@ -259,13 +272,13 @@
   --ml-count-display-margin-right: #{$ml-count-display-margin-right};
 
   // Count Badge Wrapper
-  --ml-count-badge-wrapper-bg: #{$ml-count-badge-wrapper-bg};
-  --ml-count-badge-wrapper-border: #{$ml-count-badge-wrapper-border};
-  --ml-count-badge-wrapper-border-radius: #{$ml-count-badge-wrapper-border-radius};
-  --ml-count-badge-wrapper-padding: #{$ml-count-badge-wrapper-padding};
-  --ml-count-badge-wrapper-gap: #{$ml-count-badge-wrapper-gap};
-  --ml-count-badge-wrapper-bg-hover: #{$ml-count-badge-wrapper-bg-hover};
-  --ml-count-badge-wrapper-border-color-hover: #{$ml-count-badge-wrapper-border-color-hover};
+  --ml-counter-wrapper-bg: #{$ml-counter-wrapper-bg};
+  --ml-counter-wrapper-border: #{$ml-counter-wrapper-border};
+  --ml-counter-wrapper-border-radius: #{$ml-counter-wrapper-border-radius};
+  --ml-counter-wrapper-padding: #{$ml-counter-wrapper-padding};
+  --ml-counter-wrapper-gap: #{$ml-counter-wrapper-gap};
+  --ml-counter-wrapper-bg-hover: #{$ml-counter-wrapper-bg-hover};
+  --ml-counter-wrapper-border-color-hover: #{$ml-counter-wrapper-border-color-hover};
 
   // ==========================================================================
   // COUNT TEXT & CLEAR BUTTON

package/src/scss/_input-dropdown.scss

@@ -70,22 +70,22 @@
 // ==============================================================================
 
 // Count badge (appears next to toggle icon)
-.ml__count-badge {
+.ml__counter {
   position: absolute;
-  right: var(--ml-count-badge-offset, $ml-count-badge-offset); // Space for toggle icon
+  right: var(--ml-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);
+  padding: var(--ml-counter-padding, $ml-counter-padding);
+  background: var(--ml-counter-bg, $ml-counter-bg);
+  color: var(--ml-counter-color, $ml-counter-color);
+  font-size: var(--ml-counter-font-size, $ml-counter-font-size);
+  font-weight: var(--ml-counter-font-weight, $ml-counter-font-weight);
+  border-radius: var(--ml-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);
 
   &:hover {
-    background: var(--ml-count-badge-bg-hover, $ml-count-badge-bg-hover);
+    background: var(--ml-counter-bg-hover, $ml-counter-bg-hover);
     transform: var(--ml-transform-center-y, $ml-transform-center-y)
       scale(var(--ml-transform-scale-hover, $ml-transform-scale-hover));
   }
@@ -128,12 +128,12 @@
   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);
+  max-height: var(--ml-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(--ml-option-color, $ml-option-color);
 
   &--visible {
     display: block;
@@ -153,10 +153,15 @@
 // Dropdown actions (Select All / Clear All)
 .ml__actions {
   display: flex;
+  flex-wrap: nowrap;
   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);
 
+  &--wrap {
+    flex-wrap: wrap;
+  }
+
   &--sticky {
     position: sticky;
     top: 0;
@@ -184,4 +189,11 @@
   &:active {
     transform: scale(var(--ml-transform-scale-active, $ml-transform-scale-active));
   }
+
+  &:disabled,
+  &[disabled] {
+    opacity: var(--ml-disabled-opacity, $ml-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 }

package/src/scss/_modifiers.scss

@@ -22,7 +22,7 @@
     font-size: var(--ml-font-size-xs, $ml-font-size-xs);
   }
 
-  .ml__pill {
+  .ml__badge {
     font-size: var(--ml-font-size-2xs, $ml-font-size-2xs);
   }
 }
@@ -46,7 +46,7 @@
     font-size: var(--ml-font-size-base, $ml-font-size-base);
   }
 
-  .ml__pill {
+  .ml__badge {
     font-size: var(--ml-font-size-sm, $ml-font-size-sm);
   }
 }
@@ -60,7 +60,7 @@
     font-size: var(--ml-font-size-lg, $ml-font-size-lg);
   }
 
-  .ml__pill {
+  .ml__badge {
     font-size: var(--ml-font-size-base, $ml-font-size-base);
   }
 }