mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: upgrade Button to v11 styles

Browse source 
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
This commit is contained in:
Enrico Sacchetti 2024-01-16 16:30:06 -05:00
commit 997cc1fa5e
6 changed files with 184 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

57
COMPONENT_INDEX.md
View file

@ -372,40 +372,41 @@ 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 |
| 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 |
| 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;) |
| 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 |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------------------------------------------------------------------------------------------------- | :-------------- | :-------------------------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- |
| 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 |
| 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>keyof import('svelte/elements').SvelteHTMLElements</code> | <code>undefined</code> | Specify an element name to render as the button.<br />Be sure to provide |
| 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> | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| Event name | Type | Detail |
| :----------- | :-------- | :----- |
| click | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| pointerover | forwarded | -- |
| pointerenter | forwarded | -- |
| pointerleave | forwarded | -- |
## `ButtonSet`

8
css/all.scss
View file

@ -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;
}

66
docs/src/COMPONENT_API.json
View file

@ -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>)",
"type": "boolean",
"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",
"description": "Specify an element name to render as the button.\nBe sure to provide",
"type": "keyof import('svelte/elements').SvelteHTMLElements",
"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": [
{
"name": "__default__",
"default": true,
"slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
{ "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" },
{ "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" },
{ "type": "forwarded", "name": "click", "element": "svelte:element" },
{ "type": "forwarded", "name": "focus", "element": "svelte:element" },
{ "type": "forwarded", "name": "blur", "element": "svelte:element" },
{
"type": "forwarded",
"name": "mouseover",
"element": "ButtonSkeleton"
"name": "pointerover",
"element": "svelte:element"
},
{
"type": "forwarded",
"name": "mouseenter",
"element": "ButtonSkeleton"
"name": "pointerenter",
"element": "svelte:element"
},
{
"type": "forwarded",
"name": "mouseleave",
"element": "ButtonSkeleton"
"name": "pointerleave",
"element": "svelte:element"
}
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "button | a | div" },
"extends": {
"interface": "ButtonSkeletonProps",
"import": "\"./ButtonSkeleton.svelte\""
}
"typedefs": []
},
{
"moduleName": "ButtonSet",

61
docs/src/pages/components/Button.svx
View file

@ -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>
<p {...props}>Custom element</p>
<Button as="div">
Custom element
</Button>
## Field size
## Sizes
<Button size="md">Primary</Button>
<Button size="md" kind="secondary">Secondary</Button>
<Button size="md" kind="tertiary">Tertiary</Button>
<Button size="md" kind="ghost">Ghost</Button>
<Button size="md" kind="danger">Danger</Button>
Button is available in small, medium, large, extra-large, and double-extra-large.
Use `md` (default) when used with form fields.
## Small size
<Button size="sm">Primary</Button>
<Button size="sm" kind="secondary">Secondary</Button>
<Button size="sm" kind="tertiary">Tertiary</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>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="2xl">Double extra Large</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

173
src/Button/Button.svelte
View file

@ -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
* Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
* Specify an element name to render as the button.
* Be sure to provide
* @type {keyof import('svelte/elements').SvelteHTMLElements}
*/
export let as = false;
/** Set to `true` to display the skeleton state */
export let skeleton = false;
export let as = undefined;
/** 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,
...$$restProps,
hasIconOnly && kind === "ghost" && !href ? selected : undefined,
class: [
"bx--btn",
expressive && "bx--btn--expressive",
((size === "small" && !expressive) ||
(size === "sm" && !expressive) ||
(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}`,
`bx--layout--size-${size}`,
`bx--btn--${kind}`,
disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only",
hasIconOnly && "bx--tooltip__trigger",
@ -117,73 +106,79 @@
hasIconOnly &&
tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`,
hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
$$restProps.class,
hasIconOnly && selected && kind === "ghost" && "bx--btn--selected",
]
.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
<!-- svelte-ignore a11y-no-static-element-interactions -->
<svelte:element
this="{as || (href && 'a') || 'button'}"
bind:this="{ref}"
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:pointerover
on:pointerenter
on:pointerleave
>
{#if hasIconOnly}
<span class:bx--assistive-text="{true}" class:bx--tooltip-content="{true}"
>{iconDescription}</span
>
{/if}
<slot /><svelte:component
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}"
/>
{:else if as}
<slot props="{buttonProps}" />
{:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<a
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}"
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}"
aria-hidden="true"
class="bx--btn__icon"
style="{hasIconOnly ? 'margin-left: 0' : undefined}"
aria-label="{iconDescription}"
/>
</button>
{/if}
</svelte:element>

56
types/Button/Button.svelte.d.ts vendored
View file

@ -1,13 +1,6 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
import type { ButtonSkeletonProps } from "./ButtonSkeleton.svelte";
type RestProps = SvelteHTMLElements["button"] &
SvelteHTMLElements["a"] &
SvelteHTMLElements["div"];
export interface ButtonProps extends ButtonSkeletonProps, RestProps {
export interface ButtonProps {
/**
* 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
* Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
* @default false
* Specify an element name to render as the button.
* Be sure to provide
* @default undefined
*/
as?: boolean;
/**
* Set to `true` to display the skeleton state
* @default false
*/
skeleton?: boolean;
as?: keyof import("svelte/elements").SvelteHTMLElements;
/**
* 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"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
pointerover: WindowEventMap["pointerover"];
pointerenter: WindowEventMap["pointerenter"];
pointerleave: WindowEventMap["pointerleave"];
},
{
default: {
props: {
role: "button";
type?: string;
tabindex: any;
disabled: boolean;
href?: string;
class: string;
[key: string]: any;
};
};
}
{ default: {} }
> {}