/* 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 { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
import { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
import { Placement, Props } from "tippy.js";
import { MDCNotchedOutline } from "@material/notched-outline";
import { SortDirection, SortDirectionChangeDetails } from "./interface";
export { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
export { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
export { Placement, Props } from "tippy.js";
export { MDCNotchedOutline } from "@material/notched-outline";
export { SortDirection, SortDirectionChangeDetails } from "./interface";
export namespace Components {
    interface InoAccordion {
        /**
          * The title of the accordion.
         */
        "accordionTitle": string;
        /**
          * Whether the accordion is expanded or collapsed.
         */
        "expanded": boolean;
    }
    /**
     * `ino-autocomplete` is a component that acts similarly to the native `datalist` feature of the `<input>` element.
     * Unlike other components, `ino-autocomplete` is stateful, meaning it maintains its own state. This makes it less
     * flexible to some extent compared to stateless components.
     * ## Responsibilities
     * The component handles the following tasks:
     * - Management of the `value` property of the `<ino-input>` element.
     * - Management of showing and hiding the different options based on the input.
     * - Keyboard navigation among the options.
     * ## Filtering
     * The options are filtered using `.includes(...)`, which ignores case sensitivity.
     */
    interface InoAutocomplete {
        /**
          * Number of ms the search function should be delayed after the user typed something.
         */
        "debounce": number;
        /**
          * Text to display when there are no options found, where `$` is the placeholder for the input of the user.
         */
        "noOptionsText": string;
        /**
          * All options either as a string array or as an array of `{key: string; value: string}` objects.
         */
        "options": string[] | KeyValue[];
        /**
          * The selected value.
         */
        "value": string | KeyValue | null;
    }
    interface InoAvatar {
        /**
          * The aria-label used for the avatar element. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role.
         */
        "a11yLabel"?: string;
        /**
          * The alternative text of the avatar image.
         */
        "alt"?: string;
        /**
          * Colors the border of the avatar in the secondary color.
         */
        "colorSecondary": boolean;
        /**
          * The initials of the avatar. Will be shown if no `src` is defined or `img` fails to load.
         */
        "initials": string;
        /**
          * Enables interactive visuals for the avatar by animating the border and a pointing cursor upon hovering the Element.
         */
        "interactive": boolean;
        /**
          * Overrides the avatar's loading animation behavior. When set to true, the loading animation is displayed indefinitely. When set to false, the avatar will not show any loading animations.  By default, the loading animation will be shown only while the image is being fetched.
         */
        "loading"?: boolean;
        /**
          * The img of the avatar.
         */
        "src": string;
        /**
          * The style variant of the avatar. Can be 'dashed' | 'solid'.
         */
        "variant": 'dashed' | 'solid';
    }
    /**
     * A button component with different styles and icon capability.
     */
    interface InoButton {
        /**
          * Sets the autofocus for this element.
         */
        "autoFocus"?: boolean;
        /**
          * Makes the button text and container slightly smaller.
         */
        "dense": boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The form id this element origins to.
         */
        "form"?: string;
        /**
          * Shows an infinite loading spinner and prevents further clicks.
         */
        "loading"?: boolean;
        /**
          * The name of the element.
         */
        "name"?: string;
        /**
          * The type of this form.  Can either be `button`, `submit` or `reset`.
         */
        "type"?: ButtonType;
        /**
          * The button variant.  * **filled**: Contain actions that are important for your application. * **outlined**: Buttons with medium highlighting. They contain actions that are important but are not the main action in an app. * **text**: Typically used for less prominent actions, including those in dialogs and cards.
         */
        "variant": ButtonVariants;
    }
    /**
     * The ino-card is a flexible and extensible component. It features a header, content, and footer slot that can be used to
     * fully customize the appearance of the card.
     */
    interface InoCard {
        /**
          * Disables the hover effect if true
         */
        "disableElevation": boolean;
        /**
          * Selects the card and displays a check mark icon on top of the card
         */
        "selected": boolean;
    }
    /**
     * The `ino-carousel` component works in combination with the `ino-carousel-slide` component
     * and can be used to display an array of images as a slide show. What is more,
     * it also features an autoplay property that allows the slides to be changed automatically.
     * Lastly, using the css variables described at the bottom of the page, you can easily customize
     * the dimensions of the component as well as the duration of the slide transition.
     */
    interface InoCarousel {
        /**
          * Enables autoplay which causes slides to be changed automatically after `intermission` milliseconds.
         */
        "autoplay": boolean;
        /**
          * Hides the arrow buttons
         */
        "hideButtons": boolean;
        /**
          * Restarts playback from the first slide upon reaching the last slide
         */
        "infinite": boolean;
        /**
          * Sets the intermission between two slides (Unit: ms)
         */
        "intermission": number;
        /**
          * Enables reverse playback of the slides
         */
        "reverse": boolean;
        /**
          * `value` of the slide that should be displayed.
         */
        "value": string;
    }
    /**
     * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
     */
    interface InoCarouselSlide {
        /**
          * Selected state controlled by the `<ino-carousel>`
         */
        "selected": boolean;
        /**
          * Link to the image
         */
        "src": string;
        /**
          * Value of the slide
         */
        "value": string;
    }
    /**
     * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
     */
    interface InoCheckbox {
        /**
          * Marks this element as checked. (**unmanaged**)
         */
        "checked"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Marks this element as indeterminate. It indicates that a user is indeterminate without changing the checked state. If a checkbox is unchecked and indeterminate then it will lose the indeterminate state on click and change to checked. For more information, see [Documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes).
         */
        "indeterminate"?: boolean;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Styles the checkbox as a selection variant that has a larger radius. While checkboxes are mainly used in lists, the selection should be used as a single, independent UI element. The indeterminate state is not supported here.
         */
        "selection"?: boolean;
        /**
          * The value of this element.
         */
        "value"?: string;
    }
    /**
     * The ino-chip component displays the provided content and icon as a chip.
     * Use the `label` attribute to set the label of the chip. To add an icon to the left side of the chip, use the `icon` attribute.
     * #### Additional Hints
     * **Content**: Utilize the `label` attribute to define the chip's label. Include an icon on the left side of the chip via the `icon` attribute.
     * **Selection**: Chips can be used for single or multi-selection among a few options. Refer to the **Selection** and **Filter** stories for examples.
     * **Removable Chips**: Set `removable` to `true` to allow chip removal by the user, which will display a `close` icon on the chip's right side. On removal, a `removeChip` event is emitted instead of hiding or destroying the component. Handle the removal process by listening to this event.
     */
    interface InoChip {
        /**
          * Marks this element as clickable and displays all interactions like hover-effects, click-effects, pointer-cursor,...
         */
        "clickable": boolean;
        /**
          * Disables all interactions.
         */
        "disabled": boolean;
        /**
          * The fill type of this element.
         */
        "fill": ChipSurface;
        /**
          * [DEPRECATED] Please use the default slot instead  The content of the component.
          * @deprecated
         */
        "label": string;
        /**
          * Adds a close icon on the right side of this chip which emits the `removeChip` event on click.
         */
        "removable": boolean;
        /**
          * Makes the chip selectable.
         */
        "selectable": boolean;
        /**
          * Marks this element as selected (**works only in conjunction with `selectable`**)
         */
        "selected": boolean;
        /**
          * The value of this chip. Is emitted by the `chipClicked` and `chipRemoved` events.
         */
        "value"?: string;
    }
    /**
     * A list item component that displays a single instance of choice in a list or menu with a control element (radio-button or checkbox). It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     * #### Restrictions
     * Please note that only text is supported as a trailing element. However, your icons can be placed at the leading position. To do so, use the `trailing`-Property and declare your icon inside of the element
     */
    interface InoControlItem {
        /**
          * Styles the row in an activated style.  In contrast to `selected`, use this for only one item and to mark it as permanently activated.
         */
        "activated"?: boolean;
        /**
          * Marks this element as checked. (**unmanaged**)
         */
        "checked"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Marks this element as indeterminate (**unmanaged**) Checkbox only
         */
        "indeterminate"?: boolean;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * The type of control element  Valid options are 'checkbox' or 'radio'
         */
        "role": string | null;
        /**
          * Sets the secondary text of this list item.  Requires `two-lines` on the parent `ino-list` element.
         */
        "secondaryText"?: string;
        /**
          * Styles the row in a selected style.  In contrast to `activated`, use this option to select one or multiple items that are likely to change soon.
         */
        "selected"?: boolean;
        /**
          * The primary text of this list item (required).
         */
        "text": string;
        /**
          * Places the checkbox at the end of the item
         */
        "trailing"?: boolean;
        /**
          * The value of this element.
         */
        "value"?: string;
    }
    /**
     * A component providing currency functionality by extending a `ino-input`. Main objectives of this component are the separatation of formatted currency values from its numeric values and to handle different currency locales.
     * The `ino-currency-input` controls an underlying `ino-input` and evaluates its value on blur. While the `ino-input` has the textual user input as value, the `ino-currency-input` provides a numeric value of the currency. In theory, you can use all `ino-input` properties. However, properties like maxlength, step, etc. make no sense for currency inputs and are thus not supported.
     * #### Additional Hints
     * The currency input uses a native number formatter which supports a vary of different locales (see [Documentation](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)). On a component level, you can provide any supported locale via the `currency-locale` attribute.
     * However, it may be useful to define a global locale for currencies, This may even differ from the application's locale, for instance a Belgian application may use English as language but the German currency format. For this reason, you can provide the `currencyLocale` option on the global configuration.
     */
    interface InoCurrencyInput {
        /**
          * A supported locale for currency number formatting. If not given, it uses the global config. See https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
         */
        "currencyLocale"?: string;
        /**
          * Numeric currency value
         */
        "value": number | string;
    }
    /**
     * A datepicker is a ui component to select dates and times. It behaves like a native `input` but uses the [flatpickr](https://github.com/flatpickr/flatpickr) library for a better ui experience.
     * #### Types
     * This datepicker can be used as a picker for different types:
     * - date
     * - time
     * - datetime
     * - month
     */
    interface InoDatepicker {
        /**
          * Optional id of an element to append the datepicker to. Default is:  * the host element for inline pickers  * body for collapsable pickers
         */
        "appendTo"?: string;
        /**
          * Attach calendar overlay to body (true) or Position the calendar inside the wrapper and inside the ino-datepicker (false)
         */
        "attachToBody": boolean;
        /**
          * Autofocuses this element.
         */
        "autoFocus"?: boolean;
        /**
          * A string to change the date format. Possible values are listed [here](https://flatpickr.js.org/formatting/). The default value is `d-m-Y` which accepts values like `01-01-2019`.
         */
        "dateFormat"?: string;
        /**
          * A string/array containing the initial date of the datepicker overlay. If you're using `inoRange = true` provide an array. If a `value` is given, this will be ignored.
         */
        "defaultDate"?: string | string[];
        /**
          * A number containing the initial hour in the date-time picker overlay. If a `value` is given, this will be ignored.
         */
        "defaultHour": number;
        /**
          * A number containing the initial minute in the date-time picker overlay. If a `value` is given, this will be ignored.
         */
        "defaultMinute"?: number;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
         */
        "error"?: boolean;
        /**
          * The helper text.
         */
        "helper"?: string;
        /**
          * Displays the helper permanently.
         */
        "helperPersistent"?: boolean;
        /**
          * Styles the helper text as a validation message.
         */
        "helperValidation"?: boolean;
        /**
          * Adjusts the step for the hour input (incl. scrolling) Default is 1
         */
        "hourStep": number;
        /**
          * Displays the datepicker inlined.
         */
        "inline"?: boolean;
        /**
          * Defines the label for this element.
         */
        "label"?: string;
        /**
          * The maximum date that a user can pick to (inclusive).
         */
        "max"?: string;
        /**
          * The minimum date that a user can start picking from (inclusive).
         */
        "min"?: string;
        /**
          * Adjusts the step for the minute input (incl. scrolling) Default is 5
         */
        "minuteStep": number;
        /**
          * The input name of this element.
         */
        "name"?: string;
        /**
          * Styles the datepicker as outlined element.
         */
        "outline"?: boolean;
        /**
          * The placeholder of the input element.
         */
        "placeholder"?: string;
        /**
          * If true, enables the user to choose two dates as an interval. Only works with `type="date"`
         */
        "range"?: boolean;
        /**
          * Redraws the datepicker.
         */
        "redraw": () => Promise<void>;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * Sets blur on the native `input`. Use this method instead of the global `input.blur()`.
         */
        "setBlur": () => Promise<void>;
        /**
          * Sets focus on the native `input`. Use this method instead of the global `input.focus()`.
         */
        "setFocus": () => Promise<void>;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required
         */
        "showLabelHint"?: boolean;
        /**
          * If true, displays time picker in 12 hour mode with AM/PM selection.
         */
        "twelveHourTime"?: boolean;
        /**
          * Selects the correct picker corresponding to the given type.
         */
        "type"?: PickerTypeKeys;
        /**
          * The currently selected date shown in the input field **unmanaged**. The given value will not be formatted as date.
         */
        "value"?: string;
    }
    /**
     * The ino-dialog component displays a modal window that can be used to display additional information or notify the user.
     * It is based on the mdc-dialog and is fully customizable. The styling of a dialog's content must be provided by users.
     * #### Usage Notes
     * - **Child Component Layout Issues**: If elements like ripples or labels in the `ino-dialog` are mispositioned or incorrectly sized, it may indicate that child components are being rendered before the dialog is fully open.
     * - **Rendering After Dialog Opens**: To prevent layout issues, render sensitive child components (e.g. `ino-icon-button`) only after the `dialogOpen` event has fired.
     */
    interface InoDialog {
        /**
          * Adds a button with the given text to proceed with an action
         */
        "actionText"?: string;
        /**
          * The target element the dialog should be attached to. If not given, the dialog is a child of the documents body. Note: This property is immutable after initialization.
         */
        "attachTo"?: string;
        /**
          * Adds a text to the body of the `ino-dialog`
         */
        "bodyText"?: string;
        /**
          * Adds a button with the given text to close the `ino-dialog`
         */
        "cancelText"?: string;
        /**
          * Adds a close icon in the top right corner to close the `ino-dialog`.
         */
        "closeIcon": boolean;
        /**
          * The role of the dialog. Can be either 'dialog' or 'alertdialog'. The 'alertdialog' role should be used for important alerts and error messages.
         */
        "dialogRole"?: 'dialog' | 'alertdialog';
        /**
          * Close the dialog by clicking outside of the dialog.
         */
        "dismissible"?: boolean;
        /**
          * Defines a full width dialog sliding up from the bottom of the page.
         */
        "fullwidth"?: boolean;
        /**
          * Adds a headline to the `ino-dialog`
         */
        "headerText"?: string;
        /**
          * Adds a `ino-icon` besides the headline
         */
        "icon"?: string;
        /**
          * Opens the dialog if set to true
         */
        "open": boolean;
    }
    /**
     * A floating action button represents the primary action in an application. [Floating Action Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab) component.
     * It appears in front of all screen content, typically as a circular shape with an icon in its center.
     * FABs come in three types: regular, mini, and extended
     * #### Additional Hints
     * **Content**: Use the  label` attribute to set the text of a fab. To add an icon, use the  icon` attribute.
     */
    interface InoFab {
        /**
          * Disables the button.
         */
        "disabled": boolean;
        /**
          * The position of the edge.
         */
        "edgePosition": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
        /**
          * Optional, modifies the FAB to wider size which includes a text label.
         */
        "extended": boolean;
        /**
          * Adds an icon to the Fab.
          * @deprecated This property is deprecated and will be removed with the next major release. Instead, use the `icon-leading` slot.
         */
        "icon"?: string;
        /**
          * Optional, for the text label. Applicable only for Extended FAB.
         */
        "label"?: string;
        /**
          * Optional, modifies the FAB to a smaller size
         */
        "mini": boolean;
        /**
          * The placement of the tooltip which will be displayed when the button is not extended. Use `none`, if you don't want a tooltip to be displayed.
         */
        "tooltipPlacement": Placement | 'none';
    }
    /**
     * The ino-fab-set component serves as a container for multiple fab buttons. It contains actions related to the main fab
     * button. Upon interacting with the fab button, a FAB-Set can display three to six related actions in the form of a speed
     * dial.
     * #### Additional Hints
     * **Content**: Put the FABs for the speed dial inside of `ino-fab-set` as `ino-fab`.
     * #### Control flow
     * The ino-fab-set has a controlled (unmanaged) attribute `openDial`. For this reason, listen to `click` events, sync to
     * your local state and pass the state to the component again to open/close the fab-set.
     */
    interface InoFabSet {
        /**
          * The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`.
         */
        "dialDirection": Locations;
        /**
          * The side where the Fab is displayed. Possible values: `right`, `left` (default).
         */
        "leftRightLocation": HorizontalLocation;
        /**
          * Opens the dial (**uncontrolled**)
         */
        "openDial": boolean;
        /**
          * The side where the Fab is displayed. Possible values: `top`, `bottom` (default).
         */
        "topBottomLocation": VerticalLocation;
    }
    /**
     * A light icon component for texts and other components.
     * This component is based on the ionicons (https://github.com/ionic-team/ionicons)
     * #### Additional Hints
     * The component inherits styles, such as the text size, from the parent element. For custom styles, use the css properties of the component.
     * **Clickable icon:** Make an icon interactive with the optional attribute `clickable`. Clickable icons emit a `clickEl` event.
     * #### Add icons
     * If you would like to add custom icons, you have to add the `.svg` file to the `src/assets/ino-icon` folder and run the `yarn integrate:icons` script which takes care of the rest.
     * > **Note:** To use the provided icons in your consumer project, you need to copy all contents of
     * > `node_modules/@inovex.de/elements/dist/inovex-elements/ino-icon` into your `dist/ino-icon` folder. All icons are expected
     * > to be located in `ino-icon/` at runtime. Please refer to the Storybook documentation to get detailed instructions
     * > on how to integrate the icons with Angular, React or plain JavaScript.
     * Alternatively, you can also just provide the URL to your preferred icon by setting the `src` property accordingly.
     */
    interface InoIcon {
        /**
          * Makes the icon clickable and allows to listen to the `clickEl` event.
         */
        "clickable"?: boolean;
        /**
          * Colors the icon in the global secondary color
         */
        "colorSecondary"?: boolean;
        /**
          * The name of the icon of this element or an URL.
         */
        "icon"?: string;
        /**
          * Specifies the exact `src` of an SVG file to use.
         */
        "src"?: string;
        /**
          * Sets a meaningful svg title for assistive technologies.
         */
        "svgTitle"?: string;
    }
    /**
     * A rounded button component that contains an icon. It functions as a wrapper around the material [icon-button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button) component.
     * ## Additional Hints
     * **Toggle Button**: To use the ino-icon-button as a toggle button the user can listen to the native `click`-Event and change the icon in the `icon`-Attribute.
     */
    interface InoIconButton {
        /**
          * Marks the icon button as activated.  Useful in cases where an external state controls the icon button activation. Makes the component **managed**.
         */
        "activated"?: boolean;
        /**
          * Allows the specification of native HTML attributes on the underlying HTML element
         */
        "attrs": JSXBase.HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>;
        /**
          * Sets the autofocus for this element.
         */
        "autoFocus"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Styles this element as filled icon button with the `ino-color-scheme` as background color.
         */
        "filled"?: boolean;
        /**
          * The name of the icon of this element.
         */
        "icon"?: string;
        /**
          * The type of this form.  Can either be `button`, `submit` or `reset`.
         */
        "type"?: ButtonType;
    }
    /**
     * An image component with different styles that reserves a predefined space to avoid jumping contents.
     */
    interface InoImg {
        /**
          * The alternative text of this image.
         */
        "alt"?: string;
        /**
          * The decoding method of the native html input element. Can either be `async`, `auto` or `sync`.
         */
        "decoding"?: ImageDecodingTypes;
        /**
          * Icon used for fallback image if image can not be loaded
         */
        "fallbackIcon": string;
        /**
          * The fixed height of this image.
         */
        "height"?: number;
        /**
          * Indicates that the image is a part of an image list component
         */
        "imgListItem": boolean;
        /**
          * Sets the label of the image. Note: Only works if image is part of an ino-img-list component.
         */
        "label"?: string;
        /**
          * The ratio height for this image (default = 1). Use this attribute together with `ratio-width` to reserve a space for the image during rendering and to prevent jumping contents.
         */
        "ratioHeight"?: number;
        /**
          * The ratio width of this image (default = 1). Use this attribute together with `ratio-height` to reserve a space for the image during rendering and to prevent jumping contents.
         */
        "ratioWidth"?: number;
        /**
          * If true, styles the image with rounded borders.
         */
        "rounded"?: boolean;
        /**
          * A set of rules to specify the usage of images sources that are defined in the `srcset` attribute.
         */
        "sizes"?: string;
        /**
          * The source of this image element.
         */
        "src"?: string;
        /**
          * A set of sources of this image for different viewports or devices.
         */
        "srcset"?: string;
        /**
          * An ID referencing to a defined map element for this image.
         */
        "usemap"?: string;
        /**
          * The fixed of the image.
         */
        "width"?: number;
    }
    /**
     * The ino-img-list component is used in combination with the ino-img component to display an array of images
     * in a grid-like format. It is based on the mdc-image-list component.
     */
    interface InoImgList {
        /**
          * Encapsulates the label of all img-list-items within the image
         */
        "encloseLabel": boolean;
        /**
          * Enables the masonry image list variant, which allows the images to be any combination of aspect ratios.
         */
        "masonry": boolean;
    }
    /**
     * An input component with styles. It functions as a wrapper around the material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component.
     * Use this element for **simple types** like `text`, `password`, `number` or `email`. For more complex types, there are elements like a [Radio Button](../ino-radio), a [Checkbox](../ino-checkbox), a [Datepicker](../ino-datepicker) and many more.
     */
    interface InoInput {
        /**
          * The autofocus of this element.
         */
        "autoFocus"?: boolean;
        /**
          * The autocomplete property of this element.
         */
        "autocomplete"?: string;
        /**
          * The id of the datalist child
         */
        "dataList"?: string;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Displays the input field as invalid if set to true. If the property is not set or set to false, the validation is handled by the `pattern` property. This functionality might be useful if the input validation is (additionally) handled by the backend.
         */
        "error"?: boolean;
        /**
          * Returns the native input element used under the hood.
         */
        "getInputElement": () => Promise<HTMLInputElement>;
        /**
          * The optional helper text.
         */
        "helper"?: string;
        /**
          * Displays the number of characters. The maxlength-property must be set. This helper text will be displayed persistently.
         */
        "helperCharacterCounter"?: boolean;
        /**
          * Displays the helper permanently.
         */
        "helperPersistent"?: boolean;
        /**
          * Styles the helper text as a validation message.
         */
        "helperValidation"?: boolean;
        /**
          * The optional floating label of this input field.
         */
        "label"?: string;
        /**
          * The max value of this element.
         */
        "max"?: string;
        /**
          * Limits the number of possible characters to the given number
         */
        "maxlength"?: number;
        /**
          * The min value of this element.
         */
        "min"?: string;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Styles the input field as outlined element.  This property is immutable which means that it should not be changed after its first initialization. Changing this property at runtime causes problems in combination with the floating label. You can read more about this issue [here](https://github.com/inovex/elements/issues/1216).
         */
        "outline"?: boolean;
        /**
          * The validation pattern of this element.
         */
        "pattern"?: string;
        /**
          * The placeholder of this element.
         */
        "placeholder"?: string;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * If set, resets the value after the user typed in the native input element (default). Disabling might be useful to prevent the input from resetting (e.g. `<ino-currency-input>`) and in turn making it uncontrolled.
         */
        "resetOnChange": boolean;
        /**
          * Sets blur on the native `input`. Use this method instead of the global `input.blur()`.
         */
        "setBlur": () => Promise<void>;
        /**
          * Sets focus on the native `input`. Use this method instead of the global `input.focus()`.
         */
        "setFocus": () => Promise<void>;
        /**
          * Sets an interceptor to manipulate user input before emitting a `valueChange` event.
         */
        "setUserInputInterceptor": (fn: UserInputInterceptor) => Promise<void>;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required
         */
        "showLabelHint"?: boolean;
        /**
          * The step value of this element. Use `any` for decimal numbers
         */
        "step"?: number | 'any';
        /**
          * The type of this element (default = text).
         */
        "type"?: InputType;
        /**
          * Displays the given unit at the end of the input field.
         */
        "unit": string;
        /**
          * The value of this element. (**unmanaged**)
         */
        "value": string;
    }
    /**
     * An input component for files. It functions as a wrapper around the native input capabilities having the [`type="file"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file).
     * This component replaces the native behaviour with a custom `ino-button` with logic.
     */
    interface InoInputFile {
        /**
          * The types of files accepted by the server.
         */
        "accept"?: string;
        /**
          * The autofocus of this element.
         */
        "autoFocus"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Enables drag-and-drop file input
         */
        "dragAndDrop"?: boolean;
        /**
          * Sets the secondary text of the drag and drop window
         */
        "dragAndDropSecondaryText"?: string;
        /**
          * Sets the primary text of the drag and drop window
         */
        "dragAndDropText"?: string;
        /**
          * Sets the label of the select files button.
         */
        "label"?: string;
        /**
          * Indicates whether the user can enter one or more values.
         */
        "multiple"?: boolean;
        /**
          * The name of this input field.
         */
        "name"?: string;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
    }
    /**
     * This is an internally used component for various sorts of inputs like `ino-input`, `ino-select` and `ino-textarea`. It is used to display the label for each respective component.
     */
    interface InoLabel {
        /**
          * Colors the label in an light grey to indicate the disabled status for this element
         */
        "disabled": boolean;
        /**
          * Id of the associated form control
         */
        "for": string;
        /**
          * Returns internal mdcNotchedOutline instance
         */
        "getMdcNotchedOutlineInstance": () => Promise<MDCNotchedOutline>;
        /**
          * Styles the label in an outlined style
         */
        "outline": boolean;
        /**
          * Appends * to the label to make it appear as an required input in a form
         */
        "required"?: boolean;
        /**
          * Shows a "optional" message, when not `required`; Shows a * mark, when `required`
         */
        "showHint"?: boolean;
        /**
          * The text of the label itself
         */
        "text": string;
    }
    /**
     * A component that displays a list of choices. It functions as a wrapper around the material [list](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) component.
     * This component is a composer to configure and wrap `list-item`s, `list-divider`s, `control-item`s and `nav-item`s.
     * #### Additional Hints
     * Provide `two-lines` to set proper style attributes for list items having a primary and secondary line.
     */
    interface InoList {
        /**
          * Configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger.
         */
        "avatar"?: boolean;
        /**
          * Styles the list more dense, making it appear more compact.
         */
        "dense"?: boolean;
        /**
          * Marks this element as list with items having two lines.
         */
        "twoLines"?: boolean;
    }
    /**
     * A list divider component that either divides two lists or list items. It functions as a wrapper around the material [list divider](https://github.com/material-components/material-components-web/blob/master/packages/mdc-divider/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     */
    interface InoListDivider {
        /**
          * Marks the divider as a separator between two `ino-list` instead of `ino-list-item` elements.
         */
        "betweenLists"?: boolean;
        /**
          * Increases leading margin to match leading column in `ino-list-item`.  Only applicable if `betweenList` is `false`.
         */
        "inset"?: boolean;
        /**
          * Increases margin on each side of the divider to match meta content in `ino-list-item`.  Only applicable if `betweenList` is `false`.
         */
        "padded"?: boolean;
    }
    /**
     * A list item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     */
    interface InoListItem {
        /**
          * Styles the row in an activated style.  In contrast to `selected`, use this for only one item and to mark it as permantently activated.
         */
        "activated"?: boolean;
        /**
          * Allows the specification of native HTML attributes on the underlying HTML element
         */
        "attrs": JSXBase.HTMLAttributes<HTMLLIElement>;
        /**
          * Styles the row in a disabled style.
         */
        "disabled"?: boolean;
        /**
          * Sets the secondary text of this list item.  Requires `two-lines` on the parent `ino-list` element.
         */
        "secondaryText"?: string;
        /**
          * Styles the row in a selected style.  In contrast to `activated`, use this option to select one or multiple items that are likely to change soon.
         */
        "selected"?: boolean;
        /**
          * The primary text of this list item.
         */
        "text"?: string;
    }
    /**
     * The **Preview Mode** supports following actions:
     * | Actions ||||
     * |---|
     * | Link | Blockquotes | Unordered list / Bullet list | Headline 1 |
     * | Italic | Strikethrough | Ordered list / Numbered  list | Headline 2 |
     * | Bold | Inline code | Task list |
     * Additionally, there are a lot of predefined
     * [keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)
     * provided by the underlying [tiptap](https://tiptap.dev/) editor.
     * The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:
     *  * Support of strikethrough syntax (`~~TextToStrike~~`)
     *  * Support of task list syntax (`- [x] MyToDoTask`)
     *  * No support of image syntax. __Images are not allowed!__
     * ### Font Size Scaling
     * The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
     * #### Base Font Size Variable
     * `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
     * #### Scaling Factors
     * | Element | Scaling Factor | Calculated Size (Example) |
     * |---------|----------------|---------------------------|
     * | Base Font Size | 1x | Base size (e.g., 16px) |
     * | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
     * | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
     */
    interface InoMarkdownEditor {
        /**
          * Initial `string` value of the markdown editor. Reassigning this value do not change the editor state. The value must contain a valid Markdown syntax.
         */
        "initialValue": string;
        /**
          * Sets the view mode of the editor. Can be changed between `preview` (default), `markdown` and `readonly`. The `markdown` mode is made for advanced users that know the Markdown syntax.
         */
        "viewMode": ViewModeUnion;
    }
    /**
     * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
     * The anchor element is the parent element.
     * The menu items consist of different variations of the `ino-list-item` component.
     * If you need a more customizable menu with a different type of elements or functionalities, have a look at the `ino-popover`.
     */
    interface InoMenu {
        /**
          * Determines the position of the opened menu. Usually, the default value (`auto`) will work just fine. Use this if the positioning is off for some reason.
         */
        "placement": Placement;
    }
    /**
     * A navigation drawer component designed to organize and facilitate user navigation in your app.
     * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
     * Usage Note:
     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
     */
    interface InoNavDrawer {
        /**
          * The aria-labels used for content and footer nav elements. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role.
         */
        "a11yLabels"?: NavDrawerLabels;
        /**
          * Side from which the drawer will appear. Possible values: `left` (default), `right`.
         */
        "anchor"?: NavDrawerAnchor;
        /**
          * Marks this element as open. (**unmanaged**)
         */
        "open"?: boolean;
        /**
          * The variant to use for the drawer.
         */
        "variant"?: NavDrawerVariant;
    }
    /**
     * A nav item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     * > Note: This component's main use case is within the `ino-nav-drawer`.
     */
    interface InoNavItem {
        /**
          * Styles the row in an activated style.  Use this for only one item and to mark it as permanently activated.
         */
        "activated"?: boolean;
        /**
          * Styles the row in a disabled style.
         */
        "disabled"?: boolean;
        /**
          * The secondary text of this list item used in a two-lined list.
         */
        "subText"?: string;
        /**
          * The text of this list item.
         */
        "text"?: string;
    }
    /**
     * An option component that can be used to add options to an ino-select component.
     */
    interface InoOption {
        /**
          * Disables the option
         */
        "disabled"?: boolean;
        /**
          * Selects the option
         */
        "selected"?: boolean;
        /**
          * Value of the option
         */
        "value": string;
    }
    /**
     * A wrapper component to be used for a group of ino-options. This component adds a non-selectable header before the options.
     * Beyond that, if you encounter problems using React or Vue in conjunction with the `ino-select`, use this component as a wrapper around your `ino-option`. This way the virtual DOM will know when to update the `ino-select` and its children, which may otherwise not work properly if the options are added dynamically while deeply nested in the `ino-select'. For more information refer to [this issue](https://github.com/ionic-team/stencil/issues/2259).
     */
    interface InoOptionGroup {
        /**
          * Label of the group. If not set, this component serves as a wrapper component for dynamically added `ino-options`. When using react and vue, an issue exists with slots and the virtual DOM. Read more about it [here](https://github.com/ionic-team/stencil/issues/2259).
         */
        "label"?: string;
    }
    /**
     * A Popover is a dialog which is bound to a specific element and appears next to it. Under the
     * hood, [tippy.js](https://atomiks.github.io/tippyjs/) is used.
     * The Popover
     * and [Tooltip](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-tooltip--default-usage)
     * components are very similar. However, popovers are complex dialogs consisting of several HTML elements, while tooltips
     * can only display plain text.
     */
    interface InoPopover {
        /**
          * Shows an arrow pointing towards its trigger-element
         */
        "arrow": boolean;
        /**
          * If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues.
         */
        "attachToBody": boolean;
        /**
          * Sets the color scheme of the popup.  Valid options include: `primary`, `light` and `dark`.
         */
        "colorScheme": TippyThemes;
        /**
          * Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`)
         */
        "controlled": boolean;
        /**
          * The delay in milliseconds before `ino-popover` shows up or hides.  If only one number is given, the show and hide delay get the given delay duration.  If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.  Defaults to 0ms.
         */
        "delay"?: number | [number, number];
        /**
          * Displaces the popover away from, or toward, the anchor element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the anchor.
         */
        "distance"?: number;
        /**
          * Determines if and how the popover follows the user's mouse cursor.
         */
        "followCursor": Props['followCursor'];
        /**
          * The target id the popover belongs to. If not given, the popover is attached to the element provided in the named slot (`popover-trigger`) or the parent component if a slot element does not exist.
         */
        "for"?: string;
        /**
          * Returns the internally used tippy.js instance For more informations see: https://atomiks.github.io/tippyjs/
         */
        "getTippyInstance": () => Promise<any>;
        /**
          * If true, hides the popper on blur.
         */
        "hideOnBlur"?: boolean;
        /**
          * If true, hides the popper on esc.
         */
        "hideOnEsc"?: boolean;
        /**
          * Use this if you want to interact with the popover content (e.g. button clicks)
         */
        "interactive"?: boolean;
        /**
          * The placement of this popover. Accepted values: `top(-start, -end)`, `right(-start, -end)`, `bottom(-start, -end)`, `left(-start, -end)`
         */
        "placement": Placement;
        /**
          * The trigger to show the tooltip - either click, hover or focus. Multiple triggers are possible by separating them with a space.
         */
        "trigger": Exclude<TooltipTrigger, 'manual'>;
        /**
          * Programmatically show or hide the popover. Can only be used in controlled mode (see property `controlled`). Use the `visibleChanged` to sync the popovers' visibility state with yours.
         */
        "visible"?: boolean;
    }
    /**
     * The `ino-progress-bar` is a linear progress bar based on the mdc-linear-progress component.
     */
    interface InoProgressBar {
        /**
          * Sets the buffer progress
         */
        "buffer"?: number;
        /**
          * Indicates whether the state of the progress bar is indeterminate
         */
        "indeterminate"?: boolean;
        /**
          * Sets the label of the progress bar
         */
        "label"?: string;
        /**
          * Sets the progress of the progress bar. Should always be between 0 and 1
         */
        "progress"?: number;
    }
    /**
     * A radio component that allows the user to select an option from a set of radio-buttons. In order to have a single select functionality, please refer to the `ino-radio-group`-component. This component functions as a wrapper around the material [radio](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio) component.
     * #### Additional Hints
     * Clicking on the radio button triggers an event that contains the boolean value `true` (`e.detail`). This event is only triggered if the radio button was not previously selected (`checked=false`). In order to check one element and uncheck the other ones, please refer to the `ino-radio-group`-Component. If (`checked=true`) is passed to an element, the other elements **won't** be deselected without the use of the `ino-radio-group`.
     */
    interface InoRadio {
        /**
          * Initially marks this element as checked. If another ino-radio element in the same group receives `true`, the value will be changed to false automatically.
         */
        "checked": boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The name of this element. Use the same name for radio groups
         */
        "name"?: string;
        /**
          * The value of this element.
         */
        "value"?: string;
    }
    /**
     * A wrapper component to be used for a group of ino-radio-buttons. This component manages the single selection functionality of a group of ino-radio-buttons.
     */
    interface InoRadioGroup {
        /**
          * Sets the alignment of the radios to either vertical or horizontal.
         */
        "alignment": Alignment;
        /**
          * The value of the radio group. If there is an ino-radio child with the given value, the radio-button will be checked and the other radio-buttons unchecked.
         */
        "value"?: string | number | null;
    }
    /**
     * A range component that allows the user select a number using a slider. It functions as a wrapper around the material [Slider](https://github.com/material-components/material-components-web/tree/master/packages/mdc-slider) component.
     */
    interface InoRange {
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Restricts the slider to only allow discrete values.
         */
        "discrete"?: boolean;
        /**
          * Mark this slider to show the steps of the range. Only applicable if `discrete` is enabled.
         */
        "markers"?: boolean;
        /**
          * The max value of this element (**required**).
         */
        "max": number;
        /**
          * The min value of this element.
         */
        "min"?: number;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Allows to input an interval. Use `valueStart` and `valueEnd` to provide values.
         */
        "ranged": boolean;
        /**
          * Should be used to make the component accessible. If the value is not user-friendly (e.g. a number to represent the day of the week), use this method to set a function that maps the slider `value` to value of the `aria-valuetext` attribute (e.g. `0` => `monday`).  e.g.:  `const rangeEl = document.querySelector("ino-range")` `rangeEl.setFnToMapValueToAriaText((value: number) => value + ". day in this week")`
          * @param fn A function that maps the numeric value to a user-friendly string.
         */
        "setValueToAriaTextMapperFn": (fn: (value: number) => string) => Promise<void>;
        /**
          * The step size for this element. Only applicable if `discrete` is enabled. Is used to calculate the number of markers.
         */
        "step"?: number;
        /**
          * The value of this element. Only applicable if not in ranged mode.
         */
        "value"?: number;
        /**
          * The value of the right thumb. Only applicable in ranged mode.
         */
        "valueEnd"?: number;
        /**
          * The value of the left thumb. Only applicable in ranged mode.
         */
        "valueStart"?: number;
    }
    /**
     * A button component that can be used in combination with the ino-segment-group component.
     */
    interface InoSegmentButton {
        /**
          * Activates the button
         */
        "checked": boolean;
        /**
          * Slightly decreases the size of the button
         */
        "dense": boolean;
        /**
          * Disables the button
         */
        "disabled": boolean;
        /**
          * Name of the element
         */
        "name"?: string;
        /**
          * The type of the internal button in the element. This can be 'submit', 'reset', or 'button'. If not specified, the default type is 'submit'.
         */
        "type"?: string;
        /**
          * Value of the element
         */
        "value"?: string;
    }
    /**
     * A button group that can be used as an alternative to drop-down menus.
     */
    interface InoSegmentGroup {
        /**
          * Name of the segment group
         */
        "name"?: string;
        /**
          * Value of the segment group
         */
        "value"?: any;
    }
    /**
     * A component providing single-option select menus. It functions as a wrapper around the material design's [select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select) component.
     * #### Additional Hints
     * Use the custom `ino-option` component to add options to the select component. The `label` attribute sets an optional floating label for this element.
     */
    interface InoSelect {
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Displays the select as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
         */
        "error"?: boolean;
        /**
          * A helper text to display below the select element. By default, non-validation helper text is always visible.
         */
        "helper"?: string;
        /**
          * When the helper text is serving as a validation message, make it permanently visible regardless of the select's validity.
         */
        "helperPersistent"?: boolean;
        /**
          * Indicates the helper text is a validation message. By default validation message is hidden unless the select is invalid.
         */
        "helperValidation"?: boolean;
        /**
          * The label of this element.
         */
        "label"?: string;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Styles this select box as outlined element.
         */
        "outline"?: boolean;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required.
         */
        "showLabelHint"?: boolean;
        /**
          * The value of this element. (**unmanaged**)
         */
        "value"?: string;
    }
    /**
     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
     */
    interface InoSnackbar {
        /**
          * The aria-labels used to provide accessible snackbar context as well as close icon button label.
         */
        "a11yLabels"?: SnackbarLabels;
        /**
          * The text to display for the action button. If no text is defined, the snack bar is displayed in an alternative feedback style.
         */
        "actionText"?: string;
        /**
          * [DEPRECATED] Please use the default slot instead The text message to display.
          * @deprecated
         */
        "message"?: string;
        /**
          * Controls the visibility state of the snackbar. When set to `true`, the snackbar is displayed; otherwise, it is hidden.
         */
        "open": boolean;
        /**
          * If set to true, the timeout that closes the snackbar is paused when the user hovers over the snackbar.
         */
        "stayVisibleOnHover"?: boolean;
        /**
          * Sets the timeout in ms until the snackbar disappears. The timeout can be disabled by setting it to a negative value.
         */
        "timeout"?: number;
        /**
          * Changes the snackbar type. There are four types of messages: info, success, warning and error.
         */
        "type": SnackbarType;
    }
    /**
     * A component which displays a variety of spinners. Use spinners to show that the app is loading content or performing another process for which the user has to wait.
     * This component contains three different types of spinners animated with pure CSS. It mainly relies on [Spinkit](http://tobiasahlin.com/spinkit/) and may be extended in future with more types.
     */
    interface InoSpinner {
        /**
          * The height of this spinner (default = 40)
         */
        "height": number;
        /**
          * If true, the spinner is shown as modal over the current app page.
         */
        "modal": boolean;
        /**
          * The type of this spinner. Possible values: `tile` (default), `bounce` or `circle`
         */
        "type": SpinnerType;
        /**
          * The width of this spinner (defaul = 40)
         */
        "width": number;
    }
    /**
     * Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.
     */
    interface InoSwitch {
        /**
          * Marks this element as checked. (**unmanaged**)
         */
        "checked"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The name of this element.
         */
        "name"?: string;
    }
    /**
     * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. Each Tab governs the visibility of one group of content. It functions as a wrapper around the material [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab) component.
     */
    interface InoTab {
        /**
          * Contains the ID of the associated tab panel for accessibility purposes. This property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role.
         */
        "a11yControls"?: string;
        /**
          * Reflects the selected state of the tab for accessibility purposes. This property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role.
         */
        "a11ySelected"?: boolean;
        /**
          * Indicates a leading icon in the tab.
         */
        "icon"?: string;
        /**
          * Indicates that the tab only expands to the width of its content.
         */
        "indicatorContentWidth": boolean;
        /**
          * [DEPRECATED] Please use the default slot instead. Indicates a label text in the tab.
          * @deprecated
         */
        "label"?: string;
        /**
          * Indicates that the tab icon and label should flow vertically instead of horizontally.
         */
        "stacked": boolean;
    }
    /**
     * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. The Tab Bar contains the Tab Scroller and Tab components. It functions as a wrapper around the material [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar) component.
     */
    interface InoTabBar {
        /**
          * Activates the tab at the given index (**unmanaged**).
         */
        "activeTab"?: number;
        /**
          * Autofocus of tab on activation.
         */
        "autoFocus"?: boolean;
    }
    /**
     * The ino-table is a custom table used to display sets of data across multiple columns.
     * It currently supports different states (selected, active), sorting and loading indication.
     * > The component is based on the [mdc-data-table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table).
     */
    interface InoTable {
        /**
          * True, if the table is loading data.  Use this in combination with a `ino-progress-bar` having `slot="loading-indicator"` to provide an additional horizontal loading bar.
         */
        "loading"?: boolean;
        /**
          * If true, disables row hover styling.  Useful for simples tables with few rows or columns.
         */
        "noHover"?: boolean;
        /**
          * Identifier of the column currently sorted by.  Needs to match the column ids provided on `ino-table-header-cell` elements.
         */
        "sortColumnId"?: string;
        /**
          * Direction of the column currently sorted by.
          * @See Set `sort-start` attribute on the respective column to change the sort order.
         */
        "sortDirection"?: SortDirection;
        /**
          * True, if table header stays visible on vertical scroll
         */
        "stickyHeader"?: boolean;
    }
    /**
     * The `ino-table-header-cell` is a particular header cell to provide search and column sort behaviour on `ino-table`'s.
     */
    interface InoTableHeaderCell {
        /**
          * Marks the header as autofocused (used for searchable header cells).  Use this in combination with the `data-ino-focus` attribute on the actual search target element to focus a specific input element.
         */
        "autofocus": boolean;
        /**
          * A unique identifier of the column (used for sorting).
         */
        "columnId"?: string;
        /**
          * Name of the column.
         */
        "label": string;
        /**
          * If true, the cell is **not** sortable. By default, table header cells are sortable.
         */
        "notSortable": boolean;
        /**
          * Identifier of the search icon (default `search`). Used for date or list search columns.
         */
        "searchIcon": string;
        /**
          * True, if the column has been searched for this column. Persistent state to indicate the user that this column has a search filter.
         */
        "searched": boolean;
        /**
          * Sets blur on the header cell. If searchable, closes the popover.
         */
        "setBlur": () => Promise<void>;
        /**
          * Sets focus on the header cell. If searchable, opens the popover and focuses the `data-ino-focus` target.
         */
        "setFocus": () => Promise<void>;
        /**
          * Updates the search behaviour of this cell.
          * @param searchable true, if the cell should be searchable, false otherwise.
         */
        "setSearchable": (searchable: boolean) => Promise<void>;
        /**
          * The current sort direction of the column.
         */
        "sortDirection"?: SortDirection;
        /**
          * The initial sort direction state (default `desc`).  By default, all columns are sorted descending followed by ascending. To switch this order, set sort Start to asc.
         */
        "sortStart": SortDirection;
    }
    /**
     * A textarea component with styles. It uses a material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component for its styling.
     * > **Note:** The textarea is always styled in an outlined manner. If you need to use a textarea in combination with other form inputs (`ino-input`), use their respective outline style.
     */
    interface InoTextarea {
        /**
          * The autofocus of this element.
         */
        "autoFocus"?: boolean;
        /**
          * An optional flag to allow the textarea adjust its height to display all the content. The `rows` attribute can also be used to specify a minimum height. Use CSS to specify a max-height for the textarea element. Once the height exceeds the max-height, autogrow will re-enable the vertical scrollbar.
         */
        "autogrow": boolean;
        /**
          * The number of cols of this textarea.
         */
        "cols"?: number;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The optional floating label of this input field.
         */
        "label"?: string;
        /**
          * The max length of this element.
         */
        "maxlength"?: number;
        /**
          * The min length of this element.
         */
        "minlength"?: number;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Styles the input field as outlined element.
         */
        "outline"?: boolean;
        /**
          * The placeholder of this element.
         */
        "placeholder"?: string;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * The number of rows of this textarea.
         */
        "rows"?: number;
        /**
          * Sets blur on the native `textarea`. Use this method instead of the global `textarea.blur()`.
         */
        "setBlur": () => Promise<void>;
        /**
          * Sets focus on the native `textarea`. Use this method instead of the global `textarea.focus()`.
         */
        "setFocus": () => Promise<void>;
        /**
          * Displays the number of characters. The maxlength-property must be set.
         */
        "showCharacterCounter"?: boolean;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required
         */
        "showLabelHint"?: boolean;
        /**
          * The value of this element. (**unmanaged**)
         */
        "value"?: string;
    }
    /**
     * A tooltip component that displays text when users hover over, focus on, or tap an element.
     * > Note: A tooltip can only display plain text. For more complex dialogs, see the [Popover](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-popover--default-usage) component.
     */
    interface InoTooltip {
        /**
          * Shows an arrow
         */
        "arrow": boolean;
        /**
          * Sets the color scheme of the tooltip.  Valid options include: `light`, `dark` or `primary`
         */
        "colorScheme": TippyThemes;
        /**
          * The delay in milliseconds before `ino-tooltip` shows up or hides.  If only one number is given, the show and hide delay get the given delay duration.  If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.  Defaults to 0ms.
         */
        "delay"?: number | [number, number];
        /**
          * The target id the tooltip belongs to. If not given, the tooltip is attached to the parent component.
         */
        "for"?: string;
        /**
          * Returns the internally used tippy.js instance For more information see: https://atomiks.github.io/tippyjs/
         */
        "getTippyInstance": () => Promise<any>;
        /**
          * Adds an optional header text to the `ino-tooltip`
         */
        "headerText"?: string;
        /**
          * The text shown in the tooltip.  [DEPRECATED] Please use the default slot instead
          * @deprecated
         */
        "label"?: string;
        /**
          * The placement of the tooltip. Accepted values: `top(-start, -end)`, `right(-start, -end)`, `bottom(-start, -end)`, `left(-start, -end)`
         */
        "placement": Placement;
        /**
          * The trigger to show the tooltip - either `click`, `hover` or `focus`. Multiple triggers possible by separating them with a space.
         */
        "trigger": TooltipTrigger;
    }
}
export interface InoAccordionCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoAccordionElement;
}
export interface InoAutocompleteCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoAutocompleteElement;
}
export interface InoCarouselCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoCarouselElement;
}
export interface InoCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoCheckboxElement;
}
export interface InoChipCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoChipElement;
}
export interface InoControlItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoControlItemElement;
}
export interface InoCurrencyInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoCurrencyInputElement;
}
export interface InoDatepickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoDatepickerElement;
}
export interface InoDialogCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoDialogElement;
}
export interface InoIconCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoIconElement;
}
export interface InoIconButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoIconButtonElement;
}
export interface InoInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoInputElement;
}
export interface InoInputFileCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoInputFileElement;
}
export interface InoListItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoListItemElement;
}
export interface InoMarkdownEditorCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoMarkdownEditorElement;
}
export interface InoNavDrawerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoNavDrawerElement;
}
export interface InoOptionCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoOptionElement;
}
export interface InoPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoPopoverElement;
}
export interface InoRadioCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoRadioElement;
}
export interface InoRadioGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoRadioGroupElement;
}
export interface InoRangeCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoRangeElement;
}
export interface InoSegmentButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoSegmentButtonElement;
}
export interface InoSegmentGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoSegmentGroupElement;
}
export interface InoSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoSelectElement;
}
export interface InoSnackbarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoSnackbarElement;
}
export interface InoSwitchCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoSwitchElement;
}
export interface InoTabCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoTabElement;
}
export interface InoTabBarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoTabBarElement;
}
export interface InoTableCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoTableElement;
}
export interface InoTableHeaderCellCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoTableHeaderCellElement;
}
export interface InoTextareaCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLInoTextareaElement;
}
declare global {
    interface HTMLInoAccordionElementEventMap {
        "expandedChange": boolean;
    }
    interface HTMLInoAccordionElement extends Components.InoAccordion, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoAccordionElementEventMap>(type: K, listener: (this: HTMLInoAccordionElement, ev: InoAccordionCustomEvent<HTMLInoAccordionElementEventMap[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 HTMLInoAccordionElementEventMap>(type: K, listener: (this: HTMLInoAccordionElement, ev: InoAccordionCustomEvent<HTMLInoAccordionElementEventMap[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 HTMLInoAccordionElement: {
        prototype: HTMLInoAccordionElement;
        new (): HTMLInoAccordionElement;
    };
    interface HTMLInoAutocompleteElementEventMap {
        "valueChange": string | { key: string; value: string };
    }
    /**
     * `ino-autocomplete` is a component that acts similarly to the native `datalist` feature of the `<input>` element.
     * Unlike other components, `ino-autocomplete` is stateful, meaning it maintains its own state. This makes it less
     * flexible to some extent compared to stateless components.
     * ## Responsibilities
     * The component handles the following tasks:
     * - Management of the `value` property of the `<ino-input>` element.
     * - Management of showing and hiding the different options based on the input.
     * - Keyboard navigation among the options.
     * ## Filtering
     * The options are filtered using `.includes(...)`, which ignores case sensitivity.
     */
    interface HTMLInoAutocompleteElement extends Components.InoAutocomplete, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoAutocompleteElementEventMap>(type: K, listener: (this: HTMLInoAutocompleteElement, ev: InoAutocompleteCustomEvent<HTMLInoAutocompleteElementEventMap[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 HTMLInoAutocompleteElementEventMap>(type: K, listener: (this: HTMLInoAutocompleteElement, ev: InoAutocompleteCustomEvent<HTMLInoAutocompleteElementEventMap[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 HTMLInoAutocompleteElement: {
        prototype: HTMLInoAutocompleteElement;
        new (): HTMLInoAutocompleteElement;
    };
    interface HTMLInoAvatarElement extends Components.InoAvatar, HTMLStencilElement {
    }
    var HTMLInoAvatarElement: {
        prototype: HTMLInoAvatarElement;
        new (): HTMLInoAvatarElement;
    };
    /**
     * A button component with different styles and icon capability.
     */
    interface HTMLInoButtonElement extends Components.InoButton, HTMLStencilElement {
    }
    var HTMLInoButtonElement: {
        prototype: HTMLInoButtonElement;
        new (): HTMLInoButtonElement;
    };
    /**
     * The ino-card is a flexible and extensible component. It features a header, content, and footer slot that can be used to
     * fully customize the appearance of the card.
     */
    interface HTMLInoCardElement extends Components.InoCard, HTMLStencilElement {
    }
    var HTMLInoCardElement: {
        prototype: HTMLInoCardElement;
        new (): HTMLInoCardElement;
    };
    interface HTMLInoCarouselElementEventMap {
        "valueChange": string;
    }
    /**
     * The `ino-carousel` component works in combination with the `ino-carousel-slide` component
     * and can be used to display an array of images as a slide show. What is more,
     * it also features an autoplay property that allows the slides to be changed automatically.
     * Lastly, using the css variables described at the bottom of the page, you can easily customize
     * the dimensions of the component as well as the duration of the slide transition.
     */
    interface HTMLInoCarouselElement extends Components.InoCarousel, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoCarouselElementEventMap>(type: K, listener: (this: HTMLInoCarouselElement, ev: InoCarouselCustomEvent<HTMLInoCarouselElementEventMap[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 HTMLInoCarouselElementEventMap>(type: K, listener: (this: HTMLInoCarouselElement, ev: InoCarouselCustomEvent<HTMLInoCarouselElementEventMap[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 HTMLInoCarouselElement: {
        prototype: HTMLInoCarouselElement;
        new (): HTMLInoCarouselElement;
    };
    /**
     * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
     */
    interface HTMLInoCarouselSlideElement extends Components.InoCarouselSlide, HTMLStencilElement {
    }
    var HTMLInoCarouselSlideElement: {
        prototype: HTMLInoCarouselSlideElement;
        new (): HTMLInoCarouselSlideElement;
    };
    interface HTMLInoCheckboxElementEventMap {
        "checkedChange": any;
    }
    /**
     * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
     */
    interface HTMLInoCheckboxElement extends Components.InoCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoCheckboxElementEventMap>(type: K, listener: (this: HTMLInoCheckboxElement, ev: InoCheckboxCustomEvent<HTMLInoCheckboxElementEventMap[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 HTMLInoCheckboxElementEventMap>(type: K, listener: (this: HTMLInoCheckboxElement, ev: InoCheckboxCustomEvent<HTMLInoCheckboxElementEventMap[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 HTMLInoCheckboxElement: {
        prototype: HTMLInoCheckboxElement;
        new (): HTMLInoCheckboxElement;
    };
    interface HTMLInoChipElementEventMap {
        "chipClicked": string;
        "chipRemoved": string;
    }
    /**
     * The ino-chip component displays the provided content and icon as a chip.
     * Use the `label` attribute to set the label of the chip. To add an icon to the left side of the chip, use the `icon` attribute.
     * #### Additional Hints
     * **Content**: Utilize the `label` attribute to define the chip's label. Include an icon on the left side of the chip via the `icon` attribute.
     * **Selection**: Chips can be used for single or multi-selection among a few options. Refer to the **Selection** and **Filter** stories for examples.
     * **Removable Chips**: Set `removable` to `true` to allow chip removal by the user, which will display a `close` icon on the chip's right side. On removal, a `removeChip` event is emitted instead of hiding or destroying the component. Handle the removal process by listening to this event.
     */
    interface HTMLInoChipElement extends Components.InoChip, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoChipElementEventMap>(type: K, listener: (this: HTMLInoChipElement, ev: InoChipCustomEvent<HTMLInoChipElementEventMap[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 HTMLInoChipElementEventMap>(type: K, listener: (this: HTMLInoChipElement, ev: InoChipCustomEvent<HTMLInoChipElementEventMap[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 HTMLInoChipElement: {
        prototype: HTMLInoChipElement;
        new (): HTMLInoChipElement;
    };
    interface HTMLInoControlItemElementEventMap {
        "checkedChange": any;
    }
    /**
     * A list item component that displays a single instance of choice in a list or menu with a control element (radio-button or checkbox). It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     * #### Restrictions
     * Please note that only text is supported as a trailing element. However, your icons can be placed at the leading position. To do so, use the `trailing`-Property and declare your icon inside of the element
     */
    interface HTMLInoControlItemElement extends Components.InoControlItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoControlItemElementEventMap>(type: K, listener: (this: HTMLInoControlItemElement, ev: InoControlItemCustomEvent<HTMLInoControlItemElementEventMap[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 HTMLInoControlItemElementEventMap>(type: K, listener: (this: HTMLInoControlItemElement, ev: InoControlItemCustomEvent<HTMLInoControlItemElementEventMap[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 HTMLInoControlItemElement: {
        prototype: HTMLInoControlItemElement;
        new (): HTMLInoControlItemElement;
    };
    interface HTMLInoCurrencyInputElementEventMap {
        "valueChange": number;
    }
    /**
     * A component providing currency functionality by extending a `ino-input`. Main objectives of this component are the separatation of formatted currency values from its numeric values and to handle different currency locales.
     * The `ino-currency-input` controls an underlying `ino-input` and evaluates its value on blur. While the `ino-input` has the textual user input as value, the `ino-currency-input` provides a numeric value of the currency. In theory, you can use all `ino-input` properties. However, properties like maxlength, step, etc. make no sense for currency inputs and are thus not supported.
     * #### Additional Hints
     * The currency input uses a native number formatter which supports a vary of different locales (see [Documentation](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)). On a component level, you can provide any supported locale via the `currency-locale` attribute.
     * However, it may be useful to define a global locale for currencies, This may even differ from the application's locale, for instance a Belgian application may use English as language but the German currency format. For this reason, you can provide the `currencyLocale` option on the global configuration.
     */
    interface HTMLInoCurrencyInputElement extends Components.InoCurrencyInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoCurrencyInputElementEventMap>(type: K, listener: (this: HTMLInoCurrencyInputElement, ev: InoCurrencyInputCustomEvent<HTMLInoCurrencyInputElementEventMap[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 HTMLInoCurrencyInputElementEventMap>(type: K, listener: (this: HTMLInoCurrencyInputElement, ev: InoCurrencyInputCustomEvent<HTMLInoCurrencyInputElementEventMap[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 HTMLInoCurrencyInputElement: {
        prototype: HTMLInoCurrencyInputElement;
        new (): HTMLInoCurrencyInputElement;
    };
    interface HTMLInoDatepickerElementEventMap {
        "valueChange": string;
    }
    /**
     * A datepicker is a ui component to select dates and times. It behaves like a native `input` but uses the [flatpickr](https://github.com/flatpickr/flatpickr) library for a better ui experience.
     * #### Types
     * This datepicker can be used as a picker for different types:
     * - date
     * - time
     * - datetime
     * - month
     */
    interface HTMLInoDatepickerElement extends Components.InoDatepicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoDatepickerElementEventMap>(type: K, listener: (this: HTMLInoDatepickerElement, ev: InoDatepickerCustomEvent<HTMLInoDatepickerElementEventMap[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 HTMLInoDatepickerElementEventMap>(type: K, listener: (this: HTMLInoDatepickerElement, ev: InoDatepickerCustomEvent<HTMLInoDatepickerElementEventMap[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 HTMLInoDatepickerElement: {
        prototype: HTMLInoDatepickerElement;
        new (): HTMLInoDatepickerElement;
    };
    interface HTMLInoDialogElementEventMap {
        "close": DialogCloseAction;
        "action": DialogSubmitAction;
        "dialogOpen": void;
    }
    /**
     * The ino-dialog component displays a modal window that can be used to display additional information or notify the user.
     * It is based on the mdc-dialog and is fully customizable. The styling of a dialog's content must be provided by users.
     * #### Usage Notes
     * - **Child Component Layout Issues**: If elements like ripples or labels in the `ino-dialog` are mispositioned or incorrectly sized, it may indicate that child components are being rendered before the dialog is fully open.
     * - **Rendering After Dialog Opens**: To prevent layout issues, render sensitive child components (e.g. `ino-icon-button`) only after the `dialogOpen` event has fired.
     */
    interface HTMLInoDialogElement extends Components.InoDialog, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoDialogElementEventMap>(type: K, listener: (this: HTMLInoDialogElement, ev: InoDialogCustomEvent<HTMLInoDialogElementEventMap[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 HTMLInoDialogElementEventMap>(type: K, listener: (this: HTMLInoDialogElement, ev: InoDialogCustomEvent<HTMLInoDialogElementEventMap[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 HTMLInoDialogElement: {
        prototype: HTMLInoDialogElement;
        new (): HTMLInoDialogElement;
    };
    /**
     * A floating action button represents the primary action in an application. [Floating Action Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab) component.
     * It appears in front of all screen content, typically as a circular shape with an icon in its center.
     * FABs come in three types: regular, mini, and extended
     * #### Additional Hints
     * **Content**: Use the  label` attribute to set the text of a fab. To add an icon, use the  icon` attribute.
     */
    interface HTMLInoFabElement extends Components.InoFab, HTMLStencilElement {
    }
    var HTMLInoFabElement: {
        prototype: HTMLInoFabElement;
        new (): HTMLInoFabElement;
    };
    /**
     * The ino-fab-set component serves as a container for multiple fab buttons. It contains actions related to the main fab
     * button. Upon interacting with the fab button, a FAB-Set can display three to six related actions in the form of a speed
     * dial.
     * #### Additional Hints
     * **Content**: Put the FABs for the speed dial inside of `ino-fab-set` as `ino-fab`.
     * #### Control flow
     * The ino-fab-set has a controlled (unmanaged) attribute `openDial`. For this reason, listen to `click` events, sync to
     * your local state and pass the state to the component again to open/close the fab-set.
     */
    interface HTMLInoFabSetElement extends Components.InoFabSet, HTMLStencilElement {
    }
    var HTMLInoFabSetElement: {
        prototype: HTMLInoFabSetElement;
        new (): HTMLInoFabSetElement;
    };
    interface HTMLInoIconElementEventMap {
        "clickEl": any;
    }
    /**
     * A light icon component for texts and other components.
     * This component is based on the ionicons (https://github.com/ionic-team/ionicons)
     * #### Additional Hints
     * The component inherits styles, such as the text size, from the parent element. For custom styles, use the css properties of the component.
     * **Clickable icon:** Make an icon interactive with the optional attribute `clickable`. Clickable icons emit a `clickEl` event.
     * #### Add icons
     * If you would like to add custom icons, you have to add the `.svg` file to the `src/assets/ino-icon` folder and run the `yarn integrate:icons` script which takes care of the rest.
     * > **Note:** To use the provided icons in your consumer project, you need to copy all contents of
     * > `node_modules/@inovex.de/elements/dist/inovex-elements/ino-icon` into your `dist/ino-icon` folder. All icons are expected
     * > to be located in `ino-icon/` at runtime. Please refer to the Storybook documentation to get detailed instructions
     * > on how to integrate the icons with Angular, React or plain JavaScript.
     * Alternatively, you can also just provide the URL to your preferred icon by setting the `src` property accordingly.
     */
    interface HTMLInoIconElement extends Components.InoIcon, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoIconElementEventMap>(type: K, listener: (this: HTMLInoIconElement, ev: InoIconCustomEvent<HTMLInoIconElementEventMap[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 HTMLInoIconElementEventMap>(type: K, listener: (this: HTMLInoIconElement, ev: InoIconCustomEvent<HTMLInoIconElementEventMap[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 HTMLInoIconElement: {
        prototype: HTMLInoIconElement;
        new (): HTMLInoIconElement;
    };
    interface HTMLInoIconButtonElementEventMap {
        "clickEl": any;
    }
    /**
     * A rounded button component that contains an icon. It functions as a wrapper around the material [icon-button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button) component.
     * ## Additional Hints
     * **Toggle Button**: To use the ino-icon-button as a toggle button the user can listen to the native `click`-Event and change the icon in the `icon`-Attribute.
     */
    interface HTMLInoIconButtonElement extends Components.InoIconButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoIconButtonElementEventMap>(type: K, listener: (this: HTMLInoIconButtonElement, ev: InoIconButtonCustomEvent<HTMLInoIconButtonElementEventMap[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 HTMLInoIconButtonElementEventMap>(type: K, listener: (this: HTMLInoIconButtonElement, ev: InoIconButtonCustomEvent<HTMLInoIconButtonElementEventMap[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 HTMLInoIconButtonElement: {
        prototype: HTMLInoIconButtonElement;
        new (): HTMLInoIconButtonElement;
    };
    /**
     * An image component with different styles that reserves a predefined space to avoid jumping contents.
     */
    interface HTMLInoImgElement extends Components.InoImg, HTMLStencilElement {
    }
    var HTMLInoImgElement: {
        prototype: HTMLInoImgElement;
        new (): HTMLInoImgElement;
    };
    /**
     * The ino-img-list component is used in combination with the ino-img component to display an array of images
     * in a grid-like format. It is based on the mdc-image-list component.
     */
    interface HTMLInoImgListElement extends Components.InoImgList, HTMLStencilElement {
    }
    var HTMLInoImgListElement: {
        prototype: HTMLInoImgListElement;
        new (): HTMLInoImgListElement;
    };
    interface HTMLInoInputElementEventMap {
        "inoBlur": void;
        "inoFocus": void;
        "valueChange": string;
    }
    /**
     * An input component with styles. It functions as a wrapper around the material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component.
     * Use this element for **simple types** like `text`, `password`, `number` or `email`. For more complex types, there are elements like a [Radio Button](../ino-radio), a [Checkbox](../ino-checkbox), a [Datepicker](../ino-datepicker) and many more.
     */
    interface HTMLInoInputElement extends Components.InoInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoInputElementEventMap>(type: K, listener: (this: HTMLInoInputElement, ev: InoInputCustomEvent<HTMLInoInputElementEventMap[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 HTMLInoInputElementEventMap>(type: K, listener: (this: HTMLInoInputElement, ev: InoInputCustomEvent<HTMLInoInputElementEventMap[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 HTMLInoInputElement: {
        prototype: HTMLInoInputElement;
        new (): HTMLInoInputElement;
    };
    interface HTMLInoInputFileElementEventMap {
        "changeFile": {
    e: any;
    files: File[];
  };
    }
    /**
     * An input component for files. It functions as a wrapper around the native input capabilities having the [`type="file"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file).
     * This component replaces the native behaviour with a custom `ino-button` with logic.
     */
    interface HTMLInoInputFileElement extends Components.InoInputFile, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoInputFileElementEventMap>(type: K, listener: (this: HTMLInoInputFileElement, ev: InoInputFileCustomEvent<HTMLInoInputFileElementEventMap[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 HTMLInoInputFileElementEventMap>(type: K, listener: (this: HTMLInoInputFileElement, ev: InoInputFileCustomEvent<HTMLInoInputFileElementEventMap[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 HTMLInoInputFileElement: {
        prototype: HTMLInoInputFileElement;
        new (): HTMLInoInputFileElement;
    };
    /**
     * This is an internally used component for various sorts of inputs like `ino-input`, `ino-select` and `ino-textarea`. It is used to display the label for each respective component.
     */
    interface HTMLInoLabelElement extends Components.InoLabel, HTMLStencilElement {
    }
    var HTMLInoLabelElement: {
        prototype: HTMLInoLabelElement;
        new (): HTMLInoLabelElement;
    };
    /**
     * A component that displays a list of choices. It functions as a wrapper around the material [list](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) component.
     * This component is a composer to configure and wrap `list-item`s, `list-divider`s, `control-item`s and `nav-item`s.
     * #### Additional Hints
     * Provide `two-lines` to set proper style attributes for list items having a primary and secondary line.
     */
    interface HTMLInoListElement extends Components.InoList, HTMLStencilElement {
    }
    var HTMLInoListElement: {
        prototype: HTMLInoListElement;
        new (): HTMLInoListElement;
    };
    /**
     * A list divider component that either divides two lists or list items. It functions as a wrapper around the material [list divider](https://github.com/material-components/material-components-web/blob/master/packages/mdc-divider/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     */
    interface HTMLInoListDividerElement extends Components.InoListDivider, HTMLStencilElement {
    }
    var HTMLInoListDividerElement: {
        prototype: HTMLInoListDividerElement;
        new (): HTMLInoListDividerElement;
    };
    interface HTMLInoListItemElementEventMap {
        "clickEl": any;
    }
    /**
     * A list item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     */
    interface HTMLInoListItemElement extends Components.InoListItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoListItemElementEventMap>(type: K, listener: (this: HTMLInoListItemElement, ev: InoListItemCustomEvent<HTMLInoListItemElementEventMap[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 HTMLInoListItemElementEventMap>(type: K, listener: (this: HTMLInoListItemElement, ev: InoListItemCustomEvent<HTMLInoListItemElementEventMap[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 HTMLInoListItemElement: {
        prototype: HTMLInoListItemElement;
        new (): HTMLInoListItemElement;
    };
    interface HTMLInoMarkdownEditorElementEventMap {
        "viewModeChange": ViewModeUnion;
        "valueChange": string;
        "inoBlur": void;
    }
    /**
     * The **Preview Mode** supports following actions:
     * | Actions ||||
     * |---|
     * | Link | Blockquotes | Unordered list / Bullet list | Headline 1 |
     * | Italic | Strikethrough | Ordered list / Numbered  list | Headline 2 |
     * | Bold | Inline code | Task list |
     * Additionally, there are a lot of predefined
     * [keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)
     * provided by the underlying [tiptap](https://tiptap.dev/) editor.
     * The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:
     *  * Support of strikethrough syntax (`~~TextToStrike~~`)
     *  * Support of task list syntax (`- [x] MyToDoTask`)
     *  * No support of image syntax. __Images are not allowed!__
     * ### Font Size Scaling
     * The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
     * #### Base Font Size Variable
     * `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
     * #### Scaling Factors
     * | Element | Scaling Factor | Calculated Size (Example) |
     * |---------|----------------|---------------------------|
     * | Base Font Size | 1x | Base size (e.g., 16px) |
     * | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
     * | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
     */
    interface HTMLInoMarkdownEditorElement extends Components.InoMarkdownEditor, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoMarkdownEditorElementEventMap>(type: K, listener: (this: HTMLInoMarkdownEditorElement, ev: InoMarkdownEditorCustomEvent<HTMLInoMarkdownEditorElementEventMap[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 HTMLInoMarkdownEditorElementEventMap>(type: K, listener: (this: HTMLInoMarkdownEditorElement, ev: InoMarkdownEditorCustomEvent<HTMLInoMarkdownEditorElementEventMap[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 HTMLInoMarkdownEditorElement: {
        prototype: HTMLInoMarkdownEditorElement;
        new (): HTMLInoMarkdownEditorElement;
    };
    /**
     * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
     * The anchor element is the parent element.
     * The menu items consist of different variations of the `ino-list-item` component.
     * If you need a more customizable menu with a different type of elements or functionalities, have a look at the `ino-popover`.
     */
    interface HTMLInoMenuElement extends Components.InoMenu, HTMLStencilElement {
    }
    var HTMLInoMenuElement: {
        prototype: HTMLInoMenuElement;
        new (): HTMLInoMenuElement;
    };
    interface HTMLInoNavDrawerElementEventMap {
        "openChange": boolean;
    }
    /**
     * A navigation drawer component designed to organize and facilitate user navigation in your app.
     * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
     * Usage Note:
     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
     */
    interface HTMLInoNavDrawerElement extends Components.InoNavDrawer, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoNavDrawerElementEventMap>(type: K, listener: (this: HTMLInoNavDrawerElement, ev: InoNavDrawerCustomEvent<HTMLInoNavDrawerElementEventMap[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 HTMLInoNavDrawerElementEventMap>(type: K, listener: (this: HTMLInoNavDrawerElement, ev: InoNavDrawerCustomEvent<HTMLInoNavDrawerElementEventMap[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 HTMLInoNavDrawerElement: {
        prototype: HTMLInoNavDrawerElement;
        new (): HTMLInoNavDrawerElement;
    };
    /**
     * A nav item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     * > Note: This component's main use case is within the `ino-nav-drawer`.
     */
    interface HTMLInoNavItemElement extends Components.InoNavItem, HTMLStencilElement {
    }
    var HTMLInoNavItemElement: {
        prototype: HTMLInoNavItemElement;
        new (): HTMLInoNavItemElement;
    };
    interface HTMLInoOptionElementEventMap {
        "clickEl": HTMLInoOptionElement;
    }
    /**
     * An option component that can be used to add options to an ino-select component.
     */
    interface HTMLInoOptionElement extends Components.InoOption, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoOptionElementEventMap>(type: K, listener: (this: HTMLInoOptionElement, ev: InoOptionCustomEvent<HTMLInoOptionElementEventMap[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 HTMLInoOptionElementEventMap>(type: K, listener: (this: HTMLInoOptionElement, ev: InoOptionCustomEvent<HTMLInoOptionElementEventMap[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 HTMLInoOptionElement: {
        prototype: HTMLInoOptionElement;
        new (): HTMLInoOptionElement;
    };
    /**
     * A wrapper component to be used for a group of ino-options. This component adds a non-selectable header before the options.
     * Beyond that, if you encounter problems using React or Vue in conjunction with the `ino-select`, use this component as a wrapper around your `ino-option`. This way the virtual DOM will know when to update the `ino-select` and its children, which may otherwise not work properly if the options are added dynamically while deeply nested in the `ino-select'. For more information refer to [this issue](https://github.com/ionic-team/stencil/issues/2259).
     */
    interface HTMLInoOptionGroupElement extends Components.InoOptionGroup, HTMLStencilElement {
    }
    var HTMLInoOptionGroupElement: {
        prototype: HTMLInoOptionGroupElement;
        new (): HTMLInoOptionGroupElement;
    };
    interface HTMLInoPopoverElementEventMap {
        "visibleChanged": boolean;
    }
    /**
     * A Popover is a dialog which is bound to a specific element and appears next to it. Under the
     * hood, [tippy.js](https://atomiks.github.io/tippyjs/) is used.
     * The Popover
     * and [Tooltip](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-tooltip--default-usage)
     * components are very similar. However, popovers are complex dialogs consisting of several HTML elements, while tooltips
     * can only display plain text.
     */
    interface HTMLInoPopoverElement extends Components.InoPopover, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoPopoverElementEventMap>(type: K, listener: (this: HTMLInoPopoverElement, ev: InoPopoverCustomEvent<HTMLInoPopoverElementEventMap[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 HTMLInoPopoverElementEventMap>(type: K, listener: (this: HTMLInoPopoverElement, ev: InoPopoverCustomEvent<HTMLInoPopoverElementEventMap[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 HTMLInoPopoverElement: {
        prototype: HTMLInoPopoverElement;
        new (): HTMLInoPopoverElement;
    };
    /**
     * The `ino-progress-bar` is a linear progress bar based on the mdc-linear-progress component.
     */
    interface HTMLInoProgressBarElement extends Components.InoProgressBar, HTMLStencilElement {
    }
    var HTMLInoProgressBarElement: {
        prototype: HTMLInoProgressBarElement;
        new (): HTMLInoProgressBarElement;
    };
    interface HTMLInoRadioElementEventMap {
        "checkedChange": any;
    }
    /**
     * A radio component that allows the user to select an option from a set of radio-buttons. In order to have a single select functionality, please refer to the `ino-radio-group`-component. This component functions as a wrapper around the material [radio](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio) component.
     * #### Additional Hints
     * Clicking on the radio button triggers an event that contains the boolean value `true` (`e.detail`). This event is only triggered if the radio button was not previously selected (`checked=false`). In order to check one element and uncheck the other ones, please refer to the `ino-radio-group`-Component. If (`checked=true`) is passed to an element, the other elements **won't** be deselected without the use of the `ino-radio-group`.
     */
    interface HTMLInoRadioElement extends Components.InoRadio, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoRadioElementEventMap>(type: K, listener: (this: HTMLInoRadioElement, ev: InoRadioCustomEvent<HTMLInoRadioElementEventMap[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 HTMLInoRadioElementEventMap>(type: K, listener: (this: HTMLInoRadioElement, ev: InoRadioCustomEvent<HTMLInoRadioElementEventMap[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 HTMLInoRadioElement: {
        prototype: HTMLInoRadioElement;
        new (): HTMLInoRadioElement;
    };
    interface HTMLInoRadioGroupElementEventMap {
        "valueChange": number | string;
    }
    /**
     * A wrapper component to be used for a group of ino-radio-buttons. This component manages the single selection functionality of a group of ino-radio-buttons.
     */
    interface HTMLInoRadioGroupElement extends Components.InoRadioGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoRadioGroupElementEventMap>(type: K, listener: (this: HTMLInoRadioGroupElement, ev: InoRadioGroupCustomEvent<HTMLInoRadioGroupElementEventMap[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 HTMLInoRadioGroupElementEventMap>(type: K, listener: (this: HTMLInoRadioGroupElement, ev: InoRadioGroupCustomEvent<HTMLInoRadioGroupElementEventMap[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 HTMLInoRadioGroupElement: {
        prototype: HTMLInoRadioGroupElement;
        new (): HTMLInoRadioGroupElement;
    };
    interface HTMLInoRangeElementEventMap {
        "valueChange": number;
        "valueStartChange": number;
        "valueEndChange": number;
    }
    /**
     * A range component that allows the user select a number using a slider. It functions as a wrapper around the material [Slider](https://github.com/material-components/material-components-web/tree/master/packages/mdc-slider) component.
     */
    interface HTMLInoRangeElement extends Components.InoRange, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoRangeElementEventMap>(type: K, listener: (this: HTMLInoRangeElement, ev: InoRangeCustomEvent<HTMLInoRangeElementEventMap[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 HTMLInoRangeElementEventMap>(type: K, listener: (this: HTMLInoRangeElement, ev: InoRangeCustomEvent<HTMLInoRangeElementEventMap[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 HTMLInoRangeElement: {
        prototype: HTMLInoRangeElement;
        new (): HTMLInoRangeElement;
    };
    interface HTMLInoSegmentButtonElementEventMap {
        "checkedChange": any;
    }
    /**
     * A button component that can be used in combination with the ino-segment-group component.
     */
    interface HTMLInoSegmentButtonElement extends Components.InoSegmentButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoSegmentButtonElementEventMap>(type: K, listener: (this: HTMLInoSegmentButtonElement, ev: InoSegmentButtonCustomEvent<HTMLInoSegmentButtonElementEventMap[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 HTMLInoSegmentButtonElementEventMap>(type: K, listener: (this: HTMLInoSegmentButtonElement, ev: InoSegmentButtonCustomEvent<HTMLInoSegmentButtonElementEventMap[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 HTMLInoSegmentButtonElement: {
        prototype: HTMLInoSegmentButtonElement;
        new (): HTMLInoSegmentButtonElement;
    };
    interface HTMLInoSegmentGroupElementEventMap {
        "valueChange": any;
    }
    /**
     * A button group that can be used as an alternative to drop-down menus.
     */
    interface HTMLInoSegmentGroupElement extends Components.InoSegmentGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoSegmentGroupElementEventMap>(type: K, listener: (this: HTMLInoSegmentGroupElement, ev: InoSegmentGroupCustomEvent<HTMLInoSegmentGroupElementEventMap[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 HTMLInoSegmentGroupElementEventMap>(type: K, listener: (this: HTMLInoSegmentGroupElement, ev: InoSegmentGroupCustomEvent<HTMLInoSegmentGroupElementEventMap[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 HTMLInoSegmentGroupElement: {
        prototype: HTMLInoSegmentGroupElement;
        new (): HTMLInoSegmentGroupElement;
    };
    interface HTMLInoSelectElementEventMap {
        "valueChange": string;
    }
    /**
     * A component providing single-option select menus. It functions as a wrapper around the material design's [select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select) component.
     * #### Additional Hints
     * Use the custom `ino-option` component to add options to the select component. The `label` attribute sets an optional floating label for this element.
     */
    interface HTMLInoSelectElement extends Components.InoSelect, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoSelectElementEventMap>(type: K, listener: (this: HTMLInoSelectElement, ev: InoSelectCustomEvent<HTMLInoSelectElementEventMap[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 HTMLInoSelectElementEventMap>(type: K, listener: (this: HTMLInoSelectElement, ev: InoSelectCustomEvent<HTMLInoSelectElementEventMap[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 HTMLInoSelectElement: {
        prototype: HTMLInoSelectElement;
        new (): HTMLInoSelectElement;
    };
    interface HTMLInoSnackbarElementEventMap {
        "actionClick": any;
        "hideEl": any;
    }
    /**
     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
     */
    interface HTMLInoSnackbarElement extends Components.InoSnackbar, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoSnackbarElementEventMap>(type: K, listener: (this: HTMLInoSnackbarElement, ev: InoSnackbarCustomEvent<HTMLInoSnackbarElementEventMap[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 HTMLInoSnackbarElementEventMap>(type: K, listener: (this: HTMLInoSnackbarElement, ev: InoSnackbarCustomEvent<HTMLInoSnackbarElementEventMap[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 HTMLInoSnackbarElement: {
        prototype: HTMLInoSnackbarElement;
        new (): HTMLInoSnackbarElement;
    };
    /**
     * A component which displays a variety of spinners. Use spinners to show that the app is loading content or performing another process for which the user has to wait.
     * This component contains three different types of spinners animated with pure CSS. It mainly relies on [Spinkit](http://tobiasahlin.com/spinkit/) and may be extended in future with more types.
     */
    interface HTMLInoSpinnerElement extends Components.InoSpinner, HTMLStencilElement {
    }
    var HTMLInoSpinnerElement: {
        prototype: HTMLInoSpinnerElement;
        new (): HTMLInoSpinnerElement;
    };
    interface HTMLInoSwitchElementEventMap {
        "checkedChange": any;
    }
    /**
     * Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.
     */
    interface HTMLInoSwitchElement extends Components.InoSwitch, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoSwitchElementEventMap>(type: K, listener: (this: HTMLInoSwitchElement, ev: InoSwitchCustomEvent<HTMLInoSwitchElementEventMap[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 HTMLInoSwitchElementEventMap>(type: K, listener: (this: HTMLInoSwitchElement, ev: InoSwitchCustomEvent<HTMLInoSwitchElementEventMap[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 HTMLInoSwitchElement: {
        prototype: HTMLInoSwitchElement;
        new (): HTMLInoSwitchElement;
    };
    interface HTMLInoTabElementEventMap {
        "interacted": any;
    }
    /**
     * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. Each Tab governs the visibility of one group of content. It functions as a wrapper around the material [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab) component.
     */
    interface HTMLInoTabElement extends Components.InoTab, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoTabElementEventMap>(type: K, listener: (this: HTMLInoTabElement, ev: InoTabCustomEvent<HTMLInoTabElementEventMap[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 HTMLInoTabElementEventMap>(type: K, listener: (this: HTMLInoTabElement, ev: InoTabCustomEvent<HTMLInoTabElementEventMap[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 HTMLInoTabElement: {
        prototype: HTMLInoTabElement;
        new (): HTMLInoTabElement;
    };
    interface HTMLInoTabBarElementEventMap {
        "activeTabChange": number;
    }
    /**
     * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. The Tab Bar contains the Tab Scroller and Tab components. It functions as a wrapper around the material [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar) component.
     */
    interface HTMLInoTabBarElement extends Components.InoTabBar, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoTabBarElementEventMap>(type: K, listener: (this: HTMLInoTabBarElement, ev: InoTabBarCustomEvent<HTMLInoTabBarElementEventMap[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 HTMLInoTabBarElementEventMap>(type: K, listener: (this: HTMLInoTabBarElement, ev: InoTabBarCustomEvent<HTMLInoTabBarElementEventMap[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 HTMLInoTabBarElement: {
        prototype: HTMLInoTabBarElement;
        new (): HTMLInoTabBarElement;
    };
    interface HTMLInoTableElementEventMap {
        "sortChange": SortDirectionChangeDetails;
    }
    /**
     * The ino-table is a custom table used to display sets of data across multiple columns.
     * It currently supports different states (selected, active), sorting and loading indication.
     * > The component is based on the [mdc-data-table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table).
     */
    interface HTMLInoTableElement extends Components.InoTable, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoTableElementEventMap>(type: K, listener: (this: HTMLInoTableElement, ev: InoTableCustomEvent<HTMLInoTableElementEventMap[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 HTMLInoTableElementEventMap>(type: K, listener: (this: HTMLInoTableElement, ev: InoTableCustomEvent<HTMLInoTableElementEventMap[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 HTMLInoTableElement: {
        prototype: HTMLInoTableElement;
        new (): HTMLInoTableElement;
    };
    interface HTMLInoTableHeaderCellElementEventMap {
        "sortDirectionChange": SortDirectionChangeDetails;
        "searchFocusChange": boolean;
    }
    /**
     * The `ino-table-header-cell` is a particular header cell to provide search and column sort behaviour on `ino-table`'s.
     */
    interface HTMLInoTableHeaderCellElement extends Components.InoTableHeaderCell, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoTableHeaderCellElementEventMap>(type: K, listener: (this: HTMLInoTableHeaderCellElement, ev: InoTableHeaderCellCustomEvent<HTMLInoTableHeaderCellElementEventMap[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 HTMLInoTableHeaderCellElementEventMap>(type: K, listener: (this: HTMLInoTableHeaderCellElement, ev: InoTableHeaderCellCustomEvent<HTMLInoTableHeaderCellElementEventMap[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 HTMLInoTableHeaderCellElement: {
        prototype: HTMLInoTableHeaderCellElement;
        new (): HTMLInoTableHeaderCellElement;
    };
    interface HTMLInoTextareaElementEventMap {
        "inoBlur": void;
        "valueChange": string;
    }
    /**
     * A textarea component with styles. It uses a material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component for its styling.
     * > **Note:** The textarea is always styled in an outlined manner. If you need to use a textarea in combination with other form inputs (`ino-input`), use their respective outline style.
     */
    interface HTMLInoTextareaElement extends Components.InoTextarea, HTMLStencilElement {
        addEventListener<K extends keyof HTMLInoTextareaElementEventMap>(type: K, listener: (this: HTMLInoTextareaElement, ev: InoTextareaCustomEvent<HTMLInoTextareaElementEventMap[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 HTMLInoTextareaElementEventMap>(type: K, listener: (this: HTMLInoTextareaElement, ev: InoTextareaCustomEvent<HTMLInoTextareaElementEventMap[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 HTMLInoTextareaElement: {
        prototype: HTMLInoTextareaElement;
        new (): HTMLInoTextareaElement;
    };
    /**
     * A tooltip component that displays text when users hover over, focus on, or tap an element.
     * > Note: A tooltip can only display plain text. For more complex dialogs, see the [Popover](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-popover--default-usage) component.
     */
    interface HTMLInoTooltipElement extends Components.InoTooltip, HTMLStencilElement {
    }
    var HTMLInoTooltipElement: {
        prototype: HTMLInoTooltipElement;
        new (): HTMLInoTooltipElement;
    };
    interface HTMLElementTagNameMap {
        "ino-accordion": HTMLInoAccordionElement;
        "ino-autocomplete": HTMLInoAutocompleteElement;
        "ino-avatar": HTMLInoAvatarElement;
        "ino-button": HTMLInoButtonElement;
        "ino-card": HTMLInoCardElement;
        "ino-carousel": HTMLInoCarouselElement;
        "ino-carousel-slide": HTMLInoCarouselSlideElement;
        "ino-checkbox": HTMLInoCheckboxElement;
        "ino-chip": HTMLInoChipElement;
        "ino-control-item": HTMLInoControlItemElement;
        "ino-currency-input": HTMLInoCurrencyInputElement;
        "ino-datepicker": HTMLInoDatepickerElement;
        "ino-dialog": HTMLInoDialogElement;
        "ino-fab": HTMLInoFabElement;
        "ino-fab-set": HTMLInoFabSetElement;
        "ino-icon": HTMLInoIconElement;
        "ino-icon-button": HTMLInoIconButtonElement;
        "ino-img": HTMLInoImgElement;
        "ino-img-list": HTMLInoImgListElement;
        "ino-input": HTMLInoInputElement;
        "ino-input-file": HTMLInoInputFileElement;
        "ino-label": HTMLInoLabelElement;
        "ino-list": HTMLInoListElement;
        "ino-list-divider": HTMLInoListDividerElement;
        "ino-list-item": HTMLInoListItemElement;
        "ino-markdown-editor": HTMLInoMarkdownEditorElement;
        "ino-menu": HTMLInoMenuElement;
        "ino-nav-drawer": HTMLInoNavDrawerElement;
        "ino-nav-item": HTMLInoNavItemElement;
        "ino-option": HTMLInoOptionElement;
        "ino-option-group": HTMLInoOptionGroupElement;
        "ino-popover": HTMLInoPopoverElement;
        "ino-progress-bar": HTMLInoProgressBarElement;
        "ino-radio": HTMLInoRadioElement;
        "ino-radio-group": HTMLInoRadioGroupElement;
        "ino-range": HTMLInoRangeElement;
        "ino-segment-button": HTMLInoSegmentButtonElement;
        "ino-segment-group": HTMLInoSegmentGroupElement;
        "ino-select": HTMLInoSelectElement;
        "ino-snackbar": HTMLInoSnackbarElement;
        "ino-spinner": HTMLInoSpinnerElement;
        "ino-switch": HTMLInoSwitchElement;
        "ino-tab": HTMLInoTabElement;
        "ino-tab-bar": HTMLInoTabBarElement;
        "ino-table": HTMLInoTableElement;
        "ino-table-header-cell": HTMLInoTableHeaderCellElement;
        "ino-textarea": HTMLInoTextareaElement;
        "ino-tooltip": HTMLInoTooltipElement;
    }
}
declare namespace LocalJSX {
    interface InoAccordion {
        /**
          * The title of the accordion.
         */
        "accordionTitle"?: string;
        /**
          * Whether the accordion is expanded or collapsed.
         */
        "expanded"?: boolean;
        /**
          * Emits when the user clicks on the icon toggle to change the expanded state. Contains the status in `event.detail`.
         */
        "onExpandedChange"?: (event: InoAccordionCustomEvent<boolean>) => void;
    }
    /**
     * `ino-autocomplete` is a component that acts similarly to the native `datalist` feature of the `<input>` element.
     * Unlike other components, `ino-autocomplete` is stateful, meaning it maintains its own state. This makes it less
     * flexible to some extent compared to stateless components.
     * ## Responsibilities
     * The component handles the following tasks:
     * - Management of the `value` property of the `<ino-input>` element.
     * - Management of showing and hiding the different options based on the input.
     * - Keyboard navigation among the options.
     * ## Filtering
     * The options are filtered using `.includes(...)`, which ignores case sensitivity.
     */
    interface InoAutocomplete {
        /**
          * Number of ms the search function should be delayed after the user typed something.
         */
        "debounce"?: number;
        /**
          * Text to display when there are no options found, where `$` is the placeholder for the input of the user.
         */
        "noOptionsText"?: string;
        /**
          * Emits the list item the user clicked on either as a string or a `{key: string; value: string}` object depending on the provided options.  Trigger on two occasions: 1. The user clicked on a list-item. 2. The user types in a string that matches an option and blurs the input
         */
        "onValueChange"?: (event: InoAutocompleteCustomEvent<string | { key: string; value: string }>) => void;
        /**
          * All options either as a string array or as an array of `{key: string; value: string}` objects.
         */
        "options": string[] | KeyValue[];
        /**
          * The selected value.
         */
        "value"?: string | KeyValue | null;
    }
    interface InoAvatar {
        /**
          * The aria-label used for the avatar element. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role.
         */
        "a11yLabel"?: string;
        /**
          * The alternative text of the avatar image.
         */
        "alt"?: string;
        /**
          * Colors the border of the avatar in the secondary color.
         */
        "colorSecondary"?: boolean;
        /**
          * The initials of the avatar. Will be shown if no `src` is defined or `img` fails to load.
         */
        "initials"?: string;
        /**
          * Enables interactive visuals for the avatar by animating the border and a pointing cursor upon hovering the Element.
         */
        "interactive"?: boolean;
        /**
          * Overrides the avatar's loading animation behavior. When set to true, the loading animation is displayed indefinitely. When set to false, the avatar will not show any loading animations.  By default, the loading animation will be shown only while the image is being fetched.
         */
        "loading"?: boolean;
        /**
          * The img of the avatar.
         */
        "src"?: string;
        /**
          * The style variant of the avatar. Can be 'dashed' | 'solid'.
         */
        "variant"?: 'dashed' | 'solid';
    }
    /**
     * A button component with different styles and icon capability.
     */
    interface InoButton {
        /**
          * Sets the autofocus for this element.
         */
        "autoFocus"?: boolean;
        /**
          * Makes the button text and container slightly smaller.
         */
        "dense"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The form id this element origins to.
         */
        "form"?: string;
        /**
          * Shows an infinite loading spinner and prevents further clicks.
         */
        "loading"?: boolean;
        /**
          * The name of the element.
         */
        "name"?: string;
        /**
          * The type of this form.  Can either be `button`, `submit` or `reset`.
         */
        "type"?: ButtonType;
        /**
          * The button variant.  * **filled**: Contain actions that are important for your application. * **outlined**: Buttons with medium highlighting. They contain actions that are important but are not the main action in an app. * **text**: Typically used for less prominent actions, including those in dialogs and cards.
         */
        "variant"?: ButtonVariants;
    }
    /**
     * The ino-card is a flexible and extensible component. It features a header, content, and footer slot that can be used to
     * fully customize the appearance of the card.
     */
    interface InoCard {
        /**
          * Disables the hover effect if true
         */
        "disableElevation"?: boolean;
        /**
          * Selects the card and displays a check mark icon on top of the card
         */
        "selected"?: boolean;
    }
    /**
     * The `ino-carousel` component works in combination with the `ino-carousel-slide` component
     * and can be used to display an array of images as a slide show. What is more,
     * it also features an autoplay property that allows the slides to be changed automatically.
     * Lastly, using the css variables described at the bottom of the page, you can easily customize
     * the dimensions of the component as well as the duration of the slide transition.
     */
    interface InoCarousel {
        /**
          * Enables autoplay which causes slides to be changed automatically after `intermission` milliseconds.
         */
        "autoplay"?: boolean;
        /**
          * Hides the arrow buttons
         */
        "hideButtons"?: boolean;
        /**
          * Restarts playback from the first slide upon reaching the last slide
         */
        "infinite"?: boolean;
        /**
          * Sets the intermission between two slides (Unit: ms)
         */
        "intermission"?: number;
        /**
          * Emits the `value` of the slide that should be displayed after interaction or autoplay interval.
         */
        "onValueChange"?: (event: InoCarouselCustomEvent<string>) => void;
        /**
          * Enables reverse playback of the slides
         */
        "reverse"?: boolean;
        /**
          * `value` of the slide that should be displayed.
         */
        "value": string;
    }
    /**
     * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
     */
    interface InoCarouselSlide {
        /**
          * Selected state controlled by the `<ino-carousel>`
         */
        "selected"?: boolean;
        /**
          * Link to the image
         */
        "src"?: string;
        /**
          * Value of the slide
         */
        "value"?: string;
    }
    /**
     * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
     */
    interface InoCheckbox {
        /**
          * Marks this element as checked. (**unmanaged**)
         */
        "checked"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Marks this element as indeterminate. It indicates that a user is indeterminate without changing the checked state. If a checkbox is unchecked and indeterminate then it will lose the indeterminate state on click and change to checked. For more information, see [Documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes).
         */
        "indeterminate"?: boolean;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Emits when the user clicks on the checkbox to change the checked state. Contains the status in `event.detail`.
         */
        "onCheckedChange"?: (event: InoCheckboxCustomEvent<any>) => void;
        /**
          * Styles the checkbox as a selection variant that has a larger radius. While checkboxes are mainly used in lists, the selection should be used as a single, independent UI element. The indeterminate state is not supported here.
         */
        "selection"?: boolean;
        /**
          * The value of this element.
         */
        "value"?: string;
    }
    /**
     * The ino-chip component displays the provided content and icon as a chip.
     * Use the `label` attribute to set the label of the chip. To add an icon to the left side of the chip, use the `icon` attribute.
     * #### Additional Hints
     * **Content**: Utilize the `label` attribute to define the chip's label. Include an icon on the left side of the chip via the `icon` attribute.
     * **Selection**: Chips can be used for single or multi-selection among a few options. Refer to the **Selection** and **Filter** stories for examples.
     * **Removable Chips**: Set `removable` to `true` to allow chip removal by the user, which will display a `close` icon on the chip's right side. On removal, a `removeChip` event is emitted instead of hiding or destroying the component. Handle the removal process by listening to this event.
     */
    interface InoChip {
        /**
          * Marks this element as clickable and displays all interactions like hover-effects, click-effects, pointer-cursor,...
         */
        "clickable"?: boolean;
        /**
          * Disables all interactions.
         */
        "disabled"?: boolean;
        /**
          * The fill type of this element.
         */
        "fill"?: ChipSurface;
        /**
          * [DEPRECATED] Please use the default slot instead  The content of the component.
          * @deprecated
         */
        "label"?: string;
        /**
          * Event that emits the `value` as soon as the user clicks on the chip.
         */
        "onChipClicked"?: (event: InoChipCustomEvent<string>) => void;
        /**
          * Event that emits the `value` as soon as the user clicks on the remove icon.  Listen to this event to hide or destroy this chip.
         */
        "onChipRemoved"?: (event: InoChipCustomEvent<string>) => void;
        /**
          * Adds a close icon on the right side of this chip which emits the `removeChip` event on click.
         */
        "removable"?: boolean;
        /**
          * Makes the chip selectable.
         */
        "selectable"?: boolean;
        /**
          * Marks this element as selected (**works only in conjunction with `selectable`**)
         */
        "selected"?: boolean;
        /**
          * The value of this chip. Is emitted by the `chipClicked` and `chipRemoved` events.
         */
        "value"?: string;
    }
    /**
     * A list item component that displays a single instance of choice in a list or menu with a control element (radio-button or checkbox). It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     * #### Restrictions
     * Please note that only text is supported as a trailing element. However, your icons can be placed at the leading position. To do so, use the `trailing`-Property and declare your icon inside of the element
     */
    interface InoControlItem {
        /**
          * Styles the row in an activated style.  In contrast to `selected`, use this for only one item and to mark it as permanently activated.
         */
        "activated"?: boolean;
        /**
          * Marks this element as checked. (**unmanaged**)
         */
        "checked"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Marks this element as indeterminate (**unmanaged**) Checkbox only
         */
        "indeterminate"?: boolean;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Emits when the user clicks on the checkbox or the list item to change the checked state. Contains the status in `event.detail`.
         */
        "onCheckedChange"?: (event: InoControlItemCustomEvent<any>) => void;
        /**
          * The type of control element  Valid options are 'checkbox' or 'radio'
         */
        "role": string | null;
        /**
          * Sets the secondary text of this list item.  Requires `two-lines` on the parent `ino-list` element.
         */
        "secondaryText"?: string;
        /**
          * Styles the row in a selected style.  In contrast to `activated`, use this option to select one or multiple items that are likely to change soon.
         */
        "selected"?: boolean;
        /**
          * The primary text of this list item (required).
         */
        "text": string;
        /**
          * Places the checkbox at the end of the item
         */
        "trailing"?: boolean;
        /**
          * The value of this element.
         */
        "value"?: string;
    }
    /**
     * A component providing currency functionality by extending a `ino-input`. Main objectives of this component are the separatation of formatted currency values from its numeric values and to handle different currency locales.
     * The `ino-currency-input` controls an underlying `ino-input` and evaluates its value on blur. While the `ino-input` has the textual user input as value, the `ino-currency-input` provides a numeric value of the currency. In theory, you can use all `ino-input` properties. However, properties like maxlength, step, etc. make no sense for currency inputs and are thus not supported.
     * #### Additional Hints
     * The currency input uses a native number formatter which supports a vary of different locales (see [Documentation](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)). On a component level, you can provide any supported locale via the `currency-locale` attribute.
     * However, it may be useful to define a global locale for currencies, This may even differ from the application's locale, for instance a Belgian application may use English as language but the German currency format. For this reason, you can provide the `currencyLocale` option on the global configuration.
     */
    interface InoCurrencyInput {
        /**
          * A supported locale for currency number formatting. If not given, it uses the global config. See https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
         */
        "currencyLocale"?: string;
        /**
          * Emits when the user types something in. Contains typed input in `event.detail`
         */
        "onValueChange"?: (event: InoCurrencyInputCustomEvent<number>) => void;
        /**
          * Numeric currency value
         */
        "value"?: number | string;
    }
    /**
     * A datepicker is a ui component to select dates and times. It behaves like a native `input` but uses the [flatpickr](https://github.com/flatpickr/flatpickr) library for a better ui experience.
     * #### Types
     * This datepicker can be used as a picker for different types:
     * - date
     * - time
     * - datetime
     * - month
     */
    interface InoDatepicker {
        /**
          * Optional id of an element to append the datepicker to. Default is:  * the host element for inline pickers  * body for collapsable pickers
         */
        "appendTo"?: string;
        /**
          * Attach calendar overlay to body (true) or Position the calendar inside the wrapper and inside the ino-datepicker (false)
         */
        "attachToBody"?: boolean;
        /**
          * Autofocuses this element.
         */
        "autoFocus"?: boolean;
        /**
          * A string to change the date format. Possible values are listed [here](https://flatpickr.js.org/formatting/). The default value is `d-m-Y` which accepts values like `01-01-2019`.
         */
        "dateFormat"?: string;
        /**
          * A string/array containing the initial date of the datepicker overlay. If you're using `inoRange = true` provide an array. If a `value` is given, this will be ignored.
         */
        "defaultDate"?: string | string[];
        /**
          * A number containing the initial hour in the date-time picker overlay. If a `value` is given, this will be ignored.
         */
        "defaultHour"?: number;
        /**
          * A number containing the initial minute in the date-time picker overlay. If a `value` is given, this will be ignored.
         */
        "defaultMinute"?: number;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Displays the datepicker as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
         */
        "error"?: boolean;
        /**
          * The helper text.
         */
        "helper"?: string;
        /**
          * Displays the helper permanently.
         */
        "helperPersistent"?: boolean;
        /**
          * Styles the helper text as a validation message.
         */
        "helperValidation"?: boolean;
        /**
          * Adjusts the step for the hour input (incl. scrolling) Default is 1
         */
        "hourStep"?: number;
        /**
          * Displays the datepicker inlined.
         */
        "inline"?: boolean;
        /**
          * Defines the label for this element.
         */
        "label"?: string;
        /**
          * The maximum date that a user can pick to (inclusive).
         */
        "max"?: string;
        /**
          * The minimum date that a user can start picking from (inclusive).
         */
        "min"?: string;
        /**
          * Adjusts the step for the minute input (incl. scrolling) Default is 5
         */
        "minuteStep"?: number;
        /**
          * The input name of this element.
         */
        "name"?: string;
        /**
          * Emits when the value of the datepicker changes. The value can be found in `event.detail`
         */
        "onValueChange"?: (event: InoDatepickerCustomEvent<string>) => void;
        /**
          * Styles the datepicker as outlined element.
         */
        "outline"?: boolean;
        /**
          * The placeholder of the input element.
         */
        "placeholder"?: string;
        /**
          * If true, enables the user to choose two dates as an interval. Only works with `type="date"`
         */
        "range"?: boolean;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required
         */
        "showLabelHint"?: boolean;
        /**
          * If true, displays time picker in 12 hour mode with AM/PM selection.
         */
        "twelveHourTime"?: boolean;
        /**
          * Selects the correct picker corresponding to the given type.
         */
        "type"?: PickerTypeKeys;
        /**
          * The currently selected date shown in the input field **unmanaged**. The given value will not be formatted as date.
         */
        "value"?: string;
    }
    /**
     * The ino-dialog component displays a modal window that can be used to display additional information or notify the user.
     * It is based on the mdc-dialog and is fully customizable. The styling of a dialog's content must be provided by users.
     * #### Usage Notes
     * - **Child Component Layout Issues**: If elements like ripples or labels in the `ino-dialog` are mispositioned or incorrectly sized, it may indicate that child components are being rendered before the dialog is fully open.
     * - **Rendering After Dialog Opens**: To prevent layout issues, render sensitive child components (e.g. `ino-icon-button`) only after the `dialogOpen` event has fired.
     */
    interface InoDialog {
        /**
          * Adds a button with the given text to proceed with an action
         */
        "actionText"?: string;
        /**
          * The target element the dialog should be attached to. If not given, the dialog is a child of the documents body. Note: This property is immutable after initialization.
         */
        "attachTo"?: string;
        /**
          * Adds a text to the body of the `ino-dialog`
         */
        "bodyText"?: string;
        /**
          * Adds a button with the given text to close the `ino-dialog`
         */
        "cancelText"?: string;
        /**
          * Adds a close icon in the top right corner to close the `ino-dialog`.
         */
        "closeIcon"?: boolean;
        /**
          * The role of the dialog. Can be either 'dialog' or 'alertdialog'. The 'alertdialog' role should be used for important alerts and error messages.
         */
        "dialogRole"?: 'dialog' | 'alertdialog';
        /**
          * Close the dialog by clicking outside of the dialog.
         */
        "dismissible"?: boolean;
        /**
          * Defines a full width dialog sliding up from the bottom of the page.
         */
        "fullwidth"?: boolean;
        /**
          * Adds a headline to the `ino-dialog`
         */
        "headerText"?: string;
        /**
          * Adds a `ino-icon` besides the headline
         */
        "icon"?: string;
        /**
          * Emits an event upon clicking the action button of the dialog
         */
        "onAction"?: (event: InoDialogCustomEvent<DialogSubmitAction>) => void;
        /**
          * Emits an event upon closing the dialog
         */
        "onClose"?: (event: InoDialogCustomEvent<DialogCloseAction>) => void;
        /**
          * Emits an event when the dialog is opened.
         */
        "onDialogOpen"?: (event: InoDialogCustomEvent<void>) => void;
        /**
          * Opens the dialog if set to true
         */
        "open"?: boolean;
    }
    /**
     * A floating action button represents the primary action in an application. [Floating Action Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab) component.
     * It appears in front of all screen content, typically as a circular shape with an icon in its center.
     * FABs come in three types: regular, mini, and extended
     * #### Additional Hints
     * **Content**: Use the  label` attribute to set the text of a fab. To add an icon, use the  icon` attribute.
     */
    interface InoFab {
        /**
          * Disables the button.
         */
        "disabled"?: boolean;
        /**
          * The position of the edge.
         */
        "edgePosition"?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
        /**
          * Optional, modifies the FAB to wider size which includes a text label.
         */
        "extended"?: boolean;
        /**
          * Adds an icon to the Fab.
          * @deprecated This property is deprecated and will be removed with the next major release. Instead, use the `icon-leading` slot.
         */
        "icon"?: string;
        /**
          * Optional, for the text label. Applicable only for Extended FAB.
         */
        "label"?: string;
        /**
          * Optional, modifies the FAB to a smaller size
         */
        "mini"?: boolean;
        /**
          * The placement of the tooltip which will be displayed when the button is not extended. Use `none`, if you don't want a tooltip to be displayed.
         */
        "tooltipPlacement"?: Placement | 'none';
    }
    /**
     * The ino-fab-set component serves as a container for multiple fab buttons. It contains actions related to the main fab
     * button. Upon interacting with the fab button, a FAB-Set can display three to six related actions in the form of a speed
     * dial.
     * #### Additional Hints
     * **Content**: Put the FABs for the speed dial inside of `ino-fab-set` as `ino-fab`.
     * #### Control flow
     * The ino-fab-set has a controlled (unmanaged) attribute `openDial`. For this reason, listen to `click` events, sync to
     * your local state and pass the state to the component again to open/close the fab-set.
     */
    interface InoFabSet {
        /**
          * The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`.
         */
        "dialDirection"?: Locations;
        /**
          * The side where the Fab is displayed. Possible values: `right`, `left` (default).
         */
        "leftRightLocation"?: HorizontalLocation;
        /**
          * Opens the dial (**uncontrolled**)
         */
        "openDial"?: boolean;
        /**
          * The side where the Fab is displayed. Possible values: `top`, `bottom` (default).
         */
        "topBottomLocation"?: VerticalLocation;
    }
    /**
     * A light icon component for texts and other components.
     * This component is based on the ionicons (https://github.com/ionic-team/ionicons)
     * #### Additional Hints
     * The component inherits styles, such as the text size, from the parent element. For custom styles, use the css properties of the component.
     * **Clickable icon:** Make an icon interactive with the optional attribute `clickable`. Clickable icons emit a `clickEl` event.
     * #### Add icons
     * If you would like to add custom icons, you have to add the `.svg` file to the `src/assets/ino-icon` folder and run the `yarn integrate:icons` script which takes care of the rest.
     * > **Note:** To use the provided icons in your consumer project, you need to copy all contents of
     * > `node_modules/@inovex.de/elements/dist/inovex-elements/ino-icon` into your `dist/ino-icon` folder. All icons are expected
     * > to be located in `ino-icon/` at runtime. Please refer to the Storybook documentation to get detailed instructions
     * > on how to integrate the icons with Angular, React or plain JavaScript.
     * Alternatively, you can also just provide the URL to your preferred icon by setting the `src` property accordingly.
     */
    interface InoIcon {
        /**
          * Makes the icon clickable and allows to listen to the `clickEl` event.
         */
        "clickable"?: boolean;
        /**
          * Colors the icon in the global secondary color
         */
        "colorSecondary"?: boolean;
        /**
          * The name of the icon of this element or an URL.
         */
        "icon"?: string;
        /**
          * Event that emits as soon as the user clicks on the icon. The event only emits if the property `inoClickable` is true.
         */
        "onClickEl"?: (event: InoIconCustomEvent<any>) => void;
        /**
          * Specifies the exact `src` of an SVG file to use.
         */
        "src"?: string;
        /**
          * Sets a meaningful svg title for assistive technologies.
         */
        "svgTitle"?: string;
    }
    /**
     * A rounded button component that contains an icon. It functions as a wrapper around the material [icon-button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button) component.
     * ## Additional Hints
     * **Toggle Button**: To use the ino-icon-button as a toggle button the user can listen to the native `click`-Event and change the icon in the `icon`-Attribute.
     */
    interface InoIconButton {
        /**
          * Marks the icon button as activated.  Useful in cases where an external state controls the icon button activation. Makes the component **managed**.
         */
        "activated"?: boolean;
        /**
          * Allows the specification of native HTML attributes on the underlying HTML element
         */
        "attrs"?: JSXBase.HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>;
        /**
          * Sets the autofocus for this element.
         */
        "autoFocus"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Styles this element as filled icon button with the `ino-color-scheme` as background color.
         */
        "filled"?: boolean;
        /**
          * The name of the icon of this element.
         */
        "icon"?: string;
        /**
          * Event that emits as soon as the user clicks on the icon. The event only emits if the property `clickable` is true.
         */
        "onClickEl"?: (event: InoIconButtonCustomEvent<any>) => void;
        /**
          * The type of this form.  Can either be `button`, `submit` or `reset`.
         */
        "type"?: ButtonType;
    }
    /**
     * An image component with different styles that reserves a predefined space to avoid jumping contents.
     */
    interface InoImg {
        /**
          * The alternative text of this image.
         */
        "alt"?: string;
        /**
          * The decoding method of the native html input element. Can either be `async`, `auto` or `sync`.
         */
        "decoding"?: ImageDecodingTypes;
        /**
          * Icon used for fallback image if image can not be loaded
         */
        "fallbackIcon"?: string;
        /**
          * The fixed height of this image.
         */
        "height"?: number;
        /**
          * Indicates that the image is a part of an image list component
         */
        "imgListItem"?: boolean;
        /**
          * Sets the label of the image. Note: Only works if image is part of an ino-img-list component.
         */
        "label"?: string;
        /**
          * The ratio height for this image (default = 1). Use this attribute together with `ratio-width` to reserve a space for the image during rendering and to prevent jumping contents.
         */
        "ratioHeight"?: number;
        /**
          * The ratio width of this image (default = 1). Use this attribute together with `ratio-height` to reserve a space for the image during rendering and to prevent jumping contents.
         */
        "ratioWidth"?: number;
        /**
          * If true, styles the image with rounded borders.
         */
        "rounded"?: boolean;
        /**
          * A set of rules to specify the usage of images sources that are defined in the `srcset` attribute.
         */
        "sizes"?: string;
        /**
          * The source of this image element.
         */
        "src"?: string;
        /**
          * A set of sources of this image for different viewports or devices.
         */
        "srcset"?: string;
        /**
          * An ID referencing to a defined map element for this image.
         */
        "usemap"?: string;
        /**
          * The fixed of the image.
         */
        "width"?: number;
    }
    /**
     * The ino-img-list component is used in combination with the ino-img component to display an array of images
     * in a grid-like format. It is based on the mdc-image-list component.
     */
    interface InoImgList {
        /**
          * Encapsulates the label of all img-list-items within the image
         */
        "encloseLabel"?: boolean;
        /**
          * Enables the masonry image list variant, which allows the images to be any combination of aspect ratios.
         */
        "masonry"?: boolean;
    }
    /**
     * An input component with styles. It functions as a wrapper around the material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component.
     * Use this element for **simple types** like `text`, `password`, `number` or `email`. For more complex types, there are elements like a [Radio Button](../ino-radio), a [Checkbox](../ino-checkbox), a [Datepicker](../ino-datepicker) and many more.
     */
    interface InoInput {
        /**
          * The autofocus of this element.
         */
        "autoFocus"?: boolean;
        /**
          * The autocomplete property of this element.
         */
        "autocomplete"?: string;
        /**
          * The id of the datalist child
         */
        "dataList"?: string;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Displays the input field as invalid if set to true. If the property is not set or set to false, the validation is handled by the `pattern` property. This functionality might be useful if the input validation is (additionally) handled by the backend.
         */
        "error"?: boolean;
        /**
          * The optional helper text.
         */
        "helper"?: string;
        /**
          * Displays the number of characters. The maxlength-property must be set. This helper text will be displayed persistently.
         */
        "helperCharacterCounter"?: boolean;
        /**
          * Displays the helper permanently.
         */
        "helperPersistent"?: boolean;
        /**
          * Styles the helper text as a validation message.
         */
        "helperValidation"?: boolean;
        /**
          * The optional floating label of this input field.
         */
        "label"?: string;
        /**
          * The max value of this element.
         */
        "max"?: string;
        /**
          * Limits the number of possible characters to the given number
         */
        "maxlength"?: number;
        /**
          * The min value of this element.
         */
        "min"?: string;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Emits when the input field is blurred and validates email input
         */
        "onInoBlur"?: (event: InoInputCustomEvent<void>) => void;
        /**
          * Emits when the input field is focused
         */
        "onInoFocus"?: (event: InoInputCustomEvent<void>) => void;
        /**
          * Emits when the user types something in. Contains typed input in `event.detail`
         */
        "onValueChange"?: (event: InoInputCustomEvent<string>) => void;
        /**
          * Styles the input field as outlined element.  This property is immutable which means that it should not be changed after its first initialization. Changing this property at runtime causes problems in combination with the floating label. You can read more about this issue [here](https://github.com/inovex/elements/issues/1216).
         */
        "outline"?: boolean;
        /**
          * The validation pattern of this element.
         */
        "pattern"?: string;
        /**
          * The placeholder of this element.
         */
        "placeholder"?: string;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required
         */
        "showLabelHint"?: boolean;
        /**
          * The step value of this element. Use `any` for decimal numbers
         */
        "step"?: number | 'any';
        /**
          * The type of this element (default = text).
         */
        "type"?: InputType;
        /**
          * Displays the given unit at the end of the input field.
         */
        "unit"?: string;
        /**
          * The value of this element. (**unmanaged**)
         */
        "value"?: string;
    }
    /**
     * An input component for files. It functions as a wrapper around the native input capabilities having the [`type="file"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file).
     * This component replaces the native behaviour with a custom `ino-button` with logic.
     */
    interface InoInputFile {
        /**
          * The types of files accepted by the server.
         */
        "accept"?: string;
        /**
          * The autofocus of this element.
         */
        "autoFocus"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Enables drag-and-drop file input
         */
        "dragAndDrop"?: boolean;
        /**
          * Sets the secondary text of the drag and drop window
         */
        "dragAndDropSecondaryText"?: string;
        /**
          * Sets the primary text of the drag and drop window
         */
        "dragAndDropText"?: string;
        /**
          * Sets the label of the select files button.
         */
        "label"?: string;
        /**
          * Indicates whether the user can enter one or more values.
         */
        "multiple"?: boolean;
        /**
          * The name of this input field.
         */
        "name"?: string;
        /**
          * Emits when the value changes.
         */
        "onChangeFile"?: (event: InoInputFileCustomEvent<{
    e: any;
    files: File[];
  }>) => void;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
    }
    /**
     * This is an internally used component for various sorts of inputs like `ino-input`, `ino-select` and `ino-textarea`. It is used to display the label for each respective component.
     */
    interface InoLabel {
        /**
          * Colors the label in an light grey to indicate the disabled status for this element
         */
        "disabled"?: boolean;
        /**
          * Id of the associated form control
         */
        "for"?: string;
        /**
          * Styles the label in an outlined style
         */
        "outline"?: boolean;
        /**
          * Appends * to the label to make it appear as an required input in a form
         */
        "required"?: boolean;
        /**
          * Shows a "optional" message, when not `required`; Shows a * mark, when `required`
         */
        "showHint"?: boolean;
        /**
          * The text of the label itself
         */
        "text"?: string;
    }
    /**
     * A component that displays a list of choices. It functions as a wrapper around the material [list](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) component.
     * This component is a composer to configure and wrap `list-item`s, `list-divider`s, `control-item`s and `nav-item`s.
     * #### Additional Hints
     * Provide `two-lines` to set proper style attributes for list items having a primary and secondary line.
     */
    interface InoList {
        /**
          * Configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger.
         */
        "avatar"?: boolean;
        /**
          * Styles the list more dense, making it appear more compact.
         */
        "dense"?: boolean;
        /**
          * Marks this element as list with items having two lines.
         */
        "twoLines"?: boolean;
    }
    /**
     * A list divider component that either divides two lists or list items. It functions as a wrapper around the material [list divider](https://github.com/material-components/material-components-web/blob/master/packages/mdc-divider/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     */
    interface InoListDivider {
        /**
          * Marks the divider as a separator between two `ino-list` instead of `ino-list-item` elements.
         */
        "betweenLists"?: boolean;
        /**
          * Increases leading margin to match leading column in `ino-list-item`.  Only applicable if `betweenList` is `false`.
         */
        "inset"?: boolean;
        /**
          * Increases margin on each side of the divider to match meta content in `ino-list-item`.  Only applicable if `betweenList` is `false`.
         */
        "padded"?: boolean;
    }
    /**
     * A list item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     */
    interface InoListItem {
        /**
          * Styles the row in an activated style.  In contrast to `selected`, use this for only one item and to mark it as permantently activated.
         */
        "activated"?: boolean;
        /**
          * Allows the specification of native HTML attributes on the underlying HTML element
         */
        "attrs"?: JSXBase.HTMLAttributes<HTMLLIElement>;
        /**
          * Styles the row in a disabled style.
         */
        "disabled"?: boolean;
        /**
          * Emits when the list item is clicked or the enter/space key if pressed while the item is in focus. Contains the element itself in `event.detail`
         */
        "onClickEl"?: (event: InoListItemCustomEvent<any>) => void;
        /**
          * Sets the secondary text of this list item.  Requires `two-lines` on the parent `ino-list` element.
         */
        "secondaryText"?: string;
        /**
          * Styles the row in a selected style.  In contrast to `activated`, use this option to select one or multiple items that are likely to change soon.
         */
        "selected"?: boolean;
        /**
          * The primary text of this list item.
         */
        "text"?: string;
    }
    /**
     * The **Preview Mode** supports following actions:
     * | Actions ||||
     * |---|
     * | Link | Blockquotes | Unordered list / Bullet list | Headline 1 |
     * | Italic | Strikethrough | Ordered list / Numbered  list | Headline 2 |
     * | Bold | Inline code | Task list |
     * Additionally, there are a lot of predefined
     * [keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)
     * provided by the underlying [tiptap](https://tiptap.dev/) editor.
     * The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:
     *  * Support of strikethrough syntax (`~~TextToStrike~~`)
     *  * Support of task list syntax (`- [x] MyToDoTask`)
     *  * No support of image syntax. __Images are not allowed!__
     * ### Font Size Scaling
     * The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
     * #### Base Font Size Variable
     * `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
     * #### Scaling Factors
     * | Element | Scaling Factor | Calculated Size (Example) |
     * |---------|----------------|---------------------------|
     * | Base Font Size | 1x | Base size (e.g., 16px) |
     * | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
     * | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
     */
    interface InoMarkdownEditor {
        /**
          * Initial `string` value of the markdown editor. Reassigning this value do not change the editor state. The value must contain a valid Markdown syntax.
         */
        "initialValue"?: string;
        /**
          * Emits when the ino-markdown-editor is blurred
         */
        "onInoBlur"?: (event: InoMarkdownEditorCustomEvent<void>) => void;
        /**
          * Emits when the value of the markdown editor **blurs**. The value of type `string` can be found in `event.detail`
         */
        "onValueChange"?: (event: InoMarkdownEditorCustomEvent<string>) => void;
        /**
          * Emits when one of the view mode buttons was clicked. The value of type `ViewMode` can be found in `event.detail`
         */
        "onViewModeChange"?: (event: InoMarkdownEditorCustomEvent<ViewModeUnion>) => void;
        /**
          * Sets the view mode of the editor. Can be changed between `preview` (default), `markdown` and `readonly`. The `markdown` mode is made for advanced users that know the Markdown syntax.
         */
        "viewMode"?: ViewModeUnion;
    }
    /**
     * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
     * The anchor element is the parent element.
     * The menu items consist of different variations of the `ino-list-item` component.
     * If you need a more customizable menu with a different type of elements or functionalities, have a look at the `ino-popover`.
     */
    interface InoMenu {
        /**
          * Determines the position of the opened menu. Usually, the default value (`auto`) will work just fine. Use this if the positioning is off for some reason.
         */
        "placement"?: Placement;
    }
    /**
     * A navigation drawer component designed to organize and facilitate user navigation in your app.
     * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
     * Usage Note:
     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
     */
    interface InoNavDrawer {
        /**
          * The aria-labels used for content and footer nav elements. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role.
         */
        "a11yLabels"?: NavDrawerLabels;
        /**
          * Side from which the drawer will appear. Possible values: `left` (default), `right`.
         */
        "anchor"?: NavDrawerAnchor;
        /**
          * Emits when the user clicks on the drawer toggle icon to change the open state. Contains the status in `event.detail`.
         */
        "onOpenChange"?: (event: InoNavDrawerCustomEvent<boolean>) => void;
        /**
          * Marks this element as open. (**unmanaged**)
         */
        "open"?: boolean;
        /**
          * The variant to use for the drawer.
         */
        "variant"?: NavDrawerVariant;
    }
    /**
     * A nav item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
     * This component is used as child of `ino-list` and `ino-menu` components.
     * > Note: This component's main use case is within the `ino-nav-drawer`.
     */
    interface InoNavItem {
        /**
          * Styles the row in an activated style.  Use this for only one item and to mark it as permanently activated.
         */
        "activated"?: boolean;
        /**
          * Styles the row in a disabled style.
         */
        "disabled"?: boolean;
        /**
          * The secondary text of this list item used in a two-lined list.
         */
        "subText"?: string;
        /**
          * The text of this list item.
         */
        "text"?: string;
    }
    /**
     * An option component that can be used to add options to an ino-select component.
     */
    interface InoOption {
        /**
          * Disables the option
         */
        "disabled"?: boolean;
        /**
          * Emits on option click
         */
        "onClickEl"?: (event: InoOptionCustomEvent<HTMLInoOptionElement>) => void;
        /**
          * Selects the option
         */
        "selected"?: boolean;
        /**
          * Value of the option
         */
        "value": string;
    }
    /**
     * A wrapper component to be used for a group of ino-options. This component adds a non-selectable header before the options.
     * Beyond that, if you encounter problems using React or Vue in conjunction with the `ino-select`, use this component as a wrapper around your `ino-option`. This way the virtual DOM will know when to update the `ino-select` and its children, which may otherwise not work properly if the options are added dynamically while deeply nested in the `ino-select'. For more information refer to [this issue](https://github.com/ionic-team/stencil/issues/2259).
     */
    interface InoOptionGroup {
        /**
          * Label of the group. If not set, this component serves as a wrapper component for dynamically added `ino-options`. When using react and vue, an issue exists with slots and the virtual DOM. Read more about it [here](https://github.com/ionic-team/stencil/issues/2259).
         */
        "label"?: string;
    }
    /**
     * A Popover is a dialog which is bound to a specific element and appears next to it. Under the
     * hood, [tippy.js](https://atomiks.github.io/tippyjs/) is used.
     * The Popover
     * and [Tooltip](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-tooltip--default-usage)
     * components are very similar. However, popovers are complex dialogs consisting of several HTML elements, while tooltips
     * can only display plain text.
     */
    interface InoPopover {
        /**
          * Shows an arrow pointing towards its trigger-element
         */
        "arrow"?: boolean;
        /**
          * If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues.
         */
        "attachToBody"?: boolean;
        /**
          * Sets the color scheme of the popup.  Valid options include: `primary`, `light` and `dark`.
         */
        "colorScheme"?: TippyThemes;
        /**
          * Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`)
         */
        "controlled"?: boolean;
        /**
          * The delay in milliseconds before `ino-popover` shows up or hides.  If only one number is given, the show and hide delay get the given delay duration.  If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.  Defaults to 0ms.
         */
        "delay"?: number | [number, number];
        /**
          * Displaces the popover away from, or toward, the anchor element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the anchor.
         */
        "distance"?: number;
        /**
          * Determines if and how the popover follows the user's mouse cursor.
         */
        "followCursor"?: Props['followCursor'];
        /**
          * The target id the popover belongs to. If not given, the popover is attached to the element provided in the named slot (`popover-trigger`) or the parent component if a slot element does not exist.
         */
        "for"?: string;
        /**
          * If true, hides the popper on blur.
         */
        "hideOnBlur"?: boolean;
        /**
          * If true, hides the popper on esc.
         */
        "hideOnEsc"?: boolean;
        /**
          * Use this if you want to interact with the popover content (e.g. button clicks)
         */
        "interactive"?: boolean;
        /**
          * Emits when the popover wants to show (`true`) or hide (`false`) itself. This is depended on the `trigger` property. Use this event in controlled-mode (see `controlled`).  e.g.: `trigger = 'click'` - This events emits with `true` when the user clicks on the target (slot/`for`/parent-element) and emits with `false` when the target or the outside is clicked.
         */
        "onVisibleChanged"?: (event: InoPopoverCustomEvent<boolean>) => void;
        /**
          * The placement of this popover. Accepted values: `top(-start, -end)`, `right(-start, -end)`, `bottom(-start, -end)`, `left(-start, -end)`
         */
        "placement"?: Placement;
        /**
          * The trigger to show the tooltip - either click, hover or focus. Multiple triggers are possible by separating them with a space.
         */
        "trigger"?: Exclude<TooltipTrigger, 'manual'>;
        /**
          * Programmatically show or hide the popover. Can only be used in controlled mode (see property `controlled`). Use the `visibleChanged` to sync the popovers' visibility state with yours.
         */
        "visible"?: boolean;
    }
    /**
     * The `ino-progress-bar` is a linear progress bar based on the mdc-linear-progress component.
     */
    interface InoProgressBar {
        /**
          * Sets the buffer progress
         */
        "buffer"?: number;
        /**
          * Indicates whether the state of the progress bar is indeterminate
         */
        "indeterminate"?: boolean;
        /**
          * Sets the label of the progress bar
         */
        "label"?: string;
        /**
          * Sets the progress of the progress bar. Should always be between 0 and 1
         */
        "progress"?: number;
    }
    /**
     * A radio component that allows the user to select an option from a set of radio-buttons. In order to have a single select functionality, please refer to the `ino-radio-group`-component. This component functions as a wrapper around the material [radio](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio) component.
     * #### Additional Hints
     * Clicking on the radio button triggers an event that contains the boolean value `true` (`e.detail`). This event is only triggered if the radio button was not previously selected (`checked=false`). In order to check one element and uncheck the other ones, please refer to the `ino-radio-group`-Component. If (`checked=true`) is passed to an element, the other elements **won't** be deselected without the use of the `ino-radio-group`.
     */
    interface InoRadio {
        /**
          * Initially marks this element as checked. If another ino-radio element in the same group receives `true`, the value will be changed to false automatically.
         */
        "checked"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The name of this element. Use the same name for radio groups
         */
        "name"?: string;
        /**
          * Emits when the user interacts with the radio-button. Contains `true` in `event.detail`. This event will only be emitted if the current state of the radio button is false.
         */
        "onCheckedChange"?: (event: InoRadioCustomEvent<any>) => void;
        /**
          * The value of this element.
         */
        "value"?: string;
    }
    /**
     * A wrapper component to be used for a group of ino-radio-buttons. This component manages the single selection functionality of a group of ino-radio-buttons.
     */
    interface InoRadioGroup {
        /**
          * Sets the alignment of the radios to either vertical or horizontal.
         */
        "alignment"?: Alignment;
        /**
          * Emits if the user clicks or navigates (via keyboard) to a `<ino-radio>` element within the radio group. Contains the `value` of the selected `<ino-radio>`.
         */
        "onValueChange"?: (event: InoRadioGroupCustomEvent<number | string>) => void;
        /**
          * The value of the radio group. If there is an ino-radio child with the given value, the radio-button will be checked and the other radio-buttons unchecked.
         */
        "value"?: string | number | null;
    }
    /**
     * A range component that allows the user select a number using a slider. It functions as a wrapper around the material [Slider](https://github.com/material-components/material-components-web/tree/master/packages/mdc-slider) component.
     */
    interface InoRange {
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Restricts the slider to only allow discrete values.
         */
        "discrete"?: boolean;
        /**
          * Mark this slider to show the steps of the range. Only applicable if `discrete` is enabled.
         */
        "markers"?: boolean;
        /**
          * The max value of this element (**required**).
         */
        "max"?: number;
        /**
          * The min value of this element.
         */
        "min"?: number;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Emits when the value changes (not in ranged mode).
         */
        "onValueChange"?: (event: InoRangeCustomEvent<number>) => void;
        /**
          * Emits when the end (right) value of the interval changes (in ranged mode).
         */
        "onValueEndChange"?: (event: InoRangeCustomEvent<number>) => void;
        /**
          * Emits when the start (left) value of the interval changes (in ranged mode).
         */
        "onValueStartChange"?: (event: InoRangeCustomEvent<number>) => void;
        /**
          * Allows to input an interval. Use `valueStart` and `valueEnd` to provide values.
         */
        "ranged"?: boolean;
        /**
          * The step size for this element. Only applicable if `discrete` is enabled. Is used to calculate the number of markers.
         */
        "step"?: number;
        /**
          * The value of this element. Only applicable if not in ranged mode.
         */
        "value"?: number;
        /**
          * The value of the right thumb. Only applicable in ranged mode.
         */
        "valueEnd"?: number;
        /**
          * The value of the left thumb. Only applicable in ranged mode.
         */
        "valueStart"?: number;
    }
    /**
     * A button component that can be used in combination with the ino-segment-group component.
     */
    interface InoSegmentButton {
        /**
          * Activates the button
         */
        "checked"?: boolean;
        /**
          * Slightly decreases the size of the button
         */
        "dense"?: boolean;
        /**
          * Disables the button
         */
        "disabled"?: boolean;
        /**
          * Name of the element
         */
        "name"?: string;
        /**
          * Emits if the user interacts with the button. If the button is disabled or checked, the event will not be emitted.
         */
        "onCheckedChange"?: (event: InoSegmentButtonCustomEvent<any>) => void;
        /**
          * The type of the internal button in the element. This can be 'submit', 'reset', or 'button'. If not specified, the default type is 'submit'.
         */
        "type"?: string;
        /**
          * Value of the element
         */
        "value"?: string;
    }
    /**
     * A button group that can be used as an alternative to drop-down menus.
     */
    interface InoSegmentGroup {
        /**
          * Name of the segment group
         */
        "name"?: string;
        /**
          * Forwards the `checkedChange` events of the `<ino-segment-buttons>` with its value as the detail.
         */
        "onValueChange"?: (event: InoSegmentGroupCustomEvent<any>) => void;
        /**
          * Value of the segment group
         */
        "value"?: any;
    }
    /**
     * A component providing single-option select menus. It functions as a wrapper around the material design's [select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select) component.
     * #### Additional Hints
     * Use the custom `ino-option` component to add options to the select component. The `label` attribute sets an optional floating label for this element.
     */
    interface InoSelect {
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * Displays the select as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
         */
        "error"?: boolean;
        /**
          * A helper text to display below the select element. By default, non-validation helper text is always visible.
         */
        "helper"?: string;
        /**
          * When the helper text is serving as a validation message, make it permanently visible regardless of the select's validity.
         */
        "helperPersistent"?: boolean;
        /**
          * Indicates the helper text is a validation message. By default validation message is hidden unless the select is invalid.
         */
        "helperValidation"?: boolean;
        /**
          * The label of this element.
         */
        "label"?: string;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Emits when a selection changes. Contains new value in `event.detail`.
         */
        "onValueChange"?: (event: InoSelectCustomEvent<string>) => void;
        /**
          * Styles this select box as outlined element.
         */
        "outline"?: boolean;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required.
         */
        "showLabelHint"?: boolean;
        /**
          * The value of this element. (**unmanaged**)
         */
        "value"?: string;
    }
    /**
     * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
     */
    interface InoSnackbar {
        /**
          * The aria-labels used to provide accessible snackbar context as well as close icon button label.
         */
        "a11yLabels"?: SnackbarLabels;
        /**
          * The text to display for the action button. If no text is defined, the snack bar is displayed in an alternative feedback style.
         */
        "actionText"?: string;
        /**
          * [DEPRECATED] Please use the default slot instead The text message to display.
          * @deprecated
         */
        "message"?: string;
        /**
          * Event that emits as soon as the action button is clicked.
         */
        "onActionClick"?: (event: InoSnackbarCustomEvent<any>) => void;
        /**
          * Event that emits as soon as the snackbar hides. Listen to this event to hide or destroy this element.
         */
        "onHideEl"?: (event: InoSnackbarCustomEvent<any>) => void;
        /**
          * Controls the visibility state of the snackbar. When set to `true`, the snackbar is displayed; otherwise, it is hidden.
         */
        "open"?: boolean;
        /**
          * If set to true, the timeout that closes the snackbar is paused when the user hovers over the snackbar.
         */
        "stayVisibleOnHover"?: boolean;
        /**
          * Sets the timeout in ms until the snackbar disappears. The timeout can be disabled by setting it to a negative value.
         */
        "timeout"?: number;
        /**
          * Changes the snackbar type. There are four types of messages: info, success, warning and error.
         */
        "type"?: SnackbarType;
    }
    /**
     * A component which displays a variety of spinners. Use spinners to show that the app is loading content or performing another process for which the user has to wait.
     * This component contains three different types of spinners animated with pure CSS. It mainly relies on [Spinkit](http://tobiasahlin.com/spinkit/) and may be extended in future with more types.
     */
    interface InoSpinner {
        /**
          * The height of this spinner (default = 40)
         */
        "height"?: number;
        /**
          * If true, the spinner is shown as modal over the current app page.
         */
        "modal"?: boolean;
        /**
          * The type of this spinner. Possible values: `tile` (default), `bounce` or `circle`
         */
        "type"?: SpinnerType;
        /**
          * The width of this spinner (defaul = 40)
         */
        "width"?: number;
    }
    /**
     * Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.
     */
    interface InoSwitch {
        /**
          * Marks this element as checked. (**unmanaged**)
         */
        "checked"?: boolean;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Emits when the user clicks on the switch to change the `checked` state. Contains the status in `event.detail`.
         */
        "onCheckedChange"?: (event: InoSwitchCustomEvent<any>) => void;
    }
    /**
     * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. Each Tab governs the visibility of one group of content. It functions as a wrapper around the material [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab) component.
     */
    interface InoTab {
        /**
          * Contains the ID of the associated tab panel for accessibility purposes. This property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role.
         */
        "a11yControls"?: string;
        /**
          * Reflects the selected state of the tab for accessibility purposes. This property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role.
         */
        "a11ySelected"?: boolean;
        /**
          * Indicates a leading icon in the tab.
         */
        "icon"?: string;
        /**
          * Indicates that the tab only expands to the width of its content.
         */
        "indicatorContentWidth"?: boolean;
        /**
          * [DEPRECATED] Please use the default slot instead. Indicates a label text in the tab.
          * @deprecated
         */
        "label"?: string;
        /**
          * Emitted when the user interacts with the tab. This event is used by the ino-tab-bar.
         */
        "onInteracted"?: (event: InoTabCustomEvent<any>) => void;
        /**
          * Indicates that the tab icon and label should flow vertically instead of horizontally.
         */
        "stacked"?: boolean;
    }
    /**
     * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. The Tab Bar contains the Tab Scroller and Tab components. It functions as a wrapper around the material [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar) component.
     */
    interface InoTabBar {
        /**
          * Activates the tab at the given index (**unmanaged**).
         */
        "activeTab"?: number;
        /**
          * Autofocus of tab on activation.
         */
        "autoFocus"?: boolean;
        /**
          * Emits when a tab changes. Contains the index of the activated tab in `event.detail`
         */
        "onActiveTabChange"?: (event: InoTabBarCustomEvent<number>) => void;
    }
    /**
     * The ino-table is a custom table used to display sets of data across multiple columns.
     * It currently supports different states (selected, active), sorting and loading indication.
     * > The component is based on the [mdc-data-table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table).
     */
    interface InoTable {
        /**
          * True, if the table is loading data.  Use this in combination with a `ino-progress-bar` having `slot="loading-indicator"` to provide an additional horizontal loading bar.
         */
        "loading"?: boolean;
        /**
          * If true, disables row hover styling.  Useful for simples tables with few rows or columns.
         */
        "noHover"?: boolean;
        /**
          * Emits that the sort direction or column id has changed.
         */
        "onSortChange"?: (event: InoTableCustomEvent<SortDirectionChangeDetails>) => void;
        /**
          * Identifier of the column currently sorted by.  Needs to match the column ids provided on `ino-table-header-cell` elements.
         */
        "sortColumnId"?: string;
        /**
          * Direction of the column currently sorted by.
          * @See Set `sort-start` attribute on the respective column to change the sort order.
         */
        "sortDirection"?: SortDirection;
        /**
          * True, if table header stays visible on vertical scroll
         */
        "stickyHeader"?: boolean;
    }
    /**
     * The `ino-table-header-cell` is a particular header cell to provide search and column sort behaviour on `ino-table`'s.
     */
    interface InoTableHeaderCell {
        /**
          * Marks the header as autofocused (used for searchable header cells).  Use this in combination with the `data-ino-focus` attribute on the actual search target element to focus a specific input element.
         */
        "autofocus"?: boolean;
        /**
          * A unique identifier of the column (used for sorting).
         */
        "columnId"?: string;
        /**
          * Name of the column.
         */
        "label"?: string;
        /**
          * If true, the cell is **not** sortable. By default, table header cells are sortable.
         */
        "notSortable"?: boolean;
        /**
          * Emits that the search field focused (true) or blurred (false).
         */
        "onSearchFocusChange"?: (event: InoTableHeaderCellCustomEvent<boolean>) => void;
        /**
          * Emits that the sort direction has been changed.
         */
        "onSortDirectionChange"?: (event: InoTableHeaderCellCustomEvent<SortDirectionChangeDetails>) => void;
        /**
          * Identifier of the search icon (default `search`). Used for date or list search columns.
         */
        "searchIcon"?: string;
        /**
          * True, if the column has been searched for this column. Persistent state to indicate the user that this column has a search filter.
         */
        "searched"?: boolean;
        /**
          * The current sort direction of the column.
         */
        "sortDirection"?: SortDirection;
        /**
          * The initial sort direction state (default `desc`).  By default, all columns are sorted descending followed by ascending. To switch this order, set sort Start to asc.
         */
        "sortStart"?: SortDirection;
    }
    /**
     * A textarea component with styles. It uses a material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component for its styling.
     * > **Note:** The textarea is always styled in an outlined manner. If you need to use a textarea in combination with other form inputs (`ino-input`), use their respective outline style.
     */
    interface InoTextarea {
        /**
          * The autofocus of this element.
         */
        "autoFocus"?: boolean;
        /**
          * An optional flag to allow the textarea adjust its height to display all the content. The `rows` attribute can also be used to specify a minimum height. Use CSS to specify a max-height for the textarea element. Once the height exceeds the max-height, autogrow will re-enable the vertical scrollbar.
         */
        "autogrow"?: boolean;
        /**
          * The number of cols of this textarea.
         */
        "cols"?: number;
        /**
          * Disables this element.
         */
        "disabled"?: boolean;
        /**
          * The optional floating label of this input field.
         */
        "label"?: string;
        /**
          * The max length of this element.
         */
        "maxlength"?: number;
        /**
          * The min length of this element.
         */
        "minlength"?: number;
        /**
          * The name of this element.
         */
        "name"?: string;
        /**
          * Emits when the textarea is blurred and validates email input
         */
        "onInoBlur"?: (event: InoTextareaCustomEvent<void>) => void;
        /**
          * Emits when the user types something in. Contains typed input in `event.detail`
         */
        "onValueChange"?: (event: InoTextareaCustomEvent<string>) => void;
        /**
          * Styles the input field as outlined element.
         */
        "outline"?: boolean;
        /**
          * The placeholder of this element.
         */
        "placeholder"?: string;
        /**
          * Marks this element as required.
         */
        "required"?: boolean;
        /**
          * The number of rows of this textarea.
         */
        "rows"?: number;
        /**
          * Displays the number of characters. The maxlength-property must be set.
         */
        "showCharacterCounter"?: boolean;
        /**
          * If true, an *optional* message is displayed if not required, otherwise a * marker is displayed if required
         */
        "showLabelHint"?: boolean;
        /**
          * The value of this element. (**unmanaged**)
         */
        "value"?: string;
    }
    /**
     * A tooltip component that displays text when users hover over, focus on, or tap an element.
     * > Note: A tooltip can only display plain text. For more complex dialogs, see the [Popover](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-popover--default-usage) component.
     */
    interface InoTooltip {
        /**
          * Shows an arrow
         */
        "arrow"?: boolean;
        /**
          * Sets the color scheme of the tooltip.  Valid options include: `light`, `dark` or `primary`
         */
        "colorScheme"?: TippyThemes;
        /**
          * The delay in milliseconds before `ino-tooltip` shows up or hides.  If only one number is given, the show and hide delay get the given delay duration.  If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.  Defaults to 0ms.
         */
        "delay"?: number | [number, number];
        /**
          * The target id the tooltip belongs to. If not given, the tooltip is attached to the parent component.
         */
        "for"?: string;
        /**
          * Adds an optional header text to the `ino-tooltip`
         */
        "headerText"?: string;
        /**
          * The text shown in the tooltip.  [DEPRECATED] Please use the default slot instead
          * @deprecated
         */
        "label"?: string;
        /**
          * The placement of the tooltip. Accepted values: `top(-start, -end)`, `right(-start, -end)`, `bottom(-start, -end)`, `left(-start, -end)`
         */
        "placement"?: Placement;
        /**
          * The trigger to show the tooltip - either `click`, `hover` or `focus`. Multiple triggers possible by separating them with a space.
         */
        "trigger"?: TooltipTrigger;
    }
    interface IntrinsicElements {
        "ino-accordion": InoAccordion;
        "ino-autocomplete": InoAutocomplete;
        "ino-avatar": InoAvatar;
        "ino-button": InoButton;
        "ino-card": InoCard;
        "ino-carousel": InoCarousel;
        "ino-carousel-slide": InoCarouselSlide;
        "ino-checkbox": InoCheckbox;
        "ino-chip": InoChip;
        "ino-control-item": InoControlItem;
        "ino-currency-input": InoCurrencyInput;
        "ino-datepicker": InoDatepicker;
        "ino-dialog": InoDialog;
        "ino-fab": InoFab;
        "ino-fab-set": InoFabSet;
        "ino-icon": InoIcon;
        "ino-icon-button": InoIconButton;
        "ino-img": InoImg;
        "ino-img-list": InoImgList;
        "ino-input": InoInput;
        "ino-input-file": InoInputFile;
        "ino-label": InoLabel;
        "ino-list": InoList;
        "ino-list-divider": InoListDivider;
        "ino-list-item": InoListItem;
        "ino-markdown-editor": InoMarkdownEditor;
        "ino-menu": InoMenu;
        "ino-nav-drawer": InoNavDrawer;
        "ino-nav-item": InoNavItem;
        "ino-option": InoOption;
        "ino-option-group": InoOptionGroup;
        "ino-popover": InoPopover;
        "ino-progress-bar": InoProgressBar;
        "ino-radio": InoRadio;
        "ino-radio-group": InoRadioGroup;
        "ino-range": InoRange;
        "ino-segment-button": InoSegmentButton;
        "ino-segment-group": InoSegmentGroup;
        "ino-select": InoSelect;
        "ino-snackbar": InoSnackbar;
        "ino-spinner": InoSpinner;
        "ino-switch": InoSwitch;
        "ino-tab": InoTab;
        "ino-tab-bar": InoTabBar;
        "ino-table": InoTable;
        "ino-table-header-cell": InoTableHeaderCell;
        "ino-textarea": InoTextarea;
        "ino-tooltip": InoTooltip;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            "ino-accordion": LocalJSX.InoAccordion & JSXBase.HTMLAttributes<HTMLInoAccordionElement>;
            /**
             * `ino-autocomplete` is a component that acts similarly to the native `datalist` feature of the `<input>` element.
             * Unlike other components, `ino-autocomplete` is stateful, meaning it maintains its own state. This makes it less
             * flexible to some extent compared to stateless components.
             * ## Responsibilities
             * The component handles the following tasks:
             * - Management of the `value` property of the `<ino-input>` element.
             * - Management of showing and hiding the different options based on the input.
             * - Keyboard navigation among the options.
             * ## Filtering
             * The options are filtered using `.includes(...)`, which ignores case sensitivity.
             */
            "ino-autocomplete": LocalJSX.InoAutocomplete & JSXBase.HTMLAttributes<HTMLInoAutocompleteElement>;
            "ino-avatar": LocalJSX.InoAvatar & JSXBase.HTMLAttributes<HTMLInoAvatarElement>;
            /**
             * A button component with different styles and icon capability.
             */
            "ino-button": LocalJSX.InoButton & JSXBase.HTMLAttributes<HTMLInoButtonElement>;
            /**
             * The ino-card is a flexible and extensible component. It features a header, content, and footer slot that can be used to
             * fully customize the appearance of the card.
             */
            "ino-card": LocalJSX.InoCard & JSXBase.HTMLAttributes<HTMLInoCardElement>;
            /**
             * The `ino-carousel` component works in combination with the `ino-carousel-slide` component
             * and can be used to display an array of images as a slide show. What is more,
             * it also features an autoplay property that allows the slides to be changed automatically.
             * Lastly, using the css variables described at the bottom of the page, you can easily customize
             * the dimensions of the component as well as the duration of the slide transition.
             */
            "ino-carousel": LocalJSX.InoCarousel & JSXBase.HTMLAttributes<HTMLInoCarouselElement>;
            /**
             * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
             */
            "ino-carousel-slide": LocalJSX.InoCarouselSlide & JSXBase.HTMLAttributes<HTMLInoCarouselSlideElement>;
            /**
             * An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it.
             */
            "ino-checkbox": LocalJSX.InoCheckbox & JSXBase.HTMLAttributes<HTMLInoCheckboxElement>;
            /**
             * The ino-chip component displays the provided content and icon as a chip.
             * Use the `label` attribute to set the label of the chip. To add an icon to the left side of the chip, use the `icon` attribute.
             * #### Additional Hints
             * **Content**: Utilize the `label` attribute to define the chip's label. Include an icon on the left side of the chip via the `icon` attribute.
             * **Selection**: Chips can be used for single or multi-selection among a few options. Refer to the **Selection** and **Filter** stories for examples.
             * **Removable Chips**: Set `removable` to `true` to allow chip removal by the user, which will display a `close` icon on the chip's right side. On removal, a `removeChip` event is emitted instead of hiding or destroying the component. Handle the removal process by listening to this event.
             */
            "ino-chip": LocalJSX.InoChip & JSXBase.HTMLAttributes<HTMLInoChipElement>;
            /**
             * A list item component that displays a single instance of choice in a list or menu with a control element (radio-button or checkbox). It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
             * This component is used as child of `ino-list` and `ino-menu` components.
             * #### Restrictions
             * Please note that only text is supported as a trailing element. However, your icons can be placed at the leading position. To do so, use the `trailing`-Property and declare your icon inside of the element
             */
            "ino-control-item": LocalJSX.InoControlItem & JSXBase.HTMLAttributes<HTMLInoControlItemElement>;
            /**
             * A component providing currency functionality by extending a `ino-input`. Main objectives of this component are the separatation of formatted currency values from its numeric values and to handle different currency locales.
             * The `ino-currency-input` controls an underlying `ino-input` and evaluates its value on blur. While the `ino-input` has the textual user input as value, the `ino-currency-input` provides a numeric value of the currency. In theory, you can use all `ino-input` properties. However, properties like maxlength, step, etc. make no sense for currency inputs and are thus not supported.
             * #### Additional Hints
             * The currency input uses a native number formatter which supports a vary of different locales (see [Documentation](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)). On a component level, you can provide any supported locale via the `currency-locale` attribute.
             * However, it may be useful to define a global locale for currencies, This may even differ from the application's locale, for instance a Belgian application may use English as language but the German currency format. For this reason, you can provide the `currencyLocale` option on the global configuration.
             */
            "ino-currency-input": LocalJSX.InoCurrencyInput & JSXBase.HTMLAttributes<HTMLInoCurrencyInputElement>;
            /**
             * A datepicker is a ui component to select dates and times. It behaves like a native `input` but uses the [flatpickr](https://github.com/flatpickr/flatpickr) library for a better ui experience.
             * #### Types
             * This datepicker can be used as a picker for different types:
             * - date
             * - time
             * - datetime
             * - month
             */
            "ino-datepicker": LocalJSX.InoDatepicker & JSXBase.HTMLAttributes<HTMLInoDatepickerElement>;
            /**
             * The ino-dialog component displays a modal window that can be used to display additional information or notify the user.
             * It is based on the mdc-dialog and is fully customizable. The styling of a dialog's content must be provided by users.
             * #### Usage Notes
             * - **Child Component Layout Issues**: If elements like ripples or labels in the `ino-dialog` are mispositioned or incorrectly sized, it may indicate that child components are being rendered before the dialog is fully open.
             * - **Rendering After Dialog Opens**: To prevent layout issues, render sensitive child components (e.g. `ino-icon-button`) only after the `dialogOpen` event has fired.
             */
            "ino-dialog": LocalJSX.InoDialog & JSXBase.HTMLAttributes<HTMLInoDialogElement>;
            /**
             * A floating action button represents the primary action in an application. [Floating Action Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab) component.
             * It appears in front of all screen content, typically as a circular shape with an icon in its center.
             * FABs come in three types: regular, mini, and extended
             * #### Additional Hints
             * **Content**: Use the  label` attribute to set the text of a fab. To add an icon, use the  icon` attribute.
             */
            "ino-fab": LocalJSX.InoFab & JSXBase.HTMLAttributes<HTMLInoFabElement>;
            /**
             * The ino-fab-set component serves as a container for multiple fab buttons. It contains actions related to the main fab
             * button. Upon interacting with the fab button, a FAB-Set can display three to six related actions in the form of a speed
             * dial.
             * #### Additional Hints
             * **Content**: Put the FABs for the speed dial inside of `ino-fab-set` as `ino-fab`.
             * #### Control flow
             * The ino-fab-set has a controlled (unmanaged) attribute `openDial`. For this reason, listen to `click` events, sync to
             * your local state and pass the state to the component again to open/close the fab-set.
             */
            "ino-fab-set": LocalJSX.InoFabSet & JSXBase.HTMLAttributes<HTMLInoFabSetElement>;
            /**
             * A light icon component for texts and other components.
             * This component is based on the ionicons (https://github.com/ionic-team/ionicons)
             * #### Additional Hints
             * The component inherits styles, such as the text size, from the parent element. For custom styles, use the css properties of the component.
             * **Clickable icon:** Make an icon interactive with the optional attribute `clickable`. Clickable icons emit a `clickEl` event.
             * #### Add icons
             * If you would like to add custom icons, you have to add the `.svg` file to the `src/assets/ino-icon` folder and run the `yarn integrate:icons` script which takes care of the rest.
             * > **Note:** To use the provided icons in your consumer project, you need to copy all contents of
             * > `node_modules/@inovex.de/elements/dist/inovex-elements/ino-icon` into your `dist/ino-icon` folder. All icons are expected
             * > to be located in `ino-icon/` at runtime. Please refer to the Storybook documentation to get detailed instructions
             * > on how to integrate the icons with Angular, React or plain JavaScript.
             * Alternatively, you can also just provide the URL to your preferred icon by setting the `src` property accordingly.
             */
            "ino-icon": LocalJSX.InoIcon & JSXBase.HTMLAttributes<HTMLInoIconElement>;
            /**
             * A rounded button component that contains an icon. It functions as a wrapper around the material [icon-button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button) component.
             * ## Additional Hints
             * **Toggle Button**: To use the ino-icon-button as a toggle button the user can listen to the native `click`-Event and change the icon in the `icon`-Attribute.
             */
            "ino-icon-button": LocalJSX.InoIconButton & JSXBase.HTMLAttributes<HTMLInoIconButtonElement>;
            /**
             * An image component with different styles that reserves a predefined space to avoid jumping contents.
             */
            "ino-img": LocalJSX.InoImg & JSXBase.HTMLAttributes<HTMLInoImgElement>;
            /**
             * The ino-img-list component is used in combination with the ino-img component to display an array of images
             * in a grid-like format. It is based on the mdc-image-list component.
             */
            "ino-img-list": LocalJSX.InoImgList & JSXBase.HTMLAttributes<HTMLInoImgListElement>;
            /**
             * An input component with styles. It functions as a wrapper around the material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component.
             * Use this element for **simple types** like `text`, `password`, `number` or `email`. For more complex types, there are elements like a [Radio Button](../ino-radio), a [Checkbox](../ino-checkbox), a [Datepicker](../ino-datepicker) and many more.
             */
            "ino-input": LocalJSX.InoInput & JSXBase.HTMLAttributes<HTMLInoInputElement>;
            /**
             * An input component for files. It functions as a wrapper around the native input capabilities having the [`type="file"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file).
             * This component replaces the native behaviour with a custom `ino-button` with logic.
             */
            "ino-input-file": LocalJSX.InoInputFile & JSXBase.HTMLAttributes<HTMLInoInputFileElement>;
            /**
             * This is an internally used component for various sorts of inputs like `ino-input`, `ino-select` and `ino-textarea`. It is used to display the label for each respective component.
             */
            "ino-label": LocalJSX.InoLabel & JSXBase.HTMLAttributes<HTMLInoLabelElement>;
            /**
             * A component that displays a list of choices. It functions as a wrapper around the material [list](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) component.
             * This component is a composer to configure and wrap `list-item`s, `list-divider`s, `control-item`s and `nav-item`s.
             * #### Additional Hints
             * Provide `two-lines` to set proper style attributes for list items having a primary and secondary line.
             */
            "ino-list": LocalJSX.InoList & JSXBase.HTMLAttributes<HTMLInoListElement>;
            /**
             * A list divider component that either divides two lists or list items. It functions as a wrapper around the material [list divider](https://github.com/material-components/material-components-web/blob/master/packages/mdc-divider/) capabilities.
             * This component is used as child of `ino-list` and `ino-menu` components.
             */
            "ino-list-divider": LocalJSX.InoListDivider & JSXBase.HTMLAttributes<HTMLInoListDividerElement>;
            /**
             * A list item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
             * This component is used as child of `ino-list` and `ino-menu` components.
             */
            "ino-list-item": LocalJSX.InoListItem & JSXBase.HTMLAttributes<HTMLInoListItemElement>;
            /**
             * The **Preview Mode** supports following actions:
             * | Actions ||||
             * |---|
             * | Link | Blockquotes | Unordered list / Bullet list | Headline 1 |
             * | Italic | Strikethrough | Ordered list / Numbered  list | Headline 2 |
             * | Bold | Inline code | Task list |
             * Additionally, there are a lot of predefined
             * [keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)
             * provided by the underlying [tiptap](https://tiptap.dev/) editor.
             * The **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:
             *  * Support of strikethrough syntax (`~~TextToStrike~~`)
             *  * Support of task list syntax (`- [x] MyToDoTask`)
             *  * No support of image syntax. __Images are not allowed!__
             * ### Font Size Scaling
             * The font sizes within the Markdown Editor are scaled based on the CSS variable `--ino-markdown-editor-font-size`. This variable sets the base font size, and other font sizes are scaled accordingly.
             * #### Base Font Size Variable
             * `--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.
             * #### Scaling Factors
             * | Element | Scaling Factor | Calculated Size (Example) |
             * |---------|----------------|---------------------------|
             * | Base Font Size | 1x | Base size (e.g., 16px) |
             * | Header 1 (h1) | 2x | Double the base size (e.g., 32px) |
             * | Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |
             */
            "ino-markdown-editor": LocalJSX.InoMarkdownEditor & JSXBase.HTMLAttributes<HTMLInoMarkdownEditorElement>;
            /**
             * A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.
             * The anchor element is the parent element.
             * The menu items consist of different variations of the `ino-list-item` component.
             * If you need a more customizable menu with a different type of elements or functionalities, have a look at the `ino-popover`.
             */
            "ino-menu": LocalJSX.InoMenu & JSXBase.HTMLAttributes<HTMLInoMenuElement>;
            /**
             * A navigation drawer component designed to organize and facilitate user navigation in your app.
             * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
             * Usage Note:
             * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
             * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
             */
            "ino-nav-drawer": LocalJSX.InoNavDrawer & JSXBase.HTMLAttributes<HTMLInoNavDrawerElement>;
            /**
             * A nav item component that displays a single instance of choice in a list or menu. It functions as a wrapper around the material [list item](https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/) capabilities.
             * This component is used as child of `ino-list` and `ino-menu` components.
             * > Note: This component's main use case is within the `ino-nav-drawer`.
             */
            "ino-nav-item": LocalJSX.InoNavItem & JSXBase.HTMLAttributes<HTMLInoNavItemElement>;
            /**
             * An option component that can be used to add options to an ino-select component.
             */
            "ino-option": LocalJSX.InoOption & JSXBase.HTMLAttributes<HTMLInoOptionElement>;
            /**
             * A wrapper component to be used for a group of ino-options. This component adds a non-selectable header before the options.
             * Beyond that, if you encounter problems using React or Vue in conjunction with the `ino-select`, use this component as a wrapper around your `ino-option`. This way the virtual DOM will know when to update the `ino-select` and its children, which may otherwise not work properly if the options are added dynamically while deeply nested in the `ino-select'. For more information refer to [this issue](https://github.com/ionic-team/stencil/issues/2259).
             */
            "ino-option-group": LocalJSX.InoOptionGroup & JSXBase.HTMLAttributes<HTMLInoOptionGroupElement>;
            /**
             * A Popover is a dialog which is bound to a specific element and appears next to it. Under the
             * hood, [tippy.js](https://atomiks.github.io/tippyjs/) is used.
             * The Popover
             * and [Tooltip](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-tooltip--default-usage)
             * components are very similar. However, popovers are complex dialogs consisting of several HTML elements, while tooltips
             * can only display plain text.
             */
            "ino-popover": LocalJSX.InoPopover & JSXBase.HTMLAttributes<HTMLInoPopoverElement>;
            /**
             * The `ino-progress-bar` is a linear progress bar based on the mdc-linear-progress component.
             */
            "ino-progress-bar": LocalJSX.InoProgressBar & JSXBase.HTMLAttributes<HTMLInoProgressBarElement>;
            /**
             * A radio component that allows the user to select an option from a set of radio-buttons. In order to have a single select functionality, please refer to the `ino-radio-group`-component. This component functions as a wrapper around the material [radio](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio) component.
             * #### Additional Hints
             * Clicking on the radio button triggers an event that contains the boolean value `true` (`e.detail`). This event is only triggered if the radio button was not previously selected (`checked=false`). In order to check one element and uncheck the other ones, please refer to the `ino-radio-group`-Component. If (`checked=true`) is passed to an element, the other elements **won't** be deselected without the use of the `ino-radio-group`.
             */
            "ino-radio": LocalJSX.InoRadio & JSXBase.HTMLAttributes<HTMLInoRadioElement>;
            /**
             * A wrapper component to be used for a group of ino-radio-buttons. This component manages the single selection functionality of a group of ino-radio-buttons.
             */
            "ino-radio-group": LocalJSX.InoRadioGroup & JSXBase.HTMLAttributes<HTMLInoRadioGroupElement>;
            /**
             * A range component that allows the user select a number using a slider. It functions as a wrapper around the material [Slider](https://github.com/material-components/material-components-web/tree/master/packages/mdc-slider) component.
             */
            "ino-range": LocalJSX.InoRange & JSXBase.HTMLAttributes<HTMLInoRangeElement>;
            /**
             * A button component that can be used in combination with the ino-segment-group component.
             */
            "ino-segment-button": LocalJSX.InoSegmentButton & JSXBase.HTMLAttributes<HTMLInoSegmentButtonElement>;
            /**
             * A button group that can be used as an alternative to drop-down menus.
             */
            "ino-segment-group": LocalJSX.InoSegmentGroup & JSXBase.HTMLAttributes<HTMLInoSegmentGroupElement>;
            /**
             * A component providing single-option select menus. It functions as a wrapper around the material design's [select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select) component.
             * #### Additional Hints
             * Use the custom `ino-option` component to add options to the select component. The `label` attribute sets an optional floating label for this element.
             */
            "ino-select": LocalJSX.InoSelect & JSXBase.HTMLAttributes<HTMLInoSelectElement>;
            /**
             * Snackbars provide brief messages about app processes at the bottom of the screen. It functions as a wrapper around the material design's [Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar) component.
             */
            "ino-snackbar": LocalJSX.InoSnackbar & JSXBase.HTMLAttributes<HTMLInoSnackbarElement>;
            /**
             * A component which displays a variety of spinners. Use spinners to show that the app is loading content or performing another process for which the user has to wait.
             * This component contains three different types of spinners animated with pure CSS. It mainly relies on [Spinkit](http://tobiasahlin.com/spinkit/) and may be extended in future with more types.
             */
            "ino-spinner": LocalJSX.InoSpinner & JSXBase.HTMLAttributes<HTMLInoSpinnerElement>;
            /**
             * Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.
             */
            "ino-switch": LocalJSX.InoSwitch & JSXBase.HTMLAttributes<HTMLInoSwitchElement>;
            /**
             * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. Each Tab governs the visibility of one group of content. It functions as a wrapper around the material [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab) component.
             */
            "ino-tab": LocalJSX.InoTab & JSXBase.HTMLAttributes<HTMLInoTabElement>;
            /**
             * Tabs organize and allow navigation between groups of content that are related and at the same hierarchical level. The Tab Bar contains the Tab Scroller and Tab components. It functions as a wrapper around the material [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar) component.
             */
            "ino-tab-bar": LocalJSX.InoTabBar & JSXBase.HTMLAttributes<HTMLInoTabBarElement>;
            /**
             * The ino-table is a custom table used to display sets of data across multiple columns.
             * It currently supports different states (selected, active), sorting and loading indication.
             * > The component is based on the [mdc-data-table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table).
             */
            "ino-table": LocalJSX.InoTable & JSXBase.HTMLAttributes<HTMLInoTableElement>;
            /**
             * The `ino-table-header-cell` is a particular header cell to provide search and column sort behaviour on `ino-table`'s.
             */
            "ino-table-header-cell": LocalJSX.InoTableHeaderCell & JSXBase.HTMLAttributes<HTMLInoTableHeaderCellElement>;
            /**
             * A textarea component with styles. It uses a material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component for its styling.
             * > **Note:** The textarea is always styled in an outlined manner. If you need to use a textarea in combination with other form inputs (`ino-input`), use their respective outline style.
             */
            "ino-textarea": LocalJSX.InoTextarea & JSXBase.HTMLAttributes<HTMLInoTextareaElement>;
            /**
             * A tooltip component that displays text when users hover over, focus on, or tap an element.
             * > Note: A tooltip can only display plain text. For more complex dialogs, see the [Popover](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-popover--default-usage) component.
             */
            "ino-tooltip": LocalJSX.InoTooltip & JSXBase.HTMLAttributes<HTMLInoTooltipElement>;
        }
    }
}