type BaseProps = { /** Content added between the opening and closing tags of the element */ children?: JSX.Element; /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */ class?: string; /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */ classList?: Record; /** Specifies the text direction of the element. */ dir?: "ltr" | "rtl"; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Specifies whether the element should be hidden. */ hidden?: boolean | string; /** A unique identifier for the element. */ id?: string; /** Sets the HTML or XML markup contained within the element. */ innerHTML?: string; /** Specifies the language of the element. */ lang?: string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */ ref?: unknown | ((e: unknown) => void); /** Adds a reference for a custom element slot */ slot?: string; /** Prop for setting inline styles */ style?: JSX.CSSProperties; /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */ tabIndex?: number; /** Sets the text content of the element */ textContent?: string; /** Specifies the tooltip text for the element. */ title?: string; /** Passing 'no' excludes the element content from being translated. */ translate?: "yes" | "no"; }; type BaseEvents = {}; type WaIconProps = { /** The name of the icon to draw. Available names depend on the icon library being used. */ name?: string | undefined; /** The family of icons to choose from. For Font Awesome Free, valid options include `classic` and `brands`. For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, `sharp-duotone`, and `brands`. A valid kit code must be present to show pro icons via CDN. You can set `` to provide one. */ family?: string; /** The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries may or may not use this property. */ variant?: string; /** Sets the width of the icon to match the cropped SVG viewBox. This operates like the Font `fa-width-auto` class. */ "auto-width"?: boolean; /** Swaps the opacity of duotone icons. */ "swap-opacity"?: boolean; /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks. */ src?: string | undefined; /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices. */ label?: string; /** The name of a registered custom icon library. */ library?: string; /** Sets the rotation degree of the icon */ rotate?: number; /** Sets the flip direction of the icon along the 'x' (horizontal), 'y' (vertical), or 'both' axes. */ flip?: "x" | "y" | "both" | undefined; /** Sets the animation for the icon */ animation?: IconAnimation | undefined; /** */ dir?: string; /** */ lang?: string; /** */ "did-ssr"?: string; /** */ "bind:initialReflectedProperties"?: Map; /** */ "bind:internals"?: ElementInternals; /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */ "on:wa-load"?: (e: CustomEvent) => void; /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */ "on:wa-error"?: (e: CustomEvent) => void; }; type WaCheckboxProps = { /** */ title?: string; /** The name of the checkbox, submitted as a name/value pair with form data. */ name?: string | null; /** The value of the checkbox, submitted as a name/value pair with form data. */ value?: string | null; /** The checkbox's size. */ size?: "xs" | "s" | "m" | "l" | "xl" | "small" | "medium" | "large"; /** Disables the checkbox. */ disabled?: boolean; /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */ indeterminate?: boolean; /** The default value of the form control. Primarily used for resetting the form control. */ checked?: boolean; /** Makes the checkbox a required field. */ required?: boolean; /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */ hint?: string; /** */ "custom-error"?: string | null; /** */ dir?: string; /** */ lang?: string; /** */ "did-ssr"?: string; /** */ "bind:input"?: (HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement | undefined; /** */ "bind:_checked"?: boolean | null; /** Draws the checkbox in a checked state. */ "bind:checked"?: string; /** */ "bind:assumeInteractionOn"?: string[]; /** */ "bind:valueHasChanged"?: boolean; /** */ "bind:hasInteracted"?: boolean; /** */ "bind:states"?: CustomStateSet; /** */ "bind:emitInvalid"?: string; /** */ "bind:labels"?: string; /** By default, form controls are associated with the nearest containing `
` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work. */ "bind:form"?: HTMLFormElement | null; /** */ "bind:validity"?: string; /** */ "bind:willValidate"?: string; /** */ "bind:validationMessage"?: string; /** Override this to change where constraint validation popups are anchored. */ "bind:validationTarget"?: undefined | HTMLElement; /** */ "bind:allValidators"?: string; /** */ "bind:initialReflectedProperties"?: Map; /** */ "bind:internals"?: ElementInternals; /** Emitted when the checked state changes. */ "on:change"?: (e: CustomEvent) => void; /** Emitted when the checkbox loses focus. */ "on:blur"?: (e: CustomEvent) => void; /** Emitted when the checkbox gains focus. */ "on:focus"?: (e: CustomEvent) => void; /** Emitted when the checkbox receives input. */ "on:input"?: (e: CustomEvent) => void; /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */ "on:wa-invalid"?: (e: CustomEvent) => void; }; type WaSpinnerProps = { /** */ dir?: string; /** */ lang?: string; /** */ "did-ssr"?: string; /** */ "bind:initialReflectedProperties"?: Map; /** */ "bind:internals"?: ElementInternals; }; type WaTreeItemProps = { /** Expands the tree item. */ expanded?: boolean; /** Draws the tree item in a selected state. */ selected?: boolean; /** Disables the tree item. */ disabled?: boolean; /** Enables lazy loading behavior. */ lazy?: boolean; /** */ dir?: string; /** */ lang?: string; /** */ "did-ssr"?: string; /** */ "bind:indeterminate"?: boolean; /** */ "bind:isLeaf"?: boolean; /** */ "bind:loading"?: boolean; /** */ "bind:selectable"?: boolean; /** */ "bind:defaultSlot"?: HTMLSlotElement; /** */ "bind:childrenSlot"?: HTMLSlotElement; /** */ "bind:itemElement"?: HTMLDivElement; /** */ "bind:childrenContainer"?: HTMLDivElement; /** */ "bind:expandButtonSlot"?: HTMLSlotElement; /** */ "bind:initialReflectedProperties"?: Map; /** */ "bind:internals"?: ElementInternals; /** Emitted when the tree item expands. */ "on:wa-expand"?: (e: CustomEvent) => void; /** Emitted after the tree item expands and all animations are complete. */ "on:wa-after-expand"?: (e: CustomEvent) => void; /** Emitted when the tree item collapses. */ "on:wa-collapse"?: (e: CustomEvent) => void; /** Emitted after the tree item collapses and all animations are complete. */ "on:wa-after-collapse"?: (e: CustomEvent) => void; /** Emitted when the tree item's lazy state changes. */ "on:wa-lazy-change"?: (e: CustomEvent) => void; /** 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. */ "on:wa-lazy-load"?: (e: CustomEvent) => void; }; type WaCarouselItemProps = { /** */ dir?: string; /** */ lang?: string; /** */ "did-ssr"?: string; /** */ "bind:initialReflectedProperties"?: Map; /** */ "bind:internals"?: ElementInternals; }; type WaButtonProps = { /** */ title?: string; /** The button's theme variant. Defaults to `neutral` if not within another element with a variant. */ variant?: "neutral" | "brand" | "success" | "warning" | "danger"; /** The button's visual appearance. */ appearance?: "accent" | "filled" | "outlined" | "filled-outlined" | "plain"; /** The button's size. */ size?: "xs" | "s" | "m" | "l" | "xl" | "small" | "medium" | "large"; /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */ "with-caret"?: boolean; /** Only required for SSR. Set to `true` if you're slotting in a `start` element so the server-rendered markup includes the start slot before the component hydrates on the client. */ "with-start"?: boolean; /** Only required for SSR. Set to `true` if you're slotting in an `end` element so the server-rendered markup includes the end slot before the component hydrates on the client. */ "with-end"?: boolean; /** Disables the button. */ disabled?: boolean; /** Draws the button in a loading state. */ loading?: boolean; /** Draws a pill-style button with rounded edges. */ pill?: boolean; /** The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `