@danielgindi/selectbox 2.0.26 → 2.0.28

package/css/selectbox.css

@@ -1,3 +1,3 @@
-.selectbox{--selectbox-border-radius: 4px;--selectbox-open-indicator-spacing: 0.25em;--selectbox-open-indicator-width: 1.2em;--selectbox-spinner-spacing: 0.125em;--selectbox-spinner-width: 1.2em;--selectbox-clear-spacing: 0.125em;--selectbox-clear-width: 1.2em;--selectbox-horz-padding: 0.5em;--selectbox-single-top-padding: 0.1667em;--selectbox-single-bottom-padding: 0.3334em;--selectbox-multi-vert-padding: 0.357em;--selectbox-multi-item-border-width: 1px;--selectbox-multi-item-border-radius: 4px;--selectbox-multi-item-horz-spacing: 0.416em;--selectbox-multi-item-vert-spacing: 0.416em;--selectbox-multi-item-horz-padding: 0.416em;--selectbox-multi-item-top-padding: 0px;--selectbox-multi-item-remove-spacing: 0.153em;--selectbox-multi-item-bottom-padding: 0.2em;--selectbox-multi-search-top-offset: 0px;position:relative;box-sizing:border-box;display:inline-block;cursor:default;outline:0;line-height:1.2;user-select:none;-webkit-user-select:none;color:#000;background-color:#fff;border-radius:var(--selectbox-border-radius);border:solid #aaa 1px}.selectbox.selectbox__rtl{direction:rtl}.selectbox.selectbox__searchable{cursor:text}.selectbox[aria-disabled=true]{border:solid #aaa 1px;background-color:#eee;cursor:default}.selectbox[aria-disabled=true] *{cursor:default}.selectbox.has_droplist_above{border-top-left-radius:0;border-top-right-radius:0}.selectbox.has_droplist_below{border-bottom-left-radius:0;border-bottom-right-radius:0}.selectbox.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__has_spinner){padding-right:var(--selectbox-open-indicator-width)}.selectbox.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__has_spinner).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__has_spinner):not(.selectbox__ltr){padding-right:0;padding-left:var(--selectbox-open-indicator-width)}.selectbox.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__has_spinner){padding-right:var(--selectbox-clear-width)}.selectbox.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__has_spinner).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__has_spinner):not(.selectbox__ltr){padding-right:0;padding-left:var(--selectbox-clear-width)}.selectbox.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__has_clear){padding-right:var(--selectbox-spinner-width)}.selectbox.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__has_clear).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__has_clear):not(.selectbox__ltr){padding-right:0;padding-left:var(--selectbox-clear-width)}.selectbox.selectbox__has_open_indicator.selectbox__has_spinner:not(.selectbox__has_clear){padding-right:calc(var(--selectbox-open-indicator-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_spinner:not(.selectbox__has_clear).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_spinner:not(.selectbox__has_clear):not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-open-indicator-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__has_spinner){padding-right:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__has_spinner).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__has_spinner):not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width))}.selectbox.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__has_open_indicator){padding-right:calc(var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__has_open_indicator).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear.selectbox__has_spinner{padding-right:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear.selectbox__has_spinner.selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__multi{padding-top:var(--selectbox-multi-vert-padding);padding-bottom:var(--selectbox-multi-vert-padding)}.selectbox__focus{border-color:#66afe9;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.selectbox__list{box-sizing:border-box;list-style:none none;display:inline-block;vertical-align:top;width:100%;margin:calc(0px - var(--selectbox-multi-item-vert-spacing)) 0 0;padding:0 var(--selectbox-horz-padding);text-overflow:ellipsis;white-space:nowrap}.selectbox__rtl .selectbox__list::before,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__list::before{float:left}.selectbox__open_indicator{position:absolute;right:var(--selectbox-open-indicator-spacing);top:50%;transform:translateY(-50%);z-index:2;font-size:1em;width:1em;height:.5em;overflow:hidden;direction:ltr;text-align:left;cursor:pointer}.selectbox__open_indicator::before{border-style:solid;border-color:#9d9d9d;border-width:1.5px 1.5px 0 0;content:"";display:inline-block;height:.45em;left:.2em;position:relative;top:-0.18em;transform:rotate(135deg);vertical-align:top;width:.45em;transition:transform 150ms cubic-bezier(1, -0.115, 0.975, 0.855)}.selectbox__open_list .selectbox__open_indicator::before{transform:translateY(50%) rotate(-45deg)}.selectbox__rtl .selectbox__open_indicator,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__open_indicator{right:auto;left:var(--selectbox-open-indicator-spacing)}.selectbox__rtl .selectbox__open_indicator::before,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__open_indicator::before{transform:rotate(-225deg)}.selectbox__rtl.selectbox__open_list .selectbox__open_indicator::before,[dir=rtl] .selectbox.selectbox__open_list:not(.selectbox__ltr) .selectbox__open_indicator::before{transform:translateY(50%) rotate(315deg)}.selectbox__clear{position:absolute;right:var(--selectbox-clear-spacing);top:50%;transform:translateY(-50%);z-index:2}.selectbox__clear>button{box-sizing:border-box;display:block;cursor:pointer;font-weight:bold;width:26px;text-align:center;font-size:13px;line-height:1.4;margin:0;padding:0;border:0;background:none}.selectbox__clear>button:before{content:"×"}.selectbox__clear>button:focus{outline:none;color:red}.selectbox__rtl .selectbox__clear,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__clear{right:auto;left:var(--selectbox-clear-spacing)}.selectbox__has_open_indicator.selectbox__has_clear .selectbox__clear{right:calc(var(--selectbox-clear-spacing) + var(--selectbox-open-indicator-width))}.selectbox__has_open_indicator.selectbox__has_clear.selectbox__rtl .selectbox__clear,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__ltr) .selectbox__clear{right:auto;left:calc(var(--selectbox-clear-spacing) + var(--selectbox-open-indicator-width))}.selectbox[aria-disabled=true]>.selectbox__clear{display:none}.selectbox__spinner{position:absolute;right:var(--selectbox-spinner-spacing);top:50%;transform:translateY(-50%);z-index:2}.selectbox__spinner::before{content:"";display:block;font-size:1em;width:1em;height:1em;text-indent:-9999em;overflow:hidden;border-top:.3em solid rgba(100,100,100,.1);border-right:.3em solid rgba(100,100,100,.1);border-bottom:.3em solid rgba(100,100,100,.1);border-left:.3em solid rgba(60,60,60,.45);border-radius:50%;transform:translateZ(0);animation:selectbox__spinner_anim 1.1s infinite linear;transition:opacity .1s}.selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__spinner{right:auto;left:var(--selectbox-spinner-spacing)}.selectbox__has_spinner.selectbox__has_open_indicator:not(.selectbox__has_clear) .selectbox__spinner{right:calc(var(--selectbox-spinner-spacing) + var(--selectbox-open-indicator-width))}.selectbox__has_spinner.selectbox__has_clear:not(.selectbox__has_open_indicator) .selectbox__spinner{right:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width))}.selectbox__has_spinner.selectbox__has_open_indicator.selectbox__has_clear .selectbox__spinner{right:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width) + var(--selectbox-open-indicator-width) + var(--selectbox-spinner-width))}.selectbox__has_spinner.selectbox__has_open_indicator:not(.selectbox__has_clear).selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox.selectbox__has_spinner.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__ltr) .selectbox__spinner{right:auto;left:var(var(--selectbox-spinner-spacing)--selectbox-open-indicator-width)}.selectbox__has_spinner.selectbox__has_clear:not(.selectbox__has_open_indicator).selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox.selectbox__has_spinner.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__ltr) .selectbox__spinner{right:auto;left:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width))}.selectbox__has_spinner.selectbox__has_clear.selectbox__has_open_indicator.selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox.selectbox__has_spinner.selectbox__has_clearselectbox__has_open_indicator:not(.selectbox__ltr) .selectbox__spinner{right:auto;left:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width) + var(--selectbox-open-indicator-width))}.selectbox__item{box-sizing:border-box;float:left;cursor:default;background-color:#e4e4e4;border:var(--selectbox-multi-item-border-width) solid #aaa;border-radius:var(--selectbox-multi-item-border-radius);margin-left:0;margin-right:var(--selectbox-multi-item-horz-spacing);margin-top:var(--selectbox-multi-item-vert-spacing);padding:var(--selectbox-multi-item-top-padding) var(--selectbox-multi-item-horz-padding) var(--selectbox-multi-item-bottom-padding);line-height:inherit}.selectbox__item span{vertical-align:top}.selectbox__item:focus{background-color:#ccc;outline:0}.selectbox__rtl .selectbox__item,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__item{float:right;margin-left:var(--selectbox-multi-item-horz-spacing);margin-right:0}.selectbox__item_remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-top:.2em;margin-right:var(--selectbox-multi-item-remove-spacing);font-size:13px}.selectbox__item_remove:before{content:"×"}.selectbox__rtl .selectbox__item_remove,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__item_remove{margin-left:var(--selectbox-multi-item-remove-spacing);margin-right:0}.selectbox__single_wrapper{position:relative;min-height:1em;max-width:100%;margin:0;padding:var(--selectbox-single-top-padding) var(--selectbox-horz-padding) var(--selectbox-single-bottom-padding) var(--selectbox-horz-padding);color:currentColor}.selectbox__single_wrapper:empty::after{content:"​"}.selectbox__empty_selection .selectbox__single_wrapper{width:12em}.selectbox__has_selection.selectbox__has_input .selectbox__single_wrapper{opacity:0}.selectbox__has_selection.selectbox__empty_input.has_droplist .selectbox__single_wrapper,.selectbox__has_selection.selectbox__empty_input.selectbox__focus .selectbox__single_wrapper{opacity:.5}.selectbox__search_wrapper{max-width:100%}.selectbox__multi .selectbox__search_wrapper{float:left;margin-top:calc(var(--selectbox-multi-item-vert-spacing) + var(--selectbox-multi-item-border-width) + var(--selectbox-multi-item-top-padding) + var(--selectbox-multi-search-top-offset))}.selectbox__single .selectbox__search_wrapper{position:absolute;z-index:1;left:0;top:var(--selectbox-single-top-padding)}.selectbox__multi.selectbox__rtl .selectbox__search_wrapper,[dir=rtl] .selectbox.selectbox__multi:not(.selectbox__ltr) .selectbox__search_wrapper{float:right}.selectbox__single.selectbox__rtl .selectbox__search_wrapper,[dir=rtl] .selectbox.selectbox__single:not(.selectbox__ltr) .selectbox__search_wrapper{right:0;left:auto}input.selectbox__search_field{box-sizing:border-box;display:inline-block;height:auto;max-width:100%;cursor:inherit;color:currentColor;-webkit-appearance:none;appearance:none;background:rgba(0,0,0,0);box-shadow:none;border:none;border-radius:0;outline:0;margin:0;padding:0;font-family:inherit;font-size:1em;line-height:normal}input.selectbox__search_field::-webkit-search-decoration,input.selectbox__search_field::-webkit-search-cancel-button,input.selectbox__search_field::-webkit-search-results-button,input.selectbox__search_field::-webkit-search-results-decoration{appearance:none;-webkit-appearance:none;width:0;height:0;margin:0;padding:0}input.selectbox__search_field::-ms-clear{appearance:none;-webkit-appearance:none;width:0;height:0;margin:0;padding:0}input.selectbox__search_field:focus{outline:0 !important;border:0 !important;box-shadow:none !important}.selectbox__single input.selectbox__search_field{padding:0 var(--selectbox-horz-padding)}.selectbox__multi input.selectbox__search_field{padding:0}.selectbox.has_droplist_above{border-top-left-radius:0;border-top-right-radius:0}.selectbox.has_droplist_below{border-bottom-left-radius:0;border-bottom-right-radius:0}@-webkit-keyframes selectbox__spinner_anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes selectbox__spinner_anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
+.selectbox{--selectbox-border-radius: 4px;--selectbox-open-indicator-spacing: 0.25em;--selectbox-open-indicator-width: 1.2em;--selectbox-spinner-spacing: 0.125em;--selectbox-spinner-width: 1.2em;--selectbox-clear-spacing: 0.125em;--selectbox-clear-width: 1.2em;--selectbox-horz-padding: 0.5em;--selectbox-single-top-padding: 0.1667em;--selectbox-single-bottom-padding: 0.3334em;--selectbox-multi-vert-padding: 0.357em;--selectbox-multi-item-border-width: 1px;--selectbox-multi-item-border-radius: 4px;--selectbox-multi-item-horz-spacing: 0.416em;--selectbox-multi-item-vert-spacing: 0.416em;--selectbox-multi-item-horz-padding: 0.416em;--selectbox-multi-item-top-padding: 0px;--selectbox-multi-item-remove-spacing: 0.153em;--selectbox-multi-item-bottom-padding: 0.2em;--selectbox-multi-search-top-offset: 0px;position:relative;box-sizing:border-box;display:inline-block;cursor:default;outline:0;line-height:1.2;user-select:none;-webkit-user-select:none;color:#000;background-color:#fff;border-radius:var(--selectbox-border-radius);border:solid #aaa 1px}.selectbox.selectbox__rtl{direction:rtl}.selectbox.selectbox__searchable{cursor:text}.selectbox[aria-disabled=true]{border:solid #aaa 1px;background-color:#eee;cursor:default}.selectbox[aria-disabled=true] *{cursor:default}.selectbox[aria-readonly=true]{cursor:default}.selectbox[aria-readonly=true] *{cursor:default}.selectbox.has_droplist_above{border-top-left-radius:0;border-top-right-radius:0}.selectbox.has_droplist_below{border-bottom-left-radius:0;border-bottom-right-radius:0}.selectbox.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__has_spinner){padding-right:var(--selectbox-open-indicator-width)}.selectbox.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__has_spinner).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__has_spinner):not(.selectbox__ltr){padding-right:0;padding-left:var(--selectbox-open-indicator-width)}.selectbox.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__has_spinner){padding-right:var(--selectbox-clear-width)}.selectbox.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__has_spinner).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__has_spinner):not(.selectbox__ltr){padding-right:0;padding-left:var(--selectbox-clear-width)}.selectbox.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__has_clear){padding-right:var(--selectbox-spinner-width)}.selectbox.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__has_clear).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__has_clear):not(.selectbox__ltr){padding-right:0;padding-left:var(--selectbox-clear-width)}.selectbox.selectbox__has_open_indicator.selectbox__has_spinner:not(.selectbox__has_clear){padding-right:calc(var(--selectbox-open-indicator-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_spinner:not(.selectbox__has_clear).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_spinner:not(.selectbox__has_clear):not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-open-indicator-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__has_spinner){padding-right:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__has_spinner).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__has_spinner):not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width))}.selectbox.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__has_open_indicator){padding-right:calc(var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__has_open_indicator).selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__has_open_indicator):not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear.selectbox__has_spinner{padding-right:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__has_open_indicator.selectbox__has_clear.selectbox__has_spinner.selectbox__rtl,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_clear.selectbox__has_spinner:not(.selectbox__ltr){padding-right:0;padding-left:calc(var(--selectbox-open-indicator-width) + var(--selectbox-clear-width) + var(--selectbox-spinner-width))}.selectbox.selectbox__multi{padding-top:var(--selectbox-multi-vert-padding);padding-bottom:var(--selectbox-multi-vert-padding)}.selectbox__focus{border-color:#66afe9;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.selectbox__list{box-sizing:border-box;list-style:none none;display:inline-block;vertical-align:top;width:100%;margin:calc(0px - var(--selectbox-multi-item-vert-spacing)) 0 0;padding:0 var(--selectbox-horz-padding);text-overflow:ellipsis;white-space:nowrap}.selectbox__rtl .selectbox__list::before,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__list::before{float:left}.selectbox__open_indicator{position:absolute;right:var(--selectbox-open-indicator-spacing);top:50%;transform:translateY(-50%);z-index:2;font-size:1em;width:1em;height:.5em;overflow:hidden;direction:ltr;text-align:left;cursor:pointer}.selectbox__open_indicator::before{border-style:solid;border-color:#9d9d9d;border-width:1.5px 1.5px 0 0;content:"";display:inline-block;height:.45em;left:.2em;position:relative;top:-0.18em;transform:rotate(135deg);vertical-align:top;width:.45em;transition:transform 150ms cubic-bezier(1, -0.115, 0.975, 0.855)}.selectbox__open_list .selectbox__open_indicator::before{transform:translateY(50%) rotate(-45deg)}.selectbox__rtl .selectbox__open_indicator,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__open_indicator{right:auto;left:var(--selectbox-open-indicator-spacing)}.selectbox__rtl .selectbox__open_indicator::before,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__open_indicator::before{transform:rotate(-225deg)}.selectbox__rtl.selectbox__open_list .selectbox__open_indicator::before,[dir=rtl] .selectbox.selectbox__open_list:not(.selectbox__ltr) .selectbox__open_indicator::before{transform:translateY(50%) rotate(315deg)}.selectbox__clear{position:absolute;right:var(--selectbox-clear-spacing);top:50%;transform:translateY(-50%);z-index:2}.selectbox__clear>button{box-sizing:border-box;display:block;cursor:pointer;font-weight:bold;width:26px;text-align:center;font-size:13px;line-height:1.4;margin:0;padding:0;border:0;background:none}.selectbox__clear>button:before{content:"×"}.selectbox__clear>button:focus{outline:none;color:red}.selectbox__rtl .selectbox__clear,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__clear{right:auto;left:var(--selectbox-clear-spacing)}.selectbox__has_open_indicator.selectbox__has_clear .selectbox__clear{right:calc(var(--selectbox-clear-spacing) + var(--selectbox-open-indicator-width))}.selectbox__has_open_indicator.selectbox__has_clear.selectbox__rtl .selectbox__clear,[dir=rtl] .selectbox.selectbox__has_open_indicator.selectbox__has_clear:not(.selectbox__ltr) .selectbox__clear{right:auto;left:calc(var(--selectbox-clear-spacing) + var(--selectbox-open-indicator-width))}.selectbox[aria-disabled=true]>.selectbox__clear,.selectbox[aria-readonly=true]>.selectbox__clear{display:none}.selectbox__spinner{position:absolute;right:var(--selectbox-spinner-spacing);top:50%;transform:translateY(-50%);z-index:2}.selectbox__spinner::before{content:"";display:block;font-size:1em;width:1em;height:1em;text-indent:-9999em;overflow:hidden;border-top:.3em solid rgba(100,100,100,.1);border-right:.3em solid rgba(100,100,100,.1);border-bottom:.3em solid rgba(100,100,100,.1);border-left:.3em solid rgba(60,60,60,.45);border-radius:50%;transform:translateZ(0);animation:selectbox__spinner_anim 1.1s infinite linear;transition:opacity .1s}.selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__spinner{right:auto;left:var(--selectbox-spinner-spacing)}.selectbox__has_spinner.selectbox__has_open_indicator:not(.selectbox__has_clear) .selectbox__spinner{right:calc(var(--selectbox-spinner-spacing) + var(--selectbox-open-indicator-width))}.selectbox__has_spinner.selectbox__has_clear:not(.selectbox__has_open_indicator) .selectbox__spinner{right:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width))}.selectbox__has_spinner.selectbox__has_open_indicator.selectbox__has_clear .selectbox__spinner{right:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width) + var(--selectbox-open-indicator-width) + var(--selectbox-spinner-width))}.selectbox__has_spinner.selectbox__has_open_indicator:not(.selectbox__has_clear).selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox.selectbox__has_spinner.selectbox__has_open_indicator:not(.selectbox__has_clear):not(.selectbox__ltr) .selectbox__spinner{right:auto;left:var(var(--selectbox-spinner-spacing)--selectbox-open-indicator-width)}.selectbox__has_spinner.selectbox__has_clear:not(.selectbox__has_open_indicator).selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox.selectbox__has_spinner.selectbox__has_clear:not(.selectbox__has_open_indicator):not(.selectbox__ltr) .selectbox__spinner{right:auto;left:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width))}.selectbox__has_spinner.selectbox__has_clear.selectbox__has_open_indicator.selectbox__rtl .selectbox__spinner,[dir=rtl] .selectbox.selectbox__has_spinner.selectbox__has_clearselectbox__has_open_indicator:not(.selectbox__ltr) .selectbox__spinner{right:auto;left:calc(var(--selectbox-spinner-spacing) + var(--selectbox-clear-width) + var(--selectbox-open-indicator-width))}.selectbox__item{box-sizing:border-box;float:left;cursor:default;background-color:#e4e4e4;border:var(--selectbox-multi-item-border-width) solid #aaa;border-radius:var(--selectbox-multi-item-border-radius);margin-left:0;margin-right:var(--selectbox-multi-item-horz-spacing);margin-top:var(--selectbox-multi-item-vert-spacing);padding:var(--selectbox-multi-item-top-padding) var(--selectbox-multi-item-horz-padding) var(--selectbox-multi-item-bottom-padding);line-height:inherit}.selectbox__item span{vertical-align:top}.selectbox__item:focus{background-color:#ccc;outline:0}.selectbox__rtl .selectbox__item,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__item{float:right;margin-left:var(--selectbox-multi-item-horz-spacing);margin-right:0}.selectbox__item_remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-top:.2em;font-size:13px}.selectbox__item_remove:before{content:"×"}.selectbox__item_remove:first-child{margin-right:var(--selectbox-multi-item-remove-spacing)}.selectbox__item_remove:last-child{margin-left:var(--selectbox-multi-item-remove-spacing)}.selectbox__rtl .selectbox__item_remove:first-child,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__item_remove:first-child{margin-left:var(--selectbox-multi-item-remove-spacing);margin-right:0}.selectbox__rtl .selectbox__item_remove:last-child,[dir=rtl] .selectbox:not(.selectbox__ltr) .selectbox__item_remove:last-child{margin-right:var(--selectbox-multi-item-remove-spacing);margin-left:0}.selectbox__single_wrapper{position:relative;min-height:1em;max-width:100%;margin:0;padding:var(--selectbox-single-top-padding) var(--selectbox-horz-padding) var(--selectbox-single-bottom-padding) var(--selectbox-horz-padding);color:currentColor}.selectbox__single_wrapper:empty::after{content:"​"}.selectbox__empty_selection .selectbox__single_wrapper{width:12em}.selectbox__has_selection.selectbox__has_input .selectbox__single_wrapper{opacity:0}.selectbox__has_selection.selectbox__empty_input.has_droplist .selectbox__single_wrapper,.selectbox__has_selection.selectbox__empty_input.selectbox__focus .selectbox__single_wrapper{opacity:.5}.selectbox__search_wrapper{max-width:100%}.selectbox__multi .selectbox__search_wrapper{float:left;margin-top:calc(var(--selectbox-multi-item-vert-spacing) + var(--selectbox-multi-item-border-width) + var(--selectbox-multi-item-top-padding) + var(--selectbox-multi-search-top-offset))}.selectbox__single .selectbox__search_wrapper{position:absolute;z-index:1;left:0;top:var(--selectbox-single-top-padding)}.selectbox__multi.selectbox__rtl .selectbox__search_wrapper,[dir=rtl] .selectbox.selectbox__multi:not(.selectbox__ltr) .selectbox__search_wrapper{float:right}.selectbox__single.selectbox__rtl .selectbox__search_wrapper,[dir=rtl] .selectbox.selectbox__single:not(.selectbox__ltr) .selectbox__search_wrapper{right:0;left:auto}input.selectbox__search_field{box-sizing:border-box;display:inline-block;height:auto;max-width:100%;cursor:inherit;color:currentColor;-webkit-appearance:none;appearance:none;background:rgba(0,0,0,0);box-shadow:none;border:none;border-radius:0;outline:0;margin:0;padding:0;font-family:inherit;font-size:1em;line-height:normal}input.selectbox__search_field::-webkit-search-decoration,input.selectbox__search_field::-webkit-search-cancel-button,input.selectbox__search_field::-webkit-search-results-button,input.selectbox__search_field::-webkit-search-results-decoration{appearance:none;-webkit-appearance:none;width:0;height:0;margin:0;padding:0}input.selectbox__search_field::-ms-clear{appearance:none;-webkit-appearance:none;width:0;height:0;margin:0;padding:0}input.selectbox__search_field:focus{outline:0 !important;border:0 !important;box-shadow:none !important}.selectbox__single input.selectbox__search_field{padding:0 var(--selectbox-horz-padding)}.selectbox__multi input.selectbox__search_field{padding:0}.selectbox.has_droplist_above{border-top-left-radius:0;border-top-right-radius:0}.selectbox.has_droplist_below{border-bottom-left-radius:0;border-bottom-right-radius:0}@-webkit-keyframes selectbox__spinner_anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes selectbox__spinner_anim{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
 
 /*# sourceMappingURL=selectbox.css.map */

package/css/selectbox.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/selectbox.scss"],"names":[],"mappings":"CAeA,WACI,+BACA,2CACA,wCACA,qCACA,iCACA,mCACA,+BACA,gCAEA,yCACA,4CAEA,wCACA,yCACA,0CACA,6CACA,6CACA,6CACA,wCACA,+CACA,6CACA,yCAEA,kBACA,sBACA,qBACA,eACA,UACA,gBAEA,iBACA,yBAEA,WACA,sBACA,6CACA,sBAEA,0BACI,cAGJ,iCACI,YAGP,+BACC,sBACA,sBACA,eAEA,iCACC,eAIF,8BACC,yBACA,0BAGD,8BACC,4BACA,6BAGE,iGACI,oDA/EJ,gPAkFQ,gBACA,mDAIR,iGACI,2CAxFJ,gPA2FQ,gBACA,0CAIR,iGACI,6CAjGJ,gPAoGQ,gBACA,0CAIR,2FACI,2FA1GJ,oOA6GQ,gBACA,0FAIR,2FACI,yFAnHJ,oOAsHQ,gBACA,wFAIR,2FACI,kFA5HJ,oOA+HQ,gBACA,iFAIR,qFACI,0HArIJ,wNAwIQ,gBACA,yHAIR,4BACI,gDACA,mDAIR,kBACI,qBACA,UAEA,WADM,8DAIV,iBACI,sBACA,qBACA,qBACA,mBAEA,WACA,gEACA,wCAEA,uBACA,mBAGI,4GACI,WAKZ,2BACI,kBACA,8CACA,QACA,2BACA,UACA,cACA,UACA,YACA,gBACA,cACA,gBACA,eAEA,mCACI,mBACA,qBACA,6BACA,WACA,qBACA,aACA,UACA,kBACA,YACA,yBACA,mBACA,YACA,iEAGJ,yDACI,yCAGJ,gHACI,WACA,6CAEA,gIACI,0BAKJ,0KACI,yCAKZ,kBACI,kBACA,qCACA,QACA,2BACA,UAEA,yBACI,sBACA,cACA,eACA,iBACA,WACA,kBACA,eACA,gBACA,SACA,UACA,SACA,gBAEA,gCACI,YAGJ,+BACI,aACA,UArPR,8FA0PI,WACA,oCAGJ,sEACI,mFAGJ,oMAEI,WACA,kFAGJ,iDACI,aAIR,oBACI,kBACA,uCACA,QACA,2BACA,UAEA,4BACI,WACA,cACA,cACA,UACA,WACA,oBACA,gBACA,2CACA,6CACA,8CACA,0CACA,kBACA,wBACA,uDACA,uBAnSJ,kGAuSI,WACA,sCAGJ,qGACI,qFAGJ,qGACI,4EAGJ,+FACI,qJAGJ,kQAEI,WACA,2EAGJ,kQAEI,WACA,2EAGJ,qPAEI,WACA,mHAIR,iBACI,sBACA,WACA,eAEA,yBACA,2DACA,wDAEA,cACA,sDACA,oDACA,oIACA,oBAEH,sBACC,mBAGD,uBACC,sBACA,UA/VE,4FAmWI,YACA,qDACA,eAIR,wBACI,WACA,eACA,qBACA,iBACA,gBACA,wDACH,eAEA,+BACC,YAnXE,0GAuXI,uDACA,eAIR,2BACI,kBACA,eACA,eACA,SACA,+IACA,mBAEA,oDAEA,uDACI,WAGJ,0EACI,UAIR,sLAEI,WAGJ,2BACC,eAEG,6CACI,WACA,0LAMJ,8CACI,kBACA,UACA,OACA,wCAGJ,kJAEI,YAGJ,oJAEI,QACA,UAIR,8BACI,sBACH,qBACG,YACH,eACG,eACA,mBAEA,wBACA,gBACH,yBACG,gBACA,YACA,gBACA,UACA,SACA,UAEA,oBACA,cACA,mBAEA,mPAII,gBACA,wBACA,QACA,SACA,SACA,UAGJ,yCACI,gBACA,wBACA,QACA,SACA,SACA,UAGP,oCACC,qBACA,oBACA,2BAIF,iDACI,wCAGJ,gDACI,UAGJ,8BACI,yBACA,0BAGJ,8BACI,4BACA,6BAGJ,2CACI,GACI,uBAEJ,KACI,0BAIR,mCACI,GACI,uBAEJ,KACI","file":"selectbox.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/selectbox.scss"],"names":[],"mappings":"CAeA,WACI,+BACA,2CACA,wCACA,qCACA,iCACA,mCACA,+BACA,gCAEA,yCACA,4CAEA,wCACA,yCACA,0CACA,6CACA,6CACA,6CACA,wCACA,+CACA,6CACA,yCAEA,kBACA,sBACA,qBACA,eACA,UACA,gBAEA,iBACA,yBAEA,WACA,sBACA,6CACA,sBAEA,0BACI,cAGJ,iCACI,YAGP,+BACC,sBACA,sBACA,eAEA,iCACC,eAIF,+BACC,eAEA,iCACC,eAIF,8BACC,yBACA,0BAGD,8BACC,4BACA,6BAGE,iGACI,oDAvFJ,gPA0FQ,gBACA,mDAIR,iGACI,2CAhGJ,gPAmGQ,gBACA,0CAIR,iGACI,6CAzGJ,gPA4GQ,gBACA,0CAIR,2FACI,2FAlHJ,oOAqHQ,gBACA,0FAIR,2FACI,yFA3HJ,oOA8HQ,gBACA,wFAIR,2FACI,kFApIJ,oOAuIQ,gBACA,iFAIR,qFACI,0HA7IJ,wNAgJQ,gBACA,yHAIR,4BACI,gDACA,mDAIR,kBACI,qBACA,UAEA,WADM,8DAIV,iBACI,sBACA,qBACA,qBACA,mBAEA,WACA,gEACA,wCAEA,uBACA,mBAGI,4GACI,WAKZ,2BACI,kBACA,8CACA,QACA,2BACA,UACA,cACA,UACA,YACA,gBACA,cACA,gBACA,eAEA,mCACI,mBACA,qBACA,6BACA,WACA,qBACA,aACA,UACA,kBACA,YACA,yBACA,mBACA,YACA,iEAGJ,yDACI,yCAGJ,gHACI,WACA,6CAEA,gIACI,0BAKJ,0KACI,yCAKZ,kBACI,kBACA,qCACA,QACA,2BACA,UAEA,yBACI,sBACA,cACA,eACA,iBACA,WACA,kBACA,eACA,gBACA,SACA,UACA,SACA,gBAEA,gCACI,YAGJ,+BACI,aACA,UA7PR,8FAkQI,WACA,oCAGJ,sEACI,mFAGJ,oMAEI,WACA,kFAGJ,kGACI,aAIR,oBACI,kBACA,uCACA,QACA,2BACA,UAEA,4BACI,WACA,cACA,cACA,UACA,WACA,oBACA,gBACA,2CACA,6CACA,8CACA,0CACA,kBACA,wBACA,uDACA,uBA3SJ,kGA+SI,WACA,sCAGJ,qGACI,qFAGJ,qGACI,4EAGJ,+FACI,qJAGJ,kQAEI,WACA,2EAGJ,kQAEI,WACA,2EAGJ,qPAEI,WACA,mHAIR,iBACI,sBACA,WACA,eAEA,yBACA,2DACA,wDAEA,cACA,sDACA,oDACA,oIACA,oBAEH,sBACC,mBAGD,uBACC,sBACA,UAvWE,4FA2WI,YACA,qDACA,eAIR,wBACI,WACA,eACA,qBACA,iBACA,gBACH,eAEA,+BACC,YAGE,oCACI,wDAGJ,mCACI,uDAIA,kIACI,uDACA,eAGJ,gIACI,wDACA,cAKZ,2BACI,kBACA,eACA,eACA,SACA,+IACA,mBAEA,oDAEA,uDACI,WAGJ,0EACI,UAIR,sLAEI,WAGJ,2BACC,eAEG,6CACI,WACA,0LAMJ,8CACI,kBACA,UACA,OACA,wCAGJ,kJAEI,YAGJ,oJAEI,QACA,UAIR,8BACI,sBACH,qBACG,YACH,eACG,eACA,mBAEA,wBACA,gBACH,yBACG,gBACA,YACA,gBACA,UACA,SACA,UAEA,oBACA,cACA,mBAEA,mPAII,gBACA,wBACA,QACA,SACA,SACA,UAGJ,yCACI,gBACA,wBACA,QACA,SACA,SACA,UAGP,oCACC,qBACA,oBACA,2BAIF,iDACI,wCAGJ,gDACI,UAGJ,8BACI,yBACA,0BAGJ,8BACI,4BACA,6BAGJ,2CACI,GACI,uBAEJ,KACI,0BAIR,mCACI,GACI,uBAEJ,KACI","file":"selectbox.css"}

package/dist/lib.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.26
+ * @danielgindi/selectbox 2.0.28
  * git://github.com/danielgindi/selectbox.git
  */
 'use strict';
@@ -6371,7 +6371,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 /** */
 
 /** @type {DropList.Options} */
-let defaultOptions$1 = {
+const DefaultOptions$1 = {
   baseClassName: 'droplist',
 
   autoItemBlur: true,
@@ -6430,7 +6430,7 @@ class DropList {
    * @param {DropList.Options} options
    */
   constructor(options) {var _o$positionOptionsPro;
-    const o = _objectSpread2({}, defaultOptions$1);
+    const o = _objectSpread2({}, DefaultOptions$1);
 
     for (let [key, value] of Object.entries(/**@type Object*/options))
     if (value !== undefined)
@@ -9879,6 +9879,7 @@ const inputBackbufferCssProps = [
  * @property {string|string[]} [additionalClasses]
  * @property {'ltr'|'rtl'|'auto'} [direction='auto']
  * @property {boolean} [disabled=false] Should start as disabled?
+ * @property {boolean} [readonly=false] Should start as readonly?
  * @property {boolean} [clearable=true] Has clear button?
  * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
  * @property {string} [placeholder=''] Placeholder text
@@ -9897,6 +9898,7 @@ const inputBackbufferCssProps = [
  * @property {string} [labelProp='label']
  * @property {string} [valueProp='value']
  * @property {string} [multiItemLabelProp='short_label']
+ * @property {'after'|'before'|'none'} [multiItemRemovePosition='after']
  * @property {number} [maxMultiItems] maximum number of multi items. The rest will get a single item to represent.
  * @property {function(count: number, items: DropList.ItemBase[]):string} [multiItemsRestLabelProvider] label for the item representing the rest of the items.
  * @property {DropList.ItemBase[]|null} [items] initial items
@@ -9919,10 +9921,11 @@ const inputBackbufferCssProps = [
  * @property {boolean} [closeListWhenLoading] whether we should close the list automatically when loading
  * @property {string[]} [clearInputWhen=['single_close','multi_select_single']] clear input box when closing the droplist or selecting <code>['single_close', 'multi_close', 'multi_select_single']</code>
  * */
-const defaultOptions = {
+const DefaultOptions = {
   el: null,
   baseClassName: 'selectbox',
   disabled: false,
+  readonly: false,
   clearable: true,
   hasOpenIndicator: true,
   placeholder: '',
@@ -9946,6 +9949,7 @@ const defaultOptions = {
   labelProp: 'label',
   valueProp: 'value',
   multiItemLabelProp: 'short_label',
+  multiItemRemovePosition: 'after',
   maxMultiItems: null,
   multiItemsRestLabelProvider: null,
   items: [],
@@ -10004,7 +10008,7 @@ class SelectBox {
    * @param {SelectBox.Options} options
    */
   constructor(options) {
-    const o = _objectSpread2({}, defaultOptions);
+    const o = _objectSpread2({}, DefaultOptions);
 
     for (let [key, value] of Object.entries(/**@type Object*/options))
     if (value !== undefined)
@@ -10020,6 +10024,7 @@ class SelectBox {
       listOptions: o.listOptions,
 
       disabled: !!o.disabled,
+      readonly: !!o.readonly,
       clearable: !!o.clearable,
       hasOpenIndicator: !!o.hasOpenIndicator,
       placeholder: o.placeholder,
@@ -10042,6 +10047,7 @@ class SelectBox {
       labelProp: o.labelProp,
       valueProp: o.valueProp,
       multiItemLabelProp: o.multiItemLabelProp,
+      multiItemRemovePosition: o.multiItemRemovePosition,
 
       maxMultiItems: o.maxMultiItems,
       multiItemsRestLabelProvider: o.multiItemsRestLabelProvider,
@@ -10101,6 +10107,7 @@ class SelectBox {
     p.multiItemEls = [];
 
     this.enable(!p.disabled);
+    this.setReadOnly(!p.readonly);
 
     this._setupDropdownMenu();
 
@@ -10327,6 +10334,32 @@ class SelectBox {
     return this._p.disabled;
   }
 
+  /**
+   * Sets read only mode
+   * @param {boolean=true} readonly Should the control be read only?
+   * @returns {SelectBox}
+   */
+  setReadOnly(readonly) {
+    const p = this._p;
+
+    if (readonly === undefined) {
+      readonly = true;
+    }
+    p.readonly = !readonly;
+    p.el.setAttribute('aria-readonly', p.readonly.toString());
+    p.input.readonly = !!p.readonly;
+
+    return this;
+  }
+
+  /**
+   * Is the control enabled?
+   * @returns {boolean}
+   */
+  isReadOnly() {
+    return !this._p.readonly;
+  }
+
   /**
    * @param {string|string[]} classes
    * @returns {SelectBox}
@@ -10954,6 +10987,18 @@ class SelectBox {
   setMultiItemLabelProp(prop) {
     const p = this._p;
     p.multiItemLabelProp = prop;
+    this._scheduleSync('render_items');
+    return this;
+  }
+
+  /**
+   * @param {'before'|'after'|'none'} position
+   * @returns {SelectBox}
+   */
+  setMultiItemRemovePosition(position) {
+    const p = this._p;
+    p.multiItemRemovePosition = position;
+    this._scheduleSync('render_items');
     return this;
   }
 
@@ -11476,7 +11521,7 @@ class SelectBox {
           if (!Dom.closestUntil(evt.target, ".".concat(p.baseClassName, "__item_remove"), evt.currentTarget))
           return;
 
-          if (p.disabled) return;
+          if (p.disabled || p.readonly) return;
 
           this._removeMultiItemFromEvent(
             /**@type Element*/
@@ -11529,6 +11574,7 @@ class SelectBox {
       if (p.hasOpenIndicator) {
         p.openIndicator = Dom.createElement('span', { class: "".concat(p.baseClassName, "__open_indicator") });
         p.el.appendChild(p.openIndicator);
+        p.el.classList.add("".concat(p.baseClassName, "__has_open_indicator"));
       } else {
         DomCompat.remove(p.openIndicator);
         delete p.openIndicator;
@@ -11843,7 +11889,7 @@ class SelectBox {
 
     setTimeout(() => {
       if (this[DestroyedSymbol]) return; // destroyed by event handler
-      if (p.disabled) return;
+      if (p.disabled || p.readonly) return;
 
       this._trigger('search:blur');
 
@@ -11986,7 +12032,8 @@ class SelectBox {
         p.lastKeyAllowsNonTypeKeys &&
         !p.multi &&
         !dropList.hasFocusedItem() &&
-        !p.disabled)
+        !p.disabled &&
+        !p.readonly)
         {
           this.toggleList();
           evt.preventDefault();
@@ -11998,20 +12045,20 @@ class SelectBox {
     if (p.input) {
       p.sink.
       add(p.input, 'input.dropdown', () => {var _p$dropList9;
-        if (p.disabled) return;
+        if (p.disabled || p.readonly) return;
 
         p.filterTerm = p.input.value.trim();
         (_p$dropList9 = p.dropList) === null || _p$dropList9 === void 0 || _p$dropList9.setSearchTerm(p.filterTerm, true);
       }).
       add(p.input, 'click.dropdown', () => {
-        if (p.disabled) return;
+        if (p.disabled || p.readonly) return;
 
         if (!p.multi && p.searchable) {
           this.openList();
         }
       }).
       add(p.input, 'focus.dropdown', () => {
-        if (p.disabled) return;
+        if (p.disabled || p.readonly) return;
 
         this._trigger('search:focus');
 
@@ -12028,7 +12075,7 @@ class SelectBox {
 
     p.sink.
     add(p.el, 'mousedown.dropdown', () => {
-      if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled) {
+      if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled && !p.readonly) {
         this.toggleList();
       }
       avoidToggleFromClick = false;
@@ -12037,7 +12084,7 @@ class SelectBox {
       if (currentTouchId) return;
       currentTouchId = evt.changedTouches[0].identifier;
 
-      if (this.isDisabled())
+      if (this.isDisabled() || this.isReadOnly())
       return;
 
       if (Dom.closestUntil(evt.target, ".".concat(p.baseClassName, "__item,.").concat(p.baseClassName, "__clear"), p.el))
@@ -12477,7 +12524,7 @@ class SelectBox {
         p.el.classList.add("".concat(p.baseClassName, "__has_clear"));
 
         p.sink.add(p.clearButton, 'click', () => {
-          if (this.isDisabled()) return;
+          if (this.isDisabled() || this.isReadOnly()) return;
           this.clear();
         });
       }
@@ -12674,22 +12721,29 @@ class SelectBox {
     if (label === false)
     return null;
 
+    const elRemove = Dom.createElement('span', {
+      class: "".concat(p.baseClassName, "__item_remove"),
+      role: 'presentation'
+    });
+
     const itemEl = Dom.createElement('li',
     {
       class: "".concat(p.baseClassName, "__item"),
       tabindex: '0',
       title: label
-    },
-    [
-    Dom.createElement('span', {
-      class: "".concat(p.baseClassName, "__item_remove"),
-      role: 'presentation'
-    })]
-
+    }
     );
 
+    if (p.multiItemRemovePosition === 'before') {
+      itemEl.appendChild(elRemove);
+    }
+
     this._renderMultiItemContent(item, itemEl);
 
+    if (p.multiItemRemovePosition === 'after') {
+      itemEl.appendChild(elRemove);
+    }
+
     itemEl[ItemSymbol] = item;
 
     return itemEl;
@@ -13006,7 +13060,7 @@ class SelectBox {
   _handleMultiKeydown(event) {
     const p = this._p;
 
-    if (p.disabled) return;
+    if (p.disabled || p.readonly) return;
 
     const isRtl = getComputedStyle(p.el).direction === 'rtl';