svelte-multiselect 8.0.0 → 8.0.1

package/MultiSelect.svelte

@@ -465,154 +465,17 @@ function on_click_outside(event) {
   {/if}
 </div>
 
-<style>:where(div.multiselect) {
-  position: relative;
-  align-items: center;
-  display: flex;
-  cursor: text;
-  border: var(--sms-border, 1pt solid lightgray);
-  border-radius: var(--sms-border-radius, 3pt);
-  background: var(--sms-bg);
-  max-width: var(--sms-max-width);
-  padding: var(--sms-padding, 0 3pt);
-  color: var(--sms-text-color);
-  font-size: var(--sms-font-size, inherit);
-  min-height: var(--sms-min-height, 19pt);
-  margin: var(--sms-margin);
-}
-:where(div.multiselect).open {
-  /* increase z-index when open to ensure the dropdown of one <MultiSelect />
-  displays above that of another slightly below it on the page */
-  z-index: var(--sms-open-z-index, 4);
-}
-:where(div.multiselect):focus-within {
-  border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
-}
-:where(div.multiselect).disabled {
-  background: var(--sms-disabled-bg, lightgray);
-  cursor: not-allowed;
-}
-:where(div.multiselect) > ul.selected {
-  display: flex;
-  flex: 1;
-  padding: 0;
-  margin: 0;
-  flex-wrap: wrap;
-}
-:where(div.multiselect) > ul.selected > li {
-  align-items: center;
-  border-radius: 3pt;
-  display: flex;
-  margin: 2pt;
-  line-height: normal;
-  transition: 0.3s;
-  white-space: nowrap;
-  background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15));
-  padding: var(--sms-selected-li-padding, 1pt 5pt);
-  color: var(--sms-selected-text-color, var(--sms-text-color));
-}
-:where(div.multiselect) button {
-  border-radius: 50%;
-  display: flex;
-  transition: 0.2s;
-  color: inherit;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  padding: 0;
-  margin: 0 0 0 3pt; /* CSS reset */
-}
-:where(div.multiselect) button.remove-all {
-  margin: 0 3pt;
-}
-:where(div.multiselect) ul.selected > li button:hover,
-:where(div.multiselect) button.remove-all:hover,
-:where(div.multiselect) button:focus {
-  color: var(--sms-remove-btn-hover-color, lightskyblue);
-  background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
-}
-:where(div.multiselect) input {
-  margin: auto 0; /* CSS reset */
-  padding: 0; /* CSS reset */
-}
-:where(div.multiselect) > ul.selected > li > input {
-  border: none;
-  outline: none;
-  background: none;
-  flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
-  min-width: 2em;
-  /* ensure input uses text color and not --sms-selected-text-color */
-  color: var(--sms-text-color);
-  font-size: inherit;
-  cursor: inherit; /* needed for disabled state */
-  border-radius: 0; /* reset ul.selected > li */
-}
-:where(div.multiselect) > ul.selected > li > input::placeholder {
-  padding-left: 5pt;
-  color: var(--sms-placeholder-color);
-  opacity: var(--sms-placeholder-opacity);
-}
-:where(div.multiselect) > input.form-control {
-  width: 2em;
-  position: absolute;
-  background: transparent;
-  border: none;
-  outline: none;
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-}
-:where(div.multiselect) > ul.options {
-  list-style: none;
-  padding: 4pt 0;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  position: absolute;
-  border-radius: 1ex;
-  overflow: auto;
-  background: var(--sms-options-bg, white);
-  max-height: var(--sms-options-max-height, 50vh);
-  overscroll-behavior: var(--sms-options-overscroll, none);
-  box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
-  transition: all 0.2s;
-}
-:where(div.multiselect) > ul.options.hidden {
-  visibility: hidden;
-  opacity: 0;
-  transform: translateY(50px);
-}
-:where(div.multiselect) > ul.options > li {
-  padding: 3pt 2ex;
-  cursor: pointer;
-  scroll-margin: var(--sms-options-scroll-margin, 100px);
-}
-:where(div.multiselect) > ul.options span {
-  padding: 3pt 2ex;
-}
-:where(div.multiselect) > ul.options > li.selected {
-  background: var(--sms-li-selected-bg);
-  color: var(--sms-li-selected-color);
-}
-:where(div.multiselect) > ul.options > li.active {
-  background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
-}
-:where(div.multiselect) > ul.options > li.disabled {
-  cursor: not-allowed;
-  background: var(--sms-li-disabled-bg, #f5f5f6);
-  color: var(--sms-li-disabled-text, #b8b8b8);
-}
-
-@supports not selector(:where(div.multiselect)) {
-  div.multiselect {
+<style>
+  :where(div.multiselect) {
     position: relative;
     align-items: center;
     display: flex;
     cursor: text;
+    box-sizing: border-box;
     border: var(--sms-border, 1pt solid lightgray);
     border-radius: var(--sms-border-radius, 3pt);
     background: var(--sms-bg);
+    width: var(--sms-width);
     max-width: var(--sms-max-width);
     padding: var(--sms-padding, 0 3pt);
     color: var(--sms-text-color);
@@ -620,26 +483,27 @@ function on_click_outside(event) {
     min-height: var(--sms-min-height, 19pt);
     margin: var(--sms-margin);
   }
-  div.multiselect.open {
+  :where(div.multiselect.open) {
     /* increase z-index when open to ensure the dropdown of one <MultiSelect />
     displays above that of another slightly below it on the page */
     z-index: var(--sms-open-z-index, 4);
   }
-  div.multiselect:focus-within {
+  :where(div.multiselect:focus-within) {
     border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
   }
-  div.multiselect.disabled {
+  :where(div.multiselect.disabled) {
     background: var(--sms-disabled-bg, lightgray);
     cursor: not-allowed;
   }
-  div.multiselect > ul.selected {
+
+  :where(div.multiselect > ul.selected) {
     display: flex;
     flex: 1;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
   }
-  div.multiselect > ul.selected > li {
+  :where(div.multiselect > ul.selected > li) {
     align-items: center;
     border-radius: 3pt;
     display: flex;
@@ -651,7 +515,7 @@ function on_click_outside(event) {
     padding: var(--sms-selected-li-padding, 1pt 5pt);
     color: var(--sms-selected-text-color, var(--sms-text-color));
   }
-  div.multiselect button {
+  :where(div.multiselect button) {
     border-radius: 50%;
     display: flex;
     transition: 0.2s;
@@ -663,20 +527,19 @@ function on_click_outside(event) {
     padding: 0;
     margin: 0 0 0 3pt; /* CSS reset */
   }
-  div.multiselect button.remove-all {
+  :where(div.multiselect button.remove-all) {
     margin: 0 3pt;
   }
-  div.multiselect ul.selected > li button:hover,
-div.multiselect button.remove-all:hover,
-div.multiselect button:focus {
+  :where(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
     color: var(--sms-remove-btn-hover-color, lightskyblue);
     background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
   }
-  div.multiselect input {
+
+  :where(div.multiselect input) {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  div.multiselect > ul.selected > li > input {
+  :where(div.multiselect > ul.selected > li > input) {
     border: none;
     outline: none;
     background: none;
@@ -688,12 +551,12 @@ div.multiselect button:focus {
     cursor: inherit; /* needed for disabled state */
     border-radius: 0; /* reset ul.selected > li */
   }
-  div.multiselect > ul.selected > li > input::placeholder {
+  :where(div.multiselect > ul.selected > li > input::placeholder) {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);
   }
-  div.multiselect > input.form-control {
+  :where(div.multiselect > input.form-control) {
     width: 2em;
     position: absolute;
     background: transparent;
@@ -703,7 +566,8 @@ div.multiselect button:focus {
     opacity: 0;
     pointer-events: none;
   }
-  div.multiselect > ul.options {
+
+  :where(div.multiselect > ul.options) {
     list-style: none;
     padding: 4pt 0;
     top: 100%;
@@ -718,29 +582,30 @@ div.multiselect button:focus {
     box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
     transition: all 0.2s;
   }
-  div.multiselect > ul.options.hidden {
+  :where(div.multiselect > ul.options.hidden) {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
   }
-  div.multiselect > ul.options > li {
+  :where(div.multiselect > ul.options > li) {
     padding: 3pt 2ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
   }
-  div.multiselect > ul.options span {
+  /* for noOptionsMsg */
+  :where(div.multiselect > ul.options span) {
     padding: 3pt 2ex;
   }
-  div.multiselect > ul.options > li.selected {
+  :where(div.multiselect > ul.options > li.selected) {
     background: var(--sms-li-selected-bg);
     color: var(--sms-li-selected-color);
   }
-  div.multiselect > ul.options > li.active {
+  :where(div.multiselect > ul.options > li.active) {
     background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
   }
-  div.multiselect > ul.options > li.disabled {
+  :where(div.multiselect > ul.options > li.disabled) {
     cursor: not-allowed;
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
   }
-}</style>
+</style>

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
@@ -28,7 +28,6 @@
     "prettier-plugin-svelte": "^2.8.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "sass": "^1.55.0",
     "svelte": "^3.52.0",
     "svelte-check": "^2.9.2",
     "svelte-github-corner": "^0.1.0",

package/readme.md

@@ -49,7 +49,7 @@
 
 ```sh
 npm install -D svelte-multiselect
-pnpm install -D svelte-multiselect
+pnpm add -D svelte-multiselect
 yarn add -D svelte-multiselect
 ```
 
@@ -73,11 +73,7 @@ Favorite Frontend Frameworks?
 
 ## Props
 
-Full list of props/bindable variables for this component. In the type hints below, `Option` is:
-
-```ts
-import type { Option } from 'svelte-multiselect'
-```
+Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`.
 
 1. ```ts
    activeIndex: number | null = null
@@ -468,6 +464,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-bg)`
   - `color: var(--sms-text-color)`
   - `min-height: var(--sms-min-height, 19pt)`
+  - `width: var(--sms-width)`
   - `max-width: var(--sms-max-width)`
   - `margin: var(--sms-margin)`
   - `font-size: var(--sms-font-size, inherit)`