From a881c73fc401eefaa36551bec8cb58a997f7b68e Mon Sep 17 00:00:00 2001
From: Hunter Perrin <hperrin@gmail.com>
Date: Sat, 11 Sep 2021 22:08:16 -0700
Subject: [PATCH] feat: migrate dialog to typescript

---
 packages/dialog/{Actions.js => Actions.ts}    |   3 +-
 packages/dialog/{Content.js => Content.ts}    |   3 +-
 packages/dialog/Dialog.svelte                 |  65 +-
 packages/dialog/{Header.js => Header.ts}      |   3 +-
 .../{InitialFocus.js => InitialFocus.ts}      |   2 +-
 packages/dialog/{Title.js => Title.ts}        |   3 +-
 packages/dialog/ambient.d.ts                  |   7 +
 packages/dialog/bare.js                       |   2 -
 packages/dialog/bare.ts                       |   2 +
 packages/dialog/index.js                      |  11 -
 packages/dialog/index.ts                      |  11 +
 packages/dialog/package-lock.json             | 689 +-----------------
 packages/dialog/package.json                  |   7 +-
 packages/dialog/styled.js                     |   3 -
 packages/dialog/styled.ts                     |   3 +
 packages/dialog/tsconfig.json                 |  10 +
 .../routes/demo/dialog/_DefaultFocus.svelte   |   4 +-
 .../site/src/routes/demo/dialog/_Event.svelte |   6 +-
 .../src/routes/demo/dialog/_Fullscreen.svelte |   6 +-
 .../routes/demo/dialog/_LargeScroll.svelte    |   4 +-
 .../site/src/routes/demo/dialog/_List.svelte  |   9 +-
 .../src/routes/demo/dialog/_Mandatory.svelte  |   4 +-
 .../routes/demo/dialog/_ManyActions.svelte    |   4 +-
 .../routes/demo/dialog/_OverFullscreen.svelte |  10 +-
 .../src/routes/demo/dialog/_Selection.svelte  |   6 +-
 .../src/routes/demo/dialog/_Simple.svelte     |   4 +-
 .../src/routes/demo/dialog/_Sliders.svelte    |   4 +-
 .../site/src/routes/demo/dialog/index.svelte  |   2 +-
 28 files changed, 130 insertions(+), 757 deletions(-)
 rename packages/dialog/{Actions.js => Actions.ts} (77%)
 rename packages/dialog/{Content.js => Content.ts} (65%)
 rename packages/dialog/{Header.js => Header.ts} (72%)
 rename packages/dialog/{InitialFocus.js => InitialFocus.ts} (73%)
 rename packages/dialog/{Title.js => Title.ts} (64%)
 create mode 100644 packages/dialog/ambient.d.ts
 delete mode 100644 packages/dialog/bare.js
 create mode 100644 packages/dialog/bare.ts
 delete mode 100644 packages/dialog/index.js
 create mode 100644 packages/dialog/index.ts
 delete mode 100644 packages/dialog/styled.js
 create mode 100644 packages/dialog/styled.ts
 create mode 100644 packages/dialog/tsconfig.json

diff --git a/packages/dialog/Actions.js b/packages/dialog/Actions.ts
similarity index 77%
rename from packages/dialog/Actions.js
rename to packages/dialog/Actions.ts
index ad68ab787..d7b15d6ee 100644
--- a/packages/dialog/Actions.js
+++ b/packages/dialog/Actions.ts
@@ -1,9 +1,10 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-dialog__actions',
-  component: Div,
+  component: Div as typeof SMUIComponent,
   classMap: {
     'smui-dialog__actions--reversed': 'SMUI:dialog:actions:reversed',
   },
diff --git a/packages/dialog/Content.js b/packages/dialog/Content.ts
similarity index 65%
rename from packages/dialog/Content.js
rename to packages/dialog/Content.ts
index 88991efea..78fcf0883 100644
--- a/packages/dialog/Content.js
+++ b/packages/dialog/Content.ts
@@ -1,7 +1,8 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-dialog__content',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });
diff --git a/packages/dialog/Dialog.svelte b/packages/dialog/Dialog.svelte
index 89f53ae86..7897669d4 100644
--- a/packages/dialog/Dialog.svelte
+++ b/packages/dialog/Dialog.svelte
@@ -58,11 +58,12 @@
 
 <slot name="over" />
 
-<script>
+<script lang="ts">
+  import type { AddLayoutListener, RemoveLayoutListener } from '@smui/common';
   import { MDCDialogFoundation, util } from '@material/dialog';
   import { focusTrap as domFocusTrap, ponyfill } from '@material/dom';
   import { onMount, onDestroy, getContext, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
+  import { Writable, writable } from 'svelte/store';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
@@ -71,13 +72,14 @@
     prefixFilter,
     useActions,
     dispatch,
+    ActionArray,
   } from '@smui/common/internal';
   const { FocusTrap } = domFocusTrap;
   const { closest, matches } = ponyfill;
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let open = false;
@@ -89,18 +91,24 @@
   export let container$class = '';
   export let surface$class = '';
 
-  let element;
-  let instance;
-  let internalClasses = {};
-  let focusTrap;
+  let element: HTMLDivElement;
+  let instance: MDCDialogFoundation;
+  let internalClasses: { [k: string]: boolean } = {};
+  let focusTrap: domFocusTrap.FocusTrap;
   let actionButtonsReversed = writable(false);
-  let addLayoutListener = getContext('SMUI:addLayoutListener');
-  let aboveFullscreen = getContext('SMUI:dialog:aboveFullscreen');
+  let aboveFullscreen = getContext<boolean | undefined>(
+    'SMUI:dialog:aboveFullscreen'
+  );
   let aboveFullscreenShown =
-    getContext('SMUI:dialog:aboveFullscreenShown') || writable(false);
-  let removeLayoutListener;
-  let layoutListeners = [];
-  let addLayoutListenerFn = (listener) => {
+    getContext<Writable<boolean> | undefined>(
+      'SMUI:dialog:aboveFullscreenShown'
+    ) ?? writable(false);
+  let addLayoutListener = getContext<AddLayoutListener | undefined>(
+    'SMUI:addLayoutListener'
+  );
+  let removeLayoutListener: RemoveLayoutListener | undefined;
+  let layoutListeners: (() => void)[] = [];
+  let addLayoutListenerFn: AddLayoutListener = (listener) => {
     layoutListeners.push(listener);
 
     return () => {
@@ -163,7 +171,7 @@
 
   onMount(() => {
     focusTrap = new FocusTrap(element, {
-      initialFocusEl: getInitialFocusEl(),
+      initialFocusEl: getInitialFocusEl() ?? undefined,
     });
 
     instance = new MDCDialogFoundation({
@@ -177,12 +185,15 @@
         }
       },
       eventTargetMatches: (target, selector) =>
-        target ? matches(target, selector) : false,
+        target ? matches(target as Element, selector) : false,
       getActionFromEvent: (evt) => {
         if (!evt.target) {
           return '';
         }
-        const element = closest(evt.target, '[data-mdc-dialog-action]');
+        const element = closest(
+          evt.target as Element,
+          '[data-mdc-dialog-action]'
+        );
         return element && element.getAttribute('data-mdc-dialog-action');
       },
       getInitialFocusEl,
@@ -242,38 +253,44 @@
     }
   });
 
-  function hasClass(className) {
+  function hasClass(className: string) {
     return className in internalClasses
       ? internalClasses[className]
       : getElement().classList.contains(className);
   }
 
-  function addClass(className) {
+  function addClass(className: string) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
     }
   }
 
-  function removeClass(className) {
+  function removeClass(className: string) {
     if (!(className in internalClasses) || internalClasses[className]) {
       internalClasses[className] = false;
     }
   }
 
   function getButtonEls() {
-    return [].slice.call(element.querySelectorAll('.mdc-dialog__button'));
+    return [].slice.call(
+      element.querySelectorAll<HTMLButtonElement>('.mdc-dialog__button')
+    ) as HTMLButtonElement[];
   }
 
   function getDefaultButtonEl() {
-    return element.querySelector('[data-mdc-dialog-button-default');
+    return element.querySelector<HTMLButtonElement>(
+      '[data-mdc-dialog-button-default'
+    );
   }
 
   function getContentEl() {
-    return element.querySelector('.mdc-dialog__content');
+    return element.querySelector<HTMLElement>('.mdc-dialog__content');
   }
 
   function getInitialFocusEl() {
-    return element.querySelector('[data-mdc-dialog-initial-focus]');
+    return element.querySelector<HTMLElement>(
+      '[data-mdc-dialog-initial-focus]'
+    );
   }
 
   function handleDialogOpening() {
@@ -299,7 +316,7 @@
     return open;
   }
 
-  export function setOpen(value) {
+  export function setOpen(value: boolean) {
     open = value;
   }
 
diff --git a/packages/dialog/Header.js b/packages/dialog/Header.ts
similarity index 72%
rename from packages/dialog/Header.js
rename to packages/dialog/Header.ts
index 288273748..729b94496 100644
--- a/packages/dialog/Header.js
+++ b/packages/dialog/Header.ts
@@ -1,9 +1,10 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-dialog__header',
-  component: Div,
+  component: Div as typeof SMUIComponent,
   contexts: {
     'SMUI:icon-button:context': 'dialog:header',
   },
diff --git a/packages/dialog/InitialFocus.js b/packages/dialog/InitialFocus.ts
similarity index 73%
rename from packages/dialog/InitialFocus.js
rename to packages/dialog/InitialFocus.ts
index e9e2839b9..f1aeb66f5 100644
--- a/packages/dialog/InitialFocus.js
+++ b/packages/dialog/InitialFocus.ts
@@ -1,4 +1,4 @@
-export default function InitialFocus(node) {
+export default function InitialFocus(node: HTMLElement) {
   node.setAttribute('data-mdc-dialog-initial-focus', '');
 
   return {
diff --git a/packages/dialog/Title.js b/packages/dialog/Title.ts
similarity index 64%
rename from packages/dialog/Title.js
rename to packages/dialog/Title.ts
index 02cfef843..725b37473 100644
--- a/packages/dialog/Title.js
+++ b/packages/dialog/Title.ts
@@ -1,7 +1,8 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import H2 from '@smui/common/H2.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-dialog__title',
-  component: H2,
+  component: H2 as typeof SMUIComponent,
 });
diff --git a/packages/dialog/ambient.d.ts b/packages/dialog/ambient.d.ts
new file mode 100644
index 000000000..415387a77
--- /dev/null
+++ b/packages/dialog/ambient.d.ts
@@ -0,0 +1,7 @@
+declare namespace svelte.JSX {
+  interface HTMLProps<T extends EventTarget> extends HTMLAttributes<T> {
+    ['onMDCDialog:opening']?: (event: CustomEvent<any> & { target: T }) => any;
+    ['onMDCDialog:opened']?: (event: CustomEvent<any> & { target: T }) => any;
+    ['onMDCDialog:closed']?: (event: CustomEvent<any> & { target: T }) => any;
+  }
+}
diff --git a/packages/dialog/bare.js b/packages/dialog/bare.js
deleted file mode 100644
index ec16c01c7..000000000
--- a/packages/dialog/bare.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/dialog/bare.ts b/packages/dialog/bare.ts
new file mode 100644
index 000000000..04c9c980e
--- /dev/null
+++ b/packages/dialog/bare.ts
@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';
diff --git a/packages/dialog/index.js b/packages/dialog/index.js
deleted file mode 100644
index eff47a783..000000000
--- a/packages/dialog/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Dialog from './Dialog.svelte';
-
-import Header from './Header.js';
-import Title from './Title.js';
-import Content from './Content.js';
-import Actions from './Actions.js';
-import InitialFocus from './InitialFocus.js';
-
-export default Dialog;
-
-export { Header, Title, Content, Actions, InitialFocus };
diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts
new file mode 100644
index 000000000..4a4ce0fe4
--- /dev/null
+++ b/packages/dialog/index.ts
@@ -0,0 +1,11 @@
+import Dialog from './Dialog.svelte';
+
+import Header from './Header';
+import Title from './Title';
+import Content from './Content';
+import Actions from './Actions';
+import InitialFocus from './InitialFocus';
+
+export default Dialog;
+
+export { Header, Title, Content, Actions, InitialFocus };
diff --git a/packages/dialog/package-lock.json b/packages/dialog/package-lock.json
index e9949a34d..6a1ba542f 100644
--- a/packages/dialog/package-lock.json
+++ b/packages/dialog/package-lock.json
@@ -8,692 +8,23 @@
 			"name": "@smui/dialog",
 			"version": "4.2.0",
 			"license": "Apache-2.0",
-			"dependencies": {
-				"@material/button": "^11.0.0",
-				"@material/dialog": "^11.0.0",
-				"@material/dom": "^11.0.0"
-			},
 			"devDependencies": {
-				"sass": "^1.32.11"
+				"@tsconfig/svelte": "^2.0.1"
 			}
 		},
-		"node_modules/@material/animation": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/animation/-/animation-11.0.0.tgz",
-			"integrity": "sha512-pAJRl0ySvfOzqyGUme27tPf1LbqrjSTK4g5kngpXOPAIQdYYx89QLAfcqHONSpvXO7/WP+Kc9zJ3WWxbUaG8Wg==",
-			"dependencies": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/base": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/base/-/base-11.0.0.tgz",
-			"integrity": "sha512-GTybYdiWBoEyYQ3he8cEeuXe5mPq2peFX41rBsMrs516TGDxrVJrEAKNedydhtpfRBsZRreTXMLZtbGrZzfIFQ==",
-			"dependencies": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/button": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/button/-/button-11.0.0.tgz",
-			"integrity": "sha512-KqqxEcsj8jBkV1yNEiPoHiB1AJBa/1OGm7H+hF+C3RUTIrRLew8IuRL1ZY38ukdHvhno1/qmVMKOs6ui0mxjlg==",
-			"dependencies": {
-				"@material/density": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/elevation": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/ripple": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/shape": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/touch-target": "^11.0.0",
-				"@material/typography": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/density": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/density/-/density-11.0.0.tgz",
-			"integrity": "sha512-FuSx0UukH7p9cIAxEg78zwL5iYuoa/YovyHuuEEudyhWsRH+u0KBSQlYWr+ykg//qZF6urlDrVmu7WAKi1SiCw==",
-			"dependencies": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/dialog": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-11.0.0.tgz",
-			"integrity": "sha512-d49zJJmUGTcdWVdBNbXSdDk55mbIIvYpg3ENY9fg6ZlesGsDTgdykGgUkXEaqQeT+Qe/8+4vdaPpz8WNd2Qzyw==",
-			"dependencies": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/button": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/elevation": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/icon-button": "^11.0.0",
-				"@material/ripple": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/shape": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/touch-target": "^11.0.0",
-				"@material/typography": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/dom": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/dom/-/dom-11.0.0.tgz",
-			"integrity": "sha512-LZdg6VmYnMXc/Ct/GdQ22o4m3UgjhZYQIrwu9Iebqchx0Vd2OTmcFN5nArHSCSgUEhpjpPlkbZmjOpeOAwiKZg==",
-			"dependencies": {
-				"@material/feature-targeting": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/elevation": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-11.0.0.tgz",
-			"integrity": "sha512-mgrUSBAdXJ1+VS/SWnu/gr9/nq7P1q5X3aDmoom2EPKauEeKhuAHjABI5duxHOrliZM3mK9VLO56D/tszb7spw==",
-			"dependencies": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/feature-targeting": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-11.0.0.tgz",
-			"integrity": "sha512-7/jdaHm7C16Eq02tDQ1iI+giWKgk+QRNWFrmGKzHfXbU604XwY/eSLSiVS8QI01vx9QZ0aO9K84m0yhQQNQQtg==",
-			"dependencies": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/icon-button": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0.tgz",
-			"integrity": "sha512-rlX/RWOD9ZJznva2MDNRnau9/PnqepxKcHTG4YirkgQwe0m6dqdabzXfeTrorRsJNMSicaYlRV1SwGPShZk3CQ==",
-			"dependencies": {
-				"@material/base": "^11.0.0",
-				"@material/density": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/ripple": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/ripple": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-11.0.0.tgz",
-			"integrity": "sha512-672zAsYaL8aS861VgfEPL4sFMkFe0psiSc+4DfUTq7Nanl4e1gcarzzHZAn5IExUNk3/5QybDiXV+dbaL/0NjQ==",
-			"dependencies": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/rtl": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-11.0.0.tgz",
-			"integrity": "sha512-FcS8+N9MhnC0Wdd34O2yCC/5ylIwkfHjV5pbmHyEtb4YXoWngnPIxgpOr5PsUv95WSQBmeqWCRJDwS+sGZHoKQ==",
-			"dependencies": {
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/shape": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/shape/-/shape-11.0.0.tgz",
-			"integrity": "sha512-O9/Dt/9Nbum1IvxRd4u8gCF4ghk9E55UNp2TGe+RN43zpTUbChh2raOFr3sQeRwLIzlb4wstUG9AxmdktrkDUQ==",
-			"dependencies": {
-				"@material/feature-targeting": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/theme": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/theme/-/theme-11.0.0.tgz",
-			"integrity": "sha512-GnQI8sd2wHFD3AvmhpyRaH5o9D5Shobs1xDH4FdRU9+c+FNNqouZMDzyM6UpCX4700DzqvE7l0/1LjzB7ve7Lg==",
-			"dependencies": {
-				"@material/feature-targeting": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/touch-target": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-11.0.0.tgz",
-			"integrity": "sha512-S1XPYj3Bnkw26nFdYRZ0BHcNLfizF8HBeX9+OR7KuJUKaFB6CN01CtyEmDU3XNI0n140KjMtJnsZykWZommolQ==",
-			"dependencies": {
-				"@material/base": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/typography": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/typography/-/typography-11.0.0.tgz",
-			"integrity": "sha512-i9IGO/ZsF+YnqC2+PpJapt/8hSXOKFXaqv6B9uUr+iQ8GD4bEFpxm5kChzH918wJpCHvxbTYbnR6buaF9nkjCQ==",
-			"dependencies": {
-				"@material/feature-targeting": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/anymatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-			"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-			"dev": true,
-			"dependencies": {
-				"normalize-path": "^3.0.0",
-				"picomatch": "^2.0.4"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/binary-extensions": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/braces": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
-			"dependencies": {
-				"fill-range": "^7.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/chokidar": {
-			"version": "3.5.1",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-			"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
-			"dev": true,
-			"dependencies": {
-				"anymatch": "~3.1.1",
-				"braces": "~3.0.2",
-				"glob-parent": "~5.1.0",
-				"is-binary-path": "~2.1.0",
-				"is-glob": "~4.0.1",
-				"normalize-path": "~3.0.0",
-				"readdirp": "~3.5.0"
-			},
-			"engines": {
-				"node": ">= 8.10.0"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.1"
-			}
-		},
-		"node_modules/fill-range": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
-			"dependencies": {
-				"to-regex-range": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/fsevents": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-			"dev": true,
-			"hasInstallScript": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-			}
-		},
-		"node_modules/glob-parent": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
-			"dependencies": {
-				"is-glob": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/is-binary-path": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
-			"dependencies": {
-				"binary-extensions": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/is-extglob": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-			"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/is-glob": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-			"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-			"dev": true,
-			"dependencies": {
-				"is-extglob": "^2.1.1"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/is-number": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.12.0"
-			}
-		},
-		"node_modules/normalize-path": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/picomatch": {
-			"version": "2.2.3",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
-			"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/jonschlinkert"
-			}
-		},
-		"node_modules/readdirp": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-			"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
-			"dev": true,
-			"dependencies": {
-				"picomatch": "^2.2.1"
-			},
-			"engines": {
-				"node": ">=8.10.0"
-			}
-		},
-		"node_modules/sass": {
-			"version": "1.32.11",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.11.tgz",
-			"integrity": "sha512-O9tRcob/fegUVSIV1ihLLZcftIOh0AF1VpKgusUfLqnb2jQ0GLDwI5ivv1FYWivGv8eZ/AwntTyTzjcHu0c/qw==",
-			"dev": true,
-			"dependencies": {
-				"chokidar": ">=3.0.0 <4.0.0"
-			},
-			"bin": {
-				"sass": "sass.js"
-			},
-			"engines": {
-				"node": ">=8.9.0"
-			}
-		},
-		"node_modules/to-regex-range": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
-			"dependencies": {
-				"is-number": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=8.0"
-			}
-		},
-		"node_modules/tslib": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
-			"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+		"node_modules/@tsconfig/svelte": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
+			"integrity": "sha512-aqkICXbM1oX5FfgZd2qSSAGdyo/NRxjWCamxoyi3T8iVQnzGge19HhDYzZ6NrVOW7bhcWNSq9XexWFtMzbB24A==",
+			"dev": true
 		}
 	},
 	"dependencies": {
-		"@material/animation": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/animation/-/animation-11.0.0.tgz",
-			"integrity": "sha512-pAJRl0ySvfOzqyGUme27tPf1LbqrjSTK4g5kngpXOPAIQdYYx89QLAfcqHONSpvXO7/WP+Kc9zJ3WWxbUaG8Wg==",
-			"requires": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/base": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/base/-/base-11.0.0.tgz",
-			"integrity": "sha512-GTybYdiWBoEyYQ3he8cEeuXe5mPq2peFX41rBsMrs516TGDxrVJrEAKNedydhtpfRBsZRreTXMLZtbGrZzfIFQ==",
-			"requires": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/button": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/button/-/button-11.0.0.tgz",
-			"integrity": "sha512-KqqxEcsj8jBkV1yNEiPoHiB1AJBa/1OGm7H+hF+C3RUTIrRLew8IuRL1ZY38ukdHvhno1/qmVMKOs6ui0mxjlg==",
-			"requires": {
-				"@material/density": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/elevation": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/ripple": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/shape": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/touch-target": "^11.0.0",
-				"@material/typography": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/density": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/density/-/density-11.0.0.tgz",
-			"integrity": "sha512-FuSx0UukH7p9cIAxEg78zwL5iYuoa/YovyHuuEEudyhWsRH+u0KBSQlYWr+ykg//qZF6urlDrVmu7WAKi1SiCw==",
-			"requires": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/dialog": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-11.0.0.tgz",
-			"integrity": "sha512-d49zJJmUGTcdWVdBNbXSdDk55mbIIvYpg3ENY9fg6ZlesGsDTgdykGgUkXEaqQeT+Qe/8+4vdaPpz8WNd2Qzyw==",
-			"requires": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/button": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/elevation": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/icon-button": "^11.0.0",
-				"@material/ripple": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/shape": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/touch-target": "^11.0.0",
-				"@material/typography": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/dom": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/dom/-/dom-11.0.0.tgz",
-			"integrity": "sha512-LZdg6VmYnMXc/Ct/GdQ22o4m3UgjhZYQIrwu9Iebqchx0Vd2OTmcFN5nArHSCSgUEhpjpPlkbZmjOpeOAwiKZg==",
-			"requires": {
-				"@material/feature-targeting": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/elevation": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-11.0.0.tgz",
-			"integrity": "sha512-mgrUSBAdXJ1+VS/SWnu/gr9/nq7P1q5X3aDmoom2EPKauEeKhuAHjABI5duxHOrliZM3mK9VLO56D/tszb7spw==",
-			"requires": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/feature-targeting": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-11.0.0.tgz",
-			"integrity": "sha512-7/jdaHm7C16Eq02tDQ1iI+giWKgk+QRNWFrmGKzHfXbU604XwY/eSLSiVS8QI01vx9QZ0aO9K84m0yhQQNQQtg==",
-			"requires": {
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/icon-button": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0.tgz",
-			"integrity": "sha512-rlX/RWOD9ZJznva2MDNRnau9/PnqepxKcHTG4YirkgQwe0m6dqdabzXfeTrorRsJNMSicaYlRV1SwGPShZk3CQ==",
-			"requires": {
-				"@material/base": "^11.0.0",
-				"@material/density": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/ripple": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/ripple": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-11.0.0.tgz",
-			"integrity": "sha512-672zAsYaL8aS861VgfEPL4sFMkFe0psiSc+4DfUTq7Nanl4e1gcarzzHZAn5IExUNk3/5QybDiXV+dbaL/0NjQ==",
-			"requires": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/rtl": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-11.0.0.tgz",
-			"integrity": "sha512-FcS8+N9MhnC0Wdd34O2yCC/5ylIwkfHjV5pbmHyEtb4YXoWngnPIxgpOr5PsUv95WSQBmeqWCRJDwS+sGZHoKQ==",
-			"requires": {
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/shape": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/shape/-/shape-11.0.0.tgz",
-			"integrity": "sha512-O9/Dt/9Nbum1IvxRd4u8gCF4ghk9E55UNp2TGe+RN43zpTUbChh2raOFr3sQeRwLIzlb4wstUG9AxmdktrkDUQ==",
-			"requires": {
-				"@material/feature-targeting": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/theme": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/theme/-/theme-11.0.0.tgz",
-			"integrity": "sha512-GnQI8sd2wHFD3AvmhpyRaH5o9D5Shobs1xDH4FdRU9+c+FNNqouZMDzyM6UpCX4700DzqvE7l0/1LjzB7ve7Lg==",
-			"requires": {
-				"@material/feature-targeting": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/touch-target": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-11.0.0.tgz",
-			"integrity": "sha512-S1XPYj3Bnkw26nFdYRZ0BHcNLfizF8HBeX9+OR7KuJUKaFB6CN01CtyEmDU3XNI0n140KjMtJnsZykWZommolQ==",
-			"requires": {
-				"@material/base": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/typography": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/typography/-/typography-11.0.0.tgz",
-			"integrity": "sha512-i9IGO/ZsF+YnqC2+PpJapt/8hSXOKFXaqv6B9uUr+iQ8GD4bEFpxm5kChzH918wJpCHvxbTYbnR6buaF9nkjCQ==",
-			"requires": {
-				"@material/feature-targeting": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"anymatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-			"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-			"dev": true,
-			"requires": {
-				"normalize-path": "^3.0.0",
-				"picomatch": "^2.0.4"
-			}
-		},
-		"binary-extensions": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true
-		},
-		"braces": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
-			"requires": {
-				"fill-range": "^7.0.1"
-			}
-		},
-		"chokidar": {
-			"version": "3.5.1",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-			"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
-			"dev": true,
-			"requires": {
-				"anymatch": "~3.1.1",
-				"braces": "~3.0.2",
-				"fsevents": "~2.3.1",
-				"glob-parent": "~5.1.0",
-				"is-binary-path": "~2.1.0",
-				"is-glob": "~4.0.1",
-				"normalize-path": "~3.0.0",
-				"readdirp": "~3.5.0"
-			}
-		},
-		"fill-range": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
-			"requires": {
-				"to-regex-range": "^5.0.1"
-			}
-		},
-		"fsevents": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-			"dev": true,
-			"optional": true
-		},
-		"glob-parent": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
-			"requires": {
-				"is-glob": "^4.0.1"
-			}
-		},
-		"is-binary-path": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
-			"requires": {
-				"binary-extensions": "^2.0.0"
-			}
-		},
-		"is-extglob": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-			"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+		"@tsconfig/svelte": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
+			"integrity": "sha512-aqkICXbM1oX5FfgZd2qSSAGdyo/NRxjWCamxoyi3T8iVQnzGge19HhDYzZ6NrVOW7bhcWNSq9XexWFtMzbB24A==",
 			"dev": true
-		},
-		"is-glob": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-			"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-			"dev": true,
-			"requires": {
-				"is-extglob": "^2.1.1"
-			}
-		},
-		"is-number": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true
-		},
-		"normalize-path": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true
-		},
-		"picomatch": {
-			"version": "2.2.3",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
-			"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
-			"dev": true
-		},
-		"readdirp": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-			"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
-			"dev": true,
-			"requires": {
-				"picomatch": "^2.2.1"
-			}
-		},
-		"sass": {
-			"version": "1.32.11",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.11.tgz",
-			"integrity": "sha512-O9tRcob/fegUVSIV1ihLLZcftIOh0AF1VpKgusUfLqnb2jQ0GLDwI5ivv1FYWivGv8eZ/AwntTyTzjcHu0c/qw==",
-			"dev": true,
-			"requires": {
-				"chokidar": ">=3.0.0 <4.0.0"
-			}
-		},
-		"to-regex-range": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
-			"requires": {
-				"is-number": "^7.0.0"
-			}
-		},
-		"tslib": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
-			"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 		}
 	}
 }
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 3222012cd..f0aa5ab82 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -3,7 +3,7 @@
   "version": "4.2.0",
   "description": "Svelte Material UI - Dialog",
   "type": "module",
-  "module": "index.js",
+  "module": "index.ts",
   "keywords": [
     "svelte",
     "svelte3",
@@ -36,6 +36,9 @@
     "@smui/common": "^4.2.0"
   },
   "devDependencies": {
-    "sass": "^1.32.11"
+    "@tsconfig/svelte": "^2.0.1",
+    "sass": "^1.32.11",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.2"
   }
 }
diff --git a/packages/dialog/styled.js b/packages/dialog/styled.js
deleted file mode 100644
index 24200ec80..000000000
--- a/packages/dialog/styled.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './_index.scss';
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/dialog/styled.ts b/packages/dialog/styled.ts
new file mode 100644
index 000000000..9e01f2abf
--- /dev/null
+++ b/packages/dialog/styled.ts
@@ -0,0 +1,3 @@
+import './_index.scss';
+export * from './index';
+export { default } from './index';
diff --git a/packages/dialog/tsconfig.json b/packages/dialog/tsconfig.json
new file mode 100644
index 000000000..754ec31f7
--- /dev/null
+++ b/packages/dialog/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "strict": true
+  },
+  "include": ["**/*"],
+  "exclude": ["node_modules/*", "**/*.spec.ts"]
+}
diff --git a/packages/site/src/routes/demo/dialog/_DefaultFocus.svelte b/packages/site/src/routes/demo/dialog/_DefaultFocus.svelte
index 35429e7e8..8a2d4483e 100644
--- a/packages/site/src/routes/demo/dialog/_DefaultFocus.svelte
+++ b/packages/site/src/routes/demo/dialog/_DefaultFocus.svelte
@@ -27,10 +27,10 @@
 
 <pre class="status">Response: {response}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
 
-  let open;
+  let open = false;
   let response = 'Nothing yet.';
 </script>
diff --git a/packages/site/src/routes/demo/dialog/_Event.svelte b/packages/site/src/routes/demo/dialog/_Event.svelte
index 48b78f456..152fa33f3 100644
--- a/packages/site/src/routes/demo/dialog/_Event.svelte
+++ b/packages/site/src/routes/demo/dialog/_Event.svelte
@@ -24,14 +24,14 @@
 
 <pre class="status">Response: {response}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
 
-  let open;
+  let open = false;
   let response = 'Nothing yet.';
 
-  function closeHandler(e) {
+  function closeHandler(e: CustomEvent<{ action: string }>) {
     switch (e.detail.action) {
       case 'none':
         response = "Ok, well, you're wrong.";
diff --git a/packages/site/src/routes/demo/dialog/_Fullscreen.svelte b/packages/site/src/routes/demo/dialog/_Fullscreen.svelte
index b43a8f7a5..ba4d675aa 100644
--- a/packages/site/src/routes/demo/dialog/_Fullscreen.svelte
+++ b/packages/site/src/routes/demo/dialog/_Fullscreen.svelte
@@ -30,16 +30,16 @@
 
 <pre class="status">Response: {response}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Header, Title, Content, Actions } from '@smui/dialog';
   import IconButton from '@smui/icon-button';
   import Button, { Label } from '@smui/button';
   import LoremIpsum from '$lib/LoremIpsum.svelte';
 
-  let open;
+  let open = false;
   let response = 'Nothing yet.';
 
-  function closeHandler(e) {
+  function closeHandler(e: CustomEvent<{ action: string }>) {
     switch (e.detail.action) {
       case 'close':
         response = 'Closed without response.';
diff --git a/packages/site/src/routes/demo/dialog/_LargeScroll.svelte b/packages/site/src/routes/demo/dialog/_LargeScroll.svelte
index fa714cdbd..02f04fbcd 100644
--- a/packages/site/src/routes/demo/dialog/_LargeScroll.svelte
+++ b/packages/site/src/routes/demo/dialog/_LargeScroll.svelte
@@ -21,10 +21,10 @@
   <Label>Open Dialog</Label>
 </Button>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
   import LoremIpsum from '$lib/LoremIpsum.svelte';
 
-  let open;
+  let open = false;
 </script>
diff --git a/packages/site/src/routes/demo/dialog/_List.svelte b/packages/site/src/routes/demo/dialog/_List.svelte
index 1fbec4a8b..e02fb551d 100644
--- a/packages/site/src/routes/demo/dialog/_List.svelte
+++ b/packages/site/src/routes/demo/dialog/_List.svelte
@@ -23,13 +23,14 @@
 
 <Button on:click={() => (open = true)}><Label>Open Dialog</Label></Button>
 
-<pre class="status">Clicked: {clicked}{clicked === 69 ? ', nice' : ''}</pre>
+<pre
+  class="status">Clicked: {clicked}{clicked === 69 ? ', nice' : clicked === 42 ? ', life, the universe, and everything' : ''}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
   import List, { Item, Text } from '@smui/list';
 
-  let open;
-  let clicked = 'Nothing yet.';
+  let open = false;
+  let clicked: string | number = 'Nothing yet.';
 </script>
diff --git a/packages/site/src/routes/demo/dialog/_Mandatory.svelte b/packages/site/src/routes/demo/dialog/_Mandatory.svelte
index 902e4ff7e..23b6ac4d1 100644
--- a/packages/site/src/routes/demo/dialog/_Mandatory.svelte
+++ b/packages/site/src/routes/demo/dialog/_Mandatory.svelte
@@ -32,10 +32,10 @@
 
 <pre class="status">Result: {response}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
 
-  let open;
+  let open = false;
   let response = 'Nothing yet.';
 </script>
diff --git a/packages/site/src/routes/demo/dialog/_ManyActions.svelte b/packages/site/src/routes/demo/dialog/_ManyActions.svelte
index 9d961fc5b..0036182bb 100644
--- a/packages/site/src/routes/demo/dialog/_ManyActions.svelte
+++ b/packages/site/src/routes/demo/dialog/_ManyActions.svelte
@@ -30,10 +30,10 @@
 
 <pre class="status">Action: {buttoned}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
 
-  let open;
+  let open = false;
   let buttoned = 'Nothing yet.';
 </script>
diff --git a/packages/site/src/routes/demo/dialog/_OverFullscreen.svelte b/packages/site/src/routes/demo/dialog/_OverFullscreen.svelte
index 0b6be0900..6e42fa7cf 100644
--- a/packages/site/src/routes/demo/dialog/_OverFullscreen.svelte
+++ b/packages/site/src/routes/demo/dialog/_OverFullscreen.svelte
@@ -70,7 +70,7 @@
 
 <pre class="status">Response: {response}, Selected: {selected}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, {
     Header,
     Title,
@@ -84,20 +84,20 @@
   import Radio from '@smui/radio';
   import LoremIpsum from '$lib/LoremIpsum.svelte';
 
-  let open;
-  let subOpen;
+  let open = false;
+  let subOpen = false;
   let selection = 'Radishes';
   let selected = 'Nothing yet.';
   let response = 'Nothing yet.';
 
-  function confirmationCloseHandler(e) {
+  function confirmationCloseHandler(e: CustomEvent<{ action: string }>) {
     if (e.detail.action === 'accept') {
       selected = selection;
     }
     selection = 'Radishes';
   }
 
-  function closeHandler(e) {
+  function closeHandler(e: CustomEvent<{ action: string }>) {
     switch (e.detail.action) {
       case 'close':
         response = 'Closed without response.';
diff --git a/packages/site/src/routes/demo/dialog/_Selection.svelte b/packages/site/src/routes/demo/dialog/_Selection.svelte
index ee4c3f63d..df54c839a 100644
--- a/packages/site/src/routes/demo/dialog/_Selection.svelte
+++ b/packages/site/src/routes/demo/dialog/_Selection.svelte
@@ -44,17 +44,17 @@
 
 <pre class="status">Selected: {selected}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
   import List, { Item, Graphic, Text } from '@smui/list';
   import Radio from '@smui/radio';
 
-  let open;
+  let open = false;
   let selection = 'Radishes';
   let selected = 'Nothing yet.';
 
-  function closeHandler(e) {
+  function closeHandler(e: CustomEvent<{ action: string }>) {
     if (e.detail.action === 'accept') {
       selected = selection;
     }
diff --git a/packages/site/src/routes/demo/dialog/_Simple.svelte b/packages/site/src/routes/demo/dialog/_Simple.svelte
index 4b17dda4b..ada14d599 100644
--- a/packages/site/src/routes/demo/dialog/_Simple.svelte
+++ b/packages/site/src/routes/demo/dialog/_Simple.svelte
@@ -22,10 +22,10 @@
 
 <pre class="status">Clicked: {clicked}</pre>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
 
-  let open;
+  let open = false;
   let clicked = 'Nothing yet.';
 </script>
diff --git a/packages/site/src/routes/demo/dialog/_Sliders.svelte b/packages/site/src/routes/demo/dialog/_Sliders.svelte
index d11112c5c..b3799adeb 100644
--- a/packages/site/src/routes/demo/dialog/_Sliders.svelte
+++ b/packages/site/src/routes/demo/dialog/_Sliders.svelte
@@ -39,13 +39,13 @@
   <Label>Open Dialog</Label>
 </Button>
 
-<script>
+<script lang="ts">
   import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
   import Button, { Label } from '@smui/button';
   import Slider from '@smui/slider';
   import FormField from '@smui/form-field';
 
-  let open;
+  let open = false;
   let volumeMedia = 100;
   let volumeRingtone = 80;
   let volumeAlarm = 80;
diff --git a/packages/site/src/routes/demo/dialog/index.svelte b/packages/site/src/routes/demo/dialog/index.svelte
index 67fcfcdf6..ad52d89da 100644
--- a/packages/site/src/routes/demo/dialog/index.svelte
+++ b/packages/site/src/routes/demo/dialog/index.svelte
@@ -63,7 +63,7 @@
   </Demo>
 </section>
 
-<script>
+<script lang="ts">
   import Demo from '$lib/Demo.svelte';
   import Simple from './_Simple.svelte';
   import DefaultFocus from './_DefaultFocus.svelte';