/* 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 { Breakpoint } from "./utils/breakpoints";
import { ErrorMap } from "./components/cat-form-hint/cat-form-hint";
import { Placement } from "@floating-ui/dom";
import { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mode";
import { BaseOptions } from "flatpickr/dist/types/options";
import { InputType } from "./components/cat-input/input-type";
import { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
import { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
import { Observable } from "rxjs";
import { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
export { Breakpoint } from "./utils/breakpoints";
export { ErrorMap } from "./components/cat-form-hint/cat-form-hint";
export { Placement } from "@floating-ui/dom";
export { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mode";
export { BaseOptions } from "flatpickr/dist/types/options";
export { InputType } from "./components/cat-input/input-type";
export { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
export { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
export { Observable } from "rxjs";
export { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
export namespace Components {
    /**
     * Informs user about important changes or conditions in the interface. Use this
     * component if you need to capture user’s attention in a prominent way.
     */
    interface CatAlert {
        /**
          * The color palette of the alert.
          * @default 'primary'
         */
        "color": 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'none';
        /**
          * The name of an icon to be displayed in the alert.
         */
        "icon"?: string;
        /**
          * Whether the icon of the alert is deactivated.
          * @default false
         */
        "noIcon": boolean;
    }
    /**
     * Avatars are used to represent a person or object.
     */
    interface CatAvatar {
        /**
          * An icon to be used instead of the initials.
         */
        "icon"?: string;
        /**
          * Custom initials for the avatar.
         */
        "initials"?: string;
        /**
          * The label of the avatar.
          * @default ''
         */
        "label": string;
        /**
          * Use round avatar edges.
          * @default false
         */
        "round": boolean;
        /**
          * The size of the avatar.
          * @default 'm'
         */
        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * An optional avatar image.
         */
        "src"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
    }
    /**
     * Badges are used to inform users of the status of an object or of an action
     * that’s been taken.
     */
    interface CatBadge {
        /**
          * The color palette of the badge.
          * @default 'primary'
         */
        "color": 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
        /**
          * The name of an icon to be displayed in the button.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the icon.
          * @default false
         */
        "iconOnly": boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * Draw attention to the badge with a subtle animation.
          * @default false
         */
        "pulse": boolean;
        /**
          * Use round badge edges.
          * @default false
         */
        "round": boolean;
        /**
          * The size of the badge.
          * @default 'm'
         */
        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * The rendering style of the badge.
          * @default 'filled'
         */
        "variant": 'filled' | 'outlined';
    }
    /**
     * Buttons are used for interface actions. Primary style should be used only
     * once per view for main call-to-action.
     */
    interface CatButton {
        /**
          * Sets the `aria-current` attribute on the button.
         */
        "a11yCurrent"?: string;
        /**
          * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
         */
        "a11yLabel"?: string;
        /**
          * Set the button into an active state.
          * @default false
         */
        "active": boolean;
        /**
          * The index of a button that is used inside a cat-button-group component
         */
        "buttonGroupPosition"?: 'first' | 'last' | 'middle';
        /**
          * Adds a unique identifier for the button. Please note that with this particular component this ID is added inside the web component. If you need an ID on the HTML element, use the regular `id` attribute instead.
         */
        "buttonId"?: string;
        /**
          * The color palette of the button.
          * @default 'secondary'
         */
        "color": 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
        /**
          * Specifies that the button should be disabled. A disabled button is unusable and un-clickable. Corresponds with the native HTML disabled attribute.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the button. Use this method instead of `button.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically simulate a click on the button.
         */
        "doClick": () => Promise<void>;
        /**
          * Programmatically move focus to the button. Use this method instead of `button.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * The name of an icon to be displayed in the button.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the icon.
          * @default false
         */
        "iconOnly": boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          * @default false
         */
        "loading": boolean;
        /**
          * The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML button element
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Attributes that will be added to the native HTML button content element
         */
        "nativeContentAttributes"?: { [key: string]: string };
        /**
          * Disables ellipse overflowing button content.
          * @default false
         */
        "noEllipsis": boolean;
        /**
          * Use round button edges.
          * @default false
         */
        "round": boolean;
        /**
          * The size of the button.
          * @default 'm'
         */
        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * Allows the button to submit a form.
          * @default false
         */
        "submit": boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
        /**
          * The value of the button, which gets paired with the button's name when submitted as part of a form. Corresponds with the native HTML value attribute.
         */
        "value"?: string;
        /**
          * The rendering style of the button.
          * @default 'outlined'
         */
        "variant": 'filled' | 'outlined' | 'text' | 'link';
    }
    /**
     * Button groups are designed to bring together button controls that are of a
     * similar nature. For example text formatting controls.
     */
    interface CatButtonGroup {
        /**
          * Adds an accessible label for the button group that it is only shown in assistive technologies, like screen readers.
         */
        "a11yLabel"?: string;
    }
    /**
     * Cards are surfaces that display content and actions on a single topic. They
     * should be easy to scan for relevant and actionable information.
     */
    interface CatCard {
    }
    /**
     * Checkboxes are used to let a user choose one or more options from a limited
     * number of options.
     */
    interface CatCheckbox {
        /**
          * The alignment of the checkbox.
          * @default 'top'
         */
        "alignment": 'center' | 'top' | 'bottom';
        /**
          * Checked state of the checkbox
          * @default false
         */
        "checked": boolean;
        /**
          * Disabled state of the checkbox
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the checkbox. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the checkbox. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Optional hint text(s) to be displayed with the checkbox.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * Indeterminate state of the checkbox
          * @default false
         */
        "indeterminate": boolean;
        /**
          * Label of the checkbox which is presented in the UI
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * Whether the label should appear to the left of the checkbox.
          * @default false
         */
        "labelLeft": boolean;
        /**
          * The name of the input.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The value of the unchecked checkbox.
         */
        "noValue"?: any;
        /**
          * Required state of the checkbox.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'none'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * The resolved value of the checkbox, based on the checked state and value.
          * @default null
         */
        "resolvedValue": any;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the checked checkbox.
         */
        "value"?: any;
    }
    /**
     * A date input component to select a date from a calendar in a dropdown.
     */
    interface CatDate {
        /**
          * Hint for form autofill feature.
          * @default 'off'
         */
        "autoComplete": string;
        /**
          * Clear the input.
         */
        "clear": () => Promise<void>;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable": boolean;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the input. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the input. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate": boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.
         */
        "fallbackHorizontal"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "max"?: string;
        /**
          * A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "min"?: string;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The placement of the dropdown.
          * @default 'bottom-end'
         */
        "placement": Placement;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly": boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "value"?: string;
    }
    /**
     * An inline date picker component to select a date.
     */
    interface CatDateInline {
        /**
          * Adds accessible label for the datepicker. The label will be read by assistive technology upon focusing the datepicker.
         */
        "a11yLabel"?: string;
        /**
          * Clear the picker.
         */
        "clear": () => Promise<void>;
        /**
          * Programmatically move focus to the inline datepicker, i,e, the first focusable date.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Shows an arrow keys navigation hint.
          * @default false
         */
        "hint": boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "max"?: string;
        /**
          * A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "min"?: string;
        /**
          * Hides the clear button.
          * @default false
         */
        "noClear": boolean;
        /**
          * Hides the today button.
          * @default false
         */
        "noToday": boolean;
        /**
          * Allow the selection of a range of dates, i.e. start and end date.
          * @default false
         */
        "range": boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Resets the view of the picker.
         */
        "resetView": () => Promise<void>;
        /**
          * Select a date in the picker.
          * @param date The date to select.
         */
        "select": (date: Date | null) => Promise<void>;
        /**
          * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "value"?: string;
        /**
          * Show week numbers.
          * @default false
         */
        "weeks": boolean;
    }
    interface CatDatepicker {
        /**
          * Instead of body, appends the calendar to the cat-datepicker element instead
          * @default false
         */
        "attachToElement": boolean;
        /**
          * Hint for form autofill feature.
          * @default 'off'
         */
        "autoComplete": string;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable": boolean;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the datepicker. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the datepicker. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate": boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.
         */
        "fallbackHorizontal"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "max"?: string;
        /**
          * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "min"?: string;
        /**
          * The mode of the datepicker, to select a date, time, both, a date range or a week number.
          * @default 'date'
         */
        "mode": CatDatepickerMode;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Attributes that will be added to the rendered HTML datepicker element.
         */
        "nativePickerAttributes"?: { [key: string]: string };
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * Where the calendar is rendered relative to the input vertically and horizontally. In the format of "[vertical] [horizontal]". Vertical can be auto, above or below (required). Horizontal can be left, center or right. If
          * @attachToElement is passed the value should be in Placement format
         */
        "position"?: BaseOptions['position'] | Placement;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly": boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * The step size to use when changing the time.
          * @default 5
         */
        "step": number;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.
         */
        "value"?: string;
    }
    interface CatDatepickerInline {
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "max"?: string;
        /**
          * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "min"?: string;
        /**
          * The mode of the datepicker, to select a date, time, both, a date range or a week number.
          * @default 'date'
         */
        "mode": CatDatepickerMode;
        /**
          * Attributes that will be added to the rendered HTML datepicker element.
         */
        "nativePickerAttributes"?: { [key: string]: string };
        /**
          * The value is not editable.
          * @default false
         */
        "readonly": boolean;
        /**
          * The step size to use when changing the time.
          * @default 5
         */
        "step": number;
        /**
          * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.
         */
        "value"?: string;
    }
    /**
     * A dropdown component to display a list of actions in a dropdown menu or to
     * show additional content on demand.
     */
    interface CatDropdown {
        /**
          * Do not navigate focus inside the dropdown via vertical arrow keys.
          * @deprecated use cat-menu
          * @default 'vertical'
         */
        "arrowNavigation": 'horizontal' | 'vertical' | 'none';
        /**
          * Closes the dropdown.
         */
        "close": (shouldReturnFocus?: boolean) => Promise<void>;
        /**
          * Whether the dropdown trigger should be initialized only before first opening. Can be useful when trigger is rendered dynamically.
          * @default false
         */
        "delayedTriggerInit": boolean;
        /**
          * Whether the focus should be trapped inside dropdown popup. Use it only when the dropdown popup content has role dialog.
          * @default true
         */
        "focusTrap": boolean;
        /**
          * Whether the dropdown is open.
          * @readonly
         */
        "isOpen": boolean;
        /**
          * Make the dropdown match the width of the reference regardless of its contents. Note that this only applies to the minimum width of the dropdown. The maximum width is still limited by the viewport.
          * @default false
         */
        "justify": boolean;
        /**
          * Do not close the dropdown on outside clicks.
          * @default false
         */
        "noAutoClose": boolean;
        /**
          * No element in dropdown will receive focus when dropdown is open. By default, the first element in tab order will receive a focus.
          * @deprecated Using noInitialFocus property would be a bad practice from a11y perspective. We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug. hasInitialFocus should resolve the cause of the original problem instead.
          * @default false
         */
        "noInitialFocus": boolean;
        /**
          * Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
          * @default false
         */
        "noResize": boolean;
        /**
          * Trigger element will not receive focus when dropdown is closed. Please use this property carefully, consider using cat-menu over using this property
          * @default false
         */
        "noReturnFocus": boolean;
        /**
          * Opens the dropdown.
          * @param isFocusVisible is dropdown should receive visible focus when it's opened.
         */
        "open": (isFocusVisible?: boolean) => Promise<void>;
        /**
          * Allow overflow when dropdown is open.
          * @default false
         */
        "overflow": boolean;
        /**
          * The placement of the dropdown.
          * @default 'bottom-start'
         */
        "placement": Placement;
        /**
          * Toggles the dropdown.
         */
        "toggle": () => Promise<void>;
    }
    /**
     * A form group component to group form fields and labels.
     */
    interface CatFormGroup {
        /**
          * Whether the label is on top or left.
          * @default false
         */
        "horizontal": boolean;
        /**
          * The space allocated to the input label
         */
        "labelSize"?: string;
        /**
          * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br /> By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br /> - If there are more required, the optional will be marked.<br /> - If there are less required, it will mark the required.<br /><br /> If a form field had "!", the requiredMarked of the field would not change.
          * @default 'auto'
         */
        "requiredMarker": 'none' | 'required' | 'optional' | 'auto';
    }
    /**
     * Icons are used to provide additional meaning or in places where text label
     * doesn't fit.
     */
    interface CatIcon {
        /**
          * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
         */
        "a11yLabel"?: string;
        /**
          * The name of the icon.
         */
        "icon"?: string;
        /**
          * The SVG source of the icon. This takes precenedence over the `icon` name.
         */
        "iconSrc"?: string;
        /**
          * The size of the icon.
          * @default 'm'
         */
        "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
    }
    /**
     * Inputs are used to allow users to provide text input when the expected input
     * is short. As well as plain text, Input supports various types of text,
     * including passwords and numbers.
     */
    interface CatInput {
        /**
          * Defines the file types the file input should accept.
         */
        "accept"?: string;
        /**
          * Hint for form autofill feature.
         */
        "autoComplete"?: string;
        /**
          * Clear the input.
         */
        "clear": () => Promise<void>;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable": boolean;
        /**
          * Activates cleave-zen date mask on input
         */
        "dateMaskOptions"?: FormatDateMaskOptions;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the input. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the input. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate": boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.
         */
        "fallbackHorizontal"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * Displays the input in a loading state with a spinner.
          * @default false
         */
        "loading": boolean;
        /**
          * A maximum value for numeric values.
         */
        "max"?: number | string;
        /**
          * A maximum length (number of characters) for textual values.
         */
        "maxLength"?: number;
        /**
          * A minimum value for numeric values.
         */
        "min"?: number | string;
        /**
          * A minimum length (number of characters) for textual values.
         */
        "minLength"?: number;
        /**
          * Whether the input should allow multiple files to be selected.
         */
        "multiple"?: boolean;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly": boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Use round input edges.
          * @default false
         */
        "round": boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * Activates cleave-zen time mask on input
         */
        "timeMaskOptions"?: FormatTimeMaskOptions;
        /**
          * Whether the input should show a password toggle button for password inputs.
          * @default false
         */
        "togglePassword": boolean;
        /**
          * Type of form control.
          * @default 'text'
         */
        "type": InputType;
        /**
          * The value of the control.
         */
        "value"?: string;
    }
    /**
     * A menu component that provides a dropdown with a built-in configurable trigger button
     * and proper ARIA semantics and keyboard navigation for menu items.
     * The trigger is always a cat-button with sensible defaults but fully configurable
     * through trigger-specific props.
     */
    interface CatMenu {
        /**
          * The arrow key navigation direction for menu items.
          * @default 'vertical'
         */
        "arrowNavigation": 'horizontal' | 'vertical';
        /**
          * Closes the menu.
         */
        "close": () => Promise<void>;
        /**
          * Whether the dropdown trigger should be initialized only before first opening. Can be useful when trigger is rendered dynamically.
          * @default false
         */
        "delayedTriggerInit": boolean;
        /**
          * Disable the menu.
          * @default false
         */
        "disabled": boolean;
        /**
          * Make the dropdown match the width of the reference regardless of its contents. Note that this only applies to the minimum width of the dropdown. The maximum width is still limited by the viewport.
          * @default false
         */
        "justify": boolean;
        /**
          * Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
          * @default false
         */
        "noResize": boolean;
        /**
          * Opens the menu.
         */
        "open": () => Promise<void>;
        /**
          * Allow overflow when dropdown is open.
          * @default false
         */
        "overflow": boolean;
        /**
          * The placement of the dropdown.
          * @default 'bottom-start'
         */
        "placement": Placement;
        /**
          * Toggles the menu.
         */
        "toggle": () => Promise<void>;
        /**
          * The trigger button accessibility label. If not set, falls back to triggerLabel.
         */
        "triggerA11yLabel"?: string;
        /**
          * Additional CSS class for the trigger button.
         */
        "triggerClass"?: string;
        /**
          * The color palette of the trigger button.
          * @default 'secondary'
         */
        "triggerColor": 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
        /**
          * The trigger button icon.
         */
        "triggerIcon"?: string;
        /**
          * Show only the icon in the trigger button.
         */
        "triggerIconOnly"?: boolean | Breakpoint;
        /**
          * The trigger button label.
         */
        "triggerLabel"?: string;
        /**
          * Native attributes for the trigger button.
         */
        "triggerNativeAttributes"?: { [key: string]: string };
        /**
          * The trigger button size.
          * @default 'm'
         */
        "triggerSize": 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * Test ID for the trigger button.
         */
        "triggerTestId"?: string;
        /**
          * The trigger button variant.
          * @default 'text'
         */
        "triggerVariant": 'filled' | 'outlined' | 'text';
    }
    /**
     * A menu item component that renders as a button with proper ARIA semantics.
     */
    interface CatMenuItem {
        /**
          * Whether the menu item is active.
          * @default false
         */
        "active": boolean;
        /**
          * The color of the menu item.
         */
        "color"?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info';
        /**
          * Specifies that the menu item should be disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the menu item.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the menu item.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * The name of an icon to be displayed in the menu item.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the icon.
          * @default false
         */
        "iconOnly": boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * A unique identifier for the menu item.
         */
        "identifier"?: string;
        /**
          * The loading state of the menu item.
         */
        "loading"?: boolean;
        /**
          * Attributes that will be added to the native HTML button element
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * @default false
         */
        "subMenu": boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
        /**
          * The variant of the menu item button.
          * @default 'text'
         */
        "variant": 'filled' | 'outlined' | 'text';
    }
    /**
     * A navigation component to switch between different pages of paged chunks of
     * data such as a table. Pagination is built with list HTML elements and a
     * wrapping `<nav>` element to identify it as a navigation section to screen
     * readers and other assistive technologies. Furthermore, the current page is
     * correctly highlighted using `aria-current`.
     */
    interface CatPagination {
        /**
          * The number of pages to be shown around the current page.
          * @default 1
         */
        "activePadding": number;
        /**
          * Use compact pagination mode.
          * @default false
         */
        "compact": boolean;
        /**
          * The icon of the "next" button.
          * @default '$cat:pagination-right'
         */
        "iconNext": string;
        /**
          * The icon of the "previous" button.
          * @default '$cat:pagination-left'
         */
        "iconPrev": string;
        /**
          * The current page.
          * @default 0
         */
        "page": number;
        /**
          * The total number of pages.
          * @default 1
         */
        "pageCount": number;
        /**
          * Use round button edges.
          * @default false
         */
        "round": boolean;
        /**
          * The number of pages to be shown at the edges.
          * @default 1
         */
        "sidePadding": number;
        /**
          * The size of the buttons.
          * @default 'm'
         */
        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * The rendering style of the buttons.
          * @default 'text'
         */
        "variant": 'filled' | 'outlined' | 'text';
    }
    /**
     * Radio Buttons are graphical interface elements that allow user to choose
     * only one of a predefined set of mutually exclusive options.
     */
    interface CatRadio {
        /**
          * The alignment of the checkbox.
          * @default 'top'
         */
        "alignment": 'center' | 'top' | 'bottom';
        /**
          * Whether this radio is checked.
          * @default false
         */
        "checked": boolean;
        /**
          * Whether this radio is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the radio button. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the radio button. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Optional hint text(s) to be displayed with the radio.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label of the radio that is visible.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * Whether the label should appear to the left of the radio component.
          * @default false
         */
        "labelLeft": boolean;
        /**
          * The name of the radio component.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Whether the radio is required.
          * @default false
         */
        "required": boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the radio component.
          * @default ''
         */
        "value": any;
    }
    /**
     * A group of radio buttons.
     */
    interface CatRadioGroup {
        /**
          * Adds an accessible label for the radio group that it is only shown in assistive technologies, like screen readers.
         */
        "a11yLabel"?: string;
        /**
          * Whether this radio group is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Whether the label of the radios should appear to the left of them.
          * @default false
         */
        "labelLeft": boolean;
        /**
          * The name of the radio group component.
         */
        "name"?: string;
        /**
          * The value of the radio group.
         */
        "value"?: any;
    }
    /**
     * An element to display scrollable content.
     */
    interface CatScrollable {
        /**
          * Flags to disable/enable overflowX.
          * @default false
         */
        "noOverflowX": boolean;
        /**
          * Flags to disable/enable overflowY.
          * @default false
         */
        "noOverflowY": boolean;
        /**
          * Flag to disable/enable overscroll behavior.
          * @default false
         */
        "noOverscroll": boolean;
        /**
          * Flag to not fire an initial event after content initialization.
          * @default false
         */
        "noScrolledInit": boolean;
        /**
          * Flags to disable/enable scroll shadowX.
          * @default false
         */
        "noShadowX": boolean;
        /**
          * Flags to disable/enable scroll shadowY.
          * @default false
         */
        "noShadowY": boolean;
        /**
          * Buffer to be used to calculate the scroll distance.
          * @default 0
         */
        "scrolledBuffer": number;
    }
    /**
     * Select lets user choose one option from an options' menu.
     * Consider using select when you have 6 or more options. Select component supports any content type.
     */
    interface CatSelect {
        /**
          * Clear the input.
         */
        "clear": () => Promise<void>;
        /**
          * Whether the select should show a clear button.
          * @default false
         */
        "clearable": boolean;
        /**
          * Connect the functions of the select
          * @param connector - The {@link CatSelectConnector} of the select.
         */
        "connect": (connector: CatSelectConnector) => Promise<void>;
        /**
          * The debounce time for the search.
          * @default 250
         */
        "debounce": number;
        /**
          * Whether the select is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the input. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the input. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate": boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.
         */
        "fallbackHorizontal"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the select.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the select.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * Enable multiple selection.
          * @default false
         */
        "multiple": boolean;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The text to display in the dropdown if no results are found.
         */
        "noItems"?: string;
        /**
          * The placeholder text to display within the select.
         */
        "placeholder"?: string;
        /**
          * The placement of the select.
          * @default 'bottom-start'
         */
        "placement": Placement;
        /**
          * A value is required or must be checked for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the select is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Optional hint text to be displayed on the new item to be added.
         */
        "tagHint"?: string;
        /**
          * Whether the select should add new items.
          * @default false
         */
        "tags": boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
         */
        "value"?: CatSelectValue;
    }
    interface CatSelectDemo {
    }
    /**
     * Skeletons are used to show where content will eventually be drawn.
     */
    interface CatSkeleton {
        /**
          * The animation style of the skeleton.
          * @default 'sheen'
         */
        "effect": 'plain' | 'sheen' | 'pulse';
        /**
          * The number of text lines to be rendered for "head" and "body" variants. Defaults to 1 for "head" and 3 for "body". Will be ignored for other variants.
         */
        "lines"?: number;
        /**
          * The size of the skeleton. If the variant is set to "head", the size values "xs" to "xl" translate to the head levels `h1` to `h5`.
          * @default 'm'
         */
        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * The rendering style of the skeleton.
          * @default 'rectangle'
         */
        "variant": 'rectangle' | 'square' | 'circle' | 'head' | 'body';
    }
    /**
     * Spinners are used to indicate users that their action is being processed.
     */
    interface CatSpinner {
        /**
          * Adds accessible label for the spinner that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
         */
        "a11yLabel"?: string;
        /**
          * The size of the spinner.
          * @default 'm'
         */
        "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
        /**
          * Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.
          * @default 0
         */
        "value": number;
    }
    /**
     * A single tab inside a tabs component.
     */
    interface CatTab {
        /**
          * Specifies that the tab should be deactivated.
          * @default false
         */
        "deactivated": boolean;
        /**
          * Specifies that the tab content pane contains an error. This will color the tab in an error state and also switch to an error icon if an icon is specified.
          * @default false
         */
        "error": boolean;
        /**
          * The name of an icon to be displayed in the tab.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the tab.
          * @default false
         */
        "iconOnly": boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * The label of the tab.
          * @default ''
         */
        "label": string;
        /**
          * Attributes that will be added to the native HTML button element
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Specifies that the tab does not have an active state and thus cannot be activated. This does not mean, that the tab is deactivated. The tab can still be clicked and emit the `catClick` event. This is helpful if a tab should only trigger a click action (such as opening a modal).
          * @default false
         */
        "noActive": boolean;
        /**
          * Specifies that the tab is always visible in adaptive mode. Only the first sticky tab will be taken into account. Sticky has advantage on activeTabAlwaysVisible if there is no space to show both.
          * @default false
         */
        "sticky": boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
    }
    /**
     * Tabs are used to display multiple panels to be contained within a single
     * window, using tabs as a navigational element.
     */
    interface CatTabs {
        /**
          * The ID of the active tab.
          * @default ''
         */
        "activeTab": string;
        /**
          * Whether the active tab should always be visible. Applied when adaptive is enabled. Has less priority than sticky if there is no space to show both.
          * @default false
         */
        "activeTabAlwaysVisible": boolean;
        /**
          * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.
          * @default false
         */
        "adaptive": boolean;
        /**
          * Activates the tab with the given id.
          * @param id The tab id.
         */
        "setActive": (id: string) => Promise<void>;
        /**
          * Activates the tab with the given index.
          * @param index The tab index.
         */
        "setActiveIndex": (index: number) => Promise<void>;
        /**
          * The alignment of the tabs.
          * @default 'left'
         */
        "tabsAlign": 'left' | 'center' | 'right' | 'justify';
        /**
          * Recalculates visible and hidden adaptive tabs.
         */
        "updateAdaptiveTabs": () => Promise<void>;
    }
    /**
     * An input that allows multiple values to be entered as tags.
     */
    interface CatTag {
        /**
          * Whether new tag is added when the input is blurred.
          * @default false
         */
        "addOnBlur": boolean;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable": boolean;
        /**
          * Whether the select is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate": boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the select.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the select.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The placeholder text to display within the select.
         */
        "placeholder"?: string;
        /**
          * A value is required or must be checked for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the select is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`. Pasted values will also be split by those chars. Defaults to `[' ']`.
          * @default [' ']
         */
        "tagCreationChars": string[];
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the control.
         */
        "value"?: string[];
    }
    /**
     * Textarea specifies a control that allows user to write text over multiple
     * rows. Used when the expected user input is long. For shorter input, use the
     * input component.
     */
    interface CatTextarea {
        /**
          * Hint for form autofill feature.
         */
        "autoComplete"?: string;
        /**
          * Clear the textarea.
         */
        "clear": () => Promise<void>;
        /**
          * Whether the textarea is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the textarea. Use this method instead of `textarea.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the textarea. Use this method instead of `textarea.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate": boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.
         */
        "fallbackHorizontal"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the textarea.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the textarea.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * A maximum length (number of characters) for textual values.
         */
        "maxLength"?: number;
        /**
          * A minimum length (number of characters) for textual values.
         */
        "minLength"?: number;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML textarea element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly": boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the textarea is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Specifies the initial number of lines in the textarea.
          * @default 3
         */
        "rows": number;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The initial value of the control.
         */
        "value"?: string;
    }
    /**
     * A time input component to select a time in a dropdown.
     */
    interface CatTime {
        /**
          * Hint for form autofill feature.
          * @default 'off'
         */
        "autoComplete": string;
        /**
          * Clear the input.
         */
        "clear": () => Promise<void>;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable": boolean;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the input. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the input. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate": boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * If the horizontal value is not provided, this fallback value is used. Can be set by form-group.
         */
        "fallbackHorizontal"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight": boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * A maximum time value given in HH:mm format.
         */
        "max"?: string;
        /**
          * A minimum value given in HH:mm format.
         */
        "min"?: string;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The placement of the dropdown.
          * @default 'bottom-end'
         */
        "placement": Placement;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly": boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required": boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Select a time in the picker.
          * @param date The time to select.
         */
        "select": (date: Date | null) => Promise<void>;
        /**
          * The step size for times in minutes.
          * @default 30
         */
        "step": number;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * The value of the control given in HH:mm format
         */
        "value"?: string;
    }
    /**
     * Toggles are graphical interface switches that give user control over a
     * feature or option that can be turned on or off.
     */
    interface CatToggle {
        /**
          * The alignment of the checkbox.
          * @default 'top'
         */
        "alignment": 'center' | 'top' | 'bottom';
        /**
          * Checked state of the toggle.
          * @default false
         */
        "checked": boolean;
        /**
          * Disabled state of the toggle.
          * @default false
         */
        "disabled": boolean;
        /**
          * Programmatically remove focus from the toggle. Use this method instead of `input.blur()`.
         */
        "doBlur": () => Promise<void>;
        /**
          * Programmatically move focus to the toggle. Use this method instead of `input.focus()`.
          * @param options An optional object providing options to control aspects of the focusing process.
         */
        "doFocus": (options?: FocusOptions) => Promise<void>;
        /**
          * Optional hint text(s) to be displayed with the toggle.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label of the toggle that is visible.
          * @default ''
         */
        "label": string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden": boolean;
        /**
          * Whether the label should appear to the left of the toggle.
          * @default false
         */
        "labelLeft": boolean;
        /**
          * The name of the input.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The value of the unchecked toggle.
         */
        "noValue"?: any;
        /**
          * Required state of the toggle.
          * @default false
         */
        "required": boolean;
        /**
          * The resolved value of the toggle, based on the checked state, value and noValue.
          * @default null
         */
        "resolvedValue": any;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the checked toggle.
         */
        "value"?: any;
    }
    /**
     * Tooltips display additional information when the user hovers over or
     * interacts with a trigger element. The tooltip can be customized with
     * different placements, sizes, and styles.
     */
    interface CatTooltip {
        /**
          * The content of the tooltip.
          * @default ''
         */
        "content": string;
        /**
          * Specifies that the tooltip should be disabled. A disabled tooltip is unusable, and invisible. Corresponds with the native HTML disabled attribute.
          * @default false
         */
        "disabled": boolean;
        /**
          * The delay time for hiding tooltip in ms.
          * @default 0
         */
        "hideDelay": number;
        /**
          * The duration of tap to show the tooltip.
          * @default 1000
         */
        "longTouchDuration": number;
        /**
          * The placement of the tooltip.
          * @default 'top'
         */
        "placement": TooltipPlacement;
        /**
          * Use round tooltip edges.
          * @default false
         */
        "round": boolean;
        /**
          * The delay time for showing tooltip in ms.
          * @default 250
         */
        "showDelay": number;
        /**
          * The size of the tooltip.
          * @default 'm'
         */
        "size": 's' | 'm' | 'l';
    }
}
export interface CatButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatButtonElement;
}
export interface CatCardCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatCardElement;
}
export interface CatCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatCheckboxElement;
}
export interface CatDateCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatDateElement;
}
export interface CatDateInlineCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatDateInlineElement;
}
export interface CatDatepickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatDatepickerElement;
}
export interface CatDatepickerInlineCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatDatepickerInlineElement;
}
export interface CatDropdownCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatDropdownElement;
}
export interface CatInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatInputElement;
}
export interface CatMenuCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatMenuElement;
}
export interface CatMenuItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatMenuItemElement;
}
export interface CatPaginationCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatPaginationElement;
}
export interface CatRadioCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatRadioElement;
}
export interface CatRadioGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatRadioGroupElement;
}
export interface CatScrollableCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatScrollableElement;
}
export interface CatSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatSelectElement;
}
export interface CatTabCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatTabElement;
}
export interface CatTabsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatTabsElement;
}
export interface CatTagCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatTagElement;
}
export interface CatTextareaCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatTextareaElement;
}
export interface CatTimeCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatTimeElement;
}
export interface CatToggleCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCatToggleElement;
}
declare global {
    /**
     * Informs user about important changes or conditions in the interface. Use this
     * component if you need to capture user’s attention in a prominent way.
     */
    interface HTMLCatAlertElement extends Components.CatAlert, HTMLStencilElement {
    }
    var HTMLCatAlertElement: {
        prototype: HTMLCatAlertElement;
        new (): HTMLCatAlertElement;
    };
    /**
     * Avatars are used to represent a person or object.
     */
    interface HTMLCatAvatarElement extends Components.CatAvatar, HTMLStencilElement {
    }
    var HTMLCatAvatarElement: {
        prototype: HTMLCatAvatarElement;
        new (): HTMLCatAvatarElement;
    };
    /**
     * Badges are used to inform users of the status of an object or of an action
     * that’s been taken.
     */
    interface HTMLCatBadgeElement extends Components.CatBadge, HTMLStencilElement {
    }
    var HTMLCatBadgeElement: {
        prototype: HTMLCatBadgeElement;
        new (): HTMLCatBadgeElement;
    };
    interface HTMLCatButtonElementEventMap {
        "catClick": MouseEvent;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * Buttons are used for interface actions. Primary style should be used only
     * once per view for main call-to-action.
     */
    interface HTMLCatButtonElement extends Components.CatButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatButtonElementEventMap>(type: K, listener: (this: HTMLCatButtonElement, ev: CatButtonCustomEvent<HTMLCatButtonElementEventMap[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 HTMLCatButtonElementEventMap>(type: K, listener: (this: HTMLCatButtonElement, ev: CatButtonCustomEvent<HTMLCatButtonElementEventMap[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 HTMLCatButtonElement: {
        prototype: HTMLCatButtonElement;
        new (): HTMLCatButtonElement;
    };
    /**
     * Button groups are designed to bring together button controls that are of a
     * similar nature. For example text formatting controls.
     */
    interface HTMLCatButtonGroupElement extends Components.CatButtonGroup, HTMLStencilElement {
    }
    var HTMLCatButtonGroupElement: {
        prototype: HTMLCatButtonGroupElement;
        new (): HTMLCatButtonGroupElement;
    };
    interface HTMLCatCardElementEventMap {
        "catLoad": FocusEvent;
    }
    /**
     * Cards are surfaces that display content and actions on a single topic. They
     * should be easy to scan for relevant and actionable information.
     */
    interface HTMLCatCardElement extends Components.CatCard, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatCardElementEventMap>(type: K, listener: (this: HTMLCatCardElement, ev: CatCardCustomEvent<HTMLCatCardElementEventMap[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 HTMLCatCardElementEventMap>(type: K, listener: (this: HTMLCatCardElement, ev: CatCardCustomEvent<HTMLCatCardElementEventMap[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 HTMLCatCardElement: {
        prototype: HTMLCatCardElement;
        new (): HTMLCatCardElement;
    };
    interface HTMLCatCheckboxElementEventMap {
        "catChange": any;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * Checkboxes are used to let a user choose one or more options from a limited
     * number of options.
     */
    interface HTMLCatCheckboxElement extends Components.CatCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatCheckboxElementEventMap>(type: K, listener: (this: HTMLCatCheckboxElement, ev: CatCheckboxCustomEvent<HTMLCatCheckboxElementEventMap[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 HTMLCatCheckboxElementEventMap>(type: K, listener: (this: HTMLCatCheckboxElement, ev: CatCheckboxCustomEvent<HTMLCatCheckboxElementEventMap[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 HTMLCatCheckboxElement: {
        prototype: HTMLCatCheckboxElement;
        new (): HTMLCatCheckboxElement;
    };
    interface HTMLCatDateElementEventMap {
        "catChange": string;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * A date input component to select a date from a calendar in a dropdown.
     */
    interface HTMLCatDateElement extends Components.CatDate, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatDateElementEventMap>(type: K, listener: (this: HTMLCatDateElement, ev: CatDateCustomEvent<HTMLCatDateElementEventMap[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 HTMLCatDateElementEventMap>(type: K, listener: (this: HTMLCatDateElement, ev: CatDateCustomEvent<HTMLCatDateElementEventMap[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 HTMLCatDateElement: {
        prototype: HTMLCatDateElement;
        new (): HTMLCatDateElement;
    };
    interface HTMLCatDateInlineElementEventMap {
        "catChange": string;
    }
    /**
     * An inline date picker component to select a date.
     */
    interface HTMLCatDateInlineElement extends Components.CatDateInline, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatDateInlineElementEventMap>(type: K, listener: (this: HTMLCatDateInlineElement, ev: CatDateInlineCustomEvent<HTMLCatDateInlineElementEventMap[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 HTMLCatDateInlineElementEventMap>(type: K, listener: (this: HTMLCatDateInlineElement, ev: CatDateInlineCustomEvent<HTMLCatDateInlineElementEventMap[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 HTMLCatDateInlineElement: {
        prototype: HTMLCatDateInlineElement;
        new (): HTMLCatDateInlineElement;
    };
    interface HTMLCatDatepickerElementEventMap {
        "catChange": string;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    interface HTMLCatDatepickerElement extends Components.CatDatepicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatDatepickerElementEventMap>(type: K, listener: (this: HTMLCatDatepickerElement, ev: CatDatepickerCustomEvent<HTMLCatDatepickerElementEventMap[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 HTMLCatDatepickerElementEventMap>(type: K, listener: (this: HTMLCatDatepickerElement, ev: CatDatepickerCustomEvent<HTMLCatDatepickerElementEventMap[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 HTMLCatDatepickerElement: {
        prototype: HTMLCatDatepickerElement;
        new (): HTMLCatDatepickerElement;
    };
    interface HTMLCatDatepickerInlineElementEventMap {
        "catChange": string;
    }
    interface HTMLCatDatepickerInlineElement extends Components.CatDatepickerInline, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatDatepickerInlineElementEventMap>(type: K, listener: (this: HTMLCatDatepickerInlineElement, ev: CatDatepickerInlineCustomEvent<HTMLCatDatepickerInlineElementEventMap[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 HTMLCatDatepickerInlineElementEventMap>(type: K, listener: (this: HTMLCatDatepickerInlineElement, ev: CatDatepickerInlineCustomEvent<HTMLCatDatepickerInlineElementEventMap[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 HTMLCatDatepickerInlineElement: {
        prototype: HTMLCatDatepickerInlineElement;
        new (): HTMLCatDatepickerInlineElement;
    };
    interface HTMLCatDropdownElementEventMap {
        "catOpen": FocusEvent;
        "catClose": FocusEvent;
    }
    /**
     * A dropdown component to display a list of actions in a dropdown menu or to
     * show additional content on demand.
     */
    interface HTMLCatDropdownElement extends Components.CatDropdown, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatDropdownElementEventMap>(type: K, listener: (this: HTMLCatDropdownElement, ev: CatDropdownCustomEvent<HTMLCatDropdownElementEventMap[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 HTMLCatDropdownElementEventMap>(type: K, listener: (this: HTMLCatDropdownElement, ev: CatDropdownCustomEvent<HTMLCatDropdownElementEventMap[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 HTMLCatDropdownElement: {
        prototype: HTMLCatDropdownElement;
        new (): HTMLCatDropdownElement;
    };
    /**
     * A form group component to group form fields and labels.
     */
    interface HTMLCatFormGroupElement extends Components.CatFormGroup, HTMLStencilElement {
    }
    var HTMLCatFormGroupElement: {
        prototype: HTMLCatFormGroupElement;
        new (): HTMLCatFormGroupElement;
    };
    /**
     * Icons are used to provide additional meaning or in places where text label
     * doesn't fit.
     */
    interface HTMLCatIconElement extends Components.CatIcon, HTMLStencilElement {
    }
    var HTMLCatIconElement: {
        prototype: HTMLCatIconElement;
        new (): HTMLCatIconElement;
    };
    interface HTMLCatInputElementEventMap {
        "catChange": string;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
        "catChangeFiles": FileList | null;
    }
    /**
     * Inputs are used to allow users to provide text input when the expected input
     * is short. As well as plain text, Input supports various types of text,
     * including passwords and numbers.
     */
    interface HTMLCatInputElement extends Components.CatInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatInputElementEventMap>(type: K, listener: (this: HTMLCatInputElement, ev: CatInputCustomEvent<HTMLCatInputElementEventMap[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 HTMLCatInputElementEventMap>(type: K, listener: (this: HTMLCatInputElement, ev: CatInputCustomEvent<HTMLCatInputElementEventMap[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 HTMLCatInputElement: {
        prototype: HTMLCatInputElement;
        new (): HTMLCatInputElement;
    };
    interface HTMLCatMenuElementEventMap {
        "catOpen": FocusEvent;
        "catClose": FocusEvent;
        "catTriggerClick": MouseEvent;
    }
    /**
     * A menu component that provides a dropdown with a built-in configurable trigger button
     * and proper ARIA semantics and keyboard navigation for menu items.
     * The trigger is always a cat-button with sensible defaults but fully configurable
     * through trigger-specific props.
     */
    interface HTMLCatMenuElement extends Components.CatMenu, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatMenuElementEventMap>(type: K, listener: (this: HTMLCatMenuElement, ev: CatMenuCustomEvent<HTMLCatMenuElementEventMap[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 HTMLCatMenuElementEventMap>(type: K, listener: (this: HTMLCatMenuElement, ev: CatMenuCustomEvent<HTMLCatMenuElementEventMap[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 HTMLCatMenuElement: {
        prototype: HTMLCatMenuElement;
        new (): HTMLCatMenuElement;
    };
    interface HTMLCatMenuItemElementEventMap {
        "catClick": MouseEvent;
    }
    /**
     * A menu item component that renders as a button with proper ARIA semantics.
     */
    interface HTMLCatMenuItemElement extends Components.CatMenuItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatMenuItemElementEventMap>(type: K, listener: (this: HTMLCatMenuItemElement, ev: CatMenuItemCustomEvent<HTMLCatMenuItemElementEventMap[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 HTMLCatMenuItemElementEventMap>(type: K, listener: (this: HTMLCatMenuItemElement, ev: CatMenuItemCustomEvent<HTMLCatMenuItemElementEventMap[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 HTMLCatMenuItemElement: {
        prototype: HTMLCatMenuItemElement;
        new (): HTMLCatMenuItemElement;
    };
    interface HTMLCatPaginationElementEventMap {
        "catChange": number;
    }
    /**
     * A navigation component to switch between different pages of paged chunks of
     * data such as a table. Pagination is built with list HTML elements and a
     * wrapping `<nav>` element to identify it as a navigation section to screen
     * readers and other assistive technologies. Furthermore, the current page is
     * correctly highlighted using `aria-current`.
     */
    interface HTMLCatPaginationElement extends Components.CatPagination, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatPaginationElementEventMap>(type: K, listener: (this: HTMLCatPaginationElement, ev: CatPaginationCustomEvent<HTMLCatPaginationElementEventMap[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 HTMLCatPaginationElementEventMap>(type: K, listener: (this: HTMLCatPaginationElement, ev: CatPaginationCustomEvent<HTMLCatPaginationElementEventMap[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 HTMLCatPaginationElement: {
        prototype: HTMLCatPaginationElement;
        new (): HTMLCatPaginationElement;
    };
    interface HTMLCatRadioElementEventMap {
        "catChange": boolean | string;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * Radio Buttons are graphical interface elements that allow user to choose
     * only one of a predefined set of mutually exclusive options.
     */
    interface HTMLCatRadioElement extends Components.CatRadio, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatRadioElementEventMap>(type: K, listener: (this: HTMLCatRadioElement, ev: CatRadioCustomEvent<HTMLCatRadioElementEventMap[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 HTMLCatRadioElementEventMap>(type: K, listener: (this: HTMLCatRadioElement, ev: CatRadioCustomEvent<HTMLCatRadioElementEventMap[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 HTMLCatRadioElement: {
        prototype: HTMLCatRadioElement;
        new (): HTMLCatRadioElement;
    };
    interface HTMLCatRadioGroupElementEventMap {
        "catChange": boolean | string;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * A group of radio buttons.
     */
    interface HTMLCatRadioGroupElement extends Components.CatRadioGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatRadioGroupElementEventMap>(type: K, listener: (this: HTMLCatRadioGroupElement, ev: CatRadioGroupCustomEvent<HTMLCatRadioGroupElementEventMap[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 HTMLCatRadioGroupElementEventMap>(type: K, listener: (this: HTMLCatRadioGroupElement, ev: CatRadioGroupCustomEvent<HTMLCatRadioGroupElementEventMap[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 HTMLCatRadioGroupElement: {
        prototype: HTMLCatRadioGroupElement;
        new (): HTMLCatRadioGroupElement;
    };
    interface HTMLCatScrollableElementEventMap {
        "scrolledTop": void;
        "scrolledLeft": void;
        "scrolledRight": void;
        "scrolledBottom": void;
    }
    /**
     * An element to display scrollable content.
     */
    interface HTMLCatScrollableElement extends Components.CatScrollable, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatScrollableElementEventMap>(type: K, listener: (this: HTMLCatScrollableElement, ev: CatScrollableCustomEvent<HTMLCatScrollableElementEventMap[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 HTMLCatScrollableElementEventMap>(type: K, listener: (this: HTMLCatScrollableElement, ev: CatScrollableCustomEvent<HTMLCatScrollableElementEventMap[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 HTMLCatScrollableElement: {
        prototype: HTMLCatScrollableElement;
        new (): HTMLCatScrollableElement;
    };
    interface HTMLCatSelectElementEventMap {
        "catOpen": FocusEvent;
        "catClose": FocusEvent;
        "catChange": CatSelectValue;
        "catBlur": FocusEvent;
    }
    /**
     * Select lets user choose one option from an options' menu.
     * Consider using select when you have 6 or more options. Select component supports any content type.
     */
    interface HTMLCatSelectElement extends Components.CatSelect, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatSelectElementEventMap>(type: K, listener: (this: HTMLCatSelectElement, ev: CatSelectCustomEvent<HTMLCatSelectElementEventMap[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 HTMLCatSelectElementEventMap>(type: K, listener: (this: HTMLCatSelectElement, ev: CatSelectCustomEvent<HTMLCatSelectElementEventMap[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 HTMLCatSelectElement: {
        prototype: HTMLCatSelectElement;
        new (): HTMLCatSelectElement;
    };
    interface HTMLCatSelectDemoElement extends Components.CatSelectDemo, HTMLStencilElement {
    }
    var HTMLCatSelectDemoElement: {
        prototype: HTMLCatSelectDemoElement;
        new (): HTMLCatSelectDemoElement;
    };
    /**
     * Skeletons are used to show where content will eventually be drawn.
     */
    interface HTMLCatSkeletonElement extends Components.CatSkeleton, HTMLStencilElement {
    }
    var HTMLCatSkeletonElement: {
        prototype: HTMLCatSkeletonElement;
        new (): HTMLCatSkeletonElement;
    };
    /**
     * Spinners are used to indicate users that their action is being processed.
     */
    interface HTMLCatSpinnerElement extends Components.CatSpinner, HTMLStencilElement {
    }
    var HTMLCatSpinnerElement: {
        prototype: HTMLCatSpinnerElement;
        new (): HTMLCatSpinnerElement;
    };
    interface HTMLCatTabElementEventMap {
        "catClick": MouseEvent;
    }
    /**
     * A single tab inside a tabs component.
     */
    interface HTMLCatTabElement extends Components.CatTab, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatTabElementEventMap>(type: K, listener: (this: HTMLCatTabElement, ev: CatTabCustomEvent<HTMLCatTabElementEventMap[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 HTMLCatTabElementEventMap>(type: K, listener: (this: HTMLCatTabElement, ev: CatTabCustomEvent<HTMLCatTabElementEventMap[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 HTMLCatTabElement: {
        prototype: HTMLCatTabElement;
        new (): HTMLCatTabElement;
    };
    interface HTMLCatTabsElementEventMap {
        "catChange": { id: string; index: number; fromDropdown: boolean };
    }
    /**
     * Tabs are used to display multiple panels to be contained within a single
     * window, using tabs as a navigational element.
     */
    interface HTMLCatTabsElement extends Components.CatTabs, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatTabsElementEventMap>(type: K, listener: (this: HTMLCatTabsElement, ev: CatTabsCustomEvent<HTMLCatTabsElementEventMap[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 HTMLCatTabsElementEventMap>(type: K, listener: (this: HTMLCatTabsElement, ev: CatTabsCustomEvent<HTMLCatTabsElementEventMap[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 HTMLCatTabsElement: {
        prototype: HTMLCatTabsElement;
        new (): HTMLCatTabsElement;
    };
    interface HTMLCatTagElementEventMap {
        "catChange": string[];
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * An input that allows multiple values to be entered as tags.
     */
    interface HTMLCatTagElement extends Components.CatTag, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatTagElementEventMap>(type: K, listener: (this: HTMLCatTagElement, ev: CatTagCustomEvent<HTMLCatTagElementEventMap[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 HTMLCatTagElementEventMap>(type: K, listener: (this: HTMLCatTagElement, ev: CatTagCustomEvent<HTMLCatTagElementEventMap[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 HTMLCatTagElement: {
        prototype: HTMLCatTagElement;
        new (): HTMLCatTagElement;
    };
    interface HTMLCatTextareaElementEventMap {
        "catChange": string;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * Textarea specifies a control that allows user to write text over multiple
     * rows. Used when the expected user input is long. For shorter input, use the
     * input component.
     */
    interface HTMLCatTextareaElement extends Components.CatTextarea, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatTextareaElementEventMap>(type: K, listener: (this: HTMLCatTextareaElement, ev: CatTextareaCustomEvent<HTMLCatTextareaElementEventMap[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 HTMLCatTextareaElementEventMap>(type: K, listener: (this: HTMLCatTextareaElement, ev: CatTextareaCustomEvent<HTMLCatTextareaElementEventMap[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 HTMLCatTextareaElement: {
        prototype: HTMLCatTextareaElement;
        new (): HTMLCatTextareaElement;
    };
    interface HTMLCatTimeElementEventMap {
        "catChange": string;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * A time input component to select a time in a dropdown.
     */
    interface HTMLCatTimeElement extends Components.CatTime, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatTimeElementEventMap>(type: K, listener: (this: HTMLCatTimeElement, ev: CatTimeCustomEvent<HTMLCatTimeElementEventMap[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 HTMLCatTimeElementEventMap>(type: K, listener: (this: HTMLCatTimeElement, ev: CatTimeCustomEvent<HTMLCatTimeElementEventMap[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 HTMLCatTimeElement: {
        prototype: HTMLCatTimeElement;
        new (): HTMLCatTimeElement;
    };
    interface HTMLCatToggleElementEventMap {
        "catChange": any;
        "catFocus": FocusEvent;
        "catBlur": FocusEvent;
    }
    /**
     * Toggles are graphical interface switches that give user control over a
     * feature or option that can be turned on or off.
     */
    interface HTMLCatToggleElement extends Components.CatToggle, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCatToggleElementEventMap>(type: K, listener: (this: HTMLCatToggleElement, ev: CatToggleCustomEvent<HTMLCatToggleElementEventMap[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 HTMLCatToggleElementEventMap>(type: K, listener: (this: HTMLCatToggleElement, ev: CatToggleCustomEvent<HTMLCatToggleElementEventMap[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 HTMLCatToggleElement: {
        prototype: HTMLCatToggleElement;
        new (): HTMLCatToggleElement;
    };
    /**
     * Tooltips display additional information when the user hovers over or
     * interacts with a trigger element. The tooltip can be customized with
     * different placements, sizes, and styles.
     */
    interface HTMLCatTooltipElement extends Components.CatTooltip, HTMLStencilElement {
    }
    var HTMLCatTooltipElement: {
        prototype: HTMLCatTooltipElement;
        new (): HTMLCatTooltipElement;
    };
    interface HTMLElementTagNameMap {
        "cat-alert": HTMLCatAlertElement;
        "cat-avatar": HTMLCatAvatarElement;
        "cat-badge": HTMLCatBadgeElement;
        "cat-button": HTMLCatButtonElement;
        "cat-button-group": HTMLCatButtonGroupElement;
        "cat-card": HTMLCatCardElement;
        "cat-checkbox": HTMLCatCheckboxElement;
        "cat-date": HTMLCatDateElement;
        "cat-date-inline": HTMLCatDateInlineElement;
        "cat-datepicker": HTMLCatDatepickerElement;
        "cat-datepicker-inline": HTMLCatDatepickerInlineElement;
        "cat-dropdown": HTMLCatDropdownElement;
        "cat-form-group": HTMLCatFormGroupElement;
        "cat-icon": HTMLCatIconElement;
        "cat-input": HTMLCatInputElement;
        "cat-menu": HTMLCatMenuElement;
        "cat-menu-item": HTMLCatMenuItemElement;
        "cat-pagination": HTMLCatPaginationElement;
        "cat-radio": HTMLCatRadioElement;
        "cat-radio-group": HTMLCatRadioGroupElement;
        "cat-scrollable": HTMLCatScrollableElement;
        "cat-select": HTMLCatSelectElement;
        "cat-select-demo": HTMLCatSelectDemoElement;
        "cat-skeleton": HTMLCatSkeletonElement;
        "cat-spinner": HTMLCatSpinnerElement;
        "cat-tab": HTMLCatTabElement;
        "cat-tabs": HTMLCatTabsElement;
        "cat-tag": HTMLCatTagElement;
        "cat-textarea": HTMLCatTextareaElement;
        "cat-time": HTMLCatTimeElement;
        "cat-toggle": HTMLCatToggleElement;
        "cat-tooltip": HTMLCatTooltipElement;
    }
}
declare namespace LocalJSX {
    /**
     * Informs user about important changes or conditions in the interface. Use this
     * component if you need to capture user’s attention in a prominent way.
     */
    interface CatAlert {
        /**
          * The color palette of the alert.
          * @default 'primary'
         */
        "color"?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'none';
        /**
          * The name of an icon to be displayed in the alert.
         */
        "icon"?: string;
        /**
          * Whether the icon of the alert is deactivated.
          * @default false
         */
        "noIcon"?: boolean;
    }
    /**
     * Avatars are used to represent a person or object.
     */
    interface CatAvatar {
        /**
          * An icon to be used instead of the initials.
         */
        "icon"?: string;
        /**
          * Custom initials for the avatar.
         */
        "initials"?: string;
        /**
          * The label of the avatar.
          * @default ''
         */
        "label"?: string;
        /**
          * Use round avatar edges.
          * @default false
         */
        "round"?: boolean;
        /**
          * The size of the avatar.
          * @default 'm'
         */
        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * An optional avatar image.
         */
        "src"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
    }
    /**
     * Badges are used to inform users of the status of an object or of an action
     * that’s been taken.
     */
    interface CatBadge {
        /**
          * The color palette of the badge.
          * @default 'primary'
         */
        "color"?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
        /**
          * The name of an icon to be displayed in the button.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the icon.
          * @default false
         */
        "iconOnly"?: boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * Draw attention to the badge with a subtle animation.
          * @default false
         */
        "pulse"?: boolean;
        /**
          * Use round badge edges.
          * @default false
         */
        "round"?: boolean;
        /**
          * The size of the badge.
          * @default 'm'
         */
        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * The rendering style of the badge.
          * @default 'filled'
         */
        "variant"?: 'filled' | 'outlined';
    }
    /**
     * Buttons are used for interface actions. Primary style should be used only
     * once per view for main call-to-action.
     */
    interface CatButton {
        /**
          * Sets the `aria-current` attribute on the button.
         */
        "a11yCurrent"?: string;
        /**
          * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
         */
        "a11yLabel"?: string;
        /**
          * Set the button into an active state.
          * @default false
         */
        "active"?: boolean;
        /**
          * The index of a button that is used inside a cat-button-group component
         */
        "buttonGroupPosition"?: 'first' | 'last' | 'middle';
        /**
          * Adds a unique identifier for the button. Please note that with this particular component this ID is added inside the web component. If you need an ID on the HTML element, use the regular `id` attribute instead.
         */
        "buttonId"?: string;
        /**
          * The color palette of the button.
          * @default 'secondary'
         */
        "color"?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
        /**
          * Specifies that the button should be disabled. A disabled button is unusable and un-clickable. Corresponds with the native HTML disabled attribute.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The name of an icon to be displayed in the button.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the icon.
          * @default false
         */
        "iconOnly"?: boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          * @default false
         */
        "loading"?: boolean;
        /**
          * The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML button element
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Attributes that will be added to the native HTML button content element
         */
        "nativeContentAttributes"?: { [key: string]: string };
        /**
          * Disables ellipse overflowing button content.
          * @default false
         */
        "noEllipsis"?: boolean;
        /**
          * Emitted when the button loses focus.
         */
        "onCatBlur"?: (event: CatButtonCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the button is clicked.
         */
        "onCatClick"?: (event: CatButtonCustomEvent<MouseEvent>) => void;
        /**
          * Emitted when the button received focus.
         */
        "onCatFocus"?: (event: CatButtonCustomEvent<FocusEvent>) => void;
        /**
          * Use round button edges.
          * @default false
         */
        "round"?: boolean;
        /**
          * The size of the button.
          * @default 'm'
         */
        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * Allows the button to submit a form.
          * @default false
         */
        "submit"?: boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
        /**
          * The value of the button, which gets paired with the button's name when submitted as part of a form. Corresponds with the native HTML value attribute.
         */
        "value"?: string;
        /**
          * The rendering style of the button.
          * @default 'outlined'
         */
        "variant"?: 'filled' | 'outlined' | 'text' | 'link';
    }
    /**
     * Button groups are designed to bring together button controls that are of a
     * similar nature. For example text formatting controls.
     */
    interface CatButtonGroup {
        /**
          * Adds an accessible label for the button group that it is only shown in assistive technologies, like screen readers.
         */
        "a11yLabel"?: string;
    }
    /**
     * Cards are surfaces that display content and actions on a single topic. They
     * should be easy to scan for relevant and actionable information.
     */
    interface CatCard {
        /**
          * Emitted when the card and all the children are fully loaded.
         */
        "onCatLoad"?: (event: CatCardCustomEvent<FocusEvent>) => void;
    }
    /**
     * Checkboxes are used to let a user choose one or more options from a limited
     * number of options.
     */
    interface CatCheckbox {
        /**
          * The alignment of the checkbox.
          * @default 'top'
         */
        "alignment"?: 'center' | 'top' | 'bottom';
        /**
          * Checked state of the checkbox
          * @default false
         */
        "checked"?: boolean;
        /**
          * Disabled state of the checkbox
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the checkbox.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * Indeterminate state of the checkbox
          * @default false
         */
        "indeterminate"?: boolean;
        /**
          * Label of the checkbox which is presented in the UI
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * Whether the label should appear to the left of the checkbox.
          * @default false
         */
        "labelLeft"?: boolean;
        /**
          * The name of the input.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The value of the unchecked checkbox.
         */
        "noValue"?: any;
        /**
          * Emitted when the checkbox loses focus.
         */
        "onCatBlur"?: (event: CatCheckboxCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the checked status of the checkbox is changed.
         */
        "onCatChange"?: (event: CatCheckboxCustomEvent<any>) => void;
        /**
          * Emitted when the checkbox received focus.
         */
        "onCatFocus"?: (event: CatCheckboxCustomEvent<FocusEvent>) => void;
        /**
          * Required state of the checkbox.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'none'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * The resolved value of the checkbox, based on the checked state and value.
          * @default null
         */
        "resolvedValue"?: any;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the checked checkbox.
         */
        "value"?: any;
    }
    /**
     * A date input component to select a date from a calendar in a dropdown.
     */
    interface CatDate {
        /**
          * Hint for form autofill feature.
          * @default 'off'
         */
        "autoComplete"?: string;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable"?: boolean;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate"?: boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "max"?: string;
        /**
          * A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "min"?: string;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Emitted when the input loses focus.
         */
        "onCatBlur"?: (event: CatDateCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatDateCustomEvent<string>) => void;
        /**
          * Emitted when the input received focus.
         */
        "onCatFocus"?: (event: CatDateCustomEvent<FocusEvent>) => void;
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The placement of the dropdown.
          * @default 'bottom-end'
         */
        "placement"?: Placement;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "value"?: string;
    }
    /**
     * An inline date picker component to select a date.
     */
    interface CatDateInline {
        /**
          * Adds accessible label for the datepicker. The label will be read by assistive technology upon focusing the datepicker.
         */
        "a11yLabel"?: string;
        /**
          * Shows an arrow keys navigation hint.
          * @default false
         */
        "hint"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "max"?: string;
        /**
          * A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "min"?: string;
        /**
          * Hides the clear button.
          * @default false
         */
        "noClear"?: boolean;
        /**
          * Hides the today button.
          * @default false
         */
        "noToday"?: boolean;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatDateInlineCustomEvent<string>) => void;
        /**
          * Allow the selection of a range of dates, i.e. start and end date.
          * @default false
         */
        "range"?: boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * The value of the control, given in local ISO 8601 date format YYYY-MM-DD.
         */
        "value"?: string;
        /**
          * Show week numbers.
          * @default false
         */
        "weeks"?: boolean;
    }
    interface CatDatepicker {
        /**
          * Instead of body, appends the calendar to the cat-datepicker element instead
          * @default false
         */
        "attachToElement"?: boolean;
        /**
          * Hint for form autofill feature.
          * @default 'off'
         */
        "autoComplete"?: string;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable"?: boolean;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate"?: boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "max"?: string;
        /**
          * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "min"?: string;
        /**
          * The mode of the datepicker, to select a date, time, both, a date range or a week number.
          * @default 'date'
         */
        "mode"?: CatDatepickerMode;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Attributes that will be added to the rendered HTML datepicker element.
         */
        "nativePickerAttributes"?: { [key: string]: string };
        /**
          * Emitted when the input loses focus.
         */
        "onCatBlur"?: (event: CatDatepickerCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatDatepickerCustomEvent<string>) => void;
        /**
          * Emitted when the input received focus.
         */
        "onCatFocus"?: (event: CatDatepickerCustomEvent<FocusEvent>) => void;
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * Where the calendar is rendered relative to the input vertically and horizontally. In the format of "[vertical] [horizontal]". Vertical can be auto, above or below (required). Horizontal can be left, center or right. If
          * @attachToElement is passed the value should be in Placement format
         */
        "position"?: BaseOptions['position'] | Placement;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * The step size to use when changing the time.
          * @default 5
         */
        "step"?: number;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.
         */
        "value"?: string;
    }
    interface CatDatepickerInline {
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "max"?: string;
        /**
          * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.
         */
        "min"?: string;
        /**
          * The mode of the datepicker, to select a date, time, both, a date range or a week number.
          * @default 'date'
         */
        "mode"?: CatDatepickerMode;
        /**
          * Attributes that will be added to the rendered HTML datepicker element.
         */
        "nativePickerAttributes"?: { [key: string]: string };
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatDatepickerInlineCustomEvent<string>) => void;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * The step size to use when changing the time.
          * @default 5
         */
        "step"?: number;
        /**
          * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.
         */
        "value"?: string;
    }
    /**
     * A dropdown component to display a list of actions in a dropdown menu or to
     * show additional content on demand.
     */
    interface CatDropdown {
        /**
          * Do not navigate focus inside the dropdown via vertical arrow keys.
          * @deprecated use cat-menu
          * @default 'vertical'
         */
        "arrowNavigation"?: 'horizontal' | 'vertical' | 'none';
        /**
          * Whether the dropdown trigger should be initialized only before first opening. Can be useful when trigger is rendered dynamically.
          * @default false
         */
        "delayedTriggerInit"?: boolean;
        /**
          * Whether the dropdown is open.
          * @readonly
         */
        "isOpen"?: boolean;
        /**
          * Make the dropdown match the width of the reference regardless of its contents. Note that this only applies to the minimum width of the dropdown. The maximum width is still limited by the viewport.
          * @default false
         */
        "justify"?: boolean;
        /**
          * Do not close the dropdown on outside clicks.
          * @default false
         */
        "noAutoClose"?: boolean;
        /**
          * No element in dropdown will receive focus when dropdown is open. By default, the first element in tab order will receive a focus.
          * @deprecated Using noInitialFocus property would be a bad practice from a11y perspective. We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug. hasInitialFocus should resolve the cause of the original problem instead.
          * @default false
         */
        "noInitialFocus"?: boolean;
        /**
          * Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
          * @default false
         */
        "noResize"?: boolean;
        /**
          * Trigger element will not receive focus when dropdown is closed. Please use this property carefully, consider using cat-menu over using this property
          * @default false
         */
        "noReturnFocus"?: boolean;
        /**
          * Emitted when the dropdown is closed.
         */
        "onCatClose"?: (event: CatDropdownCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the dropdown is opened.
         */
        "onCatOpen"?: (event: CatDropdownCustomEvent<FocusEvent>) => void;
        /**
          * Allow overflow when dropdown is open.
          * @default false
         */
        "overflow"?: boolean;
        /**
          * The placement of the dropdown.
          * @default 'bottom-start'
         */
        "placement"?: Placement;
    }
    /**
     * A form group component to group form fields and labels.
     */
    interface CatFormGroup {
        /**
          * Whether the label is on top or left.
          * @default false
         */
        "horizontal"?: boolean;
        /**
          * The space allocated to the input label
         */
        "labelSize"?: string;
        /**
          * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br /> By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br /> - If there are more required, the optional will be marked.<br /> - If there are less required, it will mark the required.<br /><br /> If a form field had "!", the requiredMarked of the field would not change.
          * @default 'auto'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'auto';
    }
    /**
     * Icons are used to provide additional meaning or in places where text label
     * doesn't fit.
     */
    interface CatIcon {
        /**
          * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
         */
        "a11yLabel"?: string;
        /**
          * The name of the icon.
         */
        "icon"?: string;
        /**
          * The SVG source of the icon. This takes precenedence over the `icon` name.
         */
        "iconSrc"?: string;
        /**
          * The size of the icon.
          * @default 'm'
         */
        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
    }
    /**
     * Inputs are used to allow users to provide text input when the expected input
     * is short. As well as plain text, Input supports various types of text,
     * including passwords and numbers.
     */
    interface CatInput {
        /**
          * Defines the file types the file input should accept.
         */
        "accept"?: string;
        /**
          * Hint for form autofill feature.
         */
        "autoComplete"?: string;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable"?: boolean;
        /**
          * Activates cleave-zen date mask on input
         */
        "dateMaskOptions"?: FormatDateMaskOptions;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate"?: boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * Displays the input in a loading state with a spinner.
          * @default false
         */
        "loading"?: boolean;
        /**
          * A maximum value for numeric values.
         */
        "max"?: number | string;
        /**
          * A maximum length (number of characters) for textual values.
         */
        "maxLength"?: number;
        /**
          * A minimum value for numeric values.
         */
        "min"?: number | string;
        /**
          * A minimum length (number of characters) for textual values.
         */
        "minLength"?: number;
        /**
          * Whether the input should allow multiple files to be selected.
         */
        "multiple"?: boolean;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Emitted when the input loses focus.
         */
        "onCatBlur"?: (event: CatInputCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatInputCustomEvent<string>) => void;
        /**
          * Emitted if the input type is "file" and files are selected.
         */
        "onCatChangeFiles"?: (event: CatInputCustomEvent<FileList | null>) => void;
        /**
          * Emitted when the input received focus.
         */
        "onCatFocus"?: (event: CatInputCustomEvent<FocusEvent>) => void;
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Use round input edges.
          * @default false
         */
        "round"?: boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * Activates cleave-zen time mask on input
         */
        "timeMaskOptions"?: FormatTimeMaskOptions;
        /**
          * Whether the input should show a password toggle button for password inputs.
          * @default false
         */
        "togglePassword"?: boolean;
        /**
          * Type of form control.
          * @default 'text'
         */
        "type"?: InputType;
        /**
          * The value of the control.
         */
        "value"?: string;
    }
    /**
     * A menu component that provides a dropdown with a built-in configurable trigger button
     * and proper ARIA semantics and keyboard navigation for menu items.
     * The trigger is always a cat-button with sensible defaults but fully configurable
     * through trigger-specific props.
     */
    interface CatMenu {
        /**
          * The arrow key navigation direction for menu items.
          * @default 'vertical'
         */
        "arrowNavigation"?: 'horizontal' | 'vertical';
        /**
          * Whether the dropdown trigger should be initialized only before first opening. Can be useful when trigger is rendered dynamically.
          * @default false
         */
        "delayedTriggerInit"?: boolean;
        /**
          * Disable the menu.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Make the dropdown match the width of the reference regardless of its contents. Note that this only applies to the minimum width of the dropdown. The maximum width is still limited by the viewport.
          * @default false
         */
        "justify"?: boolean;
        /**
          * Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
          * @default false
         */
        "noResize"?: boolean;
        /**
          * Emitted when the dropdown is closed.
         */
        "onCatClose"?: (event: CatMenuCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the dropdown is opened.
         */
        "onCatOpen"?: (event: CatMenuCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the trigger button is clicked.
         */
        "onCatTriggerClick"?: (event: CatMenuCustomEvent<MouseEvent>) => void;
        /**
          * Allow overflow when dropdown is open.
          * @default false
         */
        "overflow"?: boolean;
        /**
          * The placement of the dropdown.
          * @default 'bottom-start'
         */
        "placement"?: Placement;
        /**
          * The trigger button accessibility label. If not set, falls back to triggerLabel.
         */
        "triggerA11yLabel"?: string;
        /**
          * Additional CSS class for the trigger button.
         */
        "triggerClass"?: string;
        /**
          * The color palette of the trigger button.
          * @default 'secondary'
         */
        "triggerColor"?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
        /**
          * The trigger button icon.
         */
        "triggerIcon"?: string;
        /**
          * Show only the icon in the trigger button.
         */
        "triggerIconOnly"?: boolean | Breakpoint;
        /**
          * The trigger button label.
         */
        "triggerLabel"?: string;
        /**
          * Native attributes for the trigger button.
         */
        "triggerNativeAttributes"?: { [key: string]: string };
        /**
          * The trigger button size.
          * @default 'm'
         */
        "triggerSize"?: 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * Test ID for the trigger button.
         */
        "triggerTestId"?: string;
        /**
          * The trigger button variant.
          * @default 'text'
         */
        "triggerVariant"?: 'filled' | 'outlined' | 'text';
    }
    /**
     * A menu item component that renders as a button with proper ARIA semantics.
     */
    interface CatMenuItem {
        /**
          * Whether the menu item is active.
          * @default false
         */
        "active"?: boolean;
        /**
          * The color of the menu item.
         */
        "color"?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info';
        /**
          * Specifies that the menu item should be disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The name of an icon to be displayed in the menu item.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the icon.
          * @default false
         */
        "iconOnly"?: boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * A unique identifier for the menu item.
         */
        "identifier"?: string;
        /**
          * The loading state of the menu item.
         */
        "loading"?: boolean;
        /**
          * Attributes that will be added to the native HTML button element
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Emitted when the trigger button is clicked.
         */
        "onCatClick"?: (event: CatMenuItemCustomEvent<MouseEvent>) => void;
        /**
          * @default false
         */
        "subMenu"?: boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
        /**
          * The variant of the menu item button.
          * @default 'text'
         */
        "variant"?: 'filled' | 'outlined' | 'text';
    }
    /**
     * A navigation component to switch between different pages of paged chunks of
     * data such as a table. Pagination is built with list HTML elements and a
     * wrapping `<nav>` element to identify it as a navigation section to screen
     * readers and other assistive technologies. Furthermore, the current page is
     * correctly highlighted using `aria-current`.
     */
    interface CatPagination {
        /**
          * The number of pages to be shown around the current page.
          * @default 1
         */
        "activePadding"?: number;
        /**
          * Use compact pagination mode.
          * @default false
         */
        "compact"?: boolean;
        /**
          * The icon of the "next" button.
          * @default '$cat:pagination-right'
         */
        "iconNext"?: string;
        /**
          * The icon of the "previous" button.
          * @default '$cat:pagination-left'
         */
        "iconPrev"?: string;
        /**
          * Emitted when the page of the pagination has changed.
         */
        "onCatChange"?: (event: CatPaginationCustomEvent<number>) => void;
        /**
          * The current page.
          * @default 0
         */
        "page"?: number;
        /**
          * The total number of pages.
          * @default 1
         */
        "pageCount"?: number;
        /**
          * Use round button edges.
          * @default false
         */
        "round"?: boolean;
        /**
          * The number of pages to be shown at the edges.
          * @default 1
         */
        "sidePadding"?: number;
        /**
          * The size of the buttons.
          * @default 'm'
         */
        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * The rendering style of the buttons.
          * @default 'text'
         */
        "variant"?: 'filled' | 'outlined' | 'text';
    }
    /**
     * Radio Buttons are graphical interface elements that allow user to choose
     * only one of a predefined set of mutually exclusive options.
     */
    interface CatRadio {
        /**
          * The alignment of the checkbox.
          * @default 'top'
         */
        "alignment"?: 'center' | 'top' | 'bottom';
        /**
          * Whether this radio is checked.
          * @default false
         */
        "checked"?: boolean;
        /**
          * Whether this radio is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the radio.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label of the radio that is visible.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * Whether the label should appear to the left of the radio component.
          * @default false
         */
        "labelLeft"?: boolean;
        /**
          * The name of the radio component.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Emitted when the radio loses focus.
         */
        "onCatBlur"?: (event: CatRadioCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the radio is changed.
         */
        "onCatChange"?: (event: CatRadioCustomEvent<boolean | string>) => void;
        /**
          * Emitted when the radio received focus.
         */
        "onCatFocus"?: (event: CatRadioCustomEvent<FocusEvent>) => void;
        /**
          * Whether the radio is required.
          * @default false
         */
        "required"?: boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the radio component.
          * @default ''
         */
        "value"?: any;
    }
    /**
     * A group of radio buttons.
     */
    interface CatRadioGroup {
        /**
          * Adds an accessible label for the radio group that it is only shown in assistive technologies, like screen readers.
         */
        "a11yLabel"?: string;
        /**
          * Whether this radio group is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Whether the label of the radios should appear to the left of them.
          * @default false
         */
        "labelLeft"?: boolean;
        /**
          * The name of the radio group component.
         */
        "name"?: string;
        /**
          * Emitted when the radio group loses focus.
         */
        "onCatBlur"?: (event: CatRadioGroupCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatRadioGroupCustomEvent<boolean | string>) => void;
        /**
          * Emitted when the radio group received focus.
         */
        "onCatFocus"?: (event: CatRadioGroupCustomEvent<FocusEvent>) => void;
        /**
          * The value of the radio group.
         */
        "value"?: any;
    }
    /**
     * An element to display scrollable content.
     */
    interface CatScrollable {
        /**
          * Flags to disable/enable overflowX.
          * @default false
         */
        "noOverflowX"?: boolean;
        /**
          * Flags to disable/enable overflowY.
          * @default false
         */
        "noOverflowY"?: boolean;
        /**
          * Flag to disable/enable overscroll behavior.
          * @default false
         */
        "noOverscroll"?: boolean;
        /**
          * Flag to not fire an initial event after content initialization.
          * @default false
         */
        "noScrolledInit"?: boolean;
        /**
          * Flags to disable/enable scroll shadowX.
          * @default false
         */
        "noShadowX"?: boolean;
        /**
          * Flags to disable/enable scroll shadowY.
          * @default false
         */
        "noShadowY"?: boolean;
        /**
          * Emitted when the content is fully scrolled to the bottom.
         */
        "onScrolledBottom"?: (event: CatScrollableCustomEvent<void>) => void;
        /**
          * Emitted when the content is fully scrolled to the left.
         */
        "onScrolledLeft"?: (event: CatScrollableCustomEvent<void>) => void;
        /**
          * Emitted when the content is fully scrolled to the right.
         */
        "onScrolledRight"?: (event: CatScrollableCustomEvent<void>) => void;
        /**
          * Emitted when the content is fully scrolled to the top.
         */
        "onScrolledTop"?: (event: CatScrollableCustomEvent<void>) => void;
        /**
          * Buffer to be used to calculate the scroll distance.
          * @default 0
         */
        "scrolledBuffer"?: number;
    }
    /**
     * Select lets user choose one option from an options' menu.
     * Consider using select when you have 6 or more options. Select component supports any content type.
     */
    interface CatSelect {
        /**
          * Whether the select should show a clear button.
          * @default false
         */
        "clearable"?: boolean;
        /**
          * The debounce time for the search.
          * @default 250
         */
        "debounce"?: number;
        /**
          * Whether the select is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate"?: boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the select.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the select.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * Enable multiple selection.
          * @default false
         */
        "multiple"?: boolean;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The text to display in the dropdown if no results are found.
         */
        "noItems"?: string;
        /**
          * Emitted when the select loses the focus.
         */
        "onCatBlur"?: (event: CatSelectCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatSelectCustomEvent<CatSelectValue>) => void;
        /**
          * Emitted when the select dropdown is closed.
         */
        "onCatClose"?: (event: CatSelectCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the select dropdown is opened.
         */
        "onCatOpen"?: (event: CatSelectCustomEvent<FocusEvent>) => void;
        /**
          * The placeholder text to display within the select.
         */
        "placeholder"?: string;
        /**
          * The placement of the select.
          * @default 'bottom-start'
         */
        "placement"?: Placement;
        /**
          * A value is required or must be checked for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the select is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Optional hint text to be displayed on the new item to be added.
         */
        "tagHint"?: string;
        /**
          * Whether the select should add new items.
          * @default false
         */
        "tags"?: boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
         */
        "value"?: CatSelectValue;
    }
    interface CatSelectDemo {
    }
    /**
     * Skeletons are used to show where content will eventually be drawn.
     */
    interface CatSkeleton {
        /**
          * The animation style of the skeleton.
          * @default 'sheen'
         */
        "effect"?: 'plain' | 'sheen' | 'pulse';
        /**
          * The number of text lines to be rendered for "head" and "body" variants. Defaults to 1 for "head" and 3 for "body". Will be ignored for other variants.
         */
        "lines"?: number;
        /**
          * The size of the skeleton. If the variant is set to "head", the size values "xs" to "xl" translate to the head levels `h1` to `h5`.
          * @default 'm'
         */
        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
        /**
          * The rendering style of the skeleton.
          * @default 'rectangle'
         */
        "variant"?: 'rectangle' | 'square' | 'circle' | 'head' | 'body';
    }
    /**
     * Spinners are used to indicate users that their action is being processed.
     */
    interface CatSpinner {
        /**
          * Adds accessible label for the spinner that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
         */
        "a11yLabel"?: string;
        /**
          * The size of the spinner.
          * @default 'm'
         */
        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
        /**
          * Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.
          * @default 0
         */
        "value"?: number;
    }
    /**
     * A single tab inside a tabs component.
     */
    interface CatTab {
        /**
          * Specifies that the tab should be deactivated.
          * @default false
         */
        "deactivated"?: boolean;
        /**
          * Specifies that the tab content pane contains an error. This will color the tab in an error state and also switch to an error icon if an icon is specified.
          * @default false
         */
        "error"?: boolean;
        /**
          * The name of an icon to be displayed in the tab.
         */
        "icon"?: string;
        /**
          * Hide the actual button content and only display the tab.
          * @default false
         */
        "iconOnly"?: boolean | Breakpoint;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * The label of the tab.
          * @default ''
         */
        "label"?: string;
        /**
          * Attributes that will be added to the native HTML button element
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Specifies that the tab does not have an active state and thus cannot be activated. This does not mean, that the tab is deactivated. The tab can still be clicked and emit the `catClick` event. This is helpful if a tab should only trigger a click action (such as opening a modal).
          * @default false
         */
        "noActive"?: boolean;
        /**
          * Emitted when tab is clicked.
         */
        "onCatClick"?: (event: CatTabCustomEvent<MouseEvent>) => void;
        /**
          * Specifies that the tab is always visible in adaptive mode. Only the first sticky tab will be taken into account. Sticky has advantage on activeTabAlwaysVisible if there is no space to show both.
          * @default false
         */
        "sticky"?: boolean;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A destination to link to, rendered in the href attribute of a link.
         */
        "url"?: string;
        /**
          * Specifies where to open the linked document.
         */
        "urlTarget"?: '_blank' | '_self';
    }
    /**
     * Tabs are used to display multiple panels to be contained within a single
     * window, using tabs as a navigational element.
     */
    interface CatTabs {
        /**
          * The ID of the active tab.
          * @default ''
         */
        "activeTab"?: string;
        /**
          * Whether the active tab should always be visible. Applied when adaptive is enabled. Has less priority than sticky if there is no space to show both.
          * @default false
         */
        "activeTabAlwaysVisible"?: boolean;
        /**
          * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.
          * @default false
         */
        "adaptive"?: boolean;
        /**
          * Emitted when active tab is changed.
         */
        "onCatChange"?: (event: CatTabsCustomEvent<{ id: string; index: number; fromDropdown: boolean }>) => void;
        /**
          * The alignment of the tabs.
          * @default 'left'
         */
        "tabsAlign"?: 'left' | 'center' | 'right' | 'justify';
    }
    /**
     * An input that allows multiple values to be entered as tags.
     */
    interface CatTag {
        /**
          * Whether new tag is added when the input is blurred.
          * @default false
         */
        "addOnBlur"?: boolean;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable"?: boolean;
        /**
          * Whether the select is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate"?: boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the select.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the select.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Emitted when the input loses focus.
         */
        "onCatBlur"?: (event: CatTagCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatTagCustomEvent<string[]>) => void;
        /**
          * Emitted when the input received focus.
         */
        "onCatFocus"?: (event: CatTagCustomEvent<FocusEvent>) => void;
        /**
          * The placeholder text to display within the select.
         */
        "placeholder"?: string;
        /**
          * A value is required or must be checked for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the select is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`. Pasted values will also be split by those chars. Defaults to `[' ']`.
          * @default [' ']
         */
        "tagCreationChars"?: string[];
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the control.
         */
        "value"?: string[];
    }
    /**
     * Textarea specifies a control that allows user to write text over multiple
     * rows. Used when the expected user input is long. For shorter input, use the
     * input component.
     */
    interface CatTextarea {
        /**
          * Hint for form autofill feature.
         */
        "autoComplete"?: string;
        /**
          * Whether the textarea is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate"?: boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the textarea.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the textarea.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * A maximum length (number of characters) for textual values.
         */
        "maxLength"?: number;
        /**
          * A minimum length (number of characters) for textual values.
         */
        "minLength"?: number;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML textarea element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Emitted when the textarea loses focus.
         */
        "onCatBlur"?: (event: CatTextareaCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatTextareaCustomEvent<string>) => void;
        /**
          * Emitted when the textarea received focus.
         */
        "onCatFocus"?: (event: CatTextareaCustomEvent<FocusEvent>) => void;
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the textarea is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * Specifies the initial number of lines in the textarea.
          * @default 3
         */
        "rows"?: number;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The initial value of the control.
         */
        "value"?: string;
    }
    /**
     * A time input component to select a time in a dropdown.
     */
    interface CatTime {
        /**
          * Hint for form autofill feature.
          * @default 'off'
         */
        "autoComplete"?: string;
        /**
          * Whether the input should show a clear button.
          * @default false
         */
        "clearable"?: boolean;
        /**
          * Whether the input is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur.
          * @default 0
         */
        "errorUpdate"?: boolean | number;
        /**
          * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
         */
        "errors"?: boolean | string[] | ErrorMap;
        /**
          * Optional hint text(s) to be displayed with the input.
         */
        "hint"?: string | string[];
        /**
          * Whether the label is on top or left.
         */
        "horizontal"?: boolean;
        /**
          * The name of an icon to be displayed in the input.
         */
        "icon"?: string;
        /**
          * Display the icon on the right.
          * @default false
         */
        "iconRight"?: boolean;
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label for the input.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * A maximum time value given in HH:mm format.
         */
        "max"?: string;
        /**
          * A minimum value given in HH:mm format.
         */
        "min"?: string;
        /**
          * The name of the form control. Submitted with the form as part of a name/value pair.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * Emitted when the input loses focus.
         */
        "onCatBlur"?: (event: CatTimeCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value is changed.
         */
        "onCatChange"?: (event: CatTimeCustomEvent<string>) => void;
        /**
          * Emitted when the input received focus.
         */
        "onCatFocus"?: (event: CatTimeCustomEvent<FocusEvent>) => void;
        /**
          * The placeholder text to display within the input.
         */
        "placeholder"?: string;
        /**
          * The placement of the dropdown.
          * @default 'bottom-end'
         */
        "placement"?: Placement;
        /**
          * The value is not editable.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * A value is required or must be check for the form to be submittable.
          * @default false
         */
        "required"?: boolean;
        /**
          * Whether the label need a marker to shown if the input is required or optional.
          * @default 'optional'
         */
        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
        /**
          * The step size for times in minutes.
          * @default 30
         */
        "step"?: number;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * A textual prefix to be displayed in the input.
         */
        "textPrefix"?: string;
        /**
          * A textual suffix to be displayed in the input.
         */
        "textSuffix"?: string;
        /**
          * The value of the control given in HH:mm format
         */
        "value"?: string;
    }
    /**
     * Toggles are graphical interface switches that give user control over a
     * feature or option that can be turned on or off.
     */
    interface CatToggle {
        /**
          * The alignment of the checkbox.
          * @default 'top'
         */
        "alignment"?: 'center' | 'top' | 'bottom';
        /**
          * Checked state of the toggle.
          * @default false
         */
        "checked"?: boolean;
        /**
          * Disabled state of the toggle.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Optional hint text(s) to be displayed with the toggle.
         */
        "hint"?: string | string[];
        /**
          * A unique identifier for the input.
         */
        "identifier"?: string;
        /**
          * The label of the toggle that is visible.
          * @default ''
         */
        "label"?: string;
        /**
          * Visually hide the label, but still show it to assistive technologies like screen readers.
          * @default false
         */
        "labelHidden"?: boolean;
        /**
          * Whether the label should appear to the left of the toggle.
          * @default false
         */
        "labelLeft"?: boolean;
        /**
          * The name of the input.
         */
        "name"?: string;
        /**
          * Attributes that will be added to the native HTML input element.
         */
        "nativeAttributes"?: { [key: string]: string };
        /**
          * The value of the unchecked toggle.
         */
        "noValue"?: any;
        /**
          * Emitted when the toggle loses focus.
         */
        "onCatBlur"?: (event: CatToggleCustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the checked status of the toggle is changed.
         */
        "onCatChange"?: (event: CatToggleCustomEvent<any>) => void;
        /**
          * Emitted when the toggle received focus.
         */
        "onCatFocus"?: (event: CatToggleCustomEvent<FocusEvent>) => void;
        /**
          * Required state of the toggle.
          * @default false
         */
        "required"?: boolean;
        /**
          * The resolved value of the toggle, based on the checked state, value and noValue.
          * @default null
         */
        "resolvedValue"?: any;
        /**
          * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
         */
        "testId"?: string;
        /**
          * The value of the checked toggle.
         */
        "value"?: any;
    }
    /**
     * Tooltips display additional information when the user hovers over or
     * interacts with a trigger element. The tooltip can be customized with
     * different placements, sizes, and styles.
     */
    interface CatTooltip {
        /**
          * The content of the tooltip.
          * @default ''
         */
        "content"?: string;
        /**
          * Specifies that the tooltip should be disabled. A disabled tooltip is unusable, and invisible. Corresponds with the native HTML disabled attribute.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The delay time for hiding tooltip in ms.
          * @default 0
         */
        "hideDelay"?: number;
        /**
          * The duration of tap to show the tooltip.
          * @default 1000
         */
        "longTouchDuration"?: number;
        /**
          * The placement of the tooltip.
          * @default 'top'
         */
        "placement"?: TooltipPlacement;
        /**
          * Use round tooltip edges.
          * @default false
         */
        "round"?: boolean;
        /**
          * The delay time for showing tooltip in ms.
          * @default 250
         */
        "showDelay"?: number;
        /**
          * The size of the tooltip.
          * @default 'm'
         */
        "size"?: 's' | 'm' | 'l';
    }
    interface IntrinsicElements {
        "cat-alert": CatAlert;
        "cat-avatar": CatAvatar;
        "cat-badge": CatBadge;
        "cat-button": CatButton;
        "cat-button-group": CatButtonGroup;
        "cat-card": CatCard;
        "cat-checkbox": CatCheckbox;
        "cat-date": CatDate;
        "cat-date-inline": CatDateInline;
        "cat-datepicker": CatDatepicker;
        "cat-datepicker-inline": CatDatepickerInline;
        "cat-dropdown": CatDropdown;
        "cat-form-group": CatFormGroup;
        "cat-icon": CatIcon;
        "cat-input": CatInput;
        "cat-menu": CatMenu;
        "cat-menu-item": CatMenuItem;
        "cat-pagination": CatPagination;
        "cat-radio": CatRadio;
        "cat-radio-group": CatRadioGroup;
        "cat-scrollable": CatScrollable;
        "cat-select": CatSelect;
        "cat-select-demo": CatSelectDemo;
        "cat-skeleton": CatSkeleton;
        "cat-spinner": CatSpinner;
        "cat-tab": CatTab;
        "cat-tabs": CatTabs;
        "cat-tag": CatTag;
        "cat-textarea": CatTextarea;
        "cat-time": CatTime;
        "cat-toggle": CatToggle;
        "cat-tooltip": CatTooltip;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            /**
             * Informs user about important changes or conditions in the interface. Use this
             * component if you need to capture user’s attention in a prominent way.
             */
            "cat-alert": LocalJSX.CatAlert & JSXBase.HTMLAttributes<HTMLCatAlertElement>;
            /**
             * Avatars are used to represent a person or object.
             */
            "cat-avatar": LocalJSX.CatAvatar & JSXBase.HTMLAttributes<HTMLCatAvatarElement>;
            /**
             * Badges are used to inform users of the status of an object or of an action
             * that’s been taken.
             */
            "cat-badge": LocalJSX.CatBadge & JSXBase.HTMLAttributes<HTMLCatBadgeElement>;
            /**
             * Buttons are used for interface actions. Primary style should be used only
             * once per view for main call-to-action.
             */
            "cat-button": LocalJSX.CatButton & JSXBase.HTMLAttributes<HTMLCatButtonElement>;
            /**
             * Button groups are designed to bring together button controls that are of a
             * similar nature. For example text formatting controls.
             */
            "cat-button-group": LocalJSX.CatButtonGroup & JSXBase.HTMLAttributes<HTMLCatButtonGroupElement>;
            /**
             * Cards are surfaces that display content and actions on a single topic. They
             * should be easy to scan for relevant and actionable information.
             */
            "cat-card": LocalJSX.CatCard & JSXBase.HTMLAttributes<HTMLCatCardElement>;
            /**
             * Checkboxes are used to let a user choose one or more options from a limited
             * number of options.
             */
            "cat-checkbox": LocalJSX.CatCheckbox & JSXBase.HTMLAttributes<HTMLCatCheckboxElement>;
            /**
             * A date input component to select a date from a calendar in a dropdown.
             */
            "cat-date": LocalJSX.CatDate & JSXBase.HTMLAttributes<HTMLCatDateElement>;
            /**
             * An inline date picker component to select a date.
             */
            "cat-date-inline": LocalJSX.CatDateInline & JSXBase.HTMLAttributes<HTMLCatDateInlineElement>;
            "cat-datepicker": LocalJSX.CatDatepicker & JSXBase.HTMLAttributes<HTMLCatDatepickerElement>;
            "cat-datepicker-inline": LocalJSX.CatDatepickerInline & JSXBase.HTMLAttributes<HTMLCatDatepickerInlineElement>;
            /**
             * A dropdown component to display a list of actions in a dropdown menu or to
             * show additional content on demand.
             */
            "cat-dropdown": LocalJSX.CatDropdown & JSXBase.HTMLAttributes<HTMLCatDropdownElement>;
            /**
             * A form group component to group form fields and labels.
             */
            "cat-form-group": LocalJSX.CatFormGroup & JSXBase.HTMLAttributes<HTMLCatFormGroupElement>;
            /**
             * Icons are used to provide additional meaning or in places where text label
             * doesn't fit.
             */
            "cat-icon": LocalJSX.CatIcon & JSXBase.HTMLAttributes<HTMLCatIconElement>;
            /**
             * Inputs are used to allow users to provide text input when the expected input
             * is short. As well as plain text, Input supports various types of text,
             * including passwords and numbers.
             */
            "cat-input": LocalJSX.CatInput & JSXBase.HTMLAttributes<HTMLCatInputElement>;
            /**
             * A menu component that provides a dropdown with a built-in configurable trigger button
             * and proper ARIA semantics and keyboard navigation for menu items.
             * The trigger is always a cat-button with sensible defaults but fully configurable
             * through trigger-specific props.
             */
            "cat-menu": LocalJSX.CatMenu & JSXBase.HTMLAttributes<HTMLCatMenuElement>;
            /**
             * A menu item component that renders as a button with proper ARIA semantics.
             */
            "cat-menu-item": LocalJSX.CatMenuItem & JSXBase.HTMLAttributes<HTMLCatMenuItemElement>;
            /**
             * A navigation component to switch between different pages of paged chunks of
             * data such as a table. Pagination is built with list HTML elements and a
             * wrapping `<nav>` element to identify it as a navigation section to screen
             * readers and other assistive technologies. Furthermore, the current page is
             * correctly highlighted using `aria-current`.
             */
            "cat-pagination": LocalJSX.CatPagination & JSXBase.HTMLAttributes<HTMLCatPaginationElement>;
            /**
             * Radio Buttons are graphical interface elements that allow user to choose
             * only one of a predefined set of mutually exclusive options.
             */
            "cat-radio": LocalJSX.CatRadio & JSXBase.HTMLAttributes<HTMLCatRadioElement>;
            /**
             * A group of radio buttons.
             */
            "cat-radio-group": LocalJSX.CatRadioGroup & JSXBase.HTMLAttributes<HTMLCatRadioGroupElement>;
            /**
             * An element to display scrollable content.
             */
            "cat-scrollable": LocalJSX.CatScrollable & JSXBase.HTMLAttributes<HTMLCatScrollableElement>;
            /**
             * Select lets user choose one option from an options' menu.
             * Consider using select when you have 6 or more options. Select component supports any content type.
             */
            "cat-select": LocalJSX.CatSelect & JSXBase.HTMLAttributes<HTMLCatSelectElement>;
            "cat-select-demo": LocalJSX.CatSelectDemo & JSXBase.HTMLAttributes<HTMLCatSelectDemoElement>;
            /**
             * Skeletons are used to show where content will eventually be drawn.
             */
            "cat-skeleton": LocalJSX.CatSkeleton & JSXBase.HTMLAttributes<HTMLCatSkeletonElement>;
            /**
             * Spinners are used to indicate users that their action is being processed.
             */
            "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
            /**
             * A single tab inside a tabs component.
             */
            "cat-tab": LocalJSX.CatTab & JSXBase.HTMLAttributes<HTMLCatTabElement>;
            /**
             * Tabs are used to display multiple panels to be contained within a single
             * window, using tabs as a navigational element.
             */
            "cat-tabs": LocalJSX.CatTabs & JSXBase.HTMLAttributes<HTMLCatTabsElement>;
            /**
             * An input that allows multiple values to be entered as tags.
             */
            "cat-tag": LocalJSX.CatTag & JSXBase.HTMLAttributes<HTMLCatTagElement>;
            /**
             * Textarea specifies a control that allows user to write text over multiple
             * rows. Used when the expected user input is long. For shorter input, use the
             * input component.
             */
            "cat-textarea": LocalJSX.CatTextarea & JSXBase.HTMLAttributes<HTMLCatTextareaElement>;
            /**
             * A time input component to select a time in a dropdown.
             */
            "cat-time": LocalJSX.CatTime & JSXBase.HTMLAttributes<HTMLCatTimeElement>;
            /**
             * Toggles are graphical interface switches that give user control over a
             * feature or option that can be turned on or off.
             */
            "cat-toggle": LocalJSX.CatToggle & JSXBase.HTMLAttributes<HTMLCatToggleElement>;
            /**
             * Tooltips display additional information when the user hovers over or
             * interacts with a trigger element. The tooltip can be customized with
             * different placements, sizes, and styles.
             */
            "cat-tooltip": LocalJSX.CatTooltip & JSXBase.HTMLAttributes<HTMLCatTooltipElement>;
        }
    }
}