{ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", "name": "@awesome.me/webawesome", "version": "3.6.0", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "wa-icon", "description": "Icons are scalable vector symbols that represent actions, content, or status throughout your application.\nThey support Font Awesome and custom icon libraries with animation presets.\n---\n\n\n### **Events:**\n - **wa-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **wa-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Properties:**\n - **--animation-delay** - Sets when the animation will start. _(default: 0)_\n- **--animation-direction** - Defines whether or not the animation should play in reverse on alternate cycles. _(default: normal)_\n- **--animation-duration** - Defines the length of time that an animation takes to complete one cycle. _(default: 1s)_\n- **--animation-iteration-count** - Defines the number of times an animation cycle is played. _(default: infinite)_\n- **--animation-timing** - Describes how the animation will progress over one cycle of its duration. _(default: undefined)_\n- **--beat-fade-opacity** - Set lowest opacity value an icon with `beat-fade` animation will fade to and from. _(default: undefined)_\n- **--beat-fade-scale** - Set max value that an icon with `beat-fade` animation will scale. _(default: undefined)_\n- **--beat-scale** - Set max value that an icon with `beat` animation will scale. _(default: undefined)_\n- **--bounce-height** - Set the max height an icon with `bounce` animation will jump to when bouncing. _(default: undefined)_\n- **--bounce-jump-scale-x** - Set the icon’s horizontal distortion (“squish”) at the top of the jump. _(default: undefined)_\n- **--bounce-jump-scale-y** - Set the icon’s vertical distortion (“squish”) at the top of the jump. _(default: undefined)_\n- **--bounce-land-scale-x** - Set the icon’s horizontal distortion (“squish”) when landing after the jump. _(default: undefined)_\n- **--bounce-land-scale-y** - Set the icon’s vertical distortion (“squish”) when landing after the jump. _(default: undefined)_\n- **--bounce-rebound** - Set the amount of rebound an icon with `bounce` animation has when landing after the jump. _(default: undefined)_\n- **--bounce-start-scale-x** - Set the icon’s horizontal distortion (“squish”) when starting to bounce. _(default: undefined)_\n- **--bounce-start-scale-y** - Set the icon’s vertical distortion (“squish”) when starting to bounce. _(default: undefined)_\n- **--fade-opacity** - Set lowest opacity value an icon with `fade` animation will fade to and from. _(default: undefined)_\n- **--flip-angle** - Set rotation angle of flip for an icon with `flip` animation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. _(default: undefined)_\n- **--flip-x** - Set x-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` animation. _(default: undefined)_\n- **--flip-y** - Set y-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` animation. _(default: undefined)_\n- **--flip-z** - Set z-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` animation. _(default: undefined)_\n- **--primary-color** - Sets a duotone icon's primary color. _(default: currentColor)_\n- **--primary-opacity** - Sets a duotone icon's primary opacity. _(default: 1)_\n- **--secondary-color** - Sets a duotone icon's secondary color. _(default: currentColor)_\n- **--secondary-opacity** - Sets a duotone icon's secondary opacity. _(default: 0.4)_\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The `` element generated when using `spriteSheet: true`", "doc-url": "", "attributes": [ { "name": "name", "description": "The name of the icon to draw. Available names depend on the icon library being used.", "value": { "type": "string | undefined" } }, { "name": "family", "description": "The family of icons to choose from. For Font Awesome Free, valid options include `classic` and `brands`. For\nFont Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, `sharp-duotone`, and `brands`.\nA valid kit code must be present to show pro icons via CDN. You can set `` to provide\none.", "value": { "type": "string" } }, { "name": "variant", "description": "The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for\nthe `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries\nmay or may not use this property.", "value": { "type": "string" } }, { "name": "auto-width", "description": "Sets the width of the icon to match the cropped SVG viewBox. This operates like the Font `fa-width-auto` class.", "value": { "type": "boolean", "default": "false" } }, { "name": "swap-opacity", "description": "Swaps the opacity of duotone icons.", "value": { "type": "boolean", "default": "false" } }, { "name": "src", "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.", "value": { "type": "string | undefined" } }, { "name": "label", "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.", "value": { "type": "string", "default": "''" } }, { "name": "library", "description": "The name of a registered custom icon library.", "value": { "type": "string", "default": "'default'" } }, { "name": "rotate", "description": "Sets the rotation degree of the icon", "value": { "type": "number", "default": "0" } }, { "name": "flip", "description": "Sets the flip direction of the icon along the 'x' (horizontal), 'y' (vertical), or 'both' axes.", "value": { "type": "'x' | 'y' | 'both' | undefined" } }, { "name": "animation", "description": "Sets the animation for the icon", "value": { "type": "IconAnimation | undefined" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [], "events": [ { "name": "wa-load", "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit." }, { "name": "wa-error", "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit." } ], "js": { "properties": [ { "name": "name", "description": "The name of the icon to draw. Available names depend on the icon library being used.", "type": "string | undefined" }, { "name": "family", "description": "The family of icons to choose from. For Font Awesome Free, valid options include `classic` and `brands`. For\nFont Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, `sharp-duotone`, and `brands`.\nA valid kit code must be present to show pro icons via CDN. You can set `` to provide\none.", "type": "string" }, { "name": "variant", "description": "The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for\nthe `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries\nmay or may not use this property.", "type": "string" }, { "name": "autoWidth", "description": "Sets the width of the icon to match the cropped SVG viewBox. This operates like the Font `fa-width-auto` class.", "type": "boolean" }, { "name": "swapOpacity", "description": "Swaps the opacity of duotone icons.", "type": "boolean" }, { "name": "src", "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.", "type": "string | undefined" }, { "name": "label", "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.", "type": "string" }, { "name": "library", "description": "The name of a registered custom icon library.", "type": "string" }, { "name": "rotate", "description": "Sets the rotation degree of the icon", "type": "number" }, { "name": "flip", "description": "Sets the flip direction of the icon along the 'x' (horizontal), 'y' (vertical), or 'both' axes.", "type": "'x' | 'y' | 'both' | undefined" }, { "name": "animation", "description": "Sets the animation for the icon", "type": "IconAnimation | undefined" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [ { "name": "wa-load", "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit." }, { "name": "wa-error", "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit." } ] } }, { "name": "wa-checkbox", "description": "Checkboxes let users toggle an option on or off, or select multiple items from a list. They also support an\nindeterminate state for partial selections in groups.\n---\n\n\n### **Events:**\n - **change** - Emitted when the checked state changes.\n- **blur** - Emitted when the checkbox loses focus.\n- **focus** - Emitted when the checkbox gains focus.\n- **input** - Emitted when the checkbox receives input.\n- **wa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **setCustomValidity(message: _string_)** - Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators.\n- **formStateRestoreCallback(state: _string | File | FormData | null_, reason: _'autocomplete' | 'restore'_)** - Called when the browser is trying to restore element’s state to state in which case reason is \"restore\", or when\nthe browser is trying to fulfill autofill on behalf of user in which case reason is \"autocomplete\". In the case of\n\"restore\", state is a string, File, or FormData object previously set as the second argument to setFormValue.\n- **resetValidity()** - Reset validity is a way of removing manual custom errors and native validation.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **hint** - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.\n\n### **CSS Properties:**\n - **--checked-icon-color** - The color of the checked and indeterminate icons. _(default: undefined)_\n- **--checked-icon-scale** - The size of the checked and indeterminate icons relative to the checkbox. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's label .\n- **control** - The square container that wraps the checkbox's checked state.\n- **checked-icon** - The checked icon, a `` element.\n- **indeterminate-icon** - The indeterminate icon, a `` element.\n- **label** - The container that wraps the checkbox's label.\n- **hint** - The hint's wrapper.", "doc-url": "", "attributes": [ { "name": "title", "value": { "type": "string", "default": "''" } }, { "name": "name", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "value": { "type": "string | null", "default": "null" } }, { "name": "value", "description": "The value of the checkbox, submitted as a name/value pair with form data.", "value": { "type": "string | null" } }, { "name": "size", "description": "The checkbox's size.", "value": { "type": "'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'", "default": "'m'" } }, { "name": "disabled", "description": "Disables the checkbox.", "value": { "type": "boolean", "default": "false" } }, { "name": "indeterminate", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "value": { "type": "boolean", "default": "false" } }, { "name": "checked", "description": "The default value of the form control. Primarily used for resetting the form control.", "value": { "type": "boolean" } }, { "name": "required", "description": "Makes the checkbox a required field.", "value": { "type": "boolean", "default": "false" } }, { "name": "hint", "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.", "value": { "type": "string", "default": "''" } }, { "name": "custom-error", "value": { "type": "string | null", "default": "null" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The checkbox's label." }, { "name": "hint", "description": "Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute." } ], "events": [ { "name": "change", "type": "Event", "description": "Emitted when the checked state changes." }, { "name": "blur", "description": "Emitted when the checkbox loses focus." }, { "name": "focus", "description": "Emitted when the checkbox gains focus." }, { "name": "input", "description": "Emitted when the checkbox receives input." }, { "name": "wa-invalid", "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied." } ], "js": { "properties": [ { "name": "input", "type": "(HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement | undefined" }, { "name": "title", "type": "string" }, { "name": "name", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "type": "string | null" }, { "name": "value", "description": "The value of the checkbox, submitted as a name/value pair with form data.", "type": "string | null" }, { "name": "size", "description": "The checkbox's size.", "type": "'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'" }, { "name": "disabled", "description": "Disables the checkbox.", "type": "boolean" }, { "name": "indeterminate", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "type": "boolean" }, { "name": "_checked", "type": "boolean | null" }, { "name": "checked", "description": "Draws the checkbox in a checked state." }, { "name": "defaultChecked", "description": "The default value of the form control. Primarily used for resetting the form control.", "type": "boolean" }, { "name": "required", "description": "Makes the checkbox a required field.", "type": "boolean" }, { "name": "hint", "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.", "type": "string" }, { "name": "assumeInteractionOn", "type": "string[]" }, { "name": "valueHasChanged", "type": "boolean" }, { "name": "hasInteracted", "type": "boolean" }, { "name": "customError", "type": "string | null" }, { "name": "states", "type": "CustomStateSet" }, { "name": "emitInvalid" }, { "name": "labels" }, { "name": "form", "description": "By default, form controls are associated with the nearest containing `
` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "type": "HTMLFormElement | null" }, { "name": "validity" }, { "name": "willValidate" }, { "name": "validationMessage" }, { "name": "validationTarget", "description": "Override this to change where constraint validation popups are anchored.", "type": "undefined | HTMLElement" }, { "name": "allValidators" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [ { "name": "change", "type": "Event", "description": "Emitted when the checked state changes." }, { "name": "blur", "description": "Emitted when the checkbox loses focus." }, { "name": "focus", "description": "Emitted when the checkbox gains focus." }, { "name": "input", "description": "Emitted when the checkbox receives input." }, { "name": "wa-invalid", "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied." } ] } }, { "name": "wa-spinner", "description": "Spinners indicate that an operation is in progress when the duration is unknown. Use them for loading states\nwhere a determinate progress bar isn't practical.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.", "doc-url": "", "attributes": [ { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [] } }, { "name": "wa-tree-item", "description": "Tree items represent a single hierarchical node inside a tree, and can contain nested items that expand and\ncollapse.\n---\n\n\n### **Events:**\n - **wa-expand** - Emitted when the tree item expands.\n- **wa-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **wa-collapse** - Emitted when the tree item collapses.\n- **wa-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **wa-lazy-change** - Emitted when the tree item's lazy state changes.\n- **wa-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _WaTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Properties:**\n - **--show-duration** - The animation duration when expanding tree items. _(default: 200ms)_\n- **--hide-duration** - The animation duration when collapsing tree items. _(default: 200ms)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.", "doc-url": "", "attributes": [ { "name": "expanded", "description": "Expands the tree item.", "value": { "type": "boolean", "default": "false" } }, { "name": "selected", "description": "Draws the tree item in a selected state.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Disables the tree item.", "value": { "type": "boolean", "default": "false" } }, { "name": "lazy", "description": "Enables lazy loading behavior.", "value": { "type": "boolean", "default": "false" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The default slot." }, { "name": "expand-icon", "description": "The icon to show when the tree item is expanded." }, { "name": "collapse-icon", "description": "The icon to show when the tree item is collapsed." } ], "events": [ { "name": "wa-expand", "description": "Emitted when the tree item expands." }, { "name": "wa-after-expand", "description": "Emitted after the tree item expands and all animations are complete." }, { "name": "wa-collapse", "description": "Emitted when the tree item collapses." }, { "name": "wa-after-collapse", "description": "Emitted after the tree item collapses and all animations are complete." }, { "name": "wa-lazy-change", "description": "Emitted when the tree item's lazy state changes." }, { "name": "wa-lazy-load", "description": "Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree." } ], "js": { "properties": [ { "name": "indeterminate", "type": "boolean" }, { "name": "isLeaf", "type": "boolean" }, { "name": "loading", "type": "boolean" }, { "name": "selectable", "type": "boolean" }, { "name": "expanded", "description": "Expands the tree item.", "type": "boolean" }, { "name": "selected", "description": "Draws the tree item in a selected state.", "type": "boolean" }, { "name": "disabled", "description": "Disables the tree item.", "type": "boolean" }, { "name": "lazy", "description": "Enables lazy loading behavior.", "type": "boolean" }, { "name": "defaultSlot", "type": "HTMLSlotElement" }, { "name": "childrenSlot", "type": "HTMLSlotElement" }, { "name": "itemElement", "type": "HTMLDivElement" }, { "name": "childrenContainer", "type": "HTMLDivElement" }, { "name": "expandButtonSlot", "type": "HTMLSlotElement" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [ { "name": "wa-expand", "description": "Emitted when the tree item expands." }, { "name": "wa-after-expand", "description": "Emitted after the tree item expands and all animations are complete." }, { "name": "wa-collapse", "description": "Emitted when the tree item collapses." }, { "name": "wa-after-collapse", "description": "Emitted after the tree item collapses and all animations are complete." }, { "name": "wa-lazy-change", "description": "Emitted when the tree item's lazy state changes." }, { "name": "wa-lazy-load", "description": "Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree." } ] } }, { "name": "wa-carousel-item", "description": "Carousel items represent individual slides within a carousel.\n---\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_", "doc-url": "", "attributes": [ { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The carousel item's content.." } ], "events": [], "js": { "properties": [ { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [] } }, { "name": "wa-button", "description": "Buttons represent actions the user can take, such as submitting a form, opening a dialog, or navigating to\nanother page.\n---\n\n\n### **Events:**\n - **blur** - Emitted when the button loses focus.\n- **focus** - Emitted when the button gains focus.\n- **wa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **setCustomValidity(message: _string_)** - Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators.\n- **formStateRestoreCallback(state: _string | File | FormData | null_, reason: _'autocomplete' | 'restore'_)** - Called when the browser is trying to restore element’s state to state in which case reason is \"restore\", or when\nthe browser is trying to fulfill autofill on behalf of user in which case reason is \"autocomplete\". In the case of\n\"restore\", state is a string, File, or FormData object previously set as the second argument to setFormValue.\n- **resetValidity()** - Reset validity is a way of removing manual custom errors and native validation.\n\n### **Slots:**\n - _default_ - The button's label.\n- **start** - An element, such as ``, placed before the label.\n- **end** - An element, such as ``, placed after the label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **start** - The container that wraps the `start` slot.\n- **label** - The button's label.\n- **end** - The container that wraps the `end` slot.\n- **caret** - The button's caret icon, a `` element.\n- **spinner** - The spinner that shows when the button is in the loading state.", "doc-url": "", "attributes": [ { "name": "title", "value": { "type": "string", "default": "''" } }, { "name": "variant", "description": "The button's theme variant. Defaults to `neutral` if not within another element with a variant.", "value": { "type": "'neutral' | 'brand' | 'success' | 'warning' | 'danger'", "default": "'neutral'" } }, { "name": "appearance", "description": "The button's visual appearance.", "value": { "type": "'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain'", "default": "'accent'" } }, { "name": "size", "description": "The button's size.", "value": { "type": "'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'", "default": "'m'" } }, { "name": "with-caret", "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.", "value": { "type": "boolean", "default": "false" } }, { "name": "with-start", "description": "Only required for SSR. Set to `true` if you're slotting in a `start` element so the server-rendered markup\nincludes the start slot before the component hydrates on the client.", "value": { "type": "boolean", "default": "false" } }, { "name": "with-end", "description": "Only required for SSR. Set to `true` if you're slotting in an `end` element so the server-rendered markup\nincludes the end slot before the component hydrates on the client.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Disables the button.", "value": { "type": "boolean", "default": "false" } }, { "name": "loading", "description": "Draws the button in a loading state.", "value": { "type": "boolean", "default": "false" } }, { "name": "pill", "description": "Draws a pill-style button with rounded edges.", "value": { "type": "boolean", "default": "false" } }, { "name": "type", "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`