chore: change peerDependencies

- use Svelte 3.55.0 since that's the minimum target for SvelteKit and svelte-check
- revert to using SvelteComponentTyped for high compatibility. We'll migrate to SvelteComponent after dropping Svelte 3

types/Accordion/Accordion.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { AccordionSkeletonProps } from "./AccordionSkeleton.svelte";
 
 export interface AccordionProps extends AccordionSkeletonProps {
@@ -28,7 +28,7 @@ export interface AccordionProps extends AccordionSkeletonProps {
   skeleton?: boolean;
 }
 
-export default class Accordion extends SvelteComponent<
+export default class Accordion extends SvelteComponentTyped<
   AccordionProps,
   {
     click: WindowEventMap["click"];

types/Accordion/AccordionItem.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface AccordionItemProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
@@ -27,9 +27,11 @@ export interface AccordionItemProps
    * @default "Expand/Collapse"
    */
   iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class AccordionItem extends SvelteComponent<
+export default class AccordionItem extends SvelteComponentTyped<
   AccordionItemProps,
   {
     animationend: WindowEventMap["animationend"];

types/Accordion/AccordionSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface AccordionSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
@@ -26,9 +26,11 @@ export interface AccordionSkeletonProps
    * @default true
    */
   open?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class AccordionSkeleton extends SvelteComponent<
+export default class AccordionSkeleton extends SvelteComponentTyped<
   AccordionSkeletonProps,
   {
     click: WindowEventMap["click"];

types/AspectRatio/AspectRatio.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface AspectRatioProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -17,9 +17,11 @@ export interface AspectRatioProps
     | "3x2"
     | "9x16"
     | "1x2";
+
+  [key: `data-${string}`]: any;
 }
 
-export default class AspectRatio extends SvelteComponent<
+export default class AspectRatio extends SvelteComponentTyped<
   AspectRatioProps,
   {},
   { default: {} }

types/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton.svelte";
 
 export interface BreadcrumbProps extends BreadcrumbSkeletonProps {
@@ -16,7 +16,7 @@ export interface BreadcrumbProps extends BreadcrumbSkeletonProps {
   skeleton?: boolean;
 }
 
-export default class Breadcrumb extends SvelteComponent<
+export default class Breadcrumb extends SvelteComponentTyped<
   BreadcrumbProps,
   {
     click: WindowEventMap["click"];

types/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface BreadcrumbItemProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
@@ -14,9 +14,11 @@ export interface BreadcrumbItemProps
    * @default false
    */
   isCurrentPage?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class BreadcrumbItem extends SvelteComponent<
+export default class BreadcrumbItem extends SvelteComponentTyped<
   BreadcrumbItemProps,
   {
     click: WindowEventMap["click"];

types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface BreadcrumbSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -14,9 +14,11 @@ export interface BreadcrumbSkeletonProps
    * @default 3
    */
   count?: number;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class BreadcrumbSkeleton extends SvelteComponent<
+export default class BreadcrumbSkeleton extends SvelteComponentTyped<
   BreadcrumbSkeletonProps,
   {
     click: WindowEventMap["click"];

types/Breakpoint/Breakpoint.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
 
@@ -19,7 +19,7 @@ export interface BreakpointProps {
   sizes?: Record<BreakpointSize, boolean>;
 }
 
-export default class Breakpoint extends SvelteComponent<
+export default class Breakpoint extends SvelteComponentTyped<
   BreakpointProps,
   {
     change: CustomEvent<{

types/Button/Button.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte";
 
 export interface ButtonProps
@@ -42,7 +42,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
@@ -105,9 +105,11 @@ export interface ButtonProps
    * @default null
    */
   ref?: null | HTMLAnchorElement | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Button extends SvelteComponent<
+export default class Button extends SvelteComponentTyped<
   ButtonProps,
   {
     click: WindowEventMap["click"];

types/Button/ButtonSet.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ButtonSetProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -8,9 +8,11 @@ export interface ButtonSetProps
    * @default false
    */
   stacked?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ButtonSet extends SvelteComponent<
+export default class ButtonSet extends SvelteComponentTyped<
   ButtonSetProps,
   {},
   { default: {} }

types/Button/ButtonSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ButtonSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
@@ -14,9 +14,11 @@ export interface ButtonSkeletonProps
    * @default "default"
    */
   size?: "default" | "field" | "small" | "lg" | "xl";
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ButtonSkeleton extends SvelteComponent<
+export default class ButtonSkeleton extends SvelteComponentTyped<
   ButtonSkeletonProps,
   {
     click: WindowEventMap["click"];

types/Checkbox/Checkbox.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface CheckboxProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -86,9 +86,11 @@ export interface CheckboxProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Checkbox extends SvelteComponent<
+export default class Checkbox extends SvelteComponentTyped<
   CheckboxProps,
   {
     check: CustomEvent<boolean>;

types/Checkbox/CheckboxSkeleton.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface CheckboxSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class CheckboxSkeleton extends SvelteComponent<
+export default class CheckboxSkeleton extends SvelteComponentTyped<
   CheckboxSkeletonProps,
   {
     click: WindowEventMap["click"];

types/CodeSnippet/CodeSnippet.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface CodeSnippetProps {
   /**
@@ -117,7 +117,7 @@ export interface CodeSnippetProps {
   ref?: null | HTMLPreElement;
 }
 
-export default class CodeSnippet extends SvelteComponent<
+export default class CodeSnippet extends SvelteComponentTyped<
   CodeSnippetProps,
   {
     expand: CustomEvent<null>;

types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface CodeSnippetSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -8,9 +8,11 @@ export interface CodeSnippetSkeletonProps
    * @default "single"
    */
   type?: "single" | "multi";
+
+  [key: `data-${string}`]: any;
 }
 
-export default class CodeSnippetSkeleton extends SvelteComponent<
+export default class CodeSnippetSkeleton extends SvelteComponentTyped<
   CodeSnippetSkeletonProps,
   {
     click: WindowEventMap["click"];

types/ComboBox/ComboBox.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type ComboBoxItemId = any;
 
@@ -152,9 +152,11 @@ export interface ComboBoxProps
    * @default null
    */
   listRef?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ComboBox extends SvelteComponent<
+export default class ComboBox extends SvelteComponentTyped<
   ComboBoxProps,
   {
     select: CustomEvent<{

types/ComposedModal/ComposedModal.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ComposedModalProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -44,9 +44,11 @@ export interface ComposedModalProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ComposedModal extends SvelteComponent<
+export default class ComposedModal extends SvelteComponentTyped<
   ComposedModalProps,
   {
     transitionend: CustomEvent<{ open: boolean }>;

types/ComposedModal/ModalBody.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ModalBodyProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -14,9 +14,11 @@ export interface ModalBodyProps
    * @default false
    */
   hasScrollingContent?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ModalBody extends SvelteComponent<
+export default class ModalBody extends SvelteComponentTyped<
   ModalBodyProps,
   {},
   { default: {} }

types/ComposedModal/ModalFooter.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ModalFooterProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -13,7 +13,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
@@ -51,9 +51,11 @@ export interface ModalFooterProps
    * @default false
    */
   danger?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ModalFooter extends SvelteComponent<
+export default class ModalFooter extends SvelteComponentTyped<
   ModalFooterProps,
   { ["click:button--secondary"]: CustomEvent<{ text: string }> },
   { default: {} }

types/ComposedModal/ModalHeader.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ModalHeaderProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -44,9 +44,11 @@ export interface ModalHeaderProps
    * @default "Close"
    */
   iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ModalHeader extends SvelteComponent<
+export default class ModalHeader extends SvelteComponentTyped<
   ModalHeaderProps,
   { click: WindowEventMap["click"] },
   { default: {} }

types/ContentSwitcher/ContentSwitcher.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ContentSwitcherProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -14,9 +14,11 @@ export interface ContentSwitcherProps
    * @default undefined
    */
   size?: "sm" | "xl";
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ContentSwitcher extends SvelteComponent<
+export default class ContentSwitcher extends SvelteComponentTyped<
   ContentSwitcherProps,
   {
     change: CustomEvent<number>;

types/ContentSwitcher/Switch.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface SwitchProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
@@ -33,9 +33,11 @@ export interface SwitchProps
    * @default null
    */
   ref?: null | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Switch extends SvelteComponent<
+export default class Switch extends SvelteComponentTyped<
   SwitchProps,
   {
     click: WindowEventMap["click"];

types/ContextMenu/ContextMenu.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
@@ -34,9 +34,11 @@ export interface ContextMenuProps
    * @default null
    */
   ref?: null | HTMLUListElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ContextMenu extends SvelteComponent<
+export default class ContextMenu extends SvelteComponentTyped<
   ContextMenuProps,
   {
     open: CustomEvent<HTMLElement>;

types/ContextMenu/ContextMenuDivider.svelte.d.ts

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

types/ContextMenu/ContextMenuGroup.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuGroupProps {
   /**
@@ -14,7 +14,7 @@ export interface ContextMenuGroupProps {
   labelText?: string;
 }
 
-export default class ContextMenuGroup extends SvelteComponent<
+export default class ContextMenuGroup extends SvelteComponentTyped<
   ContextMenuGroupProps,
   {},
   { default: {} }

types/ContextMenu/ContextMenuOption.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuOptionProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
@@ -26,7 +26,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
@@ -67,9 +67,11 @@ export interface ContextMenuOptionProps
    * @default null
    */
   ref?: null | HTMLLIElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ContextMenuOption extends SvelteComponent<
+export default class ContextMenuOption extends SvelteComponentTyped<
   ContextMenuOptionProps,
   {
     keydown: WindowEventMap["keydown"];

types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ContextMenuRadioGroupProps {
   /**
@@ -15,7 +15,7 @@ export interface ContextMenuRadioGroupProps {
   labelText?: string;
 }
 
-export default class ContextMenuRadioGroup extends SvelteComponent<
+export default class ContextMenuRadioGroup extends SvelteComponentTyped<
   ContextMenuRadioGroupProps,
   {},
   { default: {} }

types/CopyButton/CopyButton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface CopyButtonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
@@ -32,9 +32,11 @@ export interface CopyButtonProps
    * @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }
    */
   copy?: (text: string) => void;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class CopyButton extends SvelteComponent<
+export default class CopyButton extends SvelteComponentTyped<
   CopyButtonProps,
   {
     click: WindowEventMap["click"];

types/DataTable/DataTable.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type DataTableKey = string;
 
@@ -176,9 +176,11 @@ export interface DataTableProps
    * @default 0
    */
   page?: number;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class DataTable extends SvelteComponent<
+export default class DataTable extends SvelteComponentTyped<
   DataTableProps,
   {
     click: CustomEvent<{

types/DataTable/DataTableSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { DataTableHeader } from "./DataTable.svelte";
 
 export interface DataTableSkeletonProps
@@ -48,9 +48,11 @@ export interface DataTableSkeletonProps
    * @default true
    */
   showToolbar?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class DataTableSkeleton extends SvelteComponent<
+export default class DataTableSkeleton extends SvelteComponentTyped<
   DataTableSkeletonProps,
   {
     click: WindowEventMap["click"];

types/DataTable/Table.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface TableProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
@@ -38,9 +38,11 @@ export interface TableProps
    * @default undefined
    */
   tableStyle?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Table extends SvelteComponent<
+export default class Table extends SvelteComponentTyped<
   TableProps,
   {},
   { default: {} }

types/DataTable/TableBody.svelte.d.ts

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

types/DataTable/TableCell.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface TableCellProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class TableCell extends SvelteComponent<
+export default class TableCell extends SvelteComponentTyped<
   TableCellProps,
   {
     click: WindowEventMap["click"];

types/DataTable/TableContainer.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface TableContainerProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -26,9 +26,11 @@ export interface TableContainerProps
    * @default false
    */
   useStaticWidth?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class TableContainer extends SvelteComponent<
+export default class TableContainer extends SvelteComponentTyped<
   TableContainerProps,
   {},
   { default: {} }

types/DataTable/TableHead.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface TableHeadProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class TableHead extends SvelteComponent<
+export default class TableHead extends SvelteComponentTyped<
   TableHeadProps,
   {
     click: WindowEventMap["click"];

types/DataTable/TableHeader.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface TableHeaderProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
@@ -38,9 +38,11 @@ export interface TableHeaderProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class TableHeader extends SvelteComponent<
+export default class TableHeader extends SvelteComponentTyped<
   TableHeaderProps,
   {
     mouseover: WindowEventMap["mouseover"];

types/DataTable/TableRow.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface TableRowProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class TableRow extends SvelteComponent<
+export default class TableRow extends SvelteComponentTyped<
   TableRowProps,
   {
     click: WindowEventMap["click"];

types/DataTable/Toolbar.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ToolbarProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
@@ -8,9 +8,11 @@ export interface ToolbarProps
    * @default "default"
    */
   size?: "sm" | "default";
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Toolbar extends SvelteComponent<
+export default class Toolbar extends SvelteComponentTyped<
   ToolbarProps,
   {},
   { default: {} }

types/DataTable/ToolbarBatchActions.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ToolbarBatchActionsProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -14,9 +14,11 @@ export interface ToolbarBatchActionsProps
    * @default undefined
    */
   active?: undefined | boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ToolbarBatchActions extends SvelteComponent<
+export default class ToolbarBatchActions extends SvelteComponentTyped<
   ToolbarBatchActionsProps,
   { cancel: CustomEvent<null> },
   { default: {}; cancel: {} }

types/DataTable/ToolbarContent.svelte.d.ts

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

types/DataTable/ToolbarMenu.svelte.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { OverflowMenuProps } from "../OverflowMenu/OverflowMenu.svelte";
 
 export interface ToolbarMenuProps extends OverflowMenuProps {}
 
-export default class ToolbarMenu extends SvelteComponent<
+export default class ToolbarMenu extends SvelteComponentTyped<
   ToolbarMenuProps,
   {},
   { default: {} }

types/DataTable/ToolbarMenuItem.svelte.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem.svelte";
 
 export interface ToolbarMenuItemProps extends OverflowMenuItemProps {}
 
-export default class ToolbarMenuItem extends SvelteComponent<
+export default class ToolbarMenuItem extends SvelteComponentTyped<
   ToolbarMenuItemProps,
   { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
   { default: {} }

types/DataTable/ToolbarSearch.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ToolbarSearchProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
@@ -61,9 +61,11 @@ export interface ToolbarSearchProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ToolbarSearch extends SvelteComponent<
+export default class ToolbarSearch extends SvelteComponentTyped<
   ToolbarSearchProps,
   {
     clear: WindowEventMap["clear"];

types/DatePicker/DatePicker.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface DatePickerProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -79,9 +79,11 @@ export interface DatePickerProps
    * @default { static: true }
    */
   flatpickrProps?: import("flatpickr/dist/types/options").Options;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class DatePicker extends SvelteComponent<
+export default class DatePicker extends SvelteComponentTyped<
   DatePickerProps,
   {
     change: CustomEvent<

types/DatePicker/DatePickerInput.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface DatePickerInputProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
@@ -98,9 +98,11 @@ export interface DatePickerInputProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class DatePickerInput extends SvelteComponent<
+export default class DatePickerInput extends SvelteComponentTyped<
   DatePickerInputProps,
   {
     input: WindowEventMap["input"];

types/DatePicker/DatePickerSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface DatePickerSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -14,9 +14,11 @@ export interface DatePickerSkeletonProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class DatePickerSkeleton extends SvelteComponent<
+export default class DatePickerSkeleton extends SvelteComponentTyped<
   DatePickerSkeletonProps,
   {
     click: WindowEventMap["click"];

types/Dropdown/Dropdown.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type DropdownItemId = any;
 
@@ -141,9 +141,11 @@ export interface DropdownProps
    * @default null
    */
   ref?: null | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Dropdown extends SvelteComponent<
+export default class Dropdown extends SvelteComponentTyped<
   DropdownProps,
   {
     select: CustomEvent<{

types/Dropdown/DropdownSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface DropdownSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -8,9 +8,11 @@ export interface DropdownSkeletonProps
    * @default false
    */
   inline?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class DropdownSkeleton extends SvelteComponent<
+export default class DropdownSkeleton extends SvelteComponentTyped<
   DropdownSkeletonProps,
   {
     click: WindowEventMap["click"];

types/FileUploader/FileUploader.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FileUploaderProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -68,9 +68,11 @@ export interface FileUploaderProps
    * @default ""
    */
   name?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class FileUploader extends SvelteComponent<
+export default class FileUploader extends SvelteComponentTyped<
   FileUploaderProps,
   {
     add: CustomEvent<ReadonlyArray<File>>;

types/FileUploader/FileUploaderButton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FileUploaderButtonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
@@ -74,9 +74,11 @@ export interface FileUploaderButtonProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class FileUploaderButton extends SvelteComponent<
+export default class FileUploaderButton extends SvelteComponentTyped<
   FileUploaderButtonProps,
   {
     change: CustomEvent<ReadonlyArray<File>>;

types/FileUploader/FileUploaderDropContainer.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FileUploaderDropContainerProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -69,9 +69,11 @@ export interface FileUploaderDropContainerProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class FileUploaderDropContainer extends SvelteComponent<
+export default class FileUploaderDropContainer extends SvelteComponentTyped<
   FileUploaderDropContainerProps,
   {
     add: CustomEvent<ReadonlyArray<File>>;

types/FileUploader/FileUploaderItem.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FileUploaderItemProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
@@ -50,9 +50,11 @@ export interface FileUploaderItemProps
    * @default ""
    */
   name?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class FileUploaderItem extends SvelteComponent<
+export default class FileUploaderItem extends SvelteComponentTyped<
   FileUploaderItemProps,
   {
     delete: CustomEvent<string>;

types/FileUploader/FileUploaderSkeleton.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FileUploaderSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class FileUploaderSkeleton extends SvelteComponent<
+export default class FileUploaderSkeleton extends SvelteComponentTyped<
   FileUploaderSkeletonProps,
   {
     click: WindowEventMap["click"];

types/FileUploader/Filename.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FilenameProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]>,
@@ -22,9 +22,11 @@ export interface FilenameProps
    * @default false
    */
   invalid?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Filename extends SvelteComponent<
+export default class Filename extends SvelteComponentTyped<
   FilenameProps,
   { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
   {}

types/FluidForm/FluidForm.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FluidFormProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class FluidForm extends SvelteComponent<
+export default class FluidForm extends SvelteComponentTyped<
   FluidFormProps,
   {
     click: WindowEventMap["click"];

types/Form/Form.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FormProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {
@@ -8,9 +8,11 @@ export interface FormProps
    * @default null
    */
   ref?: null | HTMLFormElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Form extends SvelteComponent<
+export default class Form extends SvelteComponentTyped<
   FormProps,
   {
     click: WindowEventMap["click"];

types/FormGroup/FormGroup.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FormGroupProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
@@ -38,9 +38,11 @@ export interface FormGroupProps
    * @default ""
    */
   legendId?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class FormGroup extends SvelteComponent<
+export default class FormGroup extends SvelteComponentTyped<
   FormGroupProps,
   {
     click: WindowEventMap["click"];

types/FormItem/FormItem.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FormItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class FormItem extends SvelteComponent<
+export default class FormItem extends SvelteComponentTyped<
   FormItemProps,
   {
     click: WindowEventMap["click"];

types/FormLabel/FormLabel.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface FormLabelProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["label"]> {
@@ -8,9 +8,11 @@ export interface FormLabelProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class FormLabel extends SvelteComponent<
+export default class FormLabel extends SvelteComponentTyped<
   FormLabelProps,
   {
     click: WindowEventMap["click"];

types/Grid/Column.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type ColumnSize = boolean | number;
 
@@ -78,9 +78,11 @@ export interface ColumnProps
    * @default undefined
    */
   max?: ColumnBreakpoint;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Column extends SvelteComponent<
+export default class Column extends SvelteComponentTyped<
   ColumnProps,
   {},
   { default: { props: { class: string; [key: string]: any } } }

types/Grid/Grid.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface GridProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -51,9 +51,11 @@ export interface GridProps
    * @default false
    */
   padding?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Grid extends SvelteComponent<
+export default class Grid extends SvelteComponentTyped<
   GridProps,
   {},
   { default: { props: { class: string; [key: string]: any } } }

types/Grid/Row.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface RowProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -45,9 +45,11 @@ export interface RowProps
    * @default false
    */
   padding?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Row extends SvelteComponent<
+export default class Row extends SvelteComponentTyped<
   RowProps,
   {},
   { default: { props: { class: string; [key: string]: any } } }

types/ImageLoader/ImageLoader.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ImageLoaderProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["img"]> {
@@ -45,9 +45,11 @@ export interface ImageLoaderProps
    * @default false
    */
   fadeIn?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ImageLoader extends SvelteComponent<
+export default class ImageLoader extends SvelteComponentTyped<
   ImageLoaderProps,
   { load: CustomEvent<null>; error: CustomEvent<null> },
   { error: {}; loading: {} }

types/InlineLoading/InlineLoading.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface InlineLoadingProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -26,9 +26,11 @@ export interface InlineLoadingProps
    * @default 1500
    */
   successDelay?: number;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class InlineLoading extends SvelteComponent<
+export default class InlineLoading extends SvelteComponentTyped<
   InlineLoadingProps,
   {
     click: WindowEventMap["click"];

types/Link/Link.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface LinkProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]>,
@@ -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
@@ -46,9 +46,11 @@ export interface LinkProps
    * @default null
    */
   ref?: null | HTMLAnchorElement | HTMLParagraphElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Link extends SvelteComponent<
+export default class Link extends SvelteComponentTyped<
   LinkProps,
   {
     click: WindowEventMap["click"];

types/Link/OutboundLink.svelte.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { LinkProps } from "./Link.svelte";
 
 export interface OutboundLinkProps extends LinkProps {}
 
-export default class OutboundLink extends SvelteComponent<
+export default class OutboundLink extends SvelteComponentTyped<
   OutboundLinkProps,
   {
     click: WindowEventMap["click"];

types/ListBox/ListBox.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ListBoxProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -56,9 +56,11 @@ export interface ListBoxProps
    * @default ""
    */
   warnText?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ListBox extends SvelteComponent<
+export default class ListBox extends SvelteComponentTyped<
   ListBoxProps,
   { keydown: WindowEventMap["keydown"]; click: WindowEventMap["click"] },
   { default: {} }

types/ListBox/ListBoxField.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type ListBoxFieldTranslationId = "close" | "open";
 
@@ -40,9 +40,11 @@ export interface ListBoxFieldProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ListBoxField extends SvelteComponent<
+export default class ListBoxField extends SvelteComponentTyped<
   ListBoxFieldProps,
   {
     click: WindowEventMap["click"];

types/ListBox/ListBoxMenu.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ListBoxMenuProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -14,9 +14,11 @@ export interface ListBoxMenuProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ListBoxMenu extends SvelteComponent<
+export default class ListBoxMenu extends SvelteComponentTyped<
   ListBoxMenuProps,
   { scroll: WindowEventMap["scroll"] },
   { default: {} }

types/ListBox/ListBoxMenuIcon.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type ListBoxMenuIconTranslationId = "close" | "open";
 
@@ -16,9 +16,11 @@ export interface ListBoxMenuIconProps
    * @default (id) => defaultTranslations[id]
    */
   translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ListBoxMenuIcon extends SvelteComponent<
+export default class ListBoxMenuIcon extends SvelteComponentTyped<
   ListBoxMenuIconProps,
   { click: WindowEventMap["click"] },
   {}

types/ListBox/ListBoxMenuItem.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ListBoxMenuItemProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -20,9 +20,11 @@ export interface ListBoxMenuItemProps
    * @default false
    */
   disabled?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ListBoxMenuItem extends SvelteComponent<
+export default class ListBoxMenuItem extends SvelteComponentTyped<
   ListBoxMenuItemProps,
   {
     click: WindowEventMap["click"];

types/ListBox/ListBoxSelection.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
 
@@ -28,9 +28,11 @@ export interface ListBoxSelectionProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ListBoxSelection extends SvelteComponent<
+export default class ListBoxSelection extends SvelteComponentTyped<
   ListBoxSelectionProps,
   { clear: CustomEvent<any> },
   {}

types/ListItem/ListItem.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ListItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class ListItem extends SvelteComponent<
+export default class ListItem extends SvelteComponentTyped<
   ListItemProps,
   {
     click: WindowEventMap["click"];

types/Loading/Loading.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface LoadingProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -32,9 +32,11 @@ export interface LoadingProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Loading extends SvelteComponent<
+export default class Loading extends SvelteComponentTyped<
   LoadingProps,
   {},
   {}

types/LocalStorage/LocalStorage.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface LocalStorageProps {
   /**
@@ -15,7 +15,7 @@ export interface LocalStorageProps {
   value?: any;
 }
 
-export default class LocalStorage extends SvelteComponent<
+export default class LocalStorage extends SvelteComponentTyped<
   LocalStorageProps,
   {
     save: CustomEvent<null>;

types/Modal/Modal.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ModalProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -85,7 +85,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
@@ -130,9 +130,11 @@ export interface ModalProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Modal extends SvelteComponent<
+export default class Modal extends SvelteComponentTyped<
   ModalProps,
   {
     transitionend: CustomEvent<{ open: boolean }>;

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type MultiSelectItemId = any;
 
@@ -236,9 +236,11 @@ export interface MultiSelectProps
    * @default null
    */
   highlightedId?: null | MultiSelectItemId;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class MultiSelect extends SvelteComponent<
+export default class MultiSelect extends SvelteComponentTyped<
   MultiSelectProps,
   {
     select: CustomEvent<{

types/Notification/InlineNotification.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface InlineNotificationProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -62,9 +62,11 @@ export interface InlineNotificationProps
    * @default "Close notification"
    */
   closeButtonDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class InlineNotification extends SvelteComponent<
+export default class InlineNotification extends SvelteComponentTyped<
   InlineNotificationProps,
   {
     close: CustomEvent<{ timeout: boolean }>;

types/Notification/NotificationActionButton.svelte.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 import type { ButtonProps } from "../Button/Button.svelte";
 
 export interface NotificationActionButtonProps extends ButtonProps {}
 
-export default class NotificationActionButton extends SvelteComponent<
+export default class NotificationActionButton extends SvelteComponentTyped<
   NotificationActionButtonProps,
   {
     click: WindowEventMap["click"];

types/Notification/NotificationButton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface NotificationButtonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
@@ -13,7 +13,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
@@ -26,9 +26,11 @@ export interface NotificationButtonProps
    * @default "Close icon"
    */
   iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class NotificationButton extends SvelteComponent<
+export default class NotificationButton extends SvelteComponentTyped<
   NotificationButtonProps,
   {
     click: WindowEventMap["click"];

types/Notification/NotificationIcon.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface NotificationIconProps {
   /**
@@ -27,7 +27,7 @@ export interface NotificationIconProps {
   iconDescription: undefined;
 }
 
-export default class NotificationIcon extends SvelteComponent<
+export default class NotificationIcon extends SvelteComponentTyped<
   NotificationIconProps,
   {},
   {}

types/Notification/ToastNotification.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ToastNotificationProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -75,9 +75,11 @@ export interface ToastNotificationProps
    * @default false
    */
   fullWidth?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ToastNotification extends SvelteComponent<
+export default class ToastNotification extends SvelteComponentTyped<
   ToastNotificationProps,
   {
     close: CustomEvent<{ timeout: boolean }>;

types/NumberInput/NumberInput.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export type NumberInputTranslationId = "increment" | "decrement";
 
@@ -137,9 +137,11 @@ export interface NumberInputProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class NumberInput extends SvelteComponent<
+export default class NumberInput extends SvelteComponentTyped<
   NumberInputProps,
   {
     change: CustomEvent<null | number>;

types/NumberInput/NumberInputSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface NumberInputSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -8,9 +8,11 @@ export interface NumberInputSkeletonProps
    * @default false
    */
   hideLabel?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class NumberInputSkeleton extends SvelteComponent<
+export default class NumberInputSkeleton extends SvelteComponentTyped<
   NumberInputSkeletonProps,
   {
     click: WindowEventMap["click"];

types/OrderedList/OrderedList.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface OrderedListProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ol"]> {
@@ -20,9 +20,11 @@ export interface OrderedListProps
    * @default false
    */
   expressive?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class OrderedList extends SvelteComponent<
+export default class OrderedList extends SvelteComponentTyped<
   OrderedListProps,
   {
     click: WindowEventMap["click"];

types/OverflowMenu/OverflowMenu.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface OverflowMenuProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
@@ -44,7 +44,7 @@ export interface OverflowMenuProps
    * Defaults to `<OverflowMenuVertical />`
    * @default undefined
    */
-  icon?: typeof import("svelte").SvelteComponent;
+  icon?: typeof import("svelte").SvelteComponent<any>;
 
   /**
    * Specify the icon class
@@ -75,9 +75,11 @@ export interface OverflowMenuProps
    * @default null
    */
   menuRef?: null | HTMLUListElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class OverflowMenu extends SvelteComponent<
+export default class OverflowMenu extends SvelteComponentTyped<
   OverflowMenuProps,
   {
     close: CustomEvent<null | { index: number; text: string }>;

types/OverflowMenu/OverflowMenuItem.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface OverflowMenuItemProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
@@ -57,9 +57,11 @@ export interface OverflowMenuItemProps
    * @default null
    */
   ref?: null | HTMLAnchorElement | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class OverflowMenuItem extends SvelteComponent<
+export default class OverflowMenuItem extends SvelteComponentTyped<
   OverflowMenuItemProps,
   { click: WindowEventMap["click"]; keydown: WindowEventMap["keydown"] },
   { default: {} }

types/Pagination/Pagination.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface PaginationProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -98,9 +98,11 @@ export interface PaginationProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Pagination extends SvelteComponent<
+export default class Pagination extends SvelteComponentTyped<
   PaginationProps,
   {
     /** Dispatched after any user interaction */

types/Pagination/PaginationSkeleton.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface PaginationSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class PaginationSkeleton extends SvelteComponent<
+export default class PaginationSkeleton extends SvelteComponentTyped<
   PaginationSkeletonProps,
   {
     click: WindowEventMap["click"];

types/PaginationNav/PaginationNav.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface PaginationNavProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
@@ -44,9 +44,11 @@ export interface PaginationNavProps
    * @default "bottom"
    */
   tooltipPosition?: "top" | "right" | "bottom" | "left" | "outside" | "inside";
+
+  [key: `data-${string}`]: any;
 }
 
-export default class PaginationNav extends SvelteComponent<
+export default class PaginationNav extends SvelteComponentTyped<
   PaginationNavProps,
   {
     /** fires after every user interaction */

types/Popover/Popover.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface PopoverProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -56,9 +56,11 @@ export interface PopoverProps
    * @default false
    */
   relative?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Popover extends SvelteComponent<
+export default class Popover extends SvelteComponentTyped<
   PopoverProps,
   { ["click:outside"]: CustomEvent<{ target: HTMLElement }> },
   { default: {} }

types/ProgressBar/ProgressBar.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ProgressBarProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -56,9 +56,11 @@ export interface ProgressBarProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ProgressBar extends SvelteComponent<
+export default class ProgressBar extends SvelteComponentTyped<
   ProgressBarProps,
   {},
   { labelText: {} }

types/ProgressIndicator/ProgressIndicator.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ProgressIndicatorProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
@@ -26,9 +26,11 @@ export interface ProgressIndicatorProps
    * @default false
    */
   preventChangeOnClick?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ProgressIndicator extends SvelteComponent<
+export default class ProgressIndicator extends SvelteComponentTyped<
   ProgressIndicatorProps,
   {
     change: CustomEvent<number>;

types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ProgressIndicatorSkeletonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
@@ -14,9 +14,11 @@ export interface ProgressIndicatorSkeletonProps
    * @default 4
    */
   count?: number;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ProgressIndicatorSkeleton extends SvelteComponent<
+export default class ProgressIndicatorSkeleton extends SvelteComponentTyped<
   ProgressIndicatorSkeletonProps,
   {
     click: WindowEventMap["click"];

types/ProgressIndicator/ProgressStep.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface ProgressStepProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
@@ -50,9 +50,11 @@ export interface ProgressStepProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class ProgressStep extends SvelteComponent<
+export default class ProgressStep extends SvelteComponentTyped<
   ProgressStepProps,
   {
     click: WindowEventMap["click"];

types/RadioButton/RadioButton.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface RadioButtonProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -62,9 +62,11 @@ export interface RadioButtonProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class RadioButton extends SvelteComponent<
+export default class RadioButton extends SvelteComponentTyped<
   RadioButtonProps,
   { change: WindowEventMap["change"] },
   { labelText: {} }

types/RadioButton/RadioButtonSkeleton.svelte.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface RadioButtonSkeletonProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
-export default class RadioButtonSkeleton extends SvelteComponent<
+export default class RadioButtonSkeleton extends SvelteComponentTyped<
   RadioButtonSkeletonProps,
   {
     click: WindowEventMap["click"];

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface RadioButtonGroupProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
@@ -44,9 +44,11 @@ export interface RadioButtonGroupProps
    * @default undefined
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class RadioButtonGroup extends SvelteComponent<
+export default class RadioButtonGroup extends SvelteComponentTyped<
   RadioButtonGroupProps,
   {
     click: WindowEventMap["click"];

types/RecursiveList/RecursiveList.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface RecursiveListNode {
   text?: string;
@@ -21,9 +21,11 @@ export interface RecursiveListProps
    * @default "unordered"
    */
   type?: "unordered" | "ordered" | "ordered-native";
+
+  [key: `data-${string}`]: any;
 }
 
-export default class RecursiveList extends SvelteComponent<
+export default class RecursiveList extends SvelteComponentTyped<
   RecursiveListProps,
   {},
   {}

types/Search/Search.svelte.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
 
 export interface SearchProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
@@ -86,7 +86,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
@@ -99,9 +99,11 @@ export interface SearchProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
-export default class Search extends SvelteComponent<
+export default class Search extends SvelteComponentTyped<
   SearchProps,
   {
     expand: CustomEvent<null>;