feat: add prop types for HTML props for components

packages/banner/Banner.types.ts

@@ -1 +1,31 @@
+import type Component from './Banner.svelte';
+
+export declare class BannerComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    keyof Component['$$prop_def']
+  > &
+    {
+      [k in keyof Partial<
+        svelte.JSX.HTMLAttributes<HTMLDivElement>
+      > as `textWrapper\$${k}`]?: Partial<
+        svelte.JSX.HTMLAttributes<HTMLDivElement>
+      >[k];
+    } &
+    {
+      [k in keyof Partial<
+        svelte.JSX.HTMLAttributes<HTMLDivElement>
+      > as `graphic\$${k}`]?: Partial<
+        svelte.JSX.HTMLAttributes<HTMLDivElement>
+      >[k];
+    } &
+    Component['$$prop_def'];
+}
+
 export { CloseReason } from '@material/banner';

packages/banner/ambient.d.ts

@@ -1,4 +1,6 @@
 declare namespace svelte.JSX {
+  interface HTMLAttributes<T> {}
+
   interface HTMLProps<T extends EventTarget> extends HTMLAttributes<T> {
     ['onSMUIBannerButton:primaryActionClick']?: (
       event: CustomEvent<any> & { target: T }

packages/banner/index.ts

@@ -1,8 +1,9 @@
 import Banner from './Banner.svelte';
+import type { BannerComponentDev } from './Banner.types';
 export * from './Banner.types';
 
 import { Label, Icon } from '@smui/common';
 
-export default Banner;
+export default Banner as typeof BannerComponentDev;
 
 export { Label, Icon };

packages/button/Button.svelte

@@ -61,8 +61,7 @@
     ActionArray,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
-  import A from '@smui/common/A.svelte';
-  import Button from '@smui/common/Button.svelte';
+  import { A, Button } from '@smui/common/elements';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 

packages/button/Button.types.ts

@@ -0,0 +1,19 @@
+import type { SMUIComponent } from '@smui/common';
+import type Component from './Button.svelte';
+import type { ButtonComponentDev as ButtonElementComponentDev } from '@smui/common/elements';
+
+export declare class ButtonComponentDev<
+  C extends SMUIComponent = ButtonElementComponentDev
+> extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<ReturnType<C['getElement']>>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/button/Group.types.ts

@@ -0,0 +1,15 @@
+import type Component from './Group.svelte';
+
+export declare class GroupComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/button/GroupItem.ts

@@ -1,14 +1,12 @@
-export type GroupItemProps = {
-  addClass?: (className: string) => void;
-  removeClass?: (className: string) => void;
-};
-
 export default function GroupItem(
   node: Element,
   {
     addClass = (className) => node.classList.add(className),
     removeClass = (className) => node.classList.remove(className),
-  }: GroupItemProps = {}
+  }: {
+    addClass?: (className: string) => void;
+    removeClass?: (className: string) => void;
+  } = {}
 ) {
   addClass('smui-button__group-item');
 

packages/button/ambient.d.ts

@@ -0,0 +1,3 @@
+declare namespace svelte.JSX {
+  interface HTMLAttributes<T> {}
+}

packages/button/index.ts

@@ -1,10 +1,14 @@
 import Button from './Button.svelte';
+import type { ButtonComponentDev } from './Button.types';
+export * from './Button.types';
 
-import Group from './Group.svelte';
-export * from './GroupItem';
+import GroupComponent from './Group.svelte';
+import type { GroupComponentDev } from './Group.types';
+export * from './Group.types';
+const Group = GroupComponent as typeof GroupComponentDev;
 import GroupItem from './GroupItem';
 import { Label, Icon } from '@smui/common';
 
-export default Button;
+export default Button as typeof ButtonComponentDev;
 
 export { Group, GroupItem, Label, Icon };

packages/card/ActionButtons.ts

@@ -1,8 +1,7 @@
-import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
-import Div from '@smui/common/Div.svelte';
+import { Div } from '@smui/common/elements';
 
 export default classAdderBuilder({
   class: 'mdc-card__action-buttons',
-  component: Div as typeof SMUIComponent,
+  component: Div,
 });

packages/card/ActionIcons.ts

@@ -1,8 +1,7 @@
-import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
-import Div from '@smui/common/Div.svelte';
+import { Div } from '@smui/common/elements';
 
 export default classAdderBuilder({
   class: 'mdc-card__action-icons',
-  component: Div as typeof SMUIComponent,
+  component: Div,
 });

packages/card/Actions.types.ts

@@ -0,0 +1,15 @@
+import type Component from './Actions.svelte';
+
+export declare class ActionsComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/card/Card.types.ts

@@ -0,0 +1,15 @@
+import type Component from './Card.svelte';
+
+export declare class CardComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/card/Content.ts

@@ -1,8 +1,7 @@
-import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
-import Div from '@smui/common/Div.svelte';
+import { Div } from '@smui/common/elements';
 
 export default classAdderBuilder({
   class: 'smui-card__content',
-  component: Div as typeof SMUIComponent,
+  component: Div,
 });

packages/card/Media.types.ts

@@ -0,0 +1,15 @@
+import type Component from './Media.svelte';
+
+export declare class MediaComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/card/MediaContent.ts

@@ -1,8 +1,7 @@
-import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
-import Div from '@smui/common/Div.svelte';
+import { Div } from '@smui/common/elements';
 
 export default classAdderBuilder({
   class: 'mdc-card__media-content',
-  component: Div as typeof SMUIComponent,
+  component: Div,
 });

packages/card/PrimaryAction.types.ts

@@ -0,0 +1,15 @@
+import type Component from './PrimaryAction.svelte';
+
+export declare class PrimaryActionComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/card/ambient.d.ts

@@ -0,0 +1,3 @@
+declare namespace svelte.JSX {
+  interface HTMLAttributes<T> {}
+}

packages/card/index.ts

@@ -1,14 +1,25 @@
 import Card from './Card.svelte';
+import type { CardComponentDev } from './Card.types';
+export * from './Card.types';
 
 import Content from './Content';
-import PrimaryAction from './PrimaryAction.svelte';
-import Media from './Media.svelte';
+import PrimaryActionComponent from './PrimaryAction.svelte';
+import type { PrimaryActionComponentDev } from './PrimaryAction.types';
+export * from './PrimaryAction.types';
+const PrimaryAction = PrimaryActionComponent as typeof PrimaryActionComponentDev;
+import MediaComponent from './Media.svelte';
+import type { MediaComponentDev } from './Media.types';
+export * from './Media.types';
+const Media = MediaComponent as typeof MediaComponentDev;
 import MediaContent from './MediaContent';
-import Actions from './Actions.svelte';
+import ActionsComponent from './Actions.svelte';
+import type { ActionsComponentDev } from './Actions.types';
+export * from './Actions.types';
+const Actions = ActionsComponent as typeof ActionsComponentDev;
 import ActionButtons from './ActionButtons';
 import ActionIcons from './ActionIcons';
 
-export default Card;
+export default Card as typeof CardComponentDev;
 
 export {
   Content,

packages/checkbox/Checkbox.types.ts

@@ -0,0 +1,27 @@
+import type Component from './Checkbox.svelte';
+
+export declare class CheckboxComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    keyof Component['$$prop_def']
+  > &
+    {
+      [k in keyof Partial<
+        svelte.JSX.HTMLAttributes<HTMLInputElement>
+      > as `input\$${k}`]?: Partial<
+        svelte.JSX.HTMLAttributes<HTMLInputElement>
+      >[k];
+    } & {
+      input$type?: never;
+      input$disabled?: never;
+      input$value?: never;
+      input$checked?: never;
+      input$group?: never;
+    } & Component['$$prop_def'];
+}

packages/checkbox/ambient.d.ts

@@ -0,0 +1,3 @@
+declare namespace svelte.JSX {
+  interface HTMLAttributes<T> {}
+}

packages/checkbox/index.ts

@@ -1,3 +1,5 @@
 import Checkbox from './Checkbox.svelte';
+import type { CheckboxComponentDev } from './Checkbox.types';
+export * from './Checkbox.types';
 
-export default Checkbox;
+export default Checkbox as typeof CheckboxComponentDev;

packages/chips/Checkmark.types.ts

@@ -0,0 +1,15 @@
+import type Component from './Checkmark.svelte';
+
+export declare class CheckmarkComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLSpanElement>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/chips/Chip.svelte

@@ -68,7 +68,7 @@
     ActionArray,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
-  import Div from '@smui/common/Div.svelte';
+  import { Div } from '@smui/common/elements';
 
   import type { SMUIChipsPrimaryActionAccessor } from './Text.types';
   import type { SMUIChipsTrailingActionAccessor } from './TrailingAction.types';

packages/chips/Chip.types.ts

@@ -1,3 +1,23 @@
+import type { SMUIComponent } from '@smui/common';
+import type Component from './Chip.svelte';
+import type { DivComponentDev as DivElementComponentDev } from '@smui/common/elements';
+
+export declare class ChipComponentDev<
+  C extends SMUIComponent = DivElementComponentDev
+> extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<ReturnType<C['getElement']>>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}
+
 export interface SMUIChipsChipAccessor {
   chipId: any;
   readonly selected: boolean;

packages/chips/LeadingIcon.types.ts

@@ -0,0 +1,15 @@
+import type Component from './LeadingIcon.svelte';
+
+export declare class LeadingIconComponentDev extends Component {
+  /**
+   * @private
+   * For type checking capabilities only.
+   * Does not exist at runtime.
+   * ### DO NOT USE!
+   */
+  $$prop_def: Omit<
+    Partial<svelte.JSX.HTMLAttributes<HTMLElement>>,
+    keyof Component['$$prop_def']
+  > &
+    Component['$$prop_def'];
+}

packages/chips/Set.svelte

@@ -50,7 +50,7 @@
     useActions,
     ActionArray,
   } from '@smui/common/internal';
-  import ContextFragment from '@smui/common/ContextFragment.svelte';
+  import { ContextFragment } from '@smui/common';
 
   import type { SMUIChipsChipAccessor } from './Chip.types';