shoelace/src/components.d.ts

2063 wiersze
64 KiB
TypeScript

/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
export namespace Components {
interface SlAlert {
/**
* Set to true to make the alert closable.
*/
"closable": boolean;
/**
* Hides the alert
*/
"hide": () => Promise<boolean>;
/**
* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
*/
"open": boolean;
/**
* Shows the alert.
*/
"show": () => Promise<boolean>;
/**
* The type of alert.
*/
"type": 'primary' | 'success' | 'info' | 'warning' | 'danger';
}
interface SlAvatar {
/**
* Alternative text for the image.
*/
"alt": string;
/**
* The image source to use for the avatar.
*/
"image": string;
/**
* Initials to use as a fallback when no image is available (1-2 characters max recommended).
*/
"initials": string;
/**
* Initials to use as a fallback when no image is available (1-2 characters max recommended).
*/
"shape": 'circle' | 'square' | 'rounded';
}
interface SlBadge {
/**
* The badge's type.
*/
"type": 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text';
}
interface SlButton {
/**
* Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
*/
"caret": boolean;
/**
* Set to true to draw a circle button.
*/
"circle": boolean;
/**
* Set to true to disable the button.
*/
"disabled": boolean;
/**
* Set to true to draw the button in a loading state.
*/
"loading": boolean;
/**
* An optional name for the button.
*/
"name": string;
/**
* Set to true to draw a pill-style button with rounded edges.
*/
"pill": boolean;
/**
* Removes focus from the button.
*/
"removeFocus": () => Promise<void>;
/**
* Sets focus on the button.
*/
"setFocus": () => Promise<void>;
/**
* The button's size.
*/
"size": 'small' | 'medium' | 'large';
/**
* Indicates if activating the button should submit the form.
*/
"submit": boolean;
/**
* The button's type.
*/
"type": 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text';
/**
* An optional value for the button.
*/
"value": string;
}
interface SlCheckbox {
/**
* Set to true to draw the checkbox in a checked state.
*/
"checked": boolean;
/**
* Set to true to disable the checkbox.
*/
"disabled": boolean;
/**
* Set to true to draw the checkbox in an indeterminate state.
*/
"indeterminate": boolean;
/**
* The checkbox's name attribute.
*/
"name": string;
/**
* Removes focus from the checkbox.
*/
"removeFocus": () => Promise<void>;
/**
* Sets focus on the checkbox.
*/
"setFocus": () => Promise<void>;
/**
* The checkbox's value attribute.
*/
"value": string;
}
interface SlColorPicker {
/**
* Set to true to disable the color picker.
*/
"disabled": boolean;
/**
* The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. The color picker will always accept user input in any format (including CSS color names) and convert it to the desired format.
*/
"format": 'hex' | 'rgb' | 'hsl';
/**
* Set to true to render the color picker inline rather than inside a dropdown.
*/
"inline": boolean;
/**
* Whether to show the opacity slider.
*/
"opacity": boolean;
/**
* When `inline` is true, this determines the size of the color picker's trigger.
*/
"size": 'small' | 'medium' | 'large';
/**
* An array of predefined color swatches to display. Can include any format the color picker can parse, including HEX(A), RGB(A), HSL(A), and CSS color names.
*/
"swatches": string[];
/**
* By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.
*/
"uppercase": boolean;
/**
* The current color.
*/
"value": string;
}
interface SlDetails {
/**
* Set to true to prevent the user from toggling the details.
*/
"disabled": boolean;
/**
* Hides the alert
*/
"hide": () => Promise<boolean>;
/**
* Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
*/
"open": boolean;
/**
* Shows the alert.
*/
"show": () => Promise<boolean>;
/**
* The summary to show in the details header.
*/
"summary": string;
}
interface SlDialog {
/**
* Hides the dialog
*/
"hide": () => Promise<boolean>;
/**
* The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
*/
"label": string;
/**
* Set to true to disable the footer.
*/
"noFooter": boolean;
/**
* Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.
*/
"noHeader": boolean;
/**
* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
*/
"open": boolean;
/**
* Shows the dialog
*/
"show": () => Promise<boolean>;
}
interface SlDrawer {
/**
* By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
*/
"contained": boolean;
/**
* Hides the drawer
*/
"hide": () => Promise<boolean>;
/**
* The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
*/
"label": string;
/**
* Removes the footer.
*/
"noFooter": boolean;
/**
* Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
*/
"noHeader": boolean;
/**
* Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
*/
"open": boolean;
/**
* The direction from which the drawer will open.
*/
"placement": 'top' | 'right' | 'bottom' | 'left';
/**
* Shows the drawer
*/
"show": () => Promise<boolean>;
}
interface SlDropdown {
/**
* Determines whether the dropdown should hide when a menu item is selected.
*/
"closeOnSelect": boolean;
/**
* The dropdown will close when the user interacts outside of this element (e.g. clicking).
*/
"containingElement": HTMLElement;
/**
* The distance in pixels from which to offset the panel away from its trigger.
*/
"distance": number;
/**
* Hides the dropdown panel
*/
"hide": () => Promise<void>;
/**
* Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
*/
"open": boolean;
/**
* The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
*/
"placement": | 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'right'
| 'right-start'
| 'right-end'
| 'left'
| 'left-start'
| 'left-end';
/**
* Shows the dropdown panel
*/
"show": () => Promise<void>;
/**
* The distance in pixels from which to offset the panel along its trigger.
*/
"skidding": number;
}
interface SlForm {
/**
* Gets all form control elements (native and custom).
*/
"getFormControls": () => Promise<HTMLElement[]>;
/**
* Serializes all form controls elements and returns a `FormData` object.
*/
"getFormData": () => Promise<FormData>;
/**
* Submits the form.
*/
"submit": () => Promise<void>;
}
interface SlIcon {
/**
* An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
*/
"label": string;
/**
* The name of the icon to draw.
*/
"name": string;
/**
* An external URL of an SVG file.
*/
"src": string;
}
interface SlInput {
/**
* The input's autocaptialize attribute.
*/
"autocapitalize": string;
/**
* The input's autocomplete attribute.
*/
"autocomplete": string;
/**
* The input's autocorrect attribute.
*/
"autocorrect": string;
/**
* The input's autofocus attribute.
*/
"autofocus": boolean;
/**
* Set to true to add a clear button when the input is populated.
*/
"clearable": boolean;
/**
* Set to true to disable the input.
*/
"disabled": boolean;
/**
* The input's inputmode attribute.
*/
"inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
/**
* Set to true to indicate that the user input is invalid.
*/
"invalid": boolean;
/**
* The input's label.
*/
"label": string;
/**
* The input's max attribute.
*/
"max": number;
/**
* The input's maxlength attribute.
*/
"maxlength": number;
/**
* The input's min attribute.
*/
"min": number;
/**
* The input's minlength attribute.
*/
"minlength": number;
/**
* The input's name attribute.
*/
"name": string;
/**
* The input's pattern attribute.
*/
"pattern": string;
/**
* Set to true to draw a pill-style input with rounded edges.
*/
"pill": boolean;
/**
* The input's placeholder text.
*/
"placeholder": string;
/**
* Set to true for a readonly input.
*/
"readonly": boolean;
/**
* Removes focus from the input.
*/
"removeFocus": () => Promise<void>;
/**
* The input's required attribute.
*/
"required": boolean;
/**
* Selects all the text in the input.
*/
"select": () => Promise<void>;
/**
* Sets focus on the input.
*/
"setFocus": () => Promise<void>;
/**
* Replaces a range of text with a new string.
*/
"setRangeText": (replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>;
/**
* Sets the start and end positions of the text selection (0-based).
*/
"setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>;
/**
* The input's size.
*/
"size": 'small' | 'medium' | 'large';
/**
* The input's step attribute.
*/
"step": number;
/**
* Set to true to add a password toggle button for password inputs.
*/
"togglePassword": boolean;
/**
* The input's type.
*/
"type": 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
/**
* Set to true to indicate that the user input is valid.
*/
"valid": boolean;
/**
* The input's value attribute.
*/
"value": string;
}
interface SlMenu {
/**
* Removes focus from the menu.
*/
"removeFocus": () => Promise<void>;
/**
* Sets focus on the menu.
*/
"setFocus": () => Promise<void>;
}
interface SlMenuDivider {
}
interface SlMenuItem {
/**
* Set to true to draw the menu item in an active state.
*/
"active": boolean;
/**
* Set to true to draw the item in a checked state.
*/
"checked": boolean;
/**
* Set to true to draw the menu item in a disabled state.
*/
"disabled": boolean;
/**
* A unique value to store in the menu item.
*/
"value": string;
}
interface SlMenuLabel {
}
interface SlProgressBar {
/**
* The progress bar's percentage, 0 to 100.
*/
"percentage": number;
}
interface SlProgressRing {
/**
* The current progress percentage, 0 - 100.
*/
"percentage": number;
/**
* The size of the progress ring in pixels.
*/
"size": number;
/**
* The stroke width of the progress ring in pixels.
*/
"strokeWidth": number;
}
interface SlRadio {
/**
* Set to true to draw the radio in a checked state.
*/
"checked": boolean;
/**
* Set to true to disable the radio.
*/
"disabled": boolean;
/**
* The radio's name attribute.
*/
"name": string;
/**
* Removes focus from the radio.
*/
"removeFocus": () => Promise<void>;
/**
* Sets focus on the radio.
*/
"setFocus": () => Promise<void>;
/**
* The radio's value attribute.
*/
"value": string;
}
interface SlRange {
/**
* Set to true to disable the input.
*/
"disabled": boolean;
/**
* The input's max attribute.
*/
"max": number;
/**
* The input's min attribute.
*/
"min": number;
/**
* The input's name attribute.
*/
"name": string;
/**
* Removes focus from the input.
*/
"removeFocus": () => Promise<void>;
/**
* Sets focus on the input.
*/
"setFocus": () => Promise<void>;
/**
* The input's step attribute.
*/
"step": number;
/**
* The preferred placedment of the tooltip.
*/
"tooltip": 'top' | 'bottom' | 'none';
/**
* A function used to format the tooltip's value.
*/
"tooltipFormatter": (value: number) => string;
/**
* The input's value attribute.
*/
"value": number;
}
interface SlSelect {
/**
* Set to true to disable the select control.
*/
"disabled": boolean;
/**
* Set to true to indicate that the user input is invalid.
*/
"invalid": boolean;
/**
* The select's label.
*/
"label": string;
/**
* The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to -1 to remove the limit.
*/
"maxTagsVisible": number;
/**
* Set to true to enable multiselect.
*/
"multiple": boolean;
/**
* The select's name.
*/
"name": string;
/**
* Set to true to draw a pill-style select with rounded edges.
*/
"pill": boolean;
/**
* The select's placeholder text.
*/
"placeholder": string;
/**
* The select's size.
*/
"size": 'small' | 'medium' | 'large';
/**
* Set to true to indicate that the user input is valid.
*/
"valid": boolean;
/**
* The value of the control. This will be a string or an array depending on `multiple`.
*/
"value": string | Array<string>;
}
interface SlSpinner {
}
interface SlSwitch {
/**
* Set to true to draw the switch in a checked state.
*/
"checked": boolean;
/**
* Set to true to disable the switch.
*/
"disabled": boolean;
/**
* The switch's name attribute.
*/
"name": string;
/**
* Removes focus from the switch.
*/
"removeFocus": () => Promise<void>;
/**
* Sets focus on the switch.
*/
"setFocus": () => Promise<void>;
/**
* The switch's value attribute.
*/
"value": string;
}
interface SlTab {
/**
* Set to true to draw the tab in an active state.
*/
"active": boolean;
/**
* Set to true to draw the tab in a disabled state.
*/
"disabled": boolean;
/**
* The name of the tab panel the tab will control. The panel must be located in the same tab group.
*/
"panel": string;
/**
* Removes focus from the tab.
*/
"removeFocus": () => Promise<void>;
/**
* Sets focus to the tab.
*/
"setFocus": () => Promise<void>;
}
interface SlTabGroup {
/**
* The placement of the tabs.
*/
"placement": 'top' | 'bottom' | 'left' | 'right';
/**
* Shows the specified tab panel.
*/
"show": (panel: string) => Promise<void>;
}
interface SlTabPanel {
/**
* When true, the tab panel will be shown.
*/
"active": boolean;
/**
* The tab panel's name.
*/
"name": string;
}
interface SlTag {
/**
* Set to true to make the tag clearable.
*/
"clearable": boolean;
/**
* Set to true to draw a pill-style tag with rounded edges.
*/
"pill": boolean;
/**
* The tag's size.
*/
"size": 'small' | 'medium' | 'large';
/**
* The tag's type.
*/
"type": 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text';
}
interface SlTextarea {
/**
* The textarea's autocaptialize attribute.
*/
"autocapitalize": string;
/**
* The textarea's autocomplete attribute.
*/
"autocomplete": string;
/**
* The textarea's autocorrect attribute.
*/
"autocorrect": string;
/**
* The textarea's autofocus attribute.
*/
"autofocus": boolean;
/**
* Set to true to disable the textarea.
*/
"disabled": boolean;
/**
* The textarea's inputmode attribute.
*/
"inputmode": 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
/**
* Set to true to indicate that the user input is invalid.
*/
"invalid": boolean;
/**
* The textarea's label.
*/
"label": string;
/**
* The textarea's maxlength attribute.
*/
"maxlength": number;
/**
* The textarea's name attribute.
*/
"name": string;
/**
* The textarea's placeholder text.
*/
"placeholder": string;
/**
* Set to true for a readonly textarea.
*/
"readonly": boolean;
/**
* Removes focus fromt the textarea.
*/
"removeFocus": () => Promise<void>;
/**
* The textarea's required attribute.
*/
"required": boolean;
/**
* Controls how the textarea can be resized.
*/
"resize": 'none' | 'vertical' | 'auto';
/**
* The number of rows to display by default.
*/
"rows": number;
/**
* Selects all the text in the input.
*/
"select": () => Promise<void>;
/**
* Sets focus on the textarea.
*/
"setFocus": () => Promise<void>;
/**
* Replaces a range of text with a new string.
*/
"setRangeText": (replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve') => Promise<void>;
/**
* Sets the start and end positions of the text selection (0-based).
*/
"setSelectionRange": (selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none') => Promise<void>;
/**
* The textarea's size.
*/
"size": 'small' | 'medium' | 'large';
/**
* Set to true to indicate that the user input is valid.
*/
"valid": boolean;
/**
* The textarea's value attribute.
*/
"value": string;
}
interface SlTooltip {
/**
* The tooltip's content.
*/
"content": string;
/**
* Set to true to disable the tooltip so it won't show when triggered.
*/
"disabled": boolean;
/**
* The distance in pixels from which to offset the tooltip away from its target.
*/
"distance": number;
/**
* Shows the tooltip.
*/
"hide": () => Promise<boolean>;
/**
* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
*/
"open": boolean;
/**
* The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
*/
"placement": | 'top'
| 'top-start'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end';
/**
* Shows the tooltip.
*/
"show": () => Promise<boolean>;
/**
* The distance in pixels from which to offset the tooltip along its target.
*/
"skidding": number;
/**
* Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
*/
"trigger": string;
}
}
declare global {
interface HTMLSlAlertElement extends Components.SlAlert, HTMLStencilElement {
}
var HTMLSlAlertElement: {
prototype: HTMLSlAlertElement;
new (): HTMLSlAlertElement;
};
interface HTMLSlAvatarElement extends Components.SlAvatar, HTMLStencilElement {
}
var HTMLSlAvatarElement: {
prototype: HTMLSlAvatarElement;
new (): HTMLSlAvatarElement;
};
interface HTMLSlBadgeElement extends Components.SlBadge, HTMLStencilElement {
}
var HTMLSlBadgeElement: {
prototype: HTMLSlBadgeElement;
new (): HTMLSlBadgeElement;
};
interface HTMLSlButtonElement extends Components.SlButton, HTMLStencilElement {
}
var HTMLSlButtonElement: {
prototype: HTMLSlButtonElement;
new (): HTMLSlButtonElement;
};
interface HTMLSlCheckboxElement extends Components.SlCheckbox, HTMLStencilElement {
}
var HTMLSlCheckboxElement: {
prototype: HTMLSlCheckboxElement;
new (): HTMLSlCheckboxElement;
};
interface HTMLSlColorPickerElement extends Components.SlColorPicker, HTMLStencilElement {
}
var HTMLSlColorPickerElement: {
prototype: HTMLSlColorPickerElement;
new (): HTMLSlColorPickerElement;
};
interface HTMLSlDetailsElement extends Components.SlDetails, HTMLStencilElement {
}
var HTMLSlDetailsElement: {
prototype: HTMLSlDetailsElement;
new (): HTMLSlDetailsElement;
};
interface HTMLSlDialogElement extends Components.SlDialog, HTMLStencilElement {
}
var HTMLSlDialogElement: {
prototype: HTMLSlDialogElement;
new (): HTMLSlDialogElement;
};
interface HTMLSlDrawerElement extends Components.SlDrawer, HTMLStencilElement {
}
var HTMLSlDrawerElement: {
prototype: HTMLSlDrawerElement;
new (): HTMLSlDrawerElement;
};
interface HTMLSlDropdownElement extends Components.SlDropdown, HTMLStencilElement {
}
var HTMLSlDropdownElement: {
prototype: HTMLSlDropdownElement;
new (): HTMLSlDropdownElement;
};
interface HTMLSlFormElement extends Components.SlForm, HTMLStencilElement {
}
var HTMLSlFormElement: {
prototype: HTMLSlFormElement;
new (): HTMLSlFormElement;
};
interface HTMLSlIconElement extends Components.SlIcon, HTMLStencilElement {
}
var HTMLSlIconElement: {
prototype: HTMLSlIconElement;
new (): HTMLSlIconElement;
};
interface HTMLSlInputElement extends Components.SlInput, HTMLStencilElement {
}
var HTMLSlInputElement: {
prototype: HTMLSlInputElement;
new (): HTMLSlInputElement;
};
interface HTMLSlMenuElement extends Components.SlMenu, HTMLStencilElement {
}
var HTMLSlMenuElement: {
prototype: HTMLSlMenuElement;
new (): HTMLSlMenuElement;
};
interface HTMLSlMenuDividerElement extends Components.SlMenuDivider, HTMLStencilElement {
}
var HTMLSlMenuDividerElement: {
prototype: HTMLSlMenuDividerElement;
new (): HTMLSlMenuDividerElement;
};
interface HTMLSlMenuItemElement extends Components.SlMenuItem, HTMLStencilElement {
}
var HTMLSlMenuItemElement: {
prototype: HTMLSlMenuItemElement;
new (): HTMLSlMenuItemElement;
};
interface HTMLSlMenuLabelElement extends Components.SlMenuLabel, HTMLStencilElement {
}
var HTMLSlMenuLabelElement: {
prototype: HTMLSlMenuLabelElement;
new (): HTMLSlMenuLabelElement;
};
interface HTMLSlProgressBarElement extends Components.SlProgressBar, HTMLStencilElement {
}
var HTMLSlProgressBarElement: {
prototype: HTMLSlProgressBarElement;
new (): HTMLSlProgressBarElement;
};
interface HTMLSlProgressRingElement extends Components.SlProgressRing, HTMLStencilElement {
}
var HTMLSlProgressRingElement: {
prototype: HTMLSlProgressRingElement;
new (): HTMLSlProgressRingElement;
};
interface HTMLSlRadioElement extends Components.SlRadio, HTMLStencilElement {
}
var HTMLSlRadioElement: {
prototype: HTMLSlRadioElement;
new (): HTMLSlRadioElement;
};
interface HTMLSlRangeElement extends Components.SlRange, HTMLStencilElement {
}
var HTMLSlRangeElement: {
prototype: HTMLSlRangeElement;
new (): HTMLSlRangeElement;
};
interface HTMLSlSelectElement extends Components.SlSelect, HTMLStencilElement {
}
var HTMLSlSelectElement: {
prototype: HTMLSlSelectElement;
new (): HTMLSlSelectElement;
};
interface HTMLSlSpinnerElement extends Components.SlSpinner, HTMLStencilElement {
}
var HTMLSlSpinnerElement: {
prototype: HTMLSlSpinnerElement;
new (): HTMLSlSpinnerElement;
};
interface HTMLSlSwitchElement extends Components.SlSwitch, HTMLStencilElement {
}
var HTMLSlSwitchElement: {
prototype: HTMLSlSwitchElement;
new (): HTMLSlSwitchElement;
};
interface HTMLSlTabElement extends Components.SlTab, HTMLStencilElement {
}
var HTMLSlTabElement: {
prototype: HTMLSlTabElement;
new (): HTMLSlTabElement;
};
interface HTMLSlTabGroupElement extends Components.SlTabGroup, HTMLStencilElement {
}
var HTMLSlTabGroupElement: {
prototype: HTMLSlTabGroupElement;
new (): HTMLSlTabGroupElement;
};
interface HTMLSlTabPanelElement extends Components.SlTabPanel, HTMLStencilElement {
}
var HTMLSlTabPanelElement: {
prototype: HTMLSlTabPanelElement;
new (): HTMLSlTabPanelElement;
};
interface HTMLSlTagElement extends Components.SlTag, HTMLStencilElement {
}
var HTMLSlTagElement: {
prototype: HTMLSlTagElement;
new (): HTMLSlTagElement;
};
interface HTMLSlTextareaElement extends Components.SlTextarea, HTMLStencilElement {
}
var HTMLSlTextareaElement: {
prototype: HTMLSlTextareaElement;
new (): HTMLSlTextareaElement;
};
interface HTMLSlTooltipElement extends Components.SlTooltip, HTMLStencilElement {
}
var HTMLSlTooltipElement: {
prototype: HTMLSlTooltipElement;
new (): HTMLSlTooltipElement;
};
interface HTMLElementTagNameMap {
"sl-alert": HTMLSlAlertElement;
"sl-avatar": HTMLSlAvatarElement;
"sl-badge": HTMLSlBadgeElement;
"sl-button": HTMLSlButtonElement;
"sl-checkbox": HTMLSlCheckboxElement;
"sl-color-picker": HTMLSlColorPickerElement;
"sl-details": HTMLSlDetailsElement;
"sl-dialog": HTMLSlDialogElement;
"sl-drawer": HTMLSlDrawerElement;
"sl-dropdown": HTMLSlDropdownElement;
"sl-form": HTMLSlFormElement;
"sl-icon": HTMLSlIconElement;
"sl-input": HTMLSlInputElement;
"sl-menu": HTMLSlMenuElement;
"sl-menu-divider": HTMLSlMenuDividerElement;
"sl-menu-item": HTMLSlMenuItemElement;
"sl-menu-label": HTMLSlMenuLabelElement;
"sl-progress-bar": HTMLSlProgressBarElement;
"sl-progress-ring": HTMLSlProgressRingElement;
"sl-radio": HTMLSlRadioElement;
"sl-range": HTMLSlRangeElement;
"sl-select": HTMLSlSelectElement;
"sl-spinner": HTMLSlSpinnerElement;
"sl-switch": HTMLSlSwitchElement;
"sl-tab": HTMLSlTabElement;
"sl-tab-group": HTMLSlTabGroupElement;
"sl-tab-panel": HTMLSlTabPanelElement;
"sl-tag": HTMLSlTagElement;
"sl-textarea": HTMLSlTextareaElement;
"sl-tooltip": HTMLSlTooltipElement;
}
}
declare namespace LocalJSX {
interface SlAlert {
/**
* Set to true to make the alert closable.
*/
"closable"?: boolean;
/**
* Emitted after the alert closes and all transitions are complete.
*/
"onSlAfterHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted after the alert opens and all transitions are complete.
*/
"onSlAfterShow"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed.
*/
"onSlHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened.
*/
"onSlShow"?: (event: CustomEvent<any>) => void;
/**
* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
*/
"open"?: boolean;
/**
* The type of alert.
*/
"type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger';
}
interface SlAvatar {
/**
* Alternative text for the image.
*/
"alt"?: string;
/**
* The image source to use for the avatar.
*/
"image"?: string;
/**
* Initials to use as a fallback when no image is available (1-2 characters max recommended).
*/
"initials"?: string;
/**
* Initials to use as a fallback when no image is available (1-2 characters max recommended).
*/
"shape"?: 'circle' | 'square' | 'rounded';
}
interface SlBadge {
/**
* The badge's type.
*/
"type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text';
}
interface SlButton {
/**
* Set to true to draw the button with a caret for use with dropdowns, popovers, etc.
*/
"caret"?: boolean;
/**
* Set to true to draw a circle button.
*/
"circle"?: boolean;
/**
* Set to true to disable the button.
*/
"disabled"?: boolean;
/**
* Set to true to draw the button in a loading state.
*/
"loading"?: boolean;
/**
* An optional name for the button.
*/
"name"?: string;
/**
* Emitted when the button loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the button gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* Set to true to draw a pill-style button with rounded edges.
*/
"pill"?: boolean;
/**
* The button's size.
*/
"size"?: 'small' | 'medium' | 'large';
/**
* Indicates if activating the button should submit the form.
*/
"submit"?: boolean;
/**
* The button's type.
*/
"type"?: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text';
/**
* An optional value for the button.
*/
"value"?: string;
}
interface SlCheckbox {
/**
* Set to true to draw the checkbox in a checked state.
*/
"checked"?: boolean;
/**
* Set to true to disable the checkbox.
*/
"disabled"?: boolean;
/**
* Set to true to draw the checkbox in an indeterminate state.
*/
"indeterminate"?: boolean;
/**
* The checkbox's name attribute.
*/
"name"?: string;
/**
* Emitted when the control loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control's checked state changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* The checkbox's value attribute.
*/
"value"?: string;
}
interface SlColorPicker {
/**
* Set to true to disable the color picker.
*/
"disabled"?: boolean;
/**
* The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. The color picker will always accept user input in any format (including CSS color names) and convert it to the desired format.
*/
"format"?: 'hex' | 'rgb' | 'hsl';
/**
* Set to true to render the color picker inline rather than inside a dropdown.
*/
"inline"?: boolean;
/**
* Emitted after the color picker closes and all transitions are complete.
*/
"onSlAfterHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted after the color picker opens and all transitions are complete.
*/
"onSlAfterShow"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the color picker's value changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the color picker closes. Calling `event.preventDefault()` will prevent it from being closed.
*/
"onSlHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the color picker opens. Calling `event.preventDefault()` will prevent it from being opened.
*/
"onSlShow"?: (event: CustomEvent<any>) => void;
/**
* Whether to show the opacity slider.
*/
"opacity"?: boolean;
/**
* When `inline` is true, this determines the size of the color picker's trigger.
*/
"size"?: 'small' | 'medium' | 'large';
/**
* An array of predefined color swatches to display. Can include any format the color picker can parse, including HEX(A), RGB(A), HSL(A), and CSS color names.
*/
"swatches"?: string[];
/**
* By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.
*/
"uppercase"?: boolean;
/**
* The current color.
*/
"value"?: string;
}
interface SlDetails {
/**
* Set to true to prevent the user from toggling the details.
*/
"disabled"?: boolean;
/**
* Emitted after the details closes and all transitions are complete.
*/
"onSlAfterHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted after the details opens and all transitions are complete.
*/
"onSlAfterShow"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed.
*/
"onSlHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened.
*/
"onSlShow"?: (event: CustomEvent<any>) => void;
/**
* Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
*/
"open"?: boolean;
/**
* The summary to show in the details header.
*/
"summary"?: string;
}
interface SlDialog {
/**
* The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
*/
"label"?: string;
/**
* Set to true to disable the footer.
*/
"noFooter"?: boolean;
/**
* Set to true to disable the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.
*/
"noHeader"?: boolean;
/**
* Emitted after the dialog closes and all transitions are complete.
*/
"onSlAfterHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted after the dialog opens and all transitions are complete.
*/
"onSlAfterShow"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed.
*/
"onSlHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing.
*/
"onSlOverlayDismiss"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened.
*/
"onSlShow"?: (event: CustomEvent<any>) => void;
/**
* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
*/
"open"?: boolean;
}
interface SlDrawer {
/**
* By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
*/
"contained"?: boolean;
/**
* The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
*/
"label"?: string;
/**
* Removes the footer.
*/
"noFooter"?: boolean;
/**
* Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
*/
"noHeader"?: boolean;
/**
* Emitted after the drawer closes and all transitions are complete.
*/
"onSlAfterHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted after the drawer opens and all transitions are complete.
*/
"onSlAfterShow"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.
*/
"onSlHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing.
*/
"onSlOverlayDismiss"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
*/
"onSlShow"?: (event: CustomEvent<any>) => void;
/**
* Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
*/
"open"?: boolean;
/**
* The direction from which the drawer will open.
*/
"placement"?: 'top' | 'right' | 'bottom' | 'left';
}
interface SlDropdown {
/**
* Determines whether the dropdown should hide when a menu item is selected.
*/
"closeOnSelect"?: boolean;
/**
* The dropdown will close when the user interacts outside of this element (e.g. clicking).
*/
"containingElement"?: HTMLElement;
/**
* The distance in pixels from which to offset the panel away from its trigger.
*/
"distance"?: number;
/**
* Emitted after the dropdown closes and all transitions are complete.
*/
"onSlAfterHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted after the dropdown opens and all transitions are complete.
*/
"onSlAfterShow"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
*/
"onSlHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
*/
"onSlShow"?: (event: CustomEvent<any>) => void;
/**
* Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
*/
"open"?: boolean;
/**
* The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
*/
"placement"?: | 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'right'
| 'right-start'
| 'right-end'
| 'left'
| 'left-start'
| 'left-end';
/**
* The distance in pixels from which to offset the panel along its trigger.
*/
"skidding"?: number;
}
interface SlForm {
/**
* Emitted when the form is submitted.
*/
"onSlSubmit"?: (event: CustomEvent<any>) => void;
}
interface SlIcon {
/**
* An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
*/
"label"?: string;
/**
* The name of the icon to draw.
*/
"name"?: string;
/**
* Emitted when the icon failed to load.
*/
"onSlError"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the icon has loaded.
*/
"onSlLoad"?: (event: CustomEvent<any>) => void;
/**
* An external URL of an SVG file.
*/
"src"?: string;
}
interface SlInput {
/**
* The input's autocaptialize attribute.
*/
"autocapitalize"?: string;
/**
* The input's autocomplete attribute.
*/
"autocomplete"?: string;
/**
* The input's autocorrect attribute.
*/
"autocorrect"?: string;
/**
* The input's autofocus attribute.
*/
"autofocus"?: boolean;
/**
* Set to true to add a clear button when the input is populated.
*/
"clearable"?: boolean;
/**
* Set to true to disable the input.
*/
"disabled"?: boolean;
/**
* The input's inputmode attribute.
*/
"inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
/**
* Set to true to indicate that the user input is invalid.
*/
"invalid"?: boolean;
/**
* The input's label.
*/
"label"?: string;
/**
* The input's max attribute.
*/
"max"?: number;
/**
* The input's maxlength attribute.
*/
"maxlength"?: number;
/**
* The input's min attribute.
*/
"min"?: number;
/**
* The input's minlength attribute.
*/
"minlength"?: number;
/**
* The input's name attribute.
*/
"name"?: string;
/**
* Emitted when the control loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control's value changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control receives input.
*/
"onSlInput"?: (event: CustomEvent<any>) => void;
/**
* The input's pattern attribute.
*/
"pattern"?: string;
/**
* Set to true to draw a pill-style input with rounded edges.
*/
"pill"?: boolean;
/**
* The input's placeholder text.
*/
"placeholder"?: string;
/**
* Set to true for a readonly input.
*/
"readonly"?: boolean;
/**
* The input's required attribute.
*/
"required"?: boolean;
/**
* The input's size.
*/
"size"?: 'small' | 'medium' | 'large';
/**
* The input's step attribute.
*/
"step"?: number;
/**
* Set to true to add a password toggle button for password inputs.
*/
"togglePassword"?: boolean;
/**
* The input's type.
*/
"type"?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
/**
* Set to true to indicate that the user input is valid.
*/
"valid"?: boolean;
/**
* The input's value attribute.
*/
"value"?: string;
}
interface SlMenu {
/**
* Emitted when the menu loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the menu gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* Emitted when a menu item is selected.
*/
"onSlSelect"?: (event: CustomEvent<any>) => void;
}
interface SlMenuDivider {
}
interface SlMenuItem {
/**
* Set to true to draw the menu item in an active state.
*/
"active"?: boolean;
/**
* Set to true to draw the item in a checked state.
*/
"checked"?: boolean;
/**
* Set to true to draw the menu item in a disabled state.
*/
"disabled"?: boolean;
/**
* A unique value to store in the menu item.
*/
"value"?: string;
}
interface SlMenuLabel {
}
interface SlProgressBar {
/**
* The progress bar's percentage, 0 to 100.
*/
"percentage"?: number;
}
interface SlProgressRing {
/**
* The current progress percentage, 0 - 100.
*/
"percentage"?: number;
/**
* The size of the progress ring in pixels.
*/
"size"?: number;
/**
* The stroke width of the progress ring in pixels.
*/
"strokeWidth"?: number;
}
interface SlRadio {
/**
* Set to true to draw the radio in a checked state.
*/
"checked"?: boolean;
/**
* Set to true to disable the radio.
*/
"disabled"?: boolean;
/**
* The radio's name attribute.
*/
"name"?: string;
/**
* Emitted when the control loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control's checked state changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* The radio's value attribute.
*/
"value"?: string;
}
interface SlRange {
/**
* Set to true to disable the input.
*/
"disabled"?: boolean;
/**
* The input's max attribute.
*/
"max"?: number;
/**
* The input's min attribute.
*/
"min"?: number;
/**
* The input's name attribute.
*/
"name"?: string;
/**
* Emitted when the control loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control's value changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* The input's step attribute.
*/
"step"?: number;
/**
* The preferred placedment of the tooltip.
*/
"tooltip"?: 'top' | 'bottom' | 'none';
/**
* A function used to format the tooltip's value.
*/
"tooltipFormatter"?: (value: number) => string;
/**
* The input's value attribute.
*/
"value"?: number;
}
interface SlSelect {
/**
* Set to true to disable the select control.
*/
"disabled"?: boolean;
/**
* Set to true to indicate that the user input is invalid.
*/
"invalid"?: boolean;
/**
* The select's label.
*/
"label"?: string;
/**
* The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to -1 to remove the limit.
*/
"maxTagsVisible"?: number;
/**
* Set to true to enable multiselect.
*/
"multiple"?: boolean;
/**
* The select's name.
*/
"name"?: string;
/**
* Emitted when the control loses focus
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control's value changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control gains focus
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* Set to true to draw a pill-style select with rounded edges.
*/
"pill"?: boolean;
/**
* The select's placeholder text.
*/
"placeholder"?: string;
/**
* The select's size.
*/
"size"?: 'small' | 'medium' | 'large';
/**
* Set to true to indicate that the user input is valid.
*/
"valid"?: boolean;
/**
* The value of the control. This will be a string or an array depending on `multiple`.
*/
"value"?: string | Array<string>;
}
interface SlSpinner {
}
interface SlSwitch {
/**
* Set to true to draw the switch in a checked state.
*/
"checked"?: boolean;
/**
* Set to true to disable the switch.
*/
"disabled"?: boolean;
/**
* The switch's name attribute.
*/
"name"?: string;
/**
* Emitted when the control loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control's checked state changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* The switch's value attribute.
*/
"value"?: string;
}
interface SlTab {
/**
* Set to true to draw the tab in an active state.
*/
"active"?: boolean;
/**
* Set to true to draw the tab in a disabled state.
*/
"disabled"?: boolean;
/**
* The name of the tab panel the tab will control. The panel must be located in the same tab group.
*/
"panel"?: string;
}
interface SlTabGroup {
/**
* Emitted when a tab is hidden.
*/
"onSlTabHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when a tab is shown.
*/
"onSlTabShow"?: (event: CustomEvent<any>) => void;
/**
* The placement of the tabs.
*/
"placement"?: 'top' | 'bottom' | 'left' | 'right';
}
interface SlTabPanel {
/**
* When true, the tab panel will be shown.
*/
"active"?: boolean;
/**
* The tab panel's name.
*/
"name"?: string;
}
interface SlTag {
/**
* Set to true to make the tag clearable.
*/
"clearable"?: boolean;
/**
* Emitted when the clear button is activated.
*/
"onSlClear"?: (event: CustomEvent<any>) => void;
/**
* Set to true to draw a pill-style tag with rounded edges.
*/
"pill"?: boolean;
/**
* The tag's size.
*/
"size"?: 'small' | 'medium' | 'large';
/**
* The tag's type.
*/
"type"?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text';
}
interface SlTextarea {
/**
* The textarea's autocaptialize attribute.
*/
"autocapitalize"?: string;
/**
* The textarea's autocomplete attribute.
*/
"autocomplete"?: string;
/**
* The textarea's autocorrect attribute.
*/
"autocorrect"?: string;
/**
* The textarea's autofocus attribute.
*/
"autofocus"?: boolean;
/**
* Set to true to disable the textarea.
*/
"disabled"?: boolean;
/**
* The textarea's inputmode attribute.
*/
"inputmode"?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
/**
* Set to true to indicate that the user input is invalid.
*/
"invalid"?: boolean;
/**
* The textarea's label.
*/
"label"?: string;
/**
* The textarea's maxlength attribute.
*/
"maxlength"?: number;
/**
* The textarea's name attribute.
*/
"name"?: string;
/**
* Emitted when the control loses focus.
*/
"onSlBlur"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control's value changes.
*/
"onSlChange"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control gains focus.
*/
"onSlFocus"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the control receives input.
*/
"onSlInput"?: (event: CustomEvent<any>) => void;
/**
* The textarea's placeholder text.
*/
"placeholder"?: string;
/**
* Set to true for a readonly textarea.
*/
"readonly"?: boolean;
/**
* The textarea's required attribute.
*/
"required"?: boolean;
/**
* Controls how the textarea can be resized.
*/
"resize"?: 'none' | 'vertical' | 'auto';
/**
* The number of rows to display by default.
*/
"rows"?: number;
/**
* The textarea's size.
*/
"size"?: 'small' | 'medium' | 'large';
/**
* Set to true to indicate that the user input is valid.
*/
"valid"?: boolean;
/**
* The textarea's value attribute.
*/
"value"?: string;
}
interface SlTooltip {
/**
* The tooltip's content.
*/
"content"?: string;
/**
* Set to true to disable the tooltip so it won't show when triggered.
*/
"disabled"?: boolean;
/**
* The distance in pixels from which to offset the tooltip away from its target.
*/
"distance"?: number;
/**
* Emitted after the tooltip has hidden and all transitions are complete.
*/
"onSlAfterHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted after the tooltip has shown and all transitions are complete.
*/
"onSlAfterShow"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden.
*/
"onSlHide"?: (event: CustomEvent<any>) => void;
/**
* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown.
*/
"onSlShow"?: (event: CustomEvent<any>) => void;
/**
* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
*/
"open"?: boolean;
/**
* The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
*/
"placement"?: | 'top'
| 'top-start'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end';
/**
* The distance in pixels from which to offset the tooltip along its target.
*/
"skidding"?: number;
/**
* Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically.
*/
"trigger"?: string;
}
interface IntrinsicElements {
"sl-alert": SlAlert;
"sl-avatar": SlAvatar;
"sl-badge": SlBadge;
"sl-button": SlButton;
"sl-checkbox": SlCheckbox;
"sl-color-picker": SlColorPicker;
"sl-details": SlDetails;
"sl-dialog": SlDialog;
"sl-drawer": SlDrawer;
"sl-dropdown": SlDropdown;
"sl-form": SlForm;
"sl-icon": SlIcon;
"sl-input": SlInput;
"sl-menu": SlMenu;
"sl-menu-divider": SlMenuDivider;
"sl-menu-item": SlMenuItem;
"sl-menu-label": SlMenuLabel;
"sl-progress-bar": SlProgressBar;
"sl-progress-ring": SlProgressRing;
"sl-radio": SlRadio;
"sl-range": SlRange;
"sl-select": SlSelect;
"sl-spinner": SlSpinner;
"sl-switch": SlSwitch;
"sl-tab": SlTab;
"sl-tab-group": SlTabGroup;
"sl-tab-panel": SlTabPanel;
"sl-tag": SlTag;
"sl-textarea": SlTextarea;
"sl-tooltip": SlTooltip;
}
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"sl-alert": LocalJSX.SlAlert & JSXBase.HTMLAttributes<HTMLSlAlertElement>;
"sl-avatar": LocalJSX.SlAvatar & JSXBase.HTMLAttributes<HTMLSlAvatarElement>;
"sl-badge": LocalJSX.SlBadge & JSXBase.HTMLAttributes<HTMLSlBadgeElement>;
"sl-button": LocalJSX.SlButton & JSXBase.HTMLAttributes<HTMLSlButtonElement>;
"sl-checkbox": LocalJSX.SlCheckbox & JSXBase.HTMLAttributes<HTMLSlCheckboxElement>;
"sl-color-picker": LocalJSX.SlColorPicker & JSXBase.HTMLAttributes<HTMLSlColorPickerElement>;
"sl-details": LocalJSX.SlDetails & JSXBase.HTMLAttributes<HTMLSlDetailsElement>;
"sl-dialog": LocalJSX.SlDialog & JSXBase.HTMLAttributes<HTMLSlDialogElement>;
"sl-drawer": LocalJSX.SlDrawer & JSXBase.HTMLAttributes<HTMLSlDrawerElement>;
"sl-dropdown": LocalJSX.SlDropdown & JSXBase.HTMLAttributes<HTMLSlDropdownElement>;
"sl-form": LocalJSX.SlForm & JSXBase.HTMLAttributes<HTMLSlFormElement>;
"sl-icon": LocalJSX.SlIcon & JSXBase.HTMLAttributes<HTMLSlIconElement>;
"sl-input": LocalJSX.SlInput & JSXBase.HTMLAttributes<HTMLSlInputElement>;
"sl-menu": LocalJSX.SlMenu & JSXBase.HTMLAttributes<HTMLSlMenuElement>;
"sl-menu-divider": LocalJSX.SlMenuDivider & JSXBase.HTMLAttributes<HTMLSlMenuDividerElement>;
"sl-menu-item": LocalJSX.SlMenuItem & JSXBase.HTMLAttributes<HTMLSlMenuItemElement>;
"sl-menu-label": LocalJSX.SlMenuLabel & JSXBase.HTMLAttributes<HTMLSlMenuLabelElement>;
"sl-progress-bar": LocalJSX.SlProgressBar & JSXBase.HTMLAttributes<HTMLSlProgressBarElement>;
"sl-progress-ring": LocalJSX.SlProgressRing & JSXBase.HTMLAttributes<HTMLSlProgressRingElement>;
"sl-radio": LocalJSX.SlRadio & JSXBase.HTMLAttributes<HTMLSlRadioElement>;
"sl-range": LocalJSX.SlRange & JSXBase.HTMLAttributes<HTMLSlRangeElement>;
"sl-select": LocalJSX.SlSelect & JSXBase.HTMLAttributes<HTMLSlSelectElement>;
"sl-spinner": LocalJSX.SlSpinner & JSXBase.HTMLAttributes<HTMLSlSpinnerElement>;
"sl-switch": LocalJSX.SlSwitch & JSXBase.HTMLAttributes<HTMLSlSwitchElement>;
"sl-tab": LocalJSX.SlTab & JSXBase.HTMLAttributes<HTMLSlTabElement>;
"sl-tab-group": LocalJSX.SlTabGroup & JSXBase.HTMLAttributes<HTMLSlTabGroupElement>;
"sl-tab-panel": LocalJSX.SlTabPanel & JSXBase.HTMLAttributes<HTMLSlTabPanelElement>;
"sl-tag": LocalJSX.SlTag & JSXBase.HTMLAttributes<HTMLSlTagElement>;
"sl-textarea": LocalJSX.SlTextarea & JSXBase.HTMLAttributes<HTMLSlTextareaElement>;
"sl-tooltip": LocalJSX.SlTooltip & JSXBase.HTMLAttributes<HTMLSlTooltipElement>;
}
}
}