/* 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-public-runtime";
import { ItemType } from "./components/bottom-bar-item/bottom-bar-item";
import { Size, Variant } from "./components/button/button";
import { CalloutVariant } from "./components/callout/callout";
import { InputMode, InputType, Size as Size1 } from "./components/input/input";
import { ActionType, ItemType as ItemType1 } from "./components/list-view-item/list-view-item";
import { Size as Size2 } from "./components/segmented-control/segmented-control";
import { Direction, GapSize } from "./components/stack/stack";
export { ItemType } from "./components/bottom-bar-item/bottom-bar-item";
export { Size, Variant } from "./components/button/button";
export { CalloutVariant } from "./components/callout/callout";
export { InputMode, InputType, Size as Size1 } from "./components/input/input";
export { ActionType, ItemType as ItemType1 } from "./components/list-view-item/list-view-item";
export { Size as Size2 } from "./components/segmented-control/segmented-control";
export { Direction, GapSize } from "./components/stack/stack";
export namespace Components {
    /**
     * The App Bar component is used at the top of a page to display a title and
     * optional prefix and suffix actions. It's typically used to provide a
     * native-like navigation experience.
     */
    interface ScoutAppBar {
        "titleText"?: string;
    }
    /**
     * The avatar component is used to display the user's profile picture.
     * Wrap it with a container, to determine its size, since it scales to fit container.
     */
    interface ScoutAvatar {
        /**
          * The name of the user.
          * @default ""
         */
        "alt": string;
        /**
          * The source URL of the user image.
          * @default ""
         */
        "imageSrc": string;
    }
    /**
     * The bottom bar component is used in the Jamboree26 app to provide
     * navigation at the bottom of the screen.
     */
    interface ScoutBottomBar {
    }
    /**
     * A bottom bar item used within the bottom bar for navigation. Should not be
     * used outside of a bottom bar.
     */
    interface ScoutBottomBarItem {
        /**
          * Whether the item is currently active. Should be set to true when the item represents the current page.
         */
        "active"?: boolean;
        /**
          * An optional link to navigate to when the item is clicked. Only used when `type` is set to "link".
         */
        "href"?: string;
        /**
          * An icon to display above the label. Must be an SVG string.
         */
        "icon": string;
        /**
          * The label to display below the icon.
         */
        "label": string;
        "rel"?: string;
        "target"?: string;
        /**
          * The type of the bottom bar item, either a button or a link.
          * @default "button"
         */
        "type": ItemType;
    }
    /**
     * A button component that can be used either as a normal button or as a link.
     * Will render a `<button>` element when the `type` is set to "button",
     * "submit", or "reset", and an `<a>` element when the `type` is set to "link".
     */
    interface ScoutButton {
        /**
          * Whether the button is disabled. Disabled buttons are not clickable and excluded from tab order. Use only when absolutely necessary.
          * @default false
         */
        "disabled": boolean;
        "href"?: string;
        /**
          * An optional icon to display alongside the button text. Must be an SVG string.
         */
        "icon"?: string;
        /**
          * @default false
         */
        "iconOnly": boolean;
        /**
          * @default "after"
         */
        "iconPosition": "before" | "after";
        /**
          * Whether the button is in a loading state. Shows a centered spinner and hides content.
          * @default false
         */
        "loading": boolean;
        "rel"?: string;
        /**
          * Size of the button.
          * @default "medium"
         */
        "size": Size;
        "target"?: string;
        /**
          * @default "button"
         */
        "type": "button" | "submit" | "reset" | "link";
        /**
          * The variant primarily affects the color of the button.
          * @default "outlined"
         */
        "variant": Variant;
    }
    /**
     * An inline callout / alert for conveying status or contextual information.
     * White background with a hairline border tinted by the variant color.
     * Use the `actions` slot to add `scout-button` elements.
     */
    interface ScoutCallout {
        /**
          * Show a dismiss (×) button in the top-right corner.
          * @default false
         */
        "dismissible": boolean;
        /**
          * Short, bold heading line.
         */
        "heading"?: string;
        /**
          * Visual intent of the callout.
          * @default "info"
         */
        "variant": CalloutVariant;
    }
    /**
     * A general surface to hold various types of content.
     */
    interface ScoutCard {
    }
    /**
     * The checkbox component is used to let users select one or more options from a
     * set. For toggling a single option, consider using the Switch component
     * instead. When used in a form, make sure to wrap it in a Field component to
     * display a label, help text, and error messages.
     */
    interface ScoutCheckbox {
        /**
          * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
         */
        "ariaLabelledby"?: string;
        /**
          * @default false
         */
        "checked": boolean;
        /**
          * @default false
         */
        "disabled": boolean;
        "label"?: string;
        "name"?: string;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        "value"?: string;
    }
    interface ScoutDivider {
    }
    interface ScoutDrawer {
        /**
          * Back button label.
          * @default ""
         */
        "backButtonLabel": string;
        /**
          * Disable backdrop for the drawer.
          * @default false
         */
        "disableBackdrop": boolean;
        /**
          * Disable drawer content padding. Use only if you have specific use case and you need to use full width.
          * @default false
         */
        "disableContentPadding": boolean;
        /**
          * Exit button label.
          * @default ""
         */
        "exitButtonLabel": string;
        /**
          * Heading within the sheet.
          * @default ""
         */
        "heading": string;
        /**
          * Open/close state of the drawer.
          * @default false
         */
        "open": boolean;
        /**
          * Render back button.
          * @default false
         */
        "showBackButton": boolean;
        /**
          * Render exit button.
          * @default false
         */
        "showExitButton": boolean;
    }
    /**
     * The field component is used to wrap form fields with a label, help text, and
     * error messages. It automatically captures validation events from its child
     * input components and displays error messages accordingly.
     */
    interface ScoutField {
        /**
          * Help text shown below the field.
         */
        "helpText"?: string;
        /**
          * Label shown above the field.
         */
        "label": string;
    }
    /**
     * The input component is a basic text input field that can be used to capture
     * user input. It supports various types and input modes for different use
     * cases. When used in a form, make sure to wrap it in a Field component to
     * display a label, help text, and error messages.
     */
    interface ScoutInput {
        /**
          * Hint for the browser's autocomplete feature. Maps directly to the native `autocomplete` attribute. Use `"off"` to disable autocomplete, or any autofill detail token such as `"name"`, `"email"`, `"current-password"`, etc. See MDN for the full list: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
         */
        "autocomplete"?: string;
        /**
          * When true, a clear button is shown at the trailing edge whenever the input has a value. Clicking it resets the input to empty and emits scoutInputChange.
          * @default false
         */
        "clearable": boolean;
        /**
          * Initial value of the input element for uncontrolled usage. Unlike `value`, this only sets the value on first render and does not keep the input in sync with the prop afterwards.
         */
        "defaultValue"?: string;
        /**
          * Whether the input is disabled. Disabled inputs are not editable, excluded from tab order and are not validated.
          * @default false
         */
        "disabled": boolean;
        /**
          * Raw SVG string for an icon to display at the leading edge of the input. Import with the `?raw` suffix, e.g. `import searchIcon from "@tabler/icons/outline/search.svg?raw"`.
         */
        "icon"?: string;
        /**
          * Input mode hints for devices with dynamic keyboards.
         */
        "inputmode"?: InputMode;
        "name": string;
        /**
          * Regex pattern for input validation.
         */
        "pattern"?: string;
        /**
          * Placeholder text should rarely be used as it poses a lot of accessibility issues.
         */
        "placeholder"?: string;
        /**
          * Size of the input element. Large fields are typically used for prominent inputs, such as a top search field on a page, while medium fields are used for regular form inputs.
          * @default "medium"
         */
        "size": Size1;
        /**
          * Type of input element. If you need a number input, read the accessibility section of this MDN article first: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility
          * @default "text"
         */
        "type": InputType;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        /**
          * Value of the input element, in case you want to control it yourself.
          * @default ""
         */
        "value": string;
    }
    interface ScoutLink {
        /**
          * The URL that the link points to. Required when type is set to link
         */
        "href"?: string;
        /**
          * Text to be displayed for the link
         */
        "label": string;
        /**
          * If the label property is not sufficient to describe its use, add an aria-label describing what happens when pressing the button or where the user navigates if it is a link.
         */
        "linkAriaLabel"?: string;
        "rel"?: string;
        /**
          * _blank	Opens the linked document in a new window or tab  _self	Opens the linked document in the same frame as it was clicked (this is default)  _parent	Opens the linked document in the parent frame  _top	Opens the linked document in the full body of the window  _framename	Opens the linked document in the named iframe
          * @default "_self"
         */
        "target"?: "_blank" | "_self" | "_parent" | "_top" | "framename";
        /**
          * There are two types. If you intend to use it as a button with onclick, a button is rendered, however if you want to you it as a normal link, a link with href is rendered.
          * @default "link"
         */
        "type": "link" | "button";
    }
    interface ScoutListView {
    }
    interface ScoutListViewItem {
        /**
          * The action to display on the right side of the item. For example, a chevron. This is purely visual and does not affect the behavior of the item in any way. Not visible when the type is "radio" or "checkbox".
          * @default null
         */
        "action": ActionType;
        "checked"?: boolean;
        "disabled"?: boolean;
        "href"?: string;
        "icon"?: string;
        "name"?: string;
        "primary"?: string;
        "rel"?: string;
        "secondary"?: string;
        "target"?: string;
        /**
          * @default "button"
         */
        "type": ItemType1;
        "value"?: string;
    }
    interface ScoutListViewSubheader {
        /**
          * @default "h2"
         */
        "headingLevel": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
        "text": string;
    }
    interface ScoutLoader {
        /**
          * @default "base"
         */
        "size"?: "xs" | "sm" | "base" | "lg" | "xl";
        "text"?: string;
    }
    interface ScoutPagination {
        /**
          * Will always included first and last page, plus "..." if exceeded.
          * @default 5
         */
        "maxAmountOfPagesShowing": number;
        /**
          * Total number of pages.
          * @default 0
         */
        "pages": number;
        /**
          * Pagination aria label to describe what type of nav it is. E.g "Pagination"
          * @default ""
         */
        "paginationAriaLabel": string;
        /**
          * Which page that is selected.
          * @default 0
         */
        "selectedIndex": number;
    }
    /**
     * The radio button component is used to let users select one option from a set.
     * When used in a form, make sure to wrap it in a Field component to display a
     * label, help text, and error messages.
     */
    interface ScoutRadioButton {
        /**
          * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.
         */
        "ariaLabelledby"?: string;
        /**
          * @default false
         */
        "checked": boolean;
        /**
          * @default false
         */
        "disabled": boolean;
        "label"?: string;
        "name"?: string;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        "value"?: string;
    }
    /**
     * The segmented control component presents a set of options where exactly one
     * option is active at a time.
     * The component displays an indicator under the selected option and emits a
     * `scoutChange` event when the user picks a different option, so you can update
     * `value`.
     * Use button elements as the slotted segment options.
     */
    interface ScoutSegmentedControl {
        /**
          * Visual size of the segmented control. Use `small` for dense layouts and `medium` for the default size.
          * @default "medium"
         */
        "size": Size2;
        /**
          * Zero-based index of the currently active segment.
          * @default 0
         */
        "value": number;
    }
    /**
     * The select component is a dropdown menu that allows users to select one
     * option from a list. When used in a form, make sure to wrap it in a Field
     * component to display a label, help text, and error messages.
     */
    interface ScoutSelect {
        /**
          * Whether the select is disabled. Disabled selects are not editable, excluded from tab order and are not validated.
          * @default false
         */
        "disabled": boolean;
        "name": string;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        /**
          * Value of the select element, in case you want to control it yourself.
          * @default ""
         */
        "value": string;
    }
    /**
     * Render this component while you are waiting for your content.
     * Could be a fetch, or another way of loading data.
     * Either toggle the render of the component, or use the disable property unmount the skeleton.
     */
    interface ScoutSkeleton {
        /**
          * If you are in need of a specific background color, you can set it.
          * @default null
         */
        "backgroundColor": string | null;
        /**
          * Use the disabled property to unmount the skeleton
          * @default false
         */
        "disabled": boolean;
    }
    interface ScoutStack {
        /**
          * The direction of the stack.
          * @default "row"
         */
        "direction": Direction;
        /**
          * Gap size. If more sizes are needed, we can expand.
          * @default "m"
         */
        "gapSize": GapSize;
    }
    /**
     * The switch component is used to toggle between two states, on and off.
     * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field
     * component to display a label, help text, and error messages.
     */
    interface ScoutSwitch {
        /**
          * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
         */
        "ariaLabelledby"?: string;
        /**
          * @default false
         */
        "disabled": boolean;
        "label"?: string;
        /**
          * Indicates whether the switch is toggled on or off.
          * @default false
         */
        "toggled": boolean;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
    }
    interface ScoutTabbedView {
        /**
          * The `id` of the associated `scout-tabs` element. When omitted the component looks for a preceding `scout-tabs` sibling automatically.
         */
        "tabsId"?: string;
        /**
          * Zero-based index of the currently active panel.
          * @default 0
         */
        "value": number;
    }
    interface ScoutTabbedViewPanel {
    }
    /**
     * The tabs component is used to create a tabbed interface. It manages the state
     * of which tab is active and displays an indicator under the active tab. Use
     * `ScoutTabsTab` components to define the individual tabs.
     * Currently there is no support for navigational tabs. Navigation has to be
     * handled programmatically for now.
     */
    interface ScoutTabs {
        /**
          * Fractional tab index used to interpolate the indicator position during a swipe gesture. Set this from `scoutSwipeProgress` events on `scout-tabbed-view`. When undefined the indicator uses `value` with its normal CSS transition.
         */
        "swipeValue"?: number;
        /**
          * Zero-based index of the currently active tab.
          * @default 0
         */
        "value": number;
    }
    interface ScoutTabsTab {
    }
}
export interface ScoutBottomBarItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutBottomBarItemElement;
}
export interface ScoutButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutButtonElement;
}
export interface ScoutCalloutCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutCalloutElement;
}
export interface ScoutCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutCheckboxElement;
}
export interface ScoutDrawerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutDrawerElement;
}
export interface ScoutInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutInputElement;
}
export interface ScoutLinkCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutLinkElement;
}
export interface ScoutListViewItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutListViewItemElement;
}
export interface ScoutPaginationCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutPaginationElement;
}
export interface ScoutRadioButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutRadioButtonElement;
}
export interface ScoutSegmentedControlCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutSegmentedControlElement;
}
export interface ScoutSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutSelectElement;
}
export interface ScoutSwitchCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutSwitchElement;
}
export interface ScoutTabbedViewCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutTabbedViewElement;
}
export interface ScoutTabsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLScoutTabsElement;
}
declare global {
    /**
     * The App Bar component is used at the top of a page to display a title and
     * optional prefix and suffix actions. It's typically used to provide a
     * native-like navigation experience.
     */
    interface HTMLScoutAppBarElement extends Components.ScoutAppBar, HTMLStencilElement {
    }
    var HTMLScoutAppBarElement: {
        prototype: HTMLScoutAppBarElement;
        new (): HTMLScoutAppBarElement;
    };
    /**
     * The avatar component is used to display the user's profile picture.
     * Wrap it with a container, to determine its size, since it scales to fit container.
     */
    interface HTMLScoutAvatarElement extends Components.ScoutAvatar, HTMLStencilElement {
    }
    var HTMLScoutAvatarElement: {
        prototype: HTMLScoutAvatarElement;
        new (): HTMLScoutAvatarElement;
    };
    /**
     * The bottom bar component is used in the Jamboree26 app to provide
     * navigation at the bottom of the screen.
     */
    interface HTMLScoutBottomBarElement extends Components.ScoutBottomBar, HTMLStencilElement {
    }
    var HTMLScoutBottomBarElement: {
        prototype: HTMLScoutBottomBarElement;
        new (): HTMLScoutBottomBarElement;
    };
    interface HTMLScoutBottomBarItemElementEventMap {
        "scoutClick": void;
    }
    /**
     * A bottom bar item used within the bottom bar for navigation. Should not be
     * used outside of a bottom bar.
     */
    interface HTMLScoutBottomBarItemElement extends Components.ScoutBottomBarItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutBottomBarItemElementEventMap>(type: K, listener: (this: HTMLScoutBottomBarItemElement, ev: ScoutBottomBarItemCustomEvent<HTMLScoutBottomBarItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutBottomBarItemElementEventMap>(type: K, listener: (this: HTMLScoutBottomBarItemElement, ev: ScoutBottomBarItemCustomEvent<HTMLScoutBottomBarItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutBottomBarItemElement: {
        prototype: HTMLScoutBottomBarItemElement;
        new (): HTMLScoutBottomBarItemElement;
    };
    interface HTMLScoutButtonElementEventMap {
        "scoutClick": void;
    }
    /**
     * A button component that can be used either as a normal button or as a link.
     * Will render a `<button>` element when the `type` is set to "button",
     * "submit", or "reset", and an `<a>` element when the `type` is set to "link".
     */
    interface HTMLScoutButtonElement extends Components.ScoutButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutButtonElementEventMap>(type: K, listener: (this: HTMLScoutButtonElement, ev: ScoutButtonCustomEvent<HTMLScoutButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutButtonElementEventMap>(type: K, listener: (this: HTMLScoutButtonElement, ev: ScoutButtonCustomEvent<HTMLScoutButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutButtonElement: {
        prototype: HTMLScoutButtonElement;
        new (): HTMLScoutButtonElement;
    };
    interface HTMLScoutCalloutElementEventMap {
        "scoutDismiss": void;
    }
    /**
     * An inline callout / alert for conveying status or contextual information.
     * White background with a hairline border tinted by the variant color.
     * Use the `actions` slot to add `scout-button` elements.
     */
    interface HTMLScoutCalloutElement extends Components.ScoutCallout, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutCalloutElementEventMap>(type: K, listener: (this: HTMLScoutCalloutElement, ev: ScoutCalloutCustomEvent<HTMLScoutCalloutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutCalloutElementEventMap>(type: K, listener: (this: HTMLScoutCalloutElement, ev: ScoutCalloutCustomEvent<HTMLScoutCalloutElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutCalloutElement: {
        prototype: HTMLScoutCalloutElement;
        new (): HTMLScoutCalloutElement;
    };
    /**
     * A general surface to hold various types of content.
     */
    interface HTMLScoutCardElement extends Components.ScoutCard, HTMLStencilElement {
    }
    var HTMLScoutCardElement: {
        prototype: HTMLScoutCardElement;
        new (): HTMLScoutCardElement;
    };
    interface HTMLScoutCheckboxElementEventMap {
        "scoutInputChange": {
      value: string;
      element: HTMLElement;
    };
        "scoutBlur": void;
        "scoutValidate": {
      value: string;
      element: HTMLElement;
    };
        "_scoutValidityChanged": { element: HTMLElement };
        "_scoutInvalid": void;
        "_scoutFieldId": string;
        "scoutChecked": {
    checked: boolean;
    element: HTMLInputElement;
  };
    }
    /**
     * The checkbox component is used to let users select one or more options from a
     * set. For toggling a single option, consider using the Switch component
     * instead. When used in a form, make sure to wrap it in a Field component to
     * display a label, help text, and error messages.
     */
    interface HTMLScoutCheckboxElement extends Components.ScoutCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutCheckboxElementEventMap>(type: K, listener: (this: HTMLScoutCheckboxElement, ev: ScoutCheckboxCustomEvent<HTMLScoutCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutCheckboxElementEventMap>(type: K, listener: (this: HTMLScoutCheckboxElement, ev: ScoutCheckboxCustomEvent<HTMLScoutCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutCheckboxElement: {
        prototype: HTMLScoutCheckboxElement;
        new (): HTMLScoutCheckboxElement;
    };
    interface HTMLScoutDividerElement extends Components.ScoutDivider, HTMLStencilElement {
    }
    var HTMLScoutDividerElement: {
        prototype: HTMLScoutDividerElement;
        new (): HTMLScoutDividerElement;
    };
    interface HTMLScoutDrawerElementEventMap {
        "backButtonClicked": void;
        "exitButtonClicked": void;
    }
    interface HTMLScoutDrawerElement extends Components.ScoutDrawer, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutDrawerElementEventMap>(type: K, listener: (this: HTMLScoutDrawerElement, ev: ScoutDrawerCustomEvent<HTMLScoutDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutDrawerElementEventMap>(type: K, listener: (this: HTMLScoutDrawerElement, ev: ScoutDrawerCustomEvent<HTMLScoutDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutDrawerElement: {
        prototype: HTMLScoutDrawerElement;
        new (): HTMLScoutDrawerElement;
    };
    /**
     * The field component is used to wrap form fields with a label, help text, and
     * error messages. It automatically captures validation events from its child
     * input components and displays error messages accordingly.
     */
    interface HTMLScoutFieldElement extends Components.ScoutField, HTMLStencilElement {
    }
    var HTMLScoutFieldElement: {
        prototype: HTMLScoutFieldElement;
        new (): HTMLScoutFieldElement;
    };
    interface HTMLScoutInputElementEventMap {
        "scoutInputChange": {
      value: string;
      element: HTMLElement;
    };
        "scoutBlur": void;
        "scoutValidate": {
      value: string;
      element: HTMLElement;
    };
        "_scoutValidityChanged": { element: HTMLElement };
        "_scoutInvalid": void;
        "_scoutFieldId": string;
    }
    /**
     * The input component is a basic text input field that can be used to capture
     * user input. It supports various types and input modes for different use
     * cases. When used in a form, make sure to wrap it in a Field component to
     * display a label, help text, and error messages.
     */
    interface HTMLScoutInputElement extends Components.ScoutInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutInputElementEventMap>(type: K, listener: (this: HTMLScoutInputElement, ev: ScoutInputCustomEvent<HTMLScoutInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutInputElementEventMap>(type: K, listener: (this: HTMLScoutInputElement, ev: ScoutInputCustomEvent<HTMLScoutInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutInputElement: {
        prototype: HTMLScoutInputElement;
        new (): HTMLScoutInputElement;
    };
    interface HTMLScoutLinkElementEventMap {
        "scoutLinkClick": HTMLButtonElement;
    }
    interface HTMLScoutLinkElement extends Components.ScoutLink, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutLinkElementEventMap>(type: K, listener: (this: HTMLScoutLinkElement, ev: ScoutLinkCustomEvent<HTMLScoutLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutLinkElementEventMap>(type: K, listener: (this: HTMLScoutLinkElement, ev: ScoutLinkCustomEvent<HTMLScoutLinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutLinkElement: {
        prototype: HTMLScoutLinkElement;
        new (): HTMLScoutLinkElement;
    };
    interface HTMLScoutListViewElement extends Components.ScoutListView, HTMLStencilElement {
    }
    var HTMLScoutListViewElement: {
        prototype: HTMLScoutListViewElement;
        new (): HTMLScoutListViewElement;
    };
    interface HTMLScoutListViewItemElementEventMap {
        "scoutClick": void;
        "scoutChecked": {
    checked: boolean;
    element: HTMLInputElement;
  };
    }
    interface HTMLScoutListViewItemElement extends Components.ScoutListViewItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutListViewItemElementEventMap>(type: K, listener: (this: HTMLScoutListViewItemElement, ev: ScoutListViewItemCustomEvent<HTMLScoutListViewItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutListViewItemElementEventMap>(type: K, listener: (this: HTMLScoutListViewItemElement, ev: ScoutListViewItemCustomEvent<HTMLScoutListViewItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutListViewItemElement: {
        prototype: HTMLScoutListViewItemElement;
        new (): HTMLScoutListViewItemElement;
    };
    interface HTMLScoutListViewSubheaderElement extends Components.ScoutListViewSubheader, HTMLStencilElement {
    }
    var HTMLScoutListViewSubheaderElement: {
        prototype: HTMLScoutListViewSubheaderElement;
        new (): HTMLScoutListViewSubheaderElement;
    };
    interface HTMLScoutLoaderElement extends Components.ScoutLoader, HTMLStencilElement {
    }
    var HTMLScoutLoaderElement: {
        prototype: HTMLScoutLoaderElement;
        new (): HTMLScoutLoaderElement;
    };
    interface HTMLScoutPaginationElementEventMap {
        "scoutPaginationClick": {
    selectedIndex: number;
  };
    }
    interface HTMLScoutPaginationElement extends Components.ScoutPagination, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutPaginationElementEventMap>(type: K, listener: (this: HTMLScoutPaginationElement, ev: ScoutPaginationCustomEvent<HTMLScoutPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutPaginationElementEventMap>(type: K, listener: (this: HTMLScoutPaginationElement, ev: ScoutPaginationCustomEvent<HTMLScoutPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutPaginationElement: {
        prototype: HTMLScoutPaginationElement;
        new (): HTMLScoutPaginationElement;
    };
    interface HTMLScoutRadioButtonElementEventMap {
        "scoutInputChange": {
      value: string;
      element: HTMLElement;
    };
        "scoutBlur": void;
        "scoutValidate": {
      value: string;
      element: HTMLElement;
    };
        "_scoutValidityChanged": { element: HTMLElement };
        "_scoutInvalid": void;
        "_scoutFieldId": string;
        "scoutChecked": {
    checked: boolean;
    element: HTMLInputElement;
  };
    }
    /**
     * The radio button component is used to let users select one option from a set.
     * When used in a form, make sure to wrap it in a Field component to display a
     * label, help text, and error messages.
     */
    interface HTMLScoutRadioButtonElement extends Components.ScoutRadioButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutRadioButtonElementEventMap>(type: K, listener: (this: HTMLScoutRadioButtonElement, ev: ScoutRadioButtonCustomEvent<HTMLScoutRadioButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutRadioButtonElementEventMap>(type: K, listener: (this: HTMLScoutRadioButtonElement, ev: ScoutRadioButtonCustomEvent<HTMLScoutRadioButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutRadioButtonElement: {
        prototype: HTMLScoutRadioButtonElement;
        new (): HTMLScoutRadioButtonElement;
    };
    interface HTMLScoutSegmentedControlElementEventMap {
        "scoutChange": { value: number };
    }
    /**
     * The segmented control component presents a set of options where exactly one
     * option is active at a time.
     * The component displays an indicator under the selected option and emits a
     * `scoutChange` event when the user picks a different option, so you can update
     * `value`.
     * Use button elements as the slotted segment options.
     */
    interface HTMLScoutSegmentedControlElement extends Components.ScoutSegmentedControl, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutSegmentedControlElementEventMap>(type: K, listener: (this: HTMLScoutSegmentedControlElement, ev: ScoutSegmentedControlCustomEvent<HTMLScoutSegmentedControlElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutSegmentedControlElementEventMap>(type: K, listener: (this: HTMLScoutSegmentedControlElement, ev: ScoutSegmentedControlCustomEvent<HTMLScoutSegmentedControlElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutSegmentedControlElement: {
        prototype: HTMLScoutSegmentedControlElement;
        new (): HTMLScoutSegmentedControlElement;
    };
    interface HTMLScoutSelectElementEventMap {
        "scoutInputChange": {
      value: string;
      element: HTMLElement;
    };
        "scoutBlur": void;
        "scoutValidate": {
      value: string;
      element: HTMLElement;
    };
        "_scoutValidityChanged": { element: HTMLElement };
        "_scoutInvalid": void;
        "_scoutFieldId": string;
    }
    /**
     * The select component is a dropdown menu that allows users to select one
     * option from a list. When used in a form, make sure to wrap it in a Field
     * component to display a label, help text, and error messages.
     */
    interface HTMLScoutSelectElement extends Components.ScoutSelect, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutSelectElementEventMap>(type: K, listener: (this: HTMLScoutSelectElement, ev: ScoutSelectCustomEvent<HTMLScoutSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutSelectElementEventMap>(type: K, listener: (this: HTMLScoutSelectElement, ev: ScoutSelectCustomEvent<HTMLScoutSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutSelectElement: {
        prototype: HTMLScoutSelectElement;
        new (): HTMLScoutSelectElement;
    };
    /**
     * Render this component while you are waiting for your content.
     * Could be a fetch, or another way of loading data.
     * Either toggle the render of the component, or use the disable property unmount the skeleton.
     */
    interface HTMLScoutSkeletonElement extends Components.ScoutSkeleton, HTMLStencilElement {
    }
    var HTMLScoutSkeletonElement: {
        prototype: HTMLScoutSkeletonElement;
        new (): HTMLScoutSkeletonElement;
    };
    interface HTMLScoutStackElement extends Components.ScoutStack, HTMLStencilElement {
    }
    var HTMLScoutStackElement: {
        prototype: HTMLScoutStackElement;
        new (): HTMLScoutStackElement;
    };
    interface HTMLScoutSwitchElementEventMap {
        "scoutInputChange": {
      value: string;
      element: HTMLElement;
    };
        "scoutBlur": void;
        "scoutValidate": {
      value: string;
      element: HTMLElement;
    };
        "_scoutValidityChanged": { element: HTMLElement };
        "_scoutInvalid": void;
        "_scoutFieldId": string;
        "scoutChecked": {
    checked: boolean;
    element: HTMLInputElement;
  };
    }
    /**
     * The switch component is used to toggle between two states, on and off.
     * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field
     * component to display a label, help text, and error messages.
     */
    interface HTMLScoutSwitchElement extends Components.ScoutSwitch, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutSwitchElementEventMap>(type: K, listener: (this: HTMLScoutSwitchElement, ev: ScoutSwitchCustomEvent<HTMLScoutSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutSwitchElementEventMap>(type: K, listener: (this: HTMLScoutSwitchElement, ev: ScoutSwitchCustomEvent<HTMLScoutSwitchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutSwitchElement: {
        prototype: HTMLScoutSwitchElement;
        new (): HTMLScoutSwitchElement;
    };
    interface HTMLScoutTabbedViewElementEventMap {
        "scoutChange": { value: number };
        "scoutSwipeProgress": { swipeValue: number };
    }
    interface HTMLScoutTabbedViewElement extends Components.ScoutTabbedView, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutTabbedViewElementEventMap>(type: K, listener: (this: HTMLScoutTabbedViewElement, ev: ScoutTabbedViewCustomEvent<HTMLScoutTabbedViewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutTabbedViewElementEventMap>(type: K, listener: (this: HTMLScoutTabbedViewElement, ev: ScoutTabbedViewCustomEvent<HTMLScoutTabbedViewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutTabbedViewElement: {
        prototype: HTMLScoutTabbedViewElement;
        new (): HTMLScoutTabbedViewElement;
    };
    interface HTMLScoutTabbedViewPanelElement extends Components.ScoutTabbedViewPanel, HTMLStencilElement {
    }
    var HTMLScoutTabbedViewPanelElement: {
        prototype: HTMLScoutTabbedViewPanelElement;
        new (): HTMLScoutTabbedViewPanelElement;
    };
    interface HTMLScoutTabsElementEventMap {
        "scoutChange": { value: number };
    }
    /**
     * The tabs component is used to create a tabbed interface. It manages the state
     * of which tab is active and displays an indicator under the active tab. Use
     * `ScoutTabsTab` components to define the individual tabs.
     * Currently there is no support for navigational tabs. Navigation has to be
     * handled programmatically for now.
     */
    interface HTMLScoutTabsElement extends Components.ScoutTabs, HTMLStencilElement {
        addEventListener<K extends keyof HTMLScoutTabsElementEventMap>(type: K, listener: (this: HTMLScoutTabsElement, ev: ScoutTabsCustomEvent<HTMLScoutTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLScoutTabsElementEventMap>(type: K, listener: (this: HTMLScoutTabsElement, ev: ScoutTabsCustomEvent<HTMLScoutTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLScoutTabsElement: {
        prototype: HTMLScoutTabsElement;
        new (): HTMLScoutTabsElement;
    };
    interface HTMLScoutTabsTabElement extends Components.ScoutTabsTab, HTMLStencilElement {
    }
    var HTMLScoutTabsTabElement: {
        prototype: HTMLScoutTabsTabElement;
        new (): HTMLScoutTabsTabElement;
    };
    interface HTMLElementTagNameMap {
        "scout-app-bar": HTMLScoutAppBarElement;
        "scout-avatar": HTMLScoutAvatarElement;
        "scout-bottom-bar": HTMLScoutBottomBarElement;
        "scout-bottom-bar-item": HTMLScoutBottomBarItemElement;
        "scout-button": HTMLScoutButtonElement;
        "scout-callout": HTMLScoutCalloutElement;
        "scout-card": HTMLScoutCardElement;
        "scout-checkbox": HTMLScoutCheckboxElement;
        "scout-divider": HTMLScoutDividerElement;
        "scout-drawer": HTMLScoutDrawerElement;
        "scout-field": HTMLScoutFieldElement;
        "scout-input": HTMLScoutInputElement;
        "scout-link": HTMLScoutLinkElement;
        "scout-list-view": HTMLScoutListViewElement;
        "scout-list-view-item": HTMLScoutListViewItemElement;
        "scout-list-view-subheader": HTMLScoutListViewSubheaderElement;
        "scout-loader": HTMLScoutLoaderElement;
        "scout-pagination": HTMLScoutPaginationElement;
        "scout-radio-button": HTMLScoutRadioButtonElement;
        "scout-segmented-control": HTMLScoutSegmentedControlElement;
        "scout-select": HTMLScoutSelectElement;
        "scout-skeleton": HTMLScoutSkeletonElement;
        "scout-stack": HTMLScoutStackElement;
        "scout-switch": HTMLScoutSwitchElement;
        "scout-tabbed-view": HTMLScoutTabbedViewElement;
        "scout-tabbed-view-panel": HTMLScoutTabbedViewPanelElement;
        "scout-tabs": HTMLScoutTabsElement;
        "scout-tabs-tab": HTMLScoutTabsTabElement;
    }
}
declare namespace LocalJSX {
    /**
     * The App Bar component is used at the top of a page to display a title and
     * optional prefix and suffix actions. It's typically used to provide a
     * native-like navigation experience.
     */
    interface ScoutAppBar {
        "titleText"?: string;
    }
    /**
     * The avatar component is used to display the user's profile picture.
     * Wrap it with a container, to determine its size, since it scales to fit container.
     */
    interface ScoutAvatar {
        /**
          * The name of the user.
          * @default ""
         */
        "alt"?: string;
        /**
          * The source URL of the user image.
          * @default ""
         */
        "imageSrc"?: string;
    }
    /**
     * The bottom bar component is used in the Jamboree26 app to provide
     * navigation at the bottom of the screen.
     */
    interface ScoutBottomBar {
    }
    /**
     * A bottom bar item used within the bottom bar for navigation. Should not be
     * used outside of a bottom bar.
     */
    interface ScoutBottomBarItem {
        /**
          * Whether the item is currently active. Should be set to true when the item represents the current page.
         */
        "active"?: boolean;
        /**
          * An optional link to navigate to when the item is clicked. Only used when `type` is set to "link".
         */
        "href"?: string;
        /**
          * An icon to display above the label. Must be an SVG string.
         */
        "icon": string;
        /**
          * The label to display below the icon.
         */
        "label": string;
        "onScoutClick"?: (event: ScoutBottomBarItemCustomEvent<void>) => void;
        "rel"?: string;
        "target"?: string;
        /**
          * The type of the bottom bar item, either a button or a link.
          * @default "button"
         */
        "type"?: ItemType;
    }
    /**
     * A button component that can be used either as a normal button or as a link.
     * Will render a `<button>` element when the `type` is set to "button",
     * "submit", or "reset", and an `<a>` element when the `type` is set to "link".
     */
    interface ScoutButton {
        /**
          * Whether the button is disabled. Disabled buttons are not clickable and excluded from tab order. Use only when absolutely necessary.
          * @default false
         */
        "disabled"?: boolean;
        "href"?: string;
        /**
          * An optional icon to display alongside the button text. Must be an SVG string.
         */
        "icon"?: string;
        /**
          * @default false
         */
        "iconOnly"?: boolean;
        /**
          * @default "after"
         */
        "iconPosition"?: "before" | "after";
        /**
          * Whether the button is in a loading state. Shows a centered spinner and hides content.
          * @default false
         */
        "loading"?: boolean;
        "onScoutClick"?: (event: ScoutButtonCustomEvent<void>) => void;
        "rel"?: string;
        /**
          * Size of the button.
          * @default "medium"
         */
        "size"?: Size;
        "target"?: string;
        /**
          * @default "button"
         */
        "type"?: "button" | "submit" | "reset" | "link";
        /**
          * The variant primarily affects the color of the button.
          * @default "outlined"
         */
        "variant"?: Variant;
    }
    /**
     * An inline callout / alert for conveying status or contextual information.
     * White background with a hairline border tinted by the variant color.
     * Use the `actions` slot to add `scout-button` elements.
     */
    interface ScoutCallout {
        /**
          * Show a dismiss (×) button in the top-right corner.
          * @default false
         */
        "dismissible"?: boolean;
        /**
          * Short, bold heading line.
         */
        "heading"?: string;
        /**
          * Fired when the dismiss button is clicked.
         */
        "onScoutDismiss"?: (event: ScoutCalloutCustomEvent<void>) => void;
        /**
          * Visual intent of the callout.
          * @default "info"
         */
        "variant"?: CalloutVariant;
    }
    /**
     * A general surface to hold various types of content.
     */
    interface ScoutCard {
    }
    /**
     * The checkbox component is used to let users select one or more options from a
     * set. For toggling a single option, consider using the Switch component
     * instead. When used in a form, make sure to wrap it in a Field component to
     * display a label, help text, and error messages.
     */
    interface ScoutCheckbox {
        /**
          * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
         */
        "ariaLabelledby"?: string;
        /**
          * @default false
         */
        "checked"?: boolean;
        /**
          * @default false
         */
        "disabled"?: boolean;
        "label"?: string;
        "name"?: string;
        "onScoutBlur"?: (event: ScoutCheckboxCustomEvent<void>) => void;
        "onScoutChecked"?: (event: ScoutCheckboxCustomEvent<{
    checked: boolean;
    element: HTMLInputElement;
  }>) => void;
        /**
          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
         */
        "onScoutInputChange"?: (event: ScoutCheckboxCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
         */
        "onScoutValidate"?: (event: ScoutCheckboxCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Internal event used for form field association.
         */
        "on_scoutFieldId"?: (event: ScoutCheckboxCustomEvent<string>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutInvalid"?: (event: ScoutCheckboxCustomEvent<void>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutValidityChanged"?: (event: ScoutCheckboxCustomEvent<{ element: HTMLElement }>) => void;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        "value"?: string;
    }
    interface ScoutDivider {
    }
    interface ScoutDrawer {
        /**
          * Back button label.
          * @default ""
         */
        "backButtonLabel"?: string;
        /**
          * Disable backdrop for the drawer.
          * @default false
         */
        "disableBackdrop"?: boolean;
        /**
          * Disable drawer content padding. Use only if you have specific use case and you need to use full width.
          * @default false
         */
        "disableContentPadding"?: boolean;
        /**
          * Exit button label.
          * @default ""
         */
        "exitButtonLabel"?: string;
        /**
          * Heading within the sheet.
          * @default ""
         */
        "heading"?: string;
        /**
          * Fired when clicking backButton (<-)
         */
        "onBackButtonClicked"?: (event: ScoutDrawerCustomEvent<void>) => void;
        /**
          * Fired when clicking backButton (X). Also sent when clicking the backdrop.
         */
        "onExitButtonClicked"?: (event: ScoutDrawerCustomEvent<void>) => void;
        /**
          * Open/close state of the drawer.
          * @default false
         */
        "open"?: boolean;
        /**
          * Render back button.
          * @default false
         */
        "showBackButton"?: boolean;
        /**
          * Render exit button.
          * @default false
         */
        "showExitButton"?: boolean;
    }
    /**
     * The field component is used to wrap form fields with a label, help text, and
     * error messages. It automatically captures validation events from its child
     * input components and displays error messages accordingly.
     */
    interface ScoutField {
        /**
          * Help text shown below the field.
         */
        "helpText"?: string;
        /**
          * Label shown above the field.
         */
        "label": string;
    }
    /**
     * The input component is a basic text input field that can be used to capture
     * user input. It supports various types and input modes for different use
     * cases. When used in a form, make sure to wrap it in a Field component to
     * display a label, help text, and error messages.
     */
    interface ScoutInput {
        /**
          * Hint for the browser's autocomplete feature. Maps directly to the native `autocomplete` attribute. Use `"off"` to disable autocomplete, or any autofill detail token such as `"name"`, `"email"`, `"current-password"`, etc. See MDN for the full list: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
         */
        "autocomplete"?: string;
        /**
          * When true, a clear button is shown at the trailing edge whenever the input has a value. Clicking it resets the input to empty and emits scoutInputChange.
          * @default false
         */
        "clearable"?: boolean;
        /**
          * Initial value of the input element for uncontrolled usage. Unlike `value`, this only sets the value on first render and does not keep the input in sync with the prop afterwards.
         */
        "defaultValue"?: string;
        /**
          * Whether the input is disabled. Disabled inputs are not editable, excluded from tab order and are not validated.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Raw SVG string for an icon to display at the leading edge of the input. Import with the `?raw` suffix, e.g. `import searchIcon from "@tabler/icons/outline/search.svg?raw"`.
         */
        "icon"?: string;
        /**
          * Input mode hints for devices with dynamic keyboards.
         */
        "inputmode"?: InputMode;
        "name": string;
        "onScoutBlur"?: (event: ScoutInputCustomEvent<void>) => void;
        /**
          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
         */
        "onScoutInputChange"?: (event: ScoutInputCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
         */
        "onScoutValidate"?: (event: ScoutInputCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Internal event used for form field association.
         */
        "on_scoutFieldId"?: (event: ScoutInputCustomEvent<string>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutInvalid"?: (event: ScoutInputCustomEvent<void>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutValidityChanged"?: (event: ScoutInputCustomEvent<{ element: HTMLElement }>) => void;
        /**
          * Regex pattern for input validation.
         */
        "pattern"?: string;
        /**
          * Placeholder text should rarely be used as it poses a lot of accessibility issues.
         */
        "placeholder"?: string;
        /**
          * Size of the input element. Large fields are typically used for prominent inputs, such as a top search field on a page, while medium fields are used for regular form inputs.
          * @default "medium"
         */
        "size"?: Size1;
        /**
          * Type of input element. If you need a number input, read the accessibility section of this MDN article first: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility
          * @default "text"
         */
        "type"?: InputType;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        /**
          * Value of the input element, in case you want to control it yourself.
          * @default ""
         */
        "value"?: string;
    }
    interface ScoutLink {
        /**
          * The URL that the link points to. Required when type is set to link
         */
        "href"?: string;
        /**
          * Text to be displayed for the link
         */
        "label": string;
        /**
          * If the label property is not sufficient to describe its use, add an aria-label describing what happens when pressing the button or where the user navigates if it is a link.
         */
        "linkAriaLabel"?: string;
        /**
          * Only sent if the link is a button.
         */
        "onScoutLinkClick"?: (event: ScoutLinkCustomEvent<HTMLButtonElement>) => void;
        "rel"?: string;
        /**
          * _blank	Opens the linked document in a new window or tab  _self	Opens the linked document in the same frame as it was clicked (this is default)  _parent	Opens the linked document in the parent frame  _top	Opens the linked document in the full body of the window  _framename	Opens the linked document in the named iframe
          * @default "_self"
         */
        "target"?: "_blank" | "_self" | "_parent" | "_top" | "framename";
        /**
          * There are two types. If you intend to use it as a button with onclick, a button is rendered, however if you want to you it as a normal link, a link with href is rendered.
          * @default "link"
         */
        "type"?: "link" | "button";
    }
    interface ScoutListView {
    }
    interface ScoutListViewItem {
        /**
          * The action to display on the right side of the item. For example, a chevron. This is purely visual and does not affect the behavior of the item in any way. Not visible when the type is "radio" or "checkbox".
          * @default null
         */
        "action"?: ActionType;
        "checked"?: boolean;
        "disabled"?: boolean;
        "href"?: string;
        "icon"?: string;
        "name"?: string;
        "onScoutChecked"?: (event: ScoutListViewItemCustomEvent<{
    checked: boolean;
    element: HTMLInputElement;
  }>) => void;
        "onScoutClick"?: (event: ScoutListViewItemCustomEvent<void>) => void;
        "primary"?: string;
        "rel"?: string;
        "secondary"?: string;
        "target"?: string;
        /**
          * @default "button"
         */
        "type"?: ItemType1;
        "value"?: string;
    }
    interface ScoutListViewSubheader {
        /**
          * @default "h2"
         */
        "headingLevel"?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
        "text": string;
    }
    interface ScoutLoader {
        /**
          * @default "base"
         */
        "size"?: "xs" | "sm" | "base" | "lg" | "xl";
        "text"?: string;
    }
    interface ScoutPagination {
        /**
          * Will always included first and last page, plus "..." if exceeded.
          * @default 5
         */
        "maxAmountOfPagesShowing"?: number;
        /**
          * Emitted when clicking a page. Use event data to set selectedIndex.
         */
        "onScoutPaginationClick"?: (event: ScoutPaginationCustomEvent<{
    selectedIndex: number;
  }>) => void;
        /**
          * Total number of pages.
          * @default 0
         */
        "pages"?: number;
        /**
          * Pagination aria label to describe what type of nav it is. E.g "Pagination"
          * @default ""
         */
        "paginationAriaLabel"?: string;
        /**
          * Which page that is selected.
          * @default 0
         */
        "selectedIndex"?: number;
    }
    /**
     * The radio button component is used to let users select one option from a set.
     * When used in a form, make sure to wrap it in a Field component to display a
     * label, help text, and error messages.
     */
    interface ScoutRadioButton {
        /**
          * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.
         */
        "ariaLabelledby"?: string;
        /**
          * @default false
         */
        "checked"?: boolean;
        /**
          * @default false
         */
        "disabled"?: boolean;
        "label"?: string;
        "name"?: string;
        "onScoutBlur"?: (event: ScoutRadioButtonCustomEvent<void>) => void;
        "onScoutChecked"?: (event: ScoutRadioButtonCustomEvent<{
    checked: boolean;
    element: HTMLInputElement;
  }>) => void;
        /**
          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
         */
        "onScoutInputChange"?: (event: ScoutRadioButtonCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
         */
        "onScoutValidate"?: (event: ScoutRadioButtonCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Internal event used for form field association.
         */
        "on_scoutFieldId"?: (event: ScoutRadioButtonCustomEvent<string>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutInvalid"?: (event: ScoutRadioButtonCustomEvent<void>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutValidityChanged"?: (event: ScoutRadioButtonCustomEvent<{ element: HTMLElement }>) => void;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        "value"?: string;
    }
    /**
     * The segmented control component presents a set of options where exactly one
     * option is active at a time.
     * The component displays an indicator under the selected option and emits a
     * `scoutChange` event when the user picks a different option, so you can update
     * `value`.
     * Use button elements as the slotted segment options.
     */
    interface ScoutSegmentedControl {
        /**
          * Emitted when the active segment changes as a result of a user click. The `value` in the event detail is the zero-based index of the newly selected segment.
         */
        "onScoutChange"?: (event: ScoutSegmentedControlCustomEvent<{ value: number }>) => void;
        /**
          * Visual size of the segmented control. Use `small` for dense layouts and `medium` for the default size.
          * @default "medium"
         */
        "size"?: Size2;
        /**
          * Zero-based index of the currently active segment.
          * @default 0
         */
        "value"?: number;
    }
    /**
     * The select component is a dropdown menu that allows users to select one
     * option from a list. When used in a form, make sure to wrap it in a Field
     * component to display a label, help text, and error messages.
     */
    interface ScoutSelect {
        /**
          * Whether the select is disabled. Disabled selects are not editable, excluded from tab order and are not validated.
          * @default false
         */
        "disabled"?: boolean;
        "name": string;
        "onScoutBlur"?: (event: ScoutSelectCustomEvent<void>) => void;
        /**
          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
         */
        "onScoutInputChange"?: (event: ScoutSelectCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
         */
        "onScoutValidate"?: (event: ScoutSelectCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Internal event used for form field association.
         */
        "on_scoutFieldId"?: (event: ScoutSelectCustomEvent<string>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutInvalid"?: (event: ScoutSelectCustomEvent<void>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutValidityChanged"?: (event: ScoutSelectCustomEvent<{ element: HTMLElement }>) => void;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
        /**
          * Value of the select element, in case you want to control it yourself.
          * @default ""
         */
        "value"?: string;
    }
    /**
     * Render this component while you are waiting for your content.
     * Could be a fetch, or another way of loading data.
     * Either toggle the render of the component, or use the disable property unmount the skeleton.
     */
    interface ScoutSkeleton {
        /**
          * If you are in need of a specific background color, you can set it.
          * @default null
         */
        "backgroundColor"?: string | null;
        /**
          * Use the disabled property to unmount the skeleton
          * @default false
         */
        "disabled"?: boolean;
    }
    interface ScoutStack {
        /**
          * The direction of the stack.
          * @default "row"
         */
        "direction"?: Direction;
        /**
          * Gap size. If more sizes are needed, we can expand.
          * @default "m"
         */
        "gapSize"?: GapSize;
    }
    /**
     * The switch component is used to toggle between two states, on and off.
     * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field
     * component to display a label, help text, and error messages.
     */
    interface ScoutSwitch {
        /**
          * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
         */
        "ariaLabelledby"?: string;
        /**
          * @default false
         */
        "disabled"?: boolean;
        "label"?: string;
        "onScoutBlur"?: (event: ScoutSwitchCustomEvent<void>) => void;
        "onScoutChecked"?: (event: ScoutSwitchCustomEvent<{
    checked: boolean;
    element: HTMLInputElement;
  }>) => void;
        /**
          * Event emitted when the input value changes. If you want to do custom validation, use the `scoutValidate` event instead to ensure forms are blocked by the browser when invalid.
         */
        "onScoutInputChange"?: (event: ScoutSwitchCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Event emitted when the input needs to be validated. This is where you implement your custom validation. Set any possible validation message using the `validity` prop.
         */
        "onScoutValidate"?: (event: ScoutSwitchCustomEvent<{
      value: string;
      element: HTMLElement;
    }>) => void;
        /**
          * Internal event used for form field association.
         */
        "on_scoutFieldId"?: (event: ScoutSwitchCustomEvent<string>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutInvalid"?: (event: ScoutSwitchCustomEvent<void>) => void;
        /**
          * Internal event used for form field validation.
         */
        "on_scoutValidityChanged"?: (event: ScoutSwitchCustomEvent<{ element: HTMLElement }>) => void;
        /**
          * Indicates whether the switch is toggled on or off.
          * @default false
         */
        "toggled"?: boolean;
        /**
          * Custom validation message. If set, the input is considered invalid by the browser, and if wrapped by a field component, the message is displayed. If not set, the input is considered valid.
         */
        "validity"?: string;
    }
    interface ScoutTabbedView {
        /**
          * Emitted when a swipe gesture completes and lands on a different panel.
         */
        "onScoutChange"?: (event: ScoutTabbedViewCustomEvent<{ value: number }>) => void;
        /**
          * Emitted continuously during a swipe with a fractional panel index, suitable for driving the `swipe-value` prop on `scout-tabs`.
         */
        "onScoutSwipeProgress"?: (event: ScoutTabbedViewCustomEvent<{ swipeValue: number }>) => void;
        /**
          * The `id` of the associated `scout-tabs` element. When omitted the component looks for a preceding `scout-tabs` sibling automatically.
         */
        "tabsId"?: string;
        /**
          * Zero-based index of the currently active panel.
          * @default 0
         */
        "value"?: number;
    }
    interface ScoutTabbedViewPanel {
    }
    /**
     * The tabs component is used to create a tabbed interface. It manages the state
     * of which tab is active and displays an indicator under the active tab. Use
     * `ScoutTabsTab` components to define the individual tabs.
     * Currently there is no support for navigational tabs. Navigation has to be
     * handled programmatically for now.
     */
    interface ScoutTabs {
        /**
          * Emitted when the active tab changes as a result of a user click. The `value` in the event detail is the zero-based index of the newly selected tab.
         */
        "onScoutChange"?: (event: ScoutTabsCustomEvent<{ value: number }>) => void;
        /**
          * Fractional tab index used to interpolate the indicator position during a swipe gesture. Set this from `scoutSwipeProgress` events on `scout-tabbed-view`. When undefined the indicator uses `value` with its normal CSS transition.
         */
        "swipeValue"?: number;
        /**
          * Zero-based index of the currently active tab.
          * @default 0
         */
        "value"?: number;
    }
    interface ScoutTabsTab {
    }
    interface IntrinsicElements {
        "scout-app-bar": ScoutAppBar;
        "scout-avatar": ScoutAvatar;
        "scout-bottom-bar": ScoutBottomBar;
        "scout-bottom-bar-item": ScoutBottomBarItem;
        "scout-button": ScoutButton;
        "scout-callout": ScoutCallout;
        "scout-card": ScoutCard;
        "scout-checkbox": ScoutCheckbox;
        "scout-divider": ScoutDivider;
        "scout-drawer": ScoutDrawer;
        "scout-field": ScoutField;
        "scout-input": ScoutInput;
        "scout-link": ScoutLink;
        "scout-list-view": ScoutListView;
        "scout-list-view-item": ScoutListViewItem;
        "scout-list-view-subheader": ScoutListViewSubheader;
        "scout-loader": ScoutLoader;
        "scout-pagination": ScoutPagination;
        "scout-radio-button": ScoutRadioButton;
        "scout-segmented-control": ScoutSegmentedControl;
        "scout-select": ScoutSelect;
        "scout-skeleton": ScoutSkeleton;
        "scout-stack": ScoutStack;
        "scout-switch": ScoutSwitch;
        "scout-tabbed-view": ScoutTabbedView;
        "scout-tabbed-view-panel": ScoutTabbedViewPanel;
        "scout-tabs": ScoutTabs;
        "scout-tabs-tab": ScoutTabsTab;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            /**
             * The App Bar component is used at the top of a page to display a title and
             * optional prefix and suffix actions. It's typically used to provide a
             * native-like navigation experience.
             */
            "scout-app-bar": LocalJSX.ScoutAppBar & JSXBase.HTMLAttributes<HTMLScoutAppBarElement>;
            /**
             * The avatar component is used to display the user's profile picture.
             * Wrap it with a container, to determine its size, since it scales to fit container.
             */
            "scout-avatar": LocalJSX.ScoutAvatar & JSXBase.HTMLAttributes<HTMLScoutAvatarElement>;
            /**
             * The bottom bar component is used in the Jamboree26 app to provide
             * navigation at the bottom of the screen.
             */
            "scout-bottom-bar": LocalJSX.ScoutBottomBar & JSXBase.HTMLAttributes<HTMLScoutBottomBarElement>;
            /**
             * A bottom bar item used within the bottom bar for navigation. Should not be
             * used outside of a bottom bar.
             */
            "scout-bottom-bar-item": LocalJSX.ScoutBottomBarItem & JSXBase.HTMLAttributes<HTMLScoutBottomBarItemElement>;
            /**
             * A button component that can be used either as a normal button or as a link.
             * Will render a `<button>` element when the `type` is set to "button",
             * "submit", or "reset", and an `<a>` element when the `type` is set to "link".
             */
            "scout-button": LocalJSX.ScoutButton & JSXBase.HTMLAttributes<HTMLScoutButtonElement>;
            /**
             * An inline callout / alert for conveying status or contextual information.
             * White background with a hairline border tinted by the variant color.
             * Use the `actions` slot to add `scout-button` elements.
             */
            "scout-callout": LocalJSX.ScoutCallout & JSXBase.HTMLAttributes<HTMLScoutCalloutElement>;
            /**
             * A general surface to hold various types of content.
             */
            "scout-card": LocalJSX.ScoutCard & JSXBase.HTMLAttributes<HTMLScoutCardElement>;
            /**
             * The checkbox component is used to let users select one or more options from a
             * set. For toggling a single option, consider using the Switch component
             * instead. When used in a form, make sure to wrap it in a Field component to
             * display a label, help text, and error messages.
             */
            "scout-checkbox": LocalJSX.ScoutCheckbox & JSXBase.HTMLAttributes<HTMLScoutCheckboxElement>;
            "scout-divider": LocalJSX.ScoutDivider & JSXBase.HTMLAttributes<HTMLScoutDividerElement>;
            "scout-drawer": LocalJSX.ScoutDrawer & JSXBase.HTMLAttributes<HTMLScoutDrawerElement>;
            /**
             * The field component is used to wrap form fields with a label, help text, and
             * error messages. It automatically captures validation events from its child
             * input components and displays error messages accordingly.
             */
            "scout-field": LocalJSX.ScoutField & JSXBase.HTMLAttributes<HTMLScoutFieldElement>;
            /**
             * The input component is a basic text input field that can be used to capture
             * user input. It supports various types and input modes for different use
             * cases. When used in a form, make sure to wrap it in a Field component to
             * display a label, help text, and error messages.
             */
            "scout-input": LocalJSX.ScoutInput & JSXBase.HTMLAttributes<HTMLScoutInputElement>;
            "scout-link": LocalJSX.ScoutLink & JSXBase.HTMLAttributes<HTMLScoutLinkElement>;
            "scout-list-view": LocalJSX.ScoutListView & JSXBase.HTMLAttributes<HTMLScoutListViewElement>;
            "scout-list-view-item": LocalJSX.ScoutListViewItem & JSXBase.HTMLAttributes<HTMLScoutListViewItemElement>;
            "scout-list-view-subheader": LocalJSX.ScoutListViewSubheader & JSXBase.HTMLAttributes<HTMLScoutListViewSubheaderElement>;
            "scout-loader": LocalJSX.ScoutLoader & JSXBase.HTMLAttributes<HTMLScoutLoaderElement>;
            "scout-pagination": LocalJSX.ScoutPagination & JSXBase.HTMLAttributes<HTMLScoutPaginationElement>;
            /**
             * The radio button component is used to let users select one option from a set.
             * When used in a form, make sure to wrap it in a Field component to display a
             * label, help text, and error messages.
             */
            "scout-radio-button": LocalJSX.ScoutRadioButton & JSXBase.HTMLAttributes<HTMLScoutRadioButtonElement>;
            /**
             * The segmented control component presents a set of options where exactly one
             * option is active at a time.
             * The component displays an indicator under the selected option and emits a
             * `scoutChange` event when the user picks a different option, so you can update
             * `value`.
             * Use button elements as the slotted segment options.
             */
            "scout-segmented-control": LocalJSX.ScoutSegmentedControl & JSXBase.HTMLAttributes<HTMLScoutSegmentedControlElement>;
            /**
             * The select component is a dropdown menu that allows users to select one
             * option from a list. When used in a form, make sure to wrap it in a Field
             * component to display a label, help text, and error messages.
             */
            "scout-select": LocalJSX.ScoutSelect & JSXBase.HTMLAttributes<HTMLScoutSelectElement>;
            /**
             * Render this component while you are waiting for your content.
             * Could be a fetch, or another way of loading data.
             * Either toggle the render of the component, or use the disable property unmount the skeleton.
             */
            "scout-skeleton": LocalJSX.ScoutSkeleton & JSXBase.HTMLAttributes<HTMLScoutSkeletonElement>;
            "scout-stack": LocalJSX.ScoutStack & JSXBase.HTMLAttributes<HTMLScoutStackElement>;
            /**
             * The switch component is used to toggle between two states, on and off.
             * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field
             * component to display a label, help text, and error messages.
             */
            "scout-switch": LocalJSX.ScoutSwitch & JSXBase.HTMLAttributes<HTMLScoutSwitchElement>;
            "scout-tabbed-view": LocalJSX.ScoutTabbedView & JSXBase.HTMLAttributes<HTMLScoutTabbedViewElement>;
            "scout-tabbed-view-panel": LocalJSX.ScoutTabbedViewPanel & JSXBase.HTMLAttributes<HTMLScoutTabbedViewPanelElement>;
            /**
             * The tabs component is used to create a tabbed interface. It manages the state
             * of which tab is active and displays an indicator under the active tab. Use
             * `ScoutTabsTab` components to define the individual tabs.
             * Currently there is no support for navigational tabs. Navigation has to be
             * handled programmatically for now.
             */
            "scout-tabs": LocalJSX.ScoutTabs & JSXBase.HTMLAttributes<HTMLScoutTabsElement>;
            "scout-tabs-tab": LocalJSX.ScoutTabsTab & JSXBase.HTMLAttributes<HTMLScoutTabsTabElement>;
        }
    }
}