svelte-multiselect 3.2.0 → 3.2.1

package/MultiSelect.svelte

@@ -227,22 +227,22 @@ display above those of another following shortly after it -->
         {/if}
       </li>
     {/each}
-    <input
-      bind:this={input}
-      autocomplete="off"
-      bind:value={searchText}
-      on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
-      on:keydown={handleKeydown}
-      on:focus={() => setOptionsVisible(true)}
-      {id}
-      {name}
-      placeholder={selectedLabels.length ? `` : placeholder}
-    />
   </ul>
+  <input
+    bind:this={input}
+    autocomplete="off"
+    bind:value={searchText}
+    on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
+    on:keydown={handleKeydown}
+    on:focus={() => setOptionsVisible(true)}
+    {id}
+    {name}
+    placeholder={selectedLabels.length ? `` : placeholder}
+  />
   {#if readonly}
     <ReadOnlyIcon height="14pt" />
   {:else if selected.length > 0}
-    {#if maxSelect !== null && maxSelect > 1}
+    {#if maxSelect !== null && maxSelectMsg !== null}
       <Wiggle bind:wiggle angle={20}>
         <span style="padding: 0 3pt;">{maxSelectMsg(selected.length, maxSelect)}</span>
       </Wiggle>
@@ -314,6 +314,12 @@ display above those of another following shortly after it -->
     background: var(--sms-readonly-bg, lightgray);
   }
 
+  :where(ul.selected) {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    flex-wrap: wrap;
+  }
   :where(ul.selected > li) {
     background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue));
     align-items: center;
@@ -347,7 +353,7 @@ display above those of another following shortly after it -->
     transform: scale(1.04);
   }
 
-  :where(div.multiselect input) {
+  :where(div.multiselect > input) {
     border: none;
     outline: none;
     background: none;
@@ -359,15 +365,6 @@ display above those of another following shortly after it -->
     font-size: calc(16px + 0.1vw);
   }
 
-  :where(ul.selected) {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    flex-wrap: wrap;
-    flex: 1;
-    overscroll-behavior: none;
-  }
-
   :where(ul.options) {
     list-style: none;
     max-height: 50vh;
@@ -378,6 +375,7 @@ display above those of another following shortly after it -->
     border-radius: 1ex;
     overflow: auto;
     background: var(--sms-options-bg, white);
+    overscroll-behavior: var(--sms-options-overscroll, none);
   }
   :where(ul.options.hidden) {
     visibility: hidden;

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "type": "module",
   "svelte": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",

package/readme.md

@@ -203,7 +203,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
 - `div.multiselect.open`:
   - `z-index: var(--sms-open-z-index, 4)`: Useful to ensure the dropdown list of options is displayed on top of other page elements of increased `z-index`.
-- `div.multiselect input`
+- `div.multiselect > input`
   - `color: var(--sms-text-color, inherit)`: Input text color.
 - `ul.selected > li`:
   - `background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue))`: Background of selected options.
@@ -211,6 +211,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `color: var(--sms-remove-x-hover-focus-color, lightskyblue)`: Color of the cross-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
 - `ul.options`
   - `background: var(--sms-options-bg, white)`: Background of options list.
+  - `background: var(--sms-options-overscroll, none)`: Whether scroll events bubble to parent elements when reaching the top/bottom of the options dropdown. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
 - `ul.options > li.selected`
   - `background: var(--sms-li-selected-bg, inherit)`: Background of selected list items in options pane.
   - `color: var(--sms-li-selected-color, inherit)`: Text color of selected list items in options pane.