feat(types): use the SvelteComponentTyped interface in the TypeScript definitions (#515)

types/UIShell/Content.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface ContentProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["main"]> {
+export interface ContentProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["main"]> {
   /**
    * Specify the id for the main element
    * @default "main-content"
@@ -8,11 +10,8 @@ export interface ContentProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
   id?: string;
 }
 
-export default class Content {
-  $$prop_def: ContentProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class Content extends SvelteComponentTyped<
+  ContentProps,
+  {},
+  { default: {} }
+> {}

types/UIShell/GlobalHeader/Header.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface HeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface HeaderProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Set to `false` to hide the side nav by default
    * @default true
@@ -48,14 +50,8 @@ export interface HeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
   ref?: null | HTMLAnchorElement;
 }
 
-export default class Header {
-  $$prop_def: HeaderProps;
-  $$slot_def: {
-    default: {};
-    platform: {};
-    ["skip-to-content"]: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class Header extends SvelteComponentTyped<
+  HeaderProps,
+  { click: WindowEventMap["click"] },
+  { default: {}; platform: {}; ["skip-to-content"]: {} }
+> {}

types/UIShell/GlobalHeader/HeaderAction.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface HeaderActionSlideTransition {
   delay?: number;
@@ -6,7 +7,8 @@ export interface HeaderActionSlideTransition {
   easing?: (t: number) => number;
 }
 
-export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+export interface HeaderActionProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
    * Set to `true` to open the panel
    * @default false
@@ -38,14 +40,8 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
   transition?: false | HeaderActionSlideTransition;
 }
 
-export default class HeaderAction {
-  $$prop_def: HeaderActionProps;
-  $$slot_def: {
-    default: {};
-    text: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderAction extends SvelteComponentTyped<
+  HeaderActionProps,
+  { click: WindowEventMap["click"]; close: CustomEvent<any> },
+  { default: {}; text: {} }
+> {}

types/UIShell/GlobalHeader/HeaderActionLink.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface HeaderActionLinkProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface HeaderActionLinkProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Set to `true` to use the active state
    * @default false
@@ -24,9 +26,8 @@ export interface HeaderActionLinkProps extends svelte.JSX.HTMLAttributes<HTMLEle
   ref?: null | HTMLAnchorElement;
 }
 
-export default class HeaderActionLink {
-  $$prop_def: HeaderActionLinkProps;
-  $$slot_def: {};
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderActionLink extends SvelteComponentTyped<
+  HeaderActionLinkProps,
+  {},
+  {}
+> {}

types/UIShell/GlobalHeader/HeaderActionSearch.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface HeaderActionSearchProps {
   /**
@@ -8,12 +9,12 @@ export interface HeaderActionSearchProps {
   searchIsActive?: boolean;
 }
 
-export default class HeaderActionSearch {
-  $$prop_def: HeaderActionSearchProps;
-  $$slot_def: {};
-
-  $on(eventname: "inputSearch", cb: (event: CustomEvent<{ action: "search"; textInput: string }>) => void): () => void;
-  $on(eventname: "focusInputSearch", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(eventname: "focusOutInputSearch", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderActionSearch extends SvelteComponentTyped<
+  HeaderActionSearchProps,
+  {
+    inputSearch: CustomEvent<{ action: "search"; textInput: string }>;
+    focusInputSearch: CustomEvent<any>;
+    focusOutInputSearch: CustomEvent<any>;
+  },
+  {}
+> {}

types/UIShell/GlobalHeader/HeaderNav.d.ts

@@ -1,17 +1,16 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface HeaderNavProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
+export interface HeaderNavProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
   /**
    * Specify the ARIA label for the nav
    */
   ariaLabel?: string;
 }
 
-export default class HeaderNav {
-  $$prop_def: HeaderNavProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderNav extends SvelteComponentTyped<
+  HeaderNavProps,
+  {},
+  { default: {} }
+> {}

types/UIShell/GlobalHeader/HeaderNavItem.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface HeaderNavItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface HeaderNavItemProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Specify the `href` attribute
    */
@@ -18,17 +20,17 @@ export interface HeaderNavItemProps extends svelte.JSX.HTMLAttributes<HTMLElemen
   ref?: null | HTMLAnchorElement;
 }
 
-export default class HeaderNavItem {
-  $$prop_def: HeaderNavItemProps;
-  $$slot_def: {};
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void;
-  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
-  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
-  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderNavItem extends SvelteComponentTyped<
+  HeaderNavItemProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keyup: WindowEventMap["keyup"];
+    keydown: WindowEventMap["keydown"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+  },
+  {}
+> {}

types/UIShell/GlobalHeader/HeaderNavMenu.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface HeaderNavMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface HeaderNavMenuProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Set to `true` to toggle the expanded state
    * @default false
@@ -31,19 +33,17 @@ export interface HeaderNavMenuProps extends svelte.JSX.HTMLAttributes<HTMLElemen
   iconDescription?: string;
 }
 
-export default class HeaderNavMenu {
-  $$prop_def: HeaderNavMenuProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
-  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
-  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void;
-  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
-  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderNavMenu extends SvelteComponentTyped<
+  HeaderNavMenuProps,
+  {
+    keydown: WindowEventMap["keydown"];
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+    keyup: WindowEventMap["keyup"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+  },
+  { default: {} }
+> {}

types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface HeaderPanelDividerProps {}
 
-export default class HeaderPanelDivider {
-  $$prop_def: HeaderPanelDividerProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderPanelDivider extends SvelteComponentTyped<
+  HeaderPanelDividerProps,
+  {},
+  { default: {} }
+> {}

types/UIShell/GlobalHeader/HeaderPanelLink.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface HeaderPanelLinkProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface HeaderPanelLinkProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Specify the `href` attribute
    */
@@ -13,12 +15,8 @@ export interface HeaderPanelLinkProps extends svelte.JSX.HTMLAttributes<HTMLElem
   ref?: null | HTMLAnchorElement;
 }
 
-export default class HeaderPanelLink {
-  $$prop_def: HeaderPanelLinkProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderPanelLink extends SvelteComponentTyped<
+  HeaderPanelLinkProps,
+  { click: WindowEventMap["click"] },
+  { default: {} }
+> {}

types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface HeaderPanelLinksProps {}
 
-export default class HeaderPanelLinks {
-  $$prop_def: HeaderPanelLinksProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderPanelLinks extends SvelteComponentTyped<
+  HeaderPanelLinksProps,
+  {},
+  { default: {} }
+> {}

types/UIShell/GlobalHeader/HeaderUtilities.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface HeaderUtilitiesProps {}
 
-export default class HeaderUtilities {
-  $$prop_def: HeaderUtilitiesProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderUtilities extends SvelteComponentTyped<
+  HeaderUtilitiesProps,
+  {},
+  { default: {} }
+> {}

types/UIShell/HeaderGlobalAction.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface HeaderGlobalActionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+export interface HeaderGlobalActionProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
    * Set to `true` to use the active variant
    * @default false
@@ -19,12 +21,8 @@ export interface HeaderGlobalActionProps extends svelte.JSX.HTMLAttributes<HTMLE
   ref?: null | HTMLButtonElement;
 }
 
-export default class HeaderGlobalAction {
-  $$prop_def: HeaderGlobalActionProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderGlobalAction extends SvelteComponentTyped<
+  HeaderGlobalActionProps,
+  { click: WindowEventMap["click"] },
+  { default: {} }
+> {}

types/UIShell/HeaderSearch.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface HeaderSearchResult {
   href: string;
@@ -6,7 +7,8 @@ export interface HeaderSearchResult {
   description?: string;
 }
 
-export interface HeaderSearchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+export interface HeaderSearchProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Specify the search input value
    * @default ""
@@ -38,23 +40,22 @@ export interface HeaderSearchProps extends svelte.JSX.HTMLAttributes<HTMLElement
   selectedResultIndex?: number;
 }
 
-export default class HeaderSearch {
-  $$prop_def: HeaderSearchProps;
-  $$slot_def: {
-    default: { result: HeaderSearchResult; index: number };
-  };
-
-  $on(eventname: "active", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(eventname: "inactive", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(eventname: "clear", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(
-    eventname: "select",
-    cb: (event: CustomEvent<{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }>) => void
-  ): () => void;
-  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
-  $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
-  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
-  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
-  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class HeaderSearch extends SvelteComponentTyped<
+  HeaderSearchProps,
+  {
+    active: CustomEvent<any>;
+    inactive: CustomEvent<any>;
+    clear: CustomEvent<any>;
+    select: CustomEvent<{
+      value: string;
+      selectedResultIndex: number;
+      selectedResult: HeaderSearchResult;
+    }>;
+    change: WindowEventMap["change"];
+    input: WindowEventMap["input"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    keydown: WindowEventMap["keydown"];
+  },
+  { default: { result: HeaderSearchResult; index: number } }
+> {}

types/UIShell/SideNav/SideNav.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface SideNavProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
+export interface SideNavProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
   /**
    * Set to `true` to use the fixed variant
    * @default false
@@ -19,11 +21,8 @@ export interface SideNavProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
   isOpen?: boolean;
 }
 
-export default class SideNav {
-  $$prop_def: SideNavProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class SideNav extends SvelteComponentTyped<
+  SideNavProps,
+  {},
+  { default: {} }
+> {}

types/UIShell/SideNav/SideNavItems.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
 export interface SideNavItemsProps {}
 
-export default class SideNavItems {
-  $$prop_def: SideNavItemsProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class SideNavItems extends SvelteComponentTyped<
+  SideNavItemsProps,
+  {},
+  { default: {} }
+> {}

types/UIShell/SideNav/SideNavLink.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface SideNavLinkProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface SideNavLinkProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Set to `true` to select the current link
    * @default false
@@ -29,10 +31,8 @@ export interface SideNavLinkProps extends svelte.JSX.HTMLAttributes<HTMLElementT
   ref?: null | HTMLAnchorElement;
 }
 
-export default class SideNavLink {
-  $$prop_def: SideNavLinkProps;
-  $$slot_def: {};
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class SideNavLink extends SvelteComponentTyped<
+  SideNavLinkProps,
+  { click: WindowEventMap["click"] },
+  {}
+> {}

types/UIShell/SideNav/SideNavMenu.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface SideNavMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+export interface SideNavMenuProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
    * Set to `true` to toggle the expanded state
    * @default false
@@ -24,12 +26,8 @@ export interface SideNavMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementT
   ref?: null | HTMLButtonElement;
 }
 
-export default class SideNavMenu {
-  $$prop_def: SideNavMenuProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class SideNavMenu extends SvelteComponentTyped<
+  SideNavMenuProps,
+  { click: WindowEventMap["click"] },
+  { default: {} }
+> {}

types/UIShell/SideNav/SideNavMenuItem.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface SideNavMenuItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface SideNavMenuItemProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Set to `true` to select the item
    */
@@ -23,10 +25,8 @@ export interface SideNavMenuItemProps extends svelte.JSX.HTMLAttributes<HTMLElem
   ref?: null | HTMLAnchorElement;
 }
 
-export default class SideNavMenuItem {
-  $$prop_def: SideNavMenuItemProps;
-  $$slot_def: {};
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class SideNavMenuItem extends SvelteComponentTyped<
+  SideNavMenuItemProps,
+  { click: WindowEventMap["click"] },
+  {}
+> {}

types/UIShell/SkipToContent.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
 
-export interface SkipToContentProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+export interface SkipToContentProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Specify the `href` attribute
    * @default "#main-content"
@@ -14,12 +16,8 @@ export interface SkipToContentProps extends svelte.JSX.HTMLAttributes<HTMLElemen
   tabindex?: string;
 }
 
-export default class SkipToContent {
-  $$prop_def: SkipToContentProps;
-  $$slot_def: {
-    default: {};
-  };
-
-  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
-  $on(eventname: string, cb: (event: Event) => void): () => void;
-}
+export default class SkipToContent extends SvelteComponentTyped<
+  SkipToContentProps,
+  { click: WindowEventMap["click"] },
+  { default: {} }
+> {}