feat(typescript)!: support svelte 4 (#1773)

Closes #1753 

The minimum Svelte version required for TypeScript users is now 3.55.

types/UIShell/Content.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ContentProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["main"]> {
+type RestProps = SvelteHTMLElements["main"];
+
+export interface ContentProps extends RestProps {
   /**
    * Specify the id for the main element
    * @default "main-content"
@@ -14,6 +15,6 @@ export interface ContentProps
 
 export default class Content extends SvelteComponentTyped<
   ContentProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/UIShell/Header.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface HeaderProps extends RestProps {
   /**
    * Set to `false` to hide the side nav by default
    * @default true
@@ -70,14 +71,14 @@ export interface HeaderProps
    * Defaults to `<Menu size={20} />`
    * @default undefined
    */
-  iconMenu?: typeof import("svelte").SvelteComponent;
+  iconMenu?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the icon to render for the opened state.
    * Defaults to `<Close size={20} />`
    * @default undefined
    */
-  iconClose?: typeof import("svelte").SvelteComponent;
+  iconClose?: typeof import("svelte").SvelteComponent<any>;
 
   [key: `data-${string}`]: any;
 }

types/UIShell/HeaderAction.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderActionProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface HeaderActionProps extends RestProps {
   /**
    * Set to `true` to open the panel
    * @default false
@@ -14,14 +15,14 @@ export interface HeaderActionProps
    * Defaults to `<Switcher size={20} />`
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the icon to render when the action panel is open.
    * Defaults to `<Close size={20} />`
    * @default undefined
    */
-  closeIcon?: typeof import("svelte").SvelteComponent;
+  closeIcon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the text

types/UIShell/HeaderActionLink.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderActionLinkProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface HeaderActionLinkProps extends RestProps {
   /**
    * Set to `true` to use the active state
    * @default false
@@ -19,7 +20,7 @@ export interface HeaderActionLinkProps
    * Specify the icon to render
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Obtain a reference to the HTML anchor element
@@ -32,6 +33,6 @@ export interface HeaderActionLinkProps
 
 export default class HeaderActionLink extends SvelteComponentTyped<
   HeaderActionLinkProps,
-  {},
+  Record<string, any>,
   { icon: {} }
 > {}

types/UIShell/HeaderGlobalAction.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderGlobalActionProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface HeaderGlobalActionProps extends RestProps {
   /**
    * Set to `true` to use the active variant
    * @default false
@@ -13,7 +14,7 @@ export interface HeaderGlobalActionProps
    * Specify the icon to render
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Obtain a reference to the HTML button element

types/UIShell/HeaderNav.svelte.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderNavProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
+type RestProps = SvelteHTMLElements["nav"];
+
+export interface HeaderNavProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 
 export default class HeaderNav extends SvelteComponentTyped<
   HeaderNavProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/UIShell/HeaderNavItem.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderNavItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface HeaderNavItemProps extends RestProps {
   /**
    * Specify the `href` attribute
    * @default undefined

types/UIShell/HeaderNavMenu.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderNavMenuProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface HeaderNavMenuProps extends RestProps {
   /**
    * Set to `true` to toggle the expanded state
    * @default false

types/UIShell/HeaderPanelDivider.svelte.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface HeaderPanelDividerProps {}
 
 export default class HeaderPanelDivider extends SvelteComponentTyped<
   HeaderPanelDividerProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/UIShell/HeaderPanelLink.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderPanelLinkProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface HeaderPanelLinkProps extends RestProps {
   /**
    * Specify the `href` attribute
    * @default undefined

types/UIShell/HeaderPanelLinks.svelte.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface HeaderPanelLinksProps {}
 
 export default class HeaderPanelLinks extends SvelteComponentTyped<
   HeaderPanelLinksProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/UIShell/HeaderSearch.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export interface HeaderSearchResult {
   href: string;
@@ -7,8 +7,9 @@ export interface HeaderSearchResult {
   description?: string;
 }
 
-export interface HeaderSearchProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface HeaderSearchProps extends RestProps {
   /**
    * Specify the search input value
    * @default ""

types/UIShell/HeaderUtilities.svelte.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface HeaderUtilitiesProps {}
 
 export default class HeaderUtilities extends SvelteComponentTyped<
   HeaderUtilitiesProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/UIShell/SideNav.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SideNavProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
+type RestProps = SvelteHTMLElements["nav"];
+
+export interface SideNavProps extends RestProps {
   /**
    * Set to `true` to use the fixed variant
    * @default false

types/UIShell/SideNavDivider.svelte.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SideNavDividerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+type RestProps = SvelteHTMLElements["li"];
+
+export interface SideNavDividerProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 
 export default class SideNavDivider extends SvelteComponentTyped<
   SideNavDividerProps,
-  {},
+  Record<string, any>,
   {}
 > {}

types/UIShell/SideNavItems.svelte.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface SideNavItemsProps {}
 
 export default class SideNavItems extends SvelteComponentTyped<
   SideNavItemsProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/UIShell/SideNavLink.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SideNavLinkProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface SideNavLinkProps extends RestProps {
   /**
    * Set to `true` to select the current link
    * @default false
@@ -25,7 +26,7 @@ export interface SideNavLinkProps
    * Specify the icon to render
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Obtain a reference to the HTML anchor element

types/UIShell/SideNavMenu.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SideNavMenuProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface SideNavMenuProps extends RestProps {
   /**
    * Set to `true` to toggle the expanded state
    * @default false
@@ -19,7 +20,7 @@ export interface SideNavMenuProps
    * Specify the icon to render
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Obtain a reference to the HTML button element

types/UIShell/SideNavMenuItem.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SideNavMenuItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface SideNavMenuItemProps extends RestProps {
   /**
    * Set to `true` to select the item
    * @default false

types/UIShell/SkipToContent.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SkipToContentProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+type RestProps = SvelteHTMLElements["a"];
+
+export interface SkipToContentProps extends RestProps {
   /**
    * Specify the `href` attribute
    * @default "#main-content"