fix(types): allow data-* attributes for props forwarded to HTML elements (#1741)

* chore(deps-dev): upgrade `sveld` to v0.18.1

* Run "yarn build:docs"

* test: assert that `data-*` attributes are valid

package.json

@@ -38,7 +38,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.49.11",
     "standard-version": "^9.5.0",
-    "sveld": "^0.18.0",
+    "sveld": "^0.18.1",
     "svelte": "^3.58.0",
     "svelte-check": "^3.4.3",
     "typescript": "^4.7.4"

tests/Button.test.svelte

@@ -3,7 +3,7 @@
   import Add from "carbon-icons-svelte/lib/Add.svelte";
 </script>
 
-<Button>Primary button</Button>
+<Button data-test-id="btn">Primary button</Button>
 
 <Button kind="secondary">Secondary button</Button>
 

types/Accordion/AccordionItem.svelte.d.ts

@@ -27,6 +27,8 @@ export interface AccordionItemProps
    * @default "Expand/Collapse"
    */
   iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class AccordionItem extends SvelteComponentTyped<

types/Accordion/AccordionSkeleton.svelte.d.ts

@@ -26,6 +26,8 @@ export interface AccordionSkeletonProps
    * @default true
    */
   open?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class AccordionSkeleton extends SvelteComponentTyped<

types/AspectRatio/AspectRatio.svelte.d.ts

@@ -17,6 +17,8 @@ export interface AspectRatioProps
     | "3x2"
     | "9x16"
     | "1x2";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class AspectRatio extends SvelteComponentTyped<

types/Breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -14,6 +14,8 @@ export interface BreadcrumbItemProps
    * @default false
    */
   isCurrentPage?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class BreadcrumbItem extends SvelteComponentTyped<

types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts

@@ -14,6 +14,8 @@ export interface BreadcrumbSkeletonProps
    * @default 3
    */
   count?: number;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class BreadcrumbSkeleton extends SvelteComponentTyped<

types/Button/Button.svelte.d.ts

@@ -105,6 +105,8 @@ export interface ButtonProps
    * @default null
    */
   ref?: null | HTMLAnchorElement | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Button extends SvelteComponentTyped<

types/Button/ButtonSet.svelte.d.ts

@@ -8,6 +8,8 @@ export interface ButtonSetProps
    * @default false
    */
   stacked?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ButtonSet extends SvelteComponentTyped<

types/Button/ButtonSkeleton.svelte.d.ts

@@ -14,6 +14,8 @@ export interface ButtonSkeletonProps
    * @default "default"
    */
   size?: "default" | "field" | "small" | "lg" | "xl";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ButtonSkeleton extends SvelteComponentTyped<

types/Checkbox/Checkbox.svelte.d.ts

@@ -86,6 +86,8 @@ export interface CheckboxProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Checkbox extends SvelteComponentTyped<

types/Checkbox/CheckboxSkeleton.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   CheckboxSkeletonProps,

types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts

@@ -8,6 +8,8 @@ export interface CodeSnippetSkeletonProps
    * @default "single"
    */
   type?: "single" | "multi";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class CodeSnippetSkeleton extends SvelteComponentTyped<

types/ComboBox/ComboBox.svelte.d.ts

@@ -152,6 +152,8 @@ export interface ComboBoxProps
    * @default null
    */
   listRef?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ComboBox extends SvelteComponentTyped<

types/ComposedModal/ComposedModal.svelte.d.ts

@@ -44,6 +44,8 @@ export interface ComposedModalProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ComposedModal extends SvelteComponentTyped<

types/ComposedModal/ModalBody.svelte.d.ts

@@ -14,6 +14,8 @@ export interface ModalBodyProps
    * @default false
    */
   hasScrollingContent?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ModalBody extends SvelteComponentTyped<

types/ComposedModal/ModalFooter.svelte.d.ts

@@ -51,6 +51,8 @@ export interface ModalFooterProps
    * @default false
    */
   danger?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ModalFooter extends SvelteComponentTyped<

types/ComposedModal/ModalHeader.svelte.d.ts

@@ -44,6 +44,8 @@ export interface ModalHeaderProps
    * @default "Close"
    */
   iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ModalHeader extends SvelteComponentTyped<

types/ContentSwitcher/ContentSwitcher.svelte.d.ts

@@ -14,6 +14,8 @@ export interface ContentSwitcherProps
    * @default undefined
    */
   size?: "sm" | "xl";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ContentSwitcher extends SvelteComponentTyped<

types/ContentSwitcher/Switch.svelte.d.ts

@@ -33,6 +33,8 @@ export interface SwitchProps
    * @default null
    */
   ref?: null | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Switch extends SvelteComponentTyped<

types/ContextMenu/ContextMenu.svelte.d.ts

@@ -34,6 +34,8 @@ export interface ContextMenuProps
    * @default null
    */
   ref?: null | HTMLUListElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ContextMenu extends SvelteComponentTyped<

types/ContextMenu/ContextMenuOption.svelte.d.ts

@@ -67,6 +67,8 @@ export interface ContextMenuOptionProps
    * @default null
    */
   ref?: null | HTMLLIElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ContextMenuOption extends SvelteComponentTyped<

types/CopyButton/CopyButton.svelte.d.ts

@@ -32,6 +32,8 @@ 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 SvelteComponentTyped<

types/DataTable/DataTable.svelte.d.ts

@@ -176,6 +176,8 @@ export interface DataTableProps
    * @default 0
    */
   page?: number;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class DataTable extends SvelteComponentTyped<

types/DataTable/DataTableSkeleton.svelte.d.ts

@@ -48,6 +48,8 @@ export interface DataTableSkeletonProps
    * @default true
    */
   showToolbar?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class DataTableSkeleton extends SvelteComponentTyped<

types/DataTable/Table.svelte.d.ts

@@ -38,6 +38,8 @@ export interface TableProps
    * @default undefined
    */
   tableStyle?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Table extends SvelteComponentTyped<

types/DataTable/TableBody.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   TableBodyProps,

types/DataTable/TableCell.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   TableCellProps,

types/DataTable/TableContainer.svelte.d.ts

@@ -26,6 +26,8 @@ export interface TableContainerProps
    * @default false
    */
   useStaticWidth?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class TableContainer extends SvelteComponentTyped<

types/DataTable/TableHead.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   TableHeadProps,

types/DataTable/TableHeader.svelte.d.ts

@@ -38,6 +38,8 @@ export interface TableHeaderProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class TableHeader extends SvelteComponentTyped<

types/DataTable/TableRow.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   TableRowProps,

types/DataTable/Toolbar.svelte.d.ts

@@ -8,6 +8,8 @@ export interface ToolbarProps
    * @default "default"
    */
   size?: "sm" | "default";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Toolbar extends SvelteComponentTyped<

types/DataTable/ToolbarBatchActions.svelte.d.ts

@@ -14,6 +14,8 @@ export interface ToolbarBatchActionsProps
    * @default undefined
    */
   active?: undefined | boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ToolbarBatchActions extends SvelteComponentTyped<

types/DataTable/ToolbarSearch.svelte.d.ts

@@ -61,6 +61,8 @@ export interface ToolbarSearchProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ToolbarSearch extends SvelteComponentTyped<

types/DatePicker/DatePicker.svelte.d.ts

@@ -79,6 +79,8 @@ export interface DatePickerProps
    * @default { static: true }
    */
   flatpickrProps?: import("flatpickr/dist/types/options").Options;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class DatePicker extends SvelteComponentTyped<

types/DatePicker/DatePickerInput.svelte.d.ts

@@ -98,6 +98,8 @@ export interface DatePickerInputProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class DatePickerInput extends SvelteComponentTyped<

types/DatePicker/DatePickerSkeleton.svelte.d.ts

@@ -14,6 +14,8 @@ export interface DatePickerSkeletonProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class DatePickerSkeleton extends SvelteComponentTyped<

types/Dropdown/Dropdown.svelte.d.ts

@@ -141,6 +141,8 @@ export interface DropdownProps
    * @default null
    */
   ref?: null | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Dropdown extends SvelteComponentTyped<

types/Dropdown/DropdownSkeleton.svelte.d.ts

@@ -8,6 +8,8 @@ export interface DropdownSkeletonProps
    * @default false
    */
   inline?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class DropdownSkeleton extends SvelteComponentTyped<

types/FileUploader/FileUploader.svelte.d.ts

@@ -68,6 +68,8 @@ export interface FileUploaderProps
    * @default ""
    */
   name?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class FileUploader extends SvelteComponentTyped<

types/FileUploader/FileUploaderButton.svelte.d.ts

@@ -74,6 +74,8 @@ export interface FileUploaderButtonProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class FileUploaderButton extends SvelteComponentTyped<

types/FileUploader/FileUploaderDropContainer.svelte.d.ts

@@ -69,6 +69,8 @@ export interface FileUploaderDropContainerProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class FileUploaderDropContainer extends SvelteComponentTyped<

types/FileUploader/FileUploaderItem.svelte.d.ts

@@ -50,6 +50,8 @@ export interface FileUploaderItemProps
    * @default ""
    */
   name?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class FileUploaderItem extends SvelteComponentTyped<

types/FileUploader/FileUploaderSkeleton.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   FileUploaderSkeletonProps,

types/FileUploader/Filename.svelte.d.ts

@@ -22,6 +22,8 @@ export interface FilenameProps
    * @default false
    */
   invalid?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Filename extends SvelteComponentTyped<

types/FluidForm/FluidForm.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   FluidFormProps,

types/Form/Form.svelte.d.ts

@@ -8,6 +8,8 @@ export interface FormProps
    * @default null
    */
   ref?: null | HTMLFormElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Form extends SvelteComponentTyped<

types/FormGroup/FormGroup.svelte.d.ts

@@ -38,6 +38,8 @@ export interface FormGroupProps
    * @default ""
    */
   legendId?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class FormGroup extends SvelteComponentTyped<

types/FormItem/FormItem.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   FormItemProps,

types/FormLabel/FormLabel.svelte.d.ts

@@ -8,6 +8,8 @@ export interface FormLabelProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class FormLabel extends SvelteComponentTyped<

types/Grid/Column.svelte.d.ts

@@ -78,6 +78,8 @@ export interface ColumnProps
    * @default undefined
    */
   max?: ColumnBreakpoint;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Column extends SvelteComponentTyped<

types/Grid/Grid.svelte.d.ts

@@ -51,6 +51,8 @@ export interface GridProps
    * @default false
    */
   padding?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Grid extends SvelteComponentTyped<

types/Grid/Row.svelte.d.ts

@@ -45,6 +45,8 @@ export interface RowProps
    * @default false
    */
   padding?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Row extends SvelteComponentTyped<

types/ImageLoader/ImageLoader.svelte.d.ts

@@ -45,6 +45,8 @@ export interface ImageLoaderProps
    * @default false
    */
   fadeIn?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ImageLoader extends SvelteComponentTyped<

types/InlineLoading/InlineLoading.svelte.d.ts

@@ -26,6 +26,8 @@ export interface InlineLoadingProps
    * @default 1500
    */
   successDelay?: number;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class InlineLoading extends SvelteComponentTyped<

types/Link/Link.svelte.d.ts

@@ -46,6 +46,8 @@ export interface LinkProps
    * @default null
    */
   ref?: null | HTMLAnchorElement | HTMLParagraphElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Link extends SvelteComponentTyped<

types/ListBox/ListBox.svelte.d.ts

@@ -56,6 +56,8 @@ export interface ListBoxProps
    * @default ""
    */
   warnText?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ListBox extends SvelteComponentTyped<

types/ListBox/ListBoxField.svelte.d.ts

@@ -40,6 +40,8 @@ export interface ListBoxFieldProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ListBoxField extends SvelteComponentTyped<

types/ListBox/ListBoxMenu.svelte.d.ts

@@ -14,6 +14,8 @@ export interface ListBoxMenuProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ListBoxMenu extends SvelteComponentTyped<

types/ListBox/ListBoxMenuIcon.svelte.d.ts

@@ -16,6 +16,8 @@ export interface ListBoxMenuIconProps
    * @default (id) => defaultTranslations[id]
    */
   translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ListBoxMenuIcon extends SvelteComponentTyped<

types/ListBox/ListBoxMenuItem.svelte.d.ts

@@ -20,6 +20,8 @@ export interface ListBoxMenuItemProps
    * @default false
    */
   disabled?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ListBoxMenuItem extends SvelteComponentTyped<

types/ListBox/ListBoxSelection.svelte.d.ts

@@ -28,6 +28,8 @@ export interface ListBoxSelectionProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ListBoxSelection extends SvelteComponentTyped<

types/ListItem/ListItem.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   ListItemProps,

types/Loading/Loading.svelte.d.ts

@@ -32,6 +32,8 @@ export interface LoadingProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Loading extends SvelteComponentTyped<

types/Modal/Modal.svelte.d.ts

@@ -130,6 +130,8 @@ export interface ModalProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Modal extends SvelteComponentTyped<

types/MultiSelect/MultiSelect.svelte.d.ts

@@ -236,6 +236,8 @@ export interface MultiSelectProps
    * @default null
    */
   highlightedId?: null | MultiSelectItemId;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class MultiSelect extends SvelteComponentTyped<

types/Notification/InlineNotification.svelte.d.ts

@@ -62,6 +62,8 @@ export interface InlineNotificationProps
    * @default "Close notification"
    */
   closeButtonDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class InlineNotification extends SvelteComponentTyped<

types/Notification/NotificationButton.svelte.d.ts

@@ -26,6 +26,8 @@ export interface NotificationButtonProps
    * @default "Close icon"
    */
   iconDescription?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class NotificationButton extends SvelteComponentTyped<

types/Notification/ToastNotification.svelte.d.ts

@@ -75,6 +75,8 @@ export interface ToastNotificationProps
    * @default false
    */
   fullWidth?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ToastNotification extends SvelteComponentTyped<

types/NumberInput/NumberInput.svelte.d.ts

@@ -137,6 +137,8 @@ export interface NumberInputProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class NumberInput extends SvelteComponentTyped<

types/NumberInput/NumberInputSkeleton.svelte.d.ts

@@ -8,6 +8,8 @@ export interface NumberInputSkeletonProps
    * @default false
    */
   hideLabel?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class NumberInputSkeleton extends SvelteComponentTyped<

types/OrderedList/OrderedList.svelte.d.ts

@@ -20,6 +20,8 @@ export interface OrderedListProps
    * @default false
    */
   expressive?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class OrderedList extends SvelteComponentTyped<

types/OverflowMenu/OverflowMenu.svelte.d.ts

@@ -75,6 +75,8 @@ export interface OverflowMenuProps
    * @default null
    */
   menuRef?: null | HTMLUListElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class OverflowMenu extends SvelteComponentTyped<

types/OverflowMenu/OverflowMenuItem.svelte.d.ts

@@ -57,6 +57,8 @@ export interface OverflowMenuItemProps
    * @default null
    */
   ref?: null | HTMLAnchorElement | HTMLButtonElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class OverflowMenuItem extends SvelteComponentTyped<

types/Pagination/Pagination.svelte.d.ts

@@ -98,6 +98,8 @@ export interface PaginationProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Pagination extends SvelteComponentTyped<

types/Pagination/PaginationSkeleton.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   PaginationSkeletonProps,

types/PaginationNav/PaginationNav.svelte.d.ts

@@ -44,6 +44,8 @@ export interface PaginationNavProps
    * @default "bottom"
    */
   tooltipPosition?: "top" | "right" | "bottom" | "left" | "outside" | "inside";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class PaginationNav extends SvelteComponentTyped<

types/Popover/Popover.svelte.d.ts

@@ -56,6 +56,8 @@ export interface PopoverProps
    * @default false
    */
   relative?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Popover extends SvelteComponentTyped<

types/ProgressBar/ProgressBar.svelte.d.ts

@@ -56,6 +56,8 @@ export interface ProgressBarProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ProgressBar extends SvelteComponentTyped<

types/ProgressIndicator/ProgressIndicator.svelte.d.ts

@@ -26,6 +26,8 @@ export interface ProgressIndicatorProps
    * @default false
    */
   preventChangeOnClick?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ProgressIndicator extends SvelteComponentTyped<

types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts

@@ -14,6 +14,8 @@ export interface ProgressIndicatorSkeletonProps
    * @default 4
    */
   count?: number;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ProgressIndicatorSkeleton extends SvelteComponentTyped<

types/ProgressIndicator/ProgressStep.svelte.d.ts

@@ -50,6 +50,8 @@ export interface ProgressStepProps
    * @default "ccs-" + Math.random().toString(36)
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class ProgressStep extends SvelteComponentTyped<

types/RadioButton/RadioButton.svelte.d.ts

@@ -62,6 +62,8 @@ export interface RadioButtonProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class RadioButton extends SvelteComponentTyped<

types/RadioButton/RadioButtonSkeleton.svelte.d.ts

@@ -2,7 +2,9 @@
 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 SvelteComponentTyped<
   RadioButtonSkeletonProps,

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -44,6 +44,8 @@ export interface RadioButtonGroupProps
    * @default undefined
    */
   id?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class RadioButtonGroup extends SvelteComponentTyped<

types/RecursiveList/RecursiveList.svelte.d.ts

@@ -21,6 +21,8 @@ export interface RecursiveListProps
    * @default "unordered"
    */
   type?: "unordered" | "ordered" | "ordered-native";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class RecursiveList extends SvelteComponentTyped<

types/Search/Search.svelte.d.ts

@@ -99,6 +99,8 @@ export interface SearchProps
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Search extends SvelteComponentTyped<

types/Search/SearchSkeleton.svelte.d.ts

@@ -8,6 +8,8 @@ export interface SearchSkeletonProps
    * @default "xl"
    */
   size?: "sm" | "lg" | "xl";
+
+  [key: `data-${string}`]: any;
 }
 
 export default class SearchSkeleton extends SvelteComponentTyped<

types/Select/Select.svelte.d.ts

@@ -104,6 +104,8 @@ export interface SelectProps
    * @default false
    */
   required?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Select extends SvelteComponentTyped<

types/Select/SelectItemGroup.svelte.d.ts

@@ -14,6 +14,8 @@ export interface SelectItemGroupProps
    * @default "Provide label"
    */
   label?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class SelectItemGroup extends SvelteComponentTyped<

types/Select/SelectSkeleton.svelte.d.ts

@@ -8,6 +8,8 @@ export interface SelectSkeletonProps
    * @default false
    */
   hideLabel?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class SelectSkeleton extends SvelteComponentTyped<

types/SkeletonPlaceholder/SkeletonPlaceholder.svelte.d.ts

@@ -2,7 +2,9 @@
 import type { SvelteComponentTyped } from "svelte";
 
 export interface SkeletonPlaceholderProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
 export default class SkeletonPlaceholder extends SvelteComponentTyped<
   SkeletonPlaceholderProps,

types/SkeletonText/SkeletonText.svelte.d.ts

@@ -26,6 +26,8 @@ export interface SkeletonTextProps
    * @default "100%"
    */
   width?: string;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class SkeletonText extends SvelteComponentTyped<

types/Slider/Slider.svelte.d.ts

@@ -111,6 +111,8 @@ export interface SliderProps
    * @default null
    */
   ref?: null | HTMLDivElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Slider extends SvelteComponentTyped<

types/Slider/SliderSkeleton.svelte.d.ts

@@ -8,6 +8,8 @@ export interface SliderSkeletonProps
    * @default false
    */
   hideLabel?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class SliderSkeleton extends SvelteComponentTyped<

types/StructuredList/StructuredList.svelte.d.ts

@@ -26,6 +26,8 @@ export interface StructuredListProps
    * @default false
    */
   selection?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class StructuredList extends SvelteComponentTyped<

types/StructuredList/StructuredListBody.svelte.d.ts

@@ -2,7 +2,9 @@
 import type { SvelteComponentTyped } from "svelte";
 
 export interface StructuredListBodyProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
 export default class StructuredListBody extends SvelteComponentTyped<
   StructuredListBodyProps,

types/StructuredList/StructuredListCell.svelte.d.ts

@@ -14,6 +14,8 @@ export interface StructuredListCellProps
    * @default false
    */
   noWrap?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class StructuredListCell extends SvelteComponentTyped<

types/StructuredList/StructuredListHead.svelte.d.ts

@@ -2,7 +2,9 @@
 import type { SvelteComponentTyped } from "svelte";
 
 export interface StructuredListHeadProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  [key: `data-${string}`]: any;
+}
 
 export default class StructuredListHead extends SvelteComponentTyped<
   StructuredListHeadProps,