@keenmate/web-multiselect 1.0.0-rc04 → 1.0.0-rc06

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";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;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.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__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--selected{background: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-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--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-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-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;color:var(--ml-dropdown-color, #111827)}.ml__dropdown--visible{display:block}.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__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--selected{background: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-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--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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/web-multiselect",
-  "version": "1.0.0-rc04",
+  "version": "1.0.0-rc06",
   "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/_css-variables.scss

@@ -0,0 +1,377 @@
+// ==============================================================================
+// CSS CUSTOM PROPERTIES (:host level)
+// ==============================================================================
+// This file defines all CSS custom properties at the :host level, making them:
+// - Inspectable in browser DevTools
+// - Overridable from outside Shadow DOM
+// - Self-documenting in compiled CSS
+//
+// All variables use SCSS variable fallbacks for reliability.
+// External overrides will take precedence over these defaults.
+//
+// Usage from outside Shadow DOM:
+//   multi-select {
+//     --ml-accent-color: #10b981;
+//     --ml-input-border-radius: 0.5rem;
+//   }
+// ==============================================================================
+
+@use 'variables' as *;
+
+:host {
+  // ==========================================================================
+  // COLORS & THEME
+  // ==========================================================================
+
+  // Accent Colors
+  --ml-accent-color: #{$ml-accent-color};
+  --ml-accent-color-hover: #{$ml-accent-color-hover};
+  --ml-accent-color-active: #{$ml-accent-color-active};
+
+  // Text Colors
+  --ml-text-primary: #{$ml-text-primary};
+  --ml-text-secondary: #{$ml-text-secondary};
+  --ml-text-white: #{$ml-text-white};
+
+  // Background Colors
+  --ml-primary-bg: #{$ml-primary-bg};
+  --ml-primary-bg-hover: #{$ml-primary-bg-hover};
+  --ml-border-color: #{$ml-border-color};
+
+  // ==========================================================================
+  // INPUT COMPONENT
+  // ==========================================================================
+
+  --ml-input-padding: #{$ml-input-padding};
+  --ml-input-padding-right: #{$ml-input-padding-right};
+  --ml-input-font-size: #{$ml-input-font-size};
+  --ml-input-border-style: #{$ml-input-border-style};
+  --ml-input-border-radius: #{$ml-input-border-radius};
+  --ml-input-bg: #{$ml-input-bg};
+  --ml-input-text: #{$ml-input-text};
+  --ml-input-focus-border-color: #{$ml-input-focus-border-color};
+  --ml-input-placeholder-color: #{$ml-input-placeholder-color};
+  --ml-input-bg-disabled: #{$ml-input-bg-disabled};
+
+  // ==========================================================================
+  // TOGGLE ICON
+  // ==========================================================================
+
+  --ml-toggle-right: #{$ml-toggle-right};
+  --ml-toggle-color: #{$ml-toggle-color};
+  --ml-transform-center-y: #{$ml-transform-center-y};
+  --ml-transform-rotate-180: #{$ml-transform-rotate-180};
+
+  // ==========================================================================
+  // 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-transform-scale-hover: #{$ml-transform-scale-hover};
+
+  // ==========================================================================
+  // FLOATING HINT
+  // ==========================================================================
+
+  --ml-hint-padding: #{$ml-hint-padding};
+  --ml-hint-bg: #{$ml-hint-bg};
+  --ml-hint-border: #{$ml-hint-border};
+  --ml-hint-border-radius: #{$ml-hint-border-radius};
+  --ml-hint-box-shadow: #{$ml-hint-box-shadow};
+  --ml-hint-font-size: #{$ml-hint-font-size};
+  --ml-hint-color: #{$ml-hint-color};
+  --ml-line-height-relaxed: #{$ml-line-height-relaxed};
+
+  // ==========================================================================
+  // DROPDOWN
+  // ==========================================================================
+
+  --ml-dropdown-bg: #{$ml-dropdown-bg};
+  --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-z-index-dropdown: #{$ml-z-index-dropdown};
+  --ml-z-index-sticky: #{$ml-z-index-sticky};
+
+  // ==========================================================================
+  // DROPDOWN ACTIONS
+  // ==========================================================================
+
+  --ml-actions-gap: #{$ml-actions-gap};
+  --ml-actions-padding: #{$ml-actions-padding};
+  --ml-actions-border-bottom: #{$ml-actions-border-bottom};
+  --ml-actions-bg: #{$ml-actions-bg};
+
+  // Action Button
+  --ml-action-btn-padding: #{$ml-action-btn-padding};
+  --ml-action-btn-font-size: #{$ml-action-btn-font-size};
+  --ml-action-btn-border: #{$ml-action-btn-border};
+  --ml-action-btn-border-radius: #{$ml-action-btn-border-radius};
+  --ml-action-btn-bg: #{$ml-action-btn-bg};
+  --ml-action-btn-color: #{$ml-action-btn-color};
+  --ml-action-btn-bg-hover: #{$ml-action-btn-bg-hover};
+  --ml-action-btn-border-color-hover: #{$ml-action-btn-border-color-hover};
+  --ml-transform-scale-active: #{$ml-transform-scale-active};
+
+  // ==========================================================================
+  // OPTIONS CONTAINER & GROUPS
+  // ==========================================================================
+
+  --ml-options-padding: #{$ml-options-padding};
+
+  // Group
+  --ml-group-border-top: #{$ml-group-border-top};
+  --ml-group-margin-top: #{$ml-group-margin-top};
+  --ml-group-padding-top: #{$ml-group-padding-top};
+
+  // Group Label
+  --ml-group-label-padding: #{$ml-group-label-padding};
+  --ml-group-label-font-size: #{$ml-group-label-font-size};
+  --ml-group-label-font-weight: #{$ml-group-label-font-weight};
+  --ml-group-label-color: #{$ml-group-label-color};
+  --ml-group-label-transform: #{$ml-group-label-transform};
+  --ml-group-label-letter-spacing: #{$ml-group-label-letter-spacing};
+
+  // ==========================================================================
+  // INDIVIDUAL OPTIONS
+  // ==========================================================================
+
+  --ml-option-gap: #{$ml-option-gap};
+  --ml-option-padding: #{$ml-option-padding};
+  --ml-option-padding-h: #{$ml-option-padding-h};
+  --ml-option-bg: #{$ml-option-bg};
+  --ml-option-bg-hover: #{$ml-option-bg-hover};
+  --ml-option-bg-focused: #{$ml-option-bg-focused};
+  --ml-option-outline-focused: #{$ml-option-outline-focused};
+  --ml-option-focus-outline-offset: #{$ml-option-focus-outline-offset};
+  --ml-option-bg-selected: #{$ml-option-bg-selected};
+  --ml-disabled-opacity: #{$ml-disabled-opacity};
+
+  // ==========================================================================
+  // OPTION CONTENT
+  // ==========================================================================
+
+  --ml-option-content-gap: #{$ml-option-content-gap};
+
+  // Option Icon
+  --ml-option-icon-size: #{$ml-option-icon-size};
+  --ml-option-icon-font-size: #{$ml-option-icon-font-size};
+
+  // Option Title
+  --ml-option-title-font-size: #{$ml-option-title-font-size};
+  --ml-option-title-color: #{$ml-option-title-color};
+  --ml-option-mark-bg: #{$ml-option-mark-bg};
+  --ml-option-mark-color: #{$ml-option-mark-color};
+  --ml-option-mark-font-weight: #{$ml-option-mark-font-weight};
+
+  // Option Subtitle
+  --ml-option-subtitle-margin-top: #{$ml-option-subtitle-margin-top};
+  --ml-option-subtitle-font-size: #{$ml-option-subtitle-font-size};
+  --ml-option-subtitle-color: #{$ml-option-subtitle-color};
+  --ml-option-subtitle-line-height: #{$ml-option-subtitle-line-height};
+
+  // Checkbox
+  --ml-checkbox-margin-top: #{$ml-checkbox-margin-top};
+
+  // ==========================================================================
+  // EMPTY & LOADING STATES
+  // ==========================================================================
+
+  // Empty State
+  --ml-empty-padding: #{$ml-empty-padding};
+  --ml-empty-font-size: #{$ml-empty-font-size};
+  --ml-empty-color: #{$ml-empty-color};
+
+  // Loader
+  --ml-loader-padding: #{$ml-loader-padding};
+  --ml-loader-gap: #{$ml-loader-gap};
+
+  // Loading Text
+  --ml-loading-text-font-size: #{$ml-loading-text-font-size};
+  --ml-loading-text-color: #{$ml-loading-text-color};
+
+  // ==========================================================================
+  // PILLS 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};
+
+  // 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};
+  --ml-order-first: #{$ml-order-first};
+
+  // ==========================================================================
+  // PILL 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};
+
+  // 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};
+  --ml-icon-remove: "#{$ml-icon-remove}";
+
+  // ==========================================================================
+  // "+X MORE" BADGE
+  // ==========================================================================
+
+  --ml-more-badge-bg: #{$ml-more-badge-bg};
+  --ml-more-badge-hover-bg: #{$ml-more-badge-hover-bg};
+  --ml-more-badge-active-bg: #{$ml-more-badge-active-bg};
+
+  // ==========================================================================
+  // COUNT DISPLAY MODE
+  // ==========================================================================
+
+  --ml-count-display-margin-bottom: #{$ml-count-display-margin-bottom};
+  --ml-count-display-margin-top: #{$ml-count-display-margin-top};
+  --ml-count-display-margin-left: #{$ml-count-display-margin-left};
+  --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};
+
+  // ==========================================================================
+  // COUNT TEXT & CLEAR BUTTON
+  // ==========================================================================
+
+  // Count Text
+  --ml-count-text-bg: #{$ml-count-text-bg};
+  --ml-count-text-border: #{$ml-count-text-border};
+  --ml-count-text-font-size: #{$ml-count-text-font-size};
+  --ml-count-text-color: #{$ml-count-text-color};
+
+  // Count Clear Button
+  --ml-count-clear-size: #{$ml-count-clear-size};
+  --ml-count-clear-bg: #{$ml-count-clear-bg};
+  --ml-count-clear-color: #{$ml-count-clear-color};
+  --ml-count-clear-font-size: #{$ml-count-clear-font-size};
+  --ml-count-clear-border-radius: #{$ml-count-clear-border-radius};
+  --ml-count-clear-bg-hover: #{$ml-count-clear-bg-hover};
+  --ml-count-clear-color-hover: #{$ml-count-clear-color-hover};
+  --ml-icon-clear: "#{$ml-icon-clear}";
+
+  // ==========================================================================
+  // TOOLTIPS
+  // ==========================================================================
+
+  --ml-tooltip-bg: #{$ml-tooltip-bg};
+  --ml-tooltip-color: #{$ml-tooltip-color};
+  --ml-tooltip-padding: #{$ml-tooltip-padding};
+  --ml-tooltip-border-radius: #{$ml-tooltip-border-radius};
+  --ml-tooltip-font-size: #{$ml-tooltip-font-size};
+  --ml-tooltip-max-width: #{$ml-tooltip-max-width};
+  --ml-tooltip-shadow: #{$ml-tooltip-shadow};
+  --ml-tooltip-z-index: #{$ml-tooltip-z-index};
+
+  // ==========================================================================
+  // SELECTED POPOVER
+  // ==========================================================================
+
+  --ml-z-index-popover: #{$ml-z-index-popover};
+  --ml-selected-popover-width: #{$ml-selected-popover-width};
+  --ml-selected-popover-max-height: #{$ml-selected-popover-max-height};
+  --ml-selected-popover-bg: #{$ml-selected-popover-bg};
+  --ml-selected-popover-border: #{$ml-selected-popover-border};
+  --ml-selected-popover-border-radius: #{$ml-selected-popover-border-radius};
+  --ml-selected-popover-box-shadow: #{$ml-selected-popover-box-shadow};
+
+  // Popover Header
+  --ml-selected-popover-header-padding: #{$ml-selected-popover-header-padding};
+  --ml-selected-popover-header-bg: #{$ml-selected-popover-header-bg};
+  --ml-selected-popover-header-border-bottom: #{$ml-selected-popover-header-border-bottom};
+  --ml-selected-popover-header-font-size: #{$ml-selected-popover-header-font-size};
+  --ml-selected-popover-header-font-weight: #{$ml-selected-popover-header-font-weight};
+  --ml-selected-popover-header-color: #{$ml-selected-popover-header-color};
+
+  // ==========================================================================
+  // POPOVER CLOSE BUTTON
+  // ==========================================================================
+
+  --ml-popover-close-size: #{$ml-popover-close-size};
+  --ml-selected-popover-close-bg: #{$ml-selected-popover-close-bg};
+  --ml-selected-popover-close-color: #{$ml-selected-popover-close-color};
+  --ml-selected-popover-close-font-size: #{$ml-selected-popover-close-font-size};
+  --ml-selected-popover-close-border-radius: #{$ml-selected-popover-close-border-radius};
+  --ml-selected-popover-close-bg-hover: #{$ml-selected-popover-close-bg-hover};
+  --ml-selected-popover-close-color-hover: #{$ml-selected-popover-close-color-hover};
+
+  // ==========================================================================
+  // POPOVER BODY
+  // ==========================================================================
+
+  --ml-selected-popover-body-gap: #{$ml-selected-popover-body-gap};
+  --ml-selected-popover-body-padding: #{$ml-selected-popover-body-padding};
+  --ml-selected-popover-body-max-height: #{$ml-selected-popover-body-max-height};
+
+  // ==========================================================================
+  // TYPOGRAPHY SCALE
+  // ==========================================================================
+
+  --ml-font-size-2xs: #{$ml-font-size-2xs};
+  --ml-font-size-xs: #{$ml-font-size-xs};
+  --ml-font-size-sm: #{$ml-font-size-sm};
+  --ml-font-size-base: #{$ml-font-size-base};
+  --ml-font-size-lg: #{$ml-font-size-lg};
+  --ml-font-weight-medium: #{$ml-font-weight-medium};
+  --ml-font-weight-semibold: #{$ml-font-weight-semibold};
+  --ml-line-height-none: #{$ml-line-height-none};
+
+  // ==========================================================================
+  // SPACING & SIZING
+  // ==========================================================================
+
+  --ml-spacing-xs: #{$ml-spacing-xs};
+  --ml-spacing-sm: #{$ml-spacing-sm};
+  --ml-spacing-md: #{$ml-spacing-md};
+  --ml-spacing-lg: #{$ml-spacing-lg};
+
+  // ==========================================================================
+  // TRANSITIONS & EFFECTS
+  // ==========================================================================
+
+  --ml-transition-fast: #{$ml-transition-fast};
+  --ml-transition-normal: #{$ml-transition-normal};
+  --ml-easing-snappy: #{$ml-easing-snappy};
+
+  // ==========================================================================
+  // OPACITY VALUES
+  // ==========================================================================
+
+  --ml-placeholder-opacity: #{$ml-placeholder-opacity};
+  --ml-disabled-input-opacity: #{$ml-disabled-input-opacity};
+}

package/src/scss/main.scss

@@ -5,6 +5,7 @@
 //
 // File structure:
 // - _variables.scss       : All variables (base primitives + semantic)
+// - _css-variables.scss   : CSS custom properties at :host level (for theming)
 // - _base.scss            : FOUC prevention + layout containers
 // - _input-dropdown.scss  : Input, toggle, badge, hint, dropdown, actions
 // - _options.scss         : Options list, groups, checkbox, content, states
@@ -16,6 +17,7 @@
 
 // Import all partials in dependency order
 @use 'variables';
+@use 'css-variables';  // Define CSS custom properties at :host level
 @use 'base';
 @use 'input-dropdown';
 @use 'options';