{
  "version": 1.1,
  "tags": [
    {
      "name": "ino-accordion",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "accordion-title",
          "description": "The title of the accordion."
        },
        {
          "name": "expanded",
          "description": "Whether the accordion is expanded or collapsed."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-accordion/ino-accordion.tsx"
        }
      ]
    },
    {
      "name": "ino-autocomplete",
      "description": {
        "kind": "markdown",
        "value": "`ino-autocomplete` is a component that acts similarly to the native `datalist` feature of the `<input>` element.\n\nUnlike other components, `ino-autocomplete` is stateful, meaning it maintains its own state. This makes it less\nflexible to some extent compared to stateless components.\n\n## Responsibilities\nThe component handles the following tasks:\n- Management of the `value` property of the `<ino-input>` element.\n- Management of showing and hiding the different options based on the input.\n- Keyboard navigation among the options.\n\n## Filtering\nThe options are filtered using `.includes(...)`, which ignores case sensitivity."
      },
      "attributes": [
        {
          "name": "debounce",
          "description": "Number of ms the search function should be delayed after the user typed something."
        },
        {
          "name": "no-options-text",
          "description": "Text to display when there are no options found, where `$` is the placeholder for the input of the user."
        },
        {
          "name": "value",
          "description": "The selected value."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-autocomplete/ino-autocomplete.tsx"
        }
      ]
    },
    {
      "name": "ino-avatar",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "a-1-1y-label",
          "description": "The aria-label used for the avatar element.\nhttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role."
        },
        {
          "name": "alt",
          "description": "The alternative text of the avatar image."
        },
        {
          "name": "color-secondary",
          "description": "Colors the border of the avatar in the secondary color."
        },
        {
          "name": "initials",
          "description": "The initials of the avatar. Will be shown if no `src` is defined or `img` fails to load."
        },
        {
          "name": "interactive",
          "description": "Enables interactive visuals for the avatar by animating the border and a pointing cursor upon hovering the Element."
        },
        {
          "name": "loading",
          "description": "Overrides the avatar's loading animation behavior.\nWhen set to true, the loading animation is displayed indefinitely.\nWhen set to false, the avatar will not show any loading animations.\n\nBy default, the loading animation will be shown only while the image is being fetched."
        },
        {
          "name": "src",
          "description": "The img of the avatar."
        },
        {
          "name": "variant",
          "description": "The style variant of the avatar.\nCan be 'dashed' | 'solid'.",
          "values": [
            {
              "name": "dashed"
            },
            {
              "name": "solid"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-avatar/ino-avatar.tsx"
        }
      ]
    },
    {
      "name": "ino-button",
      "description": {
        "kind": "markdown",
        "value": "A button component with different styles and icon capability."
      },
      "attributes": [
        {
          "name": "autofocus",
          "description": "Sets the autofocus for this element."
        },
        {
          "name": "dense",
          "description": "Makes the button text and container slightly smaller."
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "form",
          "description": "The form id this element origins to."
        },
        {
          "name": "loading",
          "description": "Shows an infinite loading spinner and prevents further clicks."
        },
        {
          "name": "name",
          "description": "The name of the element."
        },
        {
          "name": "type",
          "description": "The type of this form.\n\nCan either be `button`, `submit` or `reset`.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "variant",
          "description": "The button variant.\n\n* **filled**: Contain actions that are important for your application.\n* **outlined**: Buttons with medium highlighting. They contain actions that are important but are not the main action in an app.\n* **text**: Typically used for less prominent actions, including those in dialogs and cards.",
          "values": [
            {
              "name": "filled"
            },
            {
              "name": "outlined"
            },
            {
              "name": "text"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-button/ino-button.tsx"
        }
      ]
    },
    {
      "name": "ino-card",
      "description": {
        "kind": "markdown",
        "value": "The ino-card is a flexible and extensible component. It features a header, content, and footer slot that can be used to\nfully customize the appearance of the card."
      },
      "attributes": [
        {
          "name": "disable-elevation",
          "description": "Disables the hover effect if true"
        },
        {
          "name": "selected",
          "description": "Selects the card and displays a check mark icon on top of the card"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-card/ino-card.tsx"
        }
      ]
    },
    {
      "name": "ino-carousel",
      "description": {
        "kind": "markdown",
        "value": "The `ino-carousel` component works in combination with the `ino-carousel-slide` component\nand can be used to display an array of images as a slide show. What is more,\nit also features an autoplay property that allows the slides to be changed automatically.\nLastly, using the css variables described at the bottom of the page, you can easily customize\nthe dimensions of the component as well as the duration of the slide transition."
      },
      "attributes": [
        {
          "name": "autoplay",
          "description": "Enables autoplay which causes slides to be changed automatically after `intermission` milliseconds."
        },
        {
          "name": "hide-buttons",
          "description": "Hides the arrow buttons"
        },
        {
          "name": "infinite",
          "description": "Restarts playback from the first slide upon reaching the last slide"
        },
        {
          "name": "intermission",
          "description": "Sets the intermission between two slides (Unit: ms)"
        },
        {
          "name": "reverse",
          "description": "Enables reverse playback of the slides"
        },
        {
          "name": "value",
          "description": "`value` of the slide that should be displayed."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-carousel/ino-carousel.tsx"
        }
      ]
    },
    {
      "name": "ino-carousel-slide",
      "description": {
        "kind": "markdown",
        "value": "An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it."
      },
      "attributes": [
        {
          "name": "selected",
          "description": "Selected state controlled by the `<ino-carousel>`"
        },
        {
          "name": "src",
          "description": "Link to the image"
        },
        {
          "name": "value",
          "description": "Value of the slide"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-carousel-slide/ino-carousel-slide.tsx"
        }
      ]
    },
    {
      "name": "ino-checkbox",
      "description": {
        "kind": "markdown",
        "value": "An image that is shown in the `<ino-carousel>` component. Should only be used in conjunction with it."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Marks this element as checked. (**unmanaged**)"
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "indeterminate",
          "description": "Marks this element as indeterminate.\nIt indicates that a user is indeterminate without changing the checked state.\nIf a checkbox is unchecked and indeterminate then it will lose the indeterminate state on click and change to checked.\nFor more information, see [Documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)."
        },
        {
          "name": "name",
          "description": "The name of this element."
        },
        {
          "name": "selection",
          "description": "Styles the checkbox as a selection variant that has a larger radius.\nWhile checkboxes are mainly used in lists, the selection should be used as a single, independent UI element.\nThe indeterminate state is not supported here."
        },
        {
          "name": "value",
          "description": "The value of this element."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-checkbox/ino-checkbox.tsx"
        }
      ]
    },
    {
      "name": "ino-chip",
      "description": {
        "kind": "markdown",
        "value": "The ino-chip component displays the provided content and icon as a chip.\nUse 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.\n\n#### Additional Hints\n**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.\n\n**Selection**: Chips can be used for single or multi-selection among a few options. Refer to the **Selection** and **Filter** stories for examples.\n\n**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."
      },
      "attributes": [
        {
          "name": "clickable",
          "description": "Marks this element as clickable and displays all interactions like hover-effects, click-effects, pointer-cursor,..."
        },
        {
          "name": "disabled",
          "description": "Disables all interactions."
        },
        {
          "name": "fill",
          "description": "The fill type of this element.",
          "values": [
            {
              "name": "outline"
            },
            {
              "name": "solid"
            }
          ]
        },
        {
          "name": "label",
          "description": "[DEPRECATED] Please use the default slot instead\n\nThe content of the component."
        },
        {
          "name": "removable",
          "description": "Adds a close icon on the right side of this chip which emits the `removeChip` event on click."
        },
        {
          "name": "selectable",
          "description": "Makes the chip selectable."
        },
        {
          "name": "selected",
          "description": "Marks this element as selected (**works only in conjunction with `selectable`**)"
        },
        {
          "name": "value",
          "description": "The value of this chip.\nIs emitted by the `chipClicked` and `chipRemoved` events."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-chip/ino-chip.tsx"
        }
      ]
    },
    {
      "name": "ino-control-item",
      "description": {
        "kind": "markdown",
        "value": "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.\n\nThis component is used as child of `ino-list` and `ino-menu` components.\n#### Restrictions\nPlease 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"
      },
      "attributes": [
        {
          "name": "activated",
          "description": "Styles the row in an activated style.\n\nIn contrast to `selected`, use this for only one item\nand to mark it as permanently activated."
        },
        {
          "name": "checked",
          "description": "Marks this element as checked. (**unmanaged**)"
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "indeterminate",
          "description": "Marks this element as indeterminate (**unmanaged**)\nCheckbox only"
        },
        {
          "name": "name",
          "description": "The name of this element."
        },
        {
          "name": "role",
          "description": "The type of control element\n\nValid options are 'checkbox' or 'radio'"
        },
        {
          "name": "secondary-text",
          "description": "Sets the secondary text of this list item.\n\nRequires `two-lines` on the parent `ino-list` element."
        },
        {
          "name": "selected",
          "description": "Styles the row in a selected style.\n\nIn contrast to `activated`, use this option to select one\nor multiple items that are likely to change soon."
        },
        {
          "name": "text",
          "description": "The primary text of this list item (required)."
        },
        {
          "name": "trailing",
          "description": "Places the checkbox at the end of the item"
        },
        {
          "name": "value",
          "description": "The value of this element."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-control-item/ino-control-item.tsx"
        }
      ]
    },
    {
      "name": "ino-currency-input",
      "description": {
        "kind": "markdown",
        "value": "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.\n\nThe `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.\n\n#### Additional Hints\nThe 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.\nHowever, 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."
      },
      "attributes": [
        {
          "name": "currency-locale",
          "description": "A supported locale for currency number formatting. If not given, it uses the global config.\nSee https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument"
        },
        {
          "name": "value",
          "description": "Numeric currency value"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-currency-input/ino-currency-input.tsx"
        }
      ]
    },
    {
      "name": "ino-datepicker",
      "description": {
        "kind": "markdown",
        "value": "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.\n\n#### Types\nThis datepicker can be used as a picker for different types:\n- date\n- time\n- datetime\n- month"
      },
      "attributes": [
        {
          "name": "append-to",
          "description": "Optional id of an element to append the datepicker to.\nDefault is:\n * the host element for inline pickers\n * body for collapsable pickers"
        },
        {
          "name": "attach-to-body",
          "description": "Attach calendar overlay to body (true) or\nPosition the calendar inside the wrapper and inside the ino-datepicker (false)"
        },
        {
          "name": "autofocus",
          "description": "Autofocuses this element."
        },
        {
          "name": "date-format",
          "description": "A string to change the date format.\nPossible values are listed [here](https://flatpickr.js.org/formatting/).\nThe default value is `d-m-Y` which accepts values like `01-01-2019`."
        },
        {
          "name": "default-date",
          "description": "A string/array containing the initial date of the datepicker overlay. If you're using `inoRange = true` provide an array.\nIf a `value` is given, this will be ignored."
        },
        {
          "name": "default-hour",
          "description": "A number containing the initial hour in the date-time picker overlay.\nIf a `value` is given, this will be ignored."
        },
        {
          "name": "default-minute",
          "description": "A number containing the initial minute in the date-time picker overlay.\nIf a `value` is given, this will be ignored."
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "error",
          "description": "Displays the datepicker as invalid if set to true.\nIf the property is not set or set to false,\nthe validation is handled by the default validation."
        },
        {
          "name": "helper",
          "description": "The helper text."
        },
        {
          "name": "helper-persistent",
          "description": "Displays the helper permanently."
        },
        {
          "name": "helper-validation",
          "description": "Styles the helper text as a validation message."
        },
        {
          "name": "hour-step",
          "description": "Adjusts the step for the hour input (incl. scrolling)\nDefault is 1"
        },
        {
          "name": "inline",
          "description": "Displays the datepicker inlined."
        },
        {
          "name": "label",
          "description": "Defines the label for this element."
        },
        {
          "name": "max",
          "description": "The maximum date that a user can pick to (inclusive)."
        },
        {
          "name": "min",
          "description": "The minimum date that a user can start picking from (inclusive)."
        },
        {
          "name": "minute-step",
          "description": "Adjusts the step for the minute input (incl. scrolling)\nDefault is 5"
        },
        {
          "name": "name",
          "description": "The input name of this element."
        },
        {
          "name": "outline",
          "description": "Styles the datepicker as outlined element."
        },
        {
          "name": "placeholder",
          "description": "The placeholder of the input element."
        },
        {
          "name": "range",
          "description": "If true, enables the user to choose two dates as an interval.\nOnly works with `type=\"date\"`"
        },
        {
          "name": "required",
          "description": "Marks this element as required."
        },
        {
          "name": "show-label-hint",
          "description": "If true, an *optional* message is displayed if not required,\notherwise a * marker is displayed if required"
        },
        {
          "name": "twelve-hour-time",
          "description": "If true, displays time picker in 12 hour mode with AM/PM selection."
        },
        {
          "name": "type",
          "description": "Selects the correct picker corresponding to the given type.",
          "values": [
            {
              "name": "date"
            },
            {
              "name": "datetime"
            },
            {
              "name": "month"
            },
            {
              "name": "time"
            }
          ]
        },
        {
          "name": "value",
          "description": "The currently selected date shown in the input field **unmanaged**. The given value\nwill not be formatted as date."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-datepicker/ino-datepicker.tsx"
        }
      ]
    },
    {
      "name": "ino-dialog",
      "description": {
        "kind": "markdown",
        "value": "The ino-dialog component displays a modal window that can be used to display additional information or notify the user.\nIt is based on the mdc-dialog and is fully customizable. The styling of a dialog's content must be provided by users.\n\n#### Usage Notes\n\n- **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.\n- **Rendering After Dialog Opens**: To prevent layout issues, render sensitive child components (e.g. `ino-icon-button`) only after the `dialogOpen` event has fired."
      },
      "attributes": [
        {
          "name": "action-text",
          "description": "Adds a button with the given text to proceed with an action"
        },
        {
          "name": "attach-to",
          "description": "The target element the dialog should be attached to.\nIf not given, the dialog is a child of the documents body.\nNote: This property is immutable after initialization."
        },
        {
          "name": "body-text",
          "description": "Adds a text to the body of the `ino-dialog`"
        },
        {
          "name": "cancel-text",
          "description": "Adds a button with the given text to close the `ino-dialog`"
        },
        {
          "name": "close-icon",
          "description": "Adds a close icon in the top right corner to close the `ino-dialog`."
        },
        {
          "name": "dialog-role",
          "description": "The role of the dialog. Can be either 'dialog' or 'alertdialog'.\nThe 'alertdialog' role should be used for important alerts and error messages.",
          "values": [
            {
              "name": "alertdialog"
            },
            {
              "name": "dialog"
            }
          ]
        },
        {
          "name": "dismissible",
          "description": "Close the dialog by clicking outside of the dialog."
        },
        {
          "name": "fullwidth",
          "description": "Defines a full width dialog sliding up from the bottom of the page."
        },
        {
          "name": "header-text",
          "description": "Adds a headline to the `ino-dialog`"
        },
        {
          "name": "icon",
          "description": "Adds a `ino-icon` besides the headline"
        },
        {
          "name": "open",
          "description": "Opens the dialog if set to true"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-dialog/ino-dialog.tsx"
        }
      ]
    },
    {
      "name": "ino-fab",
      "description": {
        "kind": "markdown",
        "value": "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.\nIt appears in front of all screen content, typically as a circular shape with an icon in its center.\n\nFABs come in three types: regular, mini, and extended\n\n#### Additional Hints\n\n**Content**: Use the  label` attribute to set the text of a fab. To add an icon, use the  icon` attribute."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disables the button."
        },
        {
          "name": "edge-position",
          "description": "The position of the edge.",
          "values": [
            {
              "name": "bottom-left"
            },
            {
              "name": "bottom-right"
            },
            {
              "name": "none"
            },
            {
              "name": "top-left"
            },
            {
              "name": "top-right"
            }
          ]
        },
        {
          "name": "extended",
          "description": "Optional, modifies the FAB to wider size which includes a text label."
        },
        {
          "name": "icon",
          "description": "Adds an icon to the Fab."
        },
        {
          "name": "label",
          "description": "Optional, for the text label. Applicable only for Extended FAB."
        },
        {
          "name": "mini",
          "description": "Optional, modifies the FAB to a smaller size"
        },
        {
          "name": "tooltip-placement",
          "description": "The placement of the tooltip which will be displayed when the button is not extended.\nUse `none`, if you don't want a tooltip to be displayed.",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "auto-end"
            },
            {
              "name": "auto-start"
            },
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "none"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-fab/ino-fab.tsx"
        }
      ]
    },
    {
      "name": "ino-fab-set",
      "description": {
        "kind": "markdown",
        "value": "The ino-fab-set component serves as a container for multiple fab buttons. It contains actions related to the main fab\nbutton. Upon interacting with the fab button, a FAB-Set can display three to six related actions in the form of a speed\ndial.\n\n#### Additional Hints\n**Content**: Put the FABs for the speed dial inside of `ino-fab-set` as `ino-fab`.\n\n#### Control flow\n\nThe ino-fab-set has a controlled (unmanaged) attribute `openDial`. For this reason, listen to `click` events, sync to\nyour local state and pass the state to the component again to open/close the fab-set."
      },
      "attributes": [
        {
          "name": "dial-direction",
          "description": "The direction of the speed dial.\nPossible values: `top` (default), `bottom`, `right`, `left`.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "left-right-location",
          "description": "The side where the Fab is displayed.\nPossible values: `right`, `left` (default).",
          "values": [
            {
              "name": "left"
            },
            {
              "name": "right"
            }
          ]
        },
        {
          "name": "open-dial",
          "description": "Opens the dial (**uncontrolled**)"
        },
        {
          "name": "top-bottom-location",
          "description": "The side where the Fab is displayed.\nPossible values: `top`, `bottom` (default).",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "top"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-fab-set/ino-fab-set.tsx"
        }
      ]
    },
    {
      "name": "ino-icon",
      "description": {
        "kind": "markdown",
        "value": "A light icon component for texts and other components.\nThis component is based on the ionicons (https://github.com/ionic-team/ionicons)\n\n#### Additional Hints\nThe component inherits styles, such as the text size, from the parent element. For custom styles, use the css properties of the component.\n\n**Clickable icon:** Make an icon interactive with the optional attribute `clickable`. Clickable icons emit a `clickEl` event.\n\n#### Add icons\nIf 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.\n\n> **Note:** To use the provided icons in your consumer project, you need to copy all contents of\n> `node_modules/@inovex.de/elements/dist/inovex-elements/ino-icon` into your `dist/ino-icon` folder. All icons are expected\n> to be located in `ino-icon/` at runtime. Please refer to the Storybook documentation to get detailed instructions\n> on how to integrate the icons with Angular, React or plain JavaScript.\n\nAlternatively, you can also just provide the URL to your preferred icon by setting the `src` property accordingly."
      },
      "attributes": [
        {
          "name": "clickable",
          "description": "Makes the icon clickable and allows to listen to the `clickEl` event."
        },
        {
          "name": "color-secondary",
          "description": "Colors the icon in the global secondary color"
        },
        {
          "name": "icon",
          "description": "The name of the icon of this element or an URL."
        },
        {
          "name": "src",
          "description": "Specifies the exact `src` of an SVG file to use."
        },
        {
          "name": "svg-title",
          "description": "Sets a meaningful svg title for assistive technologies."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-icon/ino-icon.tsx"
        }
      ]
    },
    {
      "name": "ino-icon-button",
      "description": {
        "kind": "markdown",
        "value": "\nA 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.\n\n## Additional Hints\n**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."
      },
      "attributes": [
        {
          "name": "activated",
          "description": "Marks the icon button as activated.\n\nUseful in cases where an external state controls the icon button activation.\nMakes the component **managed**."
        },
        {
          "name": "autofocus",
          "description": "Sets the autofocus for this element."
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "filled",
          "description": "Styles this element as filled icon button\nwith the `ino-color-scheme` as background color."
        },
        {
          "name": "icon",
          "description": "The name of the icon of this element."
        },
        {
          "name": "type",
          "description": "The type of this form.\n\nCan either be `button`, `submit` or `reset`.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-icon-button/ino-icon-button.tsx"
        }
      ]
    },
    {
      "name": "ino-img",
      "description": {
        "kind": "markdown",
        "value": "An image component with different styles that reserves a predefined space to avoid jumping contents."
      },
      "attributes": [
        {
          "name": "alt",
          "description": "The alternative text of this image."
        },
        {
          "name": "decoding",
          "description": "The decoding method of the native html input element.\nCan either be `async`, `auto` or `sync`.",
          "values": [
            {
              "name": "async"
            },
            {
              "name": "auto"
            },
            {
              "name": "sync"
            }
          ]
        },
        {
          "name": "fallback-icon",
          "description": "Icon used for fallback image if image can not be loaded"
        },
        {
          "name": "height",
          "description": "The fixed height of this image."
        },
        {
          "name": "img-list-item",
          "description": "Indicates that the image is a part of an image list component"
        },
        {
          "name": "label",
          "description": "Sets the label of the image. Note: Only works if image is part of\nan ino-img-list component."
        },
        {
          "name": "ratio-height",
          "description": "The ratio height for this image (default = 1).\nUse this attribute together with `ratio-width` to reserve a\nspace for the image during rendering and to prevent jumping contents."
        },
        {
          "name": "ratio-width",
          "description": "The ratio width of this image (default = 1).\nUse this attribute together with `ratio-height` to reserve a\nspace for the image during rendering and to prevent jumping contents."
        },
        {
          "name": "rounded",
          "description": "If true, styles the image with rounded borders."
        },
        {
          "name": "sizes",
          "description": "A set of rules to specify the usage of images sources that are\ndefined in the `srcset` attribute."
        },
        {
          "name": "src",
          "description": "The source of this image element."
        },
        {
          "name": "srcset",
          "description": "A set of sources of this image for different viewports or devices."
        },
        {
          "name": "usemap",
          "description": "An ID referencing to a defined map element for this image."
        },
        {
          "name": "width",
          "description": "The fixed of the image."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-img/ino-img.tsx"
        }
      ]
    },
    {
      "name": "ino-img-list",
      "description": {
        "kind": "markdown",
        "value": "The ino-img-list component is used in combination with the ino-img component to display an array of images\nin a grid-like format. It is based on the mdc-image-list component."
      },
      "attributes": [
        {
          "name": "enclose-label",
          "description": "Encapsulates the label of all img-list-items within the image"
        },
        {
          "name": "masonry",
          "description": "Enables the masonry image list variant, which allows the images to\nbe any combination of aspect ratios."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-img-list/ino-img-list.tsx"
        }
      ]
    },
    {
      "name": "ino-input",
      "description": {
        "kind": "markdown",
        "value": "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.\n\nUse 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."
      },
      "attributes": [
        {
          "name": "auto-focus",
          "description": "The autofocus of this element."
        },
        {
          "name": "autocomplete",
          "description": "The autocomplete property of this element."
        },
        {
          "name": "data-list",
          "description": "The id of the datalist child"
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "error",
          "description": "Displays the input field as invalid if set to true.\nIf the property is not set or set to false, the validation is handled by the `pattern` property.\nThis functionality might be useful if the input validation is (additionally) handled by the backend."
        },
        {
          "name": "helper",
          "description": "The optional helper text."
        },
        {
          "name": "helper-character-counter",
          "description": "Displays the number of characters. The maxlength-property must be set.\nThis helper text will be displayed persistently."
        },
        {
          "name": "helper-persistent",
          "description": "Displays the helper permanently."
        },
        {
          "name": "helper-validation",
          "description": "Styles the helper text as a validation message."
        },
        {
          "name": "label",
          "description": "The optional floating label of this input field."
        },
        {
          "name": "max",
          "description": "The max value of this element."
        },
        {
          "name": "maxlength",
          "description": "Limits the number of possible characters to the given number"
        },
        {
          "name": "min",
          "description": "The min value of this element."
        },
        {
          "name": "name",
          "description": "The name of this element."
        },
        {
          "name": "outline",
          "description": "Styles the input field as outlined element.\n\nThis property is immutable which means that it should not be changed after its first initialization.\nChanging this property at runtime causes problems in combination with the floating label.\nYou can read more about this issue [here](https://github.com/inovex/elements/issues/1216)."
        },
        {
          "name": "pattern",
          "description": "The validation pattern of this element."
        },
        {
          "name": "placeholder",
          "description": "The placeholder of this element."
        },
        {
          "name": "required",
          "description": "Marks this element as required."
        },
        {
          "name": "show-label-hint",
          "description": "If true, an *optional* message is displayed if not required,\notherwise a * marker is displayed if required"
        },
        {
          "name": "step",
          "description": "The step value of this element. Use `any` for decimal numbers",
          "values": [
            {
              "name": "any"
            }
          ]
        },
        {
          "name": "type",
          "description": "The type of this element (default = text).",
          "values": [
            {
              "name": "color"
            },
            {
              "name": "email"
            },
            {
              "name": "number"
            },
            {
              "name": "password"
            },
            {
              "name": "search"
            },
            {
              "name": "tel"
            },
            {
              "name": "text"
            },
            {
              "name": "url"
            },
            {
              "name": "week"
            }
          ]
        },
        {
          "name": "unit",
          "description": "Displays the given unit at the end of the input field."
        },
        {
          "name": "value",
          "description": "The value of this element. (**unmanaged**)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-input/ino-input.tsx"
        }
      ]
    },
    {
      "name": "ino-input-file",
      "description": {
        "kind": "markdown",
        "value": "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).\n\nThis component replaces the native behaviour with a custom `ino-button` with logic."
      },
      "attributes": [
        {
          "name": "accept",
          "description": "The types of files accepted by the server."
        },
        {
          "name": "autofocus",
          "description": "The autofocus of this element."
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "drag-and-drop",
          "description": "Enables drag-and-drop file input"
        },
        {
          "name": "drag-and-drop-secondary-text",
          "description": "Sets the secondary text of the drag and drop window"
        },
        {
          "name": "drag-and-drop-text",
          "description": "Sets the primary text of the drag and drop window"
        },
        {
          "name": "label",
          "description": "Sets the label of the select files button."
        },
        {
          "name": "multiple",
          "description": "Indicates whether the user can enter one or more values."
        },
        {
          "name": "name",
          "description": "The name of this input field."
        },
        {
          "name": "required",
          "description": "Marks this element as required."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-input-file/ino-input-file.tsx"
        }
      ]
    },
    {
      "name": "ino-label",
      "description": {
        "kind": "markdown",
        "value": "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."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Colors the label in an light grey to indicate the disabled status for this element"
        },
        {
          "name": "for",
          "description": "Id of the associated form control"
        },
        {
          "name": "outline",
          "description": "Styles the label in an outlined style"
        },
        {
          "name": "required",
          "description": "Appends * to the label to make it appear as an required input in a form"
        },
        {
          "name": "show-hint",
          "description": "Shows a \"optional\" message, when not `required`;\nShows a * mark, when `required`"
        },
        {
          "name": "text",
          "description": "The text of the label itself"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-label/ino-label.tsx"
        }
      ]
    },
    {
      "name": "ino-list",
      "description": {
        "kind": "markdown",
        "value": "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.\n\nThis component is a composer to configure and wrap `list-item`s, `list-divider`s, `control-item`s and `nav-item`s.\n\n#### Additional Hints\nProvide `two-lines` to set proper style attributes for list items having a primary and secondary line."
      },
      "attributes": [
        {
          "name": "avatar",
          "description": "Configures the leading tiles of each row to display images instead of icons.\nThis will make the graphics of the list items larger."
        },
        {
          "name": "dense",
          "description": "Styles the list more dense, making it appear more compact."
        },
        {
          "name": "two-lines",
          "description": "Marks this element as list with items having two lines."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-list/ino-list.tsx"
        }
      ]
    },
    {
      "name": "ino-list-divider",
      "description": {
        "kind": "markdown",
        "value": "\nA 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.\n\nThis component is used as child of `ino-list` and `ino-menu` components."
      },
      "attributes": [
        {
          "name": "between-lists",
          "description": "Marks the divider as a separator between two `ino-list`\ninstead of `ino-list-item` elements."
        },
        {
          "name": "inset",
          "description": "Increases leading margin to match leading column in `ino-list-item`.\n\nOnly applicable if `betweenList` is `false`."
        },
        {
          "name": "padded",
          "description": "Increases margin on each side of the divider to match meta content\nin `ino-list-item`.\n\nOnly applicable if `betweenList` is `false`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-list-divider/ino-list-divider.tsx"
        }
      ]
    },
    {
      "name": "ino-list-item",
      "description": {
        "kind": "markdown",
        "value": "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.\n\nThis component is used as child of `ino-list` and `ino-menu` components."
      },
      "attributes": [
        {
          "name": "activated",
          "description": "Styles the row in an activated style.\n\nIn contrast to `selected`, use this for only one item\nand to mark it as permantently activated."
        },
        {
          "name": "disabled",
          "description": "Styles the row in a disabled style."
        },
        {
          "name": "secondary-text",
          "description": "Sets the secondary text of this list item.\n\nRequires `two-lines` on the parent `ino-list` element."
        },
        {
          "name": "selected",
          "description": "Styles the row in a selected style.\n\nIn contrast to `activated`, use this option to select one\nor multiple items that are likely to change soon."
        },
        {
          "name": "text",
          "description": "The primary text of this list item."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-list-item/ino-list-item.tsx"
        }
      ]
    },
    {
      "name": "ino-markdown-editor",
      "description": {
        "kind": "markdown",
        "value": "The **Preview Mode** supports following actions:\n\n| Actions ||||\n|---|\n| Link | Blockquotes | Unordered list / Bullet list | Headline 1 |\n| Italic | Strikethrough | Ordered list / Numbered  list | Headline 2 |\n| Bold | Inline code | Task list |\n\nAdditionally, there are a lot of predefined\n[keyboard shortcuts](https://tiptap.dev/api/keyboard-shortcuts#predefined-keyboard-shortcuts)\nprovided by the underlying [tiptap](https://tiptap.dev/) editor.\n\nThe **Markdown Mode** supports all syntax of [CommonMark](https://commonmark.org/help/) with two exceptions:\n\n * Support of strikethrough syntax (`~~TextToStrike~~`)\n * Support of task list syntax (`- [x] MyToDoTask`)\n * No support of image syntax. __Images are not allowed!__\n\n### Font Size Scaling\n\nThe 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.\n\n#### Base Font Size Variable\n`--ino-markdown-editor-font-size`: Sets the base font size for all text elements. Default is `16px`.\n\n#### Scaling Factors\n\n| Element | Scaling Factor | Calculated Size (Example) |\n|---------|----------------|---------------------------|\n| Base Font Size | 1x | Base size (e.g., 16px) |\n| Header 1 (h1) | 2x | Double the base size (e.g., 32px) |\n| Header 2 (h2) | 1.75x | 1.75 times the base size (e.g., 28px) |"
      },
      "attributes": [
        {
          "name": "initial-value",
          "description": "Initial `string` value of the markdown editor.\nReassigning this value do not change the editor state.\nThe value must contain a valid Markdown syntax."
        },
        {
          "name": "view-mode",
          "description": "Sets the view mode of the editor.\nCan be changed between `preview` (default), `markdown` and `readonly`.\nThe `markdown` mode is made for advanced users that know the Markdown syntax.",
          "values": [
            {
              "name": "markdown"
            },
            {
              "name": "preview"
            },
            {
              "name": "readonly"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx"
        }
      ]
    },
    {
      "name": "ino-menu",
      "description": {
        "kind": "markdown",
        "value": "A menu component that displays a list of choices on a temporary surface which opens and closes on anchor or item click.\nThe anchor element is the parent element.\n\nThe menu items consist of different variations of the `ino-list-item` component.\n\nIf you need a more customizable menu with a different type of elements or functionalities, have a look at the `ino-popover`."
      },
      "attributes": [
        {
          "name": "placement",
          "description": "Determines the position of the opened menu.\nUsually, the default value (`auto`) will work just fine.\nUse this if the positioning is off for some reason.",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "auto-end"
            },
            {
              "name": "auto-start"
            },
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-menu/ino-menu.tsx"
        }
      ]
    },
    {
      "name": "ino-nav-drawer",
      "description": {
        "kind": "markdown",
        "value": "A navigation drawer component designed to organize and facilitate user navigation in your app.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.\n\nUsage Note:\n- 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.\n- 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."
      },
      "attributes": [
        {
          "name": "anchor",
          "description": "Side from which the drawer will appear.\nPossible values: `left` (default), `right`.",
          "values": [
            {
              "name": "left"
            },
            {
              "name": "right"
            }
          ]
        },
        {
          "name": "open",
          "description": "Marks this element as open. (**unmanaged**)"
        },
        {
          "name": "variant",
          "description": "The variant to use for the drawer.",
          "values": [
            {
              "name": "dismissible"
            },
            {
              "name": "docked"
            },
            {
              "name": "mobile"
            },
            {
              "name": "modal"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-nav-drawer/ino-nav-drawer.tsx"
        }
      ]
    },
    {
      "name": "ino-nav-item",
      "description": {
        "kind": "markdown",
        "value": "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.\n\nThis component is used as child of `ino-list` and `ino-menu` components.\n\n> Note: This component's main use case is within the `ino-nav-drawer`."
      },
      "attributes": [
        {
          "name": "activated",
          "description": "Styles the row in an activated style.\n\nUse this for only one item\nand to mark it as permanently activated."
        },
        {
          "name": "disabled",
          "description": "Styles the row in a disabled style."
        },
        {
          "name": "sub-text",
          "description": "The secondary text of this list item used in a two-lined list."
        },
        {
          "name": "text",
          "description": "The text of this list item."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-nav-item/ino-nav-item.tsx"
        }
      ]
    },
    {
      "name": "ino-option",
      "description": {
        "kind": "markdown",
        "value": "An option component that can be used to add options to an ino-select component."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disables the option"
        },
        {
          "name": "selected",
          "description": "Selects the option"
        },
        {
          "name": "value",
          "description": "Value of the option"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-option/ino-option.tsx"
        }
      ]
    },
    {
      "name": "ino-option-group",
      "description": {
        "kind": "markdown",
        "value": "A wrapper component to be used for a group of ino-options. This component adds a non-selectable header before the options.\n\nBeyond 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)."
      },
      "attributes": [
        {
          "name": "label",
          "description": "Label of the group. If not set, this component serves as a wrapper component for dynamically added `ino-options`.\nWhen 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)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-option-group/ino-option-group.tsx"
        }
      ]
    },
    {
      "name": "ino-popover",
      "description": {
        "kind": "markdown",
        "value": "A Popover is a dialog which is bound to a specific element and appears next to it. Under the\nhood, [tippy.js](https://atomiks.github.io/tippyjs/) is used.\n\nThe Popover\nand [Tooltip](https://elements.inovex.de/dist/latest/storybook/?path=/story/notification-ino-tooltip--default-usage)\ncomponents are very similar. However, popovers are complex dialogs consisting of several HTML elements, while tooltips\ncan only display plain text."
      },
      "attributes": [
        {
          "name": "arrow",
          "description": "Shows an arrow pointing towards its trigger-element"
        },
        {
          "name": "attach-to-body",
          "description": "If set, attaches the popover element to the body.\nUseful to avoid overflow or z-index issues."
        },
        {
          "name": "color-scheme",
          "description": "Sets the color scheme of the popup.\n\nValid options include: `primary`, `light` and `dark`.",
          "values": [
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "primary"
            }
          ]
        },
        {
          "name": "controlled",
          "description": "Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`)"
        },
        {
          "name": "delay",
          "description": "The delay in milliseconds before `ino-popover` shows up or hides.\n\nIf only one number is given, the show and hide delay get the given delay duration.\n\nIf two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.\n\nDefaults to 0ms."
        },
        {
          "name": "distance",
          "description": "Displaces the popover away from, or toward, the anchor element in the direction of its placement.\nA positive number displaces it further away, while a negative number lets it overlap the anchor."
        },
        {
          "name": "follow-cursor",
          "description": "Determines if and how the popover follows the user's mouse cursor.",
          "values": [
            {
              "name": "horizontal"
            },
            {
              "name": "initial"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "for",
          "description": "The target id the popover belongs to.\nIf not given, the popover is attached to the element provided in the named slot (`popover-trigger`)\nor the parent component if a slot element does not exist."
        },
        {
          "name": "hide-on-blur",
          "description": "If true, hides the popper on blur."
        },
        {
          "name": "hide-on-esc",
          "description": "If true, hides the popper on esc."
        },
        {
          "name": "interactive",
          "description": "Use this if you want to interact with the popover content (e.g. button clicks)"
        },
        {
          "name": "placement",
          "description": "The placement of this popover.\nAccepted values: `top(-start, -end)`, `right(-start, -end)`,\n`bottom(-start, -end)`, `left(-start, -end)`",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "auto-end"
            },
            {
              "name": "auto-start"
            },
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "trigger",
          "description": "The trigger to show the tooltip - either click, hover or focus.\nMultiple triggers are possible by separating them with a space.",
          "values": [
            {
              "name": "click focus mouseenter"
            },
            {
              "name": "click focus"
            },
            {
              "name": "click mouseenter focus"
            },
            {
              "name": "click mouseenter"
            },
            {
              "name": "click"
            },
            {
              "name": "focus click mouseenter"
            },
            {
              "name": "focus click"
            },
            {
              "name": "focus mouseenter click"
            },
            {
              "name": "focus mouseenter"
            },
            {
              "name": "focus"
            },
            {
              "name": "mouseenter click focus"
            },
            {
              "name": "mouseenter click"
            },
            {
              "name": "mouseenter focus click"
            },
            {
              "name": "mouseenter focus"
            },
            {
              "name": "mouseenter"
            }
          ]
        },
        {
          "name": "visible",
          "description": "Programmatically show or hide the popover.\nCan only be used in controlled mode (see property `controlled`).\nUse the `visibleChanged` to sync the popovers' visibility state with yours."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-popover/ino-popover.tsx"
        }
      ]
    },
    {
      "name": "ino-progress-bar",
      "description": {
        "kind": "markdown",
        "value": "The `ino-progress-bar` is a linear progress bar based on the mdc-linear-progress component."
      },
      "attributes": [
        {
          "name": "buffer",
          "description": "Sets the buffer progress"
        },
        {
          "name": "indeterminate",
          "description": "Indicates whether the state of the progress bar is indeterminate"
        },
        {
          "name": "label",
          "description": "Sets the label of the progress bar"
        },
        {
          "name": "progress",
          "description": "Sets the progress of the progress bar.\nShould always be between 0 and 1"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-progress-bar/ino-progress-bar.tsx"
        }
      ]
    },
    {
      "name": "ino-radio",
      "description": {
        "kind": "markdown",
        "value": "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.\n\n#### Additional Hints\nClicking 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`."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Initially marks this element as checked.\nIf another ino-radio element in the same group receives `true`,\nthe value will be changed to false automatically."
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "name",
          "description": "The name of this element. Use the same name for radio groups"
        },
        {
          "name": "value",
          "description": "The value of this element."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-radio/ino-radio.tsx"
        }
      ]
    },
    {
      "name": "ino-radio-group",
      "description": {
        "kind": "markdown",
        "value": "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."
      },
      "attributes": [
        {
          "name": "alignment",
          "description": "Sets the alignment of the radios to either vertical or horizontal.",
          "values": [
            {
              "name": "horizontal"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "value",
          "description": "The value of the radio group.\nIf there is an ino-radio child with the given value, the radio-button will be checked and the other radio-buttons unchecked."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-radio-group/ino-radio-group.tsx"
        }
      ]
    },
    {
      "name": "ino-range",
      "description": {
        "kind": "markdown",
        "value": "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."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "discrete",
          "description": "Restricts the slider to only allow discrete values."
        },
        {
          "name": "markers",
          "description": "Mark this slider to show the steps of the range.\nOnly applicable if `discrete` is enabled."
        },
        {
          "name": "max",
          "description": "The max value of this element (**required**)."
        },
        {
          "name": "min",
          "description": "The min value of this element."
        },
        {
          "name": "name",
          "description": "The name of this element."
        },
        {
          "name": "ranged",
          "description": "Allows to input an interval.\nUse `valueStart` and `valueEnd` to provide values."
        },
        {
          "name": "step",
          "description": "The step size for this element.\nOnly applicable if `discrete` is enabled.\nIs used to calculate the number of markers."
        },
        {
          "name": "value",
          "description": "The value of this element.\nOnly applicable if not in ranged mode."
        },
        {
          "name": "value-end",
          "description": "The value of the right thumb.\nOnly applicable in ranged mode."
        },
        {
          "name": "value-start",
          "description": "The value of the left thumb.\nOnly applicable in ranged mode."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-range/ino-range.tsx"
        }
      ]
    },
    {
      "name": "ino-segment-button",
      "description": {
        "kind": "markdown",
        "value": "A button component that can be used in combination with the ino-segment-group component."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Activates the button"
        },
        {
          "name": "dense",
          "description": "Slightly decreases the size of the button"
        },
        {
          "name": "disabled",
          "description": "Disables the button"
        },
        {
          "name": "name",
          "description": "Name of the element"
        },
        {
          "name": "type",
          "description": "The type of the internal button in the element.\nThis can be 'submit', 'reset', or 'button'.\nIf not specified, the default type is 'submit'."
        },
        {
          "name": "value",
          "description": "Value of the element"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-segment-button/ino-segment-button.tsx"
        }
      ]
    },
    {
      "name": "ino-segment-group",
      "description": {
        "kind": "markdown",
        "value": "A button group that can be used as an alternative to drop-down menus."
      },
      "attributes": [
        {
          "name": "name",
          "description": "Name of the segment group"
        },
        {
          "name": "value",
          "description": "Value of the segment group"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-segment-group/ino-segment-group.tsx"
        }
      ]
    },
    {
      "name": "ino-select",
      "description": {
        "kind": "markdown",
        "value": "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.\n#### Additional Hints\nUse the custom `ino-option` component to add options to the select component. The `label` attribute sets an optional floating label for this element."
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "error",
          "description": "Displays the select as invalid if set to true.\nIf the property is not set or set to false,\nthe validation is handled by the default validation."
        },
        {
          "name": "helper",
          "description": "A helper text to display below the select element.\nBy default, non-validation helper text is always visible."
        },
        {
          "name": "helper-persistent",
          "description": "When the helper text is serving as a validation message,\nmake it permanently visible regardless of the select's validity."
        },
        {
          "name": "helper-validation",
          "description": "Indicates the helper text is a validation message.\nBy default validation message is hidden unless the select is invalid."
        },
        {
          "name": "label",
          "description": "The label of this element."
        },
        {
          "name": "name",
          "description": "The name of this element."
        },
        {
          "name": "outline",
          "description": "Styles this select box as outlined element."
        },
        {
          "name": "required",
          "description": "Marks this element as required."
        },
        {
          "name": "show-label-hint",
          "description": "If true, an *optional* message is displayed if not required,\notherwise a * marker is displayed if required."
        },
        {
          "name": "value",
          "description": "The value of this element. (**unmanaged**)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-select/ino-select.tsx"
        }
      ]
    },
    {
      "name": "ino-snackbar",
      "description": {
        "kind": "markdown",
        "value": "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."
      },
      "attributes": [
        {
          "name": "action-text",
          "description": "The text to display for the action button.\nIf no text is defined, the snack bar is displayed in an alternative feedback style."
        },
        {
          "name": "message",
          "description": "[DEPRECATED] Please use the default slot instead\nThe text message to display."
        },
        {
          "name": "open",
          "description": "Controls the visibility state of the snackbar.\nWhen set to `true`, the snackbar is displayed; otherwise, it is hidden."
        },
        {
          "name": "stay-visible-on-hover",
          "description": "If set to true, the timeout that closes the snackbar is paused when the user hovers over the snackbar."
        },
        {
          "name": "timeout",
          "description": "Sets the timeout in ms until the snackbar disappears. The timeout can\nbe disabled by setting it to a negative value."
        },
        {
          "name": "type",
          "description": "Changes the snackbar type. There are four types of messages: info, success, warning and error.",
          "values": [
            {
              "name": "error"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-snackbar/ino-snackbar.tsx"
        }
      ]
    },
    {
      "name": "ino-spinner",
      "description": {
        "kind": "markdown",
        "value": "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.\n\nThis 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."
      },
      "attributes": [
        {
          "name": "height",
          "description": "The height of this spinner (default = 40)"
        },
        {
          "name": "modal",
          "description": "If true, the spinner is shown as modal over the current app page."
        },
        {
          "name": "type",
          "description": "The type of this spinner.\nPossible values: `tile` (default), `bounce` or `circle`",
          "values": [
            {
              "name": "bounce"
            },
            {
              "name": "circle"
            },
            {
              "name": "tile"
            }
          ]
        },
        {
          "name": "width",
          "description": "The width of this spinner (defaul = 40)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-spinner/ino-spinner.tsx"
        }
      ]
    },
    {
      "name": "ino-switch",
      "description": {
        "kind": "markdown",
        "value": "Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Marks this element as checked. (**unmanaged**)"
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "name",
          "description": "The name of this element."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-switch/ino-switch.tsx"
        }
      ]
    },
    {
      "name": "ino-tab",
      "description": {
        "kind": "markdown",
        "value": "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."
      },
      "attributes": [
        {
          "name": "a-1-1y-controls",
          "description": "Contains the ID of the associated tab panel for accessibility purposes.\nThis property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role."
        },
        {
          "name": "a-1-1y-selected",
          "description": "Reflects the selected state of the tab for accessibility purposes.\nThis property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role."
        },
        {
          "name": "icon",
          "description": "Indicates a leading icon in the tab."
        },
        {
          "name": "indicator-content-width",
          "description": "Indicates that the tab only expands to the width of its content."
        },
        {
          "name": "label",
          "description": "[DEPRECATED] Please use the default slot instead.\nIndicates a label text in the tab."
        },
        {
          "name": "stacked",
          "description": "Indicates that the tab icon and label should flow vertically instead of horizontally."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-tab/ino-tab.tsx"
        }
      ]
    },
    {
      "name": "ino-tab-bar",
      "description": {
        "kind": "markdown",
        "value": "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."
      },
      "attributes": [
        {
          "name": "active-tab",
          "description": "Activates the tab at the given index (**unmanaged**)."
        },
        {
          "name": "auto-focus",
          "description": "Autofocus of tab on activation."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-tab-bar/ino-tab-bar.tsx"
        }
      ]
    },
    {
      "name": "ino-table",
      "description": {
        "kind": "markdown",
        "value": "The ino-table is a custom table used to display sets of data across multiple columns.\nIt currently supports different states (selected, active), sorting and loading indication.\n\n> The component is based on the [mdc-data-table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table)."
      },
      "attributes": [
        {
          "name": "loading",
          "description": "True, if the table is loading data.\n\nUse this in combination with a `ino-progress-bar` having `slot=\"loading-indicator\"` to provide an\nadditional horizontal loading bar."
        },
        {
          "name": "no-hover",
          "description": "If true, disables row hover styling.\n\nUseful for simples tables with few rows or columns."
        },
        {
          "name": "sort-column-id",
          "description": "Identifier of the column currently sorted by.\n\nNeeds to match the column ids provided on `ino-table-header-cell` elements."
        },
        {
          "name": "sort-direction",
          "description": "Direction of the column currently sorted by.",
          "values": [
            {
              "name": "asc"
            },
            {
              "name": "desc"
            }
          ]
        },
        {
          "name": "sticky-header",
          "description": "True, if table header stays visible on vertical scroll"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-table/ino-table.tsx"
        }
      ]
    },
    {
      "name": "ino-table-header-cell",
      "description": {
        "kind": "markdown",
        "value": "The `ino-table-header-cell` is a particular header cell to provide search and column sort behaviour on `ino-table`'s."
      },
      "attributes": [
        {
          "name": "autofocus",
          "description": "Marks the header as autofocused (used for searchable header cells).\n\nUse this in combination with the `data-ino-focus` attribute on\nthe actual search target element to focus a specific input element."
        },
        {
          "name": "column-id",
          "description": "A unique identifier of the column (used for sorting)."
        },
        {
          "name": "label",
          "description": "Name of the column."
        },
        {
          "name": "not-sortable",
          "description": "If true, the cell is **not** sortable.\nBy default, table header cells are sortable."
        },
        {
          "name": "search-icon",
          "description": "Identifier of the search icon (default `search`).\nUsed for date or list search columns."
        },
        {
          "name": "searched",
          "description": "True, if the column has been searched for this column.\nPersistent state to indicate the user that this column\nhas a search filter."
        },
        {
          "name": "sort-direction",
          "description": "The current sort direction of the column.",
          "values": [
            {
              "name": "asc"
            },
            {
              "name": "desc"
            }
          ]
        },
        {
          "name": "sort-start",
          "description": "The initial sort direction state (default `desc`).\n\nBy default, all columns are sorted descending followed by ascending.\nTo switch this order, set sort Start to asc.",
          "values": [
            {
              "name": "asc"
            },
            {
              "name": "desc"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-table-header-cell/ino-table-header-cell.tsx"
        }
      ]
    },
    {
      "name": "ino-textarea",
      "description": {
        "kind": "markdown",
        "value": "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.\n\n> **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."
      },
      "attributes": [
        {
          "name": "autofocus",
          "description": "The autofocus of this element."
        },
        {
          "name": "autogrow",
          "description": "An optional flag to allow the textarea adjust its height to display all the content.\nThe `rows` attribute can also be used to specify a minimum height. Use CSS to specify\na max-height for the textarea element. Once the height exceeds the max-height, autogrow\nwill re-enable the vertical scrollbar."
        },
        {
          "name": "cols",
          "description": "The number of cols of this textarea."
        },
        {
          "name": "disabled",
          "description": "Disables this element."
        },
        {
          "name": "label",
          "description": "The optional floating label of this input field."
        },
        {
          "name": "maxlength",
          "description": "The max length of this element."
        },
        {
          "name": "minlength",
          "description": "The min length of this element."
        },
        {
          "name": "name",
          "description": "The name of this element."
        },
        {
          "name": "outline",
          "description": "Styles the input field as outlined element."
        },
        {
          "name": "placeholder",
          "description": "The placeholder of this element."
        },
        {
          "name": "required",
          "description": "Marks this element as required."
        },
        {
          "name": "rows",
          "description": "The number of rows of this textarea."
        },
        {
          "name": "show-character-counter",
          "description": "Displays the number of characters. The maxlength-property must be set."
        },
        {
          "name": "show-label-hint",
          "description": "If true, an *optional* message is displayed if not required,\notherwise a * marker is displayed if required"
        },
        {
          "name": "value",
          "description": "The value of this element. (**unmanaged**)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-textarea/ino-textarea.tsx"
        }
      ]
    },
    {
      "name": "ino-tooltip",
      "description": {
        "kind": "markdown",
        "value": "A tooltip component that displays text when users hover over, focus on, or tap an element.\n\n> 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."
      },
      "attributes": [
        {
          "name": "arrow",
          "description": "Shows an arrow"
        },
        {
          "name": "color-scheme",
          "description": "Sets the color scheme of the tooltip.\n\nValid options include: `light`, `dark` or `primary`",
          "values": [
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "primary"
            }
          ]
        },
        {
          "name": "delay",
          "description": "The delay in milliseconds before `ino-tooltip` shows up or hides.\n\nIf only one number is given, the show and hide delay get the given delay duration.\n\nIf two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.\n\nDefaults to 0ms."
        },
        {
          "name": "for",
          "description": "The target id the tooltip belongs to.\nIf not given, the tooltip is attached to the parent component."
        },
        {
          "name": "header-text",
          "description": "Adds an optional header text to the `ino-tooltip`"
        },
        {
          "name": "label",
          "description": "The text shown in the tooltip.\n\n[DEPRECATED] Please use the default slot instead"
        },
        {
          "name": "placement",
          "description": "The placement of the tooltip.\nAccepted values: `top(-start, -end)`, `right(-start, -end)`,\n`bottom(-start, -end)`, `left(-start, -end)`",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "auto-end"
            },
            {
              "name": "auto-start"
            },
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "trigger",
          "description": "The trigger to show the tooltip - either `click`, `hover` or `focus`.\nMultiple triggers possible by separating them with a space.",
          "values": [
            {
              "name": "click focus mouseenter"
            },
            {
              "name": "click focus"
            },
            {
              "name": "click mouseenter focus"
            },
            {
              "name": "click mouseenter"
            },
            {
              "name": "click"
            },
            {
              "name": "focus click mouseenter"
            },
            {
              "name": "focus click"
            },
            {
              "name": "focus mouseenter click"
            },
            {
              "name": "focus mouseenter"
            },
            {
              "name": "focus"
            },
            {
              "name": "mouseenter click focus"
            },
            {
              "name": "mouseenter click"
            },
            {
              "name": "mouseenter focus click"
            },
            {
              "name": "mouseenter focus"
            },
            {
              "name": "mouseenter"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/inovex/elements/tree/master/packages/elements/src/components/ino-tooltip/ino-tooltip.tsx"
        }
      ]
    }
  ]
}