fix: some more type errors

packages/banner/Banner.types.ts

@@ -0,0 +1 @@
+export { CloseReason } from '@material/banner';

packages/banner/index.ts

@@ -1,9 +1,8 @@
 import Banner from './Banner.svelte';
+export * from './Banner.types';
 
-import Label from '@smui/common/CommonLabel.svelte';
-import Icon from '@smui/common/CommonIcon.svelte';
+import { Label, Icon } from '@smui/common';
 
 export default Banner;
 
-export { CloseReason } from '@material/banner';
 export { Label, Icon };

packages/button/index.ts

@@ -3,8 +3,7 @@ import Button from './Button.svelte';
 import Group from './Group.svelte';
 export * from './GroupItem';
 import GroupItem from './GroupItem';
-import Label from '@smui/common/CommonLabel.svelte';
-import Icon from '@smui/common/CommonIcon.svelte';
+import { Label, Icon } from '@smui/common';
 
 export default Button;
 

packages/chips/Text.svelte

@@ -37,9 +37,9 @@
     dispatch,
     ActionArray,
   } from '@smui/common/internal';
-  import Checkmark from './Checkmark.svelte';
 
   import type { SMUIChipsPrimaryActionAccessor } from './Text.types';
+  import Checkmark from './Checkmark.svelte';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 

packages/common/A.svelte

@@ -8,8 +8,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let href = 'javascript:void(0);';
   export let use: ActionArray = [];

packages/common/Aside.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Button.svelte

@@ -7,8 +7,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/CommonIcon.svelte

@@ -20,8 +20,9 @@
 <script lang="ts">
   import { getContext, SvelteComponent } from 'svelte';
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, classMap } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, classMap } from './internal';
   import I from './I.svelte';
   import Svg from './Svg.svelte';
 

packages/common/CommonLabel.svelte

@@ -25,8 +25,9 @@
   import type { SMUIComponent } from './SMUIComponent';
   import { getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, classMap } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, classMap } from './internal';
   import Span from './Span.svelte';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());

packages/common/Div.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Em.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Footer.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/H1.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/H2.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/H3.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/H4.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/H5.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/H6.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Header.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Hr.svelte

@@ -8,8 +8,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/I.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Img.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let alt = '';
   export let use: ActionArray = [];

packages/common/Li.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Main.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Nav.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Section.svelte

@@ -9,8 +9,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Span.svelte

@@ -7,8 +7,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Strong.svelte

@@ -7,8 +7,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/Svg.svelte

@@ -4,14 +4,15 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  let element: HTMLOrSVGElement;
+  let element: SVGSVGElement;
 
   export function getElement() {
     return element;

packages/common/Ul.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { forwardEventsBuilder, useActions } from './internal';
+
   import type { ActionArray } from './useActions';
+  import { forwardEventsBuilder, useActions } from './internal';
 
   export let use: ActionArray = [];
 

packages/common/forwardEventsBuilder.ts

@@ -62,7 +62,7 @@ export function forwardEventsBuilder(component: SvelteComponent) {
     bubble(component, e);
   }
 
-  return (node: Element) => {
+  return (node: HTMLElement | SVGElement) => {
     const destructors: (() => void)[] = [];
     const forwardDestructors: { [k: string]: () => void } = {};
 

packages/common/useActions.ts

@@ -3,28 +3,46 @@ export type SvelteActionReturnType<P> = {
   destroy?: () => void;
 } | void;
 
-export type SvelteActionType<P> = (
+export type SvelteHTMLActionType<P> = (
   node: HTMLElement,
   params?: P
 ) => SvelteActionReturnType<P>;
 
-export type ActionEntry<P extends any = any> =
-  | SvelteActionType<P>
-  | [SvelteActionType<P>, P];
+export type HTMLActionEntry<P extends any = any> =
+  | SvelteHTMLActionType<P>
+  | [SvelteHTMLActionType<P>, P];
 
-export type ActionArray = ActionEntry[];
+export type HTMLActionArray = HTMLActionEntry[];
 
-export function useActions(node: HTMLElement, actions: ActionArray) {
+export type SvelteSVGActionType<P> = (
+  node: SVGElement,
+  params?: P
+) => SvelteActionReturnType<P>;
+
+export type SVGActionEntry<P extends any = any> =
+  | SvelteSVGActionType<P>
+  | [SvelteSVGActionType<P>, P];
+
+export type SVGActionArray = SVGActionEntry[];
+
+export type ActionArray = HTMLActionArray | SVGActionArray;
+
+export function useActions(
+  node: HTMLElement | SVGElement,
+  actions: ActionArray
+) {
   let actionReturns: SvelteActionReturnType<any>[] = [];
 
   if (actions) {
     for (let i = 0; i < actions.length; i++) {
       const actionEntry = actions[i];
       const action = Array.isArray(actionEntry) ? actionEntry[0] : actionEntry;
       if (Array.isArray(actionEntry) && actionEntry.length > 1) {
-        actionReturns.push(action(node, actionEntry[1]));
+        actionReturns.push(
+          action(node as HTMLElement & SVGElement, actionEntry[1])
+        );
       } else {
-        actionReturns.push(action(node));
+        actionReturns.push(action(node as HTMLElement & SVGElement));
       }
     }
   }