From f05373ebdc97ba3d9c11059758166fd82bb9d9c8 Mon Sep 17 00:00:00 2001
From: Hunter Perrin <hperrin@gmail.com>
Date: Fri, 10 Sep 2021 09:47:35 -0700
Subject: [PATCH] feat: migrate floating label, line ripple, and notched
 outline to typescript

---
 packages/banner/ambient.d.ts                  |   4 +-
 packages/chips/ambient.d.ts                   |   4 +-
 packages/data-table/Body.svelte               |   4 +-
 packages/data-table/Row.svelte                |   4 +-
 packages/floating-label/FloatingLabel.svelte  |  56 +-
 .../floating-label/FloatingLabel.types.ts     |   5 +
 packages/floating-label/bare.js               |   2 -
 packages/floating-label/bare.ts               |   2 +
 .../floating-label/{index.js => index.ts}     |   1 +
 packages/floating-label/package-lock.json     | 503 +---------------
 packages/floating-label/package.json          |   7 +-
 packages/floating-label/styled.js             |   3 -
 packages/floating-label/styled.ts             |   3 +
 packages/floating-label/tsconfig.json         |  10 +
 packages/form-field/ambient.d.ts              |   4 +-
 packages/icon-button/IconButton.svelte        |   2 +-
 packages/line-ripple/LineRipple.svelte        |  23 +-
 packages/line-ripple/bare.js                  |   2 -
 packages/line-ripple/bare.ts                  |   2 +
 packages/line-ripple/{index.js => index.ts}   |   0
 packages/line-ripple/package-lock.json        | 441 +-------------
 packages/line-ripple/package.json             |   7 +-
 packages/line-ripple/styled.js                |   3 -
 packages/line-ripple/styled.ts                |   3 +
 packages/line-ripple/tsconfig.json            |  10 +
 packages/menu-surface/MenuSurface.svelte      |   2 +-
 packages/menu/Menu.svelte                     |   2 +-
 .../notched-outline/NotchedOutline.svelte     |  34 +-
 packages/notched-outline/ambient.d.ts         |  10 +
 packages/notched-outline/bare.js              |   2 -
 packages/notched-outline/bare.ts              |   2 +
 .../notched-outline/{index.js => index.ts}    |   0
 packages/notched-outline/package-lock.json    | 553 +-----------------
 packages/notched-outline/package.json         |  10 +-
 packages/notched-outline/styled.js            |   3 -
 packages/notched-outline/styled.ts            |   3 +
 packages/notched-outline/tsconfig.json        |  10 +
 packages/segmented-button/Segment.svelte      |   4 +-
 .../segmented-button/SegmentedButton.svelte   |   5 +-
 packages/top-app-bar/TopAppBar.svelte         |   2 +-
 40 files changed, 190 insertions(+), 1557 deletions(-)
 create mode 100644 packages/floating-label/FloatingLabel.types.ts
 delete mode 100644 packages/floating-label/bare.js
 create mode 100644 packages/floating-label/bare.ts
 rename packages/floating-label/{index.js => index.ts} (68%)
 delete mode 100644 packages/floating-label/styled.js
 create mode 100644 packages/floating-label/styled.ts
 create mode 100644 packages/floating-label/tsconfig.json
 delete mode 100644 packages/line-ripple/bare.js
 create mode 100644 packages/line-ripple/bare.ts
 rename packages/line-ripple/{index.js => index.ts} (100%)
 delete mode 100644 packages/line-ripple/styled.js
 create mode 100644 packages/line-ripple/styled.ts
 create mode 100644 packages/line-ripple/tsconfig.json
 create mode 100644 packages/notched-outline/ambient.d.ts
 delete mode 100644 packages/notched-outline/bare.js
 create mode 100644 packages/notched-outline/bare.ts
 rename packages/notched-outline/{index.js => index.ts} (100%)
 delete mode 100644 packages/notched-outline/styled.js
 create mode 100644 packages/notched-outline/styled.ts
 create mode 100644 packages/notched-outline/tsconfig.json

diff --git a/packages/banner/ambient.d.ts b/packages/banner/ambient.d.ts
index 0ed591db6..242f144ff 100644
--- a/packages/banner/ambient.d.ts
+++ b/packages/banner/ambient.d.ts
@@ -3,6 +3,8 @@ declare namespace svelte.JSX {
     ['onSMUIBannerButton:primaryActionClick']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
-    ['onSMUIBannerButton:secondaryActionClick']?: any;
+    ['onSMUIBannerButton:secondaryActionClick']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
   }
 }
diff --git a/packages/chips/ambient.d.ts b/packages/chips/ambient.d.ts
index 9bf758660..fbbf0d639 100644
--- a/packages/chips/ambient.d.ts
+++ b/packages/chips/ambient.d.ts
@@ -3,7 +3,9 @@ declare namespace svelte.JSX {
     ['onSMUIChipsChip:mount']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
-    ['onSMUIChipsChip:unmount']?: any;
+    ['onSMUIChipsChip:unmount']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
     ['onMDCChip:interaction']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
diff --git a/packages/data-table/Body.svelte b/packages/data-table/Body.svelte
index 0573127cf..55b668087 100644
--- a/packages/data-table/Body.svelte
+++ b/packages/data-table/Body.svelte
@@ -6,8 +6,8 @@
     [className]: true,
     'mdc-data-table__content': true,
   })}
-  on:SMUI:data-table:row:mount={handleRowMount}
-  on:SMUI:data-table:row:unmount={handleRowUnmount}
+  on:SMUIDataTableRow:mount={handleRowMount}
+  on:SMUIDataTableRow:unmount={handleRowUnmount}
   {...$$restProps}><slot /></tbody
 >
 
diff --git a/packages/data-table/Row.svelte b/packages/data-table/Row.svelte
index 523e62b7d..2cab5dd83 100644
--- a/packages/data-table/Row.svelte
+++ b/packages/data-table/Row.svelte
@@ -65,10 +65,10 @@
       addAttr,
     };
 
-    dispatch(getElement(), 'SMUI:data-table:row:mount', accessor);
+    dispatch(getElement(), 'SMUIDataTableRow:mount', accessor);
 
     return () => {
-      dispatch(getElement(), 'SMUI:data-table:row:unmount');
+      dispatch(getElement(), 'SMUIDataTableRow:unmount');
     };
   });
 
diff --git a/packages/floating-label/FloatingLabel.svelte b/packages/floating-label/FloatingLabel.svelte
index c78688d7c..12d44a936 100644
--- a/packages/floating-label/FloatingLabel.svelte
+++ b/packages/floating-label/FloatingLabel.svelte
@@ -32,12 +32,12 @@
       .map(([name, value]) => `${name}: ${value};`)
       .concat([style])
       .join(' ')}
-    for={forId || (inputProps ? inputProps.id : null)}
+    for={forId || (inputProps ? inputProps.id : undefined)}
     {...$$restProps}><slot /></label
   >
 {/if}
 
-<script>
+<script lang="ts">
   import { MDCFloatingLabelFoundation } from '@material/floating-label';
   import { onMount, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
@@ -46,34 +46,38 @@
     classMap,
     useActions,
     dispatch,
+    ActionArray,
   } from '@smui/common/internal';
 
+  import type { SMUIFloatingLabelAccessor } from './FloatingLabel.types';
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let style = '';
-  let forId = null;
+  let forId: string | undefined = undefined;
   export { forId as for };
   export let floatAbove = false;
   export let required = false;
   export let wrapped = false;
 
-  let element;
-  let instance;
-  let internalClasses = {};
-  let internalStyles = {};
-  let inputProps = getContext('SMUI:generic:input:props') || {};
+  let element: HTMLSpanElement | HTMLLabelElement;
+  let instance: MDCFloatingLabelFoundation;
+  let internalClasses: { [k: string]: boolean } = {};
+  let internalStyles: { [k: string]: string } = {};
+  let inputProps =
+    getContext<{ id?: string } | undefined>('SMUI:generic:input:props') ?? {};
 
   let previousFloatAbove = floatAbove;
-  $: if (previousFloatAbove !== floatAbove) {
+  $: if (instance && previousFloatAbove !== floatAbove) {
     previousFloatAbove = floatAbove;
     instance.float(floatAbove);
   }
 
   let previousRequired = required;
-  $: if (previousRequired !== required) {
+  $: if (instance && previousRequired !== required) {
     previousRequired = required;
     instance.setRequired(required);
   }
@@ -84,22 +88,22 @@
       removeClass,
       getWidth: () => {
         const el = getElement();
-        const clone = el.cloneNode(true);
-        el.parentNode.appendChild(clone);
+        const clone = el.cloneNode(true) as typeof el;
+        el.parentNode?.appendChild(clone);
         clone.classList.add('smui-floating-label--remove-transition');
         clone.classList.add('smui-floating-label--force-size');
         clone.classList.remove('mdc-floating-label--float-above');
         const scrollWidth = clone.scrollWidth;
-        el.parentNode.removeChild(clone);
+        el.parentNode?.removeChild(clone);
         return scrollWidth;
       },
       registerInteractionHandler: (evtType, handler) =>
-        getElement().addEventListener(evtType, handler),
+        getElement().addEventListener(evtType, handler as EventListener),
       deregisterInteractionHandler: (evtType, handler) =>
-        getElement().removeEventListener(evtType, handler),
+        getElement().removeEventListener(evtType, handler as EventListener),
     });
 
-    const accessor = {
+    const accessor: SMUIFloatingLabelAccessor = {
       get element() {
         return getElement();
       },
@@ -107,30 +111,30 @@
       removeStyle,
     };
 
-    dispatch(element, 'SMUI:floating-label:mount', accessor);
+    dispatch(element, 'SMUIFloatingLabel:mount', accessor);
 
     instance.init();
 
     return () => {
-      dispatch(element, 'SMUI:floating-label:unmount', accessor);
+      dispatch(element, 'SMUIFloatingLabel:unmount', accessor);
 
       instance.destroy();
     };
   });
 
-  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 addStyle(name, value) {
+  function addStyle(name: string, value: string) {
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
@@ -141,22 +145,22 @@
     }
   }
 
-  function removeStyle(name) {
+  function removeStyle(name: string) {
     if (name in internalStyles) {
       delete internalStyles[name];
       internalStyles = internalStyles;
     }
   }
 
-  export function shake(shouldShake) {
+  export function shake(shouldShake: boolean) {
     instance.shake(shouldShake);
   }
 
-  export function float(shouldFloat) {
+  export function float(shouldFloat: boolean) {
     floatAbove = shouldFloat;
   }
 
-  export function setRequired(isRequired) {
+  export function setRequired(isRequired: boolean) {
     required = isRequired;
   }
 
diff --git a/packages/floating-label/FloatingLabel.types.ts b/packages/floating-label/FloatingLabel.types.ts
new file mode 100644
index 000000000..e5d1d7178
--- /dev/null
+++ b/packages/floating-label/FloatingLabel.types.ts
@@ -0,0 +1,5 @@
+export interface SMUIFloatingLabelAccessor {
+  readonly element: HTMLSpanElement | HTMLLabelElement;
+  addStyle(name: string, value: string): void;
+  removeStyle(name: string): void;
+}
diff --git a/packages/floating-label/bare.js b/packages/floating-label/bare.js
deleted file mode 100644
index ec16c01c7..000000000
--- a/packages/floating-label/bare.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/floating-label/bare.ts b/packages/floating-label/bare.ts
new file mode 100644
index 000000000..04c9c980e
--- /dev/null
+++ b/packages/floating-label/bare.ts
@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';
diff --git a/packages/floating-label/index.js b/packages/floating-label/index.ts
similarity index 68%
rename from packages/floating-label/index.js
rename to packages/floating-label/index.ts
index 881432a52..40d355fbb 100644
--- a/packages/floating-label/index.js
+++ b/packages/floating-label/index.ts
@@ -1,3 +1,4 @@
 import FloatingLabel from './FloatingLabel.svelte';
+export * from './FloatingLabel.types';
 
 export default FloatingLabel;
diff --git a/packages/floating-label/package-lock.json b/packages/floating-label/package-lock.json
index b95f9fe7d..ef9e434f4 100644
--- a/packages/floating-label/package-lock.json
+++ b/packages/floating-label/package-lock.json
@@ -8,506 +8,23 @@
 			"name": "@smui/floating-label",
 			"version": "4.2.0",
 			"license": "Apache-2.0",
-			"dependencies": {
-				"@material/floating-label": "^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/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/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/floating-label": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-11.0.0.tgz",
-			"integrity": "sha512-sY/ijV06cU0y9+1OB122d6z2AuxLzjQgQGVq9dFLoVRL6jhV2HgOxGF/3cvZsgGGsv2liXagkmQ02jBV1ypvgA==",
-			"dependencies": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/typography": "^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/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/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/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/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/floating-label": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-11.0.0.tgz",
-			"integrity": "sha512-sY/ijV06cU0y9+1OB122d6z2AuxLzjQgQGVq9dFLoVRL6jhV2HgOxGF/3cvZsgGGsv2liXagkmQ02jBV1ypvgA==",
-			"requires": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/typography": "^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/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/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==",
+		"@tsconfig/svelte": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
+			"integrity": "sha512-aqkICXbM1oX5FfgZd2qSSAGdyo/NRxjWCamxoyi3T8iVQnzGge19HhDYzZ6NrVOW7bhcWNSq9XexWFtMzbB24A==",
 			"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=",
-			"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/floating-label/package.json b/packages/floating-label/package.json
index 73750f08a..3ff19de3e 100644
--- a/packages/floating-label/package.json
+++ b/packages/floating-label/package.json
@@ -3,7 +3,7 @@
   "version": "4.2.0",
   "description": "Svelte Material UI - Floating Label",
   "type": "module",
-  "module": "index.js",
+  "module": "index.ts",
   "keywords": [
     "svelte",
     "svelte3",
@@ -34,6 +34,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/floating-label/styled.js b/packages/floating-label/styled.js
deleted file mode 100644
index 24200ec80..000000000
--- a/packages/floating-label/styled.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './_index.scss';
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/floating-label/styled.ts b/packages/floating-label/styled.ts
new file mode 100644
index 000000000..9e01f2abf
--- /dev/null
+++ b/packages/floating-label/styled.ts
@@ -0,0 +1,3 @@
+import './_index.scss';
+export * from './index';
+export { default } from './index';
diff --git a/packages/floating-label/tsconfig.json b/packages/floating-label/tsconfig.json
new file mode 100644
index 000000000..754ec31f7
--- /dev/null
+++ b/packages/floating-label/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/form-field/ambient.d.ts b/packages/form-field/ambient.d.ts
index 7c6f39527..b08ae4423 100644
--- a/packages/form-field/ambient.d.ts
+++ b/packages/form-field/ambient.d.ts
@@ -3,6 +3,8 @@ declare namespace svelte.JSX {
     ['onSMUIGenericInput:mount']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
-    ['onSMUIGenericInput:unmount']?: any;
+    ['onSMUIGenericInput:unmount']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
   }
 }
diff --git a/packages/icon-button/IconButton.svelte b/packages/icon-button/IconButton.svelte
index b8403409b..9dec3916c 100644
--- a/packages/icon-button/IconButton.svelte
+++ b/packages/icon-button/IconButton.svelte
@@ -48,7 +48,7 @@
   on:click={() => instance && instance.handleClick()}
   on:click={() =>
     context === 'top-app-bar:navigation' &&
-    dispatch(element, 'SMUI:top-app-bar:icon-button:nav')}
+    dispatch(element, 'SMUITopAppBarIconButton:nav')}
   {href}
   {...actionProp}
   {...internalAttrs}
diff --git a/packages/line-ripple/LineRipple.svelte b/packages/line-ripple/LineRipple.svelte
index 8684ac5b6..3a1ccd10a 100644
--- a/packages/line-ripple/LineRipple.svelte
+++ b/packages/line-ripple/LineRipple.svelte
@@ -15,7 +15,7 @@
   {...$$restProps}
 />
 
-<script>
+<script lang="ts">
   import { MDCLineRippleFoundation } from '@material/line-ripple';
   import { onMount } from 'svelte';
   import { get_current_component } from 'svelte/internal';
@@ -23,20 +23,21 @@
     forwardEventsBuilder,
     classMap,
     useActions,
+    ActionArray,
   } from '@smui/common/internal';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let style = '';
   export let active = false;
 
-  let element;
-  let instance;
-  let internalClasses = {};
-  let internalStyles = {};
+  let element: HTMLDivElement;
+  let instance: MDCLineRippleFoundation;
+  let internalClasses: { [k: string]: boolean } = {};
+  let internalStyles: { [k: string]: string } = {};
 
   onMount(() => {
     instance = new MDCLineRippleFoundation({
@@ -57,25 +58,25 @@
     };
   });
 
-  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 addStyle(name, value) {
+  function addStyle(name: string, value: string) {
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
@@ -94,7 +95,7 @@
     instance.deactivate();
   }
 
-  export function setRippleCenter(xCoordinate) {
+  export function setRippleCenter(xCoordinate: number) {
     instance.setRippleCenter(xCoordinate);
   }
 
diff --git a/packages/line-ripple/bare.js b/packages/line-ripple/bare.js
deleted file mode 100644
index ec16c01c7..000000000
--- a/packages/line-ripple/bare.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/line-ripple/bare.ts b/packages/line-ripple/bare.ts
new file mode 100644
index 000000000..04c9c980e
--- /dev/null
+++ b/packages/line-ripple/bare.ts
@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';
diff --git a/packages/line-ripple/index.js b/packages/line-ripple/index.ts
similarity index 100%
rename from packages/line-ripple/index.js
rename to packages/line-ripple/index.ts
diff --git a/packages/line-ripple/package-lock.json b/packages/line-ripple/package-lock.json
index fee518d64..43a17864e 100644
--- a/packages/line-ripple/package-lock.json
+++ b/packages/line-ripple/package-lock.json
@@ -8,444 +8,23 @@
 			"name": "@smui/line-ripple",
 			"version": "4.2.0",
 			"license": "Apache-2.0",
-			"dependencies": {
-				"@material/line-ripple": "^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/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/line-ripple": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0.tgz",
-			"integrity": "sha512-ws0p28hfG5P7RuCJZhHBDhPd/pYusszwRWMa1xkATxCjdCDc9hC9RIsUb6eIG9/iwpYnLNRvIoR5iF+01rVhow==",
-			"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/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/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/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/line-ripple": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0.tgz",
-			"integrity": "sha512-ws0p28hfG5P7RuCJZhHBDhPd/pYusszwRWMa1xkATxCjdCDc9hC9RIsUb6eIG9/iwpYnLNRvIoR5iF+01rVhow==",
-			"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/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"
-			}
-		},
-		"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==",
+		"@tsconfig/svelte": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
+			"integrity": "sha512-aqkICXbM1oX5FfgZd2qSSAGdyo/NRxjWCamxoyi3T8iVQnzGge19HhDYzZ6NrVOW7bhcWNSq9XexWFtMzbB24A==",
 			"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=",
-			"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/line-ripple/package.json b/packages/line-ripple/package.json
index ddf63168f..e3f19d14e 100644
--- a/packages/line-ripple/package.json
+++ b/packages/line-ripple/package.json
@@ -3,7 +3,7 @@
   "version": "4.2.0",
   "description": "Svelte Material UI - Line Ripple",
   "type": "module",
-  "module": "index.js",
+  "module": "index.ts",
   "keywords": [
     "svelte",
     "svelte3",
@@ -34,6 +34,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/line-ripple/styled.js b/packages/line-ripple/styled.js
deleted file mode 100644
index 24200ec80..000000000
--- a/packages/line-ripple/styled.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './_index.scss';
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/line-ripple/styled.ts b/packages/line-ripple/styled.ts
new file mode 100644
index 000000000..9e01f2abf
--- /dev/null
+++ b/packages/line-ripple/styled.ts
@@ -0,0 +1,3 @@
+import './_index.scss';
+export * from './index';
+export { default } from './index';
diff --git a/packages/line-ripple/tsconfig.json b/packages/line-ripple/tsconfig.json
new file mode 100644
index 000000000..754ec31f7
--- /dev/null
+++ b/packages/line-ripple/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/menu-surface/MenuSurface.svelte b/packages/menu-surface/MenuSurface.svelte
index 4c7b5a491..d4fbe64f4 100644
--- a/packages/menu-surface/MenuSurface.svelte
+++ b/packages/menu-surface/MenuSurface.svelte
@@ -205,7 +205,7 @@
       closeProgrammatic,
     };
 
-    dispatch(element, 'SMUI:menu-surface:mount', accessor);
+    dispatch(element, 'SMUIMenuSurface:mount', accessor);
 
     instance.init();
 
diff --git a/packages/menu/Menu.svelte b/packages/menu/Menu.svelte
index 79d1683b6..b61381c89 100644
--- a/packages/menu/Menu.svelte
+++ b/packages/menu/Menu.svelte
@@ -6,7 +6,7 @@
     'mdc-menu': true,
   })}
   bind:open
-  on:SMUI:menu-surface:mount={handleMenuSurfaceAccessor}
+  on:SMUIMenuSurface:mount={handleMenuSurfaceAccessor}
   on:SMUIList:mount={handleListAccessor}
   on:MDCMenuSurface:opened={() =>
     instance && instance.handleMenuSurfaceOpened()}
diff --git a/packages/notched-outline/NotchedOutline.svelte b/packages/notched-outline/NotchedOutline.svelte
index b8e53c097..a64d28b08 100644
--- a/packages/notched-outline/NotchedOutline.svelte
+++ b/packages/notched-outline/NotchedOutline.svelte
@@ -9,8 +9,8 @@
     'mdc-notched-outline--no-label': noLabel,
     ...internalClasses,
   })}
-  on:SMUI:floating-label:mount={(event) => (floatingLabel = event.detail)}
-  on:SMUI:floating-label:unmount={() => (floatingLabel = undefined)}
+  on:SMUIFloatingLabel:mount={(event) => (floatingLabel = event.detail)}
+  on:SMUIFloatingLabel:unmount={() => (floatingLabel = undefined)}
   {...$$restProps}
 >
   <div class="mdc-notched-outline__leading" />
@@ -27,7 +27,8 @@
   <div class="mdc-notched-outline__trailing" />
 </div>
 
-<script>
+<script lang="ts">
+  import type { SMUIFloatingLabelAccessor } from '@smui/floating-label';
   import { MDCNotchedOutlineFoundation } from '@material/notched-outline';
   import { onMount } from 'svelte';
   import { get_current_component } from 'svelte/internal';
@@ -35,27 +36,30 @@
     forwardEventsBuilder,
     classMap,
     useActions,
+    ActionArray,
   } from '@smui/common/internal';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let notched = false;
   export let noLabel = false;
 
-  let element;
-  let instance;
-  let floatingLabel;
-  let internalClasses = {};
-  let notchStyles = {};
+  let element: HTMLDivElement;
+  let instance: MDCNotchedOutlineFoundation;
+  let floatingLabel: SMUIFloatingLabelAccessor | undefined;
+  let internalClasses: { [k: string]: boolean } = {};
+  let notchStyles: { [k: string]: string } = {};
 
   $: if (floatingLabel) {
     floatingLabel.addStyle('transition-duration', '0s');
     addClass('mdc-notched-outline--upgraded');
     requestAnimationFrame(() => {
-      floatingLabel.removeStyle('transition-duration');
+      if (floatingLabel) {
+        floatingLabel.removeStyle('transition-duration');
+      }
     });
   } else {
     removeClass('mdc-notched-outline--upgraded');
@@ -76,19 +80,19 @@
     };
   });
 
-  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 addNotchStyle(name, value) {
+  function addNotchStyle(name: string, value: string) {
     if (notchStyles[name] != value) {
       if (value === '' || value == null) {
         delete notchStyles[name];
@@ -99,14 +103,14 @@
     }
   }
 
-  function removeNotchStyle(name) {
+  function removeNotchStyle(name: string) {
     if (name in notchStyles) {
       delete notchStyles[name];
       notchStyles = notchStyles;
     }
   }
 
-  export function notch(notchWidth) {
+  export function notch(notchWidth: number) {
     instance.notch(notchWidth);
   }
 
diff --git a/packages/notched-outline/ambient.d.ts b/packages/notched-outline/ambient.d.ts
new file mode 100644
index 000000000..bda830773
--- /dev/null
+++ b/packages/notched-outline/ambient.d.ts
@@ -0,0 +1,10 @@
+declare namespace svelte.JSX {
+  interface HTMLProps<T extends EventTarget> extends HTMLAttributes<T> {
+    ['onSMUIFloatingLabel:mount']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
+    ['onSMUIFloatingLabel:unmount']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
+  }
+}
diff --git a/packages/notched-outline/bare.js b/packages/notched-outline/bare.js
deleted file mode 100644
index ec16c01c7..000000000
--- a/packages/notched-outline/bare.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/notched-outline/bare.ts b/packages/notched-outline/bare.ts
new file mode 100644
index 000000000..04c9c980e
--- /dev/null
+++ b/packages/notched-outline/bare.ts
@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';
diff --git a/packages/notched-outline/index.js b/packages/notched-outline/index.ts
similarity index 100%
rename from packages/notched-outline/index.js
rename to packages/notched-outline/index.ts
diff --git a/packages/notched-outline/package-lock.json b/packages/notched-outline/package-lock.json
index 88fcb645b..68adce28c 100644
--- a/packages/notched-outline/package-lock.json
+++ b/packages/notched-outline/package-lock.json
@@ -8,556 +8,23 @@
 			"name": "@smui/notched-outline",
 			"version": "4.2.0",
 			"license": "Apache-2.0",
-			"dependencies": {
-				"@material/notched-outline": "^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/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/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/floating-label": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-11.0.0.tgz",
-			"integrity": "sha512-sY/ijV06cU0y9+1OB122d6z2AuxLzjQgQGVq9dFLoVRL6jhV2HgOxGF/3cvZsgGGsv2liXagkmQ02jBV1ypvgA==",
-			"dependencies": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/typography": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"node_modules/@material/notched-outline": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0.tgz",
-			"integrity": "sha512-GwYFIRA6raFljNARmEpIcIjHztjKD8wcDf+6xl1WezsprGd/Qdzq59/VX76y1et8ZkkL0+fE+4dEaVpCHq/e8A==",
-			"dependencies": {
-				"@material/base": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/floating-label": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/shape": "^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/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/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/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/floating-label": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-11.0.0.tgz",
-			"integrity": "sha512-sY/ijV06cU0y9+1OB122d6z2AuxLzjQgQGVq9dFLoVRL6jhV2HgOxGF/3cvZsgGGsv2liXagkmQ02jBV1ypvgA==",
-			"requires": {
-				"@material/animation": "^11.0.0",
-				"@material/base": "^11.0.0",
-				"@material/dom": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/theme": "^11.0.0",
-				"@material/typography": "^11.0.0",
-				"tslib": "^2.1.0"
-			}
-		},
-		"@material/notched-outline": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0.tgz",
-			"integrity": "sha512-GwYFIRA6raFljNARmEpIcIjHztjKD8wcDf+6xl1WezsprGd/Qdzq59/VX76y1et8ZkkL0+fE+4dEaVpCHq/e8A==",
-			"requires": {
-				"@material/base": "^11.0.0",
-				"@material/feature-targeting": "^11.0.0",
-				"@material/floating-label": "^11.0.0",
-				"@material/rtl": "^11.0.0",
-				"@material/shape": "^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/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==",
+		"@tsconfig/svelte": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-2.0.1.tgz",
+			"integrity": "sha512-aqkICXbM1oX5FfgZd2qSSAGdyo/NRxjWCamxoyi3T8iVQnzGge19HhDYzZ6NrVOW7bhcWNSq9XexWFtMzbB24A==",
 			"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=",
-			"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/notched-outline/package.json b/packages/notched-outline/package.json
index 0b6d07bac..4d984e0e8 100644
--- a/packages/notched-outline/package.json
+++ b/packages/notched-outline/package.json
@@ -3,7 +3,7 @@
   "version": "4.2.0",
   "description": "Svelte Material UI - Notched Outline",
   "type": "module",
-  "module": "index.js",
+  "module": "index.ts",
   "keywords": [
     "svelte",
     "svelte3",
@@ -31,9 +31,13 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@material/notched-outline": "^11.0.0",
-    "@smui/common": "^4.2.0"
+    "@smui/common": "^4.2.0",
+    "@smui/floating-label": "^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/notched-outline/styled.js b/packages/notched-outline/styled.js
deleted file mode 100644
index 24200ec80..000000000
--- a/packages/notched-outline/styled.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import './_index.scss';
-export * from './index.js';
-export { default } from './index.js';
diff --git a/packages/notched-outline/styled.ts b/packages/notched-outline/styled.ts
new file mode 100644
index 000000000..9e01f2abf
--- /dev/null
+++ b/packages/notched-outline/styled.ts
@@ -0,0 +1,3 @@
+import './_index.scss';
+export * from './index';
+export { default } from './index';
diff --git a/packages/notched-outline/tsconfig.json b/packages/notched-outline/tsconfig.json
new file mode 100644
index 000000000..754ec31f7
--- /dev/null
+++ b/packages/notched-outline/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/segmented-button/Segment.svelte b/packages/segmented-button/Segment.svelte
index e4a4cc526..cefd7bd32 100644
--- a/packages/segmented-button/Segment.svelte
+++ b/packages/segmented-button/Segment.svelte
@@ -115,12 +115,12 @@
       },
     };
 
-    dispatch(getElement(), 'SMUI:segmented-button:segment:mount', accessor);
+    dispatch(getElement(), 'SMUISegmentedButtonSegment:mount', accessor);
 
     instance.init();
 
     return () => {
-      dispatch(getElement(), 'SMUI:segmented-button:segment:unmount', accessor);
+      dispatch(getElement(), 'SMUISegmentedButtonSegment:unmount', accessor);
 
       instance.destroy();
     };
diff --git a/packages/segmented-button/SegmentedButton.svelte b/packages/segmented-button/SegmentedButton.svelte
index b466debf5..086454eab 100644
--- a/packages/segmented-button/SegmentedButton.svelte
+++ b/packages/segmented-button/SegmentedButton.svelte
@@ -8,9 +8,8 @@
     'mdc-segmented-button--single-select': singleSelect,
   })}
   role={singleSelect ? 'radiogroup' : 'group'}
-  on:SMUI:segmented-button:segment:mount={(event) => handleSegmentMount(event)}
-  on:SMUI:segmented-button:segment:unmount={(event) =>
-    handleSegmentUnmount(event)}
+  on:SMUISegmentedButtonSegment:mount={(event) => handleSegmentMount(event)}
+  on:SMUISegmentedButtonSegment:unmount={(event) => handleSegmentUnmount(event)}
   on:selected={(event) => instance && instance.handleSelected(event.detail)}
   {...$$restProps}
 >
diff --git a/packages/top-app-bar/TopAppBar.svelte b/packages/top-app-bar/TopAppBar.svelte
index c10d41346..542bbbf88 100644
--- a/packages/top-app-bar/TopAppBar.svelte
+++ b/packages/top-app-bar/TopAppBar.svelte
@@ -27,7 +27,7 @@
     .map(([name, value]) => `${name}: ${value};`)
     .concat([style])
     .join(' ')}
-  on:SMUI:top-app-bar:icon-button:nav={() =>
+  on:SMUITopAppBarIconButton:nav={() =>
     instance && instance.handleNavigationClick()}
   {...$$restProps}
 >