update deps

.prettierrc.yml

@@ -1,6 +1,5 @@
 semi: false
 singleQuote: true
-svelteBracketNewLine: false
 overrides:
   - files: '*.svelte'
     options:

package.json

@@ -23,25 +23,25 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.21",
-    "@sveltejs/kit": "^1.0.0-next.187",
-    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^5.1.0",
-    "eslint": "^8.0.1",
+    "@sveltejs/kit": "^1.0.0-next.201",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "hastscript": "^7.0.2",
     "mdsvex": "^0.9.8",
-    "prettier": "^2.4.1",
-    "prettier-plugin-svelte": "^2.4.0",
+    "prettier": "^2.5.0",
+    "prettier-plugin-svelte": "^2.5.0",
     "rehype-autolink-headings": "^6.1.0",
     "rehype-slug": "^5.0.0",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.7",
+    "svelte": "^3.44.2",
+    "svelte-check": "^2.2.10",
     "svelte-preprocess": "^4.9.8",
-    "svelte-toc": "^0.1.9",
-    "svelte2tsx": "^0.4.7",
+    "svelte-toc": "^0.1.10",
+    "svelte2tsx": "^0.4.10",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.4",
-    "vite": "^2.6.10"
+    "typescript": "^4.5.2",
+    "vite": "^2.6.14"
   },
   "keywords": [
     "svelte",

readme.md

@@ -20,7 +20,7 @@
 
 <!-- remove above in docs -->
 
-Keyboard-friendly, zero-dependency multi-select Svelte component.
+**Keyboard-friendly, zero-dependency multi-select Svelte component.**
 
 ## Key Features
 
@@ -113,17 +113,6 @@ Full list of props/bindable variables for this component:
 />
 ```
 
-## Want to contribute?
-
-To submit a PR, clone the repo, install dependencies and start the dev server to try out your changes first.
-
-```sh
-git clone https://github.com/janosh/svelte-multiselect
-cd svelte-multiselect
-yarn
-yarn dev
-```
-
 ## Styling
 
 There are 3 ways to style this component.
@@ -180,14 +169,14 @@ This simplified version of the DOM structure of this component shows where these
 
 ### Granular control through global CSS
 
-You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors.
+You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.tokens` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
 
 ```css
 :global(.multiselect) {
   /* top-level wrapper div */
 }
 :global(.multiselect ul.tokens > li) {
-  /* the blue tags representing selected options with remove buttons inside the input */
+  /* selected options */
 }
 :global(.multiselect ul.tokens > li button),
 :global(.multiselect button.remove-all) {
@@ -197,7 +186,7 @@ You can alternatively style every part of this component with more fine-grained
   /* dropdown options */
 }
 :global(.multiselect ul.options li) {
-  /* dropdown options */
+  /* dropdown list of available options */
 }
 :global(.multiselect ul.options li.selected) {
   /* selected options in the dropdown list */
@@ -210,13 +199,24 @@ You can alternatively style every part of this component with more fine-grained
   /* probably not necessary to style this state in most cases */
 }
 :global(.multiselect ul.options li.active) {
-  /* active means element was navigated to with up/down arrow keys */
+  /* active means item was navigated to with up/down arrow keys */
   /* ready to be selected by pressing enter */
 }
 :global(.multiselect ul.options li.selected.active) {
-  /* both active and already selected, pressing enter now will deselect the element again */
+  /* both active and already selected, pressing enter now will deselect the item */
 }
 :global(.multiselect ul.options li.disabled) {
-  /* this option is one included in disabledOptions (see props above) */
+  /* options included in disabledOptions (see props above) */
 }
 ```
+
+## Want to contribute?
+
+To submit a PR, clone the repo, install dependencies and start the dev server to try out your changes.
+
+```sh
+git clone https://github.com/janosh/svelte-multiselect
+cd svelte-multiselect
+yarn
+yarn dev
+```

src/components/GitHubCorner.svelte

@@ -26,9 +26,10 @@
     position: fixed;
     top: 0;
     right: 0;
-    width: var(--ghc-size, 50pt);
+    width: var(--ghc-size, calc(1em + 1vw));
     fill: var(--ghc-bg, black);
     color: var(--ghc-color, white);
+    z-index: 1;
   }
   a:hover .octo-arm {
     animation: octocat-wave 560ms ease-in-out;

src/lib/MultiSelect.svelte

@@ -2,9 +2,7 @@
   import { createEventDispatcher } from 'svelte'
   import { fly } from 'svelte/transition'
 
-  import CrossIcon from './icons/Cross.svelte'
-  import ExpandIcon from './icons/ChevronExpand.svelte'
-  import ReadOnlyIcon from './icons/ReadOnly.svelte'
+  import { CrossIcon, ExpandIcon, ReadOnlyIcon } from './icons'
 
   export let selected: string[] | string
   export let maxSelect: number | null = null // null means any number of options are selectable

src/lib/icons/index.ts

@@ -0,0 +1,3 @@
+export { default as CrossIcon } from './Cross.svelte'
+export { default as ExpandIcon } from './ChevronExpand.svelte'
+export { default as ReadOnlyIcon } from './ReadOnly.svelte'

src/routes/index.svelte

@@ -1,8 +1,8 @@
 <script>
-  import Example from '../components/Example.svelte'
   import Toc from 'svelte-toc'
-  import Docs from '../docs.svx'
+  import Example from '../components/Example.svelte'
   import GitHubCorner from '../components/GitHubCorner.svelte'
+  import Docs from '../docs.svx'
 </script>
 
 <Toc headingSelector="main :where(h2, h3, h4)" />

static/global.css

@@ -2,6 +2,11 @@
   --night: #10002c;
   --blue: #0461cc;
 }
+html {
+  /* smoothly scroll heading links into view, unfortunately also applies to jumping
+  between matches when searching site https://stackoverflow.com/a/51588820 */
+  scroll-behavior: smooth;
+}
 body {
   background: var(--night);
   padding: calc(1ex + 2vw);
@@ -31,6 +36,7 @@ a:hover {
   color: orange;
 }
 code {
+  overflow-wrap: break-word;
   padding: 0 2pt;
   border-radius: 2pt;
   font-size: 1.2em;
@@ -62,12 +68,12 @@ tbody tr:nth-child(odd) {
   background: black;
 }
 
-/* style links added by rehype-autolink-headings, see svelte.config.js */
-:where(h2, h3, h4, h5, h6) a {
+/* style heading anchors added by rehype-autolink-headings, see svelte.config.js */
+:where(h2, h3, h4, h5, h6) a[aria-hidden='true'] {
   transition: 0.3s;
   margin-left: 4pt;
   opacity: 0;
 }
-:where(h2, h3, h4, h5, h6):hover a {
+:where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
   opacity: 1;
 }

static/prism-vsc-dark-plus.css

@@ -60,7 +60,7 @@ pre[class*='language-'] {
 :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
   color: white;
-  background: #011627;
+  background: black;
 }
 
 :not(pre) > code[class*='language-'] {