fix: omit React.HTMLAttributes from the HTMLElement props to be excluded

src/utils/createComponent.ts

@@ -64,11 +64,12 @@ type AllWebComponentProps<I extends HTMLElement, E extends EventNames = {}> = I
   ? ThemedWebComponentProps<I, E>
   : _WebComponentProps<I, E>;
 
+type OmittedWebComponentProps = Omit<HTMLElement, keyof React.HTMLAttributes<any>> & ControllerMixinClass;
+
 export type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Omit<
   AllWebComponentProps<I, E>,
-  keyof HTMLElement | keyof ControllerMixinClass
-> &
-  React.HTMLAttributes<I>;
+  keyof OmittedWebComponentProps
+>;
 
 // We need a separate declaration here; otherwise, the TypeScript fails into the
 // endless loop trying to resolve the typings.

test/typings/api.ts

@@ -3,6 +3,11 @@ import { TextField, TextFieldElement } from '../../TextField.js';
 import type { LitElement } from 'lit';
 import { GridColumn, GridColumnElement } from '../../GridColumn.js';
 import { Dialog, DialogElement } from '../../Dialog.js';
+import { DatePicker, DatePickerElement } from '../../DatePicker.js';
+import { TimePicker, type TimePickerChangeEvent } from '../../TimePicker.js';
+import { TextArea, TextAreaElement, type TextAreaChangeEvent } from '../../TextArea.js';
+import { MessageInput, MessageInputElement, type MessageInputSubmitEvent } from '../../MessageInput.js';
+import { ComboBox, type ComboBoxChangeEvent } from '../../ComboBox.js';
 
 const assertType = <TExpected>(value: TExpected) => value;
 const assertOmitted = <C, T>(prop: keyof Omit<C, keyof T>) => prop;
@@ -57,3 +62,34 @@ type DialogProps = typeof dialogProps;
 assertType<DialogElement['ariaLabel'] | undefined>(dialogProps['aria-label']);
 
 assertType<DialogProps['footer']>(dialogProps.footer);
+
+const datePickerProps = React.createElement(DatePicker, {}).props;
+type DatePickerProps = typeof datePickerProps;
+
+const datePickerOnChange: typeof datePickerProps.onChange = (event) => {
+  assertType<DatePickerElement['value']>(event.target.value);
+};
+
+const comboBoxProps = React.createElement(ComboBox, {}).props;
+
+assertType<typeof comboBoxProps.onChange>((_event: ComboBoxChangeEvent<any>) => {});
+
+const messageInputProps = React.createElement(MessageInput, {}).props;
+
+const messageInputOnSubmit: typeof messageInputProps.onSubmit = (event) => {
+  assertType<MessageInputElement['value']>(event.detail.value);
+};
+
+assertType<typeof messageInputProps.onSubmit>((_event: MessageInputSubmitEvent) => {});
+
+const textAreaProps = React.createElement(TextArea, {}).props;
+
+assertType<typeof textAreaProps.onChange>((_event: TextAreaChangeEvent) => {});
+
+const textAreaOnChange: typeof textAreaProps.onChange = (event) => {
+  assertType<TextAreaElement['value']>(event.target.value);
+};
+
+const timePickerProps = React.createElement(TimePicker, {}).props;
+
+assertType<typeof timePickerProps.onChange>((_event: TimePickerChangeEvent) => {});