@referralgps/selectra 1.0.3 → 1.0.7

package/README.md

@@ -41,6 +41,7 @@ Selectra is a modern rewrite of [Selectize.js](https://github.com/selectize/sele
 - **Accessible** — focus management, label association, keyboard-first
 - **RTL Support** — auto-detected from CSS `direction`
 - **Tailwind CSS** — fully styled with utilities, trivially customizable
+- **Selected Count Mode** — show a count badge instead of tags in multi-select, with checkmarks on selected options
 - **Lightweight** — ~25 KB gzipped JS, zero runtime dependencies beyond Alpine.js
 
 ---
@@ -105,6 +106,23 @@ Add `x-data="selectra({...})"` and `x-selectra` to any element. The template is
 })" x-selectra></div>
 ```
 
+#### Multi Select with Count Badge
+
+Show the number of selected items as a badge instead of individual tags. Selected options display a ✓ checkmark in the dropdown and can be toggled on/off by clicking.
+
+```html
+<div x-data="selectra({
+  mode: 'multi',
+  showSelectedCount: true,
+  placeholder: 'Select countries...',
+  options: [
+    { value: 'us', text: 'United States' },
+    { value: 'ca', text: 'Canada' },
+    { value: 'mx', text: 'Mexico' },
+  ]
+})" x-selectra></div>
+```
+
 #### Native `<select>` Enhancement
 
 Enhance a standard `<select>` element — options are read automatically:
@@ -143,6 +161,7 @@ Enhance a standard `<select>` element — options are read automatically:
 | `selectOnTab` | `boolean` | `true` | Tab selects active option |
 | `closeAfterSelect` | `boolean` | `false` | Close dropdown after selection |
 | `hideSelected` | `boolean \| null` | auto | Hide selected from dropdown |
+| `showSelectedCount` | `boolean` | `false` | Show count badge instead of tags in multi-select |
 | `delimiter` | `string` | `','` | Value separator |
 | `splitOn` | `RegExp \| string` | `null` | Regex for splitting pasted values |
 | `diacritics` | `boolean` | `true` | International character support |
@@ -151,6 +170,7 @@ Enhance a standard `<select>` element — options are read automatically:
 | `load` | `function \| null` | `null` | Remote data loader |
 | `loadThrottle` | `number` | `300` | Load debounce delay (ms) |
 | `plugins` | `Array` | `[]` | Plugins to activate |
+| `dropdownPlaceholder` | `string` | `''` | Pre-search placeholder
 
 ### Custom Rendering
 

package/dist/selectra.css

@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.selectra-control{position:relative;width:100%;font-size:.875rem;line-height:1.25rem}.selectra-control.is-disabled{pointer-events:none;opacity:.5}.selectra-input{position:relative;display:flex;min-height:38px;width:100%;cursor:text;flex-wrap:wrap;align-items:center;gap:.25rem;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.selectra-input:hover{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.selectra-input.is-focused{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(59 130 246 / .2)}.selectra-input.is-invalid{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(239 68 68 / .2)}.selectra-input.is-locked{cursor:default;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.selectra-input.is-single{cursor:pointer;padding-right:2rem}.selectra-input.is-single.has-items .selectra-search{position:absolute;top:0;right:0;bottom:0;left:0;padding:.375rem .75rem}.selectra-search{margin:0;min-width:60px;flex:1 1 0%;border-style:none;background-color:transparent;padding:0;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-search::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search{outline:2px solid transparent;outline-offset:2px}.selectra-search:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.selectra-input.is-single .selectra-search{width:100%;min-width:0px}.selectra-item{display:inline-flex}.selectra-item{align-items:center;gap:.25rem;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));padding:.125rem .5rem;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1));animation:fade-in .15s ease-out}.selectra-item .selectra-item-remove{margin-right:-.125rem;margin-left:.125rem;display:inline-flex;height:1rem;width:1rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.selectra-item .selectra-item-remove:hover{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.selectra-single-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-arrow{pointer-events:none;position:absolute;right:.625rem;top:50%;height:1rem;width:1rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.selectra-arrow.is-open{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.selectra-dropdown{position:absolute;z-index:50;margin-top:.25rem;width:100%}.selectra-dropdown{overflow:hidden;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:dropdown-in .15s ease-out}.selectra-dropdown.is-top{bottom:100%;top:auto;margin-bottom:.25rem;margin-top:0}.selectra-dropdown-content{max-height:15rem;overflow-y:auto;overscroll-behavior:contain;padding-top:.25rem;padding-bottom:.25rem}.selectra-option{cursor:pointer;padding:.5rem .75rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.selectra-option:hover,.selectra-option.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-active .highlight{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-disabled{cursor:not-allowed;opacity:.5}.selectra-option.is-selected{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.selectra-option.is-selected.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option-create{cursor:pointer;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.selectra-option-create:hover,.selectra-option-create.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-no-results{padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-spinner{height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.selectra-spinner{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-border-opacity: 1;border-top-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.selectra-optgroup-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.selectra-input.is-single .selectra-clear-button{right:2rem}.selectra-max-badge{margin-left:.25rem;white-space:nowrap;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.highlight{font-weight:600;color:inherit}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-16{margin-top:4rem}.mt-4{margin-top:1rem}.block{display:block}.inline-flex{display:inline-flex}.hidden{display:none}.min-h-screen{min-height:100vh}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.-translate-y-1{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.opacity-0{opacity:0}.opacity-100{opacity:1}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.selectra-dropdown-content::-webkit-scrollbar{width:6px}.selectra-dropdown-content::-webkit-scrollbar-track{background:transparent}.selectra-dropdown-content::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.selectra-dropdown-content::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.selectra-control{position:relative;width:100%;font-size:.875rem;line-height:1.25rem}.selectra-control.is-disabled{pointer-events:none;opacity:.5}.selectra-input{position:relative;display:flex;min-height:38px;width:100%;cursor:text;flex-wrap:wrap;align-items:center;gap:.25rem;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.selectra-input:hover{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.selectra-input.is-focused{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(59 130 246 / .2)}.selectra-input.is-invalid{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(239 68 68 / .2)}.selectra-input.is-locked{cursor:default;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.selectra-input.is-single{cursor:pointer;padding-right:2rem}.selectra-input.is-single.has-items .selectra-search{position:absolute;top:0;right:0;bottom:0;left:0;padding:.375rem .75rem}.selectra-search{margin:0;min-width:60px;flex:1 1 0%;border-style:none;background-color:transparent;padding:0;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-search::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search{outline:2px solid transparent;outline-offset:2px}.selectra-search:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.selectra-input.is-single .selectra-search{width:100%;min-width:0px}.selectra-item{display:inline-flex}.selectra-item{align-items:center;gap:.25rem;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));padding:.125rem .5rem;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1));animation:fade-in .15s ease-out}.selectra-item .selectra-item-remove{margin-right:-.125rem;margin-left:.125rem;display:inline-flex;height:1rem;width:1rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.selectra-item .selectra-item-remove:hover{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.selectra-single-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-arrow{pointer-events:none;position:absolute;right:.625rem;top:50%;height:1rem;width:1rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.selectra-arrow.is-open{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.selectra-dropdown{position:absolute;z-index:50;margin-top:.25rem;width:100%}.selectra-dropdown{overflow:hidden;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:dropdown-in .15s ease-out}.selectra-dropdown.is-top{bottom:100%;top:auto;margin-bottom:.25rem;margin-top:0}.selectra-dropdown-content{max-height:15rem;overflow-y:auto;overscroll-behavior:contain;padding-top:.25rem;padding-bottom:.25rem}.selectra-option:hover,.selectra-option.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-active .highlight{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option.is-disabled{cursor:not-allowed;opacity:.5}.selectra-option.is-selected{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.selectra-option.is-selected.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option-create{cursor:pointer;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.selectra-option-create:hover,.selectra-option-create.is-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-no-results{padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-spinner{height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.selectra-spinner{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-border-opacity: 1;border-top-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.selectra-optgroup-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.selectra-input.is-single .selectra-clear-button{right:2rem}.selectra-max-badge{margin-left:.25rem;white-space:nowrap;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-selected-count{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));padding:.125rem .5rem;font-size:.75rem;line-height:1rem;font-weight:700;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selectra-input.has-items .selectra-selected-count{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.selectra-search-with-count{min-width:40px;flex:1 1 0%;font-weight:500;text-transform:capitalize;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.selectra-search-with-count::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-search-with-count::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.selectra-input.has-items .selectra-search-with-count::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(59 130 246 / var(--tw-placeholder-opacity, 1))}.selectra-input.has-items .selectra-search-with-count::placeholder{--tw-placeholder-opacity: 1;color:rgb(59 130 246 / var(--tw-placeholder-opacity, 1))}.selectra-option-tick{margin-right:.375rem;display:inline-flex;height:1rem;width:1rem;flex-shrink:0;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.selectra-option.is-active .selectra-option-tick{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selectra-option{display:flex;cursor:pointer;align-items:center;padding:.5rem .75rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:75ms}.highlight{font-weight:600;color:inherit}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-16{margin-top:4rem}.mt-4{margin-top:1rem}.block{display:block}.inline-flex{display:inline-flex}.hidden{display:none}.min-h-screen{min-height:100vh}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}.-translate-y-1{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.opacity-0{opacity:0}.opacity-100{opacity:1}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.selectra-dropdown-content::-webkit-scrollbar{width:6px}.selectra-dropdown-content::-webkit-scrollbar-track{background:transparent}.selectra-dropdown-content::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.selectra-dropdown-content::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}

package/dist/selectra.es.js

@@ -1,4 +1,4 @@
-/*! Selectra v1.0.3 | Apache-2.0 License */
+/*! Selectra v1.0.7 | Apache-2.0 License */
 const DIACRITICS = {
   a: "[aḀḁĂăÂâǍǎȺⱥȦȧẠạÄäÀàÁáĀāÃãÅåąĄÃąĄ]",
   b: "[b␢βΒB฿𐌁ᛒ]",
@@ -330,10 +330,12 @@ const DEFAULTS = {
   loadThrottle: 300,
   loadingClass: "loading",
   placeholder: "",
+  dropdownPlaceholder: "",
   mode: null,
   // 'single' | 'multi' — auto-detected
   search: true,
   showArrow: true,
+  showSelectedCount: false,
   valueField: "value",
   labelField: "text",
   disabledField: "disabled",
@@ -353,6 +355,7 @@ const DEFAULTS = {
     optionCreate: null,
     optgroupHeader: null,
     noResults: null,
+    dropdownPlaceholder: null,
     loading: null
   },
   // Callbacks
@@ -448,6 +451,10 @@ function createSelectizeComponent(userConfig = {}) {
       if (this.items.length > 0 && this.isSingle) return "";
       return this._config.placeholder || "";
     },
+    get selectedCountText() {
+      const count = this.items.length;
+      return count;
+    },
     get currentValueText() {
       if (!this.isSingle || !this.items.length) return "";
       const opt = this.options[hashKey(this.items[0])];
@@ -460,14 +467,19 @@ function createSelectizeComponent(userConfig = {}) {
       this._sourceEl = this.$el.querySelector('select, input[type="text"], input[type="hidden"]');
       if (this._sourceEl && isSelectElement(this._sourceEl)) {
         const parsed = readSelectOptions(this._sourceEl);
+        const placeholderOpt = parsed.options.find((o) => o.value === "");
+        if (placeholderOpt && !this._config.placeholder) {
+          this._config.placeholder = placeholderOpt.text;
+        }
+        const realSelected = parsed.selectedValues.filter((v) => v !== "");
         const configOptions = this._config.options || [];
         const allOptions = [...parsed.options, ...configOptions];
         this._registerOptions(allOptions);
         for (const og of parsed.optgroups) {
           this.optgroups[og.value] = og;
         }
-        if (parsed.selectedValues.length) {
-          this.items = [...parsed.selectedValues];
+        if (realSelected.length) {
+          this.items = [...realSelected];
         }
         if (!userConfig.mode) {
           this._config.mode = this._sourceEl.multiple ? "multi" : "single";
@@ -497,7 +509,10 @@ function createSelectizeComponent(userConfig = {}) {
         this._config.maxItems = 1;
       }
       if (this._config.hideSelected === null) {
-        this._config.hideSelected = this._config.mode === "multi";
+        this._config.hideSelected = this._config.mode === "multi" && !this._config.showSelectedCount;
+      }
+      if (this._config.showSelectedCount) {
+        this._config.hideSelected = false;
       }
       this._sifter = new Sifter(this.options, { diacritics: this._config.diacritics });
       this._initPlugins();
@@ -910,6 +925,17 @@ function createSelectizeComponent(userConfig = {}) {
       if (!option) return;
       if (option[this._config.disabledField]) return;
       const value = option[this._config.valueField];
+      if (value === "") {
+        this.clear();
+        this.close();
+        this.isFocused = false;
+        if (this.$refs.searchInput) this.$refs.searchInput.blur();
+        return;
+      }
+      if (this._config.showSelectedCount && this.isMultiple && this.isSelected(option)) {
+        this.removeItem(value);
+        return;
+      }
       this.addItem(value);
       this.query = "";
       if (this.isSingle) {
@@ -978,6 +1004,14 @@ function createSelectizeComponent(userConfig = {}) {
       }
       return "No results found";
     },
+    renderDropdownPlaceholder() {
+      var _a;
+      const config = this._config;
+      if ((_a = config.render) == null ? void 0 : _a.dropdownPlaceholder) {
+        return config.render.dropdownPlaceholder({}, escapeHtml);
+      }
+      return escapeHtml(config.dropdownPlaceholder || "");
+    },
     renderLoading() {
       var _a;
       const config = this._config;
@@ -1324,11 +1358,15 @@ const SELECTRA_TEMPLATE = `
 <div class="selectra-control" :class="{'is-disabled': isDisabled}">
   <div @click="focus()" class="selectra-input"
        :class="{'is-focused': isFocused, 'is-invalid': isInvalid, 'is-locked': isLocked, 'is-single': isSingle, 'has-items': items.length > 0}">
+    <span x-show="_config.showSelectedCount && isMultiple"
+          class="selectra-selected-count">
+      <span x-text="selectedCountText"></span>
+    </span>
     <span x-show="isSingle && items.length && !isFocused"
           x-text="currentValueText"
           class="selectra-single-value"></span>
     <template x-for="val in items" :key="val">
-      <span x-show="isMultiple" class="selectra-item">
+      <span x-show="isMultiple && !_config.showSelectedCount" class="selectra-item">
         <span x-html="options[val] ? renderItem(options[val]) : val"></span>
         <span @click.stop="removeItem(val)" class="selectra-item-remove">&times;</span>
       </span>
@@ -1342,6 +1380,7 @@ const SELECTRA_TEMPLATE = `
            @paste="onPaste($event)"
            :placeholder="placeholderText"
            x-show="(isSingle || !isFull) && (isMultiple || isFocused || !items.length)"
+           :class="{'selectra-search-with-count': _config.showSelectedCount && isMultiple}"
            class="selectra-search">
     <span x-show="isFull && isMultiple" class="selectra-max-badge">Max reached</span>
     <div x-show="isLoading && !isOpen" class="selectra-spinner"></div>
@@ -1366,9 +1405,10 @@ const SELECTRA_TEMPLATE = `
             <div @click="selectOption(option)"
                  @mouseenter="activeIndex = group.offset + idx"
                  :data-active="activeIndex === group.offset + idx"
-                 :class="{'is-active': activeIndex === group.offset + idx}"
-                 class="selectra-option"
-                 x-html="renderOption(option)">
+                 :class="{'is-active': activeIndex === group.offset + idx, 'is-selected': isSelected(option)}"
+                 class="selectra-option">
+              <span x-show="_config.showSelectedCount && isMultiple && isSelected(option)" class="selectra-option-tick">&#10003;</span>
+              <span x-html="renderOption(option)"></span>
             </div>
           </template>
         </div>
@@ -1381,10 +1421,14 @@ const SELECTRA_TEMPLATE = `
            class="selectra-option-create"
            x-html="renderOptionCreate()">
       </div>
-      <div x-show="filteredOptions.length === 0 && !isLoading && !canCreate"
+      <div x-show="filteredOptions.length === 0 && !isLoading && !canCreate && query.length > 0"
            class="selectra-no-results"
            x-html="renderNoResults()">
       </div>
+      <div x-show="filteredOptions.length === 0 && !isLoading && !canCreate && query.length === 0 && _config.dropdownPlaceholder"
+           class="selectra-no-results"
+           x-html="renderDropdownPlaceholder()">
+      </div>
       <div x-show="isLoading" class="selectra-loading">
         <div class="selectra-spinner"></div>
         <span x-html="renderLoading()"></span>
@@ -1404,7 +1448,7 @@ function SelectraPlugin(Alpine) {
     }
   });
 }
-SelectraPlugin.version = "1.0.3";
+SelectraPlugin.version = "1.0.7";
 SelectraPlugin.template = SELECTRA_TEMPLATE;
 export {
   DEFAULTS,