feat: upgrade Button to v11 styles

Button changes

##BREAKING CHANGES

- `skeleton` prop has been removed. Use `ButtonSkeleton` component instead
- `size` prop has new values
- `kind` prop has new values
- `isSelected` is now `selected
- `on:mouseover`, `on:mouseenter`, and `on:mouseleave` forwarded events were replaced with `on:pointerover`, `on:pointerenter`, and `on:pointerleave`
- `as` no longer accepts boolean types

## Features

- New `2xl` size
- `expressive` styles now apply to all button sizes
- `as` accepts a string to specify a desired HTML element

COMPONENT_INDEX.md

@@ -373,39 +373,40 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 ### Props
 
 | Prop name                                                                                             | Required        | Kind                              | Reactive | Type                                                                                                                                        | Default value          | Description                                                                                   |
-| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :---------------------------------------------------------------------------------------------------- | :-------------- | :-------------------------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- |
-| ref              | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                         | <code>null</code>      | Obtain a reference to the HTML element                                                                                                                                                        |
+| ref                                                                                                   | No              | <code>let</code>                  | Yes      | <code>null &#124; HTMLElement</code>                                                                                                        | <code>null</code>      | Obtain a reference to the HTML element                                                        |
 | kind                                                                                                  | No              | <code>let</code>                  | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger--tertiary" &#124; "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button                                                                    |
 | size                                                                                                  | No              | <code>let</code>                  | No       | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code>                                                                          | <code>"lg"</code>      | Specify the size of button                                                                    |
 | expressive                                                                                            | No              | <code>let</code>                  | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                          |
-| isSelected       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
+| selected                                                                                              | No              | <code>let</code>                  | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                     |
 | icon                                                                                                  | No              | <code>let</code>                  | No       | <code>typeof import("svelte").SvelteComponent<any></code>                                                                                   | <code>undefined</code> | Specify the icon to render                                                                    |
 | iconDescription                                                                                       | No              | <code>let</code>                  | No       | <code>string</code>                                                                                                                         | <code>undefined</code> | Specify the ARIA label for the button icon                                                    |
 | tooltipAlignment                                                                                      | No              | <code>let</code>                  | No       | <code>"start" &#124; "center" &#124; "end"</code>                                                                                           | <code>"center"</code>  | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
 | tooltipPosition                                                                                       | No              | <code>let</code>                  | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                                                                             | <code>"bottom"</code>  | Set the position of the tooltip relative to the icon                                          |
-| as               | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) |
+| as                                                                                                    | No              | <code>let</code>                  | No       | <code>keyof import('svelte/elements').SvelteHTMLElements</code>                                                                             | <code>undefined</code> | Specify an element name to render as the button.<br />Be sure to provide                      |
-| skeleton         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to display the skeleton state                                                                                                                                                   |
 | disabled                                                                                              | No              | <code>let</code>                  | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to disable the button                                                           |
 | href                                                                                                  | No              | <code>let</code>                  | No       | <code>string</code>                                                                                                                         | <code>undefined</code> | Set the `href` to use an anchor link                                                          |
 | tabindex                                                                                              | No              | <code>let</code>                  | No       | <code>string</code>                                                                                                                         | <code>"0"</code>       | Specify the tabindex                                                                          |
 | type                                                                                                  | No              | <code>let</code>                  | No       | <code>string</code>                                                                                                                         | <code>"button"</code>  | Specify the `type` attribute for the button element                                           |
+| buttonAttributes                                                                                      | No              | <code>let</code>                  | No       | <code>import('svelte/elements').HTMLAnchorAttributes &#124;                                                                                 |
+| import('svelte/elements').HTMLButtonAttributes &#124; import('svelte/elements').HTMLAttributes</code> | <code>{}</code> | Button, anchor, or div attributes |
 
 ### Slots
 
 | Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
+| :-------- | :------ | :---- | :------- |
-| --        | Yes     | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | --       |
+| --        | Yes     | --    | --       |
 
 ### Events
 
 | Event name   | Type      | Detail |
-| :--------- | :-------- | :----- |
+| :----------- | :-------- | :----- |
 | click        | forwarded | --     |
 | focus        | forwarded | --     |
 | blur         | forwarded | --     |
-| mouseover  | forwarded | --     |
+| pointerover  | forwarded | --     |
-| mouseenter | forwarded | --     |
+| pointerenter | forwarded | --     |
-| mouseleave | forwarded | --     |
+| pointerleave | forwarded | --     |
 
 ## `ButtonSet`
 

css/all.scss

@@ -1,7 +1,9 @@
+$prefix: 'bx';
+
 // Use all Carbon themes
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
-  $prefix: 'bx'
+  $prefix: $prefix
 );
 @use "@carbon/styles" as styles;
 @use "@carbon/styles/scss/utilities" as *;
@@ -22,9 +24,9 @@
   @include styles.theme(styles.$g100);
 }
 
-.bx--text-truncate-end {
+.#{$prefix}--text-truncate-end {
   @include text-truncate-end;
 }
-.bx--text-truncate-front {
+.#{$prefix}--text-truncate-front {
   @include text-truncate-front;
 }

docs/src/COMPONENT_API.json

@@ -486,7 +486,7 @@
           "reactive": false
         },
         {
-          "name": "isSelected",
+          "name": "selected",
           "kind": "let",
           "description": "Set to `true` to enable the selected state for an icon-only, ghost button",
           "type": "boolean",
@@ -546,21 +546,8 @@
         {
           "name": "as",
           "kind": "let",
-          "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)",
+          "description": "Specify an element name to render as the button.\nBe sure to provide",
-          "type": "boolean",
+          "type": "keyof import('svelte/elements').SvelteHTMLElements",
-          "value": "false",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "skeleton",
-          "kind": "let",
-          "description": "Set to `true` to display the skeleton state",
-          "type": "boolean",
-          "value": "false",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -618,49 +605,50 @@
           "name": "ref",
           "kind": "let",
           "description": "Obtain a reference to the HTML element",
-          "type": "null | HTMLAnchorElement | HTMLButtonElement",
+          "type": "null | HTMLElement",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
           "constant": false,
           "reactive": true
+        },
+        {
+          "name": "buttonAttributes",
+          "kind": "let",
+          "description": "Button, anchor, or div attributes",
+          "type": "import('svelte/elements').HTMLAnchorAttributes |\nimport('svelte/elements').HTMLButtonAttributes | import('svelte/elements').HTMLAttributes",
+          "value": "{}",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],
-      "slots": [
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-        {
-          "name": "__default__",
-          "default": true,
-          "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
-        }
-      ],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
+        { "type": "forwarded", "name": "click", "element": "svelte:element" },
-        { "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" },
+        { "type": "forwarded", "name": "focus", "element": "svelte:element" },
-        { "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" },
+        { "type": "forwarded", "name": "blur", "element": "svelte:element" },
         {
           "type": "forwarded",
-          "name": "mouseover",
+          "name": "pointerover",
-          "element": "ButtonSkeleton"
+          "element": "svelte:element"
         },
         {
           "type": "forwarded",
-          "name": "mouseenter",
+          "name": "pointerenter",
-          "element": "ButtonSkeleton"
+          "element": "svelte:element"
         },
         {
           "type": "forwarded",
-          "name": "mouseleave",
+          "name": "pointerleave",
-          "element": "ButtonSkeleton"
+          "element": "svelte:element"
         }
       ],
-      "typedefs": [],
+      "typedefs": []
-      "rest_props": { "type": "Element", "name": "button | a | div" },
-      "extends": {
-        "interface": "ButtonSkeletonProps",
-        "import": "\"./ButtonSkeleton.svelte\""
-      }
     },
     {
       "moduleName": "ButtonSet",

docs/src/pages/components/Button.svx

@@ -36,7 +36,7 @@
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
-    You must provide an <strong>iconDescription</strong> for the button tooltip.
+    You must provide an <strong>iconDescription</strong> for screen readers.
   </div>
 </InlineNotification>
 
@@ -54,7 +54,7 @@
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
-    You must provide an <strong>iconDescription</strong> for the button tooltip.
+    You must provide an <strong>iconDescription</strong> for screen readers.
   </div>
 </InlineNotification>
 
@@ -84,41 +84,20 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 ## Custom element
 
-<Button as let:props>
+<Button as="div">
-  <p {...props}>Custom element</p>
+  Custom element
 </Button>
 
-## Field size
+## Sizes
 
-<Button size="md">Primary</Button>
+Button is available in small, medium, large, extra-large, and double-extra-large.
-<Button size="md" kind="secondary">Secondary</Button>
+Use `md` (default) when used with form fields.
-<Button size="md" kind="tertiary">Tertiary</Button>
-<Button size="md" kind="ghost">Ghost</Button>
-<Button size="md" kind="danger">Danger</Button>
 
-## Small size
+<Button size="sm">Small</Button>
-
+<Button size="md">Medium</Button>
-<Button size="sm">Primary</Button>
+<Button size="lg">Large</Button>
-<Button size="sm" kind="secondary">Secondary</Button>
+<Button size="xl">Extra Large</Button>
-<Button size="sm" kind="tertiary">Tertiary</Button>
+<Button size="2xl">Double extra Large</Button>
-<Button size="sm" kind="ghost">Ghost</Button>
-<Button size="sm" kind="danger">Danger</Button>
-
-## Large size
-
-<Button size="xl">Primary</Button>
-<Button size="xl" kind="secondary">Secondary</Button>
-<Button size="xl" kind="tertiary">Tertiary</Button>
-<Button size="xl" kind="ghost">Ghost</Button>
-<Button size="xl" kind="danger">Danger</Button>
-
-## Extra-large size
-
-<Button size="2xl">Primary</Button>
-<Button size="2xl" kind="secondary">Secondary</Button>
-<Button size="2xl" kind="tertiary">Tertiary</Button>
-<Button size="2xl" kind="ghost">Ghost</Button>
-<Button size="2xl" kind="danger">Danger</Button>
 
 ## Disabled state
 
@@ -129,12 +108,6 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 
-<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    Expressive styles only work with the default, "lg", and "xl" button sizes.
-  </div>
-</InlineNotification>
-
 <Button expressive size="xl">Primary</Button>
 <Button expressive size="xl" kind="secondary">Secondary</Button>
 <Button expressive size="xl" kind="tertiary">Tertiary</Button>
@@ -153,13 +126,19 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
 <Button expressive kind="ghost">Ghost</Button>
 <Button expressive kind="danger">Danger</Button>
 
+## Additional attributes
+
+Use `buttonAttributes` to pass any additional attributes.
+
+<Button buttonAttributes={{class: 'ready'}}>Ready</Button>
+
 ## Skeleton
 
-<Button size="xl" skeleton />
+<!-- <Button size="xl" skeleton />
 <Button size="lg" skeleton />
 <Button skeleton />
 <Button skeleton size="field" />
-<Button skeleton size="small" />
+<Button skeleton size="small" /> -->
 
 ## Programmatic focus
 

src/Button/Button.svelte

@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @extends {"./ButtonSkeleton.svelte"} ButtonSkeletonProps
-   * @restProps {button | a | div}
-   * @slot {{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
-   */
-
   /**
    * Specify the kind of button
    * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"}
@@ -23,7 +17,7 @@
   /**
    * Set to `true` to enable the selected state for an icon-only, ghost button
    */
-  export let isSelected = false;
+  export let selected = false;
 
   /**
    * Specify the icon to render
@@ -51,13 +45,11 @@
   export let tooltipPosition = "bottom";
 
   /**
-   * Set to `true` to render a custom HTML element
+   * Specify an element name to render as the button.
-   * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
+   * Be sure to provide
+   * @type {keyof import('svelte/elements').SvelteHTMLElements}
    */
-  export let as = false;
+  export let as = undefined;
-
-  /** Set to `true` to display the skeleton state */
-  export let skeleton = false;
 
   /** Set to `true` to disable the button */
   export let disabled = false;
@@ -77,8 +69,14 @@
   /** Obtain a reference to the HTML element */
   export let ref = null;
 
+  /**
+   * Button, anchor, or div attributes
+   * @type {import('svelte/elements').HTMLAnchorAttributes |
+   * import('svelte/elements').HTMLButtonAttributes | import('svelte/elements').HTMLAttributes}
+   */
+  export let buttonAttributes = {};
+
   import { getContext } from "svelte";
-  import ButtonSkeleton from "./ButtonSkeleton.svelte";
 
   const ctx = getContext("ComposedModal");
 
@@ -92,21 +90,12 @@
     disabled: disabled === true ? true : undefined,
     href,
     "aria-pressed":
-      hasIconOnly && kind === "ghost" && !href ? isSelected : undefined,
+      hasIconOnly && kind === "ghost" && !href ? selected : undefined,
-    ...$$restProps,
     class: [
       "bx--btn",
       expressive && "bx--btn--expressive",
-      ((size === "small" && !expressive) ||
+      `bx--layout--size-${size}`,
-        (size === "sm" && !expressive) ||
+      `bx--btn--${kind}`,
-        (size === "small" && !expressive)) &&
-        "bx--btn--sm",
-      ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
-        "bx--btn--md",
-      size === "small" && "bx--btn--sm",
-      size === "xl" && "bx--btn--xl",
-      size === "2xl" && "bx--btn--2xl",
-      kind && `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",
       hasIconOnly && "bx--btn--icon-only",
       hasIconOnly && "bx--tooltip__trigger",
@@ -117,66 +106,73 @@
       hasIconOnly &&
         tooltipAlignment &&
         `bx--tooltip--align-${tooltipAlignment}`,
-      hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
+      hasIconOnly && selected && kind === "ghost" && "bx--btn--selected",
-      $$restProps.class,
     ]
       .filter(Boolean)
       .join(" "),
   };
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-{#if skeleton}
-  <ButtonSkeleton
-    href="{href}"
-    size="{size}"
-    {...$$restProps}
-    style="{hasIconOnly && 'width: 3rem;'}"
-    on:click
-    on:focus
-    on:blur
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-  />
-{:else if as}
-  <slot props="{buttonProps}" />
-{:else if href && !disabled}
-  <!-- svelte-ignore a11y-missing-attribute -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <a
+<svelte:element
+  this="{as || (href && 'a') || 'button'}"
   bind:this="{ref}"
-    {...buttonProps}
+  type="{href && !disabled ? undefined : type}"
+  tab-index="{tabindex}"
+  disabled="{disabled}"
+  href="{href}"
+  aria-pressed="{hasIconOnly && kind === 'ghost' && !href
+    ? selected
+    : undefined}"
+  class:bx--btn="{true}"
+  class:bx--btn--expressive="{expressive}"
+  class:bx--layout--size-sm="{size === 'sm'}"
+  class:bx--layout--size-md="{size === 'md'}"
+  class:bx--layout--size-lg="{size === 'lg'}"
+  class:bx--layout--size-xl="{size === 'xl'}"
+  class:bx--layout--size-2xl="{size === '2xl'}"
+  class:bx--btn--primary="{kind === 'primary'}"
+  class:bx--btn--secondary="{kind === 'secondary'}"
+  class:bx--btn--tertiary="{kind === 'tertiary'}"
+  class:bx--btn--ghost="{kind === 'ghost'}"
+  class:bx--btn--danger="{kind === 'danger'}"
+  class:bx--btn--danger--tertiary="{kind === 'danger--tertiary'}"
+  class:bx--btn--danger--ghost="{kind === 'danger--ghost'}"
+  class:bx--btn--icon-only="{hasIconOnly}"
+  class:bx--btn--icon-only--top="{hasIconOnly &&
+    tooltipPosition &&
+    tooltipPosition === 'top'}"
+  class:bx--btn--icon-only--right="{hasIconOnly &&
+    tooltipPosition &&
+    tooltipPosition === 'right'}"
+  class:bx--btn--icon-only--bottom="{hasIconOnly &&
+    tooltipPosition &&
+    tooltipPosition === 'bottom'}"
+  class:bx--btn--icon-only--left="{hasIconOnly &&
+    tooltipPosition &&
+    tooltipPosition === 'left'}"
+  class:bx--btn--icon-only--start="{hasIconOnly &&
+    tooltipAlignment &&
+    tooltipAlignment === 'start'}"
+  class:bx--btn--icon-only--center="{hasIconOnly &&
+    tooltipAlignment &&
+    tooltipAlignment === 'center'}"
+  class:bx--btn--icon-only--end="{hasIconOnly &&
+    tooltipAlignment &&
+    tooltipAlignment === 'end'}"
+  class:bx--tooltip="{hasIconOnly}"
+  {...buttonAttributes}
   on:click
   on:focus
   on:blur
-    on:mouseover
+  on:pointerover
-    on:mouseenter
+  on:pointerenter
-    on:mouseleave
+  on:pointerleave
 >
   {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
+    <span class:bx--assistive-text="{true}" class:bx--tooltip-content="{true}"
-    {/if}
+      >{iconDescription}</span
-    <slot /><svelte:component
-      this="{icon}"
-      aria-hidden="true"
-      class="bx--btn__icon"
-      aria-label="{iconDescription}"
-    />
-  </a>
-{:else}
-  <button
-    bind:this="{ref}"
-    {...buttonProps}
-    on:click
-    on:focus
-    on:blur
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
     >
-    {#if hasIconOnly}
-      <span class:bx--assistive-text="{true}">{iconDescription}</span>
   {/if}
   <slot /><svelte:component
     this="{icon}"
@@ -185,5 +181,4 @@
     style="{hasIconOnly ? 'margin-left: 0' : undefined}"
     aria-label="{iconDescription}"
   />
-  </button>
+</svelte:element>
-{/if}

types/Button/Button.svelte.d.ts

@@ -1,13 +1,6 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
 
-import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte";
+export interface ButtonProps {
-
-type RestProps = SvelteHTMLElements["button"] &
-  SvelteHTMLElements["a"] &
-  SvelteHTMLElements["div"];
-
-export interface ButtonProps extends ButtonSkeletonProps, RestProps {
   /**
    * Specify the kind of button
    * @default "primary"
@@ -37,7 +30,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
    * Set to `true` to enable the selected state for an icon-only, ghost button
    * @default false
    */
-  isSelected?: boolean;
+  selected?: boolean;
 
   /**
    * Specify the icon to render
@@ -65,17 +58,11 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
   tooltipPosition?: "top" | "right" | "bottom" | "left";
 
   /**
-   * Set to `true` to render a custom HTML element
+   * Specify an element name to render as the button.
-   * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
+   * Be sure to provide
-   * @default false
+   * @default undefined
    */
-  as?: boolean;
+  as?: keyof import("svelte/elements").SvelteHTMLElements;
-
-  /**
-   * Set to `true` to display the skeleton state
-   * @default false
-   */
-  skeleton?: boolean;
 
   /**
    * Set to `true` to disable the button
@@ -105,9 +92,16 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
    * Obtain a reference to the HTML element
    * @default null
    */
-  ref?: null | HTMLAnchorElement | HTMLButtonElement;
+  ref?: null | HTMLElement;
 
-  [key: `data-${string}`]: any;
+  /**
+   * Button, anchor, or div attributes
+   * @default {}
+   */
+  buttonAttributes?:
+    | import("svelte/elements").HTMLAnchorAttributes
+    | import("svelte/elements").HTMLButtonAttributes
+    | import("svelte/elements").HTMLAttributes;
 }
 
 export default class Button extends SvelteComponentTyped<
@@ -116,21 +110,9 @@ export default class Button extends SvelteComponentTyped<
     click: WindowEventMap["click"];
     focus: WindowEventMap["focus"];
     blur: WindowEventMap["blur"];
-    mouseover: WindowEventMap["mouseover"];
+    pointerover: WindowEventMap["pointerover"];
-    mouseenter: WindowEventMap["mouseenter"];
+    pointerenter: WindowEventMap["pointerenter"];
-    mouseleave: WindowEventMap["mouseleave"];
+    pointerleave: WindowEventMap["pointerleave"];
   },
-  {
+  { default: {} }
-    default: {
-      props: {
-        role: "button";
-        type?: string;
-        tabindex: any;
-        disabled: boolean;
-        href?: string;
-        class: string;
-        [key: string]: any;
-      };
-    };
-  }
 > {}