feat(typescript)!: support svelte 4

docs/src/COMPONENT_API.json

@@ -501,7 +501,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -2117,7 +2117,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render\nIcon is rendered to the left of the label text",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -4811,7 +4811,7 @@
           "name": "iconMenu",
           "kind": "let",
           "description": "Specify the icon to render for the closed state.\nDefaults to `<Menu size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -4822,7 +4822,7 @@
           "name": "iconClose",
           "kind": "let",
           "description": "Specify the icon to render for the opened state.\nDefaults to `<Close size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -4871,7 +4871,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render when the action panel is closed.\nDefaults to `<Switcher size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -4882,7 +4882,7 @@
           "name": "closeIcon",
           "kind": "let",
           "description": "Specify the icon to render when the action panel is open.\nDefaults to `<Close size={20} />`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -4998,7 +4998,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -5051,7 +5051,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -5755,7 +5755,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render\n`inline` must be `false`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -6574,7 +6574,7 @@
           "name": "primaryButtonIcon",
           "kind": "let",
           "description": "Specify the primary button icon",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -6765,7 +6765,7 @@
           "name": "primaryButtonIcon",
           "kind": "let",
           "description": "Specify the primary button icon",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -7461,7 +7461,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -8029,7 +8029,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -10013,7 +10013,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render.\nDefaults to `<Search />`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -10739,7 +10739,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -10809,7 +10809,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -12287,7 +12287,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -14039,7 +14039,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render for the tooltip button.\nDefault to `<Information />`",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -14321,7 +14321,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"svelte\").SvelteComponent",
+          "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -14585,9 +14585,9 @@
           "ts": "type TreeNodeId = string | number"
         },
         {
-          "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }",
+          "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent<any>; disabled?: boolean; children?: TreeNode[]; }",
           "name": "TreeNode",
-          "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }"
+          "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent<any>; disabled?: boolean; children?: TreeNode[]; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "ul" }

package.json

@@ -29,7 +29,7 @@
     "@tsconfig/svelte": "^4.0.1",
     "autoprefixer": "^10.4.8",
     "carbon-components": "10.57.0",
-    "carbon-icons-svelte": "^11.2.0",
+    "carbon-icons-svelte": "^12.1.0",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
@@ -39,8 +39,8 @@
     "sass": "^1.49.11",
     "standard-version": "^9.5.0",
     "sveld": "^0.18.1",
-    "svelte": "^3.58.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.1.0",
+    "svelte-check": "^3.4.6",
     "typescript": "^4.7.4"
   },
   "standard-version": {

src/Button/Button.svelte

@@ -27,7 +27,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/ComposedModal/ModalFooter.svelte

@@ -8,7 +8,7 @@
 
   /**
    * Specify the primary button icon
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let primaryButtonIcon = undefined;
 

src/ContextMenu/ContextMenuOption.svelte

@@ -14,7 +14,7 @@
   /**
    * Specify the icon to render
    * Icon is rendered to the left of the label text
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/Link/Link.svelte

@@ -19,7 +19,7 @@
   /**
    * Specify the icon to render
    * `inline` must be `false`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/Modal/Modal.svelte

@@ -57,7 +57,7 @@
 
   /**
    * Specify the primary button icon
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let primaryButtonIcon = undefined;
 

src/Notification/NotificationButton.svelte

@@ -7,7 +7,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = Close;
 

src/OverflowMenu/OverflowMenu.svelte

@@ -33,7 +33,7 @@
   /**
    * Specify the icon to render.
    * Defaults to `<OverflowMenuVertical />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = OverflowMenuVertical;
 

src/Search/Search.svelte

@@ -56,7 +56,7 @@
   /**
    * Specify the icon to render.
    * Defaults to `<Search />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = IconSearch;
 

src/Tag/Tag.svelte

@@ -27,7 +27,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/Tooltip/Tooltip.svelte

@@ -31,7 +31,7 @@
   /**
    * Specify the icon to render for the tooltip button.
    * Default to `<Information />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = Information;
 

src/TooltipIcon/TooltipIcon.svelte

@@ -7,7 +7,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/TreeView/TreeView.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * @typedef {string | number} TreeNodeId
-   * @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }} TreeNode
+   * @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent<any>; disabled?: boolean; children?: TreeNode[]; }} TreeNode
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus

src/TreeView/TreeViewNode.svelte

@@ -45,7 +45,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/TreeView/TreeViewNodeList.svelte

@@ -15,7 +15,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/UIShell/HamburgerMenu.svelte

@@ -11,14 +11,14 @@
   /**
    * Specify the icon to render for the closed state.
    * Defaults to `<Menu size={20} />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let iconMenu = Menu;
 
   /**
    * Specify the icon to render for the opened state.
    * Defaults to `<Close size={20} />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let iconClose = Close;
 

src/UIShell/Header.svelte

@@ -50,14 +50,14 @@
   /**
    * Specify the icon to render for the closed state.
    * Defaults to `<Menu size={20} />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let iconMenu = Menu;
 
   /**
    * Specify the icon to render for the opened state.
    * Defaults to `<Close size={20} />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let iconClose = Close;
 

src/UIShell/HeaderAction.svelte

@@ -10,14 +10,14 @@
   /**
    * Specify the icon to render when the action panel is closed.
    * Defaults to `<Switcher size={20} />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = Switcher;
 
   /**
    * Specify the icon to render when the action panel is open.
    * Defaults to `<Close size={20} />`
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let closeIcon = Close;
 

src/UIShell/HeaderActionLink.svelte

@@ -10,7 +10,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
 

src/UIShell/HeaderGlobalAction.svelte

@@ -4,7 +4,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("svelte").SvelteComponent}
+   * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;