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

Closes #1753 

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

types/Accordion/Accordion.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { AccordionSkeletonProps } from "./AccordionSkeleton.svelte";
 

types/Accordion/AccordionItem.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface AccordionItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+type RestProps = SvelteHTMLElements["li"];
+
+export interface AccordionItemProps extends RestProps {
   /**
    * Specify the title of the accordion item heading
    * Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)

types/Accordion/AccordionSkeleton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface AccordionSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+type RestProps = SvelteHTMLElements["ul"];
+
+export interface AccordionSkeletonProps extends RestProps {
   /**
    * Specify the number of accordion items to render
    * @default 4

types/AspectRatio/AspectRatio.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface AspectRatioProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface AspectRatioProps extends RestProps {
   /**
    * Specify the aspect ratio
    * @default "2x1"
@@ -23,6 +24,6 @@ export interface AspectRatioProps
 
 export default class AspectRatio extends SvelteComponentTyped<
   AspectRatioProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton.svelte";
 

types/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface BreadcrumbItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+type RestProps = SvelteHTMLElements["li"];
+
+export interface BreadcrumbItemProps extends RestProps {
   /**
    * Set the `href` to use an anchor link
    * @default undefined

types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts

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

types/Breakpoint/Breakpoint.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";

types/Button/Button.svelte.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
 import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte";
 
-export interface ButtonProps
-  extends ButtonSkeletonProps,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]>,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]>,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["button"] &
+  SvelteHTMLElements["a"] &
+  SvelteHTMLElements["div"];
+
+export interface ButtonProps extends ButtonSkeletonProps, RestProps {
   /**
    * Specify the kind of button
    * @default "primary"
@@ -42,7 +43,7 @@ export interface ButtonProps
    * Specify the icon to render
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the ARIA label for the button icon

types/Button/ButtonSet.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ButtonSetProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ButtonSetProps extends RestProps {
   /**
    * Set to `true` to stack the buttons vertically
    * @default false
@@ -14,6 +15,6 @@ export interface ButtonSetProps
 
 export default class ButtonSet extends SvelteComponentTyped<
   ButtonSetProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/Button/ButtonSkeleton.svelte.d.ts

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

types/Checkbox/Checkbox.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface CheckboxProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface CheckboxProps extends RestProps {
   /**
    * Specify the value of the checkbox
    * @default ""

types/Checkbox/CheckboxSkeleton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface CheckboxSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface CheckboxSkeletonProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/CodeSnippet/CodeSnippet.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface CodeSnippetProps {

types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface CodeSnippetSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface CodeSnippetSkeletonProps extends RestProps {
   /**
    * Set the type of code snippet
    * @default "single"

types/ComboBox/ComboBox.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type ComboBoxItemId = any;
 
@@ -9,8 +9,9 @@ export interface ComboBoxItem {
   disabled?: boolean;
 }
 
-export interface ComboBoxProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface ComboBoxProps extends RestProps {
   /**
    * Set the combobox items
    * @default []

types/ComposedModal/ComposedModal.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ComposedModalProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ComposedModalProps extends RestProps {
   /**
    * Set the size of the composed modal
    * @default undefined

types/ComposedModal/ModalBody.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ModalBodyProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ModalBodyProps extends RestProps {
   /**
    * Set to `true` if the modal contains form elements
    * @default false
@@ -20,6 +21,6 @@ export interface ModalBodyProps
 
 export default class ModalBody extends SvelteComponentTyped<
   ModalBodyProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/ComposedModal/ModalFooter.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ModalFooterProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ModalFooterProps extends RestProps {
   /**
    * Specify the primary button text
    * @default ""
@@ -13,7 +14,7 @@ export interface ModalFooterProps
    * Specify the primary button icon
    * @default undefined
    */
-  primaryButtonIcon?: typeof import("svelte").SvelteComponent;
+  primaryButtonIcon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Set to `true` to disable the primary button

types/ComposedModal/ModalHeader.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ModalHeaderProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ModalHeaderProps extends RestProps {
   /**
    * Specify the modal title
    * @default ""

types/ContentSwitcher/ContentSwitcher.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ContentSwitcherProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ContentSwitcherProps extends RestProps {
   /**
    * Set the selected index of the switch item
    * @default 0

types/ContentSwitcher/Switch.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SwitchProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface SwitchProps extends RestProps {
   /**
    * Specify the switch text
    * Alternatively, use the "text" slot  (e.g., <span slot="text">...</span>)

types/ContextMenu/ContextMenu.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ContextMenuProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+type RestProps = SvelteHTMLElements["ul"];
+
+export interface ContextMenuProps extends RestProps {
   /**
    * Specify an element or list of elements to trigger the context menu.
    * If no element is specified, the context menu applies to the entire window

types/ContextMenu/ContextMenuDivider.svelte.d.ts

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

types/ContextMenu/ContextMenuGroup.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuGroupProps {
@@ -16,6 +15,6 @@ export interface ContextMenuGroupProps {
 
 export default class ContextMenuGroup extends SvelteComponentTyped<
   ContextMenuGroupProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/ContextMenu/ContextMenuOption.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ContextMenuOptionProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+type RestProps = SvelteHTMLElements["li"];
+
+export interface ContextMenuOptionProps extends RestProps {
   /**
    * Specify the kind of option
    * @default "default"
@@ -26,7 +27,7 @@ export interface ContextMenuOptionProps
    * Icon is rendered to the left of the label text
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the label text

types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuRadioGroupProps {
@@ -17,6 +16,6 @@ export interface ContextMenuRadioGroupProps {
 
 export default class ContextMenuRadioGroup extends SvelteComponentTyped<
   ContextMenuRadioGroupProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/CopyButton/CopyButton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface CopyButtonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface CopyButtonProps extends RestProps {
   /**
    * Set the feedback text shown after clicking the button
    * @default "Copied!"

types/DataTable/DataTable.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type DataTableKey = string;
 
@@ -40,8 +40,9 @@ export interface DataTableCell {
   display?: (item: Value) => DataTableValue;
 }
 
-export interface DataTableProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface DataTableProps extends RestProps {
   /**
    * Specify the data table headers
    * @default []

types/DataTable/DataTableSkeleton.svelte.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
 import type { DataTableHeader } from "./DataTable.svelte";
 
-export interface DataTableSkeletonProps
-  extends DataTableHeader,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface DataTableSkeletonProps extends DataTableHeader, RestProps {
   /**
    * Specify the number of columns
    * Superseded by `headers` if `headers` is a non-empty array

types/DataTable/Table.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+type RestProps = SvelteHTMLElements["section"];
+
+export interface TableProps extends RestProps {
   /**
    * Set the size of the table
    * @default undefined
@@ -44,6 +45,6 @@ export interface TableProps
 
 export default class Table extends SvelteComponentTyped<
   TableProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/TableBody.svelte.d.ts

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

types/DataTable/TableCell.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableCellProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {
+type RestProps = SvelteHTMLElements["td"];
+
+export interface TableCellProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/DataTable/TableContainer.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableContainerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface TableContainerProps extends RestProps {
   /**
    * Specify the title of the data table
    * @default ""
@@ -32,6 +33,6 @@ export interface TableContainerProps
 
 export default class TableContainer extends SvelteComponentTyped<
   TableContainerProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/TableHead.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableHeadProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {
+type RestProps = SvelteHTMLElements["thead"];
+
+export interface TableHeadProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/DataTable/TableHeader.svelte.d.ts

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

types/DataTable/TableRow.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface TableRowProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {
+type RestProps = SvelteHTMLElements["tr"];
+
+export interface TableRowProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/DataTable/Toolbar.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ToolbarProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+type RestProps = SvelteHTMLElements["section"];
+
+export interface ToolbarProps extends RestProps {
   /**
    * Specify the toolbar size
    * @default "default"
@@ -14,6 +15,6 @@ export interface ToolbarProps
 
 export default class Toolbar extends SvelteComponentTyped<
   ToolbarProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/ToolbarBatchActions.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ToolbarBatchActionsProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ToolbarBatchActionsProps extends RestProps {
   /**
    * Override the total items selected text
    * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`

types/DataTable/ToolbarContent.svelte.d.ts

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

types/DataTable/ToolbarMenu.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { OverflowMenuProps } from "../OverflowMenu/OverflowMenu.svelte";
 
@@ -6,6 +5,6 @@ export interface ToolbarMenuProps extends OverflowMenuProps {}
 
 export default class ToolbarMenu extends SvelteComponentTyped<
   ToolbarMenuProps,
-  {},
+  Record<string, any>,
   { default: {} }
 > {}

types/DataTable/ToolbarMenuItem.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem.svelte";
 

types/DataTable/ToolbarSearch.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ToolbarSearchProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface ToolbarSearchProps extends RestProps {
   /**
    * Specify the value of the search input
    * @default ""

types/DatePicker/DatePicker.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface DatePickerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface DatePickerProps extends RestProps {
   /**
    * Specify the date picker type
    * @default "simple"

types/DatePicker/DatePickerInput.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface DatePickerInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface DatePickerInputProps extends RestProps {
   /**
    * Set the size of the input
    * @default undefined

types/DatePicker/DatePickerSkeleton.svelte.d.ts

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

types/Dropdown/Dropdown.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type DropdownItemId = any;
 
@@ -11,8 +11,9 @@ export interface DropdownItem {
   disabled?: boolean;
 }
 
-export interface DropdownProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface DropdownProps extends RestProps {
   /**
    * Set the dropdown items
    * @default []

types/Dropdown/DropdownSkeleton.svelte.d.ts

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

types/FileUploader/FileUploader.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FileUploaderProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface FileUploaderProps extends RestProps {
   /**
    * Specify the file uploader status
    * @default "uploading"

types/FileUploader/FileUploaderButton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FileUploaderButtonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface FileUploaderButtonProps extends RestProps {
   /**
    * Specify the accepted file types
    * @default []

types/FileUploader/FileUploaderDropContainer.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FileUploaderDropContainerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface FileUploaderDropContainerProps extends RestProps {
   /**
    * Specify the accepted file types
    * @default []

types/FileUploader/FileUploaderItem.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FileUploaderItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
+type RestProps = SvelteHTMLElements["span"];
+
+export interface FileUploaderItemProps extends RestProps {
   /**
    * Specify the file uploader status
    * @default "uploading"

types/FileUploader/FileUploaderSkeleton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FileUploaderSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface FileUploaderSkeletonProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/FileUploader/Filename.svelte.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FilenameProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]>,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]>,
-    svelte.JSX.SVGAttributes<SVGSVGElement> {
+type RestProps = SvelteHTMLElements["div"] &
+  SvelteHTMLElements["button"] &
+  SvelteHTMLElements["svg"];
+
+export interface FilenameProps extends RestProps {
   /**
    * Specify the file name status
    * @default "uploading"

types/FluidForm/FluidForm.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FluidFormProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {
+type RestProps = SvelteHTMLElements["form"];
+
+export interface FluidFormProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/Form/Form.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FormProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {
+type RestProps = SvelteHTMLElements["form"];
+
+export interface FormProps extends RestProps {
   /**
    * Obtain a reference to the form element
    * @default null

types/FormGroup/FormGroup.svelte.d.ts

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

types/FormItem/FormItem.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FormItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface FormItemProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/FormLabel/FormLabel.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface FormLabelProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["label"]> {
+type RestProps = SvelteHTMLElements["label"];
+
+export interface FormLabelProps extends RestProps {
   /**
    * Set an id to be used by the label element
    * @default "ccs-" + Math.random().toString(36)

types/Grid/Column.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type ColumnSize = boolean | number;
 
@@ -10,8 +10,9 @@ export interface ColumnSizeDescriptor {
 
 export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 
-export interface ColumnProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ColumnProps extends RestProps {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
@@ -84,6 +85,6 @@ export interface ColumnProps
 
 export default class Column extends SvelteComponentTyped<
   ColumnProps,
-  {},
+  Record<string, any>,
   { default: { props: { class: string; [key: string]: any } } }
 > {}

types/Grid/Grid.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface GridProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface GridProps extends RestProps {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
@@ -57,6 +58,6 @@ export interface GridProps
 
 export default class Grid extends SvelteComponentTyped<
   GridProps,
-  {},
+  Record<string, any>,
   { default: { props: { class: string; [key: string]: any } } }
 > {}

types/Grid/Row.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface RowProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface RowProps extends RestProps {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
@@ -51,6 +52,6 @@ export interface RowProps
 
 export default class Row extends SvelteComponentTyped<
   RowProps,
-  {},
+  Record<string, any>,
   { default: { props: { class: string; [key: string]: any } } }
 > {}

types/ImageLoader/ImageLoader.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ImageLoaderProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["img"]> {
+type RestProps = SvelteHTMLElements["img"];
+
+export interface ImageLoaderProps extends RestProps {
   /**
    * Specify the image source
    * @default ""

types/InlineLoading/InlineLoading.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface InlineLoadingProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface InlineLoadingProps extends RestProps {
   /**
    * Set the loading status
    * @default "active"

types/Link/Link.svelte.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface LinkProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]>,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> {
+type RestProps = SvelteHTMLElements["a"] & SvelteHTMLElements["p"];
+
+export interface LinkProps extends RestProps {
   /**
    * Specify the size of the link
    * @default undefined
@@ -27,7 +27,7 @@ export interface LinkProps
    * `inline` must be `false`
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Set to `true` to disable the checkbox

types/Link/OutboundLink.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { LinkProps } from "./Link.svelte";
 

types/ListBox/ListBox.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ListBoxProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ListBoxProps extends RestProps {
   /**
    * Set the size of the list box
    * @default undefined

types/ListBox/ListBoxField.svelte.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type ListBoxFieldTranslationId = "close" | "open";
 
-export interface ListBoxFieldProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ListBoxFieldProps extends RestProps {
   /**
    * Set to `true` to disable the list box field
    * @default false

types/ListBox/ListBoxMenu.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ListBoxMenuProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ListBoxMenuProps extends RestProps {
   /**
    * Set an id for the top-level element
    * @default "ccs-" + Math.random().toString(36)

types/ListBox/ListBoxMenuIcon.svelte.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type ListBoxMenuIconTranslationId = "close" | "open";
 
-export interface ListBoxMenuIconProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ListBoxMenuIconProps extends RestProps {
   /**
    * Set to `true` to open the list box menu icon
    * @default false

types/ListBox/ListBoxMenuItem.svelte.d.ts

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

types/ListBox/ListBoxSelection.svelte.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
 
-export interface ListBoxSelectionProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ListBoxSelectionProps extends RestProps {
   /**
    * Specify the number of selected items
    * @default undefined

types/ListItem/ListItem.svelte.d.ts

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

types/Loading/Loading.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface LoadingProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface LoadingProps extends RestProps {
   /**
    * Set to `true` to use the small variant
    * @default false
@@ -38,6 +39,6 @@ export interface LoadingProps
 
 export default class Loading extends SvelteComponentTyped<
   LoadingProps,
-  {},
+  Record<string, any>,
   {}
 > {}

types/LocalStorage/LocalStorage.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface LocalStorageProps {

types/Modal/Modal.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ModalProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ModalProps extends RestProps {
   /**
    * Set the size of the modal
    * @default undefined
@@ -85,7 +86,7 @@ export interface ModalProps
    * Specify the primary button icon
    * @default undefined
    */
-  primaryButtonIcon?: typeof import("svelte").SvelteComponent;
+  primaryButtonIcon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Set to `true` for the "submit" and "click:button--primary" events

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type MultiSelectItemId = any;
 
@@ -11,8 +11,9 @@ export interface MultiSelectItem {
   disabled?: boolean;
 }
 
-export interface MultiSelectProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface MultiSelectProps extends RestProps {
   /**
    * Set the multiselect items
    * @default []

types/Notification/InlineNotification.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface InlineNotificationProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface InlineNotificationProps extends RestProps {
   /**
    * Specify the kind of notification
    * @default "error"

types/Notification/NotificationActionButton.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 import type { ButtonProps } from "../Button/Button.svelte";
 

types/Notification/NotificationButton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface NotificationButtonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface NotificationButtonProps extends RestProps {
   /**
    * Set the type of notification
    * @default "toast"
@@ -13,7 +14,7 @@ export interface NotificationButtonProps
    * Specify the icon to render
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the title of the icon

types/Notification/NotificationIcon.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
 
 export interface NotificationIconProps {
@@ -29,6 +28,6 @@ export interface NotificationIconProps {
 
 export default class NotificationIcon extends SvelteComponentTyped<
   NotificationIconProps,
-  {},
+  Record<string, any>,
   {}
 > {}

types/Notification/ToastNotification.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ToastNotificationProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ToastNotificationProps extends RestProps {
   /**
    * Specify the kind of notification
    * @default "error"

types/NumberInput/NumberInput.svelte.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type NumberInputTranslationId = "increment" | "decrement";
 
-export interface NumberInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface NumberInputProps extends RestProps {
   /**
    * Set the size of the input
    * @default undefined

types/NumberInput/NumberInputSkeleton.svelte.d.ts

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

types/OrderedList/OrderedList.svelte.d.ts

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

types/OverflowMenu/OverflowMenu.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface OverflowMenuProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface OverflowMenuProps extends RestProps {
   /**
    * Specify the size of the overflow menu
    * @default undefined
@@ -44,7 +45,7 @@ export interface OverflowMenuProps
    * Defaults to `<OverflowMenuVertical />`
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the icon class

types/OverflowMenu/OverflowMenuItem.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface OverflowMenuItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+type RestProps = SvelteHTMLElements["li"];
+
+export interface OverflowMenuItemProps extends RestProps {
   /**
    * Specify the item text
    * Alternatively, use the default slot for a custom element

types/Pagination/Pagination.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface PaginationProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface PaginationProps extends RestProps {
   /**
    * Specify the current page index
    * @default 1

types/Pagination/PaginationSkeleton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface PaginationSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface PaginationSkeletonProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/PaginationNav/PaginationNav.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface PaginationNavProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
+type RestProps = SvelteHTMLElements["nav"];
+
+export interface PaginationNavProps extends RestProps {
   /**
    * Specify the current page index
    * @default 1

types/Popover/Popover.svelte.d.ts

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

types/ProgressBar/ProgressBar.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ProgressBarProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface ProgressBarProps extends RestProps {
   /**
    * Specify the current value
    * @default undefined
@@ -62,6 +63,6 @@ export interface ProgressBarProps
 
 export default class ProgressBar extends SvelteComponentTyped<
   ProgressBarProps,
-  {},
+  Record<string, any>,
   { labelText: {} }
 > {}

types/ProgressIndicator/ProgressIndicator.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface ProgressIndicatorProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+type RestProps = SvelteHTMLElements["ul"];
+
+export interface ProgressIndicatorProps extends RestProps {
   /**
    * Specify the current step index
    * @default 0

types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts

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

types/ProgressIndicator/ProgressStep.svelte.d.ts

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

types/RadioButton/RadioButton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface RadioButtonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface RadioButtonProps extends RestProps {
   /**
    * Specify the value of the radio button
    * @default ""

types/RadioButton/RadioButtonSkeleton.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface RadioButtonSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface RadioButtonSkeletonProps extends RestProps {
   [key: `data-${string}`]: any;
 }
 

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface RadioButtonGroupProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface RadioButtonGroupProps extends RestProps {
   /**
    * Set the selected radio button value
    * @default undefined

types/RecursiveList/RecursiveList.svelte.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export interface RecursiveListNode {
   text?: string;
@@ -7,9 +7,9 @@ export interface RecursiveListNode {
   html?: string;
 }
 
-export interface RecursiveListProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]>,
-    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ol"]> {
+type RestProps = SvelteHTMLElements["ul"] & SvelteHTMLElements["ol"];
+
+export interface RecursiveListProps extends RestProps {
   /**
    * Specify the children to render
    * @default []
@@ -27,6 +27,6 @@ export interface RecursiveListProps
 
 export default class RecursiveList extends SvelteComponentTyped<
   RecursiveListProps,
-  {},
+  Record<string, any>,
   {}
 > {}

types/Search/Search.svelte.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="svelte" />
 import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface SearchProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface SearchProps extends RestProps {
   /**
    * Specify the value of the search input
    * @default ""
@@ -86,7 +87,7 @@ export interface SearchProps
    * Defaults to `<Search />`
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Set an id for the input element