fix: many type issues

Fixes #527

Author: hperrin

packages/banner/src/Banner.svelte

@@ -46,7 +46,7 @@
                 'mdc-banner__graphic': true,
               })}
               role="img"
-              alt=""
+              {...altProp}
               {...prefixFilter($$restProps, 'graphic$')}
             >
               <slot name="icon" />
@@ -139,6 +139,10 @@
   let removeLayoutListener: RemoveLayoutListener | undefined;
   let width: number | undefined = undefined;
 
+  // This is for a div that uses the role of "img". TS doesn't like it directly
+  // on the element.
+  const altProp = { alt: '' };
+
   setContext('SMUI:label:context', 'banner');
   setContext('SMUI:icon:context', 'banner');
   setContext('SMUI:button:context', 'banner');

packages/bottom-app-bar/src/AutoAdjust.svelte

@@ -17,15 +17,15 @@
 </svelte:component>
 
 <script lang="ts">
-  import type { ComponentType, SvelteComponent } from 'svelte';
+  import type { SvelteComponent } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import type { ActionArray } from '@smui/common/internal';
   import { forwardEventsBuilder, classMap } from '@smui/common/internal';
   import type { SmuiElementMap, SmuiAttrs, SmuiSvgAttrs } from '@smui/common';
   import { SmuiElement } from '@smui/common';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
-  type Component = $$Generic<ComponentType<SvelteComponent>>;
+  type Component = $$Generic<typeof SvelteComponent>;
   type OwnProps = {
     use?: ActionArray;
     class?: string;

packages/button/src/Button.svelte

@@ -52,7 +52,7 @@
 >
 
 <script lang="ts">
-  import type { ComponentType, SvelteComponent } from 'svelte';
+  import type { SvelteComponent } from 'svelte';
   import { setContext, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import type { ActionArray } from '@smui/common/internal';
@@ -66,7 +66,7 @@
   import { SmuiElement } from '@smui/common';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
-  type Component = $$Generic<ComponentType<SvelteComponent>>;
+  type Component = $$Generic<typeof SvelteComponent>;
   type OwnProps = {
     use?: ActionArray;
     class?: string;

packages/card/src/PrimaryAction.svelte

@@ -21,6 +21,7 @@
     .concat([style])
     .join(' ')}
   {tabindex}
+  role="button"
   {...$$restProps}
 >
   <div class="mdc-card__ripple" />

packages/chips/src/Chip.svelte

@@ -58,7 +58,7 @@
 
 <script lang="ts">
   import { deprecated } from '@material/chips';
-  import type { ComponentType, SvelteComponent } from 'svelte';
+  import type { SvelteComponent } from 'svelte';
   import { onMount, setContext, getContext } from 'svelte';
   import { writable } from 'svelte/store';
   import { get_current_component } from 'svelte/internal';
@@ -79,7 +79,7 @@
   const { MDCChipFoundation } = deprecated;
 
   type TagName = $$Generic<keyof SmuiElementMap>;
-  type Component = $$Generic<ComponentType<SvelteComponent>>;
+  type Component = $$Generic<typeof SvelteComponent>;
   type OwnProps = {
     use?: ActionArray;
     class?: string;

packages/chips/src/Text.svelte

@@ -16,11 +16,10 @@
         [className]: true,
         'mdc-chip__primary-action': true,
       })}
-      role={$filter ? 'checkbox' : $choice ? 'radio' : 'button'}
       {...$filter || $choice
         ? { 'aria-selected': $isSelected ? 'true' : 'false' }
         : {}}
-      {tabindex}
+      {...roleProps}
       {...internalAttrs}
       {...$$restProps}><span class="mdc-chip__text"><slot /></span></span
     >
@@ -73,6 +72,11 @@
     'SMUI:chips:chip:isSelected'
   );
 
+  $: roleProps = {
+    role: $filter ? 'checkbox' : $choice ? 'radio' : 'button',
+    tabindex,
+  };
+
   onMount(() => {
     let accessor: SMUIChipsPrimaryActionAccessor = {
       focus,

packages/common/src/CommonIcon.svelte

@@ -19,7 +19,7 @@
 >
 
 <script lang="ts">
-  import type { ComponentType, SvelteComponent } from 'svelte';
+  import type { SvelteComponent } from 'svelte';
   import { getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
 
@@ -33,7 +33,7 @@
   import { SmuiElement, Svg } from './index.js';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
-  type Component = $$Generic<ComponentType<SvelteComponent>>;
+  type Component = $$Generic<typeof SvelteComponent>;
   type OwnProps = {
     use?: ActionArray;
     class?: string;

packages/common/src/CommonLabel.svelte

@@ -23,7 +23,7 @@
 >
 
 <script lang="ts">
-  import type { ComponentType, SvelteComponent } from 'svelte';
+  import type { SvelteComponent } from 'svelte';
   import { getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
 
@@ -37,7 +37,7 @@
   import { SmuiElement } from './index.js';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
-  type Component = $$Generic<ComponentType<SvelteComponent>>;
+  type Component = $$Generic<typeof SvelteComponent>;
   type OwnProps = {
     use?: ActionArray;
     class?: string;

packages/common/src/classadder/ClassAdder.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <script lang="ts">
-  import type { ComponentType, SvelteComponent } from 'svelte';
+  import type { SvelteComponent } from 'svelte';
   import { onDestroy, getContext, setContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
 
@@ -37,7 +37,7 @@
   import { classMap } from '../internal/classMap.js';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
-  type Component = $$Generic<ComponentType<SvelteComponent>>;
+  type Component = $$Generic<typeof SvelteComponent>;
   type OwnProps = {
     use?: ActionArray;
     class?: string;

packages/common/src/classadder/ClassAdder.types.ts

@@ -4,7 +4,7 @@ import type { SmuiElementMap } from '../smui.types.js';
 
 export type ClassAdderInternals<
   T extends keyof SmuiElementMap = 'div',
-  C extends ComponentType<SvelteComponent> = ComponentType<SvelteComponent>
+  C extends typeof SvelteComponent = ComponentType<SvelteComponent>
 > = {
   component: C;
   tag: T;